JavaScript DOM编程艺术 读书笔记

第一章 JavaScript简史

1.1 JavaScript的起源

1.2 DOM

DOM是一套对文档的内容进行抽象和概念化的方法。

1.3 浏览器战争

1.3.1 DHTML

DHTML是描述HTML,CSS,和JavaScript技术组合的术语。

1.3.2 浏览器之间的冲突

1.4制定标准

1.4.1 浏览器以外的考虑

DOM的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容,结构和样式。

1.4.2 浏览器战争的解决

1.4.3 暂新的起点

WebKit是Safari和Chrome采用的一个开源Web浏览器引擎。以WebKit和Gecko(Firefox的核心)为代表的开源引擎, 在促进微软的Trident(IE的核心)等转悠浏览器引擎逐步向Web标准靠拢方面祈祷特别积极的作用。

1.5 小结

第二章 JavaScript语法

2.1 准备工作

程序设计语言分为解释型和编译型两大类。

编译型语言的错误在代码编译阶段就能被发现。而解析型语言的错误只有智能等到解析器执行到有关代码时才能被发现。

2.2 语法

2.2.1语句

statement

2.2.2 注释

comment

解析器直接忽略

单行//

多行 /* */

<!-- 单行注释 for JavaScript

2.2.3 变量

variable

赋值 assignment

JavaScript无需事先声明declare变量

JavaScript区分大小写

通常驼峰格式是函数名,方法名和对象属性名命名的首选格式。

字面量literal:可以直接在JavaScript代码中写出来的数据。

2.2.4 数据类型

声明变量的的同时还要声明变量的数据类型,这种声明成为类型声明 typing

必须明确类型声明的语言成为强类型语言strongly typed.

JavaScript是一种弱类型语言weakly typed.这意味着程序员可以再任何阶段改变变量的数据类型。

1 字符串

转义escaping

2 数值

带小数点数值成为浮点数floating-point number

负数 -20

负浮点数 -20.333333

3 布尔值

boolean

2.2.5 数组

字符串,数值和布尔型都是标量 scalar

关联数组

2.2.6 对象

关键字 Object

用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们,大大提高了脚本的可读性。

2.3 操作

算术操作符 arithmetic operation

拼接 concatenation +

2.4 条件语句

conditional statement

2.4.1 比较操作符

相等操作符==认为空字符串与false的含义相同。

=== !==

2.4.2 逻辑操作符

逻辑比较 operand

2.5 循环语句

2.5.1 while循环

do...while循环 至少执行一次

2.5.2 for循环

2.6 函数

在命名变量时,我用下划线来分隔各个单词,在命名函数时,我用驼峰命名法。

变量的作用域scope

全局变量 global variable

局部变量 local variable

如果在某个函数中使用了var 那个变量就被视为一个局部变量。反之,那个变量就会视为一个全局变量。

2.7 对象

属性property和方法method都用“点”语法访问

用户定义对象 user-defined object

内建对象 native object

2.7.1 内建对象

2.7.2 宿主对象

由浏览器提供的预定义对象被成为宿主对象 host object

document Form Image Element

2.8 小结

第三章 DOM

3.1 文档:DOM中的"D"

document

3.2 对象:DOM中的“O”

用户定义对象 user-defined object: 由程序员自行创建的对象。

内建对象 native object

宿主对象 host object ,window对象

BOM 浏览器对象模型 window.open window.blur

3.3 模型:DOM中的"M"

parent child sibling

3.4 节点

node

3.4.1 元素节点

element node

根元素<html>

3.4.2 文本节点

3.4.3 属性节点

attribute node

3.4.4 CSS

3.4.5 获取元素

通过元素ID getElementById

通过标签名字 getElmentsByTagName

文档里共有多少个元素节点 document.getElementsByTagName("*")

通过类名获取 getElementsByClassName

HTML5 DOM 新增的

3.4.6 盘点知识

3.5 获取和设置属性

3.5.1 getAttribute

getAttribute方法不属于document对象 属于元素节点对象

3.5.2 setAttribute

setAttribute做出的修改不会放映在文档本身的源代码里。

DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。

第四章 案例研究:JavaScript图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"  />
    <title>Image Gallery</title>
    <script>
   function showPic(whichpic){
  var source=whichpic.getAttribute("href"); 
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
}
</script>
  </head>
  <body>
    <h1>Snapshots</h1>
    <ul>
       <li>
          <a href="/images/1.png" title="A fireworks display" onClick="showPic(this); return false;" >Fireworks</a>
       </li>
       <li>
          <a href="/images/2.jpg" title="A cup of black coffee" onClick="showPic(this); return false;" >Coffee</a>
       </li>
       <li>
          <a href="/images/3.jpg" title="A red,red rose" onClick="showPic(this); return false;" >Rose</a>
       </li>
       <li>
          <a href="/images/4.jpg" title="The famous clock" onClick="showPic(this); return false;" >Big Ben</a>
       </li>
    </ul>
    <img id="placeholder" src="/images/5.gif" alt="my image gallery"/>
  </body>
</html>

4.4 对这个函数进行扩展

4.4.1 childNodes属性

4.4.2 nodeType属性

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

4.4.5 nodeValue属性

想改变一个文本节点的值,就用nodeValue属性

第五章 最佳实践

5.2 平稳退化

gracefull degradation

5.2.1 javascript: 伪协议

pseudo-protocol

伪协议让我们通过一个链接来调用javascript函数。

第六章 案例研究:图片库改进版

6.2 它支持平稳退化吗?

6.3 它的JavaScript与HTML标记是分离的吗

6.3.1 添加事件处理函数

结构化程序设计 structed programming:函数应该只有一个入口和一个出口。

如果一个函数有多个出口,只要这些出口集中出现在函数的开头部分,就是可以接受的。

6.3.2 共享onload事件

function addLoadEvent(func){
   var oldonload=window.onload;
  
   if(typeof window.onload!='function'){
      
        window.onload=func;
		
   }else{
       
      window.onload=function(){
	     oldonload();
		 func();
	  }
   }
 }

6.5 优化

三元操作符 ternary operator

6.8 DOM Core和HTML-DOM

第七章 动态创建标记

7.1 一些传统方法

7.1.1 document.write

避免使用document.write

MIME类型application/xhtml+xml与document.write不兼容

7.1.2 innerHTML属性

MIME类型application/xhtml+xml与innerHTML不兼容

但值得推荐使用

7.2 DOM方法

7.2.1 createElement方法

window.onload=function(){
	  var para=document.createElement("p");
	  var info="nodeName:";
	  info+=para.nodeName;
	  info+=" nodeType:";
	  info+=para.nodeType;
	  alert(info);
	}

7.2.2 appendChild方法

var para=document.createElement("p");
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);

7.2.3 createTextNode方法

window.onload=function(){
	  var para=document.createElement("p");
      var txt=document.createTextNode("Hello World");
      para.appendChild(txt);
      var testdiv=document.getElementById("testdiv");
      testdiv.appendChild(para);
	}

7.2.4 一个更复杂的组合

window.onload=function(){
	  var para=document.createElement("p");
      var txt1=document.createTextNode("This is ");
	  var emphasis=document.createElement("em");
	  var txt2=document.createTextNode("my");
	  var txt3=document.createTextNode(" content.");
      para.appendChild(txt1);
	  emphasis.appendChild(txt2);
	  para.appendChild(emphasis);
	  para.appendChild(txt3);
      var testdiv=document.getElementById("testdiv");
      testdiv.appendChild(para);
	}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励