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

最新推荐文章于 2024-03-25 22:22:22 发布

Masker_43

最新推荐文章于 2024-03-25 22:22:22 发布

阅读量117

点赞数

分类专栏：未完成 JavaScript 技术笔记

本文链接：https://blog.csdn.net/flash403/article/details/97815217

版权

未完成同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

技术笔记

4 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

持续更新……

注意：这是作者学习JavaScript的开始。
本文中一律使用斜体代表标签。
JavaScript常用标签

补充：

注释：
JS：//、/* */（与 C 相同）
HTML：
CSS：/**/

第2章：

2.1：Filename = test.html

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf-8"/>
	<title>Just a test</title>
</head>
<body>
	<script src = "example.js"></script>
	<!--代表脚本指向文件"example.js"，即JavaScript代码可以写在脚本文件中。-->
	<!--并且，将<script>放在</body>之前，能使浏览器加载速度最快。-->
</body>
</html>

2.1：准备工作
1. Sublime Text 的补全功能非常适合写 JS。
2. JS 代码必须通过HTML类文档执行，方法有三种。将 script 放在 /body 之前，并使用 src属性 可以使浏览器加载页面速度最快。
3. 程序设计语言包括编译型和解释型两大类，JS 是一种解释型语言，即：不需要编译器，仅需要解释器。 对 JS 而言，浏览器自带解释器。
2.2：语法
1. JS 注释方法与 C 完全一致。并且也允许使用 HTML 风格的注释，但又有一些不同。为避免混淆，并不建议使用。
2. JS 的变量无需声明，直接赋值即可。但推荐使用关键字 var 在赋值的同时声明。
3. JS 对大小写敏感。
4. JS 也无须类型声明，因此它是一种弱类型语言。
5. 数据类型：数值、字符串、布尔值。字符串：双引号、单引号均可，转义时可根据“所穿衣服”选择性转义。推荐全部使用双引号。
6. 数组：无需声明，也无需指定数组大小。声明的写法为：var Beatles = Array() ;。数组下标从零开始。同数组中元素类型可以不同，甚至可以令 A[0] = Beatles ;（二维数组，可通过 A[0][0] 访问）。
7. 关联数组：类似 C++ 中的 map，即下标可以为字符串。但不推荐使用。
8. 对象：类似结构体或类，由于 JS 不需要声明，因此可以这样写：var Beatles = {} ; Beatles.vocalist = lennon ;
2.3：操作
1. 字符串的相加：类似 Python，也可以直接使用 ‘+’，甚至也可以：alert(“10” + 20) 强制类型转换成字符串。这样的输出结果为 1020 。
2.4：条件语句（ if ）
1. 是否使用花括号与 C 一致。
2. 注意！ JS 中有严格比较的操作符。即：=== 和 !==，这两种操作符既比较值也比较类型；而 == 和 != 仅比较值，即 “” == false 返回 true。
3. && || !：或与非，和 C 相同。
2.5：循环语句
1. 与 C++ 一致。
2.6：函数
1. function。
2. 如果在函数中 使用 var 声明了一个与某全局变量同名的局部变量，则全局变量是安全的；若没有用 var，则不存在局部变量。（必须使用 var ！）
2.7：对象
1. 对象是自包含的数据集合，所包含的数据可以通过两种形式访问：属性（property）、方法（method）。均使用点语法进行访问。
2. 程序中创建的对象：术语称为用户定义对象（user-defined object）。
3. 创建实例需要关键字 new，如：var Jeremy_Lin = new PERSON ;（PERSON 是已创建的对象；Jeremy_Li 是它的实例）。
4. 内建对象：JS 已经写好的对象。注意数组就是一种内建对象（看它的调用形式！）。注意不要和 STL 中的字符串长度函数混淆：var Beatles = new Array() ; alert(Beatles.length) ; 这里所使用的是对象Array 的属性length。
5. 其它内建对象：
  Math.round()：括号内是数，四舍五入。
  Date()：在创建新实例时自动以当前的时间和日期进行初始化。且 Date 对象提供有方法 getDay() 等。如：var cur = new Date() ; alert(cur.getDay()) ; 可以提供给定日期的星期。
6. 宿主对象：由运行环境（对Web应用来说即为浏览器）提供的预定义对象。如 Form、Image、Element 等，一般我们仅使用 document 就够了。

第3章：

3.3：购物清单

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>shopping list</title>
</head>
<body>
	<h1>What to Buy?</h1>
	<p title="a gentle reminder">Don't forget to buy these staff.</p>
	<ul id="purchases">
		<li>A tin of beans</li>
		<li class="sale">Cheese</li>
		<li class="sale important">Milk</li>
	</ul>
</body>
</html>

3.4：class

<!DOCTYPE html>
<html>
<head>
	<title>class</title>
	<style type="text/css">
		.special{
			font-style: italic;
		}
		/*
		或者：
		h2.special{
			font-style: italic;
		}
		*/
	</style>
</head>
<body>
	<p class="special">This paragraph has a special class.</p>
	<h2 class="special">So does this headline.</h1>
</body>
</html>

3.4：id

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>shopping list</title>
	<style type="text/css">
		#purchases{
			border: 1px solid white;
			background-color: #333;
			color: #ccc;
			padding: 1em;
		}
		#purchases li{
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h1>What to Buy?</h1>
	<p title="a gentle reminder">Don't forget to buy these staff.</p>
	<ul id="purchases">
		<li>A tin of beans</li>
		<li class="sale">Cheese</li>
		<li class="sale important">Milk</li>
	</ul>
</body>
</html>

3.5：Filename = example.js

var paras = document.getElementsByTagName('p');
for (var i = paras.length - 1; i >= 0; i--) {
	alert(paras[i].getAttribute("title"))
}

3.5：setAttribute

var paras = document.getElementsByTagName('p');
for (var i = 0; i < paras.length; i++) {
	var title_text = paras[i].getAttribute("title");
	if(title_text){
		paras[i].setAttribute("title" , "brand new title text");
		//把 A 属性的值修改为 “ B ”
		alert(paras[i].getAttribute("title"));
	}
}

3.1：文档：DOM中的“D”
3.2：对象：DOM中的“O”
1. 对象分为三类：
  用户定义对象：user-defined object.（程序员创造的对象）
  内建对象：native object.（语言提供的对象）
  宿主对象：host object.（由浏览器提供的对象）
2. 宿主对象中，最基础的是 window 对象，它对应着浏览器窗口本身。它的属性和方法统称为 BOM：浏览器对象模型。
3.3：模型：DOM中的“M”
1. 文档是“节点树”。
3.4：节点
1. 每一个节点都是一个对象。
2. 元素节点： 标签。 其中 html 没有被包含，是根元素。
3. 文本节点： 被包含在元素节点内。
4. 属性节点： title、id、class 等。
5. CSS：
  层叠样式表（Cascading Style Sheets）。
  内容是对样式的声明，既可单独成立文件也可以嵌在 head 中（置于 style 之间）。
  继承：子元素继承父元素的样式属性。
  当需要精细控制时，就可以使用 class、id。
  class： 使用 ‘.’，可以对任何元素声明一个属性值，属性值相同的元素可以使用同一种样式；也可以为某特定类型元素定义一种样式。
  id： 使用 ‘#’，为某个元素加上独一无二的标识符。可以控制本身和子元。
6. 获取元素：
  （详见原书）
  三种 DOM 方法：document.getElementById、document.getElementByTagName、
  getElementById：返回一个对象。
  getElementsByTagName：（一定）返回一个数组。可使用通配符 “ * ”。
  getElementsByClassName：（一定）返回一个数组。可查询同时多个类名（取交集，与顺序无关）。
3.5：获取和设置属性
1. getAttribute：没有值则返回 null。
2. setAttribute：代码不会变，但属性值被覆盖。

第4章：

4.1：图片清单

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8"/>
	<title>Image Gallery</title>
</head>
<body>
	<h1>SnapShots</h1>
	<ol>
		<li>
			<a href="Images/Alvaro Soler.jpg">Alvaro Soler</a>;
		</li>
		<li>
			<a href="Images/Barney.jpg">Barney</a>
		</li>
	</ol>
	<!--使用占位符-->
	<img id="PLACE" src="Images/PLACE.jpg" alt="my image gallery"/>
	<script src="example.js"></script>
</body>
</html>

4.2：JS function

function ShowPic(WhichPic) {
	//WhichPic：一个带有href属性的元素节点参数。
	var source = WhichPic.getAttribute("href");
	var placeholder = document.getElementById('PLACE');
	placeholder.setAttribute("src",source);
}

4.3：拦截、替换

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8"/>
	<title>Image Gallery</title>
</head>
<body>
	<h1>SnapShots</h1>
	<ol>
		<li>
			<a href="Images/Alvaro Soler.jpg" onclick="ShowPic(this);return false;" title="Alvaro Soler">Alvaro Soler</a>;
		</li>
		<li>
			<a href="Images/Barney.jpg" onclick="ShowPic(this);return false;" title="Barney">Barney</a>
		</li>
	</ol>
	<img id="PLACE" src="Images/PLACE.jpg" alt="my image gallery"/>
	<script src="example.js"></script>
</body>
</html>

4.1：标记
1. 相对路径：
  当前目录：. /（一般可省）
  父级目录：. . /
2. 改进：
  使用占位符。
4.2：JavaScript
1. 拦截网站默认行为、替换图片。
2. 书写 JS 函数，更改占位符的 src。
3. 虽然有些老办法操作图片、表单等更便捷一些，但 DOM是适用多环境多语言的通用型API，通用性和可移植性更好，因此推荐使用。
4. 在 HTML 代码中添加事件处理函数：event = "JavaScript statements ; "。可以在引号间放置任意数量的 JS 语句。
4.3：应用这个 JavaScript 函数
1. 事件处理函数工作机制：一旦事件发生，相应 JS 代码就开始执行并可以返回一个值，传递给该事件函数。所以，若 onclick 函数的返回值是 false，则认为该链接未被点击，有效防止了用户被带到目标链接窗口。
2. 关键字 this 代表本元素节点。
4.4：对这个函数进行扩展