《JavaScript DOM编程艺术（第2版）》笔记

头像
MandyShen
    阅读 4 分钟

    《JavaScript DOM 编程艺术（第2版）》笔记

    第1章：JavaScript 简史

    • JavaScript 的起源
    JavaScript 是 Netscape 公司和 Sun 公司合作开发的。
    • DOM
    DOM 是一套对文档的内容进行抽象和概念化的方法。
    • 浏览器战争
    今天，几乎所有的浏览器都内置了对 DOM 的支持，只要遵循 DOM 标准，就可以放心大胆的去做。

    第2章：JavaScript 语法

    • 语句

      建议在每条语句末尾都加上分号。

    • 注释

      // 单行注释
/* 多行注释
   多行注释*/

    • 变量

      var mood = "happy";
var age = 33;

    • 数据类型

      • 字符串
      • 数值
      • 布尔值

      • 数组

        • 数组
        • 关联数组
      • 对象
    • 操作符
      • 算术操作符

      + ,-,*,/,++,--,+=

      • 比较操作符

      >,=,<,>=,<=,==,!=,===.......

      ==并不表示严格相等，认为 false 与 "" 表示的含义相同。

      false == '';
// true

      === 进行严格比较，不仅比较值，而且比较变量的类型。

      false === '';
// false
      • 逻辑操作符

    • 条件语句和循环语句

      if (condions) {
    statemen}

      • while循环

        while (conditions) {
    statements;
}
      • for 循环

    • 函数与对象

      • 函数：
      function name(arguments) {
    statements;
}
      • 对象(object)：
      对象是一种非常重要的数据类型。

    对象的两种访问形式：

    • 属性 Object.property

    • 方法 Object.method()

      宿主对象：在Web应用中就是由浏览器提供的预定义对象。

    第3章：DOM

    DOM：

    • 文档：D (document)

    • 对象：O(object)

      • 用户定义对象
      • 内建对象：如 Array,Math,Data等。
      • 宿主对象：由浏览器提供的对象。
    • 模型: M(model)

    节点(node)：

    • 元素节点
    • 文本节点
    • 属性节点

    获取元素：

    • getElementById
    • getElementsByTagName
    • getElementsByClassName

    获取属性：

    • getAttribute

    设置属性：

    • setAttribute

    第4章：案例研究：JavaScript图片库

    介绍了 DOM 提供的几个新属性：

    • childNodes
    • nodeType
    • nodeValue
    • firstChild
    • lastChild

    第5章：最佳实战

    平稳退化

    平稳退化(graceful degradation)：正确使用 JavaScript 脚本，可以让访问者在他们的浏览器不支持 JavaScript 的情况下仍然能顺利地浏览你的网站。

    不能平稳退化会影响你的网页在搜索引擎上的排名。

    • "javascript:" 伪协议：这种做法非常不好

      • 真协议：用来在因特网上的计算机之间传输数据包，如HTTP协议(http://)、FTP协议(ftp://)等。

      • 伪协议：非标准化的协议。

        // 用"javascript:" 伪协议调用 popUp()函数：
<a href="javascript:popUp('http://www.example.com/');">Example</a>

    • 内嵌的事件处理函数

      <a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>

      非常不好，因为#只是创建了一个空链接。

    • 平稳退化办法：将 href 属性设置为真实存在的 URL 地址，让它成为一个有效的链接。

      <a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>

      这样，即使 javascript 被禁止，这个链接也是可用的。

    渐进增强

    渐进增强就是用一些额外的信息层去包裹原始数据。

    按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则。

    结构、样式、行为要分离。

    向后兼容

    • 对象检测

      // 例如
if (!document.getElementById) {
    return false;
}

    • 浏览器嗅探技术

      通过提取浏览器供应商提供的信息来解决向后兼容问题。

    性能考虑

    • 尽量少访问DOM和尽量减少标记

    • 合并和放置脚本

      • 推荐把 functionA.js,functionB.js,functionC.js合并到一个脚本文件中，这样可以减少加载页面时发送的请求数量。
      • 把 <script>标签都放到文档的末尾</body>标记之前。因为位于<head>中的脚本会导致浏览器无法并行加载其他文件。

    • 压缩脚本

    第6章：案例研究：图片库改进版

    共享onload事件：addLoadEvent()函数

    需要多个函数都在页面加载时执行。addLoadEvent只有一个参数：打算在页面加载完毕时执行的函数的名字。

    1. 把现有的 window.onload 事件处理函数的值存入变量 oldonload;
    2. 如果这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它；
    3. 如果这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != "function") {
        window.onload = func;
    } else {
        window.onload = function (){
            oldonload();
            func();
        }
    }
}

    第7章 动态创建标记

    动态添加

    注意：用document.createElement创建一个空白的p元素，想在p元素内部添加内容，实际上内容也是一个文本节点，所以应该document.createTextNode创建一个文本节点，再用.appendChild添加到p节点中。
    window.onload = function () {
    var testdiv = document.getElementById("testdiv");
    var para = document.createElement("p"); // 创建 p 元素节点
    var txt1 = document.createTextNode("This is"); // 创建 文本节点
    var em = document.createElement("em"); // 创建 em 元素节点
    var txt2 = document.createTextNode("content."); // 创建 文本节点
    var txt3 = document.createTextNode("my "); // 创建 文本节点
    testdiv.appendChild(para); // 将 p 元素节点添加到 div 中
    para.appendChild(txt1); // 将文本节点添加到 p 元素中
    para.appendChild(em);
    para.appendChild(txt2);
    em.appendChild(txt3); // 将文本节点添加到 em 元素中
}

    在现有元素后插入一个元素：insertAfter()函数

    function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

    第8章：充实文档的内容

    • 把文档里的缩略语显示为一个“缩略语列表”
    • 为文档里引用的每段文献节选生成一个“文献来源链接”
    • 把文档所支持的快捷键线是位于分“快捷键清单”

    第9章：CSS-DOM

    给一个元素追加新的 class:

    function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
    }
}

    第10章 ：用JavaScript实现动画效果

    • 位置position

      • static
      • fixed
      • relative
      • absolute

    • 时间

      • var variable = setTimeout("function",interval)
      • clearTimeout(variable)
    • parseInt把字符串里的数值信息提取出来

    第11章：HTML5

    • canvas
    • 音频和视频
    • 表单

    第12章：综合示例

    csshtmldomjavascript
    MandyShen
    166 声望21 粉丝
    « 上一篇
    《JavaScript高级程序设计（第3版）》——引用类型（五）
    下一篇 »
    《JavaScript高级程序设计（第3版）》——事件（十三）

    引用和评论

    推荐阅读
    头像
    数组相关实现

    MandyShen赞 1阅读 1.4k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新