JS註冊組|程式設計ABC|JavaScript&jQuery網站互動設計程式進化之道


Posted by itiswonderfall on 2023-07-27

前言

本章會先對程式碼產生基礎認識,並將電腦技術運用於生活,最後告訴你如何撰寫程式碼來製作網頁,當有了這些概念後,在接下來的章節將會讓你瞭解,如何透過 JavaScript 語言告訴瀏覽器你的需求。

圖片來源

 


 

A - 什麼是程式碼?

 

程式碼就是一連串的指令

程式碼是由一系列的指令所組成,電腦可以依循這些指令按照步驟遵循執行,可以把程式碼想像成:食譜、規則手冊或技術手冊一樣,瀏覽器則可依據網頁與使用者的互動方式,分別執行不同版本的程式碼,程式碼可執行不同的程式區段以回應不同的情況。

有些程式碼很單純只需要處理單一事件,就像是一道基礎料理只需要一個簡單的食譜,而有些程式碼可以執行很多任務,就像是為了準備辦桌般複雜的食譜。( 圖片來源

 

撰寫程式碼

撰寫程式碼前,你必須清楚表明你的目標,並列出達成此目標所需完成的各項工作任務,先從大方向開始著手,確認你想要達到的目標,再細分為較小的多項工作任務。

1. 定義目標

需要精準指出想要達成的目標,而這目標就等同電腦需解決的問題。

2. 設計程式碼

開始設計程式碼前,你可以把目標細分成一連串的工作任務,這些工作都是電腦需解決的問題,這樣的設計過程可以用流程圖來呈現;你也可以寫下電腦完成每項工作任務中所需的步驟( 以及執行任務所需的任何資訊 ),就像撰寫食譜讓讀者遵照執行一樣。

3. 編寫程式步驟

每一步驟都必須使用程式語言( JavaScript )描述,才能讓電腦理解。

 

從步驟到程式碼

每個任務的步驟都必須用電腦可以瞭解及遵從的語言來制定,所以必須學習如何從電腦的角度「思考」。

電腦是程式化地解決問題,它遵循一連串的指令,逐一執行,也因為電腦所需要的指令和人們溝通的指令不盡相同,所以才要去學 JavaScript 的詞彙和語法,並學習如何撰寫指令讓電腦依循執行。

 

在流程表中規劃任務

程式碼通常需要在不同的狀況下執行不同任務,使用流程圖可以釐清如何將這些任務結合在一起,流程圖會顯示出每一個執行步驟的路徑。

圖片來源

 


 

B - 如何將電腦技術運用於生活中?

 

電腦利用資料創造真實世界的模型

圖片來源

對人類而言,每個真實世界物件都是非常清楚且容易理解的,但電腦對旅館並沒有預先定義的觀念,所以程式設計師為它創造了非常特別的模型概念,利用資料來創造模型。

 

物件與特性

即使無法看到旅館的圖片,也可以從資訊圖表中的資料瞭解這個場景的狀況。

物件( 代表事物 )

電腦程式設計中,世界上每個具體物品都可以用物件( object )表示,每個物件都有自己的:

  1. 特性( Properties )
  2. 事件( Events )
  3. 方法( Methods )

特性( 代表事物的特徵 )

兩棟旅館可能具備相同的特徵,但它們都會各自的名稱、地址⋯⋯等等,程式設計師稱這些特徵為物件的特性( properties ),每個特性都有名稱( name )值( value ),而每個名稱/值配對都可提供你該物件實體的一些資訊。

以 旅館物件 舉例

旅館物件利用特性名稱和值的方式,提供旅館專屬資訊,例如:名稱、評比、房間數量及訂房數,同時也能從中了解此旅館有哪些設施。

特性名稱 特性值
name W Hotel
rating 4
rooms 42
bookings 21
gym false
pool true

 

事件

真實世界裡,人類與物件會產生互動,而這些互動會改變物件的特性值。

程式設計要讓電腦對於不同狀況時做不同反應,例如:點擊網頁上的聯絡人連結可以建立聯絡人資訊表單,事件( event )就是電腦向你表示「嘿!這事情剛剛發生!」

以 旅館物件 舉例

旅館不定期會有訂房動作,每次的訂房動作會需要將房間保留,如此可利用一個名稱為 book 的事件,觸發一段程式敘述以增加 bookings 的特性值,反之也可利用 cancel 事件來減少。

事件 發生情境
book 客房預訂
cancel 客房取消

 

方法

方法代表人與物件互動的方式,它們可以擷取或是更新物件的特性值。

以 旅館物件 舉例

旅館經常被詢問是否有空房,可以撰寫一個方法,將房間總數減掉訂房數以得到空房剩餘數量,當房間被預訂或取消時,也可以定義一些方法。用於增加、減少 bookings 的特性值。

方法 執行工作
makeBooking() 增加 bookings 特性值
cancelBooking() 減少 bookings 特性值
checkAvailability() 將 rooms 特性值減去 bookings 特性值後,回傳目前空房數量

 

結合所有資訊

電腦利用資料建立模型,事件、方法和物件的特性都是相關聯的:事件可以觸發方法,而方法可以擷取或更新物件的特性。

以 旅館物件 舉例

  1. 當預約動作進行時,就啟動 book 事件。
  2. book 事件觸發了 makeBooking() 方法,它會增加 bookings 特性值。
  3. bookings 特性值變更後,也會反應出目前旅館的空房數。

 

網頁瀏覽器是由物件建立而成的程式

網頁瀏覽器也會以類似的方式,為它所顯示的網頁建立瀏覽器視窗模型。

WINDOWS 物件

瀏覽器代表每一個視窗或頁籤正在使用 windows 物件, windows 物件的 location 特性會告知你目前頁面的 URL 位址。

DOCUMENT 物件

將網頁載入至視窗的動作,就是透過 document 物件進行,利用 document 物件的 title 特性,可得知標題文字內容;而 lastModified 特性可提供該頁面最後更新日期的資訊。

以 document 物件 舉例

document 物件代表一個 HTML 頁面,利用 document 物件可以存取並改變頁面內容,並對使用者與頁面的互動進行回應。

特性名稱 特性值
URL https://wonderland.coderbridge.io/
lastModified 07/23/2023 15:33:37
title wonderland
事件 發生情境
load 頁面和資產完成下載
click 使用者在頁面上點擊滑鼠
keypress 使用者下壓鍵盤按鍵
方法 執行工作
write() 加入新內容至文件中
getElementById() 當你指定元件的 id 屬性時,便可取得該元件

 

瀏覽器如何看待網頁

瀏覽器會解讀 HTML 碼,將樣式規則套用於其上,並使用 JavaScript 解譯器,將指令轉譯為電腦可以遵循的指令。

1. 把每一頁面當成 HTML 代碼

網站裡的每個頁面都可以視為是個別的文件

圖片來源

2. 建立頁面模型並儲存於記憶體中

架構可以想像成是族譜,最上層是 document 物件,下方會有很多節點,每個節點都是一個物件,例如: html 、 head 、 h1 、 em ⋯⋯等等。

圖片來源

3. 使用成像引擎顯示頁面於螢幕上

瀏覽器會請求 CSS 檔案,並依據檔案的描述呈現頁面。

圖片來源

 


 

C - 如何於網頁中撰寫程式腳本?

 

HTML 、 CSS 和 JAVASCRIPT 如何共同運作?

每種語言建置出不同目的的分層,每一分層從左到右都基於上一分層上建立。

內容層( .html 檔案 )

頁面內容放置處, HTML 給予此頁面完整的內容架構,並增加語意。

表現層( .css 檔案 )

CSS 運用樣式規則增強頁面內容的表現方式( 背景、邊界、顏色⋯⋯等等 )。

行為層( .js 檔案 )

在此分頁時我們可以變更頁面的行為、增加互動性,我們建議盡可能將 JavaScript 程式碼放置於分離的檔案之中。

 

建立 JAVASCRIPT 程式並於 HTML 頁面中引用

JavaScript 檔案只是個純文字檔案( 如同 HTML 和 CSS 的檔案 ),所以只需要開啟你偏好的程式碼編輯器,並輸入內容將其儲存成副檔名為 .js 的檔案即可。

然後想要在網頁中使用 JavaScript ,可以使用 HTML 的 <script> 元件來告知瀏覽器,該區段內容為程式碼,元件的 src 屬性可提供 JavaScript 檔案儲存的位置,要注意,元件的擺放位置會影響程式內容及頁面載入時間。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/xxx.js"></script>
</body>
</html>

 

如何使用物件與方法?

這一行 JavaScript 程式敘述展示如何使用物件和方法,程式設計師把這樣的敘述稱為呼叫( calling )一個物件的方法。

  1. 物件:此 document 物件代表整個網頁。
  2. 方法:使用 document 物件的 write() 方法,可以將新的文字內容寫入至頁面中。
  3. 成員運算子: document 物件有數個方法和特性,它們都稱為物件的成員,可以使用點號( . )存取該物件的成員。
  4. 當方法需要一些額外的資訊來運作時,需要將資料放置於小括號中,每個資訊都稱為方法的參數。

 


 

參考資料

JavaScript & jQuery 網站互動設計程式進化之道( Jon Duckett 著、謝銘倫 譯 )


#js #JS註冊組 #JavaScript & JQuery #網站互動設計程式進化之道 #javascript #Windows #document #html #css #write() #getElementById()







Related Posts

七天帶你初探AR世界-Day 3

七天帶你初探AR世界-Day 3

初識 JSON 格式與資料轉換

初識 JSON 格式與資料轉換

DAY45:Decode the Morse code, advanced

DAY45:Decode the Morse code, advanced


Comments