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.使用一种标签

<script type="text/javascript"></script>

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

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

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

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标签放到</body>后面

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

            在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("<br/>")

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

                     document.write("<hr/>")

                        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<arr15.length;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<inputs.length;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对象的属性二

<ul>

        <li>qqqqq</li>

        <li>wwww</li>

    父节点   

                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里面设置内容<h1>AAAA</h1>

                                //获取div

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

                                //设置内容

                                div11.innerHTML="<h1>AAAA</h1>";

                                       

                                

推荐阅读更多精彩内容

  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 557评论 0 6
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 6,663评论 2 17
  • JavaScript介绍JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户...
    LiWei_9e4b阅读 137评论 0 0
  • JS使用技巧专题 1开发技巧 1.1函数使用 1.1.1函数声明方式 JS函数的写法总结 http://blog....
    Kevin_Junbaozi阅读 679评论 0 11
  • 有人说过,很多弯路到最后都成了直路,所有的坑到最后也都成了坦途;所谓的直路和坦途并不是摆在眼前的,都是不断的的...
    老衲法号一眉道人阅读 768评论 0 4