小白的《HTML5權威指南》筆記（第一部分）
第一章 基本瞭解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語句即可。
[email protected]語句必須位於樣式表頂端。
例：連結到一個包含有匯入語句的樣式表
<!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>