JavaScript学习笔记(1)

1.Javascript 简介

    诞生于1995年，当时的主要目的是处理由以前服务器语言负责的一些没有填写的必填域，是否输入了无效的值。在web日益流行的同时，人们对客户端脚本语言的需求也越来越强烈，那时绝大多数因特网用户使用的速度仅为28.8kbit/s的猫上网，但网页的大小和复杂性却不断增加，为完成简单的表单验证而与服务器交换数据只会加重用户的负担。    
    1995年2月 计划在Netscape Navigator2浏览器中开发名为LiveSript的脚本语言，同时在浏览器和服务器中使用，为了赶在发布日期前完成LiveScript开发，Netscape和sun公司建立了一个开发联盟，在Netscape Navigator2发布的前夕，为了搭上媒体上热炒的java顺风车，临时把LiveScript改名为javaScript。在Navigator3发布不就，ie3就加入了名为JScript的javaScript的实现。这意味着有两个不同的javascript版本：javascript,jscript.当时并没有标准规定JavaScript的语法和特性。 
    1997年，JavaScript1.1 为蓝本的建议被提交给了ECMA（European Computer ManufacturersAssociation欧洲计算机制造商协会）。定义了ECMAScript新脚本语言的标准(ECMA-262)。第二年，ISO/IEC（International Organization for Standardization and International Electrotechnical Commission,国标标准化组织和国际电工委员会）也采用了ECMAScript作为标准（ISO/IEC-16262）,自此浏览器开发商就致力于将ECMAScript作为各自JavaScript实现的基础。  
    简单的理解就是:网景公司推出javascript后所取得的成功,微软推出了JScript，还有CEnvi推出ScriptEase等，这些都与JavaScript同样可在浏览器上运行.为了统一规格，因为JavaScript兼容于ECMA标准，Ecma国际以JavaScript为基础制定了ECMAScript标准,所以javascript也称为ECMAScript。

 2.页面开发使用的基本前端技术

    html+css+javscript
    这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位和效果渲染，再通过JavaScript实现元素相应的动态变化效果.

3.富客户端概念

    3.1 网络应用程序经历了从胖客户端到瘦客户端的发展历程,胖客户端是相对于传统的C/S结构的网络应用程序来说的,
    而瘦客户端一般都是相对于B/S结构的Web应用来说的
    3.2 富客户端（Rich Client)简介富因特网应用程序（Rich Internet Applications，RIA）利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。富客户端结合了桌面应用程序和b/s的一些优点，但本质还是b/s应用。
    3.3 富客户端技术充分利用本地机器的处理能力来处理数据，而不需要把某些数据发送到服务器处理，充分利用了本地机器的资源。
    3.4 ajax jquery flex Silverlight JavaFX等都属于构建富客户端的技术
    3.5 javascript也是构建富客户端要是使用一个最基本的技术

4.javascript和java的区别

    4.1 javascript与Java是由不同的公司开发的不同产品：
        最早的javascript是Netscape公司的产品，其目的是为了扩展Netscape Navigator(网景导航者浏览器)功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言.
        而Java是SUN Microsystems公司推出的新一代面向对象的程序设语言，常用于后台代码的开发.
   4.2 于1995年由Netscape公司的Brendan Eich首次设计实现而成 。由于Netscape公司与Sun公司合作，Netscape高层希望它看上去能够像Java，因此取名为JavaScript
 
   4.3 javascript主要运行在客户端浏览器中(脚本语言),而且java主要是运行在后台服务器中

5.完整的JavaScript包含的三个部分

    5.1 ECMAScript规范，描述了该语言的语法和基本对象的定义;
        其主要包括
            1，语法
            2，数据类型
            3，语句
            4，关键字
            5，保留字
            6，操作符
            7，对象
    5.2 文档对象模型（DOM），描述处理网页内容的方法
        DOM(Document Object Model) 是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构

        例如:html代码： 

             
                 
                     
                 
                 
                    
你好
 
                 
             

            dom模型
              html
            /           \
          head     body
             |             |
           title         p
             |            |
           'hello'    '你好'
    5.3 浏览器对象模型（BOM），描述与浏览器进行交互的方法
        BOM(Browser Object Model),开发人员可以使用BOM控制浏览器显示的页面以外的部分。弹出新浏览器窗口；移动，缩放，关闭浏览器的功能；提供浏览器详细信息的navigator对象;提供浏览器所加载页面的详细信息的location对象；提供用户显示器分辨率详细信息的screen对象；对cookies的支持；支持XMLHttpRequest,IE中的ActiveXObject自定义对象  

6.兼容性

   JavaScript的三个组成部分，在当前五个主要浏览器（IE,Firefox,Chrome,Safari,Opera）中得到了不同程度支持，其中，所有浏览器对ECMAScript支持大体都还不错，并且支持程度越来越高，但对DOM的支持彼此相差较多，对已经正式纳入HTML5标准的BOM来说，尽管各浏览器都实现了某些总所周知的共同特性，但其他特性还因浏览器而异。   

7.javascript语言的特点

    7.1 解释执行的脚本语言
        它的基本结构形式与c、c++、java十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。【它是需要嵌入到html页面中,让浏览器来解释执行的。】  
    7.2 基于对象的语言      
        javascript是一种基于对象的语言，和java语言不同,javascript虽然有面向对象的思想在,但这个并不是它的重点
    7.3 简单性
       它是一种基于java基本语法语句和控制流之上的简单而紧凑的设计， 基本java中的语法都可以使用到javascript中,所以对于学过java语言的情况下,学习javascript也相对比较简单.
    7.4 弱类型语言
        javascript的语法松散要求不严谨,比如:一个变量在之前没有声明的情况下就可以直接使用,声明变量的时候也可以不声明变量的类型等.
    7.5 事件驱动
        我们在页面上的操作,例如 左键/右键的单击、双击,键盘上面的按键的监听，鼠标的移动 鼠标拖拽 鼠标滚轴的滚动等等事件的响应处理都可以交给javascript  
    7.6 动态性
        javascript可以直接对用户输入做出响应，无须经过web服务程序.
    7.7 安全性
        javascript不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。  
    7.8 跨平台性
        javascript是依赖于浏览器，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可正确执行,但是不同浏览器以及同一浏览器的不同版本对javascript的支持是不同的(浏览器的兼容性)  

8.在页面中使用javascript的常见情况

    1.动态改变网页的设计布局(操作页面中的标签元素)
    2.验证表单
    3.检测浏览器、控制浏览器的行为
    4.操作cookies
    5.处理页面中触发的事件
    6.在使用ajax的时候也要用到javascript
    7.很多前端的框架都是基于javascript的封装  

9.javascript在页面中的位置

     标签之间,一般放置在 HTML 页面的 或者 标签中:

        注意:js代码所写的位置会影响到代码的执行效果,因为浏览器会从上到下去加载整个html页面文件,如果js代码是写在head里面,就是先执行js代码然后加载页面标签元素,如果是写body标签中的下面,则表示先加载html页面元素然后在执行js代码.
    2.写到标签元素的事件属性里面

    3.写到一个外部的文件里面(.js结尾的文件)
        写到一个js文件中,然后哪个页面使用就引入过来,类似于css样式表的引用
        例如:

        注意:
            1.不要在     4) 函数对象
        javascript中的函数也是对象,它是Function类型的对象,用java中的概念理解就是,javascript中的每个函数都是Function类型的实例,就像java中的每个方法都是Method类的实例一样。
    5) 匿名函数

        //定义一个函数test,其参数需要接收另一个函数,注意js中的函数也是对象,就是这个Function类型的对象,函数对象也有自己的方法和属性,其中call就是Function类型中的一个方法,所有的函数对象就可以调用这个call方法来让自己本身执行(类似java中的反射)

        function test(f){ 
            //表示f这个函数要执行,执行f函数的对象是null,参数是"suwu" 
            //执行f函数的对象设置为null的话会默认变成window对象 
            f.call(null,"suwu"); 
        } 
         
        //调用test函数,并把一个匿名函数对象作为参数传给test 
        test(function(name){ 
            console.log("hello! "+name); 
        }); 

20、Array类型

    ECMAScript数组和其他语言中的数组都是有序列表，但是有以下特性：
    a.每一项都可以保存任何类型的数据。
    b.数组的大小是可以动态调整。
    c.数组的length属性：可读可写，可以通过设置length的值从数组的末尾移除项或向数组中添加新项
 
    1) 创建方法

       1. 使用Array构造函数

          var arr = new Array(); 
          var arr = new Array(20);  // 预先指定数组的大小 
          var arr = new Array("tom","zs","lisi"); //传入参数 

          注意:new关键字也可以省略，但是尽量不要省略
       2. 使用数组字面量

          由一对包含数组项的方括号表示，多个数组项之间用逗号分隔

          var arr = ["tom","zs","lisi"]; 
          var arr = []            //空数组 

    2) 访问数组元素
       数组变量名[索引]

        1.如果索引小于数组的长度，返回对应项的值

            var arr = ["tom","zs","lisi"]; 
            arr[0] ;        //访问数组中第一个元素,返回值为tom 

       2.如果索引大于数组的长度，数组自动增加到该索引值加1的长度

            var arr = ["tom","zs","lisi"]; 
            arr[3] ="jacky";    //添加元素,数组长度变为4 

        数组最多可以包含4 294 967 295个项

    3) 检查数组

        var arr = []; 
        console.log(typeof(arr));  //输出object，不能使用typeof进行判断是否为数组    
        console.log(Array.isArray(arr));   //判断arr是否是数组类型 

    4) 转换数组为字符串
        数组继承Object方法，并且对这些方法进行了重写
        toString();        在默认情况下都会以逗号分隔字符串的形式返回数组项
            例如：
            var arr = ["tom","zs","lisi"];    
            arr.toString()        //tom,zs,lisi  
       valueOf(); 在默认情况下以数组字面量的方式显示
            console.log(arr.valueOf());
            console.log(arr);
            俩个输出的结果一样:
                ["tom","zs","lisi"];
        join();    使用指定的字符串用来分隔数组字符串
            例如：
            arr.join("||");        //tom||zs||lisi
 
    5) 栈，队列方法
        1.栈  LIFO (Last-In-First-Out)
            push() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度
            pop()     从数组的末尾移除最后一项，减少数组的length值，返回移除的项
        2.队列    FIFO (First-In-First-Out)
            shift()  移除数组中的第一个项并且返回该项，同时将数组的长度减一。
            unshift() 在数组的前端添加任意个项，并返回新数组的长度。
 
    6) 排序
       reverse()  反转数组项的顺序
       sort()       
         1.默认排序：该方法会调用每个数组项的toString() 转型方法，然后排序
         2.自定义排序：
            a.该方法可以接受一个比较函数作为参数，比较函数有两个参数
            b.如果第一个参数位于第二个参数之前，返回负数

            c.如果第一个参数位于第二个参数之后，返回正数

            var arr = [11,5,23,7,4,1,9,1]; 
            console.log(arr.sort(compare)); 
 
            //该比较函数适合于大多数数据类型 ，类似于Java中的比较器
            function compare(v1,v2){ 
                if(v1>v2){ 
                    return -1; 
                }else if( v1

    7) 操作方法

        concat()    :先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，返回副本

            var arr = ["aa","bb","cc","dd"]; 
            var arr_new = arr.concat("ee","ff");  
            // arr_new = ["aa", "bb", "cc", "dd", "ee", "ff"] 
            // arr不改变,原数组不变 

        slice()    :可接受一个或者两个参数（返回项的起始位置，结束位置）
            当接受一个参数，从该参数指定的位置开始，到当前数组末尾的所有项
            当接受两个参数，起始到结束之间的项，但是不包含结束位置的项
            例如：
            var arr = ["aa","bb","cc","dd"];

            1.接受一个参数时

               var arr_new = arr.slice(1); 
                // arr_new = ["bb", "cc", "dd"]; 
                // arr 不改变 

            2.接受两个参数时

                var arr_new = arr.slice(1,2);     
                // arr_new = ["bb"];  
                // arr不改变 
 

        splice(): 向数组的中插入数据并返回一个数组，该数组中包含从原始数组中删除的项。
            删除：指定两个参数(删除的起始位置，要删除的项数)
            插入：指定三个参数(起始位置，0，要插入的项任意数量的项)
            替换：指定三个参数(起始位置，要删除的项，要插入的任意数量的项)
 
            例如：
            var arr = ["aa","bb","cc","dd"];

            1.删除

                var del_arr = arr.splice(1,2); 
                // arr = ["aa","dd"];     在原数组进行了删除操作 
                // del_arr = ["bb","cc"];返回删除的元素数组 

            2.插入

               var del_arr = arr.splice(1,0,"ee","ff"); 
                // arr =  ["aa", "ee", "ff", "bb", "cc", "dd"] 将指定项插入到1位置处 
                //del_arr = [], 返回空数组 

            3.替换

               var del_arr = arr.splice(1,2,"ee","ff"); 
                // arr =  ["aa", "ee", "ff", "dd"] 将"bb","cc" 替换成了"ee","ff" 
                //del_arr = ["bb", "cc"], 返回删除的元素数组 

        indexOf()(要查找的项，开始查找的位置(可选)) 从数组开头向后查找，使用全等操作符，找不到该元素返回-1  

            var arr = ["22","11","cc","dd","11"]; 
            arr.indexOf(11); //返回-1，因为内部使用"==="进行匹配 
            arr.indexOf("11"); //返回1，默认从下标为0往后匹配，返回第一个匹配元素的位置 
            arr.indexOf("11",2); //返回4，从下标为2开始往后匹配，返回第一个匹配元素的位置

        lastIndexOf()(要查找的项，开始查找的位置(可选)) 从数组末尾向前查找，使用全等操作符，找不到该元素返回-1

            var arr = ["22","11","cc","dd","11"]; 
            arr.lastIndexOf("11"); //返回4，默认从下标为4往前匹配，返回第一个匹配元素的位置 
            arr.lastIndexOf("11",2); //返回1，从下标为2往前匹配，返回第一个匹配元素的位置 

    8) 迭代方法：
        every();对数组中的每一元素运行给定的函数，如果该函数对每一项都返回true,则返回true
            every(回调函数)
            every(function(){})
            every(function(item,index,arr){})

            every(function(遍历的每项,索引,被遍历的数组){})

            var arr = [11,5,23,7,4,1,9,1]; 
            var result = arr.every(function(item,index,arr){ 
                return item >2; 
            }); 
            console.log(result); //false 

        some(); 对数组中的每一元素运行给定的函数，如果该函数对任意一项返回true,则返回true
            some(回调函数)
            some(function(){})
            some(function(item,index,arr){})
            some(function(遍历的每项,索引,被遍历的数组){}) 

            var arr = [11,5,23,7,4,1,9,1]; 
            var result = arr.some(function(item,index,arr){ 
                return item >2; 
            }); 
            console.log(result); //true 
 

        filter();对数组中的每一元素运行给定的函数，会返回满足该函数的项组成的数组
            filter(回调函数)
            filter(function(){})
            filter(function(item,index,arr){})
            filter(function(遍历的每项,索引,被遍历的数组){})

            var result = arr.filter(function(item,index,arr){ 
                return item >2; 
            }); 
            console.log(result); // [11, 5, 23, 7, 4, 9] 

        map();对数组中的每一元素运行给定的函数,返回每次函数调用的结果组成的数组
            map(回调函数)
            map(function(){})
            map(function(item,index,arr){})
            map(function(遍历的每项,索引,被遍历的数组){}) 

 
            var result = arr.map(function(item,index,arr){ 
                return item * 2; 
            }); 
            console.log(result); // [22, 10, 46, 14, 8, 2, 18, 2] 
 

        forEach();对数组中的每一运行给定的函数,没有返回值，常用来遍历元素
            forEach(回调函数)
            forEach(function(){})
            forEach(function(item,index,arr){})
            forEach(function(遍历的每项,索引,被遍历的数组){}) 

            var result = arr.forEach(function(item,index,arr){ 
                console.log(item); 
            }); 

 

 

-------------------记于2018-07-08