現代化 Web 前端程式設計

基礎篇

Zet @ NCU

2017.08

goo.gl/iFxdJA

About me

周昱安（Zet）
- 國立中央大學資工所 – Web 智慧與資料探勘實驗室
- EXMA-Square 實習工程師
- 熱衷於前端技術開發與學習

WWW & W3C

World Wide Web（WWW）

全球資訊網（亦作「Web」、「WWW」、「W3」，英文全稱為「World Wide Web」），是一個由許多互相連結的超文字組成的系統，透過網際網路存取。全球資訊網並不等同網際網路，全球資訊網只是網際網路所能提供的服務其中之一。
最早的 Web 構想可以追溯到遙遠的 1980 年的伯納斯，他開發出了 WWW 的雛形，發明了 HTML、第一個網頁瀏覽器和第一個網頁伺服器。
1993年4月30日，全球資訊網宣佈對任何人免費開放，並不收取任何費用。

World Wide Web Consortium（W3C）

1994年在麻省理工學院電腦科學實驗室成立，建立者是Web的發明者伯納斯。
為解決 Web 應用中不同平台、技術和開發者帶來的不相容問題，保障 Web 資訊的順利和完整流通，全球資訊網協會制定了一系列標準並督促 Web 應用開發者和內容提供者遵循這些標準。
但是，W3C 制定的 Web 標準並非強制而只是推薦標準。因此部分網站仍然不能完全遵守這些標準。特別是使用早期所見即所得網頁編輯軟體（例如 Adobe Dreamweaver）設計的網頁往往會包含大量非標準代碼。

瀏覽器的發展與戰爭

第一次瀏覽器大戰

1990年代初期，已有不少圖形介面的瀏覽器問世，而第一個普及的是網景領航員（Netscape Navigator）瀏覽器。
1995年，微軟向另一家瀏覽器廠商併購了他們的產品，建立了Internet Explorer1，而從 Internet Explorer 2 起免費開放下載。
在往後幾年，微軟和網景以飛快的速度陸續各自推出新版本的瀏覽器。因為當時瀏覽器必須具備更多新功能，否則會被認為是落後的，因此當時著重產品功能特色多於修正錯誤，導致產品也多是不穩定的、造成網頁標準分歧、時常當機和安全漏洞等問題，為使用者帶來困擾。

第一次瀏覽器大戰

1996年微軟推出 Internet Explorer 3，成為第一款支援 CSS 的商用瀏覽器，市場佔有率開始上升
隨著 Internet Explorer 4 的推出，這場瀏覽器大戰產生了重大改變，IE4 在符合 W3C 製定的網頁標準方面，做得比 Netscape 的同期版本要好，同時也能載入動態網頁，其文字或圖像的位置可以改變。
在 IE 和 Netscape 大戰期間，微軟與網景為了爭取使用者，而各自推出許多標準外的功能，導致當時許多網站無法同時在所有瀏覽器保持一致的體驗。

第一次瀏覽器大戰

微軟在這場瀏覽器大戰擁有兩大優勢：
- 金錢資源落差
- 微軟壟斷了作業系統市場
微軟用盡各種方法斷絕 Netscape 的財路，加上 Netscape 自身錯誤的商業決策，使得 Netscape 於1998年年底，被 IE 擊敗。IE 成為新的主導瀏覽器，市佔率的最高峰達到 2002 年時 IE6 的96%，比 Netscape的高峰還要高。未來幾年，網頁開放標準的關注度下降。
第一輪瀏覽器大戰結束，Internet Explorer 完全主宰了瀏覽器市場，再無競爭對手，而瀏覽器的創新也隨之減少。

第二次瀏覽器大戰

Netscape 戰敗後開放瀏覽器的原始碼，並委託給新成立的非營利機構 Mozilla 基金會，發展持續了好幾年，直到開發出一款輕量級瀏覽器 ─ Firefox。
微軟在瀏覽器大戰中大獲全勝，取得壓倒性的市場佔有率，以致於微軟不再大力投入 IE 的開發。
Firefox 的諸多功能設計皆強烈針對 IE6 的各種缺陷，因而能大幅度吸引對IE6不滿的用戶轉向使用 Firefox，Firefox 於是在很短的時間內成為市佔率第2名的網頁瀏覽器。來勢洶洶的 Firefox 迫使微軟正視新一波的瀏覽器大戰，終於在 2006 年 10 月推出了 Internet Explorer 7，Web 的技術與標準再度進入戰國時代。

第三次瀏覽器大戰

瀏覽器發展與網頁標準又再度受到關注，各家廠商紛紛投入資源
Apple 開發了更輕巧，更加乾淨的設計和更符合標準的排版引擎「Webkit」，首次併入於 macOS 附帶的 Safari 瀏覽器。
2008年底，Google 正式發表 Google Chrome 網頁瀏覽器，採用和Safari 相同的 Webkit 排版引擎和一個名為 V8 的高效率 JavaScript 直譯引擎。
直至今日， IE、Firefox、Chrome、Opera、Safari 被列為前五大瀏覽器，並持續進行著競爭激烈但大多遵守 W3C 標準的發展，而近年來戰火更轉移到行動裝置平台上持續延燒。

HTTP & 前後端

HTTP

HTTP 是一種客戶端（使用者的裝置）與伺服器端（網站服務的伺服器）請求與回應的一種通訊協定
URL：網址，HTTP 請求的統一資源辨識元
Method：請求的方法
- GET（常見的預設方法）
- POST
- PUT
- DELETE

前端 & 後端

HTTP 是一種客戶端與伺服器端請求與回應的一種通訊協定
- 前端（Front-End）= 客戶端（Client-Side）
  - Web 中的瀏覽器
  - Mobile 裝置中的 App
  - 桌上電腦中的桌面應用程式
  - 通常負責使用者互動介面（UI）
- 後端（Back-End）= 伺服器端（Server-Side）
  - 網站服務的伺服器
  - 通常負責處理資料庫資料存取之類的工作

前端 & 後端

瀏覽器

伺服器

Request

Response

前端的組成

排版引擎

JavaScript 引擎

瀏覽器

HTML

基本概念

HTML

超文件標示語言（HyperText Markup Language，HTML）是為「網頁建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言
HTML被用來結構化資訊 — 例如標題、段落和列表等等，也可用來在一定程度上描述文件的外觀和語意
1982 年由伯納斯建立，後來成為國際標準，由 W3C 維護
最新版本為 HTML 5，於 2014 年 10 月發佈為 W3C 推薦標準
HTML 最主要的用途是為了定義網頁頁面的「基礎結構」

HTML & DOM

HTML 程式碼是純文字，被傳送到瀏覽器後會立刻被瀏覽器的排版引擎解析，並產生畫面的元素節點（DOM Element）
HTML 是描述結構的文字規格書，DOM 是根據規格書製作出來的實品
你可以透過 JavaScript 操作 DOM，來事後改變畫面元素的狀態或結構

瀏覽器

排版引擎

解析

伺服器

HTML

瀏覽器

JavaScript引擎

DOM

使用 HTML 描述頁面結構

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <p>text</p>
  </body>
</html>

html

head

body

title

標籤（Tag）

<p>

</p>

開始標籤

閉合標籤

< > 裡的文字為標籤種類，不同的標籤種類代表了不同效果的元素
一個開始標籤就要對應一個閉合標籤，以 </ > 的形式表示
大多數標籤一定要閉合，有些「無內容標籤」可以不用閉合
- 無內容標籤：<meta>、<link>、<br>、<hr>、<input>、<img>
標籤（Tag）只是純文字的描述，轉換之後的 DOM 才是真正顯示在畫面上的元素（Element）

標籤（Tag）

<p id="foo">text</p>

標籤種類

屬性名稱

屬性值

標籤內容

使用屬性來定義標籤的資料或初始值，多個屬性之間以空格符號分開
有一些屬性是所有標籤通用的，有些屬性則是特定標籤專用的
使用雙引號 " 來包住屬性的值
有一些屬性不填寫值即可表達它的意義，如 <button> 的 disabled 屬性

id & class 屬性

<p id="foo" class="bar ncu">text</p>

id 是一個元素的唯一辨識名，不可以重複
class 是元素的群組辨識名，可以在多個元素重複組合使用
一個元素可以有多個 class，使用空白符號分隔
所有顯示用元素都可以指定 id 與 class 屬性，你可以透過 id 或 class 在 CSS 與 JavaScript 中找到想要的元素並套用樣式或進行操作

HTML 中的空白符號

<div>文字    文字</div>

HTML 中的連續多個空格會自動被視為一個來顯示
如果是想要增加兩個元素之間的距離的話，應該使用 CSS 樣式來達成

元素介紹

Document 元素

<!DOCTYPE>

<!DOCTYPE> 會告知你的瀏覽器這個網頁是用哪個版本的 HTML
Doctype 是一種宣告，而非 Tag
HTML 5 之後，通常都使用 <!DOCTYPE html> 來定義Doctype
撰寫在文件的最前面，並與 <html> 放置同層

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <p>text</p>
  </body>
</html>

<html>

<html> 是一份網頁文件原始碼中必要的最外層節點

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <p>text</p>
  </body>
</html>

<head>

<head> 是定義頁面相關資訊的包裹用節點，須放置在 <html> 的內層
- <title> 用於定義網頁的標題
- <meta> 用於定義一些特殊的文件相關資訊，例如文字編碼、搜尋引擎的關鍵字，其中文字編碼通常都要設定為 UTF-8
- <link> 用於引入一些外部的資源，如 CSS 檔案或是網頁 Icon

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
</html>

<body>

<body> 是定義網頁主要顯示內容的包裹用節點，須放置在 <html> 的內層

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>

  <body>
    <p>text</p>
  </body>
</html>

<script>

<script> 用於引入外部 JavaScript 程式碼
- 使用 src 屬性指定程式碼的引入路徑
- 建議放置在 <body> 的後面
<script> 也可以用於在 html 中直接撰寫 JavaScript 程式碼
JavaScript 程式碼會依照 <script> 標籤們的順序執行

<!DOCTYPE html>
<html>
  <body>
    <p>text</p>
  </body>

  <script src="./app.js"></script>
  <script>
    let a = 100;
  </script>
</html>

<style>

<style> 用於直接在 html 中撰寫 CSS 程式碼
- 標籤內容即為 CSS 程式碼

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>

  <body>
    <p>text</p>
  </body>

  <style>
    body {
      color: red;
    }
  </style>
</html>

區塊元素 vs 行內元素

HTML 中，各種元素大致上可以分為兩種顯示方式：
- 區塊元素（block）
  - 元素為矩形區塊狀，可以想像為一個空間體
  - 佔用了整行，寬度為其父容器的 100%（和父元素的寬度一致），除非自己有被設定寬度
- 行內元素（inline）
  - 元素僅為自身個體，只佔用自己所需要的最小空間
  - 允許其它行內元素與其位於同一行排列
  - 行內元素只允許容納文字或其他的行內元素
各元素都有預設的顯示模式，但可以透過 CSS 加工修改

文字元素

<h1> ~ <h6>

<h1> ~ <h6> 用於標題文字（heading）
HTML 的標題文字分為六階
- <h1> 為主標題，文字最大
- <h2> 為次標題，文字大小次之，以此類推
各瀏覽器之間雖然都會依照 <h1> 到 <h6> 的順序顯示由大到小，但是不同瀏覽器中同等級的標題預設大小可能會有些微的不同
<h1> ~ <h6> 預設為區塊元素

<h1>主標題</h1>
<h2>次標題</h2>
<h3>第三階標題</h3>
<h4>第四階標題</h4>
<h5>第五階標題</h5>
<h6>第六階標題</h6>

<p>

<p> 用於段落文字（paragraph）
<p> 元素有下方留白的預設樣式
<p> 預設為區塊元素

<p>段落1</p>
<p>段落2</p>

排版元素

<div>

<div> 用於排版區塊分隔（division），可以組織元素群組
- 其內容可以是任意的一或多個元素
- <div> 預設為區塊元素，佔用整行
- <div> 是最常用的排版手段，配合 CSS 賦予不同樣式便可以組織出各種排版

<div>
  <div>區塊1</div>
  <div>區塊2</div>
</div>

<span>

<span> 用於行內元素的組織，就像是 <div> 的行內版本
適合用於：
- 當沒有適當的元素可以將部分文字和周圍文字區隔出來時
- 包裹並容納多個行內元素
使用 <span> 最常見的理由是可以透過其區隔行內元素，來分別套用不同的 CSS 樣式

<div>文字<span style="color: red;">紅文字</span></div>

<br>

<br> 用於在行內元素之間換行（break line）

<p>文字<br>文字</p>

列表元素

<ul>、<ol>、<li>

<ul> 用於無序列表（unordered list）
<ol> 用於有序列表（ordered list）
<li> 用於定義列表項目（list item），可以是 <ul> 或 <ol> 的子節點
<ul> 與 <ol> 預設皆為區塊元素

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

表格元素

<table>、<tr>、<td>

<table> 用於定義表格
<tr> 用於定義表格的列
<td> 用於定義表格的單格

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

多媒體元素

<img>

<img> 用於顯示圖片
- 以 src 屬性指定圖片來源路徑
- 以 alt 屬性指定當圖片無法讀取時的替代顯示文字
<img> 預設為行內元素

<img src="http://i.imgur.com/S0RSCwM.jpg" alt="pets">

<video>

<video> 用於顯示影片
- 以 src 屬性指定影片來源路徑
- 以 controls 屬性表示要顯示影片的控制項
要注意的是各瀏覽器支援的影片格式與編碼們不盡相同

<video src="./video.mp4" controls>

連結與嵌入元素

<a>

<a> 用於定義網頁的超連結，以連結其他頁面
- 以 href 屬性指定超連結的目標網址
- 以 target 屬性指定超連結的顯示模式
  - _blank：開新分頁來顯示目標的網頁
  - _self：在原來的瀏覽器分頁直接跳轉到目標的網頁
被 <a> 所包含的所有元素的範圍，都會有點擊時連結頁面的效果
瀏覽器對於 <a> 內的文字會有預設藍色並加上底線的樣式
<a> 預設為行內元素

<a href="http://google.com" target="_blank">Google</a>

<iframe>

<iframe> 用於在網頁中開一個區塊並嵌入外部網頁
- 以 src 屬性指定要嵌入的網頁地址
- 以 frameborder 屬性指定嵌入區塊的邊線粗細，預設為 1
- 以 allowfullscreen 屬性表示允許嵌入的網頁進入全螢幕模式
要注意有些網站可能有做特殊設定而無法被任意嵌入
<iframe> 預設為行內元素

<iframe 
  src="https://www.youtube.com/embed/saCZrsQi5Kk" 
  frameborder="0"
  allowfullscreen>
</iframe>

表單元素

表單如何運作

使用者填寫表單，並按下按鈕將資訊傳送到伺服器

伺服器使用一些後端程式語言來處理資料，例如存放進資料庫

伺服器依據收到的資料，渲染一個新頁面並送回瀏覽器

表單泛指填寫資訊類的互動性 UI，例如文字輸入、下拉式選單
表單必須要有伺服器端的資料處理配合，才能真正地發揮作用
表單的每個控制項通常都要有一個唯一的名稱，以 name 屬性指定
大多數表單的控制項預設皆為行內元素

<form>

<form> 用於定義表單區塊，並指定表單發送的設定
- action 屬性指定表單資料要送達的目的網址
- method 屬性指定了送出表單的 HTTP 請求的方法
- enctype 屬性指定了表單資料的格式
  - 預設為純文字，如果表單中包含上傳檔案的話，必須設定值為 multipart/form-data

<form action="http://140.115.54.45:3000/name" method="post">
  <input type="text" name="name">
  <button type="submit">send</button>
</form>

<button>

<button> 用於顯示一個按鈕
- type 屬性用於指定按鈕類型
  - submit：該按鈕被點擊時會提交所屬的表單
  - reset：該按鈕被點擊時會清空表單所有的已填寫資料
  - button：就只是顆普通的無作用按鈕，可以脫離表單獨立使用
- disabled 屬性用於表示該按鈕為禁用狀態，無法被點擊

<form action="http://140.115.54.45:3000/form" method="post">
  <input type="text" name="username">
  <button type="submit">send</button>
</form>

文字輸入

使用 <input type="text"> 來表示一個表單中的文字輸入框，僅能輸入單行的文字
- value 屬性用於指定輸入框中的文字預設值
- maxlength 屬性用於指定文字的可輸入字元最大數量，達到最大值時使用者無法再輸入更多文字
- readonly 屬性用於表示該文字框的文字內容不可更改，僅供顯示

<input type="text" name="account" value="default account">

密碼輸入

使用 <input type="password"> 來表示一個密碼輸入框，輸入的文字會顯示成 * 符號
- maxlength 屬性用於指定文字的可輸入字元最大數量，達到最大值時使用者無法再輸入更多文字

<input type="password" name="pw">

多行文字輸入

使用 <textarea> 來表示一個多行文字輸入框
- rows 屬性用於指定文字框的預設行數高度
<textarea> 的預設值必須由標籤內容來指定，因此其並不是一種無內容標籤

<textarea name="comment" rows="5">default text</textarea>

單選選項群組（Radio Button）

使用 <input type="radio"> 來表示一個單選選項元素
- 選項的分組是由 name 屬性判斷，name 的值相同的選項會被判定為同一群組
- 以 value 屬性定義當該選項被選取時，表單所能獲得的資料
- 以 checked 屬性表示該選項在群組中預設已被選取
- 以 disabled 屬性標示該選項為禁用狀態，無法點擊並選取

<div>
  <input type="radio" name="gender" value="male" checked>男
</div>
<div>
  <input type="radio" name="gender" value="female">女
</div>

多選選項群組（Checkbox）

使用 <input type="checkbox"> 來表示一個多選選項元素
- 選項的分組是由 name 屬性判斷，name 的值相同的選項會被判定為同一群組
- 以 value 屬性定義當該選項被選取時，表單所能獲得的資料
- 以 checked 屬性表示該選項預設已被勾選
- 以 disabled 屬性標示該選項為禁用狀態，無法點擊更改勾選狀態

<div>
  <input type="checkbox" name="todos" value="homework" checked>寫作業
</div>
<div>
  <input type="checkbox" name="todos" value="shower" checked>洗澡
</div>
<div>
  <input type="checkbox" name="todos" value="sleep">睡覺
</div>

下拉式選單

使用 <select> 來定義一個下拉式選單
使用 <option> 來定義一個下拉式選單的選項，其必須是 <select> 的子節點
- 以 value 屬性來定義選項的值
- 以 selected 屬性來表示該選項為下拉式選單的預設選項

<select name="department">
  <option value ="csie">資工系</option>
  <option value ="atm" selected>大氣系</option>
</select>

日期選擇

使用 <input type="date"> 來表示一個日期選擇器元素
- 以 value 指定預設選擇日期，以 YYYY-MM-DD 的格式表示

<input type="date" name="birthday" value="1993-07-17">

作業練習

製作會員註冊單頁面

請從無到有撰寫出畫面與右圖完全相同的表單頁面，並繳交 HTML 原始碼
- 只需要且只能使用純 HTML，不可以額外撰寫任何 CSS 樣式
- 該表單設定以 POST 方法提交至 http://140.115.54.45:3000/form
- 按送出鈕時會提交表單，按清除鈕時會清空表單
- 表單資料欄位依序如下：
  - account
  - password
  - name
  - gender：male (default)、female
  - birthday
  - interest：running、sleeping、reading
  - department：csie、asm (default)
  - intro

CSS

基本概念

CSS

CSS（Cascading Style Sheets）是一種用於修飾網頁元素（DOM Element）顯示樣式的技術
以層疊為概念，一個元素的其中一種樣式屬性可能由多段 CSS 程式碼影響，但會因優先順序而最後僅一者生效
CSS 的最新版本為 CSS 3，添加許多進階的修飾與動畫相關特性

定義樣式區塊

p {
  color: red;
}

選擇器

樣式規則

CSS 作用的方式是將樣式規則與 DOM 元素連結起來，這些規則規定了指定的元素應該呈現的樣式內容：
- 選擇器：指定了樣式規則應該套用到哪個元素上，多組選擇器可以用逗號分開以將同一組樣式套用在多組元素上
- 樣式規則：指定了選擇器所指向的元素所要套用的樣式們，以屬性（Property）名與值來定義，並以分號隔開每條規則

引入外部 CSS

使用 <link> 來在 HTML 引入一個外部的 CSS 檔案
- <link> 必須放置在 <head> 的裡面
- href 屬性指定要引入的 CSS 檔案的路徑
- rel 屬性應設為 stylesheet
- type 屬性應設為 text/css

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
</html>

使用內部 CSS

使用 <style> 來直接在 HTML 中撰寫 CSS 程式碼
- 標籤內容即為 CSS 程式碼
- 標籤可以放置在 <html> 內部的任意位置，通常會放在 <head> 中

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>text</p>
  </body>
</html>

Inline Style

<p style="color: red;">text</p>

style 屬性可用於指定 inline style，直接對於該元素撰寫 CSS 樣式
所有顯示用元素都可以指定 style 屬性

樣式疊加優先權

一個元素的樣式屬性有可能同時被多段不同的樣式區塊所指定到，此時會比較樣式疊加的優先權，優先權最高者的樣式才會生效
大致上的優先權規則依序為（由高到低）：
- !important
- inline style
- id 選擇器
- class 選擇器
- 元素類型選擇器
選擇器描述並指定的越詳細，優先權也會越高
內部 CSS 優先於外部 CSS

<style>
  #pid{
    color: yellow;　
  }

  .pclass{
      color: blue;
  }

  p { 
    color: green !important;
  }

  p { 
    color: red;
  }
</style>


<p id="pid" class="pclass"  
  style="color: gray;">文字</p>

樣式繼承

元素會繼承父容器元素的樣式
元素自己有設定該屬性的樣式的話，則會覆蓋繼承的樣式
有一些屬性是非繼承屬性，不會由父元素繼承下來
- 繼承屬性大多都是文字與字體相關的屬性
- 非繼承屬性大多都是元素定位、排版等相關的屬性
瀏覽器對於某些元素會有特定的預設樣式，例如 <h1> ~ <h6> 的字體大小

<style>
  div {
    color: red;
  }

  h3 {
    color: blue;
  }
</style>


<div>
  <h3>標題</h3>
  <p>段落</p>
</div>

選擇器

元素類型選擇器

選擇符合的元素種類名稱
h1, h2, h3 {}：
- 選擇所有的 <h1>、<h2>、<h3> 元素

<style>
  h1, h2, h3 {
    color: blue;
  }
</style>


<div>
  <h1>標題1</h1>
  <h2>標題2</h2>
  <h3>標題3</h3>
</div>

id 選擇器

選擇 id 屬性值符合 # 符號後指定之值的元素
#box {}：
- 選擇 id 屬性值為 box 的元素

<style>
  #box {
    width: 100px;
  }
</style>


<div id="box">
  文字
</div>

class 選擇器

選擇 class 屬性值包含 . 符號後指定之值的元素
.item {}：
- 選擇所有 class 屬性值包含 item 的元素
p.item {}：
- 選擇所有 class 屬性值包含 item 的 <p> 元素

<style>
  .item {
    border: 1px solid blue;
  }
  
  p.item {
    color: red;
  }
</style>


<div class="item foo">item</div>
<p class="item bar">item</p>

子代選擇器

選擇緊接著下一層的子代元素，以 > 符號表示
.box>p {}：
- 選擇 class 為 box 的元素其下一層的 <p> 元素

<style>
  .box>p {
    color: red;
  }
</style>


<div class="box">
  <p>段落</p>
  <div>
    <p>段落</p>
  </div>
</div>
<p>段落</p>

子孫代選擇器

選擇子孫代（不限層數）的元素，以空白符號表示
.box p {}：
- 選擇 class 為 box 的元素其子孫代的 <p> 元素

<style>
  .box p {
    color: red;
  }
</style>


<div class="box">
  <p>段落</p>
  <div>
    <p>段落</p>
  </div>
</div>
<p>段落</p>

屬性選擇器

a[target] {}：
- 選擇有 target 屬性的 <a> 元素
a[target="_blank"] {}：
- 選擇 target 屬性的值等於 _blank 的 <a> 元素

<style>
  a[target] {
    color: red;
  }

  a[target="_blank"] {
    color: green;
  }
</style>

<a>連結1</a>
<a target="_blank">連結2</a>
<a target="_top">連結3</a>

Hover 選擇器

當元素為 hover 狀態（滑鼠指標停留）時要套用的樣式
- div:hover {}：
  - <div> 元素在 hover 狀態時

<style>
  div:hover {
    color: red;
  }
</style>

<div>文字</div>

否定選擇器

使用 :not(selector) 來反向選擇器條件
a:not([target="_blank"]) {}：
- 選擇 target 屬性的值不等於 _blank 的 <a> 元素

<style>
  a[target] {
    color: red;
  }

  a:not([target="_blank"]) {
    color: green;
  }
</style>

<a>連結1</a>
<a target="_blank">連結2</a>
<a target="_top">連結3</a>

屬性介紹

排版樣式

Box Model

padding：元素內部的間距
margin：元素外部的間距，會推開其它元素
border：元素的邊線
屬性縮寫的順序依序為：上右下左

<style>
  .box {
    padding: 10px;
    margin: 20px;
    border: 2px solid red;
    
    background-color: yellow;
    width: 100px;
  }
</style>

<div class="box">文字</div>
<div class="box">文字</div>

padding

padding 用於調整元素內部的間距，位於元素內容與邊界之間

<style>
  .box {
    padding: 10px;
    margin: 20px;
    border: 2px solid red;
    
    background-color: yellow;
    width: 100px;
  }
</style>

<div class="box">文字</div>
<div class="box">文字</div>

padding: 10px 20px 30px 40px;

上

右

左

下

margin

margin 用於調整元素外部的間距，位於元素的外部，會推開其它鄰近的元素
區塊元素如果已經有指定 width 的話，可以將 margin 的左右指定為 auto 來達到區塊水平置中的效果

<style>
  .box {
    padding: 10px;
    margin: 20px;
    border: 2px solid red;
    
    background-color: yellow;
    width: 100px;
  }
</style>

<div class="box">文字</div>
<div class="box">文字</div>

margin: 10px 20px 30px 40px;

上

右

左

下

border

border 用於設定元素的邊線，位於 margin 與 padding 之間，屬於元素總寬高的一部份

<style>
  .box {
    padding: 10px;
    margin: 20px;
    border: 2px solid red;
    
    background-color: yellow;
    width: 100px;
  }
</style>

<div class="box">文字</div>
<div class="box">文字</div>

border: 2px solid red;

邊線粗度

邊線樣式

邊線顏色

box-sizing

box-sizing 用於調整 box model 的計算方式
- content-box：元素寬高與 padding、border 分開計算
- border-box：元素寬高與 padding、border 合併計算

<style>
  .box {
    padding: 10px;
    margin: 20px;
    border: 2px solid red;
    
    box-sizing: border-box;
    
    background-color: yellow;
    width: 100px;
  }
</style>

<div class="box">文字</div>
<div class="box">文字</div>

display

display 用於調整元素的排列方式
- block：區塊元素
- inline：行內元素
- inline-block：行內區塊元素
- none：整個元素從排版視覺中被移除，但元素在 DOM 中仍存在
當 display 為 inline 或 inline-block 時，可以透過設定 vertical-align 來調整同行元素的垂直對齊方式

<style>
  .box {
    padding: 10px;
    margin: 20px;
    border: 2px solid red;
    background-color: yellow;
    width: 100px;
    
    display: inline-block;
    vertical-align: top;
  }
</style>

<div class="box">文字</div>
<div class="box">
  文字
  <div>第二行</div>
</div>

元素寬高

width 與 height 用於直接指定元素的寬高
- px 為單位：指定固定寬高
- % 為單位：指定父容器的百分比寬高
min-width 與 min-height 用於限制元素的最小寬高
max-width 與 max-height 用於限制元素的最大寬高

<style>
  .box {
    background-color: pink;
    width: 100px;
    height: 100px;
    
  }
  
  .box > .inner-box {
    background-color: orange;
    width: 60%;
    max-width: 30px;
    height: 20%;
  }
</style>

<div class="box">
  <div class="inner-box"></div>
</div>

定位方式

position

position 用於設定元素的定位方式
- static：正常流向，等同於不設定 position 屬性
- relative：相對定位
- absolute：絕對定位
- fixed：固定定位
top、bottom、left、right：
- 當 position 為 relative、absolute、fixed 其中一種時，元素的位置偏移間距
z-index：
- 當元素重疊時，顯示前後的優先權重

相對定位

相對定位（position: relative）
- 相對於原本正常流向時的位置
- 偏移間距不會導致鄰近元素被推開
- 設定相對定位還可以使該元素被標示為其子孫元素的絕對定位基準元素
- 如果沒有設定 top、bottom、left、right、z-index 的話，則元素本身與 position: static 時定位完全一樣

<style>
  #box {
    width: 200px;
    height: 200px;
    background-color: red;
  }

  #box > div {
    position: relative;
    top: 12px;
    left: 20px;

    width: 100px;
    height: 100px;
    background-color: orange;
  }
</style>

<div id="box">
  <div></div>
  <input type="text">
</div>

絕對定位

絕對定位（position: absolute）
- 使元素完全脫離正常流向的排版位置，獨立定位顯示，不再影響其他鄰近元素的排版
- 尋找父代與祖父代中層級最臨近的相對定位元素（position: relative），以其作為基準來做絕對定位
- 如果父代與祖父代中都找不到任何的相對定位元素的話，會以最上層的 <body> 元素作為基準
- 設定為絕對定位時，區塊元素的寬度不再預設自動撐滿父元素，需自行指定寬度

<style>
  #box {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px;
    /* position: relative; */
  }

  #box > div {
    background-color: orange;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 12px;
    left: 20px;
  }
</style>

<div id="box">
  <div></div>
  <input type="text">
</div>

固定定位

固定定位（position: fixed）
- 使元素完全脫離正常流向的排版位置，獨立定位顯示，不再影響其它鄰近元素的排版
- 以瀏覽器視窗範圍為基準，在顯示畫面中固定元素
- 設定為固定定位時，區塊元素的寬度不再預設自動撐滿父元素，需自行指定寬度

<style>
  body {
    height: 1000px;
  }
  
  #box {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px;
  }

  #box > div {
    background-color: orange;
    width: 100px;
    height: 100px;
    position: fixed;
    top: 12px;
    left: 20px;
  }
</style>

<div id="box">
  <div></div>
  <input type="text">
</div>

z-index

z-index 用於當定位方式而導致多個元素在顯示上重疊時，誰前誰後的優先權重
- 只有 DOM 結構中同層的元素才能互相比較權重
- 設定 z-index 的元素都必須將 position 設為 relative、absolute、fixed 其中一種，權重才會有效
- 權重相同的話，DOM 結構中放在後面的元素會顯示在上層

<style>
  #box {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 50px;
    
  }

  #box > div {
    background-color: orange;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 12px;
    left: 20px;
    z-index: 1;
  }
  
  #box > input {
    position: relative;
    z-index: 2;
  }
</style>

<div id="box">
  <div></div>
  <input type="text">
</div>

文字樣式

color

color 用於指定文字顏色
CSS 中顏色的值可以用幾種不同的格式表達：
- 顏色名：red、blue、green
- Hex：#FF0000
- rgb：rgb(255, 0, 0)
- rgba：rgba(255, 0, 0, 0.5)
- 透明：transparent

<style>
  p {
    color: rgba(255, 0, 0, 0.5);
  }
</style>

<p>段落文字</p>

font-size

font-size 用於指定文字大小
通常使用 px 為單位

<style>
  p {
    font-size: 40px;
  }
</style>

<p>段落文字</p>

font-weight

font-weight 用於指定文字字體粗細
- 可以用數字指定 100 ~ 900
- 也可以用 lighter、normal、bold

<style>
  p {
    font-weight: bold;
  }
</style>

<p>段落文字</p>

line-height

line-height 用於指定文字行高
單位為（文字行高的）倍數，可以不需要符號

<style>
  p {
    line-height: 3;
  }
</style>

<p>
  段落文字
  <br>
  段落文字
</p>

text-align

text-align 用於指定文字對齊方式
- left：文字靠左對齊
- center：文字置中
- right：文字靠右對齊

<style>
  p {
    width: 150px;
  }
  
  p.left {
    text-align: left;
  }
  
  p.center {
    text-align: center;
  }
  
  p.right {
    text-align: right;
  }
</style>

<p class="left">段落文字</p>
<p class="center">段落文字</p>
<p class="right">段落文字</p>

修飾屬性

background-color

background-color 可以指定元素的背景顏色
顏色值的形式與 color 的相同

<style>
  .box {
    background-color: #162134;
    color: #FFFFFF;
    width: 100px;
    height: 100px;
  }
  
</style>

<div class="box">文字</div>

opacity

opacity 可以指定元素的不透明度
0 為完全透明，1 為完全不透明

<style>
  .box {
    opacity: 0.5;
    background-color: #162134;
    color: #FFFFFF;
    width: 100px;
    height: 100px;
  }
  
</style>

<div class="box">文字</div>

box-shadow

box-shadow 用於在區塊元素周圍加上陰影效果

<style>
  .box {
    width: 100px;
    height: 100px;
    box-shadow: 2px 2px 3px 1px #777777;
  }
  
</style>

<div class="box">文字</div>

box-shadow: 2px 2px 3px 1px #777777;

X 偏移

模糊程度

陰影顏色

Y 偏移

陰影延伸程度

border-radius

border-radius 用於在區塊元素加上圓角效果

<style>
  .box {
    border-radius: 10px 5px 0px 20px;
    
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
  
</style>

<div class="box">文字</div>

border-radius: 10px 5px 0px 20px;

左上角

右上角

左下角

右下角

動畫樣式

transition

transition 用於設定樣式屬性的漸變動畫效果

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: orange;
    
    transition: background-color 0.5s;
  }
  
  .box:hover {
    background-color: yellow;
  }
  
</style>

<div class="box">文字</div>

transition: background-color 0.5s ease 0s;

漸變屬性

過渡時間

起始延遲時間

漸變速度曲線

漸變屬性允許設為 all，代表漸變所有屬性
漸變速度曲線與起始延遲時間可以不設定而採用預設值

Responsive Web Design

RWD（Responsive Web Design），響應式網頁設計
- 是指將網頁設計成可以在不同螢幕大小的裝置上，皆自動改變排版與元素寬度以適合的呈現
- 減少使用者進行縮放、水平捲動等不愉快的操作
- 網頁畫面在小螢幕裝置上能有夠適當的顯示比例
- 所有螢幕裝置都是讀取同一份網頁，同一份程式碼
- 主要使用 CSS Media Query 技術來達成
- 因應智慧型手持裝置的普及，變成一門非常重要的技術

適應不同解析度的裝置螢幕

各種裝置可能有不同的螢幕大小，螢幕的解析度也不盡相同，為了讓網頁能在顯示的時候自動適應恰當的比例，你應該在 HTML 原始碼的 <head> 中添加如下的 <meta> 標籤

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>

流動式佈局

如果頁面中容器元素的寬度都是設定固定的 px 的話，遇到不同螢幕大小裝置的時候可能會無法兼具良好的體驗
流動式佈局就是使用百分比為主要的容器大小，來讓各種螢幕裝置顯示時，都能夠儘可能的讓畫面不會超出螢幕的寬度，避免使用者需要水平捲動的操作
配合元素的 min-width 與 max-width 來設定邊界值

Media Query

Media Query 是 CSS 3 加入的一種特性
- 支援在 CSS 中撰寫對於裝置資訊的條件式判斷
- 最常用到的就是 min-width 和 max-width，用來判斷目前裝置的螢幕寬度是否符合條件，符合的話才使該段樣式作用

div {
  width: 100px;
  height: 100px;
  background-color: red;
}

@media screen and (min-width: 400px) and (max-width: 600px) {
  div {
    background-color: blue;
  }
}

流動式佈局與 Media Query 的配合

容器自適應
- 依據當前螢幕寬度來決定容器的寬度要如何調整
內容物排版自適應
- 依據當前螢幕寬度來決定內容項目要排版的方式

作業練習

選擇器練習

規格：
- #box 下一層的所有 <div>：yellow
- 1 ：red
- 2、3：green
- #inner-box 內部的所有 <h2>：gray
- <input>：orange
- 沒有 target 屬性的 <a>：blue
- taget 屬性值是 _self 的 <a>：pink
練習區、參考解答

定位練習

缺少了一些樣式，請補上樣式來做出如 Demo 的效果
練習區、參考解

互動與漸變練習

平時為左圖的樣子，hover 時要變成右圖的樣子
所有 hover 的樣式變化必須經過 0.5 秒的漸變
文字與背景顏色：#009688
練習區、參考解

進階排版練習

從零到有寫出以下圖片的排版
- 標題文字顏色：#467500
- 標題與日期為粗體
- 照片：http://oica.ncue.edu.tw/file/download/188db61f1632636c937ae0eab85a45e5
參考解

Media Query 練習

項目（一行要佔滿整個畫面寬的 100%）
- 畫面寬為 700px 以上時
  - 項目背景色 red
  - 一行放 8 個項目
- 畫面寬為 600px 以上且 699px 以下時
  - 項目背景色 orange
  - 一行放 6 個項目
- 畫面寬為 500px 以上且 599px 以下時
  - 項目背景色 yellow
  - 一行放 4 個項目
- 畫面寬為 400px 以上且 499px 以下時
  - 項目背景色 blue
  - 一行放 3 個項目
- 畫面寬為 399px 以下時
  - 項目背景色 purple
  - 一行放 1 個項目

外容器（#container）
- 畫面寬為 600px 以上時
  - 容器寬為 550px
- 畫面寬為 599px 以下時
  - 容器寬為 100%
項目字型大小
- 畫面寬為 550px 以上時
  - 字體為 30px
- 畫面寬為 549 以下時
  - 字體為 18px
練習區、參考解

Media Query 練習二

修改樣式使版排如 Demo 一樣
- 畫面寬為 550px 以下時
  - #ad-box 從排版中消失
- 畫面寬為 550px 以下且 400px 以上時
  - #menu 寬度改為父容器的 30%
  - #content-box 寬度改為父容器的 70% - 10px
- 畫面寬為 399px 以下時
  - #menu 寬度改為父容器的 100%，裡面的 item 變成橫著放，每個 item 之間間隔 10px
  - #content-box 寬度改為父容器的 100%
練習區、參考解

JavaScript

基礎概念

JavaScript

JavaScript，一種動態型別的直譯式程式語言。它的解釋器被稱為 JavaScript 引擎，為瀏覽器的一部分，給網頁增加動態功能。
在1995年時，由網景公司在網景領航員瀏覽器上首次設計實作而成。因為網景公司當時與開發 Java 的昇陽公司合作，網景公司希望能夠藉由 Java 的名氣推廣這個新語言，因此取名為 JavaScript。

JavaScript 主要被作為客戶端語言在使用者的瀏覽器上運行，不需要伺服器的支援。其原始碼在發往瀏覽器端執行之前不需經過編譯，而是將純文字格式發送給瀏覽器並由瀏覽器解釋執行。
在近年來網頁標準逐漸明朗，應用範圍不斷發展的情況下，使用者在網頁應用程式上的使用體驗需求也日益增高，能夠提供頁面動態效果的 JavaScript 漸漸抬頭，成為主流技術之一。

EXMAScript

ECMAScript 是 JavaScript 的語言標準規格，後者是前者的實作品
Node.js 是 ECMAScript 在伺服器端的實作品語言
ECMAScript 6 是 2015 年時正式發表的新一代版本標準，有大量新語法以及功能，又名為 ECMASript 2015
由於 ES5 與 ES6 年代相隔較遠，且改進份量重大，因此通常將之以及後面的 ES7 (ES 2016)、ES8 (ES 2017) 等統稱為 ES6+
簡言之，ES6 就是新版的 JavaScript 規格

引入 JavaScript

<script> 用於引入外部 JavaScript 程式碼
- 使用 src 屬性指定程式碼的引入路徑
- 建議放置在 <body> 的後面
<script> 也可以用於在 HTML 中直接撰寫 JavaScript 程式碼
JavaScript 程式碼會依照 <script> 標籤們的順序執行

<!DOCTYPE html>
<html>
  <body>
    <p>text</p>
  </body>

  <script src="./app.js"></script>
  <script>
    let a = 100;
  </script>
</html>

輸出

JavaScript 中使用 console.log() 函數來進行值的印出，以方便進行 debug
允許輸入任意型別的值

console.log(100);              // 輸出 "100"
console.log('abc' + 'def');    // 輸出 "abcdef"

註解

註解是程式碼中不會被執行到的文字，通常用於解釋程式碼的意義或流程，是提升程式碼可維護性很重要的手段
- 單行註解：註解文字前加上 //
- 多行註解：將註解文字以 /* */ 包起來

let a = 100; // 這是單行註解
// 這也是單行註解
let b = 200;
/* 這裡
   是
   多行的
   註解 */
let c = 300;

變數宣告與資料型別

變數與常數宣告

變數與常數用於存放資料或值
- 變數：暫時存放的值，可以事後再修改值
  - 以 let 語法宣告
- 常數：宣告時必須立即指定值，並且事後不可以再修改這個值
  - 以 const 語法宣告
var 語法：ES6 之前的舊宣告語法，有缺陷因此不要再使用

let number = 100;
console.log(number); // 100
number = 200;
console.log(number); // 200

const constantNumber = 5;
console.log(constantNumber); // 5
constantNumber = 10; // 錯誤：修改了一個常數

變數與常數的作用域

以 let 與 const 宣告的變數與常數，只會在自己宣告之處的區塊（以大括號包住的程式碼區域）內部有效

let number = 100;
if (number > 99) {
  console.log(number); // 100
  let number2 = number + 1;
  console.log(number2); // 101
}
console.log(number2); // 錯誤：number2 未被宣告

資料型別

基礎資料型別：
- 數字（Number）
- 字串（String）
- 布林值（Boolean）
- 空值（Null）
- 未定義（Undefined）

複合資料型別
- 陣列（Array）
- 物件（Object）

資料型別代表了一個程式語言處理並存放資料的各種格式，JavaScript 中的資料型別可以分為兩大類：

動態型別

JavaScript 是一個動態型別的程式語言
- 當宣告變數的時候，並不需要事先指定一個固定的型態
- 當變數中的值發生改變時，JavaScript 會依據你指定的值自動決定變數的資料型別

let foo = 42;    // foo 現在是 Number 資料型別
foo = 'bar'; // foo 現在是 String 資料型別
foo = true;  // foo 現在是 Boolean 資料型別

數字

parseInt()：傳入字串，回傳一個轉換後的整數

console.log('9527'); // "9527"
console.log(parseInt('9527')); // 9527

字串

使用單引號或是雙引號來表示字串
字串可以直接使用 + 運算符號來進行串接
當其他型別與字串的值進行 + 運算時，會自動嘗試轉換成字串後再進行串接
length 是字串的屬性值，可以取得字串目前的長度

console.log('10' + 1);  // "101"
console.log(10 + '1');  // "101"
console.log( 3 + 4 + '5' );  // "75"
console.log( 4 + 3 + '5' + 3 );  // "753"

const str1 = 'Hello World!';
const str2 = '你好';
console.log(str1.length);  //12
console.log(str2.length);  //2

布林值

布林值用於表達是與否的絕對二分法
以 true 與 false 當作值來表示
使用 ! 運算符來反轉布林值（true 變 false 或 false 變 true）
以 && 運算符表示「與」，以 || 運算符表示「或」

let isActive = true;
isActive = !isActive;
console.log(isActive);  // false

console.log(true && false);  //false
console.log(true || false);  //true
console.log(false || true);  //true

陣列

陣列是一種有序的複合式資料結構，用於存放多個值
JavaScript 是動態語言，因此一個陣列中可以存放多種不同型別的資料
宣告陣列時不需要事先指定陣列長度，會自動根據陣列項目的增減來伸縮陣列長度
以 [] 語法來表示宣告陣列或取值與賦值

let array1 = [1, 2, 'abc'];
console.log(array1);  // [1, 2, "abc"]
console.log(array1[0]); // 1
console.log(array1[2]); // "abc"

array1[0] = true;
console.log(array1);  // [true, 2, "abc"]
console.log(array1.length);  // 3

陣列

以 push 函數來將新的項目加進一個陣列的最尾端
以 concat 函數來將多個陣列合併，返回一個新陣列
以 forEach 函數來進行迴圈迭代

let array1 = [1, 2, 'abc'];
array1.push('zz');
console.log(array1);  // [1, 2, "abc", "zz"]
console.log(array1.concat([4, 5]));  // [1, 2, "abc", "zz", 4, 5]
console.log(array1);  // [1, 2, "abc", "zz"]
array1.forEach(function(value, index) {
  console.log(value);
});

物件

在 JavaScript 中，物件代表了以鍵與值所組合的無序複合式資料結構
物件中可以存放各種不同型別的資料
以 {} 語法來表示物件，以鍵與值的組合表示其屬性

const object = {
  name: 'Zet',
  email: 'test@gmail.com',
  number: 100,
  array: [1, 2, 'test']
};

console.log(object.name);  // "Zet"

流程控制

當 if 中填入的值為 true 時，判斷式成立並執行區塊中的程式，當不成立時則執行 else 區塊中的程式碼

let number = 100;
if (number > 99 && number < 101) {
  // number > 99 && number < 101 成立時執行此區塊程式碼
} else if (number == 0) {
  // number > 99 && number < 101 不成立且 number == 0 成立時，執行此區塊程式碼
} else {
  // number > 99 && number < 101 不成立且 number == 0 不成立時，執行此區塊程式碼
}

函數

函數用於程式碼的重複使用，定義參數與回傳值
在 JavaScript 中，函數可以沒有名字（匿名函數），而被當作一個值來儲存成變數，或是當作參數傳遞到另一個函數
JavaScript 的函數不需要定義參數型別與回傳型別

//普通的具名函數
function sum(a, b){
  return a + b;
}
console.log(sum(1, 2));  // 3

//匿名函式
const sum2 = function(a, b) {
  return a + b;
}
console.log(sum2(1, 2));  // 3

非同步模型

非同步與 Callback

大多數的程式語言，在遇到需要等待的事情時（例如讀取資料庫、請求 API、），通常都會一直等到結果回來之後再繼續執行下一行的程式碼
JavaScript 中會將這些需要等待的事情先放到一邊等，並交代某些當等待完成後才要做的事情，然後先繼續執行接下來的程式碼。當原來在等待的事情完成之時，再執行剛才事前交代的事情
這種以傳遞函數來事先告知等待完成後要做的事情的模式，稱為 Callback

let a = 0;
setTimeout(function() {
  a = 1;
  console.log(a); // 後被執行：1
}, 2000);
console.log(a); // 先被執行：0

作業練習

BMI 計算

以物件格式存放一個學生的身高與體重
撰寫一個傳入物件，回傳 BMI 數值的函數
程式開始執行後三秒後才執行 BMI 的計算並印出
參考解

jQuery

基本概念

jQuery

jQuery 是一套跨瀏覽器的 JavaScript 函數庫，主要用於大幅簡化 DOM 的操作，實作網頁的動態效果，為全世界最被廣泛使用的 JavaScript 函數庫
社群中有非常大量基於 jQuery 所撰寫的插件，可以提供許多套裝的動態功能
jQuery 的核心用途大致就像是：
1. 找到某個或某些 DOM Element
2. 操作它們

引用 jQuery

先引入 jQuery 的程式，再引入自行撰寫的程式檔

<!DOCTYPE html>
<html>
  <body>

  </body>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="./some-your-own-script.js"></script>
</html>

選擇器

使用 $() 函數，並傳入一段選擇器字串，返回找到的元素
支援所有的 CSS 選擇器語法，例如 id 選擇器、class 選擇器或層級選擇器等等
選擇器函數返回的為將 DOM 元素包裝了特殊屬性與方法的 jQuery 物件
jQuery 的方法都有鏈式串連的慣例，所有操作方法都會返回 jQuery 物件本身，因此可以繼續串接方法
通常將 jQuery 物件存成變數時，慣例上變數名稱都會以 $ 為開頭，以方便辨識其為 jQuery 物件
當選擇器一次選擇到了多個元素時，接下來所有操作將會對於多個元素一起操作

$('#box');
$('.box');
$('div > a:not([target])');
$('a[target="_blank"]');
$('div input').addClass('active').attr('id', 'test');

const $box = $('#box');

確保 jQuery 的 DOM 操作有效

通常我們會將操作 DOM 的 jQuery 程式碼放置在 $(document).ready() 傳入的函數中，這是為了保證你所寫的 DOM 的操作能夠在瀏覽器的排版引擎解析完 DOM 結構之後才開始執行，而正確作用

$(document).ready(function() {
  // 在此 Callback 函數中撰寫你的 jQuery 程式碼
  $('div').addClass('foo');
});

DOM 處理

遍歷操作

遍歷的相關方法讓你可以從一組元素為依據尋找其他元素
- $(selector).parent()：獲取該元素的父元素
- $(selector).children()：獲取該元素的下一層子元素
- $(selector).find()：獲取該元素的所有子孫代中符合過濾條件的元素
- $(selector).siblings()：獲取該元素的同層元素
- $(selector).next()：獲取該元素緊接著的一個後方同層元素
- $(selector).nextAll()：獲取該元素後方的所有同層元素
- $(selector).eq(n)：獲取被選取的多個元素中的第 n - 1 個元素
- $(selector).filter()：從被選取的多個元素中以選擇器過濾元素
- $(selector).not()：從被選取的多個元素中以選擇器反向過濾元素

事件處理

事件處理的相關方法可以在元素上綁定事件
- $(selector).click()：點擊
- $(selector).mouseover()：Hover
- $(selector).change()：輸入值改變
- $(selector).focus()：聚焦
- $(selector).scroll()：捲動
- $(selector).submit()：提交表單
- $(selector).unbind()：移除事件綁定
當事件處理的函數不給予一個函數當作 Callback 時，則會當作要模擬執行一次該事件操作
在傳入的函數內，可以使用 $(this) 來獲取當前觸發事件的 DOM 的 jQuery 物件

const $btn = $('#btn');
$btn.click(function() {
  console.log('clicked!');
})

$btn.click();
$btn.click();

內容與節點操作

內容與節點操作的相關方法可以讓你插拔元素或是修改元素的內部文字與結構
- $(selector).append()：在該元素內容的尾端插入內容
- $(selector).prepend()：在該元素內容的開頭插入內容
- $(selector).after()：在該元素之後插入內容
- $(selector).before()：在該元素之後插入內容
- $(selector).text()：設置或獲取該元素的文字內容（僅文字）
- $(selector).html()：設置或獲取該元素的 HTML 內容（含 HTML 標籤）
- $(selector).remove()：刪除該元素
- $(selector).empty()：刪除該元素中的所有子元素

屬性操作

屬性操作的相關方法可以讓你控制或獲取元素的元素屬性
- $(selector).addClass()：將該元素添加指定的 class
- $(selector).removeClass()：將該元素移除所有或指定的 class
- $(selector).toggleClass()：指定的 class 存在時，移除該 class，反之亦然
- $(selector).hasClass()：回傳該元素是否包含指定的 class
- $(selector).attr()：設置或獲取該元素的元素屬性
- $(selector).removeAttr()：移除該元素的指定屬性
- $(selector).val()：設置或獲取該表單元素的當前值
- $(selector).prop()：設置或獲取其值為布林值的相關屬性時使用，其餘用 attr()
- $(selector).css()：設置該元素的 inline style

AJAX

AJAX（Asynchronous JavaScript and XML）是一種在瀏覽器中讓頁面不會整個重載的情況下發送 HTTP 請求的技術
使用 AJAX 來與伺服器溝通的情況下，不會重新載入整個頁面，而只是傳遞最小的必要資料
- 可以實現對畫面的臨時部份更新，而無需重載整個畫面，大大提升使用者體驗
- 節省流量
原生的老舊 AJAX 實現標準為 XHR，設計得十分粗糙不易使用，而 jQuery 其中的 AJAX 功能是前端早期相當普及的 AJAX 封裝，使得 AJAX 使用起來容易許多

$.ajax()

$.ajax({
  url: "http://140.115.54.45:3000/form",
  type: "POST",
  data: { name: 'Zet' },
  success: function (data) {
    console.log(data);
  }
});

以 jQuery 所提供的 $.ajax() 方法來發起一個 AJAX 請求
- url：請求的目標網址
- method：請求的 HTTP 方法
- data：請求時要附帶的資料
- success：請求成功後調用的函數，會傳入返回的資料
- error：請求失敗後要調用的函數

作業練習

練習一

將 #box 設計成以下規格
- 預設背景為紅色
- 當點擊時，漸變為藍色
- 再次點擊時，漸變回紅色
- 若繼續點擊則繼續循環
練習區、參考解

練習二

當點擊複製按鈕時，將第一個 <input> 的值複製到第二個 <input> 中
練習區、參考解

練習三

三個按鈕在按下時，分別會移除自己的父 <div> 元素
練習區、參考解

練習四

製作一個可以新增與刪除項目的 Todo List
練習區、參考解

練習五

承練習三，在程式一開始時先 AJAX 獲取遠端的 todo 資料並印出
- https://api.myjson.com/bins/8j7ox
參考解

Bootstrap

Bootstrap 是一套由 Twitter 所開發並維護的 Web UI 套件庫
提供了相當多實用的元件樣式，如按鈕、下拉式選單、輪播效果...等等
動態互動效果部分是基於 jQuery 所製作的，因此使用
Bootstrap 時必須先引用 jQuery
目前穩定的版本為 Bootstrap 3，包含許多新特性的 Bootstrap 4 正在公開測試中，不久後就會正式發表
可以參考社群有人翻譯的中文版文件

引入 Bootstrap

<script src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

引入 Bootstrap 的 CSS 與 JavaScript 檔案之後就可以使用
要注意的是在 Bootstrap 的 JavaScript 引入之前要先引入 jQeury
JSBin 練習用範例

網格系統

Bootstrap 設計了一套網格排版系統，方便你進行 RWD 的各種自適應排版
- 一個容器中可以被切為 12 欄，12 欄的空間就是 100%
- 你可以使用 Bootstrap 提供的便捷網格用 class，快速的將你的版面套上流動式佈局與元素顯示適應

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
</div>

網格系統

行（row）必須包含在 .container（階層式固定寬度）或 .container-fluid（100% 螢幕寬度）中，以便自身調整或填充
用行（row）來包住一組水平的欄（column）
內容應放在 column 中，只有列 column 可以是 row 的直接子元素
column 與 row 兩者可以互相嵌套

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
</div>

網格系統

col-md-4

對應的螢幕寬度等級

佔用欄位數，12 欄為父元素寬度的 100%

Bootstrap 提供了幾種便捷的 class，讓你可以直接套用在元素上來做流動佈局排版與元素自動隱藏
.col-(xs | sm | md | lg)-(1~12)：容器佔用的 column 數量，螢幕寬度等級可以參考文件
.hidden-(xs | sm | md | lg)：對應螢幕寬度等級時，隱藏該元素
範例：http://jsbin.com/hakaqeqavu/4/edit?html,output

hidden-xs

對應的螢幕寬度等級

元件

作業練習

如 Demo 製作一個分類留言板
一進入畫面時發 AJAX 讀取留言
- 分類一：https://api.myjson.com/bins/1euwbd
- 分類二：https://api.myjson.com/bins/adf6h
用 tab 功能可以切換顯示留言分類
以 List 來顯示留言項目
按下送出留言時，在選擇的留言分類加上新留言，並清空 input，且切換到該分類的留言 Tab
螢幕 <= 400px 時，分類選擇的 select 寬改為 100%，input + button 也變成 100% （比例自行分配）
練習區、參考解

現代化 Web 前端程式設計 - 基礎篇

2,969