JavaScript DOM编程艺术 读书笔记（简略）

为了快速上手jQuery并使用Ajax，简要地学习了JavaScript，笔记写在了一个js文件中，格式与以往的有些不同。

// OBJ CREATION
var obj = {name:kamitora, year:1998, age:20};
/*
   === 严格比较 value和type
   !== vice versa
*/

/*
and &&
or ||
not !
*/

/**
 *  do {...}
    while(condition);
    至少执行一次。                */

/**
 * function 先定义，后调用。
 * 使用var避免二义性隐患。
 */

var out_f = 'initial value';
function f_name(argName){
    var in_f = 'test'; // 局部变量
    out_f = 'change'; // 未使用var, 是全局变量，并且会改变全局变量的值。
}
/**
 * 创建对象
 * JavaScript 有内建对象 native object 如 Array, Math, Date etc.
 * 用户定义对象（user-defined object）,不作讨论。
 * 浏览器提供的对象： 宿主对象（Host Object），如Form, Element, Image etc.用于获得网页上任何一个元素的信息，这个就是document对象。
 */
var newObj = new ObjectName;
/**
 * DOM: Docment Object Model
 * 最基础的对象： window对象。
 */
/**
 * DOM结点：元素节点， 文本节点， 属性节点
 * 为了区分元素——使用class属性或id属性
 * id本身只能使用一次，CSS可以利用id属性为包含在特定元素的其他元素定义样式。
 */
/**
 * 获取元素：通过元素id，通过标签名，通过类名
 */
document.getElementById(id); //返回一个对象，对应document对象中的元素。
document.getElementsByTagName(tag); //参数为标签名（eg."li"）返回数组,允许使用通配符。
document.getElementsByClassName(className); // 参数为类名，返回数组
document.getElementsByClassName("className1 className2 ..."); // 查找多个类名...
/**
 * 文档中的每个元素节点都是一个对象。
 * getAttribute("attributeName")——获取元素的各个属性，只能通过元素节点（eg. <p>, <li>, etc.）对象调用。若没有该属性，则返回null。
 * setAttribute("attributeName", value)——更改属性节点的值。
 * DOM的工作模式：先加载文档的静态内容，再动态刷新（不影响静态内容）。
 * 若一个站点用到多个JavaScript文件，为减少站点的请求次数，应该把所有.js文件合并到一个文件中。`
 * 事件处理函数（Event Handler）：鼠标悬停/离开触发——onmouseover/onmouseout;点击链接出发——onclick事件处理函数。
 */
event = "JavaScript Statements";
//eg.
onclick = "showPic(this)";
/**
 * onload事件处理函数——在页面加载时执行。
*/
window.onload = functionName; // eg.
/**
 * childNodes属性用于获取任一元素的所有子元素，是一个包含这个元素全部子元素的数组。返回的数组包含所有类型的节点，每一个节点都有nodeType属性。
 * 元素节点的nodeType属性值：1
 * 属性节点的nodeType属性值：2
 * 文本节点的nodeType属性值：3
 */
node.nodeType; // 获取nodeType属性（值）
/**
 * nodeValue属性，用于获得和设置一个节点的值
 */
node.nodeValue
description.childNodes[0].nodeValue // 与以下方法相同
node.firstChild // lastChild, vice versa
/**
 * <link rel="stylesheet" href="xxx/xxx.css" media="screen" />
 * 引入一个CSS文件
 */

 /**
  * window对象的open()方法创建新的浏览器窗口
  */
 window.open(url, newTabName, "property1, property2, ..."); // property——新窗口的属性
 /**
  * 伪协议：非标准化的协议，"javascript:"伪协议使我们通过有一个链接来调用JavaScript函数。
  */
  // <a href='URL' onclick="functionName(this.href;) return false;"> example</a>
  //

  /**
   * 渐进增强——用额外的信息层包裹原始数据。
   * */

   /**
    * 外部JavaScript文件绑定事件到HTML文档的某个元素上
    */
   element.event = action // eg.
   getElementById(id).event = action // 到某个特定id的元素上
   /**
    * 若涉及多个元素——getElementByTagName & getAttribute
    *   1)将文档中所有链接放入一个数组
    *   2)遍历数组
    *   3)若某个链接的class属性等于函数名，即表示该链接被x时应该调用该函数。
    */

    /**
     * 对象检测
     */
    if (method){
        statements;
    }
    // 检测出不支持某DOM方法的浏览器，方法名后不能加()
    /**
     * 尽量少访问DOM和尽量减少标记
     * 在多个函数都会取得一组类似元素的情况下，考虑把搜索结果保存在一个全局变量中，或者把一组元素直接以参数形式传递给函数。
     * 过多标记会增加遍历DOM树的时间。
     * HTTP规范：浏览器每次从同一个域名中最多只能同时下载两个文件。下载脚本期间，浏览器不会下载其他任何文件，即使来自不同域名。
     */

     /**
      * 工作副本：可添加代码＆注释。
      * 精简版本：放在站点上，文件名中往往有min字样。
      */

      /**
       * 共享onload事件：先创建一个匿名函数容纳函数，然后将那个匿名函数绑定到onload事件上。
       */
      window.onload = function(){
          firstFunction();
          secondFunction();
      }

      // 解决方案：addLoadEvent
      /**
       * 完成的操作：
       *    把现有的window.onload事件处理函数的值存入oldonload；
       *    若还未绑定任何函数，添加新函数；
       *    若已绑定一些函数，在末尾追加新函数。
       * @param {*} func 在页面加载完毕时执行的函数的名字
       */
      function addLoadEvent(func){
          var oldonload = window.onload;
          if (typeof window.onload != 'function'){
              window.onload = func;
          } else{
              window.onload = function(){
                  oldonload();
                  func();
              }
          }
      }

      /**
       * nodeName属性总是返回大写字母的值，即使在HTML文档中是小写。
       */
      if (description.nodeName == "IMG"){} //eg.

      /**
       * DOM方法在可以用于处理任何一种标记语言写出的文档。（eg. XML, HTML, etc.）
       * innerHTML支持读取与写入，不会返回任何对插入的内容的引用。（HTML转悠，不能用于其他标记语言文档）
       */

       /**
        * 创建元素节点并插入节点树——createElement方法 ＆appendChild方法
        */
       var para = document.createElement(nodeName); // eg. "p"
       // para："文档碎片"，指向引用，有nodeType和nodeName值。
       parent.appendChild(child);
       testdiv.appendChild(para); //eg.

       /**
        * 创建文本节点——createTextNode方法，与前者类似。
        */

        /**
         * insertBefore()
         * 1. 新元素 2. 目标元素 3. 父元素
         */
        parentElement.insertBefore(newElement, targetElement)

        /**
         * Ajax
         *  对页面请求以异步方式发送到服务器，服务器后台处理
         *  按需加载和创建页面
         *  核心：XMLHttpRequest对象——充当浏览器的脚本与服务器之间的中间人。
         *  服务器端的脚本语言完成了大部分工作。
         *  不同浏览器XMLHTTP对象不尽相同。为兼容，getHTTPObject函数要...(待我去找个现成的- -)
         *  XMLHttpRequest最有用的方法：open，用于指定服务器上将要访问的文件，指定请求类型：GET/POST/SEND。getNewContent()...?
         *  onreadystatechange——事件处理函数，在服务器给XMLHttpRequest对象送回响应时被触发执行。
         *  指定函数引用时，函数名后不要加(),加括号表示立即调用。
         *  浏览器会在不同阶段更新readystate的值：
         *      1：uninitialized
         *      2：loading
         *      3：load complete
         *      4: 正在交互
         *      5: Complete
         *  服务器发送回的数据通过responseText属性（保存文本字符串）和responseXML属性（保存Content-Type header中"text/xml"的数据, which is a Document Fragment对象）
         *  同源策略：使用XMLHttpRequest对象发送的请求只能访问与其所在HTML处于同一个域中的数据，不能向其他域发送请求。
         *  脚本发送XMLHttpRequest请求后继续执行，不会等待响应返回。
         *  若其他脚本依赖于服务器响应，相应代码应指定给onreadystatechange属性的那个函数中。
         *  eg. 提交表单——提交表单触发submit事件，通过onsubmit捕获事件，取消其默认操作（提交整个页面），通过XMLHttpRequest对象向服务器发送数据。
         */

         /**
          * 两项原则：
          * 渐进增强（progressive enhancement）：根据内容使用标记实现良好的结构；逐步加强内容。
          * 平稳退化：前者做到，后者必然。
          */
         /**
          * CDN（Content Delivery Network）解决分布共享库的问题。
          * 最终上线代码不要忘记使用Google Closure Tools（提高浏览器读取效率）。
          */