Day01 走入JavaScript的世界

2024/11/04閱讀時間約 9 分鐘

歡迎來到「10日 JavaScript」，有鑑於自己先前學習JavaScript的流程過於破碎且凌亂，特別整理了這份文章，包含了基本語法、資料型態、常用函數及JavaScript實作等。希望能幫助到一些需要用到、想要了解JavaScript的人，讓大家不必再走太崎嶇的路。內容會分成10篇，一步步帶大家了解基礎的JavaScript運作邏輯，即使精通其他的程式語言，JavaScript的設計可能還是讓你感到陌生，其中包含一些在其他語言中顯得「奇怪」的特性。10日後，你應該可以看懂常見的JavaScript語法甚至撰寫簡單的邏輯。

「10日 JavaScript」的內容大多改寫自Brad Schiff的「Learn JavaScript: Full-Stack from Scratch」線上課程，這門課除了JavaScript本身外，還包含了資料庫、前後端區分等重要且進階的內容，非常推薦大家去看看。

別擔心，這是一份初學者友善的文件，會一步一步帶大家瞭解JavaScript的基礎。內容會包含部分CSS及HTML，但我會盡量說明清楚，不必太過煩惱。內容中的專業字詞我會以原文（英文）來撰寫，當越來越進階，各位勢必也得接觸英文的內容，我想從一開始就讓大家了解原意、原詞，但同時也會附上中文翻譯。

JavaScript簡介

JavaScript(或簡稱JS)是一套常用於網站前端（使用者能看見、互動的部分）的程式語言。但同時，它也會被用在網站伺服器端（後端）。換句話說，任何我們所看見的網站，都與JavaScript脫離不了關係。另外，JS作為一套成熟的程式語言，它用途當然也不僅限於網站，也有桌面app、手機app、機器學習相關的等等。

順帶一提，JavaScript和Java幾乎沒有任何關係，純粹是當時Java很潮所以這樣命名。大概跟鉛筆跟鉛的關係類似，有興趣可以問問ChatGPT這段故事。

大神們做到了什麼

在開始學習一項新工具前，我們最好了解它可以做什麼、做到什麼程度。以下整理了一些優秀的網站作品，這些都是透過JavaScript完成的。大家可以留意網站的互動性，以及在載入這麼複雜圖像資訊的情況下，網站所需要的載入時間 — 快得不可思議。

Apple Vison Pro

Marlène Bruhat | Creative Developer - Homepage

Game of Life - OpenProcessing

Chartogne-Taillet

Erkin Portfolio

Claude

這些開發者用JavaScript做到了大量資料串接、畫面互動、藝術創作，甚至是3D渲染等。同時，還維持了網站的高效能，這些都是JavaScript能做到的事。

動手試試

要接觸JavaScript，最簡單的方法就是使用瀏覽器。由於網站大多由JS組成，而瀏覽器負責渲染網站內容，執行JavaScript程式碼正式瀏覽器的任務之一。

現在就一起試試，首先必須打開瀏覽器的Console(控制台面版）。

打開Console(控制台面版)

首先，在瀏覽器裡任何頁面按下右鍵，選擇Inspect(檢查）。

例如在Google.com，右鍵按下Inspect。

這時會看見右方出現密密麻麻的內容。這是HTML，建構網頁的元素(像建築物的結構）。

在選單中選擇Console。

點選 > 附近，可以看見閃爍的游標，這樣就成功打開了Console。

若沒有看見Console選項，可以在 >> 或是 + 符號內尋找。

Mac使用者可以用command + option + i 快捷鍵開啟，Windows使用者可以按F12。

如果使用的瀏覽器是Safari，需要先到設定裡將開發者人員選項開啟。請注意，每個瀏覽器的Console介面多少都有點差異，但不影響功能。

💡若還是找不到，可以嘗試Google搜尋「<瀏覽器名稱> ＋打開Console」。

Console可以幹嘛

Console是使用者可以透過JavaScript與瀏覽器互動的區域。換句話說，我們能透過Console直接告訴瀏覽器要執行什麼操作。

舉例來說，我們可以要瀏覽器做簡單的運算：

輸入1 + 1按下enter，console就回傳了2。

這看起來實在很無聊。

但大家首先可以注意到，不像其他程式語言，寫JavaScript結尾是不需要加分號(;)的，未來我們會更仔細討論這個機制。加了也不會報錯，有加沒加都沒有關係，有些人主張要加，有些則否，大家自己取捨。

程式語言之所以強大，是因為可以將值存在variable（變數）裡，JavaScript也可以做到。

上圖中，用關鍵字 let 宣告 myNumber 並把3存進這個變數裡，這個變數會被暫時存在記憶體裡，能接著使用這個變數運算。

關於宣告的關鍵字，之後還會有詳細的解說，現在只要知道let是其中之一就可以了。

除了數字之外，變數也可以是string（字串）、boolean（true/false）等等。

很特別的是，我們不需要像其他程式語言一樣，在宣告的時候根據值的類別選不同的關鍵字。都用let，JS會自己判斷這是什麼類別。

以變數儲存string。

以' '或" "括起來的值是string類型，用+符號可以把string按照順序相連。

JavaScript的string可以用””或是‘’括起來，都可以。但記得前後必須一致，且必須使用英文輸入法的引號。

string跟string之間使用+符號，可以把兩個string按照順序串接在一起。

boolean作為變數。

除了使用者自行定義、輸入變數外，我們也可以透過Console取得現有頁面的資料。

用document.title取得網頁的title (你目前不需要了解這些變數）。

甚至是修改！

將title改成了：Gemeni。

當然，我們現在還沒瞭解這些指令到底代表什麼意思，也暫時不需要知道。document、title這些變數其實沒那麼重要，更重要的是.、=這些像是指令中骨架的符號，正如我們學英語、日語著重在看主詞、動詞、受詞的結構一樣。未來我們會看見許多不同的變數，但他們都會有相同的.及=符號連接，這些符號才真的代表了JavaScript的運作。

以上面指令為例。我們用.存取document裡的title屬性，用=更改現有的值，改成資料型態string: ‘Gemeni'。

用Console修改內容

我們可以用類似的指令嘗試修改網頁內容，跟著試試看吧。

我到台大校長室的頁面打開Console。

在Console裡輸入上述指令，你會發現有一個區域發亮了。

表示頁面中的#page-administration article這個HTML元素被選中了，接著繼續輸入：

這一段存取了那個HTML元素的style屬性內的background屬性，並修改成salmon這個顏色。

背景顏色被改成salmon這個顏色了。

還可以更改圖片：

存取#page-administration article內的imgHTML元素，修改src屬性。

我貼了維基百科上Elon Musk的圖片網址。

接著你會發現，重新整理頁面之後，一切都回歸原樣。

重新整理之後的頁面。

這是因為這些變數的改變都只發生在網站前端，網站後端的資訊並沒有因為我們輸入的程式碼有對應的改變。否則的話，網頁的世界將會天崩地裂呢。

這也正是網站區分成前端與後端的重要原因之一，將需要保護的內容交由後端負責，使用者可直接互動的部分由前端處理，才能確保網站的健康、安全運作。

Console.log

console.log()可以說是JS最重要的內建函數之一，我們可以透過它把資料印在Console。

舉例來說：

可以看見Console成功出現Hello World!這行字了。

你可能會想說，阿我直接打’Hello World!’在Console就好啦，幹嘛另外寫console.log()。

這是由於大部分時候，程式碼都不會直接打在Console。所以必須透過另外的指令讓Console印出東西。

反正先知道這件事，之後大家最常用到的就是這個了！

小結

我們今天知道了瀏覽器作為JavaScript的主要運作環境，我們能透過Console寫下JS程式碼控制頁面上內容。大家不需要記得那些陌生且繁複的指令和變數，只要注意let、.、=、’’、””等特殊的關鍵字以及符號，這些關鍵字、符號代表使用JavaScript時的骨架，未來也會重複出現。

明天我們將討論每個程式語言中最重要的部分 — Function（函數）。