JavaScript學習筆記（1）
阿新 • • 發佈：2018-12-11
簡介
JavaScript是目前web開發中不可缺少的指令碼語言，js不需要編譯即可執行，執行在客戶端，需要通過瀏覽器來解析執行JavaScript程式碼。
作用
- 動態的修改html及css的程式碼（修改的是瀏覽器記憶體中的那一份程式碼）
- 對錶單進行校驗
特點：
- 互動性（它可以做的就是資訊的動態互動）
- 安全性（不允許直接訪問本地硬碟）
- 跨平臺性（只要是可以解析js的瀏覽器都可以執行，和平臺無關）
JavaScript和Java有何區別？
| JavaScript | Java |
|---|---|
| Netscape公司的產品，最初叫Livescript | Sun公司的產品，現在是Oracle公司的產品 |
| 直譯式指令碼語言 | 需要先編譯成位元組碼檔案，再執行 |
| 弱型別語言 | 強型別語言 |
JavaScript建立
一、內嵌式 直接寫在html檔案內部，通過一個標籤對來包裹一個範圍，理論上js可以書寫在頁面的任意位置。 alert(); 彈出一個警告框，呼叫的是瀏覽器的元件，所以不同瀏覽器的樣子是不一樣的。 案例程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>內嵌式</title> <script> alert("恭喜您中了 500 萬現金大獎！！！") </script> </head> <body> </body> </html>
執行結果：
二、外鏈式
首先新建一個檔案型別為.js的檔案，然後在該檔案中寫js語句，通過script標籤對引入到html頁面中。 ex1.js檔案內容：
alert("恭喜您又中了 5000 萬");
案例程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>內嵌式</title> <script src="../js/ex1.js"></script> </head> <body> </body> </html>
執行結果：
- 不會主動執行，需要條件觸發！
- 單雙引號必須交替使用！ 案例程式碼1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外鏈式</title>
</head>
<body>
<button onclick="alert('恭喜你，被騙了 500 萬！')">點我啊！</button>
</body>
</html>
執行結果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外鏈式</title>
</head>
<body>
<!--<button onclick="alert('恭喜你，被騙了 500 萬！')">點我啊！</button>-->
<input type="button" value="點我啊" onclick="alert('恭喜你，又被騙了 5000 萬！')">
</body>
</html>
JavaScript中的資料型別
數值型：number（凡是數字都是數值型，不區分整數和小數） 字串：string（凡是引號包裹起來的內容全部都是字串） 布林：boolean（true、false） 物件型別：object（特殊取值null） 未定義型：undefined
這和Java存在很大的不同！
JavaScript中的變數
宣告方法
var 變數名稱 = 儲存的資料;
變數命名規則：和Java一樣
- 只能由字母、數字、_（下劃線）、$（美元符號）組成。
- 不能以數字開頭。
- 命名中不能出現-（js會理解成減號進行減法的操作），不能和關鍵字衝突。 雖然沒有給變數設定資料型別，但是js會根據實際情況判斷變數的實際資料型別。
舉例：
數值型：var i =10; var i = 1.2;
字串型別：var s = "這是js字串";
布林型別：var s = true;
案例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>資料型別</title>
<script>
var a;
alert(typeof a);
a = 998;
alert(typeof a);
a = "用心做教育";
alert(typeof a);
a = true;
alert(typeof a);
</script>
</head>
<body>
</body>
</html>
執行結果：
1.
2.
JavaScript算數運算子
-
* / % ++ --
和Java類似，但是需要注意的是：
- 由於js中數字不存在型別區分，所以不存在整數除以整數結果還是一個整數的說法。
- 字串和其他的資料使用+號運算，會連線成一個新的字串。
- 字串使用除了+以外的運算子：如果字串本身是一個數字，那麼會自動轉成number進行運算，否則就會返回一個NaN的結果，表示這不是一個數字。
案例程式碼及結果：
<script>
// 請問1 : 1234 / 1000 * 1000, 結果為 ?
alert(1234 / 1000 * 1000); // 1234
// 請問2 : var s = “12”; s -= 10; alert(s); 結果為 ?
var s = "12";
s -= 10;
alert(s); // 2
// 請問3 : var s = “aa”; s -= 10; alert(s); 結果為 ?
var s = "aa";
s -= 10;
alert(s); // NaN Not a Number 不是一個數字
var s = "12";
s += 10;
alert(s); // 1210
</script>
關係運算符
> >= < <= !=
== 等於（只比較內容）
=== 恆等於（比較內容的同時還要比較資料型別）
案例程式碼及結果
<script>
// 請問1 : 3 > 5, 結果為 ?
alert(3 > 5); // false
// 請問2 : “22” == 22 結果為 ?
alert("22" == 22); // true (僅僅判斷數值)
// 請問3 : “22” === 22 結果為 ?
alert("22" === 22); // false (恆等於, 數值和型別都要相等)
</script>
邏輯運算子：
&& 與 true&&false ====>false
|| 或 true||false ====>true
！ 非 !true ====>false
false：false, 0, null, undefined
true：true, 非0, 非null, 非undefined
案例程式碼及結果
<script>
// 請問1 : 8 < 7 && 3 < 4, 結果為 ?
alert(8 < 7 && 3 < 4); // false
// 請問2 : -2 && 6 + 6 && null 結果為 ?
alert(-2 && 6 + 6 && null); // null
// 請問3 : 1 + 1 && 0 && 5 結果為 ?
alert(1 + 1 && 0 && 5); // 0
// 請問1 : 0 || 23 結果為 ?
alert(0 || 23); // 23
// 請問2 : 0 || false || true 結果為 ?
alert(0 || false || true); // true
// 請問3 : null || 10 < 8 || 10 + 10結果為 ?
alert(null || 10 < 8 || 10 + 10); // 20
// 請問4 : null || 10 < 8 || false結果為 ?
alert(null || 10 < 8 || false); // false
</script>
三元運算子
條件？表示式1：表示式2 如果條件為true，返回表示式1的結果 如果條件為false，返回表示式2的結果
此外，還有if語句，switch語句判斷語句和while、do while等迴圈語句，這些都和Java語法是一樣的。
自定義函式
函式：function 可以獨立封裝一段程式碼，當需要使用被封裝的功能時，可以去呼叫這個函式。
function 函式名(形式引數){函式體}
呼叫函式：函式名(實際引數);
注意：
- 函式只有被呼叫後才會執行；
- 如果函式需要返回值,直接使用return返回即可, 不需要考慮返回值型別。 案例程式碼：
<script type="text/javascript">
// 定義一個函式 : function
function demo2() {
return 666;
}
// 呼叫函式 :
alert(demo2());
</script>
執行結果：
- 如果函式需要傳遞引數,不需要指定引數的型別,直接使用變數名即可。 程式碼：
<script type="text/javascript">
// 定義一個函式 : function
function demo3(a, b) {
return a + b;
}
// 呼叫函式 :
alert(demo3(10, 20));
</script>
執行結果：
- 函式中沒有過載的概念,如果出現2個重名的函式名,後面的會把前面的覆蓋掉。 程式碼：
<script type="text/javascript">
// 定義一個函式 : function
function demo4(a, b) {
alert("呼叫1...");
}
function demo4() {
alert("呼叫2...");
}
demo4(10, 20);
demo4();
</script>
執行結果：
匿名函式
匿名函式也就是沒有名字的函式
function(形式引數){函式體}
呼叫方式：將匿名函式賦值給一個變數，通過變數名呼叫函式
定義函式並賦值給變數：var fn = function(形式引數){函式體}
呼叫函式：fn(實際引數);
程式碼：
<script type="text/javascript">
// 匿名函式 : 沒有名稱的函式
var func = function(i, u) {
alert(i + " love " + u);
}
// 呼叫函式 :
func("柳巖", "小溫");
</script>
執行結果：
