JavaScript 與 jQuery

第 1 章    前端與網頁結構

(1) 前端 (Front-end)

∗ 前端主要工作與技術

frontend

▸ 前端工作

✶ 前端設計師:頁面樣式設計
# 佈局, UI/UX, 影像處理, 繪圖, 藝術, 風格制定, ...
✶ 前端工程師:實作頁面設計
# CSS 預處理器, CSS 框架, API, AJAX, JSON, JavaScript 框架,...
# 也可能包括網站架設與內容管理系統的導入 (Content management system, CMS)
✶ 交集:HTML, CSS, RWD, JavaScript, jQuery
# 前端設計師可以不具備,但前端工程師則必備

▸ JavaScript 框架

React, Angular, Vue, ...

(2) 網頁結構

∗ 網頁是由物件建構而成

▸ 視窗 (Window) 物件:瀏覽器的視窗或頁籤就是一個 window 物件

✶ Location 特性:Window 物件的 location 特性儲存目前網頁的 URL

▸ 文件 (Document) 物件:載入瀏覽器視窗或頁籤的網頁利用 document 物件來模型化

✶ Title 特性:Document 物件的 title 特性儲存網頁的標題, 也就是 HTML 元素 <title> 標籤的內容
✶ LastModified 特性:Document 物件的 lastModified 特性儲存網頁最後修改時間

∗ Document 物件表示一個 HTML 網頁

document 物件有

✶ 特性:描述目前網頁的特質
✶ 方法:可取出網頁元素的內容,增加、刪除、或修改網頁內容
✶ 事件:我們可以回應使用者所觸發的事件,例如滑鼠點擊某個元素
OBJECT TYPE: DOCUMENT
PROPERTIES
URL http://www.javascriptbook.com/
lastModified 2014-9-4 15:33:37
title Learn JavaScript & jQuery – A book that teaches you in a nicer way
EVENT happens when:
load page and assets have finished loading
click user clicks the mouse over the page
keypress user presses down on a key
METHOD what it does:
write() adds new content to the document
getElementById() accesses an element when you state its id attribute

▸ 當瀏覽器載入網頁後,瀏覽器會建立一個 document 物件,同時也建立該網頁所有元素的物件, 這些物件總稱為文件物件模型 (Document Object Model, DOM)

∗ 瀏覽器如何看待網頁

瀏覽器解讀 HTML 碼 (HTML code) 以及為元素加上樣式 (Style) 的程序如下:

1.  瀏覽器接收到一份 HTML 碼,例如:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My title</title>
<link rel="stylesheet" href="css/myCss.css">
</head>
<body>
<h1>My company</h1>
<p>Phone: <em>1234-5678</em></p>
</body>
</html>

2.  瀏覽器為網頁建立一份模型 (Model) 並且儲存在記憶體中,以上述網頁為例:

DOM image

3.  瀏覽器利用顯示引擎 (Rendering engine) 來呈現網頁

✶ 如果沒有 CSS 樣式,就使用預設樣式
✶ 如果有 CSS 樣式,顯示引擎處理 CSS 樣式規則,然後應用在相對的 HTML 元素

(3) 在網頁中撰寫命令稿

∗ HTML、CSS、與 JavaScript 的結合可視為三層結構:

▸ 內容層 (Content layer):HTML 碼,儲存網頁的內容、結構、與意義

▸ 展示層 (Presentation layer):CSS 碼,說明網頁的內容呈現的樣式

▸ 行為層 (Behavior layer):JavaScript 程式碼,改變網頁的行為、加入互動性

此三層的資料最好放在不同的檔案 (.html, .css, .js) 便於個別維護,開發者常稱為關注點分離 (Separation of concerns)

Separation of concerns

∗ 撰寫 JavaScript 程式

▸ JavaScript 程式以純文字方式撰寫,因此只要有純文字編輯器即可,常見的文字編輯器有: Sublime Text 3, Brackets, Atom, Bluefish, notepad++, Gedit

▸ 安裝 Brackets 網頁編輯器:至 Brackets 官網 http://brackets.io/ 下載以下安裝檔並安裝

✶ Ubuntu:Brackets.Release.x.x.64-bit.deb
✶ Windows:Brackets.Release.x.x.msi
✶ Mac:Brackets.Release.x.x.dmg
以上 x 為版本數字

▸ 註:Ubuntu 亦可利用 PPA 安裝 (此方式較好,版本會自動更新)

$ sudo add-apt-repository ppa:webupd8team/brackets
$ sudo apt update
$ sudo apt install brackets

▸ 設定Brackets

✶ 設定中文繁體介面:Debug Switch Language 繁體中文 Reload Brackets
✶ 選擇字型:檢視 佈景主題 字體大小:14px,字體 (選等寬字體):
# Ubuntu:DejaVu Sans Mono Book
# Windows:Consolas
# Mac:Consolas
✶ 因為 Brackets 的智慧縮排一點也不智慧,且 JavaScrit 語法錯誤偵測 (JsLint) 也不好用,因此將兩個都停用
# 在 Brackets 裡,點選 「除錯」 「開啟喜好設定檔」 (或:Debug Open Preferences File) 即可編輯 brackets.json 設定檔,在最後加入 2 行
{
    "brackets-eslint.gutterMarks": true,
    .
    .
    ...,
    "smartIndent": false,
    "linting.enabled": false
}
# 註:原先最後一行後面要加逗點,加入後的最後一行沒有逗點

∗ 規劃專案目錄架構

▸ 專案目錄架構如下:

javaScript/
   ch1/
      css/
      img/
      js/
   ch2/
      css/
      img/
      js/
   ch3/
   ...
✶ 最上層目錄為 javaScript (以 Ubuntu 作業系統為例, 可以設在 /home/<username>/目錄之下,其中 <username> 是登入的使用者名稱)
# 各章的目錄名稱為 ch1, ch2, ch3, ...
# 每一章目錄均包含 3 個子目錄:css/, img/, 與 js/,分別置放 CSS 樣式,影像、與 JavaScript 等檔案

∗ 建立新 HTML 檔案

▸ 建立第 1 章之目錄架構,啟動 Brackets 並移至目的資料夾

檔案 開啟資料夾 選擇 <...>/javaScript/ 目錄 開啟
✶ 設定目的資料夾之後,基於安全機制,Brackets 內建的伺服器僅能存取該資料夾以下的資料,該資料夾以上的資料都無法存取

▸ 建立新檔案 add-content.html

檔案 新增 ctrl-s 選擇 <...>/javaScript/ch1/ 目錄, 檔名:add-content.html 儲存,輸入以下內容:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>穩固建築公司</title>
<link rel="stylesheet" href="css/ch1.css">
</head>
<body>
<h1>穩固建築公司</h1>
<script src="js/add-content.js"></script>
<p>下訂單及查詢,請電 <em>(04)2332-3000</em></p>  
</body>
</html>
✶ 在 HTML 檔案中
# 將 JavaScript 程式寫在 <script></script> 標籤中即可執行
# 亦可利用 <script src=...></script> 標籤來連結 JavaScript 檔案, src 為 source (來源) 的縮寫
✶ 設定在 Brackets 編輯器中按下 Tab 鍵的結果是輸入 2 個空白,而不是定位鍵
# 點選右下方設定:最後呈現「空白字元:2」
# 註:在空白處移動游標時,看起來還是一次移動 2 格 (感覺上還是輸入了定位鍵), 這是 Brackets 的智慧功能,一次跳至所設定空白字元的數量

∗ 建立新 JavaScript 檔案

▸ 建立新檔案 add-content.js

檔案 新增 ctrl-s 選擇 ch1/js/ 目錄, 檔名:add-content.js 儲存,輸入以下內容:
var today = new Date();
var hourNow = today.getHours();
var greeting;

alert('第一個JavaScript程式');

if (hourNow > 18) {
  greeting = '晚安';
}
else if (hourNow > 12) {
  greeting = '午安';
}
else if (hourNow > 0) {
  greeting = '早安';
}
else {
  greeting = '歡迎';
}

document.write('<h3>' + greeting + '</h3>');

∗ 下載相關檔案並瀏覽結果

▸ 下載 assets1.zip,解壓縮後將 ch1.cssbackground.png 檔案分別置於 ch1/css/ch1/img/ 目錄裡

▸ 在瀏覽器開啟 add-content.html

✶ 首先彈出訊息視窗:「第一個 JavaScript 程式」
✶ 按下確定後,可以看到依目前時間所出現適當的致意文字 (「...安」)
✶ 若以滑鼠右鍵點擊網頁並選擇檢視原始檔,可看到 HTML 內容,其中並無致意的元素
✶ 但按下 F12 檢視網頁內容,可以看到 <h3>...安</h3> 元素, 這是由 JavaScript 程式 動態 插入的資料

∗ 也可以將 JavaScript 程式寫入 HTML 檔案

add-content.html

...
<h1>穩固建築公司</h1>
<script>document.write('<h3>歡迎</h3>')</script>
<p>下訂單及查詢,請電<em>(04)2332-3000</em></p>  
<script src="js/add-content.js"></script>
...
可在網頁中看到「歡迎」字眼

▸ 建議:除非必要,否則最好不要將 HTML 與 JavaScript 程式混在一起

∗ 使用 JavaScript 的物件與方法

document.write('歡迎');

document 物件:代表整個網頁

▸ 句點 (.):稱為成員運算子 (Member operator),用來呼叫物件的某個成員 (即方法)

'歡迎':呼叫方法所給的參數 (Parameter)

∗ JavaScript 的執行與其所在位置有關

▸ 當瀏覽器載入網頁過程中,碰到 <script> 元素, 瀏覽器會暫停頁面載入,然後載入 JavaScript 程式並執行,因此執行結果就發生在載入 JavaScript 之處

▸ 上例中,JavaScript 置於 <p>下訂單... </p> 之前,因此其執行結果會在其前顯示

▸ 如無位置需求,JavaScript 的連結應放在網頁最後 (亦即</body> 之前), 以確保網頁所有元素都載入完畢,才載入 JavaScript 程式

▸ 將 JavaScript 撰寫在獨立檔案比寫在網頁中較好

✶ 避免與 HTML 程式碼混雜
✶ JavaScript 程式只會載入一次,但網頁會隨著使用者點選而多次載入,將程式放在網頁中造成不必要的多次下載