JavaScript 簡介
Download
Report
Transcript JavaScript 簡介
JavaScript
鄧姚文
http://www.ywdeng.idv.tw
JavaScript 簡介
Client-Side JavaScript (CSJS)
Mozilla Foundation implementation of the
ECMAScript standatd
JavaScript is NOT Java
Java 和 JavaScript 在語法方面相似，但是在變
數宣告、資料型別與物件導向方面有許多差異
Netscape 起初命名為 LiveScript，因為和 Sun
Microsystems 合作，改名為 JavaScript
2
JavaScript 簡介
3
JavaScript 簡介
JavaScript的功能
控制瀏覽器的動作與內容
JavaScript的優點
直譯式語言, 簡單易懂
安全：無法經由網路從他處傳輸資料, 也無法讀
取使用者硬碟中的資料
直接反應使用者的要求, 無須透過伺服器
瀏覽器解譯程式, 可跨作業平台執行
4
環境設定
Firefox：瀏覽器
官方網站： http://www.mozilla.com/
Firebug：JavaScript 除錯附加元件
以 Firefox 開啟這個 下載點
或到 Firefox 附加元件網站
https://addons.mozilla.org/ 搜尋 firebug
環境設定
開啟 IE 的除錯功能
6
第1個 JavaScript 程式
<html>
<head>
<title>第一個javascript程式</title>
<script language="javascript">
<!-alert("Hello World!");
//-->
</script>
</head>
<body>
<h1>歡迎光臨 JavaScript 的世界！</h>
</body>
</html>
7
8
第2個 JavaScript 程式
<html>
<head>
<title>第一個JavaScript程式</title>
</head>
<body>
<h1>歡迎光臨JavaScript的世界！</h>
<script language="javascript">
<!-alert("Hello World!");
//-->
</script>
</body>
</html>
9
10
第3個 JavaScript 程式
<html>
<head>
<title>第一個javascript程式</title>
</head>
<body>
<H1 onClick="javascript:alert('Hello World!')">歡迎
光臨JavaScript的世界！</H1>
</body>
</html>
11
第4個 JavaScript 程式
<html>
<head>
<title>第一個javascript程式</title>
<script src="FirstJavaScript.js" language="javascript">
</script>
</head>
<body>
<h1>歡迎光臨javascript的世界！</h1>
</body>
</html>
12
FirstJavaScript.js
alert("Hello World!");
13
14
JavaScript 程式碼撰寫慣例
關鍵字（Reserved Word）
特殊字元
function, if, else
{} () ;
識別字
程式設計師自行定義的名詞
15
規則與慣例
區分英文字母大小寫
忽略多餘的空白字元
分號：不一定需要
換行：提高程式的可讀性
註解：
// 單行
/* 多行
*/
16
識別字命名規則
第一個字元：
英文字母或底線（_）
後續字元
阿拉伯數字
ISO-8859-1字元
Unicode字元
底線
錢號（$）
17
識別字命名規則（續）
避開關鍵字
駱駝命名法：
userName
CheckUserAccount()
函式名稱開頭取動詞
事件處理函式末尾加EventHandler
避免在內部範圍使用和外部範圍相同的變
數名稱
18
JavaScript 關鍵字
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
undefined
var
void
volatile
while
with
19
練習：Hello JavaScript
以 document.write 方法輸出字串 "Hello
JavaScript"
document 代表這個HTML文件
write() 輸出字串的副程式
JavaScript 程式碼必須以
<script type="text/javascript">
</script>
夾住前後
20
JavaScript 語言特性
Dynamically Typed 動態資料型別
Interpreted 直譯，逐行編譯執行
Functions as First-Class Objects 函式即物件
21
語言特性
Dynamically Typed 動態型別
Data types are NOT declared
Data types are NOT known until execution time
Data type is associated to the value of the
variable rather than the variable itself
var x = 5;// set x to 5 (number)
x = "Hello!"; // set x to "Hello!" (String)
22
語言特性
Interpreted 直譯式語言
The code is stored as text and interpreted into
machine instructions and stored in memory as
the program runs.
Line by line 逐行譯、逐行執行
23
語法概述
利用 "." 來連接 "物件"與
其所擁有的屬性(Property)
能夠改變其狀態的方法(Method)
與其有下層關係的物件 (Object)
利用物件名稱.屬性名稱 = 屬性值, 可以改變物件
的屬性值, 亦即改變物件的狀態
利用物件名稱.方法名稱(), 即可呼叫某物件的方法，
改變物件的狀態
24
變數宣告
變數宣告方式
一般變數宣告:
[var] 變數名稱[=變數值];
陣列變數宣告:
[var] 變數名稱 = new Array([數量|陣列值]);
物件變數宣告: （宣告物件一定要用 var）
var 變數名稱 = new 物件名稱;
25
基本資料型別
Primitive Data Types
boolean 真/假（true/false）
number 數字（有小數點）
string 文字（用雙引號或單引號括住）
Special values
undefined 未定義
null 虛空
26
基本資料型別
booleans 布林，真/假、是/否
Possible values
true
false
1 相當於 true
0 相當於 false
var x
var y
var z
alert
= false;
= true;
= 1;
(y === z);
// alerts 'true'
27
基本資料型別
Numbers 數字
64位元值
Similar to double in Java
進行整數運算時：
先轉成 32-bit 整數（無條件捨去），運算完畢再轉
回 64-bit number
var x = 6;
// x: 64-bit
var y = x << 2;// x: 32-bit, y: 64-bit
28
Special Number Values
29
算術運算子
30
練習：印出從一到十的數字
以 document.write 輸出從 1 到 10 的數字
迴圈：
while (條件) { … }
for (初值; 條件; 改變) { … }
31
比較運算子
32
比較運算子
33
邏輯運算子
! 運算子 (邏輯否定Not)
&& 運算子 (最短路徑邏輯交集)
|| 運算子 (最短路徑邏輯聯集)
34
位元運算子
~ 運算子 (位元NOT)
& 運算子 (位元AND)
| 運算子 (位元OR)
^ 運算子 (位元XOR)
<< 運算子 (向左移位)
>> 運算子 (向右有號移位)
>>> 運算子 (向右無號移位)
35
指派運算子
36
條件運算子
條件運算式 ? 運算式1 : 運算式2
Max = (x > y) ? x : y;
Abs = (x > 0) ? x : -x;
37
運算子的優先順序
38
基本資料型別
Strings 字串
A string is a sequence of zero or more Unicode
values used to represent text.
Strings are immutable
Modification produces a new string
JavaScript 只有字串，沒有字元型別
單引號與雙引號皆可
39
Escape Characters 跳脫字元
40
流程控制
判斷結構
if...else
switch
迴圈結構
for
while
do
41
if…：如果…就…
(單向選擇)
if (condition) statement;
if (condition)
{
statement1;
statement2;
…
statementN;
}
42
if…else：如果…就否則…
(雙向選擇)
if (condition)
{
statements1;
}
else
{
statements2;
}
43
練習：判斷奇數偶數
判斷輸入的數字是奇數還是偶數
如果不用除法該怎麼做？
var n = prompt("請輸入一個整數");
if (n % 2 == 0)
alert(n + "是偶數");
else
alert(n + "奇偶數");
44
if…else if…：「如果…就….否則
如果…就…否則…」(多向選擇)
if (condition1)
{
statements1;
}
else if (condition2)
{
statements2;
}
else if (condition3)
{
statements3;
}
…
else
{
statementsN+1;
}
45
練習：評定等第
<SCRIPT LANGUAGE="javascript">
var X = prompt("請輸入學期成績", "");
if (X >= 90)
alert("優等！");
else if (X < 90 && X >= 80)
alert("甲等！");
else if (X < 80 && X >= 70)
alert("乙等！");
else if (X < 70 && X >= 60)
alert("丙等！");
else
alert("不及格！");
</SCRIPT>
46
switch…case
switch(expression)
{
case value1:
statements1;
break;
case value2:
statements2;
break;
…
default:
statementsN+1;
break;
}
47
for (計數迴圈)
for (initializers; expression; iterators)
{
statements;
[break;]
statements;
}
48
練習：印出從一加到十的結果
以 document.write 輸出從 1 加到 10 的結果
49
while迴圈
while(condition)
{
statements;
[break;]
statements;
}
50
do…while迴圈
do
{
statements;
[break;]
statements;
}while(condition);
51
break 與 continue
break 讓迴圈立即中斷
continue 跳過迴圈中後續的指令，令迴圈立
即進入下一回合
52
for…in
for (var identifier in expression)
{
statements;
[break;]
statements;
}
53
<html>
<head>
<title>流程控制範例</title>
<script language="javascript">
var students = new Array("小丸子", "小玉", "花輪");
for (var i in students)
{
alert(students[i]);
}
</script>
</head>
<body>
</body>
</html>
54
練習：九九乘法表
以 document.write 輸出九九乘法表
作法一：以<pre>標籤配合 \t 定位
作法二：以<table>排版
試試看：以 bgcolor 做出間隔列顏色不同的變化
試試看：以 CSS 的 tr:hover 做出隨著滑鼠移動的螢
光棒
55
練習
計算並印出從 1 到 10 累加的結果，例如：
1+2+3+4+5+6+7+8+9+10=55
設計一個 JavaScript 程式，計算並印出從 1
到 n 累加的結果，其中 n 是一個從文字方
塊輸入的數字
用 parseInt() 將字串轉成數字
56
函式 Function
函式的用途
可重複使用
程式碼變精簡。
提高程式碼的可讀性
提高程式碼的邏輯和正確性
容易偵錯、修改與維護
57
使用者自訂函式
function function_name([argumentlist])
{
statements;
[return;|return value;]
[statements;]
}
58
<html>
<head>
<title>自訂函式範例</title>
<script language="javascript">
function greeting()
{
var username = prompt("請輸入您的大名", "");
alert(username + "您好！歡迎光臨！");
}
greeting();
</script>
</head>
<body>
</body>
</html>
59
<html>
<head>
<title>自訂函式範例</title>
<script language="javascript">
function greeting()
{
var username = prompt("請輸入您的大名", "");
alert(username + "您好！歡迎光臨！");
}
</script>
</head>
<body>
<h1><a href="javascript:greeting()">點取此處以顯示歡迎訊息
</a></h1>
</body>
</html>
60
61
函式的參數
<html>
<head>
<title>自訂函式範例</title>
<script language="javascript">
function convert2f(degC)
{
var degreef = degC * 1.8 + 32;
alert("攝氏" + degC + "度可以轉換成華氏" + degreef +
"度");
}
var temperature = prompt("請輸入攝氏溫度", "");
convert2f(temperature);
</script>
</head>
<body>
</body>
</html>
62
函式的傳回值
<html>
<head>
<title>自訂函式範例</title>
<script language="javascript">
function convert2f(degC)
{
return degreef = degC * 1.8 + 32;
}
var temperature = prompt("請輸入攝氏溫度", "");
var result = convert2f(temperature);
alert("攝氏" + temperature + "度可以轉換成華氏" + result
+ "度");
</script>
</head>
<body>
</body>
</html>
63
區域變數 V.S. 全域變數
變數的有效範圍（Scope）
區域變數只存在於 function(){ } 內
全域變數都掛在 window 物件下
宣告在最外層（任何一對 { } 之外）的皆為
全域變數
不宣告就使用的變數，自動宣告成全域變
數
全域變數的有效範圍及於內層的{ }之中，區
域變數的有效範圍限制於{ } 之內
64
區域變數只存在於 function(){ } 內
Only the global object (the window object in
browsers) and functions are variable scope
boundaries
Other blocks, such as if-then-else
statements and while loops, don't provide a
variable scope boundary.
Variables declared inside a block other than
the function block will be accessible outside
that block
Function-Level Variable Scope
Globally Scoped Variables
The global window is the root of the DOM
and is accessed through the window keyword
Undeclared Variables are Global
不宣告就使用的變數，自動宣告成全域變
數
JavaScript 內建函式
encodeURI() 將英文字母、數字及 ! # $ & ' (
) * + , - . / : ; = ? @ _ ~ 之外的字元加以編碼
例如 encodeURI("Hello 123!") 傳回
Hello%20123!
decodeURI() 將 encodeURI() 編碼過的資料
解碼
例如 decodeURI("Hello%20123!") 傳回
Hello 123!
69
JavaScript 內建函式
encodeURIComponent() 將英文字母、數字
及 ! ' ( ) * - . _ ~ 之外的字元加以編碼
例如 encodeURI("http://") 傳回 http://
encodeURIComponent("http://") 傳回
http%3A%2F%2F。
decodeURIComponent() 將
encodeURIComponent() 編碼過的資料解碼
70
JavaScript 內建函式
eval() 將字串當成 JavaScript 程式碼執行
例如：eval("alert('Hello World!');");
71
JavaScript 內建函式
isFinite() 判斷參數是否為有限值
isNaN() 判斷參數是否為 NaN (Not a
Number)
Number() 用來將參數轉換為數字
parseInt() 用來將參數轉換為整數
parseFloat() 用來將參數轉換為浮點數
72
Number("10.5") + Number("8");
Number("abc");
parseInt(10.5);
parseInt("10.5");
parseInt("-7.56");
parseFloat(10.5);
parseFloat("10.5");
parseFloat("-7.56");
73
//傳回數字18.5
//傳回NaN
//傳回10
//傳回10
//傳回-7
//傳回10.5
//傳回10.5
//傳回-7.56
函式庫
將常用的使用者自訂函式存成 .js 檔案，需
要時以下列敘述引入使用
<srcipt src="MyLibrary.js" type="text/JavaScript"></script>
74
練習：取絕對值
撰寫一個可以計算絕對值的函式
輸入：數字
輸出：該數字的絕對值
提示：
以 prompt 取得輸入
以 parseFloat 將字串轉換成數字
75
練習：判斷質數
撰寫一個可以判斷輸入是否質數的函式
輸入：大於1的自然數
輸出：是否質數
提示：
質數是除了1和自己之外，無法被其他自然數
整除
最小的質數是2
質數又稱為素數，英文稱為 Prime Number
76
練習：列出範圍內的質數
輸入：起訖範圍兩個數字
輸出：位於起訖範圍內的質數，包括起訖
兩個數字
77
練習：計算階乘
輸入：一個正整數 n
輸出：n階乘（n!）
提示
階乘是所有小於或等於該數的正整數的積。
n! = 1 * 2 * … * n
1, n 0
13!= 6,227,020,800
n!
n (n 1)!
231-1=2,147,483,647
78
練習：計算組合數
輸入：兩個正整數 n 和 k
n
n!
輸出：C(n, k)
C (n, k )
k
k!(n k )!
提示
組合數用於二項式係數的計算
n n 1 n 1
英文稱為Combination
k k 1 k ,0 k n
n
1
0
79
n
n
1
練習：計算費氏數列第n項
輸入：正整數 n
輸出：費氏數列第 n 項
提示：
英文稱為 Fibonacci Sequence
f (0) 0
定義為
f (1) 1
f (n) f (n 1) f (n 2), n 2
通常以遞迴解
不用遞迴其實更快
80
練習：計算最大公因數
輸入：兩個整數 m 和 n
輸出：m 和 n 的最大公因數
提示：
輾轉相除法
81
練習：URL Request 分解
輸入：URL Request
輸出：分解後的 URL
例如：
輸入： http://www.xyz.com/ig#s1?p1=1&p2=x
輸出：
URL：http://www.xyz.com/ig#s1
參數1名稱：p1，參數1值：1
參數2名稱：p2，參數2值：x
測試：
http://www.xyz.com.uu/%E7%94%A2%E5%93%81/%E7%9B%AE%E9%8C%84?%E9%A1%9E%E5%88%A5=%E9%87%91%E5%B1%AC&%E4%BB%A3%E7%A2%BC=36
提示：
decodeURI()
String.split()
Regular Expression
82