js笔记

JavaScript学习目标：
  1、了解js的常识
  2、js的语言基础
  3、掌握js的事件处理机制
  4、理解DOM模型
  5、经典案例

js的常识
  1、JavaScript简介
     一种动态脚本语言，用于操作html(增加，修改，删除html标记)
     以html标记的样式进行修改
     获得浏览器信息以及用于AJax(可以用来异步向web服务器发送请求)
  2、js在浏览器里执行，文件的后缀是 .js  (也可在web服务器里执行)
     客户端网页动态生成技术
     ECMAScript 动态网页技术的标准，JavaScript的标准

js的语言基础
  1、数据类型
     js是一种弱类型的语言，对变量不用明确指定类型
  2、分为基本数据类型和复合数据类型
     基本数据类型：1、number
                2、String
                3、boolean
                4、null
                5、undefined
     复合类型：1、Array
              2、函数
            3、Object
   on:绑定事件处理代码到html标记上，当点击链接时，会产生点击事件，由onclick指定的onclick表示绑定点击事件
   null和undefined与null的值相等
   在比较时，true与1的值相等

day802,803

js的事件处理机制及dom模型
  1、js的数据验证
  2、dom模型：
    (1)、什么是dom? document boject model
      将一个结构化的文档(比如xml,html等)转化成一个条例dom要求的树，通过对树的操作(crud)，来间接实现对结构分文档的操作。
    (2)、浏览器如何显示html文档
      浏览器读取html文档，将其转化为w3c dom树(即一棵对象树)放在内存里。如果dom树的节点发生任何改变，浏览器就会立即显示这种改变。
      对w3cdom树，我们可以使用js来操控
   (3)、w3c dom的结构
     A.继承关系图：
       除了Node,Document,Element,HTMLElement这四个节点以外，其他节点都与html文档中元素一一对应
       Node-Document-HTMLDocument（代表整个html文档）－HTMLBodyElement
       Node-Element-HTMLElement-HTMLFormElement(form)-HTMLInputElement,HTMLSelectElement-HTMLOptionElement(option)
       Node-Element-HTMLElement-HTMLDivElement(div)
       Node-Element-HTMLElement-HTMLTableElement(表格)-HTMLTableCaptionElement(caption),HTMLTableElement(行),
           HTMLTableCellElement(单元格),HTMLULElement,HTMLOLElement,HTMLLIElement
     B.如何访问某个节点
       方式一：document.getElementById(id);
          依据标记的id查找
       方式二：parentNode previousSibling nextSibling childNodes firstChild lastChild
         因为不同浏览器对dom模型中的空节点支持不一，所以，以上方法用得不多，尽量使用方式一。
         getElementByTagName(tagName)
        依据标签名查找，返回的是一个HTMLCollection。
        对于某些节点，可以采用特殊的方式来访问：
       Form:
        elements属性值是一个HTMLCollection,HTMLCollection可以采用如下两种方式访问：
         form1.elements[0]:第一个控件
         from2.elements['id'/name]:得到的是该表单中id或者name对应的控件
         elements属性也可以不写，这样：form['id'].value
       document:
        forms属性值是一个HTMLCollection，返回当前html文档里的所有表单对象。
     C.修改节点
        1)、value属性
        2)、innerHTML属性
        3)、style属性；对于某个节点，可以通过修改其style属性，来改变其样式。
                       style属性只能获得内联行样式
        4)、className
        5)、src属性
        6)、options属性(Select)
     D.添加节点
        创建节点：document.createElement(Tag)-----tag:是一个合法的标签名
          比如：document.createElement('div');
              document.createTextNode(text)
        创建一个字符节点：<div>hello</div>
        添加节点：appendChild(node):添加到父节点的所有子节点的末尾
               insertBefore(newNode,refNode):
     E.删除节点：
        parentNode.removeChild(node);
  3、使用js改变html两个元素的默认行为
    对于<form>，默认是当点击submit按钮，浏览器会提交该表单的数据
    对于<a href="">test</a>，默认是，当点击链接之间的内容时，浏览器会跳转到href所指向的地址。
    改变方式：
       对于表单：如果onsubmit返回值是false，则表单不会提交。
          <form οnsubmit="return false;">
           ... ...
       对于链接：如果onclick返回值是false，则链接不会跳转
          <a href="" οnclick="return false;">test</a>
  4、select的常用属性和方法
    length：
        length属性可返回下拉列表中选项的数目。
    selectedIndex：
        selectedIndex属性可设置或返回下拉列表中被选
    options：
         返回包含<select>元素中所有<option>的一个数组，如果把options.length属性设置为0，select对象中所有选项都会被清除;
         如果options.length属性的值比当前值小，出现在数组尾部的愿书就会被丢弃；
         如果把options[]数组中的一个元素设置为，那么选项就会从select对象中删除
    onchang：当改变选择时调用
    Option对象的selected属性
        true：表示该选项被用户选择了。
        false：没有被选择
    Option对象表示select中的某个选项，
        text：
        value:
    可以使用如下语句创建一个Option
         var op1=new Option(text,value);
          select.options[1]=op1;
  5、表格的常用属性与方法
                     length
                length 属性可返回下拉列表中选项的数目。
            selectedIndex
                selectedIndex 属性可设置或返回下拉列表中被选选项的索引号
            options
                返回包含 <select> 元素中所有 <option> 的一个数组。
                如果把 options.length 属性设置为 0,Select 对象中
                所有选项都会被清除； 
                如果 options.length 属性的值比当前值小，出现
                在数组尾部的元素就会被丢弃。；
                如果把 options[] 数组中的一个元素设置为 null，
                那么选项就会从 Select 对象中删除.
            onchange
                当改变选择时调用。
            Option 对象的 selected 属性
                true:表示该选项被用户选择了。
                false:没有被选择
            Option对象表示Select中的某个选项，
            text:
            value:
            可以使用如下语句创建一个Option
            var op1 = new Option(text,value);
            select.options[1] = op1;
  6、传统的html dom模型：
    1、window
       open方法：打开一个新的窗口，
          第二个参数表示窗口名，如果该窗口名对应的窗口已经打开，则不再打开新的窗口
          例如：window.open('1.html','new','height=100,width=200,top=0,left=0,toolbar=no,
              menubar=no,scrollbars=no,resizable=no,location=no,status=no');
       close方法：关闭窗口，返回值为窗口对象句柄
       location属性：获得location对象
       confirm方法：弹出一选择对话框，返回用户是否确认
       prompt方法：弹出一个供用户输入信息的对话框，返回用户输入信息
       setTimeout方法：用于在指定的毫秒数之后，调用函数或指定表达式
       clearTimeout()方法：用于取消由setTimeout()方法设置的timeout
       setInterval方法：按照指定的周期(以毫秒计)来调用函数或计算表达式
       clearInterval:可取消由setInterval()设置的timeout，clearInterval()方法的参数必须是setInterval()返回值
       opener：打开窗口
       parent:当前窗口的父窗口
  7、事件处理机制
    1、事件对象
      如何获得一个事件对象
        对于ie：直接使用event对象
        对于ff：函数中添加一个参数(event)
    2、如何通过事件对象获得事件源
        对于ie：srcElement属性
        对于ff：target属性
    3、事件冒泡机制
      子节点产生的事件会向上抛给父节点
      禁止事件冒泡：
         e.cancelBubble=true;
    4、事件处理代码绑定的方式
      A、绑定到html元素之上
      B、绑定到dom之上
      A与B的区别：B方式不能传参
  8、js框架
    prototype:
      $('id')相当于 document.getElementById('id');
      $F('id')相当于 document.getElementById('id').value;
      $('id1','id2','id3') 返回一个数组
  9、两个内置对象
     Date
     Math