• javaScript核心基础


    JavaScript 是属于网络的脚本语言!

    JavaScript 作用:被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies(js也可创建cookie,在浏览器里面创建),以及更多的应用。

     

    引入使用JavaScript的方式

    标签内部引用  例: <a href="javascript:alert(0);">点击我</a>

     

    html页面引用   <script type="text/javascript">

     

    外部引用   <script type="text/javascript" src="index.js"></script>  好处:责任分离,可以让很多页面都来使用这个js文件

     

     

     

    引入JavaScript的位置    把引入js文件放到<div>之后

    全局函数使用

    encodeURI()--编码 decodeURI()--解码

    encodeURIComponent()编码 decodeURIComponent()解码

     

    编码与编码

     

    var url = "http://百度.com";

     

    var urlEncode = encodeURI(url);

     

    console.debug(urlEncode);

     

    //  http://%E7%99%BE%E5%BA%A6.com

    ②isNaN() 判断一个值是否不是数字

    isNaN(23) -> false  isNaN(“23”) -> false   isNaN(“sdf”) -> true

     

    ③将值转换成一个int----parseInt()

     

    eval计算 JavaScript 字符串,并把它作为脚本代码来执行

     

    eval("alert(2+1)");

     

    强大之处:里面是一个字符串,放到eval可以直接运行;

    全局属性()

    方法

    描述

    FF

    IE

    Infinity

    代表正的无穷大的数值。

    1

    4

    NaN

    指示某个值是不是数字值。

    1

    4

    undefined

    指示未定义的值。

    1

    5.5

     



     js对象

    1.创建一个对象

    2.给对象添加属性

    3.构造函数与this

     4值和引用传递分析:

    引用传递

    <script language="javascript">

    function Person(name,age){

    this.age = age;

    this.name = name;

    }

    function change(p1){

    p1.name = "李四";

    }

    var person1 = new Person("张三",18);

    change(person1); //传递地址

        console.debug(person1);//Person { age=18, name="李四"}

    </script>

    值传递 

    <script language="javascript">

     

    function changeValue(x){

     

    x = 5;

     

    }

     

    var x = 3;

     

    changeValue(x);

     

    alert(x);//3值传递

     

    </script>

     

     

     继承实例分析(有难度,不要求掌握)

    1.继承实例分析(有难度,不要求掌握)

    function ClassA(name){

    this.name = name;

    this.sayHello = function(){

    alert("hello,"+name);

    };

    }

    //继承

    function ClassB(name){

    this.newMethod = ClassA;

    this.newMethod(name);//相等于 ClassA(name)

    }

    var obj = new ClassA("小明");

    obj.sayHello();

    var obj = new ClassB("小张");

    1.obj.sayHello();

     本地对象(本地对象: ArrayBooleanDateMathNumberStringGlobal(内置对象)

     Jsjava一样 有个顶层对象 是Object

    主要属性:

    constructor-对象的构造函数--上面已经学习了

    prototype-使您有能力向对象添加属性和方法(原类型)--后面讲

    Boolean

     var x = new Boolean(true);//不用
    console.log(typeof x);
    var x = true;//推荐的使用
    console.log(typeof x);
    console.log(x);

     object newmethod.js:21:1

    true

     Date

     

    Math

    console.debug(Math.ceil(5.1));

    console.debug(Math.floor(5.1));

    console.debug(Math.round(5.1));

    console.debug(Math.max(5,7,3,56,-4));

    document.write(Math.max(7.25,7.30)); //7.3

     Math.min(4,56);

     产生随机数 0.0 ~ 1.0 之间的一个伪随机数。

    Math.random();

    Number

     String

    String表示字符串,学习里面的属性和方法

    length :(属性) 可以拿到字符串的长度

    var str = "abcde";

    console.debug(str.length);//5-

    ②substr(begin,length)

    substr:截取字符串(返回这截取后的字符串,原来的不变)

     *  第一个参数:从哪开始(从0开始算)

     *  第二个参数:截取多少个(如果没有这个参数,就全部截取)

    var str="Hello world!";

    console.debug(str.substr(3));  // lo world!

    console.debug(str.substr(3,2)); //lo

     ③substring(begin,end)

    var str="Hello world!";

    console.debug(str.substring(3));  // lo world!

    console.debug(str.substring(1,3)); //el

    concat(str1,str2)

    var str1 = "hello";

    var str2 = "world";

    var str3 = str1.concat(str2);

    console.debug(str3);//helloworld

    split("分隔符")

    var str1 = "张三,李四,后帝";

    console.debug(str1.split(","));// ["张三", "李四", "后帝"]

    charCodeAt(index)返回指定位置的unicode

    var str1 = "abcde";

    console.debug(str1.charCodeAt(0));//取到对应索引处的unicode

     数组

    1 数组的声明

     var arr4 = ["大娃","二娃","三娃","七娃"];

    2 数组的类与方法

    length : 拿到数组的长度

    join("$"):将数组转化成字符串   

    var arr = ["大娃","二娃","三娃","七娃"];

    console.debug(arr.join("$"));  //大娃$二娃$三娃$七娃(默认用,隔开)

    splice() 方法用于插入、删除或替换数组的元素。  

    var arr = ["大娃","二娃","三娃","四娃","七娃"];

       1.start:从哪个位置开始(必需)

     * 2.deletecount:删除几个元素(必需)

     * 3.items:添加的元素

     */

    arr.splice(3,1); //删除了四娃

    /arr.splice(4,0,"五娃","六娃"); //添加

    arr.splice(3,1,"水娃"); //修改

    console.debug(arr);

     for..in

    for(var key in person){

    console.debug(key);

    console.debug(person[key]);

    }

     prototype

    prototype-使您有能力向对象添加属性和方法(原类型)

    可以往类上面添加方法

     

     

    运用:有一个Date类,但是Date打印的效果不是我们想要的想要的效果,

    但是Date类里面 没有format方法,那我们就可以给他添加一个原型的方法

     BOM浏览器对象模型(BOMbrowser object model的缩写,简称浏览器对象模型

     

    console.debug(document);//可以拿到document对象

    console.debug(window.document);//和前面一样,window是顶级对象,默认不写

     ②连接对象 links

     

     document.anchors

     

    ④表单对象 forms

    console.debug(document.forms[0]);

    Window对象

    js里面消息三大交互

    ①alert(‘信息’):消息框

    //alert("你好1");

    ②prompt(‘提示信息’,默认值) 显示可提示的用户输入框,让用户输入

    //var inputText = prompt("请输入你的名字","如:孙悟空");

      Console.debug(inputText);

    ③confirm( )  : 确认框

    var flag = window.confirm("你确定要删除数据");

    console.debug(flag);

    <a href="http://www.baidu.com" onclick="javascript: return confirm('亲,你确定删除吗?')">删除</a>

     打开与关闭窗口

    ①window.open()方法:打开一个新窗口

    window.open("http://itsource.cn/");

     

     浏览器的位置与窗口大小

    moveBy(dx, dy)-移动偏移量

    moveTo(x, y)-移动到指定座标

    resizeBy(dw, dh)-窗口大小改变

    resizeTo(w, h)-窗口大小改变

    例:

    //往右移10个像素,往下移20个像素

    window.moveBy(10, 20);

    //把窗口大小变成宽150,高300像素

    window.resizeTo(150, 300);

    //改变窗口的宽变为150,高度不变

    window.resizeBy(150, 0);

    //称到屏幕左上角,屏幕坐标 (0,0)

    window.moveTo(0, 0);

    IE

    screenLeft -获得窗口所在X坐标值

    screenTop -获得窗口Y坐标值

    Mozilla(其它浏览器)

    screenX -获得窗口所在X坐标值

    screenY -获得窗口Y坐标值

    -----------------------------------------

    //兼容浏览器最佳方法

    var x = window.screenX || window.screenLeft;

    var y = window.screenY || window.screenTop;

    alert("X坐标=" + x + ", Y坐标=" + y);

      history(历史对象)

    ①history.back()函数,后跳;

    <a href="javascript:window.history.back()">向后跳</a>

     ②history.forward()函数,前跳;

      <a href="javascript:window.history.forward()">向前跳</a>

    ③history.go(index)函数,在浏览器历史记录中跳转,正数为前跳,负数为后跳

      history.go(1) 向前跳一个页面,go(2)向前跳两个页面

      history.go(-1) 向后跳一个页面

     location(位置对象)

    var loc = window.location;

    for(var name in loc){

        console.debug(name,loc[name]);//查看对象信息(了解内容)

    //跳转到某一个页面

    window.location.href = "my.html";

    navigator(浏览器的信息对象-了解)

    属性名称 说明

    appCodeName 产品名称

    appName 应用名称

    appVersion 版本号

    cookieEnabled 是否允许使用cookie

    language 语言

    oscpu 操作系统名称

    platform 操作系统平台

    product 产品代号或名称,比如Gecko

    productSub 产品发布日期20100701

    userAgent 客户端详细信息,比如:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.11)

    Gecko/20100701

    Firefox/3.5.1

    documet对象

    ①显示文章标题

      document.title=”杨呜呜”;--》可以去修改页面的标题

    ②改变页面背景色 document.bgColor=”blue”;

    ③document.write("1*1");显示到页面上

    定时器(掌握)

    ① setTimeout()到了多少时间后执行(只执行一次)--定时炸弹

         clearTimeout() :取消定时器

    setInterval():周期性定时器,每隔多长时间执行(不断执行)

      clearInterval() :取消定时器

    //每隔多长时间执行(不断执行)

    //第一个参数:执行的方法

    //第二参数:时间(毫秒)

     

     

  • 相关阅读:
    C++内置类型对象之间的转换
    快速排序
    面试题7:用两个栈实现队列
    面试题6:重建二叉树
    poj 3264(线段树)
    poj 3038
    poj 并查集
    poj 1270(toposort)
    poj 2503(字符串)
    poj 3687(拓扑排序)
  • 原文地址:https://www.cnblogs.com/wzscom/p/10409844.html
Copyright © 2020-2023  润新知