iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0
Modern Web

給心理人的前端網頁開發系列 第 6

[給心理人的前端網頁開發] 06 關卡〇:簡介 JavaScript

  • 分享至 

  • xImage
  •  

在文章〈關卡〇:新手入門之說聲 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 組成就好。

延伸教學

二、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 語法意思 (宣告變數、執行函式、宣告函式)

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


上一篇
[給心理人的前端網頁開發] 05 關卡〇:簡介 CSS
下一篇
[給心理人的前端網頁開發] 07 關卡〇:簡介開發環境
系列文
給心理人的前端網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言