快速入門 · 廖雪峰 JavaScript Python Git 教程

# 快速入門 JavaScript代碼可以直接嵌在網頁的任何地方，不過通常我們都把JavaScript代碼放到`<head>`中： ``` <html> <head> <script> alert('Hello, world'); </script> </head> <body> ... </body> </html> ``` 由`<script>...</script>`包含的代碼就是JavaScript代碼，它將直接被瀏覽器執行。第二種方法是把JavaScript代碼放到一個單獨的`.js`文件，然后在HTML中通過`<script src="..."></script>`引入這個文件： ``` <html> <head> <script src="/static/js/abc.js"></script> </head> <body> ... </body> </html> ``` 這樣，`/static/js/abc.js`就會被瀏覽器執行。把JavaScript代碼放入一個單獨的`.js`文件中更利于維護代碼，并且多個頁面可以各自引用同一份`.js`文件。可以在同一個頁面中引入多個`.js`文件，還可以在頁面中多次編寫`<script> js代碼... </script>`，瀏覽器按照順序依次執行。有些時候你會看到`<script>`標簽還設置了一個`type`屬性： ``` <script type="text/javascript"> ... </script> ``` 但這是沒有必要的，因為默認的`type`就是JavaScript，所以不必顯式地把`type`指定為JavaScript。 ## 如何編寫JavaScript 可以用任何文本編輯器來編寫JavaScript代碼。這里我們推薦以下幾種文本編輯器： ### Sublime Text 免費，但不注冊會不定時彈出提示框。 ### Notepad++ 免費 _注意_：不可以用Word或寫字板來編寫JavaScript或HTML，因為帶格式的文本保存后不是_純文本文件_，無法被瀏覽器正常讀取。 ## 如何運行JavaScript 要讓瀏覽器運行JavaScript，必須先有一個HTML頁面，在HTML頁面中引入JavaScript，然后，讓瀏覽器加載該HTML頁面，就可以執行JavaScript代碼。你也許會想，直接在我的硬盤上創建好HTML和JavaScript文件，然后用瀏覽器打開，不就可以看到效果了嗎？這種方式運行部分JavaScript代碼沒有問題，但由于瀏覽器的安全限制，以`file://`開頭的地址無法執行如聯網等JavaScript代碼，最終，你還是需要架設一個Web服務器，然后以`http://`開頭的地址來正常執行所有JavaScript代碼。不過，開始學習階段，你無須關心如何搭建開發環境的問題，我們提供在頁面輸入JavaScript代碼并直接運行的功能，讓你專注于JavaScript的學習。試試直接點擊“Run”按鈕執行下面的JavaScript代碼： ``` // 以//開頭直到行末的是注釋，將被瀏覽器忽略 // 第一個JavaScript代碼: alert('Hello, world'); ``` 瀏覽器將彈出一個對話框，顯示“Hello, world”。你也可以修改兩個單引號中間的內容，再試著運行。 ## 調試俗話說得好，“工欲善其事，必先利其器。”，寫JavaScript的時候，如果期望顯示`ABC`，結果卻顯示`XYZ`，到底代碼哪里出了問題？不要抓狂，也不要泄氣，作為小白，要堅信：JavaScript本身沒有問題，瀏覽器執行也沒有問題，有問題的一定是我的代碼。如何找出問題代碼？這就需要調試。怎么在瀏覽器中調試JavaScript代碼呢？首先，你需要安裝Google Chrome瀏覽器，Chrome瀏覽器對開發者非常友好，可以讓你方便地調試JavaScript代碼。從這里[下載Chrome瀏覽器](https://www.google.com/chrome/browser/desktop/index.html?system=true&standalone=1)。打開網頁出問題的童鞋請移步[國內鏡像](http://pan.baidu.com/s/1qWMaZSg#path=%252Fchrome)。安裝后，隨便打開一個網頁，然后點擊菜單“查看(View)”-“開發者(Developer)”-“開發者工具(Developer Tools)”，瀏覽器窗口就會一分為二，下方就是開發者工具： ![chrome-HOWTO](img/l5.jpg) 先點擊“控制臺(Console)“，在這個面板里可以直接輸入JavaScript代碼，按回車后執行。要查看一個變量的內容，在Console中輸入`console.log(a);`，回車后顯示的值就是變量的內容。關閉Console請點擊右上角的“×”按鈕。請熟練掌握Console的使用方法，在編寫JavaScript代碼時，經常需要在Console運行測試代碼。如果你對自己還有更高的要求，可以研究開發者工具的“源碼(Sources)”，掌握斷點、單步執行等高級調試技巧。 ## 練習打開[新浪首頁](http://www.sina.com.cn/)，然后查看頁面源代碼，找一找引入的JavaScript文件和直接編寫在頁面中的JavaScript代碼。然后在Chrome中打開開發者工具，在控制臺輸入`console.log('Hello');`，回車查看JavaScript代碼執行結果。