文章目錄
JavaScrip
1 概述
1.概述
弱類型語言
JavaScript是客戶端腳本語言，是一種基於對象(object)和事件驅動(Event Driven)的腳本語言。JavaScript認爲文檔和顯示文檔的瀏覽器都是由不同的對象組成的集合。這些對象具有一定的屬性，你可以對這些屬性進行修改或計算。
它由三部分組成:
ECMAScript (核心語言規範)
DOM(文檔對象模型, Document Object Model )
BOM (瀏覽器對象模型, Browser Object Model )
組成：對象（任意標籤）+ 事件
2.JavaScript與Java的區別：
JavaScript和Java是兩個公司開發的不同產品；
Java是SUN公司推出的新一代面向對象的程序設計語言；
而JavaScript是Netscape公司的產品，其目的是爲了擴展其瀏覽
器功能；
現在JavaScript已被標準化爲ECMAScript,主流的瀏覽器都支持。
JavaScript的3種寫法:
➢在標識<script>標籤對之間就可加入JavaScript腳本代碼。其中的language屬性指明這段代碼是用JavaScript來編寫的。
➢JavaScript可以直接嵌入到htmI中通過瀏覽器直接運行的。
➢Html中嵌入JavaScript代碼的方式:
放在<body>標籤中 <script> js代碼 </script>
放在<head>標籤中（推薦使用） <script src="外部路徑">
創建js文件，導入引用（推薦使用） <html標籤 onclick="javascript:js代碼>
2 JS基礎
2.1 語法基礎
類型
var 變量名[=值];
js中三種定義變量的方式const， var， let的區別：
const定義的變量不可以修改，而且必須初始化；var定義的變量可以修改，如果不初始化會輸出undefined，不會報錯；let是塊級作用域，函數內部使用let定義後，對函數外部無影響。
* undefined 未賦值
array a
boolean b
..........
function fn()
regular reg
提示框
alert(消息內容); //警告框
string prompt(輸入提示, 輸入框的默認值); //帶輸入框的對話框
boolean confirm(提示內容); //帶"確定"和"取消"兩個按鈕的對
console.log(內容);
可以在瀏覽器控制檯中輸出信息,類似的有:console.info(內容); ..
網頁輸出：document.write();
typeof(變量) 返回變量的類型
函數
function 函數名([參數列表]){
//函數體
[return 值;]
}
String 都是 true int:0是false 非零即true
==和===：
== 比較數值
=== 比較類型之後比較數值
類型轉換
parseInt( string )
返回整數, 只要是以數字開頭, 就正常轉換, 否則返回NaN
parseFloat( string )
返回浮點數, 同上
Number( string )
返回數字, 只要string不是數字形式, 就返回NaN
isNaN( string )
如果返回true, 表示該string不是數字
如果返回false, 表示該string是數字
eval(string)：
將字符串參數轉換成相應的數值
2.2 事件
主要內容：
➢1、事件(Event)：是指用戶在某對象上所作的動作。(可以是瀏覽器行爲，也可以是用戶行爲)
➢2、事件驅動(Event Driver): 由事件引發的一 連串程序的動作，稱爲事件驅動。
➢3、事件處理程序(Event Handler): 對事件進行處理的程序或函數。
➢4、事件處理程序語法:如: onClick
HTML事件的實例：頁面完成加載；input字段改變時；按鈕被點擊。
2.2.1 常見的HTML事件
| 事件 | 描述 | 場景 |
| onchange | HTML元素改變 | 表單元素 |
| onclick | 用戶鼠標單擊HTML元素 | 所有元素 |
| ondbclick | 鼠標雙擊 | 所有元素 |
| onfocus | 窗口或元素獲得焦點時 | < body >和表單元素 |
| onblur | 窗口或元素失去焦點時 | < body >和表單元素 |
| onload | 文檔，圖像，或對象加載完畢時（瀏覽器已完成頁面的加載） | < body >,< frameset >,< img >,< iframe >,< object > |
| onsubmit | 表單提交時 | < form > |
| onunload | 文檔卸載時 | < body >,< frameset > |
| onmouseover | 用戶在一個HTML元素上移動鼠標 | |
| onmouseout | 用戶從一個HTML元素上移開鼠標 | |
| onkeydown | 用戶按下鍵盤按鍵 |
2.3 瀏覽器對象
➢ 窗口對象(Window)
Window對象處於對象層次的最頂端 ,它提供了處理瀏覽器窗口的方法和屬性。
➢位置對象(Location)
Location對象提供了與當前打開的URL-起工作的方法和屬性，它是-個靜態的對象。
➢歷史對象(History)
History對象提供了與歷史清單有關的信息。
➢文檔對象(Document)
document對象包含了與文檔元素(elements)一起工作的對象，它將這些元素封裝起來供編程人員使用。
2.3.1 操作元素
1.document元素
獲得元素方式、
getElementsByTagName(標籤名)
通過html標籤來獲得一些元素對象
返回的是相同標記的html元素對象數組
getElementById(標記id屬性值)
通過html標籤的id屬性來獲得一個html元素對象
返回具有該id屬性的html元素對象
getElementsByName(標記name屬性值)
通過html標籤的name屬性來獲得一些元素對象
返回的是具有相同name屬性的html元素對象數組
getElementsByClassName(class名字)
返回文檔中所有指定類名的元素集合
回的是相同Class的html元素對象數組
操作元素
document.createElement("標籤名") 用於創建元素
document.createTextNode("文本") 用於創建文本節點
appendChild() 把新的子節點添加到指定節點。
removeChild() 刪除子節點。
replaceChild() 替換子節點。
insertBefore() 在指定的子節點前面插入新的子節點。
createAttribute() 創建屬性節點。
createElement() 創建元素節點。
createTextNode() 創建文本節點。
getAttribute() 返回指定的屬性值。
setAttribute() 把指定屬性設置或修改爲指定的值。
屬性
obj.style.backgroundColor = "red";
obj.style="display:block";
form
input
屬性
value
checked
非form元素(不包含Select)
innerHTML
2.3.2 事件相關
綁定事件
obj.onclick=函數名;
刪除事件：
btn.onclik=null
現代事件指派方法
obj.addEventListener("事件名",函數名,true);
obj.removeEventListener("事件名",函數名);
obj.attachEvent("onclick",函數名);
obj.detachEvent("onclick",函數名);
當窗口大小改變時，觸發onresize事件處理程序
window.onresize=function(){
alert(this.outerWidth);
};
window.onload=function(){
alert("網頁加載完成");
};
當滾動窗口或元素時，觸發窗口的滾動事件
window.onscroll=function(){
console.log(document.body.scrollTop);
}
事件冒泡：
阻止事件冒泡：stopPropagation
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#div1{
width: 800px;
height: 400px;
background-color: yellowgreen;
}
#div2{
width: 400px;
height: 200px;
background-color:greenyellow;
}
#div3{
width: 200px;
height: 100px;
background-color:green;
}
#div4{
width: 100px;
height: 50px;
background-color: #7D9029;
}
</style>
<script type="text/javascript">
function showText(divText){
alert(divText.innerText);
// var e = window.event || arguments[0];
// if(e.stopPropagation)
// e.stopPropagation(); //dom 阻止冒泡
// else if(window.event)
// e.cancelBubble=true; //IE阻止冒泡
}
</script>
</head>
<body>
<div id="div1" onclick="showText(this)">
div1
<div id="div2" onclick="showText(this)">
div2
<div id="div3" onclick="showText(this)">
div3
<div id="div4" onclick="showText(this)">
div4
</div>
</div>
</div>
</div>
</body>
</html>
2.3.3 表格、表單
table
屬性
集合
rows[] 獲得所有的行數
cells[] 獲得所有的列數
函數
insertRow()
deleteRow()
tr
屬性
rowIndex 在表格中的行數座標
innerHtml 給這行添加 html元素代碼
rowSpan
集合
cells[] 返回這一行的列數
函數
insertCell()
deleteCell()
td
屬性
cellIndex 在表格中的列數座標
innerHtml 給這行添加 html元素代碼
colSpan 跨列
form
屬性
action：相當於<FORM>標記的ACTION屬性。
method：輸入窗體的數據傳送到服務器上的方式，即(FORM)標記中的METHOD屬性。
elements：表單中的所有控件，以數組索引值表示。
例：
document.forms[索引值].elements[索引值].屬性
length：表單中的控件的個數。
常用方法
submit() 提交表單(與submit按鈕的作用相同)。
reset() 重寫表單(與使用reset按鈕的作用相同)。
Text： 單行文本。
Password: 密碼對象。
Checkbox: 複選框。
Radio：單選按鈕。
Submit：提交按鈕。
Reset：復位按鈕。
Button：<INPUT TYPE=”BUTTON”>按鈕。
Textarea: 多行文本。
Select: <SELECT>選擇框。
Option：選項對象。
1.常用屬性
name: input對象的名字
defaultValue: input對象的缺省值
type: input對象的類型(NAME屬性)
value: input的當前值(VALUE屬性值)
2.常用方法
Blur() 把焦點從文本框移開。
Focus() 把焦點移到文本框。
Select() 將該對象設置成選取狀態。
click() 再該對象上單擊鼠標左鍵。
2.4 JS創建類/對象
參考博客https://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html
2.5 正則
正則
規則符
()
[] 包含
{n} 必須連續出n次 {n,m} 至少n不超過m {n,} 至少n到無窮
^ 以什麼開始 , 非
$ 以什麼結束
\ 轉義字符
\d [0-9]
\D 非數字
\s 空白
\S 非空白
\w 字母數字下劃線
\W 非單詞數字
| 或
. 任意字符 [!換行和回車]
? 出現[0-1]次
* 出現0-任意次
+ 至少出現一次
[\u4e00-\u9fa5] 漢字在正則表示爲
g全文查找 i不考慮大小寫 n多行
方法
test true false
exec 匹配就返回該字符串,不匹配null
String
match 匹配就返回該字符串,不匹配null
HTML5正則：
input
pattern:正則
required:不能爲空
setCustomValidity() 設置錯誤信息
checkValidity() 驗證pattern 屬性的正則 是否與填寫數值對應
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
3 JSON
3.1 概述
JSON：JavaScript對象表示法（JavaScript Object Notation）
輕量級的文本數據交換格式
好處：
JSON獨立於語言；具有自我描述性，更易理解；易於機器解析和生成，並且易於書寫和閱讀；使用JavaScript語法來描述數據對象，但是JSON跟XML一樣獨立於語言和平臺，JSON 比 XML 更小、更快，更易解析。
3.2 例子
js文件格式：
{
"sites": [
{ "name":"菜鳥教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
javascript中的格式：
var objs={
"employees": [
{"firstName":"Bill","lastName":"Gates"},
{"firstName":"Georgr","lastName":"Bush"},
],
"name":"李磊",
"info":{"tel":"14625368957","cellPhone":"222333"}
}
for(x in objs){
document.getElementById("demo").innerHTML += x + "<br>";//循環對象屬性
// document.getElementById("demo").innerHTML += car[x] + "<br>";//訪問屬性的值
}
三級導航欄 案例：
https://blog.csdn.net/weixin_45044097/article/details/100538212
3.3 Cookie
Cookie 是什麼?
存儲訪問者在計算機中的一個變量,每當訪問者發出請求頁面，就會發送Cookie，我們可以利用JavaScript來創建或者取Cookie的值，從JavaScript的角度去看Cookie他只是一串字符串。利用JavaScript創建Cookie 並在Cookie中保存一些值添加數據。
案例:document.cookie=“name=張三;expires=”+有效時間;
<script>
function getCookie(){
var cookie=document.cookie;
console.log(cookie);
//存入數據
document.cookie="name='王智是男生'";
//這樣存入 有效期是會話結束之前
//會話:
//當前客戶端第一次訪問服務器,這叫會話開始
//當客戶端關閉瀏覽器,或者不再請求服務器會話結束
console.log(document.cookie);
//獲得本機時間
var date=new Date();
date.setDate(date.getDate()+1);
//轉成東八區
console.log(date.toGMTString());
console.log(date) ;
// 這條數據 保存 多久
document.cookie="nick='陶謙是小姐姐';expires="+date;
console.log(document.cookie);
}
getCookie();
</script>
JSON與JavaScript：
JSON文本格式在語法上與創建JavaScript對象的代碼相同。
new function形式：
var textJson = “{name:‘李磊’ , age:34}”;
var json = ar str = ‘{ name:“jack” }’;
var obj = JSON.parse(str);
alert( json.age );
json = { name : ‘李磊’ };
JSON與XML比較：
JSON是純文本，具有“自我描述性”（人類可讀），具有層級結構（值中存在值）；可通過JavaScript進行解析，數據可使用AJAX進行傳輸。
相比XML的不同之處：
沒有結束標籤；更短；讀寫的速度更快；能夠使用內建的方法進行解析；使用數組；不使用保留字。
在其他語言中使用JSON：
總結：
JSON不僅是Javasdript內嵌的對象標識方法，而且是個輕量級文本數據交換格式
JSON因其輕量，與JAVAScript緊密集成， 使其取代XML在AJAX應用中的位置
JSON-RPC應用還沒有相應的配套協議和服務設施，只能在小範圍內使用。