JavaScript学习笔记-进阶篇

这周学习的JavaScript。

课程名：JavaScript进阶篇

课程地址：慕课网 http://www.imooc.com/learn/10

整理笔记如下：

时间：2015年01月06日-2015年1月7日

1. JS基础语法：
   1. 变量的声明、赋值：var 变量名；
   2. 表达式；
   3. 操作符：+、比较、与或非；
   4. 操作符优先级：算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号，如果同级的运算是按从左到右次序进行,多层括号由里向外；
   5. ++和--；
2. 数组：
   1. 数组的创建：var 数组名=new Array()； 注意索引从0开始；
      1. 注意：
         1. 可以声明长度var 数组名=new Array(8)；
         2. 创建的新数组是空数组，没有值，如输出，则显示undefined。
         3. 虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
   2. 赋值：

      1.          
                    
                    
                    
                    
         
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      myarray[0]=88;
                   
                     
                     
                     
                     
                  
                    
                    
                    
                    

      2. 数组存储的数据可以是任何类型（数字、字符、布尔值等）
   3. 数组长度：myarray.length; //获得数组myarray的长度
      1. 注意： JavaScript数组的length属性是可变的
   4. 二维数组：

      1.          
                    
                    
                    
                    
         
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      方法一：
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      var myarr=new Array();      //先声明一维
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      for(var i=0;i<2;i++){
                               //一维长度为2
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                          myarr[i]=new Array();   //再声明二维
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                          for(var j=0;j<3;j+){
                            //二维长度为3
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                              myarr[i][j]=i+j;    //赋值，每个数组元素的值为i+j
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                          }
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      }
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      方法二：
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      var Myarr=[[0,1,2],[1,2,3]];
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      赋值：
                   
                     
                     
                     
                     
                   
                     
                     
                     
                     
         
                    
                      
                      
                      
                      myarr[0][0]=5;
                   
                     
                     
                     
                     
                  
                    
                    
                    
                    

3. 流程控制语句：
   1. if
   2. if...else
   3. if...else if...else 多重嵌套
   4. switch
   5. 循环语句：for、while、do...while
   6. break和continue
4. 函数：
   1. 定义；
   2. 调用
   3. 参数
   4. 返回值
5. 事件响应，网页交互：
   1. onunload事件需要注意下：格式为window.οnunlοad=函数名();
6. JavaScript内置对象：
   1. 日期对象Date
      1. 注意：
         1. get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
   2. 字符串对象String：
   3. Math对象：
      1. Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别；
   4. 数组对象：
   5. 浏览器对象：
      1. window对象
      2. JavaScript计时器：分一次性计时器和间隔性触发计时器；
      3. History对象： 记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
         1. 注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
      4. Location对象： 用于获取或设置窗体的URL，并且可以用于解析URL。
         1. 属性图示：
            
      5. Navigator对象：
         1. 包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
         2. 
            
         3. 
            
         4. 判断浏览器版本代码：使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器)代码如下：

                       
                         
                         
                         
                         
            
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                           function validB(){
                              
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                             var u_agent = navigator.userAgent; 
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                             var B_name="Failed to identify the browser"; 
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                             if(u_agent.indexOf("Firefox")>-1){
                              
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                                 B_name="Firefox"; 
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                             }else if(u_agent.indexOf("Chrome")>-1){
                              
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                                 B_name="Chrome"; 
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                             }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
                              
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                                 B_name="IE(8-10)";  
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                             }
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                               document.write("B_name:"+B_name+"
            ");
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                               document.write("u_agent:"+u_agent+"
            "); 
                        
                          
                          
                          
                          
                        
                          
                          
                          
                          
            
                         
                           
                           
                           
                           } 
                        
                          
                          
                          
                          
                       
                         
                         
                         
                         

      6. screen对象：用于获取用户的屏幕信息；
         1. 语法：window.screen.属性
         2. window.screen 对象在编写时可以不使用 window 这个前缀。
   6. DOM对象：
      1. DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
      2. DOM操作可以直接创建、删除、操控节点，就像操作树一样
      3. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
      4. 节点属性：在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
         1. nodeName : 节点的名称，是只读的。
            1. 元素节点的 nodeName 与标签名相同
            2. 属性节点的 nodeName 是属性的名称
            3. 文本节点的 nodeName 永远是 #text
            4. 文档节点的 nodeName 永远是 #document
         2. nodeValue ：节点的值
            1. 元素节点的 nodeValue 是 undefined 或 null
            2. 文本节点的 nodeValue 是文本自身
            3. 属性节点的 nodeValue 是属性的值
         3. nodeType ：节点的类型是只读的。以下常用的几种结点类型：

            元素类型	节点类型
            元素	1
            属性	2
            文本	3
            注释	8
            文档	9

            
            
         4. 访问子节点：
            1. 语法：elementNode.childNodes
            2. 注意：
               1. IE全系列、firefox、chrome、opera、safari兼容问题
               2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点
         5. 访问父亲节点：
            1. 语法：elementNode.parentNode
            2. 注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
         6. 访问兄弟节点：nodeObject.nextSibling和nodeObject.previousSibling
            1. 注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
         7. 添加、删除、替换子节点：appendChild、insertBefore、removeChild、replaceChild；
            1. 注：removeChild如果要完全删除节点需要把返回值赋为NULL；否则被删除的节点虽然不在DOM树种，但还在内存中；
         8. 创建元素节点：createElement(tagName)；
            1. 注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。因为要将其插入到原来某元素的子节点序列中，故要弄清楚DOM树的结构才行要将文本节点，属性节点等作为元素节点的子节点插入进去才行；
         9. 浏览器窗口：
            1. 获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法
               1. 对于IE9+、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度
               2. 对于 Internet Explorer 8、7、6、5：document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
               3. Document对象的body属性对应HTML文档的标签 document.body.clientHeight        document.body.clientWidth
               4. 在不同浏览器都实用的 JavaScript 方案：

                                 
                                   
                                   
                                   
                                   
                  
                                  
                                    
                                    
                                    
                                    
                  
                                   
                                     
                                     
                                     
                                     var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight|| document.body.clientHeight;
                                  
                                    
                                    
                                    
                                    
                                 
                                   
                                   
                                   
                                   

            2. scrollHeight和scrollWidth，获取网页内容高度和宽度(不包括滚动条)。