day02-複習JavaScript編寫注意事項 | 青訓營筆記

語言: CN / TW / HK

theme: channing-cyan highlight: a11y-light


這是我參與「第五屆青訓營 」伴學筆記創作活動的第 2 天

JavaScript編寫注意事項

script元素不能寫成單標籤

  • 在外聯式引入js檔案的時候,script標籤中不可以寫入JavaScript程式碼,並且script標籤不能寫成單標籤

image-20230119202722437

省略type屬性

在以前的程式碼中,我們的script標籤會使用type=“text/javascript”,不過現在咱們可以不用寫了,因為JavaScript是所有現代瀏覽器以及HTML5中預設的指令碼語言

載入順序

  • 作為HTML中的一部分,JavaScript預設遵循HTML文件的載入順序,即自上而下的載入順序(這一點會在 《JavaScript高階程式設計(第4版)》 詳細講解,後續Coder Peng會持續更文)
  • 我們更推薦將JavaScript程式碼和邊寫的位置放在body子元素的最後一行

JavaScript程式碼嚴格區分大小寫

這一點很多同學需要注意一下,可能以前有部分人學過Linux,覺得大小寫比較隨意,但是在JavaScript中,大小寫是嚴格區分的

此外,HTML元素CSS屬性是不區分大小寫的

JavaScript的互動方式

我們日常學習JavaScript的時候,最常用的除錯語句為console.log,下面Coder Peng為大家整理了在JavaScript中一些常用的與使用者交換的方式

| 互動方法 | 方法說明 | 效果檢視 | | --------------- | ---------- | ------------- | | alert | 接受一個引數 | 彈窗檢視 | | console.log | 接受多個引數 | 在瀏覽器控制檯檢視 | | document.write | 接受多個字串 | 在瀏覽器介面檢視 | | prompt | 接受一個引數 | 在瀏覽器接受使用者輸入 |

Chrome的除錯工具

  • 在前面的學習中,我們利用Chrome的除錯工具來除錯了HTMLCSS,它也可以幫助我們進行除錯JavaScript
  • 在接下來的學習中,當我們使用console.log進行除錯的時候,我們可以在瀏覽器介面按下F12鍵,開啟彈出的窗口裡面的console鍵,就能看到js程式碼列印輸出的內容

image-20230119204528137

補充說明

  1. 如果在程式碼中出現了錯誤,則瀏覽器會在console這一欄列印輸出錯誤的原因,方便我們去進行修改
  2. 如上圖所示,console裡面有一個>的表示,這個表示控制檯的命令列,我們也可以在這個地方寫入js程式碼對瀏覽器進行除錯(寫好之後按下Enter就會立即執行程式碼)
  3. 如果希望編寫多行程式碼,我們可以按下shift+enter進行換行編寫
  4. 在後續的學習中我們還會通過如何debug來進行除錯,檢視程式碼的執行流程