目錄
1. 概念：Browser Object Model 瀏覽器對象模型
相關知識：
概念：一門客戶端腳本語言
- 運行找客戶端瀏覽器中，每一個瀏覽器都有JavaScript的解析引擎
- 腳本語言，不需要編譯，直接就可以被瀏覽器解析執行了
功能：
- 可以來增強用戶和html頁面的交互過程，可以來控制html元素，讓頁面有一些動態的效果，增強用戶體驗。
JavaScript發展史：
1. 1992年，Nombase公司，開發出第一門客戶端腳本語言，專門用於表單的校驗。命名爲 ： C-- ，後來更名爲：ScriptEase
2. 1995年，Netscape(網景)公司，開發了一門客戶端腳本語言：LiveScript。後來，請來SUN公司的專家，修改LiveScript，命名爲JavaScript
3. 1996年，微軟抄襲JavaScript開發出JScript語言
4. 1997年，ECMA(歐洲計算機制造商協會)，制定出客戶端腳本語言的標準：ECMAScript，就是統一了所有客戶端腳本語言的編碼方式。
JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)
ECMAScript:客戶端腳本語言的標準
1、基本語法
1、與html結合方式
內部JS: 定義<script>，標籤體內容就是js代碼
外部JS: 定義<script>，通過src屬性引入外部的js文件
注意：
1、<script>可以定義中html的任何地方，但是定義的位置會影響執行順序
2、<script>可以定義任意多個
2、註釋
1、單行註釋：//註釋內容 2、多行註釋/*註釋內容*/
3、數據類型
原始數據類型（基本數據類型）：
- number:數字。整數、小數、NaN(not a number 一個不是數字的數字類型)
- string:字符串。字符串單引號和雙引號都可“” ‘’
- boolean:true和false
- null:一個對象爲空的佔位符
- undefined:未定義。如果一個變涼沒有給初始化值，則被默認爲undefined
引用數據類型：對象：
4、變量
變量：一小塊存儲數據的內存空間
java語言是強類型語言，Javascript是弱類型語言。強類型中開闢變涼存儲空間時，定義了空間將來存儲的數據的數據類型。只能存儲固定類型的數據。弱類型是不定義將來存儲的空間的數據類型，可以存放任意類型的數據
語法：var 變量名 = 初始化名
5、運算符
- 一元運算符：只有一個運算符的運算符 ++ -- +（正號，用來將其他類型的數據轉換成number類型，無法轉換的會成爲NaN)。注意：在JS中，如果運算數不是運算符所要求的類型，那麼js引擎會自動的將運算數進行類型轉換
- 算數運算符： + - * / % ...
- 賦值運算符：=、+=、-+...
- 比較運算符：> < >= <= == ===（全等於）
- 邏輯運算符：&& || ！
- 三元運算符“？ ：
6. 流程控制語句：
1. if...else...
2. switch:
在java中，switch語句可以接受的數據類型： byte int shor char,枚舉(1.5) ,String(1.7)
switch(變量):
case 值:
在JS中,switch語句可以接受任意的原始數據類型
3. while
4. do...while
5. for
7. JS特殊語法：
1. 語句以;結尾，如果一行只有一條語句則 ;可以省略 (不建議)
2. 變量的定義使用var關鍵字，也可以不使用
用var： 定義的變量是局部變量
不用var：定義的變量是全局變量(不建議)
基本對象
Function：函數(方法)對象
1. 創建：
1. var fun = new Function(形式參數列表,方法體); 不再使用
2.
function 方法名稱(形式參數列表){
方法體
}
3.
var 方法名 = function(形式參數列表){
方法體
}
2、屬性：
length:代表形參的個數
3、特點：
1. 方法定義是，形參的類型不用寫,返回值類型也不寫。
2. 方法是一個對象，如果定義名稱相同的方法，會覆蓋
3. 在JS中，方法的調用只與方法的名稱有關，和參數列表無關
4. 在方法聲明中有一個隱藏的內置對象（數組），arguments,封裝所有的實際參數
4、調用：
方法名稱(實際參數列表);
Array:數組對象
1. 創建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默認長度);
3. var arr = [元素列表];
2. 方法
join(參數):將數組中的元素按照指定的分隔符拼接爲字符串
push() 向數組的末尾添加一個或更多元素，並返回新的長度。
3. 屬性
length:數組的長度
4. 特點：
1. JS中，數組元素的類型可變的。
2. JS中，數組長度可變的。
3. Boolean
Date：日期對象
1. 創建：
var date = new Date();
2. 方法：
toLocaleString()：返回當前date對象對應的時間本地字符串格式
getTime():獲取毫秒值。返回當前如期對象描述的時間到1970年1月1日零點的毫秒值差
Math：數學對象
1. 創建：
* 特點：Math對象不用創建，直接使用。 Math.方法名();
2. 方法：
random():返回 0 ~ 1 之間的隨機數。 含0不含1
ceil(x)：對數進行上舍入。
floor(x)：對數進行下舍入。
round(x)：把數四捨五入爲最接近的整數。
3. 屬性：
PI
6. Number
7. String
8. RegExp：正則表達式對象
正則表達式：定義字符串的組成規則。
單個字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符號代表特殊含義的單個字符:
\d:單個數字字符 [0-9]
\w:單個單詞字符[a-zA-Z0-9_]
2. 量詞符號：
?：表示出現0次或1次
*：表示出現0次或多次
+：出現1次或多次
{m,n}:表示 m<= 數量 <= n
m如果缺省： {,n}:最多n次
n如果缺省：{m,} 最少m次
3. 開始結束符號
^:開始
$:結束
正則對象：
1. 創建
1. var reg = new RegExp("正則表達式");
2. var reg = /正則表達式/;
2. 方法
1. test(參數):驗證指定的字符串是否符合正則定義的規範
Global
1. 特點：全局對象，這個Global中封裝的方法不需要對象就可以直接調用。 方法名();
2. 方法：
encodeURI():url編碼
decodeURI():url解碼
encodeURIComponent():url編碼,編碼的字符更多
decodeURIComponent():url解碼
parseInt():將字符串轉爲數字，逐一判斷每一個字符是否是數字，直到不是數字爲止，將前邊數字部分轉爲number
isNaN():判斷一個值是否是NaN。NaN參與的==比較全部問false
eval():解析JavaScript 字符串，並把它作爲腳本代碼來執行。
BOM學習
1. 概念：Browser Object Model 瀏覽器對象模型
將瀏覽器的各個組成部分封裝成對象。
2. 組成：
Window：窗口對象
Navigator：瀏覽器對象
Screen：顯示器屏幕對象
History：歷史記錄對象
Location：地址欄對象
3. Window：窗口對象
1. 方法
1. 與彈出框有關的方法：
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
如果用戶點擊確定按鈕，則方法返回true
如果用戶點擊取消按鈕，則方法返回false
prompt() 顯示可提示用戶輸入的對話框。
返回值：獲取用戶輸入的值
2. 與打開關閉有關的方法：
close() 關閉瀏覽器窗口。
誰調用 ，我關誰
open() 打開一個新的瀏覽器窗口
返回新的Window對象
3. 與定時器有關的方式
setTimeout() 在指定的毫秒數後調用函數或計算表達式。
參數：
1. js代碼或者方法對象
2. 毫秒值
返回值：唯一標識，用於取消定時器
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
2. 屬性：
1. 獲取其他BOM對象：
history
location
Navigator
Screen:
2. 獲取DOM對象
document
3. 特點
Window對象不需要創建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();
4. Location：地址欄對象
1. 創建(獲取)：
1. window.location
2. location
2. 方法：
reload() 重新加載當前文檔。刷新
3. 屬性
href 設置或返回完整的 URL(統一資源定位符)。
5. History：歷史記錄對象
1. 創建(獲取)：
1. window.history
2. history
2. 方法：
back() 加載 history 列表中的前一個 URL。
forward() 加載 history 列表中的下一個 URL。
go(參數) 加載 history 列表中的某個具體頁面。
參數：
正數：前進幾個歷史記錄
負數：後退幾個歷史記錄
3. 屬性：
length 返回當前窗口歷史列表中的 URL 數量。
6：上述個對象使用示例
<body>
<input id="openBtn" type="button" value="打開窗口">
<input id="closeBtn" type="button" value="關閉窗口">
<script>
/*alert("hello window");
window.alert("hello a")*/
/*
//確認框
var flag = confirm("您確定要退出嗎？");
if(flag){
//退出操作
alert("點確定");
}else{
alert("點取消");
}*/
/*
//輸入框
var result = prompt("請輸入用戶名");
alert(result);
*/
/* //打開新窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function(){
//打開新窗口
newWindow = open("https://www.baidu.com");
}
//關閉新窗口
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
// 關閉新窗口
newWindow.close();
}*/
//一次性定時器
//setTimeout("fun();",2000);
//var id = setTimeout(fun,2000);
//clearTimeout(id);
/* function fun(){
alert('boom~~');
}*/
//循環定時器
//var id = setInterval(fun,2000);
// clearInterval(id);
/* //獲取history
var h1 = window.history;
var h2 = history;
alert(h1);
alert(h2);
*/
var openBtn = window.document.getElementById("openBtn");
alert(openBtn);
/*document.getElementById("");*/
</script>
</body>
DOM學習
概念：
Document Object Model 文檔對象模型
將標記語言文檔的各個組成部分，封裝爲對象。可以使用這些對象，對標記語言文檔進行CRUD的動態操作
W3C DOM 標準被分爲 3 個不同的部分：
核心 DOM - 針對任何結構化文檔的標準模型
Document：文檔對象
Element：元素對象
Attribute：屬性對象
Text：文本對象
Comment:註釋對象
Node：節點對象，其他5個的父對象
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型
核心DOM模型：
Document：文檔對象
1. 創建(獲取)：在html dom模型中可以使用window對象來獲取
1. window.document
2. document
2. 方法：
1. 獲取Element對象：
1. getElementById() ： 根據id屬性值獲取元素對象。id屬性值一般唯一
2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組
2. 創建其他DOM對象：
createAttribute(name)
createComment()
createElement()
createTextNode()
3. 屬性
Element：元素對象
1. 獲取/創建：通過document來獲取和創建
2. 方法：
1. removeAttribute()：刪除屬性
2. setAttribute()：設置屬性
Node：節點對象，其他5個的父對象
特點：所有dom對象都可以被認爲是一個節點
方法：
CRUD dom樹：
appendChild()：向節點的子節點列表的結尾添加新的子節點。
removeChild() ：刪除（並返回）當前節點的指定子節點。
replaceChild()：用新節點替換一個子節點。
屬性：
parentNode 返回節點的父節點。
HTML DOM
1. 標籤體的設置和獲取：innerHTML
2. 使用html元素對象的屬性
3. 控制元素樣式
1. 使用元素的style屬性來設置
如：
//修改樣式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定義好類選擇器的樣式，通過元素的className屬性來設置其class屬性值。
事件監聽機制：
概念：某些組件被執行了某些操作後，觸發某些代碼的執行。
事件：某些操作。如： 單擊，雙擊，鍵盤按下了，鼠標移動了
事件源：組件。如： 按鈕 文本輸入框...
監聽器：代碼。
註冊監聽：將事件，事件源，監聽器結合在一起。 當事件源上發生了某個事件，則觸發執行某個監聽器代碼。
常見的事件：
1. 點擊事件：
1. onclick：單擊事件
2. ondblclick：雙擊事件
2. 焦點事件
1. onblur：失去焦點
2. onfocus:元素獲得焦點。
3. 加載事件：
1. onload：一張頁面或一幅圖像完成加載。
4. 鼠標事件：
1. onmousedown 鼠標按鈕被按下。
2. onmouseup 鼠標按鍵被鬆開。
3. onmousemove 鼠標被移動。
4. onmouseover 鼠標移到某元素之上。
5. onmouseout 鼠標從某元素移開。
5. 鍵盤事件：
1. onkeydown 某個鍵盤按鍵被按下。
2. onkeyup 某個鍵盤按鍵被鬆開。
3. onkeypress 某個鍵盤按鍵被按下並鬆開。
6. 選擇和改變
1. onchange 域的內容被改變。
2. onselect 文本被選中。
7. 表單事件：
1. onsubmit 確認按鈕被點擊。
2. onreset 重置按鈕被點擊。