JavaScript基础-一揽子方案

JavaScript第1（变量、数据类型、运算符）

一、JavaScript是一种小型的、轻量级的、面向对象的、跨平台客户端脚本语言。

    对象是由“属性”和“方法”构成的，对JS的操作，就是对对象的操作，就是对“属性”和“方法”的操作。

JavaScript功能：1表单验证，2动态的HTML，3交互响应

<script></script>   

    JS的程序代码，放到<script></script>标记中

    <script>标记只有一个属性type，type的值必须是"text/javascript"。

二、常用两输出方法：

    1、document.write(str)---文档对象 .调用 方法 "内容" ;例：document.write("你好!");

    2、window.alert(str)---弹出警告窗口，窗口中的内容由str表示。例：window.alert("弹出的信息!");

三、JS中的变量

    1、变量的概念：变量是临时存储数据的容器。--变量是在内存中存在和运行的。

    2、变量的声明：语法1：var变量名称;语法2：var变量名称=变量值;例：var name;和var school="北京大学";

    3、变量的命名规则：变量可以包含的字符有：a-z、A-Z、0-9、_这些字符

        变量名区分大小写,只能以字母或下划线开头,不能以数字开头和使用系统关键字或保留字。

    4、给变量赋值:是使用“=”符号给变量赋值。（左边必须是变量，右边变量、常量、运算表达式）

四、变量的数据类型

    ---变量本身是没有类型的，而变量的值才有类型的区分。

    ---变量的之间的运算，其实是变量的值之间的运算。

    在JS中变量的数据类型有两大类：

    1、基本的数据类型(只有一个值)：数值型、字符型、布尔型、未定义型undefined、空型null。

    2、复合的数据类型(可以有多个值)：数组、对象、函数。

    数值型:整型、浮点型、NaN；（注意：NaN不等于任何值，包括不等于自身，使用时一般转为Boolean或String值）

    字符串型：用单引号或双引号，引起来的一串字符，就是“字符串型”。做运算时只能进行连接计算。

    布尔型：只有两个值true或false

    未定义型：undefined

    空型：null

五、JS中的运算符

    两个变量的类型必须一致才能进行运算，如果类型不一样，则需要将类型转成一致，然后再进行运算。

    1、算术运算符：+、-、*、/    注意：如果“+”有一个操作数是字符的话，则进行字符串“连接”运算。

    2、赋值运算符：=、+=        注意：如果左右两个数有一个是字符的话，则进行“连接”运算。

写程序的一般步骤

    变量初始化：声明变量，并赋初始值

    程序运算结果

    输出结果

JavaScript第2（类型转换、运算符、if、switch、while）

一、变量的类型转换

    无法自动转换时则手动转换。---只有同类型的变量才能直接运算，如果类型不同的话，首先将类型转成一致，然后再进行运算。

1、变量的数据类型转换

    1.1、变量类型判断---typeof……typeof是一元运算符，语法typeof(str)或typeof str

    返回值：六种类型字符串：“String”“Number”“Boolean”“Object(对象、数组、null）”“Function”“Undefined”

    a、其它类型转成布尔型：var a=0;    var result=Boolean(a);转换为boolean型是false;false的还有(NaN,"",undefined,null)

    b、其它类型转成字符型-全部相当于加"",直接成字符型

    c、其它类型转成数值型："",null,false转为数值0，其他"除纯数值"的一律转为NaN

2、从字符串中提取整数和浮点型

    a、从字符串中提取整数——系统函数parseInt()    //在一个字符串，从左到右提取整数，如果遇到非整数的内容，则停止提取。

    b、从字符串中提取浮点数——系统函数parseFloat()    //从左往右提取浮点型数值，如果遇到非浮点型数值，则停止提取。

    例：var a=parseInt("100.98px");    //结果100

    var a=parseInt("a100");        //结果NaN(第一个字符是非整型)

    var a=parseFloat(".9.100");    //结果0.9

二、JS运算符

1、算术运算符：+、-、*、/、%、++、--注：优先级++a>+>a++

    注意：/ 的使用，10/3=3.3333333333333335；这是弱类型语言JS与C、Java等强类型语言不同之处。

    a、“++”加1运算符，也称为自加1。---“++”有两种用法，可以作前缀(++i)，也可以作后缀(i++)

    （1）如果独立使用，那么 i++ 和 ++i 的结果是一样的。

    （2）如果给其它变量赋值，则 i++ 和 ++i 的结果就不一样了。

        例：a=10;b=a++;(结果a=11,b=10)先赋值后加1，如果a=10;b=++a;(结果a=11,b=11)先加1后赋值

    b、“--”减1运算符，自减1.

    “--”有两种用法，可以作前缀(--i)，也可以作后缀(i--)

    可以这样拆开来理解：    a=i--;a=i,i=i-1

                a=--i;i=i-1,a=i

2、赋值运算符：=、+=、-=、*=、/=、%=

    注意：+=、-=、*=、/=、%=是复合运算符，是一个整体，中间不能有空格。

3、比较运算符：>、<、>=、<=、==、!=、===、!==

    提示：比较运算符的运算结果是一个布尔值，也就是说只可能有两个值true或false。

4、逻辑运算符：&&(逻辑与)、||(逻辑或)、!(逻辑非)

5、window.prompt()弹出一个输入的对话框。语法：var str = window.prompt( text,[defaultText]);注意：此时获取的值str为字符串。

6、三元运算符(条件运算符)：?:

    描述：如果表达式1的结果为true，则执行“表达式2”的代码，否则，则执行“表达式3”的代码。

    语法格式（表达式1 ? 表达式2 : 表达式3）

    描述：如果条件为true，则执行“结果1”的代码，否则，执行“结果2”的代码

    语法格式（条件判断 ? 结果1 : 结果2）

7、if条件判断语句

    7.1、只判断真，不管假的情况        if(){  }

    7.2、既判断真，也判断假（二选一）    if(){  }else{  }

    7.3、多条件判断（多选一）        if(){  }else if(){  }else if(){  }else{如果以上条件都不满足则执行此代码}

8、switch分支语句，描述：根据一个变量的不同取值，来执行不同的程序代码。

    语法结构：注（case匹配用的是全等===）

    switch(变量)

    {

        case 值1:

        代码1;

        break;

        case 值2:

        代码2;

        break;

        case 值3:

        代码3;

        break;

        default:

        如果以上条件都不满足，则执行该代码;//default并不一定在最后，但一定最后执行。

    }

9、while循环结构

    变量初始化：声明变量并赋值    //循环三要素1：变量初始化

    while(条件判断){        //循环三要素2：条件判断

        //循环体代码；

        变量更新：如果变量不更新，会造成“死循环”//循环三要素3：变量更新

    }

        var a,b,c,d;

        var a=100;

        while(a>=100&&a<=999){

            b=parseInt(a/100);

            c=parseInt(a/10%10);

            d=a%10;

            if(a==b*b*b+c*c*c+d*d*d){

                document.write("<br>"+a);

            }

        a++;

        }//水仙花数153,370,371,407

JavaScript第3（for、数组、函数）

一、for循环结构:注意括号中的;分号

    1、for(变量初始化;条件判断;变量更新)//条件判断(true继续执行循环体，false结束循环)

        {

           循环体代码；

        }

    2、break:主要用来结束各种循环(退出循环)或者结束switch语句。包括：while、for、do while、for…in等。

    例：/*for循环结构*/

        for(var i=1;i<100;i++)//1变量初始化；2条件判断；4变量更新

        {

            if(i>50){

            break;//中断循环，break只能退出单层循环

            }

            document.write(i+" ");3执行循环体

        }

     3、continue语句——继续,continue只能退出单层循环，再回到循环体（变量更新）

    描述：continue语句，用于结束本次循环，而开始下一次新的循环。continue语句之后的循环体代码直接跳过。

    一般情况下，需要在break语句和continue语句之前，加一个条件判断if。---即写在if判断语句中。

二、JS数组

    1、数组概念：数组可以理解为“多个值的一个容器”。数组是一组数(值)的集合。

    var arr = [10,20,30,40,50];

    var arr = [“周更生” , “男” , 24 , “大专” , true , 2000 , 500 , “上海复旦大学”];

    2、数组元素，3、数组索引（下标），是从0开始的正整数。

    4、数组访问：方法是：数组变量名称，后跟一个中括号[]（例：arr[2]），中括号[]中是元素所在的下标或索引。

    5、数组元素的长度：数组中元素的个数，就是数组的长度。

    5.1-使用new关键字结合Array()系统函数，来-------创建一个数组

        var arr=new Array();//创建一个空的数组

        arr[0]="周更生";

        arr[1]="男";

        arr[2]="北方大学";//添加数组元素：如果指定的下标不存在，则为添加元素

        arr[2]="南方大学";//添加数组元素：如果指定的下标存在，则为替换元素

    document.write(arr);    //结果：周更生,男,南方大学

    5.2-使用[ ]来------创建一个数组

        var arr=["周更生","男","南方大学"];//结果：周更生,男,南方大学

    6、数组的操作

        a、数组元素的添加 b、数组元素的修改 c、删除一个数组元素delete arr[9];

        注意：delete删除的是数组元素的值，而元素还在（下标还在），也就是说，该元素所占的空间还在。

        d、数组的长度 var len=arr.length;//动态获取数组的长度

    遍历数组：循环和数组配合使用

三、函数的基本概念

    将一代常用的功能代码，给它起个名字，就叫“函数”。

    函数可以避免代码的重复编写。

    1、函数的特点：一次定义，多处调用。

    function getMax(a,b)    //1、函数的定义

    {

        var max;//最大值

        if(a>b){

            max=a;

        }else{

            max=b

        }   

        //document.write("最大值为："+max+"<br>");

        return max;//return语句执行之后，立即结束函数的运行

        document.write("OK");//return语句之后的代码将不再执行

    }

    document.write(getMax(5,8));//2、函数的调用，结果：8

    //注意：如果函数没使用return语句返回,则函数执行结果是undefined;

    2、函数的定义格式

    function functionName([形参1][,形参2][,形参3])    //function必须小写

    {                        //functionName命名规则与变量一样

        函数的功能代码;

        [return  参数]

    }

    ()：函数定义时的参数，参数可有可无，如果多个参数，中间用逗号隔开。没有参数则小括号不能省略。

    形参：又称“形式参数”。主要用来接收调用函数时传递过来的数据的。形参--只能是变量名称，不能是具体的值。

    {}中是函数的功能代码。

    return语句：是可选项。主要用来向调用函数者返回一个数据。

    return语句一旦执行，将立即中止函数运行(相当于退出函数)。return语句之后的其它代码将不再执行。

    3、函数的调用：使用分两步：(1)函数定义

    (2)函数调用---直接写函数，后跟小括号，()中是实参。例：show();

    4、函数的参数-形参和实参，两者个数必须一致。

    形参(形式参数)：定义函数时的参数，就是形参。形参不能是具体的值，只能是一个变量。

    实参(实际参数)：调用函数时传递的数据，就是实实在在的数据。

    5、return语句

    return语句主要用于结束函数的运行。而break语句主要用于结束各种循环。

    return语句执行后，那么return语句的函数代码将不再执行，并跳到大括号之后。

    return语句用于向调用函数者返回一个值。

    6、匿名函数，就是没有名字的函数。

    匿名函数，不能单独定义，也不能单独调用；一般是用来给其它变量赋值的。

    例：/*匿名函数*/

        var a=10;

        var a="abc";

        var a=true;

        var a=[10,20,30];

        var a=function(){

            document.write("我是一个匿名函数 ");

        }

        a();；

        var b=a;//将函数的地址复制一份传给变量b

        //此处函数不能带括号，如果带括号，是将函数的返回值传回给b

        b();//调用函数b---结果:我是一个匿名函数 我是一个匿名函数

JavaScript第4（对象String,Array局部全局，拷贝引用，二维）

一、局部变量和全局变量

    1.全局变量：指在函数外定义的变量，可以在函数内部直接使用。

        全局变量是在网页关闭时，全局变量就消失(释放空间)了。

    2.局部变量：指在函数内部定义的变量，局部变量在函数外部不能使用。

        局部变量是在函数调用完毕，就消失(释放空间)了。

二、拷贝传值和引用传地址

    1.拷贝传值：就是将一个变量的值，“复制”一份传给另一个变量，两个变量之间是相互独立的。

    计算机内存大致分两个区域，一个区域称“栈内存（速度相对快）”，另一个区域称为“堆内存”。

    例：基本数据类型都是拷贝传值。是将变量名和变量的值存在“栈内存”中。

    2、引用传地址：就是将一个变量的“地址”，复制传给另一个变量，这两个变量之间是相互关联。

    两变量指向“同一物”，要变大家一起变，修改其中一个变量的值，另一个变量也会改变。

    例：复合数据类型(数组、对象、函数)，一般都是引用传地址。复合数据类型在存储时，

    分成两个部分来存储。“栈内存”中存储变量的名称和数据地址。在“堆内存”中存储数据的详细内容。

    /*2.1变量之间的引用传地址*/

        var arr1=["周更生",24,"大专"];//定义一个数组

        var arr2=arr1;    //将变量arr1的地址复制一份传给arr2

        arr2[1]=25;        //对变量arr2进行修改

        document.write(arr1+"<br>"+arr2);//结果：周更生,25,大专 周更生,25,大专

        //两个变量之间是相互关联，要变一齐变

三、二维数组--arr[i][j]

    1.arrs=[[,,,],[,,,],[,,,]];    //创建二维空数组方式1

    2.var arrs=new Array();        //创建二维空数组方式2

    for(var m=0;m<3;m++){

        arrs[m]=new Array();    //注意此处代码

        for(var n=0;n<4;n++){

        arrs[m][n]=parseInt(arr[n]);

        m++;

        }

    }

    数组名称后跟两个连续的中括号。第1个[]表示第一层数组，第2个[]表第二层数组。[]中是元素所在的下标。   

    例：arr[3]=["13011057863","010-12345678","zgs@126.com"];//二维数组

对象的简单使用--程序中的对象是由属性和方法构成的。再简单的说：对象是属性和方法的集合。

        例：对象（人、车） 属性（姓名、品牌） 方法（行为、行驶）---万物皆对象

    JS中所有的内容都可以看成是一个“对象”。如：日期对象、数组对象、window对象、document对象等。

四、JS中的对象的分类

    （1）JS的内置对象

        所谓“内置对象”就是JS程序给我们写好的，我们直接使用即可。

        例：String对象,Date对象,Array对象,Math对象,Boolean对象,Number对象……

    （2）BOM和DOM对象

        BOM就是浏览器对象模型，将浏览器的各组件都看成是一个对象。如：window、location、history、screen等。

        DOM对象，就是把网页中的所有HTML标记都看成是一个对象。如：img对象、p对象、input对象等。

    （3）自定义对象

        可以根据自己项目的功能和特点，创建属于当前项目的对象。

    自定义对象的创建：

        方法1.使用new关键字，结合Object()系统函数，来创建一个空的对象

    例1：var obj=new Object();

        obj.name="周更生";//添加对象的属性

        obj.showInfo=function(){//添加对象的方法：方法就是函数

        var str="姓名："+obj.name;

        document.write(str);}

        obj.showInfo();//调用对象的方法

    在对象中只有属性，并没有方法;将一个函数作为数据，赋给一个属性，就变成方法。

        方法2：使用{}来创建对象

    例2：使用大括号{}来创建对象

        var obj={

            name    :"周更生",

            school    :"南方大学",

            showInfo:function(){

            var str="姓名："+this.name;

            str+="院校："+this.school;

            document.write(str+"<hr>");

            }

        };

        obj.school="北方大学";//修改对象属性的值

        /*obj.showInfo=function(){

                        document.write("OK");

                    }//修改对象的方法*/

        obj.showInfo();//调用对象的方法;就是调用函数

五、String对象介绍

        1属性length：var len=strObj.length;//获取字符串中字符个数（长度)

        2方法：toUpperCase(),toLowerCase()--大小写转换--例：var str1=str.toUpperCase();

            使用大小写转换方法时，需要定义一个新变量来存储转换后结果，则原数值不变。

        3charAt()方法--返回指定位置的一个字符。

            语法：var str = strObj.charAt(index);参数:index必填项。表示一个字符串下标。

            例：da=str.charAt(i);

        4String对象——indexOf()方法:通常用来取到某符号如后缀.的index。-即取下标-取值从0开始。

            描述：在原始字符串中,从左往右查找指定的字符,如果找到返回其下标,没有找到,返回-1。

            语法：var index = strObj.indexOf(char);------没找到,返回-1。//注意这里的-1，

        5String对象——lastIndexOf()方法-反向取下标

            描述：在原始字符串中，从右往左查找指定的字符，如果找到返回其下标，如果没有找到，返回-1。

            语法：var index = strObj.lastIndexOf(char);------没找到,返回-1。

        6String对象——substr()方法

            描述：可在字符串中抽取从startindex下标开始的指定数目的字符。

            语法：var str = strObj.substr(startindex,[length])

            length可选。指从start开始返回的子字符串的长度。如果省略，则返回start起到结束的所有字符。

                例：var str="Php基础班课程体系";

                var str2=str.substr(2,6);

                var str3=str.substr(-3);//startindex可取负值，从倒数第3个往后取字符

                alert(str2+"<br>"+str3);//结果窗口：p基础班课程 程体系

        7String对象——substring()方法

            描述：提取字符串中介于两个指定下标之间的字符。

            语法：var str = strObj.substring(startindex,[endindex])

            参数：startindex：从哪个下标起，开始提取子字符，包括当前下标处的字符。

                endindex：是可选的。指定结束字符的下标。如果省略，则一直返回到结束的所有字符。

            注意：返回的字符包含start处的字符，不含end处的字符。

            例：var str="abcdefgh";    var str1=str.substring(0,3);//结果：str1="abc";

        8String对象——split()方法——将字符串转成数组

            描述：用于把一个字符串分割成字符串数组。

            语法：var arr = strObj.split(分割符);

            例：var str = "星期日,星期一,星期二,星期三";

                var arr = str.split(",");  // arr = ["星期日","星期一","星期二","星期三"]

                var str="北京传智播客"; var arr=str.split("");//结果：北,京,传,智,播,客

六、Array对象：一个数组的变量，就是一个Array对象。

        1.Array对象——length属性

        描述：动态获取数组中元素的个数。语法：var len = arrObj.length;

        2.Array对象——join()方法——将数组转成字符串

        描述：用指定的连接符，将数组中各元素连成一个字符串。

            语法：var str = arrObj.join(连接符);

        参数：如果参数省略，默认是逗号。

            例：var arr=[10,20,30,40,50];var str=arr.join(",");//结果：10,20,30,40,50

        3.Array对象——reverse()方法---直接在原数组上操作，而不是生成一个数组副本

            描述：对数组中各元素反转顺序。语法：var arr = arrObj.reverse();//结果50,40,30,20,10

        4.数组元素的添加和删除

            delete运算符：可以删除数组元素或对象属性。数组的长度不会发生改变。

            删除数组元素的方法：shift()、pop()

            （1）shift()方法---直接在原数组上操作

            描述：用于把数组的第一个元素从其中删除，并返回第一个元素的值。

            说明：删除数组元素后，数组的长度将减1。

            语法：arr Obj.shift()

            （2）pop()方法---直接在原数组上操作

            描述：用于把数组的最后一个元素从其中删除，并返回最后一个元素的值。

            说明：删除数组元素后，数组的长度将减1.

            语法：arr Obj.pop()

        5.添加数组元素的方法：unshift()、push()

            （1）unshift()

            描述：向数组的开头添加一个或更多元素，并返回新的长度。

            语法：arr Obj.unshift(值1,[值2],[值3])

            提示：可以同时添加多个数组元素，之间用逗号隔开。

            （2）push()

            描述：向数组的结尾添加一个或更多元素，并返回新的长度。

            语法：arr Obj.push(值1,[值2],[值3])

    例：/*数组的操作方法--join(),reverse(),shift(),pop(),unshift(),push()*/

        //Array---join()方法——将数组转成字符串

        var arr=[10,20,30,40,50];

        var str=arr.join(",");        //join()方法——将数组转成字符串

        document.write(str+"<hr>");

        arr.reverse();            //reverse()对数组中各元素反转顺序。

        document.write(arr+"<hr>");//结果50,40,30,20,10

        var sts=arr.shift();        //shift()删除数组的第一个元素并返回该元素

        var stt=arr.pop();        //pop()删除数组的最后一个元素并返回该元素

        document.write(sts+"<br>"+stt+"<br>");//结果50 10

        document.write(arr+"<hr>");    //结果40,30,20

        var changs=arr.unshift(100);    //unshift()结果返回数组新长度4

        var changw=arr.push(90);    //push()结果返回数组新长度5

        document.write(changs+"<br>"+changw+"<br>"+arr+"<hr>");//结果4 5 100,40,30,20,90

JavaScript第5-(Date,Math,BOM和DOM)

一、Date对象

    使用系统关键字new来创建。

    1、创建Date对象的方法

    方法（1）创建当前的Date对象，不带任何参数。

        语法：var today = new Date()//Sat Dec 03 2016 14:49:08 GMT+0800 (中国标准时间)

        说明：today变量中包含了很多的日期时间方面的信息，可以通过相应的属性和方法调用。

        举例：var year = today.getFullYear();//2016

    方法（2）创建指定时间戳参数的Date对象，参数为时间戳---注意是毫秒ms。

        时间戳：是指1970年1月1日0时0分0秒，到现在的毫秒值。1秒=1000毫秒。

        语法：var date = new Date(1000000000000);K//结果：Sun Sep 09 2001 09:46:40 GMT+0800 (中国标准时间)

    方法（3）创建一指定日期时间字符串的Date对象，参数为时间日期字符串。

        语法：var date=new Date("年/月/日 时:分:秒");-----注意：加""分号

        例：var date=new Date("2016/12/3 15:00:00");//结果：Sat Dec 03 2016 15:00:00 GMT+0800 (中国标准时间)

    方法（4）创建一个由年、月、日、时、分、秒数值构成的多个参数的Date对象---慎用

        语法：var date = new Date(年,月,日,时,分,秒)-----星期和月份，年份可能输出错误-因为月份取值0-11

        例：var date = new Date(2016,12,11)；//结果：Wed Jan 11 2017 00:00:00 GMT+0800 (中国标准时间)

    2、Date对象的常用方法

        getFullYear()：    获取四位数字的年份，如：1999

        getMonth()：    获取月份，取值0-11。所以使用时必须+1,并且必须加括号：var month=(date.getMonth()+1);<-----注意！！

        getDate()：    获取天数。

        getHours()：    获取小时数。

        getMinutes()：    获取分钟数。

        getSeconds()：    获取秒数。

        getMilliseconds()获取毫秒值。

        getDay()    获取星期值(获取星期和日不要搞混),返回值为数字0-6；

        getTime()    距离1970年1月1日0时0分0秒过去了多少毫秒，时间戳。-用的较多

    例：//javascript-day4代码范例8.张三活了多少天

        var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];//星期日在最前

        var date1=new Date();

        var time1=date1.getTime();//getTime很常用，得到毫秒的时间戳

        var date2=new Date("1990/01/01 00:00");

        var time2=date2.getTime();

        document.write("张三活了多少"+(time1-time2)/1000/3600/24+"天<hr>");//张三活了多少9833.635527835648天

        var date3=new Date(time1+27*24*3600*1000);//得到10天后的日期对象

        var week=date2.getDay();//得到10天后星期-注意是getDay()

        var day10=date3.getDate();//得到10天后日

        document.write(arr[week]+"和"+day10+"日");//输出星期和日子

二、Math对象——数学对象

    Math对象是一个静态对象，也就是说不需要创建对象实例，直接使用。如：Math.abs(-10) = 10

    Math对象提供了数学方面运算的属性和方法。以下为Math对象常用的属性和方法

        Math.PI：圆周率

        Math.abs()返回数的绝对值。如：Math.abs(-9) = 9

        Math.ceil()对数进行上舍入(整数加1，小数去掉)。如：Math.ceil(9.8) = 10

        Math.floor()对数进行下舍入(去掉小数部分)。如：Math.floor(9.8) = 9

        Math.round()对数进入四舍五入。如：Math.round(5.4) = 5，Math.round(5.5) = 6

        Math.pow(x,y)返回x的y次幂。如：Math.pow(2,3) = 8

        Math.sqrt(x)返回x的平方根。如：Math.sqrt(9) = 3

        Math.random()，返回0-1之间的随机小数。如：Math.random() = 0.695081241249682

    Math.random()---随机数

    min=0,max=10    乘以10，再加0    //0-10之间的随机整数

    min=10,max=20    乘以10，再加10    //10-20之间的随机整数

    min=20,max=30    乘以10，再加20    //20-30之间的随机整数

    求任意两个整数之间随机整数的公式：Math.random()*(max-min)+min

三、BOM和DOM简介

    1、BOM

    BOM，Browser Object Model 浏览器对象模型。

    BOM提供了对浏览器各组件操作的属性和方法。

    浏览器各组件有哪些？

    window对象-可以看作BOM的根，window对象是所有其它对象的最顶层对象。

    location对象：地址栏对象-可以对地址栏中的信息进行读取和修改。

    history对象，screen对象，navigator对象（浏览器软件对象），

    document对象（文档对象，代表整个网页）是访问网页中各元素的起点对象。=DOM

        对所有子对象的访问，起点都是window对象，因此，window对象可以省略；

        例：window.document.body.bgColor="#ff0000"; //这是最原始的写法

        document.body较.bgColor="#ff0000";    //这是较原始的写法

    2、DOM

    DOM,Document Object Model文档对象模型。

    DOM提供了对网页中各标记操作的属性和方法。

    网页中各元素对象有哪些？

    <img>、<a>、<table>、<form>、<input>……

    提示：每一个HTML标记(元素)，都可以看成是一个对象。

    3、BOM和DOM只是一个接口

    BOM 和 DOM不是JS的部分，它们不是Netscape公司的产品，它们是W3C制定的操作网页的一种标准或规则。

    而BOM和DOM这样的标准，在浏览器中，以“对象”的形式得以存在。

    学习BOM和DOM就是学习相对应的对象的属性和方法。

JavaScript第6(Window对象，延时定时，节点树)

一、window对象:一个浏览器选项卡就是一个window对象。

    (1)window对象是最顶层对象，其它对象都是其子对象。window对象可省略:window.alert()-->alert()

    (2)window对象属性

    name:代表窗口的名称。

    innerWidth：窗口的内宽(不含滚动条、状态栏、菜单栏等)。IE中用document.documentElement.clientWidth来代替。

    innerHeight：窗口的内高(不含滚动条、状态栏、菜单栏、地址栏等)。IE中用document.documentElement.clientHeight来代替。

    parent：代表父窗口。self：代表当前窗口。top：代表最顶层窗口。

    (3)for in循环结构---for(变量名称 in 对象/数组){//循环体代码}

    for in循环结构，可以循环数组中的元素，也可以循环对象的属性。

    如果遍历数组的话，每次循环取有效数值的下标。例：for(var index in arr){document.write(index+"<br>");｝

    如果遍历对象的话，每次循环取对象的属性名称。例：for(var name in window){document.write(n+" "+name+"<br>");}

    (4)window对象的方法

    1、alert()方法，2、prompt()方法

    3、confirm()方法---弹出一个确认对话框。

    语法：var flag = window.confirm(message);返回值：单击“确定”返回true，“取消”返回false。

    4、print()方法:描述：打印窗口的内容。语法：window.print();

    5、close()方法---语法：window.close();

    6、open()方法---语法：var winObj = window.open(url,name,options);

        options:指定新窗口的规格外观（width,height,left,top,menubar,location,status状态栏,toolbar工具栏,scrollbars滚动条）

        menubar:是否显示菜单栏，取值：yes或no    location:是否显示地址栏，取值：yes或no

        返回值：返回一个window对象的变量，可以通过该变量来跟踪该窗口。

        例：var url2="";    var name2="win2";

        var options2="width=400,height=300,left=200,top=100,menubar=no,scrollbars=yes";

        var winObj=window.open(url2,name2,options2);

        winObj.document.write("<h2>这是新窗口</h2>");

        winObj.setTimeout("close()",8000);//新窗口8秒钟后自动关闭

二、延时器方法

    1、setTimeout()---在指定的毫秒时间一到，就执行JS代码(执行一次)。

    语法：var timeout = window.setTimeout(code,millisec);

    参数code：表示任何合法的JS代码，一般是JS函数或对象方法，--函数必须用引号引起来--注意！

        如果函数要传参数，函数和参数都放到code。例:var timeout = window.setTimeout(function(){window.close();},1000);

    返回值：返回一个延时器id值，这个id值用于被clearTimeout()清除。

    注意：不能与循环一起使用，因为循环会在极短时间执行完毕，而不会等待millisec时间。

    2、clearTimeout()---清除由setTimeout()设置的延时器id。

    语法：window.clearTimeout(timeout)

三、定时器方法

    1、setInterval()---每隔指定毫秒值，来执行JS代码一次(周期性)。

    语法：var timer = window.setInterval(code,millisec);

    返回值：返回一个定时器的id，该id主要用来被clearInterval()清除。

    2、clearInterval()-用来清除由setInterval()设置的定时器的id。

    语法：window.clearInterval(timer)

四、screen屏幕对象--获取显示器屏幕信息--width、height、availWidth、availHeight

    screen对象的属性-width:屏幕的宽度，height-高度

    availWidth：屏幕的有效宽度，availHeight：有效高度，不包含任务栏。

五、nagivator浏览器软件对象,获取浏览器软件相关信息

    属性：appName,“Microsoft Internet Explorer”或“Netscape”

    appVersion:浏览器核心版本号，systemLanguage,userLanguage,platform-客户电脑操作平台

六、location对象--地址栏对象，读取或设置地址栏中的地址的各个部分。

    location对象的属性：

    href：完整的地址中的地址。可以实现JS跳转功能。location href=location href;(浏览器刷新)

    hash：指锚点名称，包含“#”符号。

    host：主机IP地址和端口号。hostname：域名。

    search：查询字符串。从?开始之后的字符。

    protocol：协议，如：http、https、ftp

    pathname：文件名名称。

    location对象的方法---reload()：相当于“刷新”按钮。

七、history对象--历史记录对象，提供一组方法，可以让我们去访问历史记录。

    history对象的方法

    back()返回上一条历史记录，相当于浏览器的“后退”按钮。

    forward()跳转到下一条历史记录。相当于浏览器的“前进”按钮。

    go(n)：跳转到指定的记录。参数n是整数。

    history.go(0) 跳转到当前网页，history.go(-1) 后退一步，history.go(-2) 后退两步

    history.go(1)  前进一步，history.go(2)  前进两步

八、DOM的官方定义:W3C的DOM，可以使脚本或程序，动态的访问或操作网页的内容、网页的样式、网页的结构。

    DOM（Document Object Model 文档对象模型）是W3C制定的一种标准，而不是Netscape公司的产品。

     DOM的分类

    核心DOM:提供了同时操作HTML文档和XML文档的公共的属性和方法。

    HTML DOM:针对HTML文档提供专用的属性和方法。

    XML DOM：针对XML文档提供的专用的属性和方法。

    事件DOM:提供很多响应式的事件。如：onclick、onload、onmouseover、onmouseout、onchange等

    CSS DOM：可以通过JS来访问或操作CSS中的各属性。

九、HTML节点树

    HTML节点树中节点之间的关系

    根节点：一个HTML文档只有一个根节点，就是<html>

    兄弟节点，父节点，子节点。

    DOM节点的分类

    document节点：代表整个网页，document是访问网页中各元素的节点。

    element元素节点：所有HTML标记。

    attribute属性：某个HTML标记构成的所有属性

    text文本节点：是节点树的最底层节点。

JavaScript第7（核心DOM 、节点访问、HTML DOM）

一、核心DOM的属性和方法

    1、节点访问

    nodeName:节点名称，就是指哪一个标记名称。

    nodeValue：节点的值或文本。只有文本节点才有这个属性，其它节点没有这个属性。

    （这里的文本是指“纯文本”，也就是说：不能含有HTML标记。)

    firstChild：第一个子节点。lastChild：最后一个子节点。parentNode：父节点。childNodes：节点列表，是一个数组。

    例：var node_html=document.firstChild;    alert(node_html);

    //结果弹出[objectHTMLHtmlElement]---当前是一个HtmlElement节点，是指<html>标记

    注意：核心DOM中的属性和方法，是针对HTML4.0开发的，而在XHTML1.0当中是无法使用的。

    如果你需要使用核心DOM来操作节点的话，应该把文档的DTD类型删除，否则可能找不到对应的节点。

    注意：在Firefox浏览器下，会把换行或空格当成一个文本节点。应该把所有的空白都清除掉。

    查找<html>节点的两种方法

    document.documentElement和document.firstChild都可以找到<html>节点

    查找<body>节点的两种方法

    document.body和document.firstChild.lastChild都可以找到<body>节点。

    2、节点属性

    nodeName.setAttribute(name,value)，给节点修改或添加一个属性。name为属性名称，value为属性的值。

    例：imgObj.setAttribute("src","images/01.jpg");

    nodeName.getAttribute(name)，读取节点属性的值。name为属性名称。例：var src = imgObj.getAttribute("src");

    nodeName.removeAttribute(name)，删除节点的属性。例：imgObj.removeAttribute("width");

    3、节点的操作：创建节点、追加节点、删除节点

    (1)creatElement()---创建节点-就是创建一个HTML标记

    语法：var nodeName=document.creatElement(tagName);

    参数：tagName就是要创建的HTML标记的名称，不包含尖括号。

    说明：createElement()方法，它是document对象的一个方法，必须以document对象开头。

    返回值：返回一个创建的节点对象。例：varimgObj = document.createElement("img");

    （2）appendChild()

    描述：将一个已创建的节点，挂载到哪一个父节点下。换句话说：将创建的节点，挂载到HTML节点树上。

    语法：parentNode.appendChild(childNode);举个栗子：document.body.appendChild(imgObj);

    (3)removeChild()---从某一个父节下，删除某一个子节点。

    语法：parentNode.removeChild(childNode);举个栗子：document.body.removeChild(imgObj)

    自己删除自己：childNode.parentNode.removeChild(childNode);

二、HTML DOM---使用HTML DOM对节点的访问将变的十分方便。   

    HTML DOM的新特性

    每一个HTML标记和其属性，与对应的元素对象及其属性一一对应如：<img>就是一个img元素对象。

    HTML DOM中访问HTML元素的方法

    1、getElementById()--根据id来查找网页中的对象。

    语法：var obj = document.getElementById(id);--参数：id为网页标记的id属性的值。然后返回该对象。

    例：    HTML代码：<img id = “img01”src = “images/01.jpg”  />

        JS代码：var imgObj = document.getElementById(“img01”);

    2、getElementsByTagName()--根据HTML标记名称来找对象。

    语法：var arrObj = parentNode.getElementsByTagName(tagName)

    参数tagName：是指要查找的HTML标记的名称，不带尖括号。如：img、div、input

    arrObj：如果找到了该标记，将返回一个数组对象，数组中的元素可以是多个。

    例：var arr_li_obj = ulObj.getElementsByTagName(“li”)

三、元素对象的属性

    1、元素对象属性的分类

    核心DOM中的属性和方法：nodeName,nodeValue,firstChild,lastChild,parentNode,childNodes,setAttribute(),getAttribute(),removeAttribute(),createElement(),removeChild(),appendChild()

    对应的HTML标记的属性：以<img>标记为例：id,class,style,width,border,align,title,onclick,onmouseover,onmouseout等

    HTMLDOM中的属性：tagName,innerHTML,offsetWidth,offsetHeight,scroolWidth,scrollHeight等

    2、HTMLDOM中的专有属性

    tagName：指HTML标记的名称，功能与nodeName一样。

    id：与标记的id属性一样。

    className：对应于HTML标记的class属性。

    title：对应于HTML标记的title属性。

    innerHTML：读取或修改HTML标记的内容，该内容可以包含HTML标记。---比较常用，复制内容

    offsetWidth：指容器的可见宽度，【容器的宽度】。只读属性。只能读不能改。

    offsetHeight：指容器的可见高度，【容器的高度】。只读属性。例dome1.style.height=dome.offsetHeight+"px";

    scrollWidth：指文本元素的总宽度，【文本的宽度】。只读属性。

    scrollHeight：指文本元素的总高度，【文本的高度】。只读属性。

    scrollTop：指元素内容向上滚动了多少距离，换句话说，就是滚动条向下移动了多少距离。可读可写。

    scrollLeft：指元素内容向左滚动了多少距离，换句话说，就是滚动条向右移动了多少距离。可读可写。

    onscroll事件属性：当拖动滚动条时，调用JS函数。

    当scrollTop+offsetHeight容器的高度-边框的高度>=scrollHeight的时候，即到达底部。

    常用scrollTop++来实现滚动。《《-----注意：使用时必须保证盒子高度小于内容高度，并且内容必须全部在盒子中（overflow:hidden）

    this---当前对象

JavaScript第8（CSS DOM 、事件DOM、Event事件 ）

一、CSS DOM主要用来控制网页元素的样式（格式）。

    可以实现动态改变元素的样式，主要是用JS来改变样式。

    给元素对象添加样式有几种方法？

    核心DOM的setAttribute()方法来实现。例：imgObj.setAttribute("style","border:2px solid red");

    通过HTMLDOM来实现。例：imgObj.style="border:2px solid red;width:400px;";

    通过CSSDOM来实现。    例：imgObj.style.width="400px";

    style对象

    每一个HTML标记和其属性，都可以看成一个元素对象和其属性。

    每一个HTML标记都有一个style的公共属性，但是这里的style属性又是一个style对象。

    style对象属性，与CSS中的属性一一对应，但是（多个单词时的名称）名称不一样。

    转换方法:第1个单词全小写，后面的每个单词首字母大写，并去掉中划线。

    例:background-color转换后backgroundColor（由于命名规则的原因，其中不能有-，否则出错，建议用驼峰命名）

二、事件DOM

    1、事件概述：用户与网页的交互是通过事件来实现的。

    一般来说，当事件发生时(条件)，去执行JS代码(动作)，JS代码用来实现某项功能。

    2、常用onload,onclick,onmouseover,onmouseout,onscroll,ondblclick,onchange,onsubmit,onreset,onfocus,onblur(失去焦点)……

    3、事件属性：HTML标记都会有相应的事件属性，对应的元素对象也有相应的属性。如：onclick

    HTML标记的事件属性不分大小写，对应的元素对象的事件属性是区分大小写，且必须全小写。

    （1）HTML标记的事件属性---例:var imgObj=document.getElementById("img01");//获取HTML对象imgObj.width=imgObj.width*2;//使用对象-HTML写法

    （2）元素对象的事件属性---例:var imgObj=document.getElementById("img01");//获取对象imgObj.οnclick=changePic;//创建事件--事件DOM写法

    4、参数的问题：如果是事件DOM，无需传递this、event参数，系统会帮忙传递，，在函数内部可直接使用this、event；

        如果是HTML写法，必须手动传递this、event参数，并且在函数定义里接收才可以使用。

三、Event事件

    1、Event对象简介---当事件发生后，会自动向调用函数传递一个event参数。这个event参数可以记录当前事件发生时的环境信息。

    如：鼠标单击时的坐标，以及当前事件的类型等。这个event参数就是一个event对象，这个event对象是“短暂”存在的。

    2、DOM中的event对象

    （1）引用event对象的方法

    1在HTML事件属性下，引入event对象:例1<img src="images/01.jpg" οnclick="get_xy(event)"/>;2function get_xy(e){var x=e.clientX;alert(x);}

    2在元素对象下，引入event对象:例1获取imgObj对象，2:imgObj.οnclick=get_xy;3:function get_xy(e){var x=e.clientX;alert(x);}

    （2）DOM中event对象有哪些属性

    clientX，clientY鼠标单击点，距离浏览器窗口左边/顶边的的距离。pageX，pageY鼠标单击点距离网页左边/顶边的的距离

    screenX，screenY鼠标单击点，距离屏幕左边/顶边的的距离。type：当前事件的类型。例：事件类型为：click

    3、IE中的Event对象--只能在IE中使用。

    （1）IE中如何引入event对象

    在IE中，不需要传递event对象参数，因为在IE中，event对象是当成window的一个属性来存在的。

    因此，可以直接通过window.event或evnet直接在函数中来调用。例：var x=window.event.clientX();

    （2）IE中event对象的属性有哪些？

    clientX，clientY单击点距离浏览器窗口左边/顶边的距离。x，y单击点距离网页顶边的距离。screenX，screenY；type：当前的事件类型。

JavaScript第9（form对象 ）

一、修改数量，进行统计。

    onBlur事件属性：当失去焦点时（光标从输入框移走），调用JS函数。

    onFocus事件属性：当获得焦点时（光标定位到输入框），调用JS函数。

    例：<input onBlur="productCount()" type="text" value="1">

二、表格对象的常用属性

    一个<table>标记，就是一个table对象。

        rows：获取表格中所有的行构成的一个数组对象。cells：获取某一行中所有单元格构成的一个数组对象。

        toFixed()方法:将一个数值四舍五入后转成字符串，并保存指定的小数位数。

    语法：numObj.toFixed(n)    参数：n是要保留的小数位数。例：var a = 100.987654321;a = a.toFixed(2); // a = 100.99

三、form对象

    1、form对象简介

    一个<form>标记，就是一个form对象。

    <form>标记的属性，与form对象的属性，一一对应。

    2、form对象属性

    name：表单的名称。id：表单的id。

    method：表单的提交方法，取值：GET和POST。

    action：表单数据的处理程序，一般是PHP程序。style：对应于元素的style属性。

    enctype：表单数据的编码方式，主要用在POST提交方式。

    3、form对象方法

    submit()：提交表单，与<input  type = “submit”  value = “提交表单” />功能一样。

    reset()：重置表单，与<input  type = “reset” value = “重新填写” />功能一样。

    4、form对象事件属性---注意submit()方法和onsubmit的本质区别，一个是方法一个是事件。

    onsubmit：当单击“提交”按钮时，onsubmit事件就发生了。主要用于表单验证。

    onreset：当单击“重置”按钮时，onreset事件就发生了。

四、获取表单元素的方法

    1、通过id找对象 var formObj=document.getElementById("form1");

    2、通过name来找对象——推荐（当<form name="form1"></form>时）

    如果通过name来找表单元素对象的话，起点必须是document。   

    查找表单元素对象的方法：document.formObj.elementObj    1、获取form的name值：var inputObj=document.form1.username;

    通过name来找表单元素对象的话，必须使用以上的三层结构来找。2、inputObj.value="请输入用户名";

    document：代表整个网页，是查找表单元素的起点。

    formObj：代表要查找的表单元素。

    elementObj：代表要查找的表单中具体的元素对象的name的值。

五、事件返回值

    事件的返回值，会影响默认动作的执行。如：<a>标记的返回值，会影响目标文件的打开。

    如果事件返回false，则会阻止默认动作的执行；如果事件返回true或空，默认动作将会继续执行。

    formObj.οnsubmit=function(){return false;}//返回false则无法提交

    注：<input  type="submit" value="提交表单" οnclick="return checkForm()"/>这里的return不能漏了。

    哪些事件属性，会受到事件返回值的影响呢？主要是有两个事件：onclick、onsubmit

六、表单提交和验证方法

    1、通过submit按钮，结合onsubmit事件实现（推荐使用）

    2、通过submit按钮，结合onclick事件实现

    3、通过button按钮，结合submit()方法来实现

七、input对象---一个<input>标记，就是一个input对象。

    <input>标记的类型：单行文本框、单行密码框、单选按钮、复选框、普通按钮、提交按钮、重置按钮、文件域等。

    1、input对象的属性name，value，size：文本框的长度，readonly，disabled，maxlength，checked：默认选中。

    type：input标记的类型。如：text、password、radio、checkbox、button、submit、reset、file

    2、input对象的方法---focus()：获得焦点，blur()：失去焦点，select()：选中文本

    3、input对象的事件---onfocus：当获得焦点时，当光标定位到文本框中时，onblur：当失去焦点时，光光标从文本框中移出时

八、select对象---一个<select>标记，就是一个select对象。

    1、select对象的属性：name，length：指定<option>标记的个数。

    selectedIndex：默认选中的<option>的索引值，<option>的索引值，也就是从0开始的正整数。

    options[]：可以通过该数组，去访问每一个option元素。

    2、select对象的事件

    onchange：当下拉列表的选项内容发生改变时，去调用JS的函数。

    3、option对象---一个<option>标记，就是一个option对象。

    option对象的常用属性

    text：指<option>和</option>之间的文本信息。value：指<option>标记的value属性的值。

/*一个下拉菜单，当菜单发生改变的时候，选中项的option的值显示在下拉列表的下面*/

JS代码：var selecObj;

    var formObj;

        window.οnlοad=function()

        {

            formObj=document.form1;

            selecObj=formObj.selec;

            selecObj.οnchange=textView;

        }

        function textView()

        {

            var divObj=document.getElementById("div1");

            //divObj.innerHTML=selecObj.options[selecObj.selectedIndex].value+"……"+selecObj.options[selecObj.selectedIndex].text;

            divObj.innerHTML=this.options[this.selectedIndex].value+"……"+this.options[this.selectedIndex].text;

            console.log(this.options[this.selectedIndex].value);//打印日志

        }

/************************************************************************************/

HTML代码:<form name="form1">

        <select name="selec">

            <option value="qqq">请求权</option>

            <option value="www">万维网</option>

            <option value="eee">二二二</option>

            <option value="rrr">任溶溶</option>

            <option value="ttt">弹弹堂</option>

        </select>   

    </form>

    <div id="div1"></div>

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

        var arr=[1,5,9,7,6,2,6,5,19,1,5,11,1];

        window.οnlοad=function(){

            var divObj=document.getElementById("div1");

            divObj.innerHTML=arr;

            console.log(arr);

        }//结果在div里显示1,5,9,7,6,2,6,5,19,1,5,11,1

注意：要取到divObj对象，必须先window.onload加载div

innerHTML在JS是双向功能：获取对象的内容或向对象插入内容。

获取id为aa的对象的内嵌内容var str=document.getElementById("aa").innerHTML

向id为dd的对象插入内容document.getElementById("dd").innerHTML=str;//把str的内容插入到div.