JavaScript 與 jQuery

第 2 章    JavaScript 與 jQuery 簡介

(1) JavaScript 簡介

∗ JavaScript 命令稿 (Script):

▸ 一系列的指令,讓電腦能一步一步的依照指示執行

▸ 每一行指令 (Statement) 以分號 (;) 結尾

▸ 再次檢視 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>');
✶ 藍色字:結束處有分號的指令
✶ 綠色字:決定是否要執行該區塊程式
✶ 紅色大括號:程式碼區塊 (Code block) 的開始及結束位置,結束大括號後面不需要分號。 將許多相關的指令集合在區塊中,有助於程式的可閱讀性

(2) 註解

∗ 註解 (Comment)

▸ 在程式中撰寫說明文字可讓程式更易於了解,註解並非程式,因此電腦不會執行

▸ 多行註解 (Multi-line comment):包含在 /**/ 之間, 可跨多行,大多用來說明整段程式的意義

▸ 單行註解 (Single-line comment):跟隨在 // 之後的文字直到行末,不跨行, 大多用來說明某程式片段

▸ 以 add-content.js 為例:所加入的紅色字為多行註解,綠色字為單行註解

/* add-content.js

   依據目前時間來顯示不同的致意文字

   作者:張三
   最後修改:2018/2/24     
*/

var today = new Date();
...

// 依據目前時間來顯示適當的致意文字
if (hourNow > 18) {
  greeting = '晚安';
}
...

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

(3) 變數

∗ 變數 (Variable) 與宣告 (Declaration)

▸ 變數代表一項資料的名稱,例如:numPages 是一個變數,變數值記錄「頁數」

▸ 變數宣告包括產生該變數並指定名稱,格式如下:

var <varName>;
✶ 例如:var numPages;

▸ JavaScript 屬直譯式語言(Interpreted language),變數可以不必宣告。但未經宣告的變數還是需要先設值然後才能讀取,否則會出現 <varName> is not defined 錯誤訊息

▸ 使用嚴格模式:在檔案第一行加入 'use strict'; 則變數必須先宣告才能使用

∗ 變數的設值 (Assigning a value)

▸ 設定一個變數的值,格式如下:

<varName> = <value>
✶ 例如:numPages = 100;

▸ 等號稱為設值運算子 (Assignment operator)

▸ 也可以在宣告變數時,一併設值,格式如下:

var <varName> = <value>;
✶ 例如:var numPages = 100;

∗ 基本資料型態 (Basic data type)

▸ 字串 (String) 資料型態:一連串的字元 (Characters),例如:

studentName = '張三';

▸ 數值 (Numeric) 資料型態:整數 (Integer)、浮點數 (Floating point number),例如:

numBookings = 60;
interestRate = 0.02;

▸ 布林 (Boolean) 資料型態:只有真 (true) 與假 (false) 兩個值,例如:

rentPaid = true;
rentPaid = false;

∗ 字串變數

▸ 宣告並設定字串變數,例如

var deptName = '資訊管理系';

▸ 更改變數值:設定為其他值

deptName = '資訊工程系';

▸ 練習:

✶ 建立第 2 章的目錄架構:
javaScript/
   ...
   ch2/
      css/
      img/
      js/
✶ 下載 assets2.zip, 解壓縮後將 ch2.css 置於 ch2/css/ 目錄中, 其餘影像均置於 ch2/img/ 目錄中
✶ 建立 ch2/string-variable.html
<!doctype html>
<html>
<head>
<title>Numeric Variable</title>
<meta charset=utf-8>
<link rel=stylesheet href=css/ch2.css>
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<div id="title">您好 <span id=name>我們的好朋友</span>!</div>
<div id="note">歡迎蒞臨...</div>
</div>
<script src="js/string-variable.js"></script>
</body>
</html>
✶ 建立 ch2/js/string-variable.js
var username = '親愛的顧客';
var message = '歡迎看看我們最新推出的系列';

var elName = document.getElementById('name');
elName.textContent = username;
var elNote = document.getElementById('note');
elNote.textContent = message;
# 利用 document.getElementById(...) 擷取特定 id 的 HTML 元素
# 利用 .textContent = ... 方法來設定元素的文字內容

▸ 單引號或雙引號

✶ JavaScript 的字串可使用單引號 (') 或雙引號 (") 包含,但單引號較簡單、較常用
✶ 字串本身有單引號或雙引號,則可分別使用雙引號或單引號包含,例如:
message = 'The book called "Learning JavaScript" is my favorite.';
message = "It's popular to use JavaScript to create effects in a web page.";

▸ 連結字串

✶ 使用 + 號連結字串,例如:
var username = 'Mark';
alert('謝謝您, ' + username + '先生/小姐!'); 

▸ 練習:

✶ 建立 ch2/string-with-quotes.html
...
<body>
<h1>Elderflower</h1>
<div id="conten"t>
<div id="title">特價</div>
<div id="note">請註冊以便收到最符合您需求的價格</div>
</div>
<script src="js/string-with-quotes.js"></script>
...
✶ 建立 ch2/js/string-with-quotes.js
var title = '特殊顧客的特殊價格';
var message = '<a href="sale.html">75折!</a>';

var elTitle = document.getElementById('title');
elTitle.textContent = title;
var elNote = document.getElementById('note');
elNote.innerHTML = message;
# 利用 getElementById(...) 找到元素,並利用.textContent = ... 設定文字內容
# innerHTML:加入 HTML code (.textContent 僅能設定文字,不能設定 HTML code)

∗ 數值變數

▸ 設定數值變數,例如:

var numBookings = 22;

▸ 練習:

✶ 建立 ch2/numeric-variable.html
...
<body>
<h1></h1>
<div id=content>
<h2></h2>
<p>售價: 每個拼磚 $5</p>
<div id="cost"></div>
<img src=img/preview.jpg alt=Sign>
</div>
<script src="js/numeric-variable.js"></script>
...
✶ 建立 ch2/js/numeric-variable.js
var price = 50;
var quantity = 14;
var total = price * quantity;

var el = document.getElementById('cost');
el.textContent = '小計:$ ' + total;
# 宣告並設定三個變數的值:price, quantity, total
# 利用 document.getElementById('cost') 擷取 idcost 的 HTML 元素,即 <div id="cost"></div>
# 利用 .textContent = ... 方法來設定元素的文字內容
# JavaScript 語言中,字串與數值相加時,會先將數值轉為字串,然後再連結兩個字串 (稍後於「變數的資料型態」進一步說明)

∗ 布林變數

▸ 設定布林變數,例如

var acceptCreditCards = true;

▸ 練習:

✶ 建立 ch2/boolean-variable.html
...
<body>
<h1>Elderflower</h1>
<div id="content">
<div class="message">庫存:<span id="stock"></span></div>
<div class="message">送貨:<span id="shipping"></span></div>
</div>
<script src="js/boolean-variable.js"></script>
...
# <span id=...></span>: 加入 <span>元素讓 JavaScript 擷取此元素進行設定
✶ 建立 ch2/js/boolean-variable.js
var inStock = true;
var shipping = false;

var elStock = document.getElementById('stock');
elStock.className = inStock;
var elShip = document.getElementById('shipping');
elShip.className = shipping;
# 利用getElementById() 找到 <span> 元素, 並利用 .className = ... 設定該元素的類別
✶ 在 ch2/css/ch2.css 裡已有 .message.true、與 .false 類別的樣式設定
...
.true, .false {
  background: url("../img/tick-cross.png");
  display: block;
  float:right;
  height: 25px;
  width: 25px;}

.false {
  background-position: 0 -25px;} 

.message {
  font-weight: bold;
  line-height: 1.5em;
  height: 2em;
  display: block;
  clear: left;
  min-width: 10em;}

.message span { 
  font-weight: normal;}
...
# background: ...:背景圖為 tick-cross.png
# display: block:以區塊方式呈現
# float: right:往右流動,使圖形顯示在右方
# background-position: 0 -25px:圖形位置往上,以顯示x符號

∗ 宣告變數的方式

▸ 宣告並同時設值,例如:

var price = 5;
var quantity = 14;
var total = price*quantity;

▸ 一次宣告多個變數:

var price, quantity, total;
price = 5;
quantity = 14;
total = price*quantity;

▸ 一次宣告多個變數並同時設值:

var price=5, quantity=14;
var total = price*quantity;

∗ 變數的命名原則:變數名稱

▸ 必須以英文字母、錢號 ($)、或底線 (_) 開始

▸ 可包含英文字母、數字、錢號、或底線

▸ 不能使用關鍵字 (Keywords) 或保留字 (Reserved),如下:

abstractarguments booleanbreakbyte
casecatchcharclassconst
continuedebuggerdefaultdeletedo
doubleelseenumevalexport
extendsfalsefinalfinallyfloat
forfunctiongotoifimplements
importininstanceofintinterface
letlongnativenewnull
packageprivateprotectedpublicreturn
shortstaticsuperswitchsynchronized
thisthrowthrowstransienttrue
trytypeofvarvoidvolatile
whilewithyield

▸ 英文字母大小寫不同 (Case-sensitive),例如:scoreScore 是不同的

▸ 應使用有意義的變數名稱,例如:姓 lastName

▸ 使用駝峰式命名法(Camel-style):第一個英文字的第一個字母小寫,之後的英文字的第一個字母大寫,例如:numBookings, className

(4) 變數的資料型態

∗ 資料型態 (Data types)

▸ 說明變數所儲存資料的型態 (整數、浮點數、字串、布林、物件、...)

∗ 靜態型別與動態型別程式語言

▸ 靜態型別 (Static typing):變數要先宣告,宣告時需要指定變數的資料型態,且該型態不會改變,例如:Java, C, ...

✶ 例如 Java 語言:
int x;
x = 'abcd';   // Compile error 

▸ 動態型別 (Dynamic typing):變數不需要先宣告,變數的資料型態隨時可改變,例如:JavaScript, Python, PHP, ...

✶ 例如 JavaScript:
x = 3;
x = 'abcd';   // OK

▸ 變數與記憶體

✶ 靜態型別語言的變數與記憶體是位置的關係,每個變數有固定的儲存空間,在宣告時決定,因此資料型態無法改變,例如:
int width = 20;
int height = 30;
boolean isWall = true;
boolean canPaint = true;
java
✶ 動態型別語言,變數與記憶體是指標的關係,每個變數會參考 (Reference) 記憶體裡的一個值,多個變數可以參考同一值,例如:
var width = 20;
var height = 30;
var isWall = true;
var canPaint = true;
javaScript

▸ 強型別與弱型別

✶ 強型別 (Strong typing):運算子期待變數應有資料型別,若使用其他型別會造成錯誤,例如 Java:
int x;
x = 20 + 'abcd';  // Compile error
✶ 弱型別 (Weak typing):運算子期待變數應有資料型別,若使用其他型別可能不會造成錯誤,例如 JavaScript:
x = 20 + 'abcd';  // x: '20abcd'

▸ 型態強迫轉換(Type coercion)

✶ 如果我們使用了 JavaScript 並不期待的資料型態,JavaScript 會嘗試解決型態問題,而不是直接發生發佈錯誤訊息, 亦即 JavaScript 會在幕後進行資料型態轉換,稱為型態強迫轉換 (Type coercion),例如:if ('1' > 0), 字串 '1' 會轉換為數值 1 然後進行比較,最後得到真值

(5) 陣列

∗ 陣列 (Array)

▸ 用來儲存彼此相關的一串資料

∗ 不使用陣列:

var city0 = '台北市';
var city1 = '新北市';
var city2 = '台中市';
var city3 = '台南市';
var city4 = '高雄市';

∗ 使用陣列 (以方括號包含):

var cities = ['台北市', '新北市', '台中市', '台南市', '高雄市'];

var cities = new Array('台北市', '新北市', '台中市', '台南市', '高雄市');

▸ 以 var <arrayName> = [...]; 方式建立陣列稱為 Array literal (依字面建立陣列)

▸ 以 var <arrayName> = new Array(...); 方式建立陣列稱為 Array constructor (依建構子建立陣列)

▸ 陣列變數名稱大多使用複數

▸ 陣列元素索引 (Index) 從 0 開始

▸ 陣列元素可以有不同的資料型態

var mixedData = [26, '學生', 2, '教師'];

∗ 增加或修改陣列元素

var pets = [];    // 宣告一個空陣列
pets[2] = '蜥蜴'
pets[3] = '蛇';
alert(pets[0]);    // 未定義:undefined
alert(pets[2]);    // 蜥蜴

▸ 增加元素:

pets[4] = '狗';    // 原先元素僅有 4 個,增加第 5 個

▸ 修改已存在之元素:

pets[3] = '貓';    // 修改第 4 個元素

▸ 設定未定義之元素:

pets[0] = '鳥';    // 設定未定義之第 0 個元素
pets[1] = '魚';    // 設定未定義之第 1 個元素

∗ 在陣列頭尾增加或刪除元素

▸ 刪除第一個元素:shift()

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
pets.shift();
alert(pets);    //  魚,蜥蜴,蛇,狗

▸ 在陣列開頭增加元素:unshift()

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
pets.unshift('兔子');
alert(pets);    // 兔子,鳥,魚,蜥蜴,蛇,狗
pets.unshift('烏龜', '布丁鼠');
alert(pets);    // 烏龜,布丁鼠,兔子,鳥,魚,蜥蜴,蛇,狗

▸ 刪除最後一個元素:pop()

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
var pet = pets.pop();
alert(pets);    // 鳥,魚,蜥蜴,蛇
alert(pet);    // 狗

▸ 在陣列結尾增加元素:push()

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
pets.push('兔子');
pets.push('烏龜', '布丁鼠');
alert(pets);    // 鳥,魚,蜥蜴,蛇,狗,兔子,烏龜,布丁鼠

∗ 在陣列中插入或刪除元素

▸ 在陣列中插入一個或多個元素 (「拼接」): splice(<startIndex>, <numElemToRemove>, <elements>)

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
pets.splice(2, 0, '烏龜');    // 在位置 2 刪除 0 個元素 ,插入'烏龜'
alert(pets)     // 鳥,魚,烏龜,蜥蜴,蛇,狗

▸ 在陣列中刪除某元素:splice(<startIndex>, <numElemToRemove>)

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
pets.splice(2, 1);
alert(pets)     // 鳥,魚,蛇,狗
var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
pets.splice(2, 2);
alert(pets)     // 鳥,魚,狗

▸ 在陣列中同時刪除及插入元素

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
pets.splice(1, 2, '貓', '鴨');  // 在位置1刪除2個元素,插入'貓', '鴨'
alert(pets)     // 鳥,貓,鴨,蛇,狗

∗ 串接兩個陣列:concat()

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
var morePets = ['烏龜', '布丁鼠'];
var allPets = pets.concat(morePets);
alert(allPets);    //  鳥,魚,蜥蜴,蛇,狗,烏龜,布丁鼠

∗ 陣列切片:slice(<startIndex>, <endIndexPlusOne>)

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
var somePets = pets.slice(1, 3)
alert(somePets);    // 魚, 蜥蜴

∗ 陣列長度:.length

var pets = ['鳥', '魚', '蜥蜴', '蛇', '狗'];
alert(pets.length);

∗ 練習

▸ 建立 ch2/array-literal.html

...
<body>
<h1>Elderflower</h1>
<div id="content">
<div class="message">Color: <span id=colors>找不到您選擇的顏色,請再試一次...</span></div>
</div>
<script src="js/array-literal.js"></script>
...

▸ 建立 ch2/js/array-literal.js

var colors = ['white', 'black', 'custom'];

var el = document.getElementById('colors');
el.textContent = colors[0];

▸ 建立 ch2/array-constructor.html

...
<body>
<h1>Elderflower</h1>
<div id="content">
<div class="message">Color: <span id=colors>找不到您選擇的顏色,請再試一次...</span></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/array-constructor.js"></script>
...

▸ 建立 ch2/js/array-constructor.js

var colors = new Array('white', 'black', 'custom');

var el = document.getElementById('colors');
el.textContent = colors[0];

(6) 表示式

∗ 表示式 (Expression):計算後可以得到一個結果值

▸ 大致可分為兩種表示式:

✶ 為單一變數設值的表示式,例如:
var color = 'blue';
✶ 多個值經過計算後回覆單一值,例如:
var area = 30*20;

∗ 運算子 (Operator)

▸ 表示式裡會透過運算子來進行計算

▸ 常見的運算子:

✶ 設值運算子 (Assignment operator):設定一個變數值,以等號 (=) 表示,例如:
color = 'blue';
✶ 算術運算子 (Arithmetic operator):進行算術運算,例如:
運算子名稱範例
+相加10 + 515
-相減10 - 55
*相乘10 * 550
/相除10 / 52
++加 1a = 10; a++;11
--減 1a = 10; a--;9
%餘數10 % 31
✶ 字串運算子 (String operator),進行字串連接 (Concatenation),以加號 (+) 表示,例如:
var firstName = 'Ivy ';
var lastName = 'Stone';
var fullName = firstName + lastName;    // --> 'Ivy Stone'
# 文字字串與數字相加,JavaScript會自動將數字改為文字:
var cost1 = 70;
var cost2 = '90';
var cost = cost1 + cost2;   // --> '7090'
# 對字串進行算術運算會得到非數字之值(NaN, not a number),例如:
var unitPrice = 'senventy';
var quantity = 'three';
var price = quantity * unitPrice;   // --> NaN
alert(price);

∗ 練習

▸ 建立 ch2/arithmetic-operator.html

...
<body>
<h1>Elderflower</h1>
<div id="content">
<div class="message number">Subtotal: $<span id=subtotal> </span></div>
<div class="message number">Shipping: $<span id=shipping> </span></div>
<div class="message number">Total: $<span id=total> </span></div>
</div>
<script src="js/arithmetic-operator.js"></script>
...

▸ 建立 ch2/js/arithmetic-operator.js

var subtotal = (13 + 1) * 5;
var shipping = 0.5 * (13 + 1);
var total = subtotal + shipping;

var el = document.getElementById('subtotal');
el.textContent = subtotal;
var el = document.getElementById('shipping');
el.textContent = shipping;
var el = document.getElementById('total');
el.textContent = total;

▸ 在 ch2/css/ch2.css 裡已有

.number {
    text-align: left;}

∗ 練習

▸ 建立 ch2/string-operator.html

...
<body>
<h1>Elderflower</h1>
<div id="content">
<div id="greeting" class="message">Hello <span id=name>friend</span>!</div>
</div>
<script src="js/string-operator.js"></script>
...

▸ 建立 ch2/js/string-operator.js

var greeting = 'Howdy ';
var name = 'Molly';

var welcomeMessage = greeting + name + '!';
var el = document.getElementById('greeting');
el.textContent = welcomeMessage;

∗ 作業 1

(7) jQuery 簡介

∗ jQuery

▸ jQuery 是一個 JavaScript 檔案,內含許多函式,因此是一個函式庫 (Library)

▸ 與傳統 DOM 查詢一樣,但 jQuery 的語法較簡潔,提供的函式更多、功能更強

▸ jQuery 利用 CSS 樣式搜尋網頁元素,再利用 jQuery 函式進一步處理

✶ 例1:選擇 <li class="hot"> 元素 → 以'li.hot'為搜尋字串
jQuery('li.hot');
✶ 例2:選擇後利用函式 .addClass() 新增 CSS 類別
jQuery('li.hot').addClass('complete');
結果:<li class="hot complete">

jQuery 可以 $ 符號代替,例如:$('li.hot');

▸ 常用指令:

var $element = $('#theId');          # 取得 id 為 'theId' 的 HTML 元素
var $element = $('.theClass');       # 取得 class 為 'theClass' 的 HTML 元素
var content = $('#theId').html();    # 回覆元素的 HTML 內容
$('#theId').html('The content');     # 設定元素的 HTML 內容
✶ 習慣上,會在 jQuery 物件變數前加上 $ 號,以標明其為 jQuery 物件

∗ 兩種方式匯入 jQuery

(1) 下載檔案:下載 jquery-x.x.x.min.js 並置於 js 目錄中,然後建立連結:

<script src="js/jquery-x.x.x.min.js"></script>
x.x.x:版本 (2.x.x 版不支援 IE<=8)
*.min.js:縮小板 (Minified),空白及回車字元全部刪除 (一般版約 250KB,縮小版約 9KB)
✶ 優點:不需依賴其他伺服器

(2) 透過 CDN (Content delivery network) 連結 (建議使用此方式):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
✶ 優點:使用者的瀏覽器非常可能已有 jQuery,因此完全不需要下載
✶ Google jQuery 版本資訊: https://developers.google.com/speed/libraries/devguide#jquery

∗ jQuery 的優點 (相對於純 JavaScript)

▸ jQuery 所有的功能都能以純 JavaScript 完成,但 jQuery 使程式設計更簡單,口號:Write less, do more.

▸ 簡單的選擇器

✶ 使用前端工程師們早已熟悉的 CSS 選擇模式,語法較簡潔
✶ 選擇速度更快,且正確率提高

▸ 程式碼大幅減少

✶ 處理器可以一次應用在所有選擇到的元素,無需撰寫迴圈個別處理
✶ DOM tree 處理效率高:加入或移除元素、處理事件、淡入淡出、處理 Ajax 請求等都更為方便
✶ 方便的 DOM 選擇器與鏈式語法,例如:
$('p.surprise').addClass('ohmy').show('slow');

▸ 跨瀏覽器,無需針對不同瀏覽器撰寫不同程式,亦無需撰寫倒退程式

✶ jQuery 有特色偵查 (Feature detection),自動選擇適當的程式

▸ 提供更多、功能更強的函式

∗ jQuery 與 JavaScript 比較範例

fadeIn.html

<!doctype html>
<html>
<head>
</head>
<body>
<ul>
  <li>第 1 項</li>
  <li>第 2 項</li>
  <li>第 3 項</li>
  <li>第 4 項</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/fadeIn.js"></script>
</body>
</html>

▸ 功能:先隱藏前三個 </li> 元素,然後在 2 秒內淡入

✶ jQuery fadeIn.js (1 行):
$('li:lt(3)').hide().fadeIn(2000);
✶ JavaScript fadeIn.js (近 20 行):
lis = document.getElementsByTagName('li');
for (i=0; i<3; i++) {
  lis[i].style.display = 'none';
}

for (i=0; i<3; i++) {
  fadeIn(lis[i]);
}

// fade in
function fadeIn(el, display){
  el.style.opacity = 0;
  el.style.display = display || "block";
  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .01) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}

∗ 再訪先前的練習

▸ String variable:將 string-variable.html如下修改,並另存新檔為 string-variable2.html

...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/string-variable2.js"></script>
</body>
</html>
string-variable2.js
$(document).ready(function() {

  var username = '親愛的顧客';
  var message = '歡迎看看我們最新推出的系列';

  $('#name').html(username);
  $('#note').html(message);

});
document:JavaScript 的文件物件 (Document object)
$(document):jQuery 的文件物件
.ready(...):呼叫 jQuery 文件物件的方法,在文件就緒 (Ready,所有 HTML 元素均載入完畢) 後,執行 ready() 函式
function() { ... }:匿名函式 (稍後第 3 章說明)

▸ String with quotes:將 string-with-quotes.html 如下修改,並另存新檔為 string-with-quotes2.html

...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/string-with-quotes2.js"></script>
</body>
</html>
string-with-quotes2.js
$(document).ready(function() {

  var title = '特殊顧客的特殊價格';
  var message = '<a href=\"sale.html\">75折!</a>';

  $('#title').html(title);
  $('#note').html(message);

});

▸ Numeric variable:將 numeric-variable.html 如下修改,並另存新檔為 numeric-variable2.html

...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/numeric-variable2.js"></script>
</body>
</html>
numeric-variable2.js
$(document).ready(function() {

  var price = 50;
  var quantity = 14;
  var total = price*quantity;

  $('#cost').html('小計:$ ' + total);

});
$('#cost').html('小計:$ ' + total):擷取 idcost 的 HTML 元素, 然後設定其 HTML 內容,JavaScript 在頁面尋找元素的模式和 CSS 相同,兩者相容因此廣受歡迎

▸ Boolean variable:將 boolean-variable.html 如下修改,並另存新檔為 boolean-variable2.html

...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/boolean-variable2.js"></script>
</body>
</html>
boolean-variable2.js
$(document).ready(function() {

  var inStock = 'true';
  var shipping = 'false';

  $('#stock').addClass(inStock);
  $('#shipping').addClass(shipping);

});
$(...).addClass(...):加入 CSS 類別

▸ Array literal:將 array-literal.html 如下修改,並另存新檔為 array-literal2.html

...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/array-literal2.js"></script>
</body>
</html>
array-literal2.js
$(document).ready(function() {

  var colors = ['white', 'black', 'custom'];

  $('#colors').html(colors[0]);

});

▸ Array constructor:將 array-constructor.html 如下修改,並另存新檔為 array-constructor2.html

...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/array-constructor2.js"></script>
</body>
</html>
array-constructor2.js
$(document).ready(function() {

  var colors = new Array('white', 'black', 'custom');

  $('#colors').html(colors[0]);

});

▸ Arithmetic operator:將 arithmetic-operator.html 如下修改,並另存新檔為 arithmetic-operator2.html

...
</body>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/arithmetic-operator2.js"></script>
...
arithmetic-operator2.js
$(document).ready(function() {

  var subtotal = (13 + 1) * 5;
  var shipping = 0.5 * (13 + 1);
  var total = subtotal + shipping;

  $('#subtotal').html(subtotal);
  $('#shipping').html(shipping);
  $('#total').html(total);

}); 

▸ String operator:將 string-operator.html 如下修改,並另存新檔為 string-operator2.html

...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/string-operator2.js"></script>
...
string-operator2.js
$(document).ready(function() {
 
  var greeting = 'Howdy ';
  var name = 'Molly';
  var welcomeMessage = greeting + name + '!';

  $('#greeting').html(welcomeMessage);

});

上一章       下一章