我的爪哇學習~第一支 JS 程式!
JavaScript 屬於直譯語言 (interpreted language)，不需事先編譯 (compile)，直接在瀏覽器 (browser) 上執行 ， 最常見於 web 客戶端瀏覽器
JavaScript 程式碼可以這樣寫
<script>
...JavaScript 原碼...
</script>
script 的標籤 (HTML tag) 可被瀏覽器執行
<script> 標籤可以放在網頁 HTML 的任何地方
如 <body> 或 <head> 中
<script> 標籤也可以用 <script type="text/javascript" language="javascript"> 表示
JS基礎語法認識
JS 結尾符號 - 分號 ;
JavaScript 的每一個語句以分號 ; 來做結束
有區分大小寫
不像 HTML，JavaScript 語句是有區分大小寫的，無論是對於變數、函數或物件名稱，如 alert() 寫成 Alert() 是會產生錯誤的
空白
空白 (space), tab 或換行符號 (newline characters) 在 JavaScript 都稱為空白 (whitespace)，JavaScript 程式碼在解析時，會忽略所有的空白
註解 (Comment)
JavaScript 的註解有分單行註解 (雙斜線 //) 和多行註解 (/* 用 "/*" 和 "*/" 符號，被包住在中間的所有字都是註解 */)。
// 這是單行註解
/*
這是...
多
行
註解
*/
範例: Hello world!
<html>
<head>
<script>
alert('Hello world!');
</script>
</head>
<body>
我的爪哇學習~第一支 JS 程式!
</body>
</html>
可將範例貼到 JSFiddle ，按 Run 執行
運作的原理:
當瀏覽器遇 <script> 標籤時，會停止解析 HTML 文件，先執行 <scipt> 裡面的 JS 程式碼，等到執行完程式碼，才會繼續解析接下來的 HTML
引用 JavaScript 檔案
<script src="JavaScript 檔案名稱.js"></script>
avaScript 檔案的副檔名，以 .js 結尾
如果 JavaScript 程式碼是寫在獨立檔案裡面，就不用加上 <script> 標籤！
如一份 JS 程式碼，檔名取做 hello.js，內容就是:
alert('Hello world!');
如果儲存在網站的根目錄，可以在網頁中這樣引用這份程式碼：
<script src="/hello.js"></script>
變數 (variable)
變數的是用來儲存和從變數中讀取資料， 方便進行運算，變數就像是資料的容器 ：
- 用
var宣告一個變數 - 用
=等號 設定一個值 (value) 給變數
例如，宣告一個變數 x，並將 x 的值設為 1：
var x;
x = 1;
也可以在宣告變數的同時指定值：
var x = 1;
也可以將變數進行運算，如這樣寫var x = 1;
var y = 2;
var z = x + y;
也可以用逗號 , 分隔開，一次宣告多個變數： var x, y , z;
var x = 1 ,
var y = 2 ,
var z = x + y;
JS識別字
變數名稱，如 x y z，就稱做識別字
識別字必須是唯一且不重複的，後面定義的同名變數會覆蓋掉前面定義的變數
識別字的命名有一定規則和限制：
- 識別字只允許使用
- 字母 a-z A-Z
- 數字 0-9
- 底線 _
- 錢符號 $
- 識別字的開頭只能是字母、底線或錢符號。
- 識別字是大小寫有別的， 變數 hello 不等於變數 Hello。
- JavaScript 的 保留字 不能用作變數名稱。
JavaScript 允許的字母還包含 Unicode，中文也可以用作變數名稱，例如：
var 色彩 = '紅色';
alert(色彩);
資料型態 (Data Types)
資料型態是一個變數裡面儲存的是什麼類型的資料 (value)
JavaScript ，可分為兩大類資料型態：
一種是基本資料型態 ：
- 布林值 (Boolean): 只包含兩種值
true(是)/false(否) - null: null 是一個特殊值 ，表示這變數裡面沒有東西
- undefined: undefined 也是一個特殊值 (keyword)，表示值還沒有定義或還未指定
- 數值 (Number): 數值類型的值，像是 123 / 3.14159 / 0 包含了整數與浮點數
- 字串 (String): 像是 'hello world' / 由字母、數字、文字、符號等組成，指定時 前後要加上 " 或 ' 符號
- Symbol (符號)，用來表示獨一無二 (unique) 的值。
另一種是複合資料型態 ：
- 陣列 (Array): 陣列用來儲存多個資料，陣列中的資料數量，就是這個陣列的長度 (length)
- 物件 (Object): 基本上，基本資料型態以外的都是物件型態
JavaScript 是動態型別的語言 (Dynamically Typed Language)
JavaScript 是動態型別的語言，在宣告變數的時候，不用指定一個型別給這變數
// 例如不用這樣，跟 JS 直譯器說 score 是一個數字
int score = 100;
JavaScript 直譯器 (瀏覽器) 會根據給的值，自動給一個適當的型態。
// 所以只需要這樣直接宣告變數並給值
var score = 100;
動態型別的意思也是說，可以隨時指定不同型態的值，給同樣一個變數：
var score = 100; // 數值型態
score = 'Joker 得到 100 分'; // 字串型態
typeof
typeof 運算字用來判斷一個運算元 (operand) 是什麼資料型態。
typeof operand
例如：
// 輸出 string
console.log(typeof 'hello');
// 輸出 number
console.log(typeof 123);
// 輸出 boolean
console.log(typeof true);
變數作用域
JavaScript 的變數有其作用的範圍，在作用範圍以外的程式碼就無法存取到該變數
變數分為兩類作用域：
- 局域變數
- 全域變數
例如
function one() {
// 在 function 裡面宣告的變數，作用(存在)範圍只在 function 裡面 (local)
var x = 'hello world';
alert(x); // 會顯示 hello world
}
alert(x); // 會發生錯誤，因為找不到變數
在 function 以外的地方宣告的變數，是所謂的全域變數，所有的 JS 程式碼都能存取到這個變數：
// x 是一個全域變數
var x = 'hello world';
function one() {
alert(x); // 會顯示 hello world
}
alert(x); // 會顯示 hello world
JavaScript 習慣的變數命名風格 - 駝峰式命名 (Camel Case)如 firstName, lastName, carName，也就是第二個字的字母大寫
JavaScript 保留字 (Reserved Words)
| break | default | function | return | var |
| case | delete | if | switch | void |
| catch | do | in | this | while |
| const | else | instanceof | throw | with |
| continue | finally | let | try | |
| debugger | for | new | typeof |
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var myName = "Joker"; //宣告姓名
var myAge = 20; //宣告年齡
var myHeight = 172, myWeight = 60; //宣告身高體重
document.write("大家好，我是" + myName + "，<br/>");
document.write("身高" + myHeight +"公分，體重" + myWeight + "公斤，<br/>");
document.write("今年" + myAge + "歲。");
</script>
</body>
</html>
運算子
JavaScript 有許多不同類型的運算子
- 指定運算子 (Assignment Operators)
- 比較運算子 (Comparison Operators)
- 算術運算子 (Arithmetic Operators)
- 位元運算子 (Bitwise Operators)
- 邏輯運算子 (Logical Operators)
- 字串運算子 (String Operators)
- 三元運算子 (Conditional (ternary) operator)
如指定運算子 = 等號，用來指定一個值給變數：
var x = 100;
或像是算術運算子 + - * /，用來對數值做操作：
var x = 100 + 10;
var y = x + 10;
x 變數值將會是 110，而 y 變數的值則是 120
| 運算子 | 例子 | 說明 |
|---|---|---|
| = | x = y | 將 y 值指定給 x 變數 |
| += | x += y | 意思跟 x = x + y 一樣，將 x y 相加後的值指定回 x 變數 |
| -= | x -= y | 意思跟 x = x - y 一樣，將 x y 相減後的值指定回 x 變數 |
| *= | x *= y | 意思跟 x = x * y 一樣，將 x y 相乘後的值指定回 x 變數 |
| /= | x /= y | 意思跟 x = x / y 一樣，將 x y 相除後的值指定回 x 變數 |
| %= | x %= y | 意思跟 x = x % y 一樣，將 x 除以 y 的餘數指定回 x 變數 |
| **= | x **= y | 意思跟 x = x ** y 一樣，將 x 的 y 次方值指定回 x 變數 |
| <<= | x <<= y | 意思跟 x = x << y 一樣，將 x 所有位元左移 y 位，右邊的位元補入 0 後的值指定回 x 變數 |
| >>= | x >>= y | 意思跟 x = x >> y 一樣，將 x 所有位元右移 y 位，最左邊的位元 (sign bit) 補入跟原本最左位元一樣值後指定回 x 變數 |
| >>>= | x >>>= y | 跟 >>= 一樣，但最左邊的位元補 0 |
| &= | x &= y | 意思跟 x = x & y 一樣，將 x y 做位元 AND 運算後的值指定回 x 變數 |
| ^= | x ^= y | 意思跟 x = x ^ y 一樣，將 x y 做位元 XOR 運算後的值指定回 x 變數 |
| |= | x |= y | 意思跟 x = x | y 一樣，將 x y 做位元 OR 運算後的值指定回 x 變數 |
比較運算子 (Comparison Operators)
用來比較運算子兩邊運算元的關係，比較後傳回 true 或 false
運算元可以是數值、字串、表達式 或 物件
對於不同型態的值，JavaScript 會嘗試將他們轉型 到同樣型態後，再做比較，通常是先轉到數值型態
| 運算子 | 例子 | 說明 |
|---|---|---|
| == | 3 == var1 '3' == var1 |
如果兩邊相等就返回 true |
| != | var1 != 4 var2 != '3' |
如果兩邊不相等就返回 true |
| === | 3 === var1 | 跟 == 的差異在於，=== 不會自動嘗試轉型，型態和值都一樣才會返回 true |
| !== | var1 !== '3' 3 !== '3' |
跟 != 的差異在於，!== 不會自動嘗試轉型，型態或值不一樣都會返回 true |
| > | var2 > var1 var1 > 2 |
如果左邊運算元大於右邊的就返回 true |
| >= | var2 >= var1 var1 >= 3 |
如果左邊運算元大於或等於右邊的就返回 true |
| < | var2 < var1 var1 < 2 |
如果左邊運算元小於右邊的就返回 true |
| <= | var2 <= var1 var1 <= 3 |
如果左邊運算元小於或等於右邊的就返回 true |
算術運算子 (Arithmetic Operators)
算術運算子用來做常見的數值運算。
| 運算子 | 例子 | 說明 |
|---|---|---|
| + | var1 + 10 | 加法 |
| - | var1 - var2 | 減法 |
| * | 10 * 10 | 乘法 |
| / | var1 / 10 | 除法 |
| % | 12 % 5 | 模數運算子 (Remainder)，以某運算式的值除以另一個運算式的值，並傳回餘數。12 % 5 等於 2 |
| ++ | ++10 ++x x++ |
遞增運算子 (Increment)，每次將變數的值加一。如果運算子在變數之前，則會在執行運算式之前修改值。如果運算子在變數之後，則會在執行運算式之後修改值。 例 1: ++10 等於 11 例 2: j = ++k 則 j 的值是 k 的原始值加一 例 3: j = k++ 則 j 的值是 k 的原始值，k 會在其值指派給 j 之後遞增 |
| -- | --10 --x x-- |
遞減運算子 (Decrement)，每次將變數的值減一。如果運算子在變數之前，則會在執行運算式之前修改值。如果運算子在變數之後，則會在執行運算式之後修改值。 例 1: --10 等於 9 例 2: j = --k 則 j 的值是 k 的原始值減一 例 3: j = k-- 則 j 的值是 k 的原始值，k 會在其值指派給 j 之後遞減 |
| - | -x -3 |
一元負運算子 (Unary negation)，例如 -x 如果 x 是 3 則 -x 就是負數 3 |
| + | +3 +true |
一元正運算子 (Unary plus)，用在數值上沒啥意義；通常用來做型別轉換，將運算元轉成數值型態。例如 +true 會將布林值 true 轉型成數值 1 |
位元運算子 (Bitwise Operators)
用來做二進制的位元運算，位元運算子會將運算元看作 32 bits 位元來做運算，然後運算完後會返回數值型態的結果。
| 運算子 | 例子 | binary 運算 | 結果 | 說明 |
|---|---|---|---|---|
| & | 15 & 9 | 1111 & 1001 = 1001 | 9 | Bitwise AND 運算，如果兩個位元都是 1，結果就是 1，否則是 0 |
| | | 15 | 9 | 1111 | 1001 = 1111 | 15 | Bitwise OR 運算，如果任何一個位元是 1，結果就是 1，否則是 0 |
| ^ | 15 ^ 9 | 1111 ^ 1001 = 0110 | 6 | Bitwise XOR 運算，如果位元不相同，結果是 1，否則是 0 |
| ~ | ~15 | ~00000000...00001111 = 11111111...11110000 | -16 | Bitwise NOT 運算，將所有位元的 0 變成 1，1 變成 0 |
Bitwise shift 運算子: (9 的二進制是 1001)
| 運算子 | 例子 | 說明 |
|---|---|---|
| << | 9 << 2 = 36 | 左移運算 (Left shift)，將所有位元向左移 n 個位置，右邊的位元補入 0 |
| >> | 9 >> 2 = 2 | 右移運算 (Sign-propagating right shift)，將所有位元向右移 n 個位置，最左邊的位元 (sign bit) 補入跟原本最左位元一樣值，保持正負數一致 |
| >>> | 19 >>> 2 = 4 | 補零右移 (Zero-Fill Right Shift)，跟 >> 一樣，但最左邊的位元補 0 |
邏輯運算子 (Logical Operators)
邏輯運算子用來做布林值 (boolean) 的運算，運算結果傳回 true 或 false。
null, 數值 0, NaN, 空字串 '' 和 undefined 是 false，其他的值都是 true。| 運算子 | 例子 | 說明 |
|---|---|---|
| && | expr1 && expr2 | Logical AND，如果 expr1 和 expr2 都是 true，就會傳回 true， 否則傳回 false |
| || | expr1 || expr2 | Logical OR，如果 expr1 或 expr2 是 true，就會傳回 true，否則傳回 false |
| ! | !expr | Logical NOT，如果 expr 是 true，就傳回 false，否則傳回 true |
但 && 和 || 還有比較特別的地方，如果運算元的值不是布林值，實際上會傳回其中一個運算元的值，看下面例子。
// foo 是 Dog
var foo = 'Cat' && 'Dog';
// foo 是 false
// 因為 && 遇到 false 的運算元，就會直接返回，不會繼續再往下判斷 (Short-circuit evaluation)
var foo = false && 'Cat';
// foo 是 Cat
// 因為 || 遇到 true 的運算元，就會直接返回，不會繼續再往下判斷 (Short-circuit evaluation)
var foo = 'Cat' || 'Dog';
// foo 是 Cat
var foo = false || 'Cat';
三元運算子 (Conditional (ternary) operator)
condition ? val1 : val2
如果 condition 是 true， 就傳回 val1 的結果，否則傳回 val2 的結果。例如：
// 如果 age 變數大於等於 18，則 status 就會是 adult
// 相反的，如果 age 變數小於 18，則 status 就會是 minor
var status = (age >= 18) ? 'adult' : 'minor';
運算子優先權 (Operator precedence)
各種運算子在處理上的優先次序 (precedence) 是依一般算術規則，先乘除後加減，如果你有一些運算要優先處理，可以放在 () 小括號裡面，例如：
100 + 50 / 2 = 125
(100 + 50) / 2 = 75
這邊整理出 JavaScript 各種運算子的優先權，由高至低排列：
| 運算子 | 優先權 |
|---|---|
| member | . [] |
| call / create instance | () new |
| negation/increment | ! ~ - + ++ -- typeof void delete |
| multiply/divide | * / % |
| addition/subtraction | + - |
| bitwise shift | << >> >>> |
| relational | < <= > >= in instanceof |
| equality | == != === !== |
| bitwise-and | & |
| bitwise-xor | ^ |
| bitwise-or | | |
| logical-and | && |
| logical-or | || |
| conditional | ?: |
| assignment | = += -= *= /= %= <<= >>= >>>= &= ^= |
| comma | , |
JavaScript 流程控制 (Control flow)
JavaScript 提供了這些流程控制的語法：
- if...else
- switch
- for
- while
- label
- try catch finally
JavaScript if...else 語法
if
if (condition) {
// statements
}
當 condition 為 true 的時候，才執行大括號裡面的語句，如果是 false 則跳過整個 if 區塊。
例如：
if (age > 18) {
status = 'adult';
adultNum += 1;
}
if else
if (condition) {
statement_1;
} else {
statement_2;
}
當 condition 為 true 的時候，執行 if 大括號裡面的語句，如果是 false 則執行 else 區塊裡面的語句。
例如：
if (age > 18) {
status = 'adult';
adultNum += 1;
} else {
status = 'minor';
minorNum += 1;
}
else if
if (condition_1) {
statement_1;
} else if (condition_2) {
statement_2;
} else if (condition_n) {
statement_n;
} else {
statement_last;
}
你還可以用很多個 else if 切分更多個條件區塊，程式會從上到下執行每一個 condition，直到第一個 condition 為 true 的區塊，且就只會執行這個區塊的語句；但如果 condition 全部都是 false 則執行 else 區塊 (你也可以省略 else 區塊，則會全部跳過什麼都不執行)。
另外，如果 if, else 或 else if 區塊裡面只有一個語句，則可以省略大括號，例如：
if (age > 18) {
status = 'adult';
} else {
status = 'minor';
}
跟下面這個一樣意思：
if (age > 18)
status = 'adult';
else
status = 'minor';
但好習慣還是加上大括號，避免非預期錯誤，例如改天你 if 裡面多加了一行語句，這時沒大括號就會出錯喔！
False values
還記得嗎？在運算子有提到過的，JavaScript 只有對下面這些值會判斷為 false 其他都是 true：
- 布林值 false
- undefined
- null
- 數值 0
- NaN
- 空字串 ''
例如：
var text = '';
if (text) {
// 我不會被執行
} else {
// 我會被執行
}單向流程
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var a = prompt("請輸入數字", "0");
if (a > 0) document.write("您輸入的值是正數");
</script>
</body>
</html>
prompt 是JS內建函式，執行時會顯示對話方塊要求使用者輸入
雙向選擇條件
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var a = prompt("請輸入數字", "0");
if (a >= 0) {
document.write("您輸入的值是正數");
}else{
document.write("您輸入的值是負數");
}
</script>
</body>
</html>
條件運算
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var a = prompt("請輸入數字", "0");
(a >= 0) ? document.write("您輸入的值是正數") : document.write("您輸入的值是負數");
</script>
</body>
</html>
多向選擇條件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var score = prompt("請輸入分數", "0");
if(score>=60 && score<70){
document.write('丙等');
}else if(score>=70 && score<80){
document.write('乙等');
}else if(score>=80 && score<90){
document.write('甲等');
}else if(score>=90 && score<=100){
document.write('優等');
}else{
document.write('不及格');
}
</script>
</body>
</html>
Switch 多向選擇條件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var payway = prompt("請選擇付款方式：1.ATM匯款 2.刷卡 3.貨到付款", "1");
switch (payway){
case "1":
document.write("我的付款方式為ATM匯款");
break;
case "2":
document.write("我的付款方式為刷卡");
break;
case "3":
document.write("我的付款方式為貨到付款");
break;
default:
document.write("請選擇正確的付款方式");
}
</script>
</body>
</html>
break 關鍵字
JavaScript 執行到 break 這個關鍵字的時後，就會直接跳出整個 switch 區塊，繼續往下執行
如果沒有 break 則程式會從符合的 case 區塊開始，一路往下執行到遇到 break 為止！
JavaScript 迴圈語法
JavaScript while 迴圈語法
語法：
while (condition) {
// statements
}
當 condition 為 true 時，則重覆執行 while 區塊內的語句， 直至 condition 變 false。
例如：
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
- 每一次迴圈開始執行之前，都會先判斷 n 是否小於 3，如果不是則跳出迴圈
- 在每一次回圈內都會將 n 加 1，將 x 加上 n
所以當 while 迴圈執行結束後，x 的值會是 6
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var i = 0;
while (i<10){
i++;
document.write(i + " ");
}
</script>
</body>
</html>
do...while 語法
while 還有另一種語法，用來讓你可以確保迴圈至少被執行一次 (第一次)。
語法：
do {
// statements
} while (condition);
例如：
var i = 10;
do {
i += 1;
} while (i < 5);
上面的例子中，i += 1 無論如何都會被執行一次，在第一次迴圈中 i 會被加 1 等於 11，而條件式 i < 5 會是 false，所以會跳出 while 迴圈，執行完 do...while 後 i 變數的值會變成 11。
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var i = 0;
do {
i++;
document.write(i + " ");
} while(i<10)
</script>
</body>
</html>
JavaScript for 迴圈語法
for 迴圈用來重覆執行 for 區塊內的語句
語法：
for (initialExpression; condition; incrementExpression) {
// statements
}
- 其中 initialExpression 是初始化語句，在迴圈第一次執行之前，會先執行 initialExpression
- 在每一次執行迴圈之前，都會先執行 condition 條件式，如果值是 true 則執行迴圈，false 則跳出 for 迴圈
- 而在每一次執行完迴圈之後，都會執行 incrementExpression 語句
例如：
var counter = 0;
for (var i = 0; i < 5; i++) {
counter += i;
}
- 在迴圈開始之前，會先初始化變數 i = 0
- 當每一次迴圈開始執行之前，會判斷 i 是否小於 5，如果大於 5 則跳出迴圈，小於 5 則執行迴圈內容
- 而每當執行完一次迴圈後，會將變數 i 加 1
- 所以每一個迴圈，變數 i 分別會是 0, 1, 2, 3, 4, 5，直到 i 的值變成 5 時則跳出迴圈
所以上面的迴圈執行完後，最後 counter 的值會是 10！
另外，在 initialExpression 語句中，你還可以用逗點 , 隔開多個初始化語句。例如：
for (var i = 0, j=10; i < 5; i++) {
// .....
}
你也可以省略 initialExpression 或 incrementExpression 語句。例如：
var i = 0;
var counter = 0;
for (; i < 5;) {
counter += i;
i += 1;
}
你甚至可以省略全部語句 initialExpression, condition, incrementExpression，這其實就是無窮迴圈 (infinite loop) 的意思。例如：
var i = 0;
var counter = 0;
for (;;) {
counter += i;
i += 1;
if (i >= 5) {
// 如果你沒用 break 跳出 for 迴圈，則整個程式會卡在迴圈裡面出不去喔
break;
}
}
break
break 用來跳出整個 for 迴圈，讓程式繼續往下執行
continue
continue 用來讓程式跳過迴圈剩餘的程式碼，直接執行下一次迴圈。例如：
var counter = 0;
for (var i = 0; i < 5; i++) {
if (i < 3) {
continue;
}
counter += i;
}
則當 for 迴圈執行完後 counter 的值會是 7，因為當 i 等於 0, 1, 2 的時候都被跳過 continue 之後的程式碼，直到 i 等於 3, 4 的時候才會執行迴圈內容
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var countI = 0;
for (i=1;i<=10;i++){
countI += i;
}
document.write(countI);
</script>
</body>
</html>
JavaScript Function (函數)
函數 (function) 用來將會重複使用的程式碼封裝在一起，方便重複執行
函數宣告 (Function declaration)
先來看看函數的宣告語法：
function functionName(parameter1, parameter2, ...) {
// statements
// return value;
}
- 我們用
function這個關鍵字來宣告一個函數 - 緊接著是指定這個函數的名稱 functionName
- 然後小括號
()裡面指定這個函數的參數，可以用逗點,分隔多個參數 - 最後在大括號
{}裡面則是你想封裝在這個 function 的程式碼 - 一個函數可以有返回值，使用
return關鍵字來返回一個值
undefined例如，我們宣告一個計算平方的函數，叫它做 square：
function square(number) {
return number * number;
}
square 有一個參數 number，這個簡單的函數只有一行程式碼，最後會回傳 number 的平方，作為這個函數的返回值
呼叫函數 (Calling function)
宣告一個函數並不會自動的執行它，你要使用函式呼叫的語法，來呼叫並執行一個函數的內容。
函數呼叫語法 - 使用函數名稱加上 () 運算子來指定傳入的參數：
functionName(parameter1, parameter2, ...);
例如，你可以這樣呼叫上面定義好的 square 函數：
// 這樣會輸出 100
console.log(square(10));
// 可以將返回值存到一個變數
var squareValue = square(10);
// 函數呼叫的返回值，可以像變數一樣做操作
// 這樣會輸出 1000
console.log(square(10) * 10)
變數的存在範圍 (Function scope)
你在函數內定義的任何變數 (local variable)，只有在函數裡面才可以存取到這個變數。
在函數裡面除了可以存取到局部變數 (local variable)，也可以存取到全域變數 (global variable)。
舉個例子：
// 全域變數 - global scope
var num1 = 20;
var num2 = 3;
var name = 'Mike';
// 這個函數定義全域空間 - global scope
function multiply() {
// 函數內部可以存取到全域變數
return num1 * num2;
}
// 輸出 60
console.log(multiply());
function getScore () {
// 局部變數 - function scope
// 作用範圍只在函數內部
var num1 = 2;
var num3 = 4;
// 如果沒加 var 宣告變數，這個變數則是一個全域變數
num2 = 5; // 存取到全域變數 num2
num4 = 6; // 宣告一個新的全域變數 num4
// 函數也可以宣告在其他函數內部 (nested function) - function scope
function add() {
// 內部函數可以存取到外部函數的局部變數
return name + ' scored ' + (num1 + num2 + num3);
}
return add();
}
console.log(getScore()); // "Mike scored 11"
// 會存取到全域變數 num1，輸出 20
console.log(num1);
// 會存取到全域變數 num2，輸出 5
// 因為全域變數 num2 在函數內部被設成 5
console.log(num2);
//會存取到全域變數 num4，輸出 6
console.log(num4);
// 全域空間存取不到 function 內部的變數
// 會發生錯誤 - Uncaught ReferenceError
console.log(num3);
// 全域空間也存取不到 function 的內部函數
// 會發生錯誤 - Uncaught ReferenceError
console.log(add());
函數表達式 (Function expression)
函數在 JavaScript 是一個一級物件 (first-class object)，這意思就是一個函數可以當作別的函數的參數、函數的返回值、或做為一個變數的值。
所以你也可以用 Function expression 的方式來宣告一個函數，將一個匿名函數 (anonymous function / function literal) 當作值指定給一個變數。
例如：
var square = function(number) {
return number * number;
};
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
function myInformation(){
alert("hello world！");
}
myInformation();
</script>
</body>
</html>
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
function showName(myName){
document.write("大家好，我的名字叫：" + myName + "。<br />");
}
showName("David");
showName("Lily");
</script>
</body>
</html>
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
function convertDF(dc){
return dc * 1.8 + 32;
}
var dc = prompt("請輸入攝氏溫度：","25");
document.write("華氏溫度為：" + convertDF(dc));
</script>
</body>
</html>
JavaScript Array (陣列)
陣列 (array) 是一個有序的序列，陣列中可以儲存不定數量的任何值，陣列在 JavaScript 中屬於複合資料型態 (composite data type)。
宣告陣列 (Create an Array)
我們可以用 array literal [] 來宣告一個新陣列。
語法：
var arrayName = [item1, item2, ...];
例如：
var fruits = ['Apple', 'Banana'];
,，例如 ['Apple', 'Banana',] 因為在不同的瀏覽器可能會發生錯誤。存取陣列 (Access the Elements of an Array)
陣列中的每一個值我們稱做一個元素，每一個元素儲存在陣列中固定的位置，我們稱做索引 (index)，索引值從 0 開始，表示陣列中的第一個元素，第二個之後的元素索引值則依序加 1 (0, 1, 2, 3, ...)。
我們可以用 [] 運算子來存取陣列中的元素。
語法：
ary[index]
讀取陣列中的元素
var fruits = ['Apple', 'Banana'];
// Apple
var first = fruits[0];
// Banana
var last = fruits[fruits.length - 1];
更改陣列中某個元素的值
var fruits = ['Apple', 'Banana'];
fruits[0] = 'Orange';
fruits[1] = 101;
// 輸出 ["Orange", 101]
console.log(fruits);
取得陣列長度 (length)
你可以由陣列的 length 屬性得到一個陣列的長度：
var fruits = ['Apple', 'Banana'];
// 輸出 2
console.log(fruits.length)
新增元素
你可以用 push() 方法來新增元素到陣列最後面：
var fruits = ['Apple', 'Banana'];
fruits.push('Orange');
// 輸出 ["Apple", "Banana", "Orange"]
console.log(fruits);
或用 ary[aryLength] 的方式：
var fruits = ['Apple', 'Banana'];
fruits[fruits.length] = 'Orange';
// 輸出 ["Apple", "Banana", "Orange"]
console.log(fruits);
上面的 fruits.length 其實就是陣列目前最大索引值加 1 的意思，但一般都會用 .push() 比較方便。
或用 unshift() 方法來新增一個元素到陣列最前面：
var fruits = ['Apple', 'Banana'];
fruits.unshift('Orange');
// 輸出 ["Orange", "Apple", "Banana"]
console.log(fruits);
刪除元素
你可以用 pop() 方法來移除陣列中的最後一個元素：
var fruits = ['Apple', 'Banana'];
// pop() 除了移除元素，還會返回移除的元素值
var last = fruits.pop(); // Banana
// 輸出 ["Apple"]
console.log(fruits);
用 shift() 方法來移除陣列中的第一個元素：
var fruits = ['Apple', 'Banana'];
// shift() 除了移除元素，還會返回移除的元素值
var first = fruits.shift(); // Apple
// 輸出 ["Banana"]
console.log(fruits);
delete 運算子可以用來刪除特定位置的元素，但它不會移除元素，只是將該位置的元素值變成 undefined：
var fruits = ['Apple', 'Banana', 'Orange'];
delete fruits[0];
// [undefined, "Banana", "Orange"]
fruits;
迴圈呼叫陣列 (for loop Array Elements)
for 語法可以用來遍歷陣列中所有的元素。
用法：
var fruits = ['Apple', 'Banana', 'Orange'];
for (var i=0; i<fruits.length; ++i) {
console.log(fruits[i]);
}
上面依序會輸出：
Apple
Banana
Orange
範例-一維陣列
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var student = ["David","Lily","Perry"];
document.write("<table border='1'><tr><td>編號</td><td>姓名</td></tr>");
for (var i = 0; i < student.length; i++) {
document.write("<tr><td>" + (i+1) + "</td><td>" + student[i] + "</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
範例-多維陣列
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
var student = new Array();
student[0]=["David", "95", "80"];
student[1]=["Lily", "82", "85"];
student[2]=["Perry", "90", "92"];
document.write("<table border='1'><tr><td>姓名</td><td>國文</td><td>英文</td></tr>");
for (var i=0; i<student.length; i++) {
document.write("<tr>");
for (var j=0; j<student[i].length; j++) {
document.write("<td>" + student[i][j] + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
JavaScript Object (物件)
JavaScript 物件 (object) 是一個複合資料型態 (composite data type)，可以儲存不定數量的鍵值對 (key-value paris)，而一組鍵值對我們稱做物件的一個屬性 (property)。一個屬性的值 (value) 可以是任何資料型態 (也可以是函數)；而屬性的名稱 (key / name) 是一個字串型態。
物件宣告 (Creating Objects)
有兩種方式可以建立一個物件：
Object Constructor (物件建構式)
用 new 關鍵字加上 Object() 來宣告一個物件：
var myObj = new Object();
Object Literal (物件實字)
object literal 是最常用也最方便的語法，用 {} 就可以宣告一個物件：
var myObj = {};
物件的屬性 (Object Properties)
我們可以用 . 運算子來存取物件的屬性。
語法：
objectName.propertyName
例如：
var myObj = {};
// 建立一個叫 color 的屬性，值是 blue
myObj.color = 'blue';
// 存取物件屬性
var myColor = myObj.color;
或用 [] 運算子來存取物件的屬性。
語法：
objectName['propertyName']
例如：
var myObj = {};
// 建立一個叫 color 的屬性，值是 blue
myObj['color'] = 'blue';
// 存取物件屬性
var myColor = myObj['color'];
用 [] 特別的地方在於，中括號裡面可以是一個變數，例如：
var myObj = {};
var propName = 'color';
// 建立一個叫 color 的屬性，值是 blue
myObj[propName] = 'blue';
// 會輸出 blue
console.log(myObj[propName]);
// 但如果你用 . 運算子
// 會新增一個叫 propName 的屬性，而不是叫 color
myObj.propName = 'blue';
[] 運算子除了可以使用變數之外，還有當你的屬性名稱包含空白或點字元的時候。例如 myObj['hello ...'] = 'world'。用 object literal 我們也可以在宣告物件時，同時建立屬性！
語法：
var obj = {property1: value1, property2: value2, ..., propertyN: valueN}
例如：
// 建立一個物件，這物件有兩個屬性 color 和 height
var myObj = {'color': 'blue', 'height': 101};
object literal 中的屬性名稱的引號可以省略：
// 建立一個物件，這物件有兩個屬性 color 和 height
var myObj = {color: 'blue', height: 101};
物件的方法 (Object Methods)
物件的屬性值如果是一個函數，我們稱它是物件的方法 (method)。
物件的方法可以定義一個物件可以做的動作 (action)，你可以像執行函數一樣執行一個物件的方法：
objectName.methodName();
例如：
var me = {
firstName: 'Mike',
lastName: 'Lee',
age: 30,
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
// name = 'Mike Lee'
var name = me.fullName();
this 是物件方法中可以使用的關鍵字，this 是一個物件參考，當物件在執行時，可以使用 this 來代表 "自己"。
JavaScript 內建物件 (JavaScript Native Objects)
JavaScript 有一些內建物件，也可以稱作資料型態，包含：
- Number 物件: 數字型態的物件，如整數 (5, 10) 或浮點數 (3.14)
- Boolean 物件: 表示邏輯真假值的物件，真就是 true，假就是 false
- String 字串物件: 任何字元 (Unicode)
- Array 陣列物件: 可用來容納任何其他物件
- Math 物件: 提供許多常用的數學常數及數學計算函數
- Date 物件: 專門處理時間和日期的物件
- RegExp 物件: 即正規表示式 (regular expression) 物件
每一種物件都有各自的屬性 (attribute) 和方法 (method) 可以使用。
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<script>
function Person(name, age, weight, height){
this.name = name;
this.age = age;
this.weight = weight;
this.height = height;
this.sayHello = function(){
return "您好，我是"+name +"，今年"+age+ "歲，身高"+height+"公分，體重"+weight+"公斤。";
}
};
person1 = new Person("David", 25, 75, 180);
person2 = new Person("Ken", 20, 65, 175);
document.write(person1.sayHello() + "<br/>"+ person2.sayHello());
</script>
</body>
</html>
JavaScript DOM (Document Object Model)
DOM (Document Object Model) 定義了一組標準 API (Application Programming Interface) 讓我們可以用 JavaScript 對 HTML 文件做操作。
DOM 將一份 HTML 文件看作是一個樹狀結構的物件，讓我們可以方便直觀的存取樹中的節點 (node) 來改變其結構、樣式 (CSS) 或內容等：
圖片來自 Wikipedia DOM
HTML DOM 規範中定義了這些類型的 API：
- 讓我們可以對 HTML 的元素 (element) 當作是 JavaScript 物件 (object) 來操作
- 定義了 HTML 元素有哪些屬性 (properties) 可以來做存取
- 定義了 HTML 元素有哪些方法 (methods) 可以來被操作
- 定義了 HTML 元素事件 (events)，讓我們可以針對特定元素來綁定事件處理函式 (例如使用者按下滑鼠、在鍵盤打字都是所謂的事件)
DOM API 的使用範例
// 取得頁面上所有的 <p> 元素
var paragraphs = document.getElementsByTagName('p');
// 將所有的 <p> 元素的文字顏色都改成綠色
for (var i=0; i<paragraphs.length; ++i) {
paragraphs[i].style.color = 'green';
}
document.getElementById(id)
document.getElementById 用來根據 id 取得一個 HTML 元素。
例如這一個 HTML 頁面：
<html>
<head>
<title>getElementById example</title>
</head>
<body>
<p id="para">Some text here</p>
</body>
</html>
我們可以這樣取得其中 id 為 para 的 p 元素：
var elem = document.getElementById('para');
document.getElementsByTagName(name)
document.getElementsByTagName 用來根據 HTML 標籤 (tag) 名稱取得所有這個標籤的元素集合 (HTMLCollection)，返回的結果是一個像陣列 (array) 的物件。
每個 HTML DOM 元素也有 getElementsByTagName 方法 - node.getElementsByTagName(name)，用來找該元素下面的子元素。
例如這一個 HTML 頁面：
<html>
<head>
<title>getElementsByTagName example</title>
</head>
<body>
<p>Some outer text</p>
<p>Some outer text</p>
<div id="div1">
<p>Some div1 text</p>
<p>Some div1 text</p>
<p>Some div1 text</p>
<div id="div2">
<p>Some div2 text</p>
<p>Some div2 text</p>
</div>
</div>
<p>Some outer text</p>
<p>Some outer text</p>
</body>
</html>
我們可以用 JavaScript 這樣存取 HTML 元素：
function getAllParaElems() {
// 取得所有的 <p> 元素
var allParas = document.getElementsByTagName('p');
// 取得總共有幾個 <p> 元素
// num = 9
var num = allParas.length;
// .....
}
function div1ParaElems() {
// 取得 id 為 div1 的 HTML 元素
var div1 = document.getElementById('div1');
// 取得 div1 下面所有的 <p> 元素
var div1Paras = div1.getElementsByTagName('p');
// 取得 div1 下面總共有幾個 <p> 元素
// num = 5
var num = div1Paras.length;
// .....
}
function div2ParaElems() {
// 取得 id 為 div1 的 HTML 元素
var div2 = document.getElementById('div2');
// 取得 div2 下面所有的 <p> 元素
var div2Paras = div2.getElementsByTagName('p');
// 取得 div2 下面總共有幾個 <p> 元素
// num = 2
var num = div2Paras.length;
// .....
}範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<a id="myHomePage" href="http://www.google.com.tw">Google</a>
<script>
var findUrl = document.getElementById("myHomePage");
alert(findUrl.innerHTML + " 的網址是 \n" +findUrl.href);
</script>
</body>
</html>
範例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>範例</title>
</head>
<body>
<img src="https://stickershop.line-scdn.net/stickershop/v1/product/1122636/LINEStorePC/main.png;compress=true" alt="酷咕鴨">
<img src="https://tw.portal-pokemon.com/play/resources/pokedex/img/pm/0783062d0d860b8ae7d8e859241a700359c4d981.png" alt="可達鴨">
<img src="https://p1-news.yamedia.tw/NzAyNzUybmV3cw==/23d50e04b0c3027b.jpg" alt="企鵝">
<script>
var findImg = document.getElementsByTagName("img");
var msg="";
for(var i=0; i<findImg.length; i++){
msg += "第"+(i+1)+"圖片為："+findImg[i].alt+"\n";
}
alert(msg);
</script>
</body>
</html>
留言列表
