【javascript阶段性总结】

js被引入的方式

1、内嵌脚本
    <input type="button" value="button" οnclick="alert('xxx')" />
2、内部脚本
    <script type="text/javascript">
        alert("xxx");
    </script>
3、外部脚本
    首先先创建一个js文件
    其次在html中引入

    <script type="text/javascript" src="demo1.js"></script>

js基本语法

1、变量

1.1、
    var x = 5;
    x = 'javascript';
    var y = "hello";
    var b = true;
1.2、

    x = 5;

2、原始数据类型

2.1、number:数字类型
2.2、string：字符串类型
2.3、boolean:布尔类型
2.4、null:空类型

2.5、underfind:未定义

注意：number、boolean、string是伪对象

类型转换：
    number\boolean转成string
        toString();
    string\boolean转成number
        parseInt()
        parseFloat()
        boolean不能转
        string可以将数字字符串转换成number 如果“123a3sd5” 转成123
    强制转换
        Boolean() 强转成布尔
            数字强转成布尔  非零就是true   零就是false
            字符串强转成布尔  非“”(空字符串)就是true   空字符串“”就是false
        Number() 强转成数字
            布尔转数字 true转成1  false转成0

            字符串转数字 不能强转

3、引用数据类型

var obj = new Object();

var num = new Number();

4、运算符

4.1、赋值运算符

4.2、算数运算符

    + - * / %
    +: 遇到字符串变成连接
    -：先把字符串转成数字然后进行运算
    *: 先把字符串转成数字然后进行运算

    /: 先把字符串转成数字然后进行运算

4.3、逻辑运算符

    && ||

4.4、比较运算符

    < > >= <= != ==

        ===:全等：类型与值都要相等

4.5、三元运算符

4.6、void运算符

    <a href="javascript:void(0);">xxxxxx</a>

4.7、类型运算符

    typeof:判断数据类型 返回我的数据类型
    instanceof：判断数据类型 是否是某种类型
    var obj = new Object();
    alert(typeof obj);//object

    alert(obj instanceof Object);//true

5、逻辑语句

5.1、if-else

    条件:

    数字非0 字符串非空====true

5.2、switch

5.3、for

5.4、for in

    var arr = [1,3,5,7,"js"];
    for(index in arr){//index代表角标
        //alert(index);
    alert(arr[index]);

    }

js内建对象

1、Number

    创建方式：
        var myNum=new Number(value);
        var myNum=Number(value);
    属性和方法：
        toString():转成字符串

        valueOf()：返回一个 Number 对象的基本数字值

2、Boolean

    创建方式：
        var bool = new Boolean(value);
        var bool = Boolean(value);
    属性和方法：
        toString():转成字符串

        valueOf()：返回一个 Boolean 对象的基本值(boolean)

3、String

    创建方式：
        var str = new String(s);
        var str = String(s);
    属性和方法：
        length:字符串的长度
        charAt():返回索引字符
        charCodeAt:返回索引字符unicode
        indexOf():返回字符的索引
        lastIndexOf();逆向返回字符的索引
        split();将字符串按照特殊字符切割成数组
        substr():从起始索引号提取字符串中指定数目的字符
        substring():提取字符串中两个指定的索引号之间的字符

        toUpperCase();转大写

4、Array

    创建方式：
        var arr = new Array();//空数组
        var arr = new Array(size);//创建一个指定长度的数据
        var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
        var arr = [];//空数组
        var arr = [1,2,5,"java"];//创建数组直接实例化元素
    属性和方法：
        length:数组长度
        join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
        pop():删除并返回最后元素
        push()：向数组的末尾添加一个或更多元素，并返回新的长度
        reverse();反转数组

        sort();排序

5、Date

    创建方式：
        var myDate = new Date();
        var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
    属性和方法
        getFullYear():年
        getMonth():月 0-11
        getDate():日 1-31
        getDay()：星期 0-6
        getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数

        toLocalString();获得本地时间格式的字符串

6、Math

    创建方式：
        Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，
        不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
    属性和方法
        PI：圆周率
        abs():绝对值
        ceil():对数进行上舍入
        floor():对数进行下舍入
        pow(x,y)：返回 x 的 y 次幂
        random():0-1之间的随机数

        round():四舍五入

7、RegExp

    创建方式：
        var reg = new RegExp(pattern);
        var reg = /^正则规则$/;
    规则的写法：
        [0-9] 
        [A-Z]
        [a-z]
        [A-z]
        \d 代表数据
        \D 非数字
        \w 查找单词字符
        \W 查找非单词字符
        \s 查找空白字符
        \S 查找非空白字符
        n+ 出现至少一次
        n* 出现0次或多次
        n? 出现0次或1次
        {5} 出现5
        {2,8} 2到8次
    方法：

        test(str):检索字符串中指定的值。返回 true 或 false

js的函数

1、js函数定义的方式

1.1、普通方式
    语法：function 函数名(参数列表){函数体}
    示例：
        function method(){
            alert("xxx");
        }
        method();
1.2、匿名函数
    语法：function(参数列表){函数体}
    示例：
        var method = function(){
            alert("yyy");
        };
        method();
1.3、对象函数
    语法：new Function(参数1,参数2,...,函数体);
    注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
    示例：
        var fn = new Function("a","b","alert(a+b)");

        fn(2,5);

2、函数的参数

2.1、形参没有var去修饰
2.2、形参和实参个数不一定相等

2.3、arguments对象 是个数组 会将传递的实参进行封装

    function fn(a,b,c){
        //var sum = a+b+c;
        //alert(sum);
        //arguments是个数组 会将传递的实参进行封装
        for(var i=0;i<arguments.length;i++){
            alert(arguments[i]);
         }
    }

    fn(1,2,4,8);

3、返回值

3.1、在定义函数的时候不必表明是否具有返回值
3.2、返回值仅仅通过return关键字就可以了 return后的代码不执行
    function fn(a,b){
        return a+b;
        //alert("xxxx");
    }

    alert(fn(2,3));

4、js的全局函数

4.1、编码和解码
    encodeURI()   decodeURI()
    encodeURIComponet()  decodeURIComponent()
    escape() unescape()
    三者区别：
        进行编码的符号范围不同吧，实际开发中常使用第一种
4.2、强制转换
    Number()
    String()
    Boolean()
4.3、转成数字
    parseInt()
    parseFloat()
4.4、eval()方法
    将字符串当作脚本进行解析运行
    //var str = "var a=2;var b=3;alert(a+b)";
    //eval(str);
    function print(str){
        eval(str);
    }

    print("自定义逻辑");

js的事件

事件、事件源、响应行为

1、js的常用事件

    onclick:点击事件
    onchange:域内容被改变的事件
    onfoucus:获得焦点的事件

    onblur:失去焦点的事件

    onload:加载完毕的事件

2、事件的绑定方式

2.1、将事件和响应行为都内嵌到html标签中
    <input type="button" value="button"  οnclick="alert('xxx')"/>
2.2、将事件内嵌到html中而响应行为用函数进行封装
    <input type="button" value="button" οnclick="fn()" />
    <script type="text/javascript">
        function fn(){
        alert("yyy");
    }
    </script>
2.3、将事件和响应行为 与html标签完全分离
    <input id="btn" type="button" value="button"/>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert("zzz");
        };

    </script>

****this关键字
    this经过事件的函数进行传递的是html标签对象
    <input id="btn" name="mybtn" type="button" value="button123" οnclick="fn(this)"/>
    <script type="text/javascript">
        function fn(obj){
            alert(obj.name);
        }

    </script>

3、阻止事件的默认行为

    IE：window.event.returnValue = false;
    W3c: 传递过来的事件对象.preventDefault();
    //ie：window.event.returnValue = false;
    //W3c：传递过来的事件对象.preventDefault();
    //W3c标准
    if(e&&e.preventDefault){
        alert("w3c");
        e.preventDefault();
    //IE标签
    }else{
        alert("ie");
        window.event.returnValue = false;

    }

    //通过事件返回false也可以阻止事件的默认行为

    <a href="demo11.html" οnclick="return false">点击我吧</a>

4、阻止事件的传播

    IE：window.event.cancelBubble = true;
    W3c: 传递过来的事件对象.stopPropagation();
    if(e&&e.stopPropagation){
        alert("w3c");
        e.stopPropagation();
    //IE标签
    }else{
        alert("ie");
        window.event.cancelBubble = true;

    }

js的bom

1、window对象

1.1、弹框的方法：

    提示框：alert("提示信息");
    确认框：confirm("确认信息");
        有返回值：如果点击确认返回true  如果点击取消 返回false
        var res = confirm("您确认要删除吗？");
        alert(res);
    输入框：prompt("提示信息");
        有返回值：如果点击确认返回输入框的文本 点击取消返回null
        var res =  prompt("请输入密码？");

        alert(res);

1.2、open方法：

    window.open("url地址");

    open("../jsCore/demo10.html");

1.3、定时器：

    setTimeout(函数,毫秒值);
        setTimeout(
            function(){
                alert("xx");
            },
            3000
        );
    clearTimeout(定时器的名称);
        var timer;
        var fn = function(){
            alert("x");
            timer = setTimeout(fn,2000);
        };
        var closer = function(){
            clearTimeout(timer);
        };
        fn();
    setInterval(函数,毫秒值);
    clearInterval(定时器的名称)
        var timer = setInterval(
        function(){
            alert("nihao");
        },
        2000
        );
        var closer = function(){
            clearInterval(timer);

        };

2、location

location.href="url地址";

3、history

    back();
    forward();
    go();
     <a href="demo7.html">后一页</a>
    <input type="button" value="上一页" οnclick="history.back()">
    <input type="button" value="下一页" οnclick="history.forward()">

    <input type="button" value="上一页" οnclick="history.go(-1)">

    <input type="button" value="下一页" οnclick="history.go(1)">

js的dom

1、理解一下文档对象模型

    html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改

    在dom树当中 一切皆为节点对象

2、dom方法和属性