## 網頁的解剖學
在深入 JavaScript 之前，對網頁的解剖有助于理解 JavaScript 是如何與其他網絡技術密切合作的。
## HTML 是內容
HTML 是用來定義和描述內容的標記語言。無論是博客文章，搜索引擎結果，或者電商網站，網頁的核心內容都是用 HTML 編寫的。語義標記是指 HTML 中用來描述內容的通用術語（頭部，段落，圖片等）。
## CSS 是表現
CSS 是一個為 HTML 文檔應用樣式的附加語言。CSS 的全部都是關于如何通過定義字體，顏色等其他視覺美感，讓內容更好看。CSS 的強大之處在于樣式不再和內容夾雜，這意味著你可以將不同的樣式應用到同一塊內容，當構建良好的跨設備響應式網站時，這是至關重要的。
## JavaScript 是交互
在瀏覽器中，JavaScript 為 HTML 內容添加交互性和行為能力。沒有 JavaScript，網頁將會是靜態和無聊的。JavaScript 使網頁富有生命力。
看下面這個包含了 CSS 和 JavaScript 的簡單 HTML 頁面，了解這一切是如何組織在一起的：
~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<!-- CSS for presentation. -->
<style>
h1 { font-size: 14px; color: hotpink; }
button { color: red; }
</style>
</head>
<body>
<h1>Hello World</h1>
<button>Click Me!</button>
<!-- JavaScript for interactivity. -->
<script>
// Get a handle on the first button element in the document.
var button = document.querySelector( "button" );
// If a user clicks on it, say hello!
button.addEventListener( "click", function( ev ) {
alert( "Hello" );
}, false);
</script>
</body>
</html>
~~~
在上面的例子中，HTML 是用來描述內容，“Hello World” 文本被?`h1`?元素描述為一個標題，“Click Me!” 被?`button`?元素描述為一個按鈕。`style`?代碼塊包含了改變標題顏色和字體大小的 CSS。`script`?代碼塊包含了給按鈕添加交互的 JavaScript。當用戶點擊這個按鈕，會彈出一個顯示“Hello”的警告信息。
## Web 的腳本語言
JavaScript 最初設計為網頁添加交互性，而不是成為一個通用語言，所以它被設計為腳本語言。[腳本語言](http://zh.wikipedia.org/wiki/%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80)?被認為是比通用語言更高效，因為它們是為特定的領域（如 JavaScript 為網絡瀏覽器）而優化。然而，最近的技術發展讓 JavaScript 在服務器端大熱（通過?[Node.js](http://nodejs.org/)），所以它現在也可以用于代替 PHP，Ruby 或者 ASP 等語言。本指南將專注于在瀏覽器中運行的 JavaScript。
“JavaScript” 這個名字有點誤導性。盡管有相似的名字，但是 JavaScript 與[Java](https://zh.wikipedia.org/wiki/Java)（一種通用語言）沒有任何關系。JavaScript 是基于開放式網絡標準 ECMAScript。基于標準的語言不是任何一個實體或公司控制的－相反的，開發商們共同制定語言，這就是為什么 JavaScript 運行在每一個 Web 瀏覽器中，而無關操作系統或設備。
## 你需要什么來開始學習 JavaScript 和 jQuery
1. Web 瀏覽器
2. 文本編輯器
3. 開發者工具 (可選項)
JavaScript 的最大優勢之一是它的簡單。它可以在任何操作系統上編寫和運行，唯一的要求是一個網絡瀏覽器和文本編輯器。也有許多工具可以讓 JavaScript 開發更有效率，但它們是完全可選的。
## 開發者工具
許多瀏覽器附帶的內置功能，通常被稱為“開發者工具”，它提供了更好的視角來觀察運行在瀏覽器里的 JavaScript 和 jQuery。雖然不是必須的，但當你調試代碼錯誤時，你會發現開發者工具很有用。看看常見的瀏覽器開發者工具：
* [Safari 開發者工具](https://developer.apple.com/cn/technologies/safari/developer-tools.html)
* [Google Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)
* [IE 開發者工具](http://msdn.microsoft.com/zh-cn/library/ie/gg589507.aspx)
* [火狐開發者工具](https://developer.mozilla.org/zh-CN/docs/Tools)
* [Opera Dragonfly](http://www.opera.com/dragonfly/)
