如何編寫JavaScript語言
JavaScript的書寫要求
上一次跟大家說了,JS的語法點和資料型別,現在要教大家如何編寫JS語言
JavaScript程式碼可以直接嵌在網頁的任何地方,不過通常我們都把JavaScript程式碼放到 <head>
中:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>網頁名字</title> <script> alert("這裡可以書寫程式碼"); </script> </head> <body> </body> </html>
由 <script>...</script>
包含的程式碼就是JavaScript程式碼,它將直接被瀏覽器執行。
在此我建議大家使用谷歌Chrome瀏覽器,因為谷歌執行起來比較方便且容易檢視,這裡是谷歌瀏覽器的下載連結: ofollow,noindex">http://www.pc6.com/softview/SoftView_24670.html
如何編寫JavaScript
我們把計算機當成是一個人,他不懂中文,他懂計算機語言,但是,我們怎麼跟他說計算機語言呢?我們將要用到 直譯器
,它就像是一個翻譯器,把我們的想法解釋給電腦聽,我來推薦幾個比較好用的可以使用js的直譯器:
Aptana Studio 3
作者使用的編輯器, Aptana Studio 3 ,非常實用,可以更改配色,內建Apache,前端開發PHP,JSP方便。免費!強烈推薦使用!
Visual Studio Code
微軟出的 Visual Studio Code ,可以看做迷你版Visual Studio,免費!跨平臺!內建JavaScript支援,強烈推薦使用!
Sublime Text
Sublime Text 是一個好用的文字編輯器,免費,但不註冊會不定時彈出提示框。
Notepad++
Notepad++ 也是免費的文字編輯器,但僅限Windows下使用。
注意 :不可以用Word或寫字板來編寫JavaScript或HTML,因為帶格式的文字儲存後不是 純文字檔案 ,無法被瀏覽器正常讀取。也儘量不要用記事本編寫,它會自作聰明地在儲存UTF-8格式文字時新增BOM頭。
由於我今後都使用Aptana Studio3為你們寫教程,所以建議你們下載Aptana Studio 3
如何執行JavaScript
要讓瀏覽器執行JavaScript,必須先有一個HTML頁面,在HTML頁面中引入JavaScript,然後,讓瀏覽器載入該HTML頁面,就可以執行JavaScript程式碼。
你也許會想,直接在我的硬碟上建立好HTML和JavaScript檔案,然後用瀏覽器開啟,不就可以看到效果了嗎?
這種方式執行部分JavaScript程式碼沒有問題,但由於瀏覽器的安全限制,以 file://
開頭的地址無法執行如聯網等JavaScript程式碼,最終,你還是需要架設一個Web伺服器,然後以 http://
開頭的地址來正常執行所有JavaScript程式碼。
不過,開始學習階段,你無須關心如何搭建開發環境的問題,我們提供在頁面輸入JavaScript程式碼並直接執行的功能,讓你專注於JavaScript的學習。
一個程式員的心態
除錯
俗話說得好,“工欲善其事,必先利其器。”,寫JavaScript的時候,如果期望顯示ABC,結果卻顯示XYZ,到底程式碼哪裡出了問題?不要抓狂,也不要洩氣,作為小白,要堅信:JavaScript本身沒有問題,瀏覽器執行也沒有問題,有問題的一定是我的程式碼。
如何找出問題程式碼?這就需要除錯。
怎麼在瀏覽器中除錯JavaScript程式碼呢?
首先,你需要安裝Google Chrome瀏覽器,Chrome瀏覽器對開發者非常友好,可以讓你方便地除錯JavaScript程式碼。
安裝後,隨便開啟一個網頁,然後點選鍵盤上的 F12
,瀏覽器視窗就會一分為二,出現 開發者工具

在console中,可以書寫程式碼,按回車執行
關閉Console請點選右上角的“×”按鈕。請熟練掌握Console的使用方法,在編寫JavaScript程式碼時,經常需要在Console執行測試程式碼。
如果你對自己還有更高的要求,可以研究開發者工具的“原始碼(Sources)”,掌握斷點、單步執行等高階除錯技巧。
練習
開啟 B站 ,然後檢視頁面原始碼,找一找有沒有JavaScript程式碼?
如果你能看到:
// \ // \ // ##DDDDDDDDDDDDDDDDDDDDDD## ## DDDDDDDDDDDDDDDDDDDD ## ________ ___ ___ ___ ________ ___ ___ ___ ## hh hh ## |\ __ \ |\ \ |\ \ |\ \ |\ __ \ |\ \ |\ \ |\ \ ## hh // \ hh ## \ \ |\ / \ \ \ \ \ \ \ \ \ |\ / \ \ \ \ \ \ \ \ ## hh // \ hh ## \ \ __ \ \ \ \ \ \ \ \ \ __ \ \ \ \ \ \ \ \ ## hh hh ## \ \ |\ \ \ \ \ ____ \ \ \ \ |\ \ \ \ \ ____ \ \ \ ## hh wwww hh ## \ _______\ _ \ _______\ _ \ _______\ _ \ _______\ _ \ ## hh hh ## |_______| | | |_______| | | |_______| | | |_______| | | ## MMMMMMMMMMMMMMMMMMMM ## ##MMMMMMMMMMMMMMMMMMMMMM## Release 2.3.3. Powered by jinkela-core 2.2.7. / /
就證明你已經掌握Console的用法啦!