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

語言: CN / TW / HK
時間 2023-03-23 09:15:27

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的除錯工具來除錯了HTML、CSS，它也可以幫助我們進行除錯JavaScript
  • 在接下來的學習中，當我們使用console.log進行除錯的時候，我們可以在瀏覽器介面按下F12鍵，開啟彈出的窗口裡面的console鍵，就能看到js程式碼列印輸出的內容

image-20230119204528137

補充說明

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