JavaScript Core Language
靜宜大學資訊管理學系
蔡奇偉 副教授
內容大綱









簡介
資料型態與變數
運算元與運算式
敘述
函式
物件
陣列物件
字串物件
Date 物件
JavaScript 的簡介



JavaScript 是 Netscape 設計用來撰寫跨平台
client/server 架構程式的一套電腦語言。
JavaScript 是一套 object-based 的直譯式語
言。
JavaScript 的用途：
 Sever 端：ASP、存取伺服器上的資料庫等
 Client 端：DHTML、Form 資料的驗証等
JavaScript 的版本
JavaScript (Netscape 2.0)
 JavaScript 1.1 (Netscape 3.0)
 JavaScript 1.2 (Netscape 4.0)
 JavaScript 1.3 (Netscape 4.06)
 Jscript (IE 3.0 或以上)
 ECMA-262 標準的 JavaScript

JavaScript is not Java
JavaScript
Java
Interpreted (not compiled) by
client.
Compiled bytecodes downloaded
from server, executed on client.
Object-based. Uses built-in,
extensible objects, but no
classes or inheritance.
Object-oriented. Applets consist
of object classes with inheritance.
Code integrated with, and
embedded in, HTML.
Applets distinct from HTML
(accessed from HTML pages).
Variable data types not declared
(loose typing).
Variable data types must be
declared (strong typing).
Dynamic binding. Object
references checked at runtime.
Static binding. Object references
must exist at compile-time.
Cannot automatically write to
hard disk.
Cannot automatically write to
hard disk.
在網頁中加入 JavaScript
一、使用 SCRIPT 標籤加入程式碼
<SCRIPT>
<!-JavaScript statements
//-->
</SCRIPT>
JavaScript 程式碼裝在 HTML 註解之中的原因，是為了
讓不支援 JavaScript 的瀏覽器能避過這些程式碼。
//--> 最前面的兩個斜線是 JavaScript 的註解行符號。
<SCRIPT> 標籤
<SCRIPT LANGUAGE= name_of_language>
<!-Script statements
//-->
</SCRIPT>
若未指定 LANGUAGE 屬性，則預設的語言是
JavaScript。
範例
<SCRIPT>……</SCRIPT >
<SCRIPT LANGUAGE=“JAVASCRIPT”> ……</SCRIPT >
以上兩行都是用來加入 JavaScript 的程式碼。
<SCRIPT LANGUAGE=“JAVASCRIPT1.1”> ……</SCRIPT >
用來加入 JavaScript 1.1 版的程式碼
<SCRIPT LANGUAGE=“JAVASCRIPT1.2”> ……</SCRIPT >
用來加入 JavaScript 1.2 版的程式碼
<SCRIPT LANGUAGE=“JAVASCRIPT1.3”> ……</SCRIPT >
用來加入 JavaScript 1.3 版的程式碼
<SCRIPT LANGUAGE=“JScript”> ……</SCRIPT >
用來加入 JScript 的程式碼
<SCRIPT LANGUAGE=“VBScript”> ……</SCRIPT >
用來加入 VBScript 的程式碼
使用 SRC 屬性加入外部程式碼
<SCRIPT SRC=url_of_script_source></SCRIPT>
SRC 屬性可用來加入一段存在外部檔案中的程式碼。
JavaScript 程式檔通常是以 .js 為副檔名。譬如：
<SCRIPT SRC=“myscript.js”></SCRIPT>
<SCRIPT LANGUAGE=“JAVASCRIPT1.2” SRC=“myscript.js”>
</SCRIPT>
<SCRIPT SRC=“http://www.pu.edu.tw/lib.js”>
</SCRIPT>
二、用JavaScript 運算式來設定元件的屬性值
（僅適用於 Netscape 4.x）
attribute=“&{JavaScript Expression}”
例
<SCRIPT>
<!-var ruleWidth=100;
//-->
等同於
<HR WIDTH=120>
</SCRIPT>
……
<HR WIDTH=“&{ruleWidth+20}”>
註解行（comments）

單行的註解可用雙斜線 (//)，如：
// 這是一行註解
var interval; // 控制動畫時間

多行的註解可用 /* 和 */ 括起來，如：
/*
* 驗証表單的函式
*/
function validate_form (…)
資料型態
JavaScript 支援下列的基本資料型態：
整數：如 42 或 -21
浮點數：如 3.1415 或 1.5E-3
布林值：true 和 false
字串：如 “How are you doing”
空值：null
未定義值：undefined (變數未指定其值之
前所含的值)
常值（literals）
程式中保持不變的值稱為常值。以下是 JavaScript 各種常
值的寫法：
整數常值：
十進位：34
八進位：027 (=23)
十六進位：0x31 (=49)
0X1F (=30)
浮點數常值：
小數點：3.1415
科學記號：.1E1, 0.1e3, -3.1E4, 3.5e-6
布林常值：只有 true 和 false 兩種值。
字串常值：
字串是由單引號 (‘) 或雙引號 (“) 來表示 (使用單引
號可鍵入包含雙引號的字串)。如：
“blah“, ‘blah‘, “1234“,
“one line \n another line“
字串中的特殊字元
Character
Meaning
Character
Meaning
\b
Backspace
\f
Form feed
\n
New line
\r
Carriage return
\t
Tab
\‘
single quote
\“
Double
quote
\\
Backslash
character(\)
在字串中使用字元碼
Latin-1 encoding


\ooo: the character specified by up to three
octal digits ooo between 0 and 377.
\xXX: the character specified by the two
hexadecimal digits XX between 00 and FF.
Unicode

\uXXXX: the Unicode character specified by
the four hexadecimal digits XXXX. For
example, \u00A9 is the Unicode sequence for
© (the copyright symbol).
陣列常值
陣列常值是由若干個常數值或字串組合而成，其格式如下：
[元素0, 元素1, ……元素n-1]
其中的元素型態不必都一樣。
譬如：
coffees = ["French Roast", "Columbian", "Kona"];
fish = ["Lion", , "Angel"]; // fish[1] is undefined
myList = [’home’, , ’school’, ]; // myList[3] 不存在
myList = [ , ’home’, , ’school’]; // myList[0] is undefined
mixedList = [1, ‘one’, 2, ‘two’, 3];
變數
變數是用來儲存資料的記憶體位址。你可以用變數的名稱
來擷取和操作儲存於其中的資料。
JavaScript 並不像 C/C++ 或 Java 硬性規定使用變數之前必須
先宣告，不過我們還是建議您在使用變數之前先行宣告。
若要宣告變數，可使用 var 陳述式。 如：
var mim = "A man, a plan, a canal, Panama!"; // 字串
var ror = 3;
// 整數
var nen = true;
// 布林值
var fif = 2.718281828;
// 浮點數
var rx = null;
// 空值
var k;
// 未定義初值
變數的命名規則
JavaScript 是一個字元大小寫相異的語言，所以 myCounter
與 MYCounter 代表兩個不同的變數。此外，雖然變數名稱
的長度沒有限制，但仍須遵守下列的特定規則︰
第一個字元必須是字母 (大小寫皆可) 或底線 (_) 。
後面的字元可以是字母、數字、或底線。
變數名稱不可以是保留字。
例
有效的變數名稱：_pagecount、Part9、Number_Items
無效的變數名稱：99Balloons、Smith&Wesson、while
全域變數與區域變數
全域變數
宣告在函式之外的變數稱為全域（global）變數。
其有效範圍涵蓋整個網頁。此外，這類變數可以不
必用 var 敘述宣告。如：
x = 10;
即自動宣告了變數 x。
區域變數
宣告在函式之內的變數稱為區域（local）變數。其
有效範圍僅及於函式之內。這類變數一定要用 var
敘述宣告。
變數的資料型態
JavaScript 是一種弱型態（loosely typed）語言；換句
話說，宣告變數時，不需要指定其資料型態，而且同一個
變數可以儲存多種型態的資料。如：
var answer = 42; // 初值設成整數 42
……
answer = “Thanks for all the fish…”; // 改存字串，ok
……
answer = true; // 改存布林值，still ok
資料型態的轉換
假定運算式的語法與語義都無誤的話，JavaScript 採用以
下的資料轉換規則：
若運算元都是整數，則結果為整數。
若運算元都是浮點數，則結果為浮點數。
若運算元有整數和浮點數，則結果為浮點數。
若數值和字串相加，則結果為字串，其餘運算的結果
為數值。
null 運算元被視為 0 或空字串。
若有未定義初值的運算元，則結果為錯誤。
例
x = "The answer is " + 42; // x = "The answer is 42"
y = 42 + “ is the answer”; // y = "42 is the answer"
var k;
z = k + 3;
// z = NaN (Not a Number)
var m = null;
w = 10 + m;
// w = 10
s = "The answer is " + m;
// s = "The answer is "
var nowWhat = 0;
nowWhat += 1 + "10"; // nowWhat = "0110“
"37" - 7 // returns 30
"37" + 7 // returns "377"
運算式與運算子
運算式是由常值、變數、和運算子所組成的計算式。計算的結
果是個單一值。依據結果的資料類型，運算式可分為以下三種：
算術運算式：
計算的結果是一個數值，如 4 或 3.14。
字串運算式：
計算的結果是一個字串。如 "Blah" 或 "123"。
邏輯運算式：
計算的結果是一個邏輯值 true 或 false。
運算子
指定運算子
 比較運算子
 算術運算子
 位元運算子
 邏輯運算子
 字串運算子
 特殊運算子

指定運算子
運算子
意義
運算子
意義
x = 10
把 10 存入 x
x <<= y
x = x << y
x += y
x=x+y
x >>= y
x = x >> y
x -= y
x=x-y
x >>>= y x = x >>> y
x *= y
x=x*y
x &= y
x=x&y
x /= y
x=x/y
x ^=y
x=x^y
x %= y
x=x%y
x |= y
x=x|y
比較運算子
運算子
意義
範例
==
等於
3 == "3"
!=
不等於
4 != "3"
===
數值等於
3 === 3
!==
數值不等於
3 !== "3"
>
大於
4>3
>=
大於或等於
3 >= 3
<
小於
3<4
<=
小於或等於
4 <= 5
算術運算子
運算子 意義
範例
+
相加
x = 1 + 2;
// x =3
-
相減
x = 1 – 2;
// x = -1
*
相乘
x = 2 * 3;
// x = 6
/
相除
x = 2 / 3;
// x = 0.666....6
%
求餘數
x = 12 % 5; // x = 2
++
加一
x =3; x++;
// x = 4
--
減一
x = 4; x--;
// x = 3
-
負值
x = 3; -x
// x = -3
位元運算子
運算子
&
|
^
~
<<
>>
>>>
意義
位元 AND
位元 OR
位元 XOR
位元 NOT
左移
右移補正負號位元
右移補 0
範例
a&b
a | b
a ^ b
~a
a << b
a >> b
a >>> b
邏輯運算子
運算子
意義
範例
&&
邏輯 AND
e1 && e2
若 e1 和 e2 都為 true，則結
果為 true，否則為 false。
||
邏輯 OR
e1 || e2
若 e1 和 e2 都為 false ，則
結果為 false ，否則為 true 。
!
邏輯 NOT
!e
結果為 true，若 e 為 false，
結果為 false ，若 e 為 true。
懶惰的邏輯式運算
計算邏輯式時，當發現真假值已經可以確定時，JavaScript
就不再進行式子後面的計算。譬如：
var x = 1;
function f ()
{
x++;
此處的函式 f() 並不
}
會被呼叫。
…
k = true || f();
// x 仍然是 1
字串運算子

字串連結運算子 (+)
譬如：
newStr = "I love ” + “JavaScript";
// newStr 的值變成 "I love JavaScript"

字串附加運算子 (+=)
譬如：
newStr = "I hate ";
newStr += "JavaScript";
// newStr 的值變成 "I hate JavaScript"

字串比較運算子：<, <=, ==, >=, >
按照ASCII字碼序由左至右比較字元的大小，譬如：
"one" < "two" 而 "seven" > “eight"
特殊的運算子

條件運算式:
(條件式) ? 真值式 : 假值式
譬如：
x = (4 > 3)? 4 : 3; // x = 4
x = (4 < 3)? 4 : 3; // x = 3

comma 運算式
expr1, expr2, …, exprn
運算順序
以最後一個運算式的值
作為運算的結果
低
運
算
的
優
先
順
序
高
Operator type
Individual operators
Comma
,
Assignment
= += -= *=
>>>= &= ^=
Conditional
?:
Logical-or
||
Logical-and
&&
Bitwise-or
|
Bitwise-xor
^
Bitwise-and
&
Equality
==
Relational
<
Bitwise shift
<<
Addition/subtraction
+-
Multiply/divide
*/%
Negation/increment
!
Function Call
()
Create instance
new
Member
. []
/=
|=
%=
<<=
>>=
!=
<=
~
>>
-
>
>=
>>>
+
++
--
typeof void delete
敘述
條件敘述
 迴圈敘述
 物件敘述

條件敘述
if 敘述
 if…else 敘述
 switch 敘述

if 敘述
if (condition)
statement
condition
if (condition)
{
statements
}
true
statement(s)
false
if…else 敘述
if (condition)
{
true_statements
}
else
{
false_statements
}
false
condition
false
statement(s)
true
true
statement(s)
switch 敘述
switch (expression) {
case label_1:
statement; break;
case label_2:
statement; break;
…
default : statement;
}
* label 必須是一個常式
迴圈敘述
for 敘述
 while 敘述
 do..while 敘述
 label
 break 敘述
 continue 敘述

for 敘述
for ([initialExpr]; [condition]; [incrementExpr] )
{
statement
initialExpr
}
condition
true
statement
incrementExpr
false
while 敘述
while (condition)
{
statement
}
condition
true
statement
false
do…while 敘述
do {
statement
} while (condition)
statement
true
condition
false
label
label: statement
在敘述 statement 之前加上一個標籤 label。標籤的命名
規則與變數的命名規則相同。標籤可擺在任何的敘述之
前，做為程式中的一個參考點。不過，標籤通常是放在
迴圈敘述（如 for 和 while 等）之前，並與後面所說
的 break 或 continue 敘述合用。
break 敘述


break
break label
在迴圈中的 break 敘述是用來中斷迴圈的執行，並跳
出迴圈。若未指定標籤，則表示跳出目前的迴圈，否則，
跳出 label 所標示的迴圈。
在 switch 敘述中的 break 則是用來中斷 case 敘述的
執行。
例
The following example iterates through the elements
in an array until it finds the index of an element
whose value is theValue:
for (i = 0; i < a.length; i++) {
if (a[i] = theValue);
break;
}
例
outer:
while (…)
{
…
while (…)
{
…
if (…) break;
…
if (…) break outer;
…
}
// simple break goes here
…
}
// break outer goes here
continue 敘述


continue
continue label
continue 只能用在迴圈之中。它是用來中斷迴圈目前
循環的執行，而開始下一循環。若指定標籤，則表示中
斷 label 所標示的迴圈。
例
The following example shows a while loop with a
continue statement that executes when the value of
i is three. Thus, n takes on the values one, three,
seven, and twelve.
i=0
n=0
while (i < 5) {
i++
if (i == 3)
continue
n += i
}
例
outer:
while (…)
{
…
while (…)
{
…
if (…) continue;
…
if (…) continue outer;
…
}
…
}
函式
宣告函式
 函式的呼叫
 參數的傳遞
 內建的函式

函式的宣告
語法: function function_name (para1, para2, …, paran)
{
statements
}
 function_name 的命名規則與變數相同。
 para1, para2, …, paran 是一組用逗號分隔的參數。
 若沒有參數的話，則不需要列出。
例
var x;
function incrx ()
{
x++;
}
例
function square(number)
{
return number * number;
}
例
function factorial(n)
{
if ((n == 0) || (n == 1))
return 1
else {
result = (n * factorial(n-1) )
return result
}
}
函式的呼叫
語法: function_name (arg1, arg2, …, argn)
例
incr();
// increase x by 1
z=square(5); // return 25
a=factorial(1); // returns 1
b=factorial(2); // returns 2
c=factorial(3); // returns 6
d=factorial(4); // returns 24
e=factorial(5); // returns 120
參數的傳遞
JavaScript 的參數傳遞是採用 call-by-value 方式。
因此，你無法在函式中更改引數的值。
function_name (arg1, arg2, …, argn)
function function_name (para1, para2, …, paran)
{
…
}
例
var x=0;
function incr (k)
{
k++;
}
…
incr(x);
// x 仍然是 0 而不是 1
arguments 陣列
當函式具有不定數目的引數時，我們可以利用內建的
陣列 arguments 來取得函式的引數。
arguments[i]
存放了第 i 個引數（arguments[0] 是第一個引數。
另外，我們可以用
arguments.length
來取得引數的個數。
例 以下的函式用來把若干個字串接在一起，並在其間用
指定的符號加以分隔。
function myConcat(separator)
{
result="" // initialize list
// iterate through arguments
for (var i=1; i<arguments.length; i++)
{
result += arguments[i] + separator
}
return result
}
// returns "red, orange, blue, "
myConcat(", ","red","orange","blue")
// returns "elephant; giraffe; lion; cheetah;"
myConcat("; ","elephant","giraffe","lion", "cheetah")
// returns "sage. basil. oregano. pepper. parsley. "
myConcat(". ","sage","basil","oregano", "pepper", "parsley")
內建的函式
eval
 isFinite
 isNaN
 parseInt and parseFloat
 Number and String
 escape and unescape

eval
語法: eval(string)
計算參數 string 所代表的運算式或敘述字串。
例
eval("3+4")
// return 7
var x=10;
eval("3*x+4") // return 34
eval("document.write(x)")
isFinite
語法: isFinite(number)
The isFinite method examines the number in its argument.
If the argument is NaN, positive infinity or negative infinity,
this method returns false, otherwise it returns true.
例 You can check a client input to determine whether it
is a finite number.
if(isFinite(ClientInput) == true)
{
/* take specific steps */
}
isNaN
語法: isNaN(number)
On platforms that support NaN (Not a Number), the parseFloat
and parseInt functions return NaN when they evaluate a value
that is not a number. isNaN returns true if passed NaN, and
false otherwise.
例 You can check a client input to determine whether it is
NaA.
if(isFinite(floatValue) == true)
{
}
/* take specific steps */
parseInt
語法: parseInt(string[, radix])
The parseInt function parses its first argument, a string, and
attempts to return an integer of the specified radix (base).
If parseInt encounters a character that is not a
numeral in the specified radix, it ignores it and all
succeeding characters and returns the integer value
parsed up to that point. parseInt truncates numbers
to integer values. Leading and trailing spaces are
allowed.
簡而言之，此函式是用來把一個數字字串轉換成整數值。
例
parseInt("123")
// return number 123
parseInt("12.3")
// return number 12
parseInt("12A3")
// return number 12
parseInt("123", 8)
// return 83
paresInt("123", 16)
// return 291
parseInt("12A3", 16)
// return number 4771
parseInt("
// return 123
123
")
parseInt("Hello")
// return NaN
parseInt("F", 16)
// return 15
parseInt("17", 8)
// return 15
parseInt("15", 10)
// return 15
parseInt(15.99, 10)
// return 15
parseInt("FXX123", 16)
// return 15
parseInt("1111", 2)
// return 15
parseInt("15*3", 10)
// return 15
parseFloat
語法: parseFloat(string)
parseFloat parses its argument, a string, and returns a floating
point number. If it encounters a character other than a sign (+
or -), numeral (0-9), a decimal point, or an exponent, it returns
the value up to that point and ignores that character and all
succeeding characters. Leading and trailing spaces are allowed.
If the first character cannot be converted to a number,
parseFloat returns NaN.
簡而言之，此函式是用來把一個數字字串轉換成浮點數數
值。
例
The following examples all return 3.14:
parseFloat("3.14")
parseFloat("314e-2")
parseFloat("0.0314E+2")
var x = "3.14"
parseFloat(x)
The following example returns NaN:
parseFloat("FF2")
Number
語法: Number(obj)
把物件 obj 換轉成數值。若 obj 是一個字串，但不合於數
字串語法的話，則所得的數值將是 NaN。此函式亦可用來
把 Date 物件轉換成數值，細節請參閱參考手冊。
例
var x = Number("12.3")
alert(String(x+1))
String
語法: String(obj)
把物件 obj 換轉成字串。此函式亦可用來把 Date 物件轉換
成數值，細節請參閱參考手冊。
例
String(123)
// return "123"
x = parseInt("123")
String(x)
// return "123"
escape 和 unescape
語法: escape(string)
unescape(string)
Use the escape and unescape functions to encode and decode
(add property values manually) a Uniform Resource Locator
(URL), a Uniform Resource Identifier (URI), or a URI-type
string.
例 escape("&") // returns "%26“
// returns "The_rain.%20In%20Spain%2C%20Ma%92am"
escape("The_rain. In Spain, Ma'am")
物件（Object）










何謂物件？
物件與屬性
建立新物件
this 和 new 運算子
刪除物件與 delete 運算子
增刪物件的屬性
巢狀的物件
物件方法的定義與使用
與物件相關的敘述
一些內建的核心物件與物件型態
何謂物件？
JavaScript is designed on a simple object-based paradigm.
An object is a construct with properties that are JavaScript
variables or other objects. An object also has functions
associated with it that are known as the object’s methods. In
addition to objects that are predefined in the Navigator
client and the server, you can define your own objects.
物件與屬性
物件中的屬性（property）可以用下列的兩種方式
來存取：
• objectName.propertyName
• objectName["propertyName"]
其中的第二種方式是把物件視為一個關聯陣列
（associative array），以屬性的名稱作為陣列的
索引。
例 假定 mycar 是一個物件，且其中含有 make, model,
和 year 三個屬性。則我們可以用下列兩方式來設定這
些屬性值：
方式一、
myCar.make = "Ford"
myCar.model = "Mustang"
myCar.year = 1969;
方式二、
myCar["make"] = "Ford"
myCar["model"] = "Mustang"
myCar["year"] = 1967
myCar
make
"Ford"
model "Mustang"
year
1969
建立新物件
我們可以採用底下的兩種方法來建立一個新的物件：
• 利用 Object Initializers
適用於建立一個簡單的物件
• 利用一個 Constructor Function
適用於建立一組同類形的物件
Using Object Initializers
語法：
objectName = {property1:value1, ..., propertyN:valueN}
例
if (cond) x = {hi:"there"}
myHonda = {color:"red", wheels:4,
engine:{cylinders:4, size:2.2}}
Using a Constructor Function
這個方法是由下列兩個步驟所組成:
1. 寫一個建構函式來定義物件的型態。在此建構
函式中，我們可以定義型態的名稱、物件屬性、
與物件的方法。
2. 用 new 運算子來産生一個此型態的物件，並指
定此物件的屬性值。
例
建構函式
物件型態的名稱
function Car (mk, md, yr)
{
this.make = mk
this 這個保留字用來
this.model = md
代表目前所指涉的物件
this.year = yr
}
可讀作「物件的 year 屬性」
mycar = new Car("Ford", "Mustang", 1969)
yourcar = new Car("Nissan", "300ZX", 1992)
hercar = new Car("Mazda", "Miata", 1990)
myCar
make
"Ford"
model "Mustang"
year
1969
yourCar
herCar
make
"Nissan"
make
"Mazda"
model
"300ZX"
model
"Miata"
year
1992
year
1990
this 運算子
語法： this[. propertyName]
The this keyword refers to the current object. In general,
in a method this refers to the calling object.
例 function validate(obj, lowval, hival)
{
if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!")
}
<B>Enter a number between 18 and 99:</B>
<INPUT TYPE = "text" NAME = "age" SIZE = 3
onChange="validate(this, 18, 99)">
new 運算子
語法：
objectName = new objectType ( param1 [, param2
objectName
objectType
新物件的名稱
物件的類型，必須是物件建構
函式的名稱。
parami
數
用來定義物件屬性的參
刪除物件
我們可以用 delete 運算子刪除物件，譬如：
mycar=new Car("Ford", "Mustang", 1969)
delete mycar // removes the object and returns true
delete 運算子
語法：
// 刪除物件 objectName
delete objectName
// 刪除物件 objectName 的屬性 property
delete objectName.property
// 刪除物件 objectName 第 index 的屬性
delete objectName[index]
增刪物件的屬性
增加物件的屬性
定義物件之後，我們可以隨時增加物件的屬性。例如：
mycar.color = "red"
在前述的 mycar 物件中新增一個名為 color 的屬性，
並將其值設成 "red"。
增加物件型態的屬性
語法： objTypeName.prototype.propertyName = null
我們可以把新的屬性加入一個已定義的物件型態之中。
例如：
mycar = new Car("Ford", "Mustang", 1969)
Car.prototype.color=null
yourcar = new Car("Nissan", "300ZX", 1992)
mycar.color="red"
yourcar.color="black"
增加 color 屬性至 Car 物件型態，則物件 mycar 和
yourcar 都擁有這個新增的屬性。
刪除物件的屬性
delete objectName.property
例
mycar.color="red"
yourcar.color="black“
delete mycar.color
// mycar 的 color 屬性已經不存在，但 yourcar 的 color
// 屬性仍然存在。
刪除物件型態的屬性
我們無法刪除物件型態的屬性。
巢狀的物件
物件的屬性可以是另外一個物件。
例
function Person(name, age, sex)
{
this.name = name
this.age = age
this.sex = sex
}
rand = new Person("Rand McKinnon", 33, "M")
ken = new Person("Ken Jones", 39, "M")
function Car(make, model, year, owner)
{
this.make = make
this.model = model
this.year = year
this.owner = owner
}
car1 = new Car("Eagle", "Talon TSi", 1993, rand)
car2 = new Car("Nissan", "300ZX", 1992, ken)
who = car2.owner.name // get "Ken Jones"
物件方法的定義與使用
物件的方法可以用以下的兩個步驟來定義：
1. 定義一個函式
function function_name (...) {...}
2. 指定此函式至物件：
objName.methodName = function_name
或指定至物件型態：
function objTypeName (...)
{
...
this.methodName = function_name
...
}
例
function displayCar()
{
var result = "A Beautiful " + this.year + " " +
this.make + " " + this.model
pretty_print(result)
}
function car(make, model, year, owner)
{
this.make = make
this.model = model
this.year = year
this.owner = owner
this.displayCar = displayCar
}
使用物件的方法
語法： objName.methodName(argumet_list)
例
car1 = new Car("Eagle", "Talon TSi", 1993, rand)
car2 = new Car("Nissan", "300ZX", 1992, ken)
car1.displayCar() // “A Beautiful 1993 Eagle Talon Tsi”
car2.displayCar() // “A Beautiful 1992 Nissan 300ZX”
與物件相關的敘述
for...in 敘述
 with 敘述

for...in 敘述
語法： for (variable in
object)
{
statements
}
The for...in statement iterates a specified variable over all
the properties of an object. For each distinct property,
JavaScript executes the specified statements.
例 The following function takes as its argument an object
and the object’s name. It then iterates over all the
object’s properties and returns a string that lists the
property names and their values.
function dump_props(obj, obj_name)
{
var result = ""
for (var i in obj)
{
result += obj_name + "." + i + " = " + obj[i] + "<BR>"
}
result += "<HR>"
return result
}
mycar = new Car("Ford", "Mustang", 1969)
r = dump_props(mycar, "mycar")
// "mycar.maker = Ford<BR>mycar.model = Mustang<BR>
// mycar.year = 1969<BR><HR>"
with 敘述
語法： with (object)
{
statements
}
The with statement establishes the default object for a set of
statements. JavaScript looks up any unqualified names within
the set of statements to determine if the names are properties of
the default object. If an unqualified name matches a property,
then the property is used in the statement; otherwise, a local or
global variable is used.
例
myCar.make = "Ford"
myCar.model = "Mustang"
myCar.year = 1969
可改寫成：
with (myCar)
{
make = "Ford"
model = "Mustang"
year = 1969
}
內建的核心物件與物件型態









Object
Boolean
Number
String
Array
Math
Date
Function
RegExp
陣列物件（Array）
陣列與元素
 建立陣列
 讀寫陣列的元素
 加入新元素
 多維陣列
 陣列物件提供的方法

陣列與元素
陣列是由一群資料所組成的集合，並利用索引（index）
來存取這些資料。陣列中的資料稱為元素（element）索
引的值必須是一個大於或等於 0 的整數。與 C/C++ 和
Java 比較，JavaScript 的陣列允許下列的性質：
• 元素可以是不同的資料型態，譬如我們可以把數值資料
和字串資料同時存入一個陣列中。
• 陣列的長度可隨需要而變動。
建立陣列
 建立空陣列
var a = new Array();
 建立有初值的陣列
// 陣列 a 含有 5, 4, "a", 和 "b" 共四個元素
var a = new Array(5, 4, "a", "b");
 建立指定元素個數的陣列
// 陣列 a 含有 10 個值為 undefined 的元素
var a = new Array(10);
 使用陣列常值來建立陣列
// 陣列 primes 含有 5 個元素
var primes = [2, 3, 5, 7, 11];
陣列常值
讀寫陣列的元素
 讀出陣列中第 i 個元素值
// 把陣列 a 的第 10 個元素存入變數 x 中
x = a[10];
 寫入陣列中第 i 個元素
// 把陣列 a 的第 10 個元素的值改成 99
a[10] = 99;
加入新元素
如前所述，JavaScript 的陣列長度是動態性的，我們可以
視需要增加新的元素到陣列中。此外， JavaScript 的陣列
也具有稀疏性，即未指定值的元素不會佔用記憶體空間。
譬如：
var a = new Array();
// a 是一個空陣列
a[0] = 12;
// 把 12 存入第 0 個元素
a[1000] = 99;
// 把 99 存入第 1000 個元素
// a[1], a[2], …, a[999] 都是 undefined
// 且不佔用記憶體空間。
多維陣列
雖然 JavaScript 並不直接支援多維陣列，但我們可以
用「陣列的陣列」方式來模擬多維陣列。譬如：
var a = [1, 2, 3];
var b = [4, 5, 6];
var c = [a, b];
var d = [[1, 2, 3], [4, 5, 6]];
x = c[1][2];
// x 為 6
y = c[0][1];
// y 為 2
陣列的長度
每個陣列物件都有一個記錄陣列元素個數的屬性 length。
它的值是陣列目前最大索引值再加 1。譬如：
var a = new Array();
// a.length = 0
a = new Array(10);
// a.length = 10
a = new Array(1,2,3); // a.length = 3
a =[4, 5];
// a.length = 2
a[5] = -1;
// a.length = 6
a[49] = 0;
// a.length = 50
例
length 屬性常用在 for 迴圈的終止條件，如底下
的範例所示：
var fruits = ["mango", "banna", "apple", "cherry"];
for (var k = 0; k < fruits.length; k++)
alert(fruits[k]);
若陣列中包含未定義的元素時，我們可以用下面的方法來
排除它們：
var fruits = ["mango", "banna", , "cherry"];
for (var k = 0; k < fruits.length; k++)
if (fruits[k] != undefined) alert(fruits[k]);
我們可以更改 length 屬性來設定陣列的新長度。增加長
度時，新增加的元素都設為 undefined。縮短長度時，
超出新長度的舊元素會自動被刪除。譬如：
var a = Array();
a.length = 10;
// a[0],…, a[9] 都是 undefined
a[0] = 33;
a[9] = 66;
a.length = 9;
// a[9] 被刪除
陣列物件的方法

join
把元素轉換成字串然後結合成一個字串

reverse
反轉陣列的元素次序

sort
排序陣列的元素

concat
把元素附加在陣列之後

slice
取出陣列中一部分連續的元素

splice
插入、刪除、置換陣列的元素

push
在陣列尾端加入一個或多個新元素

pop
移除陣列最尾端的元素

shift
移除陣列最前端的元素

unshift
在陣列前端加入一個或多個新元素

toString
把陣列轉成字串（同 join 的預設行為）

toLocalString
把陣列轉成當地字碼集的字串
join 方法
語法： array.join([separator])
join 方法把陣列以 separator 所指定的字串來分隔元素然
後結合成一個字串。若沒指定 separator，則使用逗號。
譬如：
a = [1, 2, 3, "a", "string"];
s = a.join();
// s 為 "1,2,3,a,string“
s = a.join("+");
// s 為 "1+2+3+a+string"
reverse 方法
語法： array.reverse()
reverse 方法反轉陣列的元素。譬如：
a = [1, 2, 3]; // a[0] == 1, a[1] == 2, a[2] == 3
a.reverse();
// a[0] == 3, a[1] == 2, a[2] == 1
sort 方法
語法： array.sort([orderfunc])
sort 方法排序陣列的元素。若未指定參數 orderfunc 則按照
字典序來排列元素。我們可以提供如下形式的函式設定其他
的排序方式：
function my_order_func (a, b)
{
// retuen a negative number if a < b,
//
0 if a == b,
//
a positive number if a > b
}
例
// 比較數值的函式
function numcmp (a, b) { return a – b; }
a = [33, 4 , 1111, 222];
a.sort();
// a 變成 [1111, 222, 333, 4]
a.sort(numcmp); // a 變成 [4, 333, 222, 1111]
concat 方法
語法： array.concat(value,…)
concat 方法把參數所列的元素附加在 array 之後，然後
傳回此新造的陣列，但不改變 array 的值。譬如：
var a = [1, 2, 3];
b = a. concat(4, 5);
// b 為 [1, 2, 3, 4, 5]
b = a. concat([4, 5]);
// b 為 [1, 2, 3, 4, 5]
b = a. concat([4, 5], [6, 7]); // b 為 [1, 2, 3, 4, 5, 6, 7]
b = a. concat(4, [5, [6, 7]]); // b 為 [1, 2, 3, 4, 5, [6, 7]]
String 物件
建立 String 物件
 字串長度
 字串方法

建立 String 物件
 建立空字串
var s = new String();
 建立有初值的陣列
var s = new String("Hello"); // 字串物件 s 為 "Hello"
 轉換自其他型態
var s = new String(3); // 字串物件 s 為 "3"
 轉換自字串常值
var s = "Hello"; // 字串物件 s 為 "Hello"
字串長度
屬性 length 記錄字串的長度（字元個數）。
例
s = new String();
// s.length == 0
s = "Hello";
// s.length == 5
字串方法















charAt
charCodeAt
concat
indexOf
lastIndexOf
match
replace
search()
slice
split
substring
substr
toLowerCase
toUpperCase
valueOf
傳回第 n 個字元值
傳回第 n 個字元的 Unicode 碼值
把引數字串附加在後
由左至右地找出字元或子字串所在的位置
由右至左地找出字元或子字串所在的位置
找出符合規則算式的子字串
用規則算式來搜尋子字串然後置換之
找出符合規則算式的子字串位置
取出指定範圍的子字串
用指定的規則算式把字串分隔成為陣列
用指定首尾位置的方式取出子字串
用指定啟始位置和長度的方式取出子字串
把所有字元改成小寫
把所有字元改成大寫
傳回字串值
產生 HTML 標籤的方法
var s = "Hello";
s.anchor("here");
s.big();
s.blink();
s.bold();
s.fixed();
s.fontcolor("c");
s.fontsize("3");
s.italics();
s.link(url);
s.small();
s.strike();
s.sub();
s.sup();
//
//
//
//
//
//
//
//
//
//
//
//
//
"<a name=\"here\">Hello</a>"
"<big>Hello</big>“
"<blink>Hello</blink>"
"<bold>Hello</bold>"
"<tt>Hello</tt>"
"<font color=\"c\">Hello</font>"
"<font size=\“3\">Hello</font>"
"<it>Hello</it>“
"<a href=url>Hello</a>"
"<small>Hello</small>"
"<strike>Hello</strike>"
"<sub>Hello</sub>"
"<sup>Hello</sup>“
s.bold().link("javascript:alert('Hello')").fontcolor("red");
Date 物件
簡介
 建立 Date 物件
 常用的 Date 方法

簡介
Date 物件主要提供下列的功能：
• 讀取 client 端的時間/日期
• 設定 client 端的時間/日期
• 時間/日期和字串之間的轉換
我們可以採用 client 端的當地時間或 UTC（前身為
GMT）。
UTC: Coordinated Universal Time
See: http://www.ghcc.msfc.nasa.gov/utc.html
建立 Date 物件
var now = New Date(); // now 存當地的目前時間
var xmas = New Date(2003, 12, 25);
常用的 Date 方法
getDate
取得 day of the month
getDay
取得 day of the week
getFullYear
取得四位數字的年份
getHours
取得 hour
getMilliseconds
取得 millisecond
getMinutes
取得 minute
getMonth
取得 month
getSeconds
取得 second
setDate
設定 day of the month
setDay
設定 day of the week
setFullYear
設定四位數字的年份
setHours
設定 hour
setMilliseconds
設定 millisecond
setMinutes
設定 minute
setMonth
設定 month
setSeconds
設定 second
toDateString
把日期部分轉成字串然後傳回
toTimeString
把時間部分轉成字串然後傳回
toString
把日期和時間部分轉成字串然後傳回
toLocaleDateString
把日期部分轉成當地格式的字串然後傳回
toLocaleTimeString
把時間部分轉成當地格式的字串然後傳回
toLocaleString
把日期和時間轉成當地格式的字串然後傳回
數學函式
JavaScript 把若干數學常數和函數包裝在 Math 物件類
別中。由於這些屬性和方法都以靜態（static）的方式定
義，所以不需要透過 Math 物件來使用它們。舉例來說，
我們直接寫：
area = Math.PI * radius * radius;
而不是
m = new Math();
area = m.PI * radius * radius;
數學常數
Math.E
自然對數的底數 e
Math.LN10
ln(10) 的值
Math.LN2
ln(2) 的值
Math.LOG10E
log10(e) 的值
Math.LOG2E
log2(e) 的值
Math.PI
圓周率 
Math.SQRT1_2
1
Math.SQRT1_2
2
的值
2 的值
數學函式
Math.abs(x)
計算 x 的絕對值
Math.acos(x)
計算 cos1 ( x)
Math.asin(x)
計算 sin 1 ( x)
Math.atan(x)
計算 tan1 ( x)
Math.atan2(y, x) 計算座標點 (x,y) 與 x-軸的夾角
Math.ceil(x)
傳回不小於 x 的最小整數值
Math.cos(x)
計算 cos(x)
Math.exp(x)
計算 e x
Math.floor(x)
傳回不大於 x 的最大整數值
Math.log(x)
計算自然對數 ln(x)
Math.max(x, y)
傳回兩數中較大者的值
Math.min(x, y)
傳回兩數中較小者的值
Math.pow(x, y)
計算 x y
Math.random()
傳回一個亂數
Math.round(x)
計算 x 的四捨五入值
Math.sin(x)
計算 sin(x)
Math.sqrt(x)
計算
Math.tan(x)
計算 tan(x)
x

投影片 1 - 國立交通大學資訊工程學系 NCTU

HTML網頁基礎語言

2015 台中工具機展Taichung Machine Tool Exh. 2015

The C Programming Language