0x01 什么是JavaScript
JavaScript是Web的輕量級編程語言，它描述網(wǎng)頁的行為，與HTML和CSS一起工作。
使用<script>標(biāo)簽在HTML中可插入JavaScript。
可以放在哪里？
JavaScript代碼可以放在<head>或者<body>中，也可以都有，且個數(shù)不限。
當(dāng)然，也可以把JS腳本保存在外部文件中，從而被多個網(wǎng)頁使用。
在調(diào)用外部JS腳本時，在<script>標(biāo)簽中使用src屬性設(shè)置要使用的js文件。
0x02 JavaScript 輸出
JavaScript本身沒有打印、輸出的函數(shù)，但是可以通過以下方式來輸出數(shù)據(jù)。
| 方式 | 作用 |
|---|---|
| window.alert() | 彈框 |
| document.write() | 將內(nèi)容寫入HTML文檔 |
| innerHTML | 寫入HTML元素 |
| console.log | 寫入瀏覽器控制臺 |
彈框
![]()
彈框
寫入內(nèi)容至HTML文檔
![]()
寫入內(nèi)容至HTML文檔
寫入HTML元素
![]()
寫入HTML元素
寫入瀏覽器控制臺
![]()
寫入瀏覽器控制臺
0x03 JavaScript 語法
使用var定義變量，字符串可使用單引號或雙引號，操作符、保留字、注釋與C語言等類似。
JavaScript語句和變量都對大小寫敏感。
在每條可執(zhí)行語句結(jié)尾都需要加上英文的分號。
JavaScript 會忽略多余的空格。
變量聲明
變量聲明完之后未賦值前，不帶初始值，即為undefined。
一條語句，多個變量的聲明，與C語言類似，不在此贅述。
重新生命JavaScript變量時，該變量的值不會丟失，即：
var name="xiaoming";
var name;
這兩條語句順序執(zhí)行之后，name變量的值依舊為xiaoming。
數(shù)據(jù)類型
JavaScript擁有動態(tài)類型，相同的變量可以用作不同的類型，即：
var x; //x為undefined
var x = 3.14; //x為數(shù)字
var x = "fine"; //x為字符串
var x = 'nice'; //x為字符串
var x = true; //x為布爾類型
var x = new Array("Cat","Dog","Rabbit"); //x為數(shù)組類型
……
對象（Object）：
對象中不同屬性之間用逗號分隔。
var name={
firstname : "Amy"，
lastname : "Joe"，
}
在使用時，尋址方式可以使用以下兩種方式：
person = name.firstname; //點可以理解為“的”，即名字里面的名
person = name["firstname"];
可以使用new來生命變量類型，例如：var name = new String;
注意：undefined和null是不一樣的，null表示變量的值為空，可以用來清空變量的值；undefined表示變量不含值。
函數(shù)
函數(shù)聲明類似C語言，開頭用function。
JavaScript函數(shù)可以通過一個表達(dá)式來定義，可以存儲在變量中，函數(shù)表達(dá)式存儲在變量中之后，該變量也可以作為函數(shù)來使用。例：
var x = function(m, n){return m+n};
var z = x(6, 7);
關(guān)于JavaScript的類型轉(zhuǎn)換、循環(huán)語句、比較等與C語言類似，不再贅述。
正則表達(dá)式
語法：
/正則表達(dá)式主體/修飾符（可選）
正則表達(dá)式主體是需要檢索的內(nèi)容。
在JavaScript中正則表達(dá)式一般使用search()和replace()兩種方法，前者為檢索需要的內(nèi)容，并顯示位置；后者為檢索并替換相應(yīng)的內(nèi)容。
| 修飾符 | 含義 |
|---|---|
| i | 不區(qū)分大小寫的匹配 |
| g | 全局匹配，即查找所有匹配項，而非找到第一個之后就停止 |
| m | 多行匹配 |
| 量詞 | 含義 |
|---|---|
| n+ | 匹配至少包含一個n的字符串 |
| n* | 匹配包含0個或者多個n的字符串 |
| n? | 匹配包含0個或一個n的字符串 |
JavaScript de RegExp對象在遇到不清楚的時，查詢完整的RegExp參考手冊即可。
0x04 JavaScript 驗證
表單驗證
HTML表單驗證可以通過HTML自動驗證也可以使用JavaScript來驗證，HTML表單自動驗證比較簡單，就不寫了。
使用JavaScript來進(jìn)行表單驗證時，也是在方法中定義自己的需求。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript表單驗證</title>
</head>
<body>
<h1>請按要求輸入相應(yīng)內(nèi)容</h1>
<br>
<p>姓名：</p><input id="name" type="text">
<p>學(xué)號：</p><input id= "sNo" type="text">
<br>
<button type="button" onclick="function1()">Submit</button>
<p id="demo"></p>
<script>
function function1() {
var x = document.getElementById("name").value;
var regName = /^[\u4E00-\u9FA5]+$/; //正則匹配判斷是否為中文字符
var y = document.getElementById("sNo").value;
var regNum = /^\d{8}$/; //正則匹配判斷是否為八位正整數(shù)
if(!regName.test(x)) {
text = "姓名輸入有誤，請重新輸入";
}else if (!regNum.test(y)) {
text = "學(xué)號輸入有誤，請重新輸入";
}else {
text = "提交成功";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
驗證API
JS的API中有表單驗證的功能，其中方法checkValidity()可以驗證input元素中的輸入是否合法，返回的是true或flase。setCustomValidity()方法可以自定義錯誤提示信息。
具體函數(shù)，可在使用時按需查詢。
一開始把驗證API看成了API驗證，怎么都搞不拎清啥意思。我大概是個魔鬼吧hhh
0x05 JavaScript JSON
JavaScript Object Notation（數(shù)據(jù)交換格式），是獨立的語言。
語法規(guī)則
- 數(shù)據(jù)為鍵/值對；
- 數(shù)據(jù)之間用逗號分隔；
- 大括號{}保存對象；
- 方括號[]保存數(shù)組；
- 一個名稱對應(yīng)一個值；
- 名稱和值都各自用雙引號引起來；
- 數(shù)組可以包含對象；
- 一個對象可以保存多個鍵/值對
example：
"demo":[
{"name":"Cat","Color":"Orange"},
{"name":"Dog","Color":"Black"},
{"name":"Rabbit","Color":"White"}
]
JSON字符串和JS對象相互轉(zhuǎn)換
| 函數(shù) | 描述 |
|---|---|
| JSON.parse() | JSON字符串轉(zhuǎn)JS對象 |
| JSON.stringify() | JS對象轉(zhuǎn)JSON字符串 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON字符串轉(zhuǎn)JS對象</title>
</head>
<body>
<p id="miao"></p>
<script>
var text = '{"demo":['+
'{"name":"Cat","Color":"Orange"},'+
'{"name":"Dog","Color":"Black"},'+
'{"name":"Rabbit","Color":"White"}]}';
fine = JSON.parse(text);
document.getElementById('miao').innerHTML = fine.demo[0].name+"'s color is "+fine.demo[0].Color;
</script>
</body>
</html>
JS對象轉(zhuǎn)JSON字符串的操作類似。
寫完這一部分，我只想說：代碼不規(guī)范，調(diào)試好幾行淚QAQ
