首页 > 代码库 > Head First HTML5 Programming笔记--chapter2 介绍Javascript和DOM
Head First HTML5 Programming笔记--chapter2 介绍Javascript和DOM
你已经了解了HTML标记（也称为结构），而且知道了CSS样式（也称为表示），剩下的就是Javascript（也称为行为）。
JavaScript的工作方式
1. 编写
你创建HTML标记和JavaScript代码，并把它们放在文件中，比如说index.html和index.js(或者，也可以都放在HTML文件中)。
2. 加载
浏览器获取并加载你的页面，从上到下解析它的内容。遇到JavaScript时，浏览器会解析代码，检查它的正确性，然后执行代码。浏览器还会建立HTML的一个内部模型，称为DOM。
3. 运行
JavaScript继续执行，使用DOM检查页面、完成修改、从页面接收事件，或者要求浏览器从Web服务器获取其他数据。
用JavaScript能做什么？
JavaScript是一个完备的编程语言，用其他语言能做的事情用JavaScript同样能够做到，甚至还能做的更多，因为我们就在Web页面内部编程。你可以要求JavaScript：
1. 建立一个语句
创建一个变量并赋值、让变量相加、完成计算，还可以使用一个JavaScript库的内置功能。
var temp = 95.6;var beanCounter = 4;var reallyCool = true;var motto = "I Rule";temp = (temp - 32) * 5 / 9;motto = motto + " and so do you!";var pos = Math.random();
2. 重复做事情
反复地完成语句，次数可以根据你的需要来定。
while(beanCounter > 0){ processBeans(); beanCounter = beanCounter -1;}
3. 做出判断
编写根据应用的状态并按条件执行的代码。
if(isReallyCool){ invite = "You‘re invited!";}else{ invite = "sorry, we‘re at capacity.";}
声明变量
变量可以存放东西。利用JavaScript，变量可以用来保存各种不同的东西。下面来声明一些变量：
var winner = 2; //整数值var boilingPt = 212.0; //浮点数值var name = "Dr. Evil"; // 或者，可以是字符串(我们把他们简称为“串”)；var isEligible = false; //或者一个布尔值，即true或false。
创建变量的3大步骤：
var scoops = 10;1. 第一步是声明变量，这里就是变量scoops。注意JavaScript与有些语言不同，不需要为变量指定一个类型，它只是创建了一个通用的容器，其中可以存放多种东西。
2. 下一步需要一个值放在这个变量中。可以用多种方式指定一个值：
var scoops = 10; //值可以是一个字面值，如一个数字或一个串var scoops = totalScoops/people; //或者，这个值可以是一个表达式的结果var scoops = Math.random()*10; //还可以使用JavaScript内部库的某个函数，如用一个随机数生成器创建的一个值。
3. 最后，我们已经有了一个变量，也有了一个值，现在要做的就是把这个变量赋给这个变量。
当然，一旦创建了一个变量，你可以在任何时刻改变它的值，甚至可以改为一个不同类型的值。下面给出几个例子：
scoops = 5; //可以把scoops重新设置为另一个整数值。scoops = scoops*10;//或者甚至可以在改变这个变量值的表达式中使用scoops自身。在这里，scoops将变成50scoops = "Tired of being an integer";//另外，可以同时改变scoops的值和类型，在这里会把它改为一个类。要当心，如果你以为scoops是一个数字，这可能会导致代码出现大问题。稍后会介绍这个问题。scoops = null;//或者，JavaScript中还有一个值表示“没有值”，称为null。我们会在后面介绍如何使用这个值。
变量是用来存放值的容器。JavaScript变量没有严格的类型，所以任何变量都可以存放数字、串或布尔值。
Dumb Questions
1. 如果我这样写，变量的值是什么呢？var winner;
答：执行执行这个语句之后，变量winner会赋值为undefined，这也是JavaScript的一个特殊值和类型。本书后面会介绍在什么情况下用这个值，以及如何使用。
2. 我见过其他编程语言，其中声明变量都要指定一个类型。比如int x或String y. JavaScript没有类型吗？
答：JavaScript当然有类型，不过与你以前用过的语义不同，JavaScript采用的是动态类型，也就是说你不用指定一个类型，JavaScript解析器会在代码运行时确定要使用什么类型。
如何命名变量
如果你以前在HTML元素中指定过元素id，会发现变量与id非常类型。创建变量只有几条规则。
规则#1：变量要以一个字母、下划线或美元符号开头。
var thisIsnotAJoke; //okvar _myVariable;//okvar $importantVar;//ok
var 3zip; //wrongvar %entage; //wrongvar ~approx; //wrong规则#2： 然后可以使用任意多个字母、数字、下划线或美元符。
var my3sons;var cost$;var vitaminB12
var zip code; //有个空格，这是不允许的。var first-name; //有-、+符号。这样不可以，这会让JavaScript不知所措。var to+do;
规则#3： 一定要避开JavaScript的所有保留字。
JavaScript包含很多保留字，比如if、else、while和for，另外，如果你试图用这些保留字作为你的变量名，JavaScript可能会不客气。
abstract asboolean break bytecase catch char class continue constdebugger default delete do doubleelse enum export extends false final finally float for functiongotoif implements import in instanceof int interface is long namespace native new nullpackage private protected public returnshort static super switch synchronizedthis throw throws transient true try typeof use var void volatile while with
Dumb Questions
1. 如果我用一个保留字作为变量名的一部分呢？比方说，能不能把一个变量命名为ifOnly（也就是说，变量名中能不能包含保留字if）？
答：当然可以，只要保证不要与保留字完全匹配就行。而且最好编写清晰的代码，所以一般不会用类似elze的名字，这可能会与else混淆。
2. JavaScript区分大小写吗？换句话说，myvariable和myVariable一样吗？
答：如果你熟悉HTML标记，可能会习惯于不区分大小写的语言，毕竟，浏览器会同样看待<head>和<HEAD>。不过，对于JavaScript，大小写是有影响的myvariable和myVariable是两个不同的变量。
3. 我听说JavaScript任何时候都可以为变量赋值（数字、串等）。不过，如果我让两个变量相加，其中一个是数字，另一个是字符串，会发生什么呢？
答： JavaScript很聪明，它会尝试根据你的需要转换类型。例如、如果你将一个串和一个数字相加，它就会把这个数字转换为一个串，然后将两个串联起来。有些情况下，这很不错，但是还有一些情况下这可能并不是你想要的。先想一想，稍后就会讨论这个问题。
Web镇指南：更好的命名
选择变量名时有很大的灵活性，所以我们想给你几个提示，以便你更容易地命名变量：
选择有含义的名字
像_m、r和foo之类的变量名可能对你来说有某种含义，但是它们在web镇中太泛滥了。你很可能过一段时间就会忘记它们原来的含义，不仅如此，如果用类似angle、currentPressure和passed等名字，你的代码也会更可读。
创建多词变量名时使用“came case”记法。
有时候你必须确定如何对一个表示复杂事物的变量命名，比如说，一个喷火的双龙头。怎么做呢？可以使用camel case记法，也就是除了第一个单词外，将每个单词的首字母大写：towHeadedDragonWithFire. Camel case记法很容易使用，在Web镇中使用也很广泛，可以提供足够的灵活性，能根据你的需要来创建特定的变量名。当然还有其他的方案，不过这种方法更为常用（甚至比JavaScript还流行）。
只有当有充分理由的情况下才使用以_和$开头的变量
以$开头的变量通常是为JavaScript库保留的，另外有些程序员会由于一些约定使用以_开头的变量，这些变量很少使用，建议你尽量离它们远一点，除非你有非常充分的理由（如果确实有理由你肯定说得出）。
保证安全
对变量命名时要保证安全。本书后面我们还会给出几个保证安全的提示，不过对现在来说，只需要记住命名要清楚、避开保留字，另外声明变量时一定要用var。
需要表达
//数值表达式//可以编写得到数字的表达式(9/5)*tempC+32x-1Math.random()*102.123+3.2
//布尔表达式//可以写得到布尔值true或false的表达式2>3startTime > nowtempF < 75level == 4pet == "Duck";
//串表达式//还可以写得到串的表达式"super"+"cali"+"st"p.innerHTMLphoneNumber.substring(0, 3)
//其他表达式function(){}document.getElementById("pink")new Array()
反反复复
可以使用JavaScript的while循环不断地做某件事，知道满足某个条件。
//初始化var scoops = 10;//完成条件测试while(scoops > 0){ //条件测试为TRUE时执行代码块 alert("More icescream!"); scoops = scoops -1;}//循环条件失败时继续执行下一条语句。alert("Life without ice cream isn‘t the same");
JavaScript还提供了for循环，使结构更为形式化。
//for(初始化；完成条件测试；更新)for(scoops = 10;scoops > 0;scoops--){ //条件测试为TRUE时执行代码块 alert("There‘s more ice scream!");}
//循环条件失败时继续执行下一条语句。alert("Life without ice cream isn‘t the same");Dumb Questions
一般来说，用for和while可以做同样的事情。不过，从这个冰淇淋例子可以看到，for循环更为紧凑一些，不过你可能会认为while更可读。所以关键是哪一个最适合你的具体情况。通常，for循环更习惯于对固定数目的值完成迭代（比如，购物车里的商品），而while循环更适合不断循环直至满足某个条件。
更多判断......另外，增加一个“收容箱”
if（scoops == 3）{ alert("Ice cream is running low!");}else if(scoops > 9){ alert("Eat faster, the ice cream is going to melt!");}else{ alert("Still lots of ice cream")}
在页面中增加JavaScript，怎么加？在哪里加？
<html> <head> <script> //语句 </script> <script src="mycode.js"></script> </head> <body> <script> //语句 </script> </body></html>
1. 联机脚本放在<head>元素中
2. 通过引用一个单独的JavaScript文件来增加脚本。
3. 将代码增加到文档体重，可以作为内联代码，也可以作为一个单独文件的链接。
JavaScript如何与页面交互
JavaScript和HTML是完全不同的两个东西。HTML是标记，而JavaScript是代码。所以怎么让JavaScript与页面中的标记交互呢？答案是可以使用文档对象模型（Document Object Model）。
1. 在浏览器中加载一个页面时，浏览器会解析HTML，并创建文档的一个内部模型，其中包含HTML标记中的所有元素。
我们把这称为文档对象模型，可以让它告诉你页面结构或页面的所有信息。
2. JavaScript可以与DOM交互来访问元素及元素中的内容。JavaScript还可以使用DOM来创建或删除元素。
要用JavaScript编写交互性的Web页面/应用，必须读取、响应和修改DOM。这本书会向你展示如何做到。
3. JavaScript修改了DOM时，浏览器会动态更新页面，所以你会看到页面上的新内容。
如何制作你自己的DOM
下面来看一些标记，并为它创建一个DOM。以下是一个简单的菜谱：
<!doctype html><html lang="en"><head> <title>My blog</title> <meta charset="utf-8"> <script src="blog.js"></script></head><body> <h1>My blog</h1> <div id="entry1"> <h2>Great day bird watching</h2> <p> Today I saw three ducks! I named them Huey, Louie, and Dewey. </p> <p> I took a couple of photos... </p> </div></body></html>
配料
一个格式正确的HTML5页面
一个或多个Web浏览器
做法
1. 首先在最上面创建一个document节点。
2. 接下来，取HTML页面的最顶层元素，在这里就是<html>元素，称之为当前元素，把它作为document的子节点增加到DOM。
3. 对于当前元素中嵌套的每一个元素，将该元素作为当前元素的子节点增加到DOM.
4. 对于刚增加的各个元素，返回第三步，重复这个工作，直到处理完所有元素。
初尝DOM
文档对象模型（Document Object Model）的妙处在于：它能够在所有浏览器上提供一种一致的方式，通过代码访问HTML的结构和内容。
每个DOM的最上面都有一个Document对象，然后是一个包含分支和叶子节点的树，分别对应HTML标记中的各个元素。下面来研究这个DOM
document: document总在最上面。document是树种的一个特殊部分，可以在JavaScript中用来访问整个DOM。document就像是一个朝下长的树的树根。
head, body, div:这些就像是树的分支。
meta, title, script, h1, h2, p, p: 这些就像是树的叶子（因为其中再没有元素或只有文本）。
DOM包含页面以及元素的内容。
HTML和JavaScript两个完全不同的技术如何关联
HTML和JavaScript完全来自不同的星球。为什么这么讲呢？HTML的DNA由描述性标记构成，允许你描述构成页面的一组嵌套元素。另一方面，JavaScript却是由纯算法性的基因物质构成的，主要用来描述计算。
通过DOM，JavaScript就能与页面通信，反之亦然。
getElementById
document.getElementById("greenplanet");//要记住，document表示浏览器中的整个页面，它包含完整的DOM，所以可以让它做任何事情，比如查找有一个特定id的元素。var planet = document.getElementById("greenplanet");planet.innerHTML = "Red Alert: hit by phaser fire!";//可以使用planet元素的innerHTML属性改变元素的内容
页面完全加载之前不要打扰DOM
如何告诉浏览器只在页面加载之后才执行代码呢？要告诉浏览器执行代码之前需要等待，我们要用到两部分JavaScript：一个是window对象，另外还有一个函数。
<script>function init(){//首先，创建一个名为init的函数，把现有的代码放在这个函数中 var planet = document.getElementById("greenplanet"); planet.innerHTML = "Red Alert: hit by phaser fire!";}window.onload = init; //这里将window.onload属性的值设置为这个函数名。//这表示，页面完全加载时要执行init中的代码。</script>
那么，DOM还能做什么？
从DOM得到元素；
向DOM创建或增加元素；
从DOM删除元素；
获取或设置元素的属性。
BULLET POINT
使用var使用一个JavaScript变量。
数字、布尔值和串是基本类型。
布尔值为true和false。
数字可以是整数或浮点数。
未赋值的变量值为undefined。
undefined和null是两个不同的值。undefined表示一个变量未赋值；null表示这个变量一个空值。
数值表达式、布尔表达式和串表达式会分别得到一个数、布尔值或串值。
要重复执行代码块，可以使用for或while循环。
for循环和while循环可以做同样的事情，要根据具体情况使用最合适的形式。
要结束一个for或while循环，某个时刻条件测试必须为false。
可以使用if/else语句根据一个条件测试做出判断。
条件测试时布尔表达式。
可以向Web页面的head部分或体部分增加JavaScript，或者把它放在单独的文件中，并从Web页面链接这个文件。
要用<script>元素包围你的JavaScript代码（或指向代码的链接）。
浏览器加载一个Web页面时，它会创建一个文档对象模型（Document Object Model， DOM），这是Web页面的一个内部表示。
通过使用JavaScript检查和修改DOM，可以是使你的Web页面有交互性。
可以使用document.getElementById访问页面中的一个元素。
document.getElementById使用一个id在DOM中查找元素。
可以使用innerHTML来修改元素的内容。
如果你想在页面完全加载之前访问或修改元素，会得到一个JavaScript错误，你的代码将不能正常工作。
将一个函数赋至window.onload属性，可以在浏览器完全加载页面之后运行这个函数中的代码。
可以使用一个数组来存储多个值。
要访问一个数组中的一个值。需要使用索引。索引是一个整数，指定数组中元素的位置（从0开始）。
数组的length属性会告诉你数组中有多少个元素。
通过结合循环和数组，可以按顺序访问一个数组中的各个元素。
Math是一个JavaScript库，包含大量与数学相关的函数。
Math.random会返回一个介于0和1的浮点数（但是不会为1）。
Math.floor把一个浮点数小数点后面的所有位去除，将它转换为一个整数。
Head First HTML5 Programming笔记--chapter2 介绍Javascript和DOM