前言
本章會先對程式碼產生基礎認識，並將電腦技術運用於生活，最後告訴你如何撰寫程式碼來製作網頁，當有了這些概念後，在接下來的章節將會讓你瞭解，如何透過 JavaScript 語言告訴瀏覽器你的需求。
（ 圖片來源 ）
A - 什麼是程式碼？
程式碼就是一連串的指令
程式碼是由一系列的指令所組成，電腦可以依循這些指令按照步驟遵循執行，可以把程式碼想像成：食譜、規則手冊或技術手冊一樣，瀏覽器則可依據網頁與使用者的互動方式，分別執行不同版本的程式碼，程式碼可執行不同的程式區段以回應不同的情況。
有些程式碼很單純只需要處理單一事件，就像是一道基礎料理只需要一個簡單的食譜，而有些程式碼可以執行很多任務，就像是為了準備辦桌般複雜的食譜。（ 圖片來源 ）
撰寫程式碼
撰寫程式碼前，你必須清楚表明你的目標，並列出達成此目標所需完成的各項工作任務，先從大方向開始著手，確認你想要達到的目標，再細分為較小的多項工作任務。
1. 定義目標
需要精準指出想要達成的目標，而這目標就等同電腦需解決的問題。
2. 設計程式碼
開始設計程式碼前，你可以把目標細分成一連串的工作任務，這些工作都是電腦需解決的問題，這樣的設計過程可以用流程圖來呈現；你也可以寫下電腦完成每項工作任務中所需的步驟（ 以及執行任務所需的任何資訊 ），就像撰寫食譜讓讀者遵照執行一樣。
3. 編寫程式步驟
每一步驟都必須使用程式語言（ JavaScript ）描述，才能讓電腦理解。
從步驟到程式碼
每個任務的步驟都必須用電腦可以瞭解及遵從的語言來制定，所以必須學習如何從電腦的角度「思考」。
電腦是程式化地解決問題，它遵循一連串的指令，逐一執行，也因為電腦所需要的指令和人們溝通的指令不盡相同，所以才要去學 JavaScript 的詞彙和語法，並學習如何撰寫指令讓電腦依循執行。
在流程表中規劃任務
程式碼通常需要在不同的狀況下執行不同任務，使用流程圖可以釐清如何將這些任務結合在一起，流程圖會顯示出每一個執行步驟的路徑。
（ 圖片來源 ）
B - 如何將電腦技術運用於生活中？
電腦利用資料創造真實世界的模型
（ 圖片來源 ）
對人類而言，每個真實世界物件都是非常清楚且容易理解的，但電腦對旅館並沒有預先定義的觀念，所以程式設計師為它創造了非常特別的模型概念，利用資料來創造模型。
物件與特性
即使無法看到旅館的圖片，也可以從資訊圖表中的資料瞭解這個場景的狀況。
物件（ 代表事物 ）
電腦程式設計中，世界上每個具體物品都可以用物件（ object ）表示，每個物件都有自己的：
- 特性（ Properties ）
- 事件（ Events ）
- 方法（ 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 特性值後，回傳目前空房數量 |
結合所有資訊
電腦利用資料建立模型，事件、方法和物件的特性都是相關聯的：事件可以觸發方法，而方法可以擷取或更新物件的特性。
－
以 旅館物件 舉例
- 當預約動作進行時，就啟動 book 事件。
- book 事件觸發了 makeBooking() 方法，它會增加 bookings 特性值。
- 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 ）一個物件的方法。
- 物件：此 document 物件代表整個網頁。
- 方法：使用 document 物件的 write() 方法，可以將新的文字內容寫入至頁面中。
- 成員運算子： document 物件有數個方法和特性，它們都稱為物件的成員，可以使用點號（ . ）存取該物件的成員。
- 當方法需要一些額外的資訊來運作時，需要將資料放置於小括號中，每個資訊都稱為方法的參數。
參考資料
JavaScript & jQuery 網站互動設計程式進化之道（ Jon Duckett 著、謝銘倫 譯 ）
![[BE101] 資訊安全](https://s103071049.coderbridge.io/2021/06/21/資訊安全/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=wonderland_[BE101] 資訊安全_@s103071049_https://static.coderbridge.com/images/covers/default-post-cover-1.jpg)
