快速入門 · JS與WEB前端框架技術

# 快速入門 JavaScript代碼可以直接嵌在網頁的任何地方，不過通常我們都把JavaScript代碼放到`<head>...</head>`中，或者把JavaScript代碼放到一個單獨的`.js`文件，然后在HTML中通過`<script src="..."></script>`引入這個文件： ```html <html> <head> <script src="quickstart.js"></script> <script> let name = "Jack" console.log(name) showMessage() //函數在quickstart.js中定義 </script> </head> <body> <h1>JavaScript 快速入門</h1> </body> </html> ``` > 由`<script>...</script>`包含的代碼就是JavaScript代碼，它將直接被瀏覽器執行。把JavaScript代碼放入一個單獨的`.js`文件中更利于維護代碼，并且多個頁面可以各自引用同一份`.js`文件。可以在同一個頁面中引入多個`.js`文件，瀏覽器按照順序依次執行。有些時候你會看到`<script type="text/javascript">`標簽還設置了一個`type`屬性： ~~~ <script type="text/javascript"> ... </script> ~~~ 但這是沒有必要的，因為默認的`type`就是JavaScript，所以不必顯式地把`type`指定為JavaScript。 ## 運行/調試JavaScript 要讓瀏覽器運行JavaScript，必須先有一個HTML頁面，在HTML頁面中引入JavaScript，然后，讓瀏覽器加載該HTML頁面，就可以執行JavaScript代碼。俗話說得好，“工欲善其事，必先利其器。”如何找出問題代碼？這就需要調試。怎么在瀏覽器中調試JavaScript代碼呢？首先，你需要安裝Google Chrome內核的瀏覽器，Chrome瀏覽器對開發者非常友好，可以讓你方便地調試JavaScript代碼。安裝后，隨便打開一個網頁，然后點擊菜單“查看(View)”-“開發者(Developer)”-“開發者工具(Developer Tools)”（F12快捷鍵），瀏覽器窗口就會一分為二，下方就是開發者工具。先點擊“控制臺(Console)“，在這個面板里可以直接輸入JavaScript代碼，按回車后執行。要查看一個變量的內容，在Console中輸入`console.log(a);`，回車后顯示的值就是變量的內容。 ![](https://box.kancloud.cn/d247dfbb64c1acf2d78c70fa04639fdb_1001x598.png)