JavaScript学习笔记

1.javaScript概述
            JS是嵌入HTML中在浏览器中的脚本语言 具有java和c语言类似的语法
            一种网页编程技术 用来向HTML页面添加交互行为直接嵌入HTML页面
            有浏览器解释执行代码 不进行预编译的
            
            特点：可以使用任何文本编辑工具编写 有浏览器内置的javaScript引擎执行代码
                      解释执行：不预编译 逐行执行
                         基于对象：内置大量现成对象
            适宜：客户端数据计算 客户端表单合法性验证，浏览器时间的触发  网页特殊显示
                      效果制作 服务器的异步数据提交
                      
            第一个JS程序
                   事件定义：在事件定义时直接写js
                   嵌入式：嵌入<script>标签
                   文件调用：代码位于单独的.js文件中 html页面引用.js文件
                   
            JS代码错误
                   解释型代码， 代码错误 ，则页面无效果  
                   IE浏览器--->状态栏---->开发工具
                   FireFox浏览器,Chrome浏览器--->错误控制台
                   
    2.语法规范
            1)基本语法
                     由 Unicode字符集编写
                     注释 ：单行------>//  多行------>/*.................*/
                     语句：表达式 关键字 运算符组成    
                     大小写敏感  分号或者换行结束 一行中有多个语句则不能省略分号
                    
                    标识符 ：由不以数字开头的字母、数字、下划线、美元符号组成常用于
                    表示函数 变量等的名称 名称建议知名思意，不允许使用保留字
                    
                    
                    变量：使用var关键字声明变量 如 var x，y；
                        使用"="赋值 没有初始化的变量则自动取值为underfined
                        注意 变量没有类型 统一使用关键字var声明 变量的值是有类型的
            2)数据类型
                特殊类型 ：null---->空 underfined---->未定义
                基本类型：Number，String，Boolean Function, Array
                对象类型：Window---->浏览器对象，Document---->文档对象，Object---->自定义对象

                Number类型：不区分整形数值和浮点数型数值，全部数字都采用64位浮点数格式存储
                                 整数直接量默认是十进制的 16进制整数直接量前面需要添加0x，八进制
                                 添加0 浮点数直接量默认使用小树点记录数据
                                
                                
                String类型：由Unicode字符 数字 标点符号组成的字符序列 直接量有单引号或双引号括起来
                                     没有字符类型 字符就是长度为1的字符串 特殊字符需要转移符：\
                                     如:\n \\  \'  \"     单引号和双引号嵌套时无需转义

                Boolean类型： 仅有两个取值（true/false） 可以自动转型作为数值参与运算(true=1 false=0)            

                Null:null在程序中代表"无值"    或者“无对象”可以通过给一个变量赋值null来清楚变量内容
                Undefined：声明变量但为赋值 对象属性不存在        
            3)数据类型的隐式转换：JS是松散类型的程序语言 变量在声明是不需要指定数据类型 变量的值是有类型的类型的
                          不同类型数据在计算过程中会自动进行转换
                          
                          数字+字符串： 数字转换为字符串
                          数字+布尔值 true为1 false为0
                          字符串+布尔值：布尔值转换为字符串true或false
                          布尔值+布尔值：布尔值转换为数值1或0
                          
                          数据类型转换函数
                          toString--->全部数据类型均可转换成string类型
                          parseInt---->强制转换成整数 如果不能转换 则返回NaN(Not a Number)
                          parseFloat---->强制装换成浮点数 如果不能转换则返回NaN
                          
                          typeof--->查询当前类型 返回String/number/boolean /object/function/underfined
                          例如 ：typeof（"test"+3） 返回"string"
                           isNaN---->判断被测表达式经过转换后是不是一个数 如果是返回true 否则返回false
                           
                           
            4）运算符
                  数学运算符(+,-,*,/,%)
                  "+"可以表示加法 也可以用于字符串的连接
                  "-"可以表示减号也可以表示负号如x=-y；
                   递增(++) 递减(--)
                   关系运算符 用于判断数据之间的大小关系
                   (>,<,>=,<=,==,!=),关系表达式的值为boolean类型
                   
                   注意：全等----->"===" 表示类型相同 数值相同
                   逻辑运算符(或||，与&&，非！)
                   条件运算符(三元运算)语法结构： 表达式?表达式1：表达式2
                   根据表达式值计算 如果为true 整个表达式取表达式1值  否则取2的值
                   
                   
                   JS中的条件表达式可以是任意表达式 即可以返回任何类型值
                   表达式的值     布尔值
                         0               false
                     null               false
                     ""                  false
           underfined            false
                   NaN               false
                   "非空"值         true
                   
                   一切表示空的值都是 false
                   
            3.JS对象概述           
              JS中包含多种对象（内置对象 外部对象 window对象 dom对象 自定义对象）
              
              对象包含属性和方法， 访问属性 ：对象.属性 访问方法：对象.方法名
              
              JS中常用的内置对象有：String对象 Number对象 Boolean对象 Array对象 Math对象 Date对象
                                                  RegExp对象 Function对象
                                                  
                                                创建String对象有两种方式：
                                var s1="hello world";
                                var s2=new String ("hello world");
                                
                                
                                String对象属性:length
                                String对象方法:toLowerCase() toUpperCase() charAt(index)  charCodeAt(index)
                                                         indexOf(findString ,[index]);查询指定字符串   
                                                         lastIndexOf(findString ,[index]);最后出现
                                                         subString(start,[end]); 字符串截取
                                                         replace(findString,toString);替换
                                                         split(byString,[howmany]);拆分 返回值子字符串数组
                                                        
                                Number对象：数值对象，常用方法---->toFixed(num)-->转换为字符串，保留小数点一点位数
                                                        如：var data=23.56789;alert(data.toFixed(2));//23.57
                                                        
                                Array对象:创建数组对象 var a1=new Array(); var a2=new Array(7); var a3=[100,200,300]
                                                   length属性可以获取数组元素的个数 ，数组长度是可变的
                                                   
                                                   reserve()----->反向数组 即改变数组中数值的顺序
                                                   
                                                   sort([sortFunction])----->数组排序，sortFunction,可选项 用来确定元素顺序的函数名称
                                                   
                                Math对象：用于执行数学任务 无需创建  直接把Math作为对象使用即可
                                                 sqrt(a),pow(a,b),random(),round(x)四舍五入,max(x,y,z....),abs(x)求绝对值
                                                
                                Date对象:用于处理日期和时间 封装了系统时间毫秒数
                                     创建Date对象 Date对象会自动把当前日期和时间保存为其初始值
                                 
                                            var now=new Date();
                                            var time=new Date("2016/9/5 16:26:35")

                                         常用方法：
                                          getTime() ,setTime()----->读写时间毫秒数                                          
                                          getDate(),getDay(),getFullYear()------>读写时间分量
                                          toString() toLocalTimeString(),toLocalDateString--->转换为字符串方法
                                          
                                          
                                          
                                RegExp对象:表示正则表达式
                                创建RegExp对象：var reg=/pattern/flags; 或者 var reg=new RegExp("pattern",["flags"]);
                                flags标识有以下几个：g---->设定当前匹配为全局匹配,i--->忽略匹配中的大小写
                                常用的方法：test(String) ---->检索字符串中指定的值 返回true或false
                                exec(String)---->检索字符串中指定的值 返回找到的值
                                String对象与正则表达式
                                方法：replace(regexp,toString)-->regexp代表正则表达式或字符串
                                          match(regexp)---->返回匹配字符串的数组
                                          search()----->返回匹配字符串的首字符位置索引
                                          
                                          
                                        
                                        
                              Function对象:JS中函数就是Function对象 函数名就是指向Function对象的引用
                              可以直接使用函数名访问函数对象 函数名()是调用函数
                              
                              function 函数名([参数]){
                                          //函数体
                                          trturn 返回值;
                              }
                              函数的返回值默认返回undefined可以使用return返回具体的值
                              
                              函数的参数 JS的函数没有重载 调用时只要函数名一样 无论传多少个参数
                              调用都是同一个函数 没有接受实参的参数值是undefined 全部参数传递给
                              arguments数组对象
                              
                              arguments对象是一种特殊对象 在函数代码中 表示函数的参数数组 即在
                              函数代码中 可以使用arguments访问全部参数
                              
                              arguments.length:函数的参数个数
                              arguments[i]:表示第i个参数
                              
                              使用Function对象创建函数
                              var functionName =new Function(a1,a2,a3......functionBody);
                              
                              var add=new Function("x","y","return(x+y);");
                              
                              var result=add(2,3);
                              alert(result);
                              
                              
                              匿名函数
                              
                              var f1=function(a1,a2,a3......){
                                    functionBody;
                                    return value;
                              }
                              var add=function(x,y){
                                 return x+y;
                              }
                              
                              var result =add(2,3);
                              alert(result)
                              
                              全局函数(可以用于全部的JS对象) 常用的全局函数有：
                              parseInt/parseFloat,isNaN,eval
                              
                              eval 函数用于计算表达式字符串 或者用于执行字符串中的JS代码
                              只接受原始字符串作为参数 如果参数中没有合法的表达式和语句
                              则抛出异常 var s1="2+3"
                              s1;//"2+3"

                              eval(s1);//5

1.外部对象
    1）BOM（Browser Object Model ）浏览器对象模型 用来访问和操作浏览器窗口
    使JS有能力和浏览器"对话"，通过使用BOM，可以移动窗口，更改状态栏文本
    执行其他不予页面内容发生直接联系的操作 没有相关标准 但被广泛支持
    
    Window对象
       window表示浏览器窗口，全部JS全局对象 函数以及变量均自动成为window对象的成员，
       常用属性：
       document(窗口中显示的HTML文档对象)  
       history(浏览过窗口的历史记录对象)
       location(窗口文件地址对象)
       screen（当前屏幕对象）
       navigator（浏览器相关信息对象）
       常用方法:
       alert(),confirm(),setTimeout(),clearTimeout(),setInterval(),clearInterval(),
       对话框 :alert(msg)--->提示对话框，显示msg字符串的内容
                  confirm(msg)-->确认对话框 显示msg字符串的内容，按"确定"按钮返回true，按
                  “否”和”取消“返回false
                  
       定时器:用于网页动态时钟 制作倒计时 跑马灯效果等
       
       周期性时钟(以一定的时间间隔执行代码，循环往复)
       setInterval(exp,time),周期性触发代码
       exp：执行语句
       time: 时间周期，单位为毫秒
       返回已经启动的定时器对象
       clearInterval(tID)停止启动的定时器
       tID：启动的定时器对象
       
       
        一次性时钟（在一个设定的时间间隔之后来执行代码
        不是在函数被调用后立即执行）
        setTimeout(exp,time)
        exp：执行语句
        time:时间间隔，单位为毫秒
        返回已经启动的定时器对象
        clearTimeout（tID）
       tID：启动的定时器对象
       
        常用属性 ：
       screen对象 包含有关客户端显示屏幕的信息 常用于获取屏幕的分辨率和色彩常用属性
       width/height availWidth/availHeight
       history对象  包含用户（在浏览器窗口中）访问的URL
       length属性 浏览器历史列表中URL数量
       back(),forword(),do(num
       location对象，包含有关当前URL的信息 常用于获取和改变当前浏览器的网址
       href属性 当前窗口正在浏览的网页地址
       reload()重新载入当前网址 同时按下刷新按钮
       navigator对象 包含有关浏览器的信息 常用于获取客户端浏览器的操作系统信息
       
    
    2）DOM(Document Object Model) 文档对象模型 用来操作文档 定义了访问和操作html
    文档的标准方法 应用程序通过对DOM树的操作 来实现对HTML文档数据的操作 当网页被
    加载时 浏览器会创建页面的文档对象模型 通过可编程的对象模型 JS能够创建动态的HTML
    （HTML元素 HTML属性 CSS样式 事件）
    
    DOM操作 ：查找节点 读取节点信息 修改节点信息，创建新节点 删除节点

    节点信息
    nodeName :节点名称
元素节点和属性节点：标签或属性名称
文本节点:#text
文档节点:#document
nodeType:节点类型 返回数值
元素节点：返回1
属性节点：返回2
文本节点：返回3
注释节点：返回8
文档节点：返回9
                   <select>
                             <option id="o1" value="1">北京</option>
                             <option value="2">南京</option>
                   </select>
                    
                    var o1=document.getElementById("o1");
                    var s=o1.nodeName+o1.nodeType
                    
     元素节点的内容
     innerText
     设置或获取位于对象起始和结束标签内的文本
     innerHTML
     设置或获取位于对象起始和结束标签内的HTML
                      <div id="d1">
                          第一行文本
                          <p>段落中的文本</p>
                      </div>
                      
                      
                      
                      var div=document.getElementById("d1");
                      alert(div.innerText);//第一行文本
                      alert(div.innerHTML);//<p>段落中的文本</p>
                      
                      
                      节点属性：getAttribute()方法 --->根据属性名称获取属性的值
                               setAttribute(),removeAttribute();
                               
                      元素节点的样式  :  style属性  className属性
                      
                      查询节点
                      如果需要操作HTML元素 必须首先找到此元素
                      查询节点的方式
                      通过id查询
                      
                      document.getElementById（）
                      通过指定id来返回元素节点 忽略文档的结构
                      查找整个HTML文档中的任何HTML元素
                      如果id值错误 则返回null
                      
                      通过层次（节点关系）查询
                      
                      parentNodes:遵循文档的上下层次结构 查找单个父节点
                      childNodes：遵循文档的上下层次结构 查找单多个子节点
                      
                      通过标签名查找
                      
                      getElementByTagName()
                      根据指定的标签名称返回全部的元素
                      忽略文档结构 查找整个HTML文档中的全部元素
                      如果标签名错误 则返回长度为0的节点列表
                      节点列表的length属性获取个数 [index]定位具体的元素
                      
                      
                      通过name属性
                      document.getElementByName()
                      根据标签的name属性的值进行查询
                      男：<input type="radio" name="sex" value="0"/>
                      女：<input type="radio" name="sex" value="1"/>
                      var nodes=document.getElementByName("sex");
                      创建新节点
                      document.createElement(elementName)
                      elementName:要创建的元素标签名称
                      返回新创建的节点
                      
                      //创建新节点
                      var newNode=document.createElement("input");
                      //设置节点信息
                      newNode.type="text";
                      newNode.value="mary";
                      newNode.style.color="red";
                      
                      添加新节点
                      parentNodes.appendChild(newNode);
                      追加 “新节点作为父节点的最后一个子节点添加
                      parentNodes.insertBefore(newNode.refNode)
                      refNode:参考节点 新节点位于此节点之前添加
                      
                      删除节点
                      node.removeChild(childNode)
                      删除某个子节点 childNode必须是node的子节点

                                          
1自定义对象
  自定义对象是一种特殊的数据类型 有属性方法封装而成 属性指与对象有关的值 访问方式 ：对象名 .属性名
 
  方法指对象可以执行的行为或可以完成的功能
 
  访问方式：对象名.方法名()
 
  创建自定义对象的三种方式:
 
  1）直接创建对象
  2）构造器创建对象
  3）JOSN创建对象
 
  直接创建对象 (创建Object对象)
function TestObject{

   var personObj=new Object();
   
   //添加属性
   personObj.name="jack";
   personObj.age=35;
   //添加方法
   personObj.say=new Function(){
    alert("hello");
   };
   
   alert(personObj.name) ;
   personObj.say();
}

构造器创建对象（定义构造和那好苏 以创建自定义对象）

function Person(name,age){
   //定义name属性和age属性
   this.name=name;
   this.age=age;
   
   //定义方法showName
   this..showNamae=function(){
    alert("My Name is"+ this.name)
   };
}

function test(){
 var p1=new Person("Tom",18);
 alert(p1.name);
 p1.showNamae();

}

JSON创建对象
JSON（javaScript Object Notation）是一种轻量级的数据交换格式
使用名/值对的方式定义 名称需要使用“”引起来 多对定义之间使用
隔开名称可以是属性 字符串类型的属性值 需要使用“”引起来

var obj={
  "name":"Tom",
  "age":29
};

alert(obj.name);

2.事件概述
   事件：指页面元素状态改变 用户在操作鼠标或键盘是触发的动作
   触发的动作：鼠标事件 键盘事件 状态改变事件
   
   event对象 事件触发后产生的对象
   时间属性：通过一个事件属性 可以在某个事件发生时对某个元素进行某种操作
   
   鼠标事件:onclick ,onmouseover, onmouseout, ondbclick,onmousedown
   
   键盘事件：onkeydown按键按下,onkeyup案件松开
   
   状态事件：onload,onchange(),onblur,onsubmit()
   
   事件定义，在HTML属性定义中 直接处理事件
   <input type="button" value="确定" onclick="method();"/>
   JS代码中动态定义
   
   btn.onclick=method;
   
   取消事件： onXXX="return false";
   
   event对象,是任何事件触发后将会产生一个event对象 event对象记录事件发生时的鼠标位置
   键盘按键状态和触发对象信息

   获取event对象
    使用event对象获取相关信息 如单击位置 触发对象
    clientX/clientY/cancleBubble
    
    获取event对象(需要考虑浏览器兼容性)
    IE浏览器
        JS或者HTML代码中直接使用event
        <p onclick="alert(event.clientX);">文本</p>
        
        function method(){
             alert(event.clientX+":"+event.clientY);
        }
   
   FireFox ,Chrom浏览器
      在HTML中可以直接使用event对象，在JS代码中不能直接使用event对象
      
      如何解决JS代码中使用event对象问题：
      在HTML代码中 在事件句柄定义时 使用event关键字将事件对象作为参数传入方法中
      
      <div onclick="method(event);"></div>
      
      JS代码中
      function method(i){
        alert(i.clientX+":"+i.clientY);
      }
      对于event对象 经常需要获得事件源（即事件触发的元素）
      IE浏览器：event.srcElement
      FireFox,Chrom浏览器:event.target
   3.事件处理机制（冒泡机制）
   
   当处于HTML对象模型底部对象事件发生时会依次激活上面对象定义的同类事件
   
   可以取消事件的冒泡
   event.stopPropagation()

   event.cancleBubble=true;                           

供自己使用查阅