摘要:编程艺术第版笔记第章简史的起源是公司和公司合作开发的。第章文档对象用户定义对象内建对象如等。宿主对象由浏览器提供的对象。伪协议非标准化的协议。结构样式行为要分离。压缩脚本第章案例研究图片库改进版共享事件函数需要多个函数都在页面加载时执行。
《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()函数: Example
内嵌的事件处理函数
Example
非常不好,因为#只是创建了一个空链接。
平稳退化办法:将 href 属性设置为真实存在的 URL 地址,让它成为一个有效的链接。
Example
这样,即使 javascript 被禁止,这个链接也是可用的。
渐进增强渐进增强就是用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则。
结构、样式、行为要分离。
向后兼容
对象检测
// 例如 if (!document.getElementById) { return false; }
浏览器嗅探技术
通过提取浏览器供应商提供的信息来解决向后兼容问题。性能考虑
尽量少访问DOM和尽量减少标记
合并和放置脚本
推荐把 functionA.js,functionB.js,functionC.js合并到一个脚本文件中,这样可以减少加载页面时发送的请求数量。
把 标签都放到文档的末尾
标记之前。因为位于中的脚本会导致浏览器无法并行加载其他文件。
压缩脚本
JSMin(http://javascript.crockford.c...)
YUI Compressor
第6章:案例研究:图片库改进版 共享onload事件:addLoadEvent()函数需要多个函数都在页面加载时执行。addLoadEvent只有一个参数:打算在页面加载完毕时执行的函数的名字。
把现有的 window.onload 事件处理函数的值存入变量 oldonload;
如果这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它;
如果这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾。
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章:HTML5canvas
音频和视频
表单
第12章:综合示例文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114399.html
摘要:编程艺术第版笔记第章简史的起源是公司和公司合作开发的。第章文档对象用户定义对象内建对象如等。宿主对象由浏览器提供的对象。伪协议非标准化的协议。结构样式行为要分离。压缩脚本第章案例研究图片库改进版共享事件函数需要多个函数都在页面加载时执行。 《JavaScript DOM 编程艺术(第2版)》笔记 第1章:JavaScript 简史 JavaScript 的起源 JavaScript 是...
摘要:编程艺术第版笔记第章简史的起源是公司和公司合作开发的。第章文档对象用户定义对象内建对象如等。宿主对象由浏览器提供的对象。伪协议非标准化的协议。结构样式行为要分离。压缩脚本第章案例研究图片库改进版共享事件函数需要多个函数都在页面加载时执行。 《JavaScript DOM 编程艺术(第2版)》笔记 第1章:JavaScript 简史 JavaScript 的起源 JavaScript 是...
摘要:逻辑非操作符只能作用于单个逻辑操作数,其结果是把那个逻辑操作数所返回的布尔值取反。如果那个逻辑操作数所返回的布尔值是,逻辑非操作符将把它取反为为了避免产生歧义,上面这条语句把逻辑操作数放在了括号里,使逻辑非操作符作用于括号里的所有内容。 算术操作符 加减乘除这些算术操作中的每一种都必须借助于相应的操作符才能完成。操作符是JavaScript为完成各种操作而定义的一些符号。等号(=)、加...
摘要:逻辑非操作符只能作用于单个逻辑操作数,其结果是把那个逻辑操作数所返回的布尔值取反。如果那个逻辑操作数所返回的布尔值是,逻辑非操作符将把它取反为为了避免产生歧义,上面这条语句把逻辑操作数放在了括号里,使逻辑非操作符作用于括号里的所有内容。 算术操作符 加减乘除这些算术操作中的每一种都必须借助于相应的操作符才能完成。操作符是JavaScript为完成各种操作而定义的一些符号。等号(=)、加...
摘要:逻辑非操作符只能作用于单个逻辑操作数,其结果是把那个逻辑操作数所返回的布尔值取反。如果那个逻辑操作数所返回的布尔值是,逻辑非操作符将把它取反为为了避免产生歧义,上面这条语句把逻辑操作数放在了括号里,使逻辑非操作符作用于括号里的所有内容。 算术操作符 加减乘除这些算术操作中的每一种都必须借助于相应的操作符才能完成。操作符是JavaScript为完成各种操作而定义的一些符号。等号(=)、加...
阅读 1799·2021-11-22 09:34
阅读 3082·2019-08-30 15:55
阅读 661·2019-08-30 15:53
阅读 2050·2019-08-30 15:52
阅读 2999·2019-08-29 18:32
阅读 1988·2019-08-29 17:15
阅读 2391·2019-08-29 13:14
阅读 3556·2019-08-28 18:05