JS

javascript的简介

    是基于对象和事件驱动的语言，应用于客户端

    基于对象：提供了好多对象，可以直接拿来使用

    事件驱动：html做网站静态效果，javascript动态效果

    客服端：专门指的是浏览器

js的特点

    a 交互性：信息的动态交互

    b 安全性：js不能访问本地磁盘的文件

    c 跨平台性：java里面跨平台性，虚拟机，只要能够支持js的浏览器，都可以运行

    javascript和java的区别：

        1.    不同公司开发的

        2.javascript是基于对象的，java是面向对象

        3.java是强类型的语言，js是弱类型的语言

        4.javascript只需解析就可以执行，而java需要先编译成字节码文件，再执行

javascript的组成

1.ECMAScript：

        ECMA：欧洲计算机协会，制定的js的语法，语句

2.BOM：浏览器对象模型

3.DOM：文档对象模型

js和html的结合方式

1.使用一种标签

2.使用script标签，引入一个外部的js文件

        创建一个js文件，写js代码

js的原始类型和声明变量

js的原始数据类型

定义变量  都使用关键字 var

        1.String：字符串

              var str ="abc";

        2.number: 数字类型

               var m =123;

        3.boolean:true和false

                var flag=true；

        4.null

                var date =new Date();

                获取对象的引用，null表示对象引用为空，所有对象的引用也是object

        5.undifined

                定义一个变量，没有赋值

                var aa;

typeof();  查看当前变量的数据类型

js的语句

1.if判断语句

2.switch语句

            switch(a){

                    case 5:

                            break;

                      case 6:

                              break;

                        default;

                }

3.循环语句    for while  do-while

        while循环

            var  i=5;

            while(i>1){

                    alert(i);

                    i--;

            }

        for循环

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

}

js的运算符

1.js里面不区分整数和小数

    var j =123;

    alert(j/1000*1000);

在java中得到的结果是0

在js里面不区分整数和小数。123/1000=0.123*1000=123

2.字符串的相加和相减的操作

    var str="456";

      alert(str+1);   在java和js中的结果都是4561

       alert(str-1);  相减的时候，执行减法的运算

3.boolean类型也可以操作 

    如果设置成true，相当于这个值是1

    如果设置成false，相当于这个值是0

4.==和===的区别

 ==比较的是值

  ===比较的是值和类型

5.引入知识

    直接向页面输出的语句

    document.write("aaaa");

    可以向页面输出变量，固定值和html代码

js的数组

定义方式（三种）

    1.  var  arr ={1，2，3}        var arr={1，"4",true}

    2.使用内置对象  Array对象

                var arr1 =new Array（5）;

                arr1[0]=1

    3.使用内置对象  Array对象

                  var arr2=new Array(3,4,5)

数组里面有一个属性  length：获取到数组的长度

数组可以存放不同的数据类型的数据

js的函数

js里面定义函数有三种方法

1.使用一个关键字function

            function 方法名 （参数列表）{

                                方法体

                            返回值可有可无（根据实际需要）;

    }

2.匿名函数

                        var add =function{

                                方法体和返回值

}

3.动态函数

使用js里面的一个内置对象Function

        var add =new Function（"参数列表"，"方法体和返回值"）;

js的全局变量和局部变量

全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用

    在方法外部使用，在方法内部使用，在另一个script标签使用

局部变量：在方法内部定义一个变量，只能在方法内部使用

    如果在方法的外部调用这个变量，提示出错

script标签的位置

        建议把script标签放到后面

        如果现在有这样一个要求：

            在js里面需要获取到input里面的值，如果把script标签放到head里面

            会出问题

            html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值

            因为页面还没有解析到input那一行，肯定取不到

js的重载

什么是重载？ 方法名相同，参数列表不同

js里面是否有重载

js的String对象

创建string对象

        var str ="abc";

            属性：length 字符串的长度

   方法：

1.与html相关的方法

    bold():加粗

    fontcolor():设置字符串的颜色

    fontsize():设置字体的大小

    link():将字符串显示成超链接

    sub() sup(): 下标和上标    

2.与java相似的方法

    concat():连接字符串

            var str1="abc";

             var str2="dfg";

            document.write(str1.concat(str2));

    charAt():返回指定指定位置的字符串

    indexOf(): 返回字符串位置

    split():切分字符串，成数组

    replace(): 替换字符串

            传递两个参数    

                第一个参数是原始字符

                要替换成的字符

            var str6="abcd";

            document.write( str6.replace("a","Q"));

    substr()  substring()

        var str7="abcdefghijkl"

        document.write(str7.substr(5,5));  从第5位开始，向后截取五个字符

        document.write(str7.substring(3,5));   从第几位开始到第几位结束  【3，5）

 js的Array对象

创建数组（三种）

        var arr1= [1,2,3];

        var arr2=new Array(3);

         var arr3=new Array(1,2,3);

属性：length： 查看数组的长度

方法：   

            concat方法：数组的连接

                    var arr1=[1,2,3];

                     var arr2=[4,5,6];

            document.write(arr1.concat(arr2));

                join():根据指定的字符分割数组

                            var arr13=new Array(3);

                            arr13[0]="a";

                            arr13[1]="b";

                            arr13[2]="c";

                    document.write(arr13);

                    document.write("
")

                    document.write(arr13.join("-"));

                     document.write("

---

")

                        push方法：向数组末尾添加元素，返回数组的新的长度

                                如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去

                var arr15=["aaa","bbb","ccc"];

                var arr16=["www","qqq"];

                document.write("old array:"+arr15);

                document.write("old length:"+arr15.length);

                document.write("new length:"+arr15.push(arr16));

                document.write("new array:"+arr15);

                for(var i=0;i

                        alert(arr15[i]);

}

                    pop():删除最后一个元素，返回删除的那个元素

                        var arr17=["zhangsan","lisi","wangwu","zhaoliu"];

                        document.write("old array:"+arr17);

                        document.write("return:"+arr17.pop());

                        document.write("new array:"+arr17);

                    reverse():颠倒数组中的元素的顺序

js的Date对象

        js里面获取当前时间

                var date=new Date();

            document.write(date);

            document.write(date.toLocaleString());

            获取当前的年

                getFullYear():

                document.write("year:"+date.getFullYear());

            获取当前的月方法

            getMonth():

            返回的是0-11，如果想要得到准确的值需要+1；

            var date1=date.getMonth()+1;

            document.write("Month:"+date1);

             获取当前的星期

                getDay()

                返回的是0-6，星期日返回的是0，

                document.write("week:"+getDay());

                获取当前的日：

                getDate()

                返回的是1-31

                    document.write("day:"+getDate());

                获取当前的小时

                getHours()

                 获取当前的分钟：

                   getMinutes()

                   获取当前的秒：

                    getSeconds()

                获取毫秒数

                getTime()

                返回的是1970 1 1 至今的毫秒数

                document.write("times"+getTime());

js的Math对象

对象里面的都是静态对象，使用可以直接使用Math.方法()

ceil(x):向上舍人

floor(x):向下舍入

round(x):四舍五入

random():得到随机数(伪随机数)

         得到0-9的随机数

            document.write(Math.floor(Math.random()*10));

js的全局函数

由于不属于任何一个对象，直接写名称使用

    eval():  执行js代码（如果字符串是一个js代码，使用方法直接执行）

           var str="alert('1234');";

            eval(str);

     encodeURI():对字符进行编码

     decoderURI():对字符进行解码

      isNaN():判断当前字符串是否是数字

                    var str="aaaa";

                    alert(isNaN(str));

                        如果是数字，返回false

                        如果不是数字，返回true       

        passInt():类型转换

                    var str3="123";

                    document.write(parseInt(str3)+1)

  js的重载

      什么是重载？ 方法名相同，参数不同

        js的重载是否存在？ 不存在

            调用最后一个方法

            把传递的参数保存到arguments数组里面

    js里面是否存在重载？

            1.js里面不存在重载

            2.但是可以通过其他方式模拟重载    arguments

js的bom对象

    bom：浏览器对象模型

    有哪些对象：

        navigator：获取客户机的信息

        screen：获取屏幕的信息

        location：请求url地址

                href属性

                    获取到请求的url地址

                    设置url地址

                        页面安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另一个页面

         history：请求的url的历史记录

                       到访问的上一个页面

                                history.back();

                        到访问的下一个页面

                                history.back();

            window():

js的dom对象

  dom： 文档对象模型  

    文档： 

            超文本文档，html，xml

     对象：

              提供了属性和方法

      模型：使用属性和方法操作超文本标记型文档

            可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

            想要对标记型文档进行操作，首先需要 对标记型文档里面的所有内容封装成对象

                        需要把html里面的标签，属性，文本内容都封装成对象

DOM模型

DOM level 1：将html文档封装成对象

DOM level 2：在level 1的基础上添加新的功能，例如：对事件和css样式的支持    

DOM level 3： 支持xm11.0的一些新特性

DHTML

是很多技术的简称

    html：封装数据

    css：使用属性和属性值设置样式

    dom：操作html文档

    javascript：专门指的是js的语法语句

document对象

        表示整个的文档

        常用方法：

              write()方法：

                    1.向页面输出变量（值）

                    2.向页面输出html代码

               getElementById();

                    通过id得到元素（标签）

                    //使用 getElementById得到input标签

                    var input1=document. getElementById("nameid");

                    //得到input里面的value值

                    alert(input1.name);

                    //向input里面设置一个值value

                    input1.value="bbbbb";

                getElementsByName();

                    通过标签的name的属性值得到的标签

                    返回的是一个集合（数组）

                    var inputs =document.getElementByName("name1"); //传递的参数是  标签里面的name的值

                    for(var i=0;i

                            var input1=input[i]; //每次循环得到的input对象，赋值到input1里面

                            alert（input1.value）; //得到每个input标签里面的value值

  }

                      getElementByTagName("标签名称");

                               通过标签的名称得到元素

   元素对象（element对象）

                    要操作element对象，首先必须要获取到element

                                使用document里面相应的方法获取

                    方法：

                            获取属性里面的值

                                        getAttribute（"属性名称 "）

                                        var input1=document.getElementById("inputid");

                                        //alert(input1.value);

                                        alert(input1.getAttribute("value"));

                            设置属性的值

                                    input1.setAttribute("class","haha");

                            删除属性

                                    input1.removeAttribute（"name"）;

                                    不能删除value

                    想要获取标签下面的子标签

                                使用属性childNodes，但是这个属性兼容性很差

                                获的标签下面子标签的唯一方法，使用getElementsByTagName方法

Node对象属性

nodename

 nodeType

  nodeValue

使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

 标签节点对应的值：

      nodeType：1

      nodeName：大写标签名称  比如span

      nodeValue：null

属性节点对应的值：

    nodeType：2

    nodeName：属性名称

    nodeValue：属性的值

文本节点对应的值

     nodeType：3

    nodeName：#text

    nodeValue：文本内容

Node对象的属性二

       

• qqqqq

       

• wwww

    父节点   

                ul是li的父节点

                parentNode

                //得到li1

                var li1 =document.getElmentById("li1");

                var ul1=li1.parentNode;

                alert(ul1.id);

    子节点

                li是ul的子节点

                childNodes：得到所有的子节点，但兼容性很差

                firstChild：获取第一个子节点

                lastChild：获取最后一个子节点

    同辈节点

                li直接关系是同辈节点

                nextSibling:返回一个给定节点的下一个兄弟节点

                previousSibling：返回上一个给定节点的上一个兄弟节点

innerHTML属性

                 这个属性不是dom的组成部分，但大多数浏览器都支持的属性

                第一个作用：获取文本内容

                                //获取span标签

                            var span1=document.getElementById("sid");

                            alert(span1.innerTML)

                第二个作用：向标签里面设置内容 （可以是html代码）

                                //向div里面设置内容

AAAA

                                //获取div

                                var div11=document.getElmentById（"div11"）;

                                //设置内容

                                div11.innerHTML="

AAAA

";