在文章〈關卡〇：新手入門之說聲 Hello World〉，我們看到了 HTML、CSS、JavaScript 如何組合成一個網頁。不過 JavaScript 究竟是什麼、以及在 Hello World 網頁中的幾行 JavaScript 語法到底是什麼意思呢？這篇文章將逐一介紹。

var button = document.querySelector('button')
button.addEventListener('click', alertSomething)

function alertSomething() {
  window.alert('哈囉你好嗎')
}

一、JavaScript 是啥

如果將網頁比喻成房屋的話，那 JavaScript 就是網頁的魔法：可以做到產出 HTML 的骨架、也可以做到 CSS 的裝潢。但 JavaScript 能做的更多。

JavaScript (簡稱 JS) 是一種可以跑在網頁上的程式語言。JavaScript 檔案由一段一段的陳述句 (statement) 所組成。除了能做 HTML、CSS 能做的事情，JavaScript 還能做數學運算、操控瀏覽器、播放暫停影片等等的功能。

// 一段陳述式(變數宣告)，將 hello world 這串文字存進 message 這個變數中
var message = 'hello world' 

// 一段陳述式(函式宣告)，用來設定一個行為
// 稍後執行時可印出 message 變數的資料，也就是 hello world
function printHello() {
  console.log(message)
}

// 一段陳述式(執行函式)
printHello() // 執行這個行為，印出 hello world

陳述式 (statement) 是一段有意義的程式碼片段。例如

• 宣告變數：將一串文字存進一個變數中 var message = 'hello world' 。程式中的變數可以理解為國高中數學的方程式中，常見的 x, y 變數。
• 宣告函式與執行函式：程式中的函式可以理解成數學的函式f(x)。丟入一個變數 x 到方程式 f 中，就會得到一個計算過後的值。

瀏覽器載入網頁時，會先讀取 HTML 檔案蓋好骨架、接著會載入 CSS 樣式設定，再來會執行 JavaScript 指令。

在關卡〇，我們只需要先知道 JavaScript 這個語言，大部分是由許多的 statement 組成就好。

延伸教學

• JavaScript - 維基百科，自由的百科全書
• 陳述式與表達式 - YouTube
• 【javascript】3小時初學者教學 #js #javascript教學 #javascript入門 - YouTube
• 【前端速成】JavaScript JS 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端 - YouTube

二、Hello World 中，幾行 JavaScript 語法的意思

var button = document.querySelector('button')

一段宣告變數的陳述式。

等號右方的 document 是指網頁，querySelector 是網頁的一個函式(行為)， document.querySelector('button') 是指透過 JavaScript 去取得網頁上的一個 <button> 這個標籤名稱為 button 的標籤(元素)。

等號左方var button ，是指宣告一個變數叫做 button 的意思。類似國高中寫計算題目時，一開始會 設 x = 1, y = 2 的概念。

這段陳述式讀起來的意思就是，在網頁上抓到一個按鈕，並把它存進 button 這個變數中，方便之後進行操作。

button.addEventListener('click', alertSomething)

一段執行函式的陳述式。

這邊的 button 指的就是前面提到的按鈕。 addEventListener 是一個函式，就像是在按鈕旁邊放了耳朵眼睛，用來監聽、偷看這顆按鈕有沒有發生什麼事情 ( 例如 click 點擊事件)。如果發生了事件，就執行某個函式 (alertSomething)。

function alertSomething() {
  alert('哈囉你好嗎')
}

一段宣告函式的陳述式。

這邊的 function 是用來宣告函式用的關鍵字， alertSomething 則是這個函式的名稱。 alert('哈囉你好嗎') 中的 alert 是瀏覽器提供的一個函式，可以跳出一個彈出視窗，並且顯示括號 () 中的一串文字。

小結

看完今天的文章可以知道

• JavaScript 的簡介：JavaScript 檔案由 statement 組成，statement 包含但不限於宣告變數、宣告函式與執行函式。
• 在 Hello World 範例中的 JavaScript 語法意思 (宣告變數、執行函式、宣告函式)

明天將繼續簡介開發環境。