05. JavaScript and DOM

Download Report

Transcript 05. JavaScript and DOM 

JavaScript 基礎
IDIC
網頁開發技術架構圖
Client
Web Server
Database Server
HTTP
Protocol
Apache
HTTP Server
Browser
HTML
CSS
JavaScript
HTML DOM
AJAX
(JSON)
PHP
MySQL API
(SQL)
MySQL
Database
JavaScript 介紹
• 前端程式語言，用於瀏覽器端(Client)的程式語言
• 常用在解決在網頁的動態效果、表單元件、互動元件、簡易的
邏輯判斷等問題
• 由於 JavaScript 在瀏覽器端執行，因此有許多特性是後端程式語
言所沒有的，有二個主要特色
• 事件(Event)
• 前端程式語言可以偵測使用的動作
• 如: 滑鼠移動、點選、鍵盤輸入…等
• 能夠立即回應使用者的動作
• 達到即時驗證資料、互動的效果
• 動態操作網頁內容 (透過 DOM)
• 通常網頁是利用靜態 HTML 所呈現
• 可以結合事件即時更新部份網頁內容
• 後端程式語言只能以整頁重新整理的方式更新
• 速度相對較慢，使用的伺服器資源也較高
與 PHP 的語法差異
• JavaScript 的變數不需要以 $ 字號開頭
在網頁中使用 JavaScript
• 使用 <SCRIPT> 標籤
• <SCRIPT type="text/javascript">
• ...some JavaScript...
• </SCRIPT>
• type 用來指定 SCRIPT 的類型
• 目前有 VBScript 及 JavaScript 兩種
• 可以放在 <HEAD> 或 <BODY> 中
• JavaScript 執行的順序會依放置的位置由上到下執行
• 因此放在 <HEAD> 中的 JavaScript 會最先執行
• 也可以透過外部載入方式
• <SCRIPT type="text/javascript" src="external.js"></SCRIPT>
第一個 JavaScript 程式
• <script type=“text/javascript”>
• alert(“Hello world”);
•
•
•
•
•
</script>
JavaScript 程式要放在 <script> 當中
JavaScript 需以分號結尾
圓括號內的資料為 alert 的參數(Argument)
alert 會以對話窗的方式跳出訊息, 提示使用者
變數宣告及基本型態
• 在 JavaScript 中為了設計者撰寫方便不需特別宣告變數型
態，但寫法上仍有差異
• 數值
• var a = 100;
• 布林 (只有是或否 true/false)
• var b = true; // 只可以有 true 或 false, 無需雙引號
• 字串
• var c = “文字”; // 必須要有雙引號
陣列
• 陣列宣告
• var myCars=new Array("Saab","Volvo","BMW");
• var myCars=new Array();
• 陣列的使用
• 置入資料
• myCars.push(“TOYOTA”);
• 取出資料
• myCars.pop(); // TOYOTA
• 指定索引
• myCars[0]="Saab";
• myCars[1]="Volvo";
• myCars[2]="BMW";
算數運算子
• 程式語言提供運算的功能，需要使用到一些運算的符號，如: + */
• 我們稱以上的符號為算數運算子 x=7, y=5
算數運算子
描述
範例
結果
加
+
x=y+2
x=7
減
- • 以 y=5 為例，以下為使用各算數運算子的結果
x=y-2
x=3
乘
*
x=y*2
x=10
除
/
x=y/2
x=2.5
y=5
y=5
y=5
y=5
%
餘數
x=y%2
x=1
y=5
++
遞加
--
遞減
x=++y
x=y++
x=--y
x=y--
x=6
x=5
x=4
x=5
y=6
y=6
y=4
y=4
比較運算子
X=5
運算子
==
說明
等於
!=
完全等於 (同時比較變數型態與
值)
不等於
>
大於
<
小於
>=
大於等於
<=
小於等於
===
範例
x==8 為 false
x==5 為 true
x===5 為 true
x===“5” 為 false
x!=8 為 true
x>8 為 false
x<8 為 true
x>=8 為 false
x<=8 為 true
條件敘述句 If … else
• 格式
• if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}
練習
• 計算 BMI
• 以變數儲存 體重與身高
• 以 alert() 函數提示目前的 BMI分級
條件敘述句 Switch
• 格式
• switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
迴圈敘述句 For
• 迴圈的功能用來重複執行某段程式
• 例如: 顯示數字 1 到 10
• 格式
• for (var=初值;var<=終值;var=var+漸進值)
{
code to be executed
}
• 範例
• var i;
for (i=0; i<=10; i=i+1)
{
alert(“Current number is: “ + i);
}
迴圈敘述句 While
• 以條件式做為判斷是否執行的迴圈
• 格式
• while (condition)
{
code to be executed
}
• 範例: 1 到 100 的加總
• var i = 0;
var total = 0;
while(i<=100) {
total = total + i;
}
函數(Function)
• 在數學中函數可以代表一個公式，在程式中函數可以代表
一個程式的功能
• 函數的定義, 格式如下:
• function functionname(var1,var2,...,varX)
{
some code
}
• 函數可將相同功能的一段程式一起處理
• 函數可讓一段程式重複使用, 而不需寫重複的程式
• 函數可以讓程式易於閱讀, 有架構
函數的定義
• 在數學中函數(Function)可以代表一個公式，在程式中函數
可以代表一個程式的功能
• 函數的定義, 格式如下:
• function functionname(var1,var2,...,varX)
{
some code
}
•
•
•
•
函數可將相同功能的一段程式一起處理
函數可讓一段程式重複使用, 而不需寫重複的程式
函數可以讓程式易於閱讀, 有架構
alert() 即是一 JavaScript 內建的函數
函數的使用
• 函數的呼叫(Call)
• functionname(var1,var2);
• var1,var2 為 functionname 所需要的參數以逗號(,)相隔
• functionname 函數執行完的結果會存到 a 變數
• 練習
• 將上次的 BMI 作業方到函數當中並且執行
Javascript 除錯
• Javascript 是在瀏覽器執行的，所以瀏覽器都會提供一些除
錯工具。以 Google Chrome 為例它提供的開發者工作如下
圖，可使用快速鍵 f12 叫出來。
• 所有在網頁上呈現的元素，都可以透過此工具做即時的修
改。
Elements Panel
• 可檢視目前檢視網頁的 HTML, CSS
• 可以動態的做內容修改
• 修改的內容是無法儲存的，重新整理後就會消失
• 方便開發者即時檢視修改的結果。
Console Panel
• 可提供開發者直接執行 Javascript ，以方便做簡易測試與
除錯
JAVASCRIPT 事件
事件
• 在程式設計中事件(Events)是用來偵測使用者做的動作，以
便做出相對應的結果
• 藉由事件的功能可以設計一個可以與使用者互動的程式
• 例: 當滑鼠移到圖片時顯示 “您好”
常用的事件類型
 不同的 HTML 標籤可以使用的事件類型也有所不同
 以下為幾個常見且通用的事件類型
屬性
onchange
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
事件發生的時刻
當元件內容改變 textbox, select
當滑鼠點擊 button
當滑鼠雙擊
當按鍵按下
當按鍵按住或放開
當按鍵放開
當頁面或圖片載入完畢
當按下滑鼠鍵
當滑鼠移動
當滑鼠移出元素
當滑鼠經過元素
當放開滑鼠鍵
IE
3
3
4
3
3
3
3
4
3
4
3
4
F
1
1
1
1
1
1
1
1
1
1
1
1
O W3C
9 Yes
9 Yes
9 Yes
No Yes
9 Yes
9 Yes
9 Yes
9 Yes
9 Yes
9 Yes
9 Yes
9 Yes
onclick 事件範例
<!DOCTYPE html>
<html>
<body>
<script>
//改變顏色，傳入執行的html 物件(h1Obj), 自訂訊息字串 (msg)
function changeColor(h1Obj, msg)
{
h1Obj.style.color=“blue";
console.log(event);
console.log(msg);
}
執行結果
</script>
Mouse over this text
<h1 onclick=“changeColor(this, ‘hello’);“>
Mouse over this text</h1>
</body>
</html>
onclick
Mouse over this text
Mouse 事件範例
<!DOCTYPE html>
<html>
<body>
<script>
//改變顏色，傳入執行的html 物件(h1Obj), 自訂訊息字串 (msg)
function changeColor(h1Obj, msg)
{
if(event.ctrlKey)
{
h1Obj.style.color=“blue";
執行結果
}
console.log(event);
console.log(msg);
}
</script>
<h1 onmouseover="changeColor(this, ‘hello’);“>
Mouse over this text</h1>
</body>
</html>
Mouse over this text
onmouseover
+
ctrlkey
Mouse over this text
事件的使用
• 事件的使用可以透過 HTML 屬性來設定
• <button type="button" onclick="displayDate()">Display
Date</button>
• onclick 為事件的類型
• displayDate() 為當 onclick 事件發生時要執行的 JavaScript 函數
練習
• 在網頁上放置一個表單按鈕, 並在按鈕按下時計算 BMI, 利
用前面作業所做的 BMI 計算函數
JavaScript 物件
• 在程式語言中，物件用來將相同類型的函數(Function)放在
一起，讓結構分明
• 例如: 在賽車遊戲中的車子，我們會在程式中宣告一個 Car
物件來代表車子，車子要移動，我們會在 Car 物件裡宣告
一個 move() 函數來撰寫相關的程式
• 在 JavaScript 中要執行物件中的函數透過點 .
• 例如: Car.move();
• JavaScript 中所提供預設的函數都存放在物件當中
JavaScript 提供的基本物件
• Array object
• 陣列處理
• Boolean object
• 布林值處理
• Date object
• 日期/時間處理
• Math object
• 算數處理
• Number object
• 數值處理
• String object
• 字串處理
• RegExp object
• 正規表式法
注意事項
• 計算必須以函數的方式撰寫
• 計算的結果必須使用 DOM 的方式更新到頁面
零存整付
• 每個月皆固定存入一定金額的本金，然後將本月的本金加
利息滾入下個月的本金。於到期後本金連同加計之複利利
息一併領回。
計算公式
• 𝑎=𝑃×
•
•
•
•
𝑛
𝑖=1
1 + 𝑟/12
𝑖
𝑎 為本利合
𝑃 為每月存入總金額
𝑟 為年利率
𝑛 期間(月)
• 每月存入金額為 1000 年利率為 10% 期間 12 月的本利合為
12670
存本取息
• 指事先約定存款年限及金額，在期初將本金(不得小於新台
幣一萬元)一次存入，可按月領回存款利息，於期末領回本
金。
計算公式
• 𝑚𝑖 =
𝑃×𝑖
12
• 𝑚𝑖 為每月可領取利息
• 𝑃 為存入總金額
• 𝑖 為年利率
• 𝑎 = 𝑃 + 𝑚𝑖 × 𝑛
• 𝑎 為本利合
• 𝑚𝑖 為每月可領取利息
• 𝑛 期間(月)
• 存入金額為 10000 年利率為 12% 每月可領取利息 100 期間
24 月的本利合為 12400
按月本息平均攤還
• 貸款期間內全部貸款本金與利息平均分攤於每一期中償付。
計算公式
• 𝑎 =𝑃× 1+
•
•
•
•
𝑖 𝑛
12
×
𝑖/12
1+𝑖/12 𝑛 −1
𝑃 為貸款總金額
𝑖 為年利率
𝑛 期間(月)
𝑎 為每期支付的本金加利息
• 每期償還的本金為?
• 貸款金額為 10000 , 年利率為 10% 期間 12 個月, 每期需支
付 879 元
JAVASCRIPT HTML DOM
HTML DOM
• DOM, Document Object Model
• 一個可以將 HTML 標籤當做 JavaScript 物件操作的模型
• 透過這個模型, 我們可以使用 JavaScript 來新增/刪除/修改或取
得 HTML 中的標籤或屬性的值
• 在程式語言中物件是集合一群同樣用途的變數及函數所集
合而成的
• 在 DOM 模型中我們最常用的物件為 document
Document 物件
函數/方法
說明
W3C
getElementById()
取得指定 id 的 HTML 標籤物件
Yes
getElementsByName()
取得指定 name 的標籤物件陣列
Yes
getElementsByTagName()
取得指定標籤名稱的標籤物件陣列
Yes
DOM Node 使用
• 當 HTML 中含有指定 id 的標籤
• <p id="demo"></p>
• 可以使用以下方式來取得標籤物件
• document.getElementById(“demo”);
• 並可以使用以下方式來取得表單元件的內容
• alert(document.getElementById(“demo”).value);
• 或使用以下方式來更改表單元件的內容
• document.getElementById(“demo”).value = “HI”;
• value 用來取得表單元件的值
• <input type=“text” name=“firstname” value=“Lin” />
• innerHTML 用來取得 Node 中所包含的內容
• <p>Hello world!</p>
DOM Node 新增
• HTML
<div id="root"></div>
• JavaScript
var root=document.getElementById("root");
var para=document.createElement("p");
para.innerHTML = "Hello World";
root.appendChild(para);
練習
DOM Node 刪除
• HTML
<div id="root">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
• JavaScript
var root=document.getElementById("root");
var p1=document.getElementById("p1");
root.removeChild(p1);
練習
點完成就移除
第一個工作
DOM Node 查詢
• HTML
<div id="root">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
• JavaScript
var root=document.getElementById("root");
for(var i=0; i<root.childNodes.length; i++)
{
console.log(root.childNodes[i]);
}
練習