iT邦幫忙

2021 iThome 鐵人賽

DAY 1
5
Modern Web

JavaScript 魔法入門 - 從入門到中階觀念系列 第 1

JavaScript 魔法入門 - 前言

前情提要

那天窗外微微透點薄光,聽到門外傳來了些許奇妙的聲響,走到門外看到地板上掉落一張紙。
https://ithelp.ithome.com.tw/upload/images/20210914/20139066n8foLuszat.png
拿起了那張紙:「是誰一大早亂丟垃圾?(╬☉д⊙)」

拿去垃圾桶的途中,卡片好像有了生命一樣動了起來,轉瞬間,我感覺到自己的身體起了異常的變化。

「我...我好像擁有魔力了?」

望著手上淡淡的微光,情不自禁地笑了起來:「不愧是我,一定是這世界的主角吧。(〃∀〃)」

殊不知,笑了不久後,腦海響起了一句聲響:
「少年欸,你知道魔力總量要透過學習 JavaScript 魔法入門才能增長嗎?你現在的魔力大概連一隻螞蟻都不如吧!」

蛤,逼不得已,只好開始照著入學申請書的指引,開啟了一條修煉 JavaScript 魔法的不歸路。


真 - 前言

這次鐵人賽的參賽主題,反覆思索了數次,剛好有機會成為六角學院 JavaScript 新課程的助教,當助教時常常會統整一些小重點給同學,並且累積了不少課程筆記,藉由這個契機,讓自己慢慢產生一點信心,雖然是小菜鳥,但還是希望能藉由自己的力量幫助一些新手同學了解 JavaScript。

在寫作文章時,會分為入門與中階,入門的地方會簡單講解基礎觀念,而中階會等到入門學習完後才會補上,中階會補充一些不熟悉容易出現奇怪錯誤的知識點,最後也會有實作題。

接下來就讓我們來了解怎麼使用 VSCode 開始撰寫 JavaScript 吧!

步驟一、建 js 檔案
首先我們要新增一個副檔名為 js 的檔案:
https://ithelp.ithome.com.tw/upload/images/20210914/20139066EjH2RtP0fn.png

步驟二、引入 js 檔案
接著在 index.html </body> 標籤上方透過 script 標籤的 src 屬性,放入 JavaScript 檔案路徑,在輸入路徑時可以透過輸入斜線/的方式,編輯器就會跳出下拉式選單,提醒你擁有哪些檔案,在選取想要放置的檔案即可,透過這個小技巧,可以避免輸入路徑錯誤!
https://ithelp.ithome.com.tw/upload/images/20210914/201390661p4Og1Wqqm.png
要怎麼知道有沒有引入成功呢?

步驟三、測試是否引入成功
透過在 js 檔案輸入以下彈跳式視窗指令:

alert('Hello World!!');

打開瀏覽器後跳出:
https://ithelp.ithome.com.tw/upload/images/20210914/20139066ApBBoWTlrZ.png
這樣就成功囉!

後續的文章會很常用到開發人員工具去測試,底下補充開發人員工具使用的方式。


開發人員工具 Console 使用方式

如果看到文章出現程式碼,想透過開發人員工具查看是否會報錯時:
(範例以 Google Chrome 瀏覽器操作)

步驟一、點擊滑鼠左鍵,選取檢查
https://ithelp.ithome.com.tw/upload/images/20210914/20139066AcdEckAL8Z.png
步驟二、點擊 Console
https://ithelp.ithome.com.tw/upload/images/20210914/20139066Pom3t7wAgf.png

步驟三、將測試用程式碼貼進去
測試用程式碼

let a = 1;
let a = 2; 

結果:
https://ithelp.ithome.com.tw/upload/images/20210914/20139066cAPtLyCnqr.png

最後想補充一點關於 Google Chrome 的小知識,如果嘗試將兩筆分開貼上會發現,結果與上方不同。

結果:
https://ithelp.ithome.com.tw/upload/images/20210914/20139066AiZtZcKMT4.png
查詢 Chrome 相關文件會看到:

Support for let and class redeclarations in the Console
Support for const redeclarations in the Console

在開發人員工具直接測試,如果不同行使用 let 、 const 宣告,並不會報錯,但同一行一起輸入會。

所以如果在測試重複宣告時,建議都將內容一次性貼入開發人員工具 Console 內。

更詳細的文件內容歡迎參考下方資料:
Chrome 相關文件
https://developer.chrome.com/blog/new-in-devtools-80/#redeclarations
https://developer.chrome.com/blog/new-in-devtools-92/#const-redeclaration


最後,讓我們開始透過 JavaScript 入門來累積魔力總量吧!


下一篇
新增裝備 - VSCode 套件介紹
系列文
JavaScript 魔法入門 - 從入門到中階觀念30

尚未有邦友留言

立即登入留言