第一章 基本了解HTML5
什么是HTML5？
HTML5是一种标准，负责制定HTML标准的是W3C（World Wide Web Consortium，万维网联盟）。
HTML5不仅仅是HTML规范的最新版本，它还是一系列用来制作现代富Wed内容的相关技术的总称。其中最重要的三项技术是HTML5核心规范、CSS（Cascading Style Sheets，层叠样式表）和JavaScript。
HTML是人、CSS是修饰、JavaScript是行为。
HTML5最大的变化之一是添加了canvas元素。这个元素是对插件现象的另一反应，它提供了一个通用的绘图平面，开发人员可以用它完成一些通常用Adobe Flash来完成的任务。
HTML5引入了一些用来分开元素的含义和内容呈现方式的特殊和规则。这是HTML5中的一个重要概念。
第二章 关于浏览器
常用的浏览器
1.Google Chrome
2.Mozilla Firefox
3.Opera
4.Apple Safari
5.Internet Explorer
HTML编辑器
书中推荐：ActiveState和Komodo Edit
我使用：sublime
第三章 初探HTML
HTML是一种标记语言。
元素：开始标签、内容、结束标签。
元素摘要：
a 生成超链接
body 表示HTML文档的内容
button 生成用以提交表单的按钮
code 表示计算机代码片段
DOCTYPE 表示HTML文档的开始
head 表示HTML文档的头部区域
hr 表示主题的改变
html 表示文档的HTML部分
input 表示用户输入的数据
label 生成另一元素的说明标签①
p 表示段落
style 定义CSS样式
table 表示用表格组织的数据
td 表示表格单元格
textarea 生成用于获取用户输入数据的多行文本框
th 生成表头单元格
title 表示HTML文档的标题
tr 表示表格行
①：label和tag都是标签的意思。
空元素：元素的开始和结束标签之间并非一定要有内容。没有内容的元素称为空元素。
虚元素：有些元素只能使用一个标签表示，在其中放置任何内容都不符合HTML规范。此类元素称为虚元素，hr就是这样的一个元素。它是一种组织性元素，用来表示内容中段落级别的终止。虚元素有两种表示法：
①用单个开始标签表示虚元素：
②用空元素结构表示虚元素：
使用元素属性
元素应用属性
eg：I like apples and oranges.
一个元素应用多个属性
eg：I like <a class=“link” href="/apples.html" id=“firstlink">apples and oranges.
使用布尔属性
eg：Enter your name:
此例中布尔属性：disabled（阻止用户输入数据）
为布尔属性指定空字符串值
eg：Enter your name:
eg：Enter your name:
注：布尔属性有点小古怪，它以本来存在而不是用户为其设定的值对元素进行配置。
对元素应用自定义属性
用户可自定义属性，这种属性必须以data-开头。
eg：Enter your name: <input disabled=”true" data-creator=“adam” data-purpose=“collection”>
HTML文档有可能会给浏览器以外的别的一些软件处理。
XHTML：HTML的XML序列化形式。也就是说，以符合XML规范的方式来表达文档的内容以及HTML元素和属性，以便XML解析程序处理。
外层结构：DOCTYPE和html
DOCTYPE：让浏览器明白其处理的是HTML文档。
html：告诉浏览器，开始标签和结束标签之间，所有元素内容都应作为HTML处理。
元数据：用来向浏览器提供文档的一些信息。head里
内容：告诉浏览器该向用户显示文档的哪个部分。body里
父元素：包含另一个元素的元素是被包含元素的父元素。body元素是code元素的父元素。
子元素：被另一个元素包含的元素是子元素。code元素是body元素的子元素。
PS：一个元素可以拥有多个子元素，但只能有一个父元素。
后代元素：包含在其他元素中的元素也可以包含别的元素。所有被包含元素是第一个父元素的后代元素。body元素和code元素都是html元素的后代元素。
兄弟元素：具有同一个父元素的几个元素互为兄弟元素。
HTML５规范将元素分为三大类：
１.元数据元素：用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示。
２.流元素：确定一个元素合法的父元素和子元素范围，是短语元素的超集。
３.短语元素：确定一个元素合法的父元素和子元素范围，是HTML的基本成分。
HTML实体：具有特殊含义的字符，如＜、＞等。实体是浏览器用来替代特殊字符的一种代码。详细自行查表。
局部属性：每种元素都能规定自己的属性。每一个局部属性都可以用来控制元素独有行为的某个方面。
全局属性：用来配置所有元素的共有的行为。全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或有用的行为改变。
①accesskey属性：设定一个或几个用来选择页面上的元素的快捷键。
例：使用accesskey属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
Name:<input type="text" name="name" accesskey="n"/>
<p/>
Password:<input type="password" name="password" accesskey="p"/>
<p/>
<input type="submit" value="Log In" accesskey="s"/>
</form>
</body>
</html>
②class属性：用来将元素归类。这样做通常是为了能够找到文档中的某一类元素或为某一类元素应用CSS样式。
例：使用class属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" class="class1 class2">Apress web site</a>
<p/>
<a href="http://w3c.org" class="class2 otherclass">W3C web site</a>
</body>
</html>
PS：一个元素可以被归入多个类别，为此在class属性值中提供多个用空格分隔的类名即可。
类名可以谁便取，但最好做到见名知义。
例：定义依靠类起作用的样式
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
.class2{
background-color: grey;
color: white;
padding: 5px;
margin: 2px;
}
.class1{
font-size: x-large;
}
</style>
</head>
<body>
<a href="http://apress.com" class="class1 class2">Apress web site</a>
<p/>
<a href="http://w3c.org" class="class2 otherclass">W3C web site</a>
</body>
</html>
PS：用style元素定义了两条样式。
例：在脚本中使用class属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" class="class1 class2">Apress web site</a>
<p/>
<a href="http://w3c.org" class="class2 otherclass">W3C web site</a>
<script type="text/javascript">
var elems = document.getElementsByClassName("otherclass");
for(i=0;i<elems.length;i++){
var x = elems[i];
x.style.border = "thin solid black";
x.style.blackgroundColor = "white";
x.style.color = "black";
}
</script>
</body>
</html>
PS：此例中的脚本程序找到所有属于otherclass类的元素并对其设置了一些样式。
③contenteditable属性：是HTML5中新增加的属性，其用途是让用户能够修改页面上的内容。
例：使用contenteditable属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p contenteditable="true">It is raining right now</p>
</body>
</html>
PS：此例把contenteditable属性用在一个p元素身上。该属性值设置为true时用户可以编辑元素内容，设置为false时则禁止编辑。如果未设定其值，那么元素会从父元素处继承该属性的值。
④contextmenu属性：用来为元素设定快捷菜单。这种菜单会在受到触发的时候弹出来。（书是2014年的，那时候没有浏览器支持这个属性）
⑤dir属性：用来规定元素中文字的方向。其有效值有两个：
1.Itr：用于从左到右的文字
2.rtl：用于从右到左的文字
例：使用dir属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p dir="rtl">This is right-to-left</p>
<p dir="ltr">This is left-to-right</p>
</body>
</html>
⑥draggable属性：HTML5支持拖放操作的方式之一，用来表示元素是否可被拖放。
⑦dropzone属性：HTML5支持拖放操作的方式之一，与上述draggable属性搭配使用。
⑧hidden属性：hidden是个布尔属性，表示相关元素当前毋需关注。浏览器对它的处理方式是隐藏相关元素。
例：使用hidden属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script>
var toggleHidden = function(){
var elem = document.getElementById("toggle");
if (elem.hasAttribute("hidden")) {
elem.removeAttribute("hidden");
}else{
elem.setAttribute("hidden","hidden");
}
}
</script>
</head>
<body>
<button onclick="toggleHidden()">Toggle</button>
<table>
<tr><th>Name</th><th>City</th></tr>
<tr><td>Adam Freeman</td><td>London</td></tr>
<tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>
<tr>Z<td>Anne Jones</td><td>Paris</td></tr>
</table>
</body>
</html>
PS：文档中有一个table元素，它包含的一个tr元素（代表表格中的一行）设置了hidden属性。文档中还有一个button元素，按下它所代表的按钮将会调用定义在script元素中的JavaScript函数toggleHidden。这段脚本程序的作用是：如果那个tr元素的hidden属性存在就将其删除，否则就添加该属性。
⑨id属性：用来给元素分配一个唯一的标识符。这种标识符通常用来将样式应用到元素上或在JavaScript程序中用来选择元素。
例：使用id属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<style>
#w3clink {
background: grey;
color:white;
padding: 5px;
border: thin solid black;
}
</style>
<body>
<a href="http://apress.com">Apress web site</a>
<p/>
<a href="http://w3c.org" id="w3clink">W3C web site</a>
</body>
</html>
PS：为了根据id属性值应用样式，需要在定义样式时使用一个以#号开头后接id属性值的选择器(selector)。
⑩lang属性：用于说明元素内容使用的语言。
例：使用lang属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p lang="en">Hello - how are you?</p>
<p lang="fr">Bonjour - comment êtes-vous?</p>
<p lang="es">Hola - ¿cómo estás? </p>
</body>
</html>
PS：使用lang属性的目的是让浏览器调整其表达元素内容的方式。
⑾spellcheck属性：用来表明浏览器是否应该对元素的内容进行拼写检查。这个属性只有用在用户可以编辑的元素上时才有意义。
例：使用spellcheck属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<textarea spellcheck="true">This is some misplled text</textarea>
</body>
</html>
PS：true（启动拼写检查）或false（禁用拼写检查），拼写检查的实现方式因浏览器而异。
⑿style属性：用来直接在元素身上定义CSS样式（这是在style元素或外部样式表中定义样式之外的一种选择）。
例：使用style属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" style="background: grey;color: white;padding: 10px">
Visit the Apress site
</a>
</body>
</html>
⒀tabindex属性：HTML页面上是键盘焦点可以通过按Tab键在各元素之间切换。用tabindex属性可以改变默认的转移顺序。
例：使用tabindex属性
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
<label>Name:<input type="text" name="name" tabindex="1"></label>
<p/>
<label>City:<input type="text" name="city" tabindex="-1"></label>
<p/>
<label>Country:<input type="text" name="country" tabindex="2"></label>
<p/>
<input type="submit" tabindex="3"/>
</form>
</body>
</html>
⒁title属性：提供了元素的额外信息。浏览器通常用这些东西显示工具提示。
例：使用title属性
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" title="Apress Publishing">Visit the Apress site</a>
</body>
</html>
两种有用的HTML工具
1.编辑器，作者推荐Komodo Edit（好的，我下载用用看）
2.浏览器查看源代码（Chrome已经满足）
第四章 初探CSS
定义和应用样式
CSS样式由一条或多条以分号隔开的样式声明组成。每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。
eg：background-color：grey；color：white
分解：
属性：background-color
值：grey
声明：background-color：grey
CSS属性摘要
background-color 设置元素的背景颜色
border 设定围绕元素的边框
color 设置元素的前景颜色
font-size 设置元素文字的字号
height 设置元素高度
padding 设定元素内容与边框之间的间距
text-decoration 设置元素文字的装饰效果，如下划线。
width 设置元素宽度
使用元素内嵌样式
样式定义之后要把样式应用到元素身上的各种方式中，最直接的是使用全局属性style。
eg：用全局属性style定义样式
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" style="background-color: grey; color: white">
Visit the Apress website
</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
使用文档内嵌样式
直接对元素应用样式的缺点：对于可能大量需要各种样式的复杂文档来说缺乏效率。
使用style元素（而不是style属性）定义文档内嵌样式，通过CSS选择浏览器指示浏览器应用样式。
例：使用style元素，使用了一个简单的CSS选择器。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a{
background-color: grey;
color: white
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：此例做法用的CSS声明，它们被包在一对花括号之间，并且跟在一个选择器之后。
本例的选择器为a，它指示浏览器将样式应用到文档中的每一个a元素。
一个style元素中可以定义多条样式，为此只要不断重复定义一个选择器和一套样式声明的过程即可。
例：在一个style元素内定义多条样式。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a{
background-color: grey;
color: white
}
span{
border: thin black solid;
padding: 10px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：
border属性：围绕目标元素的边框。
padding属性：目标元素与边框之间的间距。
使用外部样式表
一个独立的样式表文件，其中包含着用户的样式定义。样式一般要用于多个HTML文档，这种文件按惯例以.css为文件扩展名。
例：文件style.css
a{
background-color: grey;
color: white
}
span{
border: thin black solid;
padding: 10px;
}
PS：只需要选择器和一套样式声明，不需style元素。HTML文档通过link元素将这些样式导入其中。
代码如下：导入外部样式表。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="try_style05.css"></link>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：
1.文件可链接多个样式表。
2.为每个样式表使用一个link元素即可。
3.如果不同样式表中的样式使用了相同的选择器，则应用后导入的样式。
①从其他样式表中导入样式
可以用@import语句将样式从一个样式表导入另一个样式表。
例：文件combined.css
@import "styles.css";
span{
border: medium black dashed;
padding: 10px;
}
PS：
1.一个样式表可以导入任意多别的样式表。
2.每个样式表使用一条@import语句即可。
3.@import语句必须位于样式表顶端。
例：链接到一个包含有导入语句的样式表
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="combined.css"/>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：styles.css中应用于span元素的那条样式被combined.css中定义的具有相同选择器的样式盖过。
@import语句用得并不广泛，其效率不如处理多个link元素并靠样式层叠解决问题。
②声明样式表的字符编码
在CSS样式表中可以出现在@import语句之前的只有@charset语句（用于声明样式表使用的字符编码）。
例：声明样式表使用的字符编码类型
@charset "UTF-8";
@import "styles.css";
span{
border: medium black dashed;
padding: 10px;
}
PS：如果样式表中未声明所使用的字符编码，那么浏览器讲使用载入该样式表的HTML文档声明的编码。要是HTML文档也没有声明编码，那么默认情况下使用的将是UTF-8。
样式的层叠和继承
浏览器根据层叠和继承规则确定显示一个元素时各种样式属性采用的值。（一个元素对应一套CSS属性）
浏览器样式
用户代理样式。是元素尚未设置样式时浏览器应用在它身上的默认样式。
这些样式因浏览器而略有差异，不过大体一致。
例：不含样式的HTML文档
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：链接的文字内容被显示为蓝色，而且带有下划线。
推测出来的a元素的默认浏览器样式
a{
color：blue;
text-decoration：underline;
}
用户样式
用户自己定义的样式表。（特别原因：让有生理不便的人更容易使用网页）
各种浏览器都有自己管理用户样式的方式。
Chrome：在用户的个人配置信息目录中生成一个名为Default\User StyleSheets\Custom.css的文件。
添加到这个文件中的任何样式都会被用于用户访问的所有网站，不过要依下节的层叠规则行事。
样式如何层叠
浏览器要显示元素时求索一个CSS属性值的次序。
(1)元素内嵌样式（用元素的全局属性style定义的样式）；
(2)文档内嵌样式（定义在style元素中的样式）；
(3)外部样式（用link元素导入的样式）；
以上三个属性来源合称为作者样式
(4)用户样式（用户定义的样式）； 称为用户样式
(5)浏览器样式（浏览器应用的默认样式）。 称为浏览器样式
用重要样式调整层叠次序
把样式属性值标记为重要（important），可以改变正常的层叠次序。
例：将样式属性标记为重要
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a{
color: black !important;
}
</style>
</head>
<body>
<a style="color: red" href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：能凌驾于作者定义的重要属性值之上的只有用户样式表中定义的重要属性值。对于普通属性，作者样式中的值优先于用户样式中的值，而对于重要属性情况正好相反。
根据具体程度和定义次序解决同级样式冲突
对于两条定义于同一层次的样式都能应用于同一个元素。浏览器会评估两条样式的具体程度，然后选中较为特效的那条。样式的具体程度通过统计三类特征得出：
(1)样式的选择器中id值的数目；
(2)选择器中其他属性和伪类的数目；
(3)选择器中元素名和伪元素的数目。
浏览器将三类评估所得值结合起来，由此辨识出最特殊的样式并采用其属性值。
例：样式的具体程度
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a{
color: black;
}
a.myclass{
color: white;
background: grey;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a class="myclass" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：a-b-c，本例中第一个a：0-0-0，第二个a：0-1-0。
如果同一个样式属性出现在具体程度相当的几条样式中，那么浏览器会根据其位置的先后选择所用的值，规则是后来者居上。
例：具体程度相同的样式
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a.myclass1{
color: black;
}
a.myclass2{
color: white;
background: grey;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
例：颠倒样式定义的次序
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a.myclass1{
color: white;
background: grey;
}
a.myclass2{
color: black;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：根据样式的具体程度和定义次序确定选用的样式属性值，应该把各个属性分开考虑。
继承
当浏览器在直接相关的样式中找不到某个属性的值，由继承机制使用父元素的这个样式属性值。
例：CSS属性继承
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
p{
color: white;
background: grey;
border: medium solid black;
}
</style>
</head>
<body>
<a style="color: red" href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：
1.span的color属性继承父元素p。
2.并非所有CSS属性均可继承。这方面有条经验可供参考：
①与元素外观（文字颜色、字体等）相关的样式会被继承。
②与元素在页面上的布局相关的样式不会被继承。
3.在样式中使用inherit这个特别设立的值可以强行实施继承，明确指示浏览器在该属性上使用父元素样式中的值。
例：使用inherit
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
p{
color: white;
background: grey;
border: medium solid black;
}
span{
border: inherit;
}
</style>
</head>
<body>
<a style="color: red" href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：span元素的border属性值继承自父元素p，也具有了边框。
CSS中的颜色
CSS中设置颜色最简单的方法：
①使用规定的颜色名称。
②设置红、绿、蓝三种颜色成分的值（十进制或十六进制）。
设置颜色成分值时，十进制值以逗号分隔，十六进制值前面通常要加上一个#符号（例如#ffffff，它代表白色）
附表：
CSS颜色选编——基本颜色名称
颜色名称 十六进制表示 十进制表示
black #000000 0,0,0
silver #C0C0C0 192,192,192
gray #808080 128,128,128
white #FFFFFF 255,255,255
maroon #800000 128,0,0
red #FF0000 255,0,0
purple #800080 128,0,128
fushia #FF00FF 255,0,255
green #008000 0,128,0
lime #00FF00 0,255,0
olive #808000 128,128,0
yellow #FFFF00 255,255,0
navy #000080 0,0,128
blue #0000FF 0,0,255
teal #008080 0,128,128
aqua #00FFFF 0,255,255
CSS颜色选编——可用的灰色派生色
颜色名称 十六进制表示 十进制表示
darkgray #a9a9a9 169,169,169
darkslategray #2f4f4f 47,79,79
dimgray #696969 105,105,105
gray #808080 128,128,128
lightgray #d3d3d3 211,211,211
lightslategray #778899 119,136,153
slategray #708090 112,128,144
表示更复杂的颜色
CSS中还可以用一些函数选择颜色。
CSS颜色函数
函数 ` 说明 示例
rgb(r,g,b) 用RGB模型表示颜色 color：rgb(112,128,144)
rgba(r,g,b,a) 用RGB模型表示颜色，外加 color：rgba(112,128,144,0.4)
一个用于表示透明度的a值（0
代表全透明，1代表完全不透明）
hsl(h,s,l) 用HSL模型（色相[hue]、饱和度 color：hsl(120,100%,22%)
[saturation]和明度[lightness]）
表示颜色
hsla(h,s,l,a) 与HSL模式类似，只不过增加了 color：hsla(120.100%,22%,0.4)
一个表示透明度的a值
CSS中的长度
width属性：设置元素的宽度。
font-size属性：设置元素内容的字号。
例：为属性设置长度值
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
p{
background: grey;
color: white;
width: 5cm;
font-size: 20pt;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：数字和单位标识符应连在一起。两种类型的长度单位：1.绝对单位。2.与其他属性挂钩的相对单位。
绝对长度
这类单位是现实世界的度量单位。
CSS中的绝对单位
单位标识符 说明
in 英寸
cm 厘米
mm 毫米
pt 磅（1磅等于1/72英寸）
pc pica（1pica等于12磅）
PS：
1.一条样式中可以混合使用多种单位。
2.CSS试图把像素作为相对度量单位处理，然而事与愿违。
相对长度
相对长度的规定和实现都比绝对长度更复杂，需要以严密、精确的语言明确定义。
相对单位的测量需要依托其他类型的单位。
CSS相对单位
单位标识符 说明
em 与元素字号挂钩
ex 与元素字体的“x高度”挂钩
rem 与根元素的字号挂钩
px CSS像素（假定显示设备的分辨率为96dpi）
% 另一属性的值的百分比
1.与字号挂钩的相对单位
使用相对单位时所设置的实际上是另一种度量值的倍数。
例：使用相对单位
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
p{
background: grey;
color: white;
font-size: 15pt;
height: 2em;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<p style=" font-size: 12pt">I also like mangos and cherries.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：
2em：p元素在屏幕上显示出来的高度应为字号的两倍。这个倍数是在显示每个元素的时候计算出来的。本例中这个单位是从font-size属性值推算而得，而font-size属性值在此使用的单位是rem。
例：使用从另一相对单位推算出来的相对单位
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
html{
font-size: 0.2in;
}
p{
background: grey;
color: white;
font-size: 2rem;
height: 2em;
}
</style>
</head>
<body style="font-size: 14pt">
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and organes.</p>
<p style=" font-size: 12pt">I also like mangos and cherries.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：
ex：指当前字体的x高度，即字体基线到中线之间的距离。
一般与字母x的高度相当（所以得了这么一个名称），通常1ex大致等于0.5em。
2.像素单位的问题
像素一般定义：指显示设备上可寻址的最小单元——图像的基本元素。
CSS对像素的定义：
参考像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角（visual angle）
PS：这个定义太模糊不清，一般浏览器把1像素视为1英寸的1/96，被当成绝对单位对待。
例：在样式中使用像素单位
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
p{
background: grey;
color: white;
font-size: 20px;
width: 200px;
}
</style>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
3.百分比单位
可以把一个度量单位表示为其他属性值的百分比。
例：以其他属性值的百分比为单位
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
p{
background: grey;
color: white;
font-size: 200%
width:50%;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：使用百分比单位会遇到的两个麻烦：
1.并非所有属性都能使用这个单位。
2.对于能用百分比单位的属性，那个百分比挂钩的其他属性各不相同。
（例如：对于font-size属性，挂钩的元素继承到font-size的值；而对于width属性，挂钩的则是元素的包含块的宽度。）
4.未获广泛支持的CSS属性
缺乏浏览器支持的CSS相对度量单位
单位标识符 说明
gd 与网格（grid）挂钩。它依赖于CSS规范中一些定义不太明确的属性，
所以未获广泛支持
vw 与视口（viewport）宽度挂钩。1vw等于文档显示区域（如浏览器窗口）
宽度的1%
vh 与视口高度挂钩，1vh等于文档显示区域高度的1%
vmin 1vmin等于最短视口轴长（高度和宽度中较小的那个）的1%
vmax 1vmax等于最长视口轴长的1%
ch 与用当前字体显示的字符的平均宽度挂钩。它在CSS规范中的定义很
潦草，其实现也不一致。
5.用算式作值
将CSS属性值设置为算式
例：以算式为值
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
p{
background: grey;
color: white;
font-size: 20pt;
width: calc(80% - 20px);
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
PS：算式包含在关键字calc之后的括号之中。在其中可以混合使用各种单位进行基本的算式运算。
其他CSS单位
使用CSS角度
角度的表示方式是一个数字后跟一个单位，如360deg。
CSS角度单位
单位标识符 说明
deg 度（取值范围：0deg~360deg）
grad 百分度（取值范围：0grad~400grad）
rad 弧度（取值范围：0rad~6.28rad）
turn 圆周（1turn等于360deg）
使用CSS时间
可以用CSS时间单位度量时间间隔。时间的表示方式是一个数字后跟一个时间单位，如100ms。
CSS时间单位
单位标识符 说明
s 秒
ms 毫秒（1s等于1000ms）
测试CSS特性的支持情况
检测对CSS支持程度的有用工具：
1.网站：http://caniuse.com。各款浏览器的各种版本对HTML5和CSS3的支持情况的全面分析，提供覆盖了多种操作系统上为数不多的桌面版和手机版的浏览器的详细详细。
2.Modernizr（www.modernizr.com）：可以用来动态测试各个特性。它是有一个小小的JavaScript库，可以测试各种关键的HTML5和CSS特性是否到位，以便根据用户所用浏览器对这些特性的支持情况作出相应调整。
有用的CSS工具
1.浏览器样式报告
定义：在文档呈现结果或源代码中选择一个元素，然后查看浏览器应用在上面的样式。
作用：显示样式层叠的次序和计算样式（computed style，指计入所有层叠和继承而来的样式的样式后最终应用到元素上的样式）。用户用它们修改样式或加入新样式并查看其效果。
Chrome为例：右键->检查
2.用SelectorGadget生成选择器
SelectorGadget（www.selectorgadget.com）：JavaScript书签小程序（boolmarket）。浏览器载入这个工具的脚本程序之后，用户点击页面元素就能生成相应的CSS选择器。
（哎~荒废的网站）
（效果图）
3.用LESS改进CSS
CSS问题：描述样式啰嗦、大量重复性内容的存在导致样式的长期维护工作既费时间又容易出错。
LESS（http://lesscss.org）：扩展CSS，它使用JavaScript对CSS予以改进。
4.使用CSS框架
Blueprint（www.blueprint.org）：有一套用于建立网格布局的出色功能。
高质量的CSS框架可作为开发者网站和Web应用系统的基石。它们内置多套样式。
第五章 初探JavaScript
作者推荐0门槛阅读启蒙读物网站：lifehacker.com
关于JavaScript作者推荐两本书：
一般性知识：David Flanagan《JavaScript：The Definitive Guide》
高级概念和特性：Ross Harmes&Dustin Diaz《Pro JavaScript Design Patterns》
准备使用JavaScript
HTML文档中定义脚本的几种方法：
①定义内嵌脚本（脚本是HTML文档的一部分）
②定义外部脚本（脚本包含在另一个文件中，通过一个URL引用）
以上两种方法都要用script元素。
例：一段简单的内嵌脚本
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
document.writeln("Hello");
</script>
</body>
</html>
PS：
1.script元素位于文档中其他内容之后，这样一来在脚本执行之前浏览器就已经对其他元素进行了解析。
2.document方法：显示脚本的结果。
使用语句
JavaScript的基本元素是语句。一·条语句代表着一条命令，通常以分号（；）结尾，可让代码更易阅读。
例：使用JavaScript语句
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
document.writeln("This is a statement");
document.writeln("This is also a statement")
</script>
</body>
</html>
定义和使用函数
把几条语句包装在一个函数中，浏览器只有在遇到一条调用该函数的语句时才会执行它。
例：定义JavaScript函数
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function myFunc(){
document.writeln("This is a statement");
};
myFunc();
</script>
</body>
</html>
PS：JavaScript是区分大小写的语言，function是关键字。
1.定义带参数的函数
与大多数语言一样，JavaScript中也可以为函数定义参数。
例：定义带参数的函数
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function myFunc(name,weather){
document.writeln("Hello "+name+".");
document.writeln("It is "+weather+" today");
};
myFunc("Adam","sunny");
</script>
</body>
</html>
PS：
1.JavaScript是门弱类型语言，所以定义函数的时候不必声明参数的数据类型。
2.调用函数时提供的参数数目不必与函数定义中的参数数目相同。
①如果提供的参数值更少，未提供值的参数的值均为undefined。
②如果提供的参数值更多，多出的值会被忽略。
3.要是定义了两个同名的函数，第二个定义将会取代第一个。
2.定义会返回结果的函数
可以用return关键字从函数中返回结果。
例：从函数中返回结果
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function myFunc(name){
return("Hello "+name+".");
};
document.writeln(myFunc("Adam"));
</script>
</body>
</html>
PS：
1.脚本最后一条语句调用了这个函数并将结果作为参数传递给document。writeln函数。
2.定义这个函数时不用声明它会返回结果，也不用声明结果的数据类型。
使用变量和类型
1.定义变量要使用var关键字，在定义的同时可以像在一条单独的语句中那样为其赋值。
2.定义在函数中的变量称为局部变量，只能在该函数范围内使用。
3.直接在script元素中定义的变量称为全局变量，可以在任何地方使用——包括在其他脚本中。
例：使用局部变量和全局变量
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myGlobalVar = "apples";
function myFunc(name){
var myLocalVar = "sunny";
return("Hello "+name+". Today is "+myLocalVar +".");
};
document.writeln(myFunc("Adam"))
</script>
<script type="text/javascript">
document.writeln("I like "+myGlobalVar);
</script>
</body>
</html>
PS：
1.JavaScript有类型，但不用明确声明变量的类型以及可随心所欲地用同一变量表示不同类型的值。
2.JavaScript根据赋给变量的值确定其类型。还可以根据使用场景在类型间自由转换。
1.使用基本类型
JavaScript定义了一小批基本类型（primitive type）：
1.字符串类型（string）
2.数值类型（number）
3.布尔类型（boolean）
①字符串类型
string类型的值可以用夹在一对双引号或单引号之间的一串字符表示。
例：定义字符串变量
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstString = "This is a string";
var secondString = "And so is this";
</script>
</body>
</html>
②布尔类型
boolean类型有两个值：true和false。
例：定义布尔变量
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstBool = true;
var secondBool = false;
</script>
</body>
</html>
③数值类型
整数和浮点数（也称实数）都用number类型表示。
例：定义数值变量
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var daysInWeek = 7;
var pi = 3.14;
var hexValue = 0xFFFF;
</script>
</body>
</html>
PS：定义number类型变量时不必言明所用的是哪种数值，只要写出需要的值即可，JavaScript会酌情处理。
2.创建对象
JavaScript支持对象的概念。有多种方法可以用来创建对象。
例：创建对象
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = new Object();
myDate.name = "Adam";
myDate.weather = "sunny";
document.writeln("Hello "+ myDate.name+".");
document.writeln("Today is "+myDate.weather+".");
</script>
</body>
</html>
PS：
1.调用new Object（）的方式创建一个对象，然后将其赋给一个名为myDate的变量。
2.通过myDate.name = “Adam”;这样赋值的方式定义其属性。
（在这语句前，对象并没有一个名为name的属性）
3.通过以下方式获取该属性的值：myDate.name
①使用对象字面量
用对象字面量的方式可以一口气定义一个对象及其属性。
例：使用对象字面量
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate ={
name : "Adam",
weather : "sunny"
};
document.writeln("Hello "+myDate.name+".");
document.writeln("Today is "+myDate.weather+".");
</script>
</body>
</html>
PS：
1.属性的名称和值之间以冒号（:）分隔。
2.各个属性之间以逗号（,）分隔。
②将函数用做方法
对象可以添加属性，也能添加函数。属于一个对象的函数称为其方法。
例：为对象添加方法
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
weather : "sunny",
printMessages : function(){
document.writeln("Hello "+this.name+".");
document.writeln("Today is "+this.weather+".");
}
};
myDate.printMessages();
</script>
</body>
</html>
PS：
1.此例将一个函数变成了一个名为printMessages的方法。
2.在方法内部使用对象属性时要用到this关键字。
3.函数作为方法使用时，其所属对象会以关键字this的形式作为一个参数被传给它。
3.使用对象
①读取和修改属性值
例：读取和修改对象属性值
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
weather : "sunny",
};
myDate.name = "Joe";
myDate.weather = "raining";
document.writeln("Hello "+myDate.name+".");
document.writeln("It is "+myDate["weather"]+".");
</script>
</body>
</html>
PS：两种形式：
1.用句点将对象名和属性名连接在一起：myDate.name = “Joe”;
2.类似数组索引：myDate{“weather”] = “raining”;
①属性名作为一个字符串放在一对方括号之间。
②此种存取属性值的方法非常方便，可用变量表示属性名。如下所示：
var myDate = {
name : "Adam",
weather : "sunny",
};
var propName = "weather";
myDate{propName] = "raining";
③在此基础上才能枚举对象属性。
②枚举对象属性
要枚举对象属性可以使用for…in语句。
例：枚举对象属性
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
weather : "sunny",
printMessages : function(){
document.writeln("Hello "+this.name+".");
document.writeln("Today is "+this.weather+".");
}
};
for(var prop in myDate){
document.writeln("Name: "+prop+" Value: "+myDate[prop]);
}
</script>
</body>
</html>
PS：
1.for…in循环代码块中的语句会对myDate对象每一个属性执行一次。
2.在每一次迭代过程中，所要处理的属性名会被赋给prop变量。
3.例中使用类数组索引语法（即使用方括号[和]）获取对象的属性值。
4.作为方法定义的函数也被枚举，JavaScript在处理函数方面非常灵活，方法本身也被视为对象的属性。
③增删属性和方法
就算是用对象字面量生成的对象，也可以为其定义新属性。
例：为对象添加新属性
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
weather : "sunny",
};
myDate.dayOfWeek = "Monday";
</script>
</body>
</html>
PS：此例使用的是圆点表示法（用句号将对象和属性的名称连接在一起）。除此之外还可以用：类数组索引表示法。
通过将属性值设置为一个函数也能为对象添加新方法。
例：为对象添加新方法
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
weather : "sunny",
};
myDate.sayHello = function(){
document.writeln("Hello");
};
</script>
</body>
</html>
对象的属性和方法可以用delete关键字删除。
例：删除对象的属性
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
weather : "sunny",
};
myDate.sayHello = function(){
document.writeln("Hello");
};
delete myDate.name;
delete myDate["weather"];
delete myDate.sayHello;
</script>
</body>
</html>
④判断对象是否具有某个属性
可以用in表达式判断对象是否具有某个属性。
例：检查对象是否具有某个属性
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
weather : "sunny",
};
var hasName = "name" in myDate;
var hasDate = "date" in myDate;
document.writeln("HasName: "+hasName);
document.writeln("HasDate: "+hasDate);
</script>
</body>
</html>
使用JavaScript运算符
JavaScript定义了大量标准运算符。
常用的JavaScript运算符
运算符 说明
++、-- 前置或后置自增和自减
+、-、*、/、% 加、减、乘、除、求余
<、<=、>、>= 小于、小于等于、大于、大于等于
==、!= 相等和不相等
===、!== 等同和不等同
&&、|| 逻辑与、逻辑或
= 赋值
+ 字符串连接
?: 三元条件语句
1.相等和等同运算符
相等运算符会尝试将操作数转换为同一类型以便判断是否相等。
例：使用相等运算符
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstVal = 5;
var secondVal = "5";
if(firstVal == secondVal){
document.writeln("They are the same");
}else{
document.writeln("They are NOT the same");
}
</script>
</body>
</html>
PS：
1.相等运算符测试两个值是否相等，不管其类型。
2.若要判断值和类型是否都相同，应该用等同运算符（===）。
例：使用等同运算符
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstVal = 5;
var secondVal = "5";
if(firstVal === secondVal){
document.writeln("They are the same");
}else{
document.writeln("They are NOT the same");
}
</script>
</body>
</html>
JavaScript基本类型（指字符串和数值等内置类型）的比较是值的比较，而JavaScript对象的比较则是引用的比较。
例：对象的相等和等同测试
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate1 = {
name : "Adam",
weather : "sunny",
};
var myDate2 = {
name : "Adam",
weather : "sunny",
};
var myDate3 = myDate2;
var test1 = myDate1 == myDate2;
var test2 = myDate2 == myDate3;
var test3 = myDate1 === myDate2;
var test4 = myDate2 === myDate3;
document.writeln("Test 1 :"+test1+" Test 2 : "+test2);
document.writeln("Test 3 :"+test3+" Test 4 : "+test4);
</script>
</body>
</html>
例：基本类型的相等和等同测试
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate1 =5;
var myDate2 = "5";
var myDate3 = myDate2;
var test1 = myDate1 == myDate2;
var test2 = myDate2 == myDate3;
var test3 = myDate1 === myDate2;
var test4 = myDate2 === myDate3;
document.writeln("Test 1 :"+test1+" Test 2 : "+test2);
document.writeln("Test 3 :"+test3+" Test 4 : "+test4);
</script>
</body>
</html>
2.显示类型转换
字符串连接运算符（+）比加法运算符（也是+）优先级更高。
这可能会引起混乱，因为JavaScript在计算结果时会自动进行类型转换，其结果未必跟预期一样。
例：字符串连接运算符的优先权
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate1 = 5 + 5;
var myDate2 = 5 + "5";
document.writeln("Result 1: " + myDate1);
document.writeln("Result 2: " + myDate2);
</script>
</body>
</html>
PS：第二个结果是因为类型转换导致，若想避免这种局面，可以对值的类型进行显式转换，以确保执行的是正确的运算符。
数值到字符串的常用转换方法
方法 说明 返回
toString() 以十进制形式表示数值 字符串
toString(2) 以 二进制、八进制和十六进制形式表示数值 字符串
toString(8)
toString(16)
toFixed(n) 以小数点后有n位数字的形式表示实数 字符串
toExponential(n) 以指数表示法表示数值，尾数的小数点前后分别
有1位数字和n位数字 字符串
toPrecision(n) 用n位有效数字表示数值，在必要的情况下使用
指数表示法 字符串
①将数值转换为字符串
如果想把多个数值类型变量作为字符串连接起来，可以用toString方法将数值转换为字符串。
例：使用Number.toString方法
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate1 = (5).toString() + String(5);
document.writeln("Result: " + myDate1);
</script>
</body>
</html>
PS：
1.数值应放在括号中然后才调用toString方法。
2.调用toString方法的两种做法：
①先让JavaScript将字面量转换为一个number类型的值。
②调用String函数并将要转换的数值作为参数传递给它。
以上两种做法的作用：将number类型的值转换为String类型。
②将字符串转换为数值
用Number函数
例：将字符串转换为数值
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstVal = "5";
var secondVal = "5";
var result = Number(firstVal) + Number(secondVal);
document.writeln("Result: " + result);
</script>
</body>
</html>
PS：
1.Number函数解析字符串值的方式很严格。
2.parseInt和parseFloat函数会忽略数字字符后面的非数字字符。
字符串到数值的常用转换函数
函数 说明
Number(<str>) 通过分析指定字符串，生成一个整数或实数值
parseInt(<str>) 通过分析指定字符串，生成一个整数值
parseFloat(<str>) 通过分析指定字符串，生成一个整数或实数值
使用数组
例：创建和填充数组
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myArray = new Array();
myArray[0] = 100;
myArray[1] = "Adam";
myArray[2] = true;
</script>
</body>
</html>
PS：
1.创建数组的时候不需要声明数组中元素的个数。JavaScript数组会自动调整大小以便容纳所有元素。
2.不必声明数组包含数据的类型。JavaScript数组可以混合包含各种类型的数据。
1.使用数组字面量
使用数组字面量，可以在一条语句中创建和填充数组。
例：使用数组字面量
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myArray = [100,"Adam",true];
</script>
</body>
</html>
2.读取和修改数组内容
要读取指定索引位置的数组元素值，应该用一对方括号([和])并将索引值放在方括号间。
例：读取指定索引位置的数组元素值
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myArray = [100,"Adam",true];
document.writeln("Index 0: " + myArray[0]);
</script>
</body>
</html>
要修改JavaScript数组中指定位置的数据，只要将新值赋给该索引位置的数组元素即可。
例：修改数组内容
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myArray = [100,"Adam",true];
myArray[0] = "Tuesday";
document.writeln("Index 0: " + myArray[0]);
</script>
</body>
</html>
3.枚举数组内容
用for循环枚举数组内容。
例：枚举数组内容
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myArray = [100,"Adam",true];
for(var i = 0;i < myArray.length;i++){
document.writeln("Index " +i+": "+myArray[i]);
}
</script>
</body>
</html>
4.使用内置的数组方法
JavaScript中的Array对象定义了许多方法。
常用数组方法
方法 说明 返回
concat(<otherArray>) 将数组和参数所指数组的内容合并为一个
新数组。可指定多个数组。 数组
join(<separator>) 将所有数组元素连接为一个字符串。各元素
内容用参数指定的字符分隔 字符串
pop() 把数组当做栈使用，删除并返回数组的最后
一个元素 对象
push(<item>) 把数组当做栈使用，将指定的数据添加到数组中 void
reverse() 就地反转数组元素的次序 数组
shift() 类似pop，但操作的是数组的第一个元素 对象
slice(<start>,<end>) 返回一个子数组 数组
sort() 就地对数组元素排序 数组
unshift(<item>) 类似push，但新元素被插到数组的开头位置 void
处理错误
JavaScript用try…catch语句处理错误。
例：异常处理
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
try{
var myArray;
for(var i = 0;i < myArray.length;i++){
document.writeln("Index " +i+": "+myArray[i]);
}
}catch(e){
document.writeln("Error: " + e);
}
</script>
</body>
</html>
PS：
1.如果try子句中没有发生错误，那么这些语句会正常执行，catch子句会被忽略。
2.如果有错误发生，那么try子句中语句的执行将立即停止，控制权转移到catch子句中。
3.发生的错误由一个Error对象描述。它会被传递给catch子句。
Error对象
属性 说明 返回
message 对错误条件的说明 字符串
name 错误的名称，默认为Error 字符串
number 该错误的错误代号（如果有的话） 数值
catch子句：提供了一个从错误中恢复或在错误发生后进行一些清理工作的机会。
finally子句：用来放置不管是否发生错误都执行的一些语句。
例：使用finally子句
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
try{
var myArray;
for(var i = 0;i < myArray.length;i++){
document.writeln("Index " +i+": "+myArray[i]);
}
}catch(e){
document.writeln("Error: " + e);
}finally{
document.writeln("Statements here are always executed");
}
</script>
</body>
</html>
比较undefined和null值
在读取未赋值的变量或试图读取对象没有的属性时得到的就是undefined值。
例：特别的undefined值
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
weather : "sunny",
};
document.writeln("Prop: " + myDate.doesntexist);
</script>
</body>
</html>
null值：表示已经赋了一个值但该值不是一个有效的object、string、number或boolean值（也就是说所定义的是一个无值[no value]）
例：使用undefined和null
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
};
document.writeln("Var: " + myDate.weather);
document.writeln("Prop: " + ("weather" in myDate));
myDate.weather = "sunny";
document.writeln("Var: " + myDate.weather);
document.writeln("Prop: " + ("weather" in myDate));
myDate.weather = null;
document.writeln("Var: " + myDate.weather);
document.writeln("Prop: " + ("weather" in myDate));
</script>
</body>
</html>
①检查变量或属性是否为undefined或null
使用if语句和逻辑非运算符(!)。
例：检查属性是否为null或undefined
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myDate = {
name : "Adam",
city : null
};
if(!myDate.name){
document.writeln("name IS null or undefined");
}else{
document.writeln("name is Not null or undefined");
}
if(!myDate.city){
document.writeln("city IS null or undefined");
}else{
document.writeln("city is Not null or undefined");
}
</script>
</body>
</html>
②区分null和undefined
1.若想同等对待undefined值和null值，用相等运算符()，让JavaScript进行类型转换。
2.若要区别对待undefined值和null值，用等同运算符(=)。
例：null和undefined值的相等和等同比较
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstVal = null;
var secondVal;
var equality = firstVal == secondVal;
var identity = firstVal === secondVal;
document.writeln("Equality: " + equality);
document.writeln("Identity: " + identity);
</script>
</body>
</html>
常用的JavaScript工具
1.使用JavaScript调试器
可以用来设置断点、探查错误和逐句执行脚本。
Chrome：内置调试器
Mozilla Firefox：插件Firebug。功能强大，可以解决较为复杂情况。
2.使用JavaScript库
使用JavaScript最简便的方式是使用某种JavaScript工具包或库。
作者推荐两种工具：
1.jQuery及其配套程序库jQueryUI（jquery.com）
2.Dojo（http://dojotoolkit.org）