- 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其更名ScriptEase.(客戶端執行的語言)
- Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後更名叫Javascript
- 微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
- 爲了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣的程度的成功和失敗）將 ECMAScript 做爲 JavaScript 實現的基礎。EcmaScript是規範.
ECMAScript
儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：javascript
- 核心（ECMAScript）
- 文檔對象模型（DOM） Document object model (整合js，css，html)
- 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
- Javascript 在開發中絕大多數狀況是基於對象的.也是面向對象的.
簡單地說，ECMAScript 描述瞭如下內容：css
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象 (封裝 繼承 多態) 基於對象的語言.使用對象.
JavaScript的引入方式
{
#1 直接編寫#}
<script>
alert(
'hello yuan'
)
<
/
script>
{
#2 導入文件#}
<script src
=
"hello.js"
><
/
script>
二 JavaScript的基礎
2.1 變量
x=5 y=6 z=x+y
在代數中，咱們使用字母（好比 x）來保存值（好比 5）。html
經過上面的表達式 z=x+y，咱們可以計算出 z 的值爲 11。java
在 JavaScript 中，這些字母被稱爲變量。node
0 變量是弱類型的(很隨便)；python
1 聲明變量時不用聲明變量類型. 全都使用var關鍵字;數組
2 一行能夠聲明多個變量.而且能夠是不一樣類型.瀏覽器
3 (瞭解) 聲明變量時 能夠不用var. 若是不用var 那麼它是全局變量.閉包
4 變量命名,首字符只能是字母,下劃線,$美圓符 三選一，且區分大小寫，x與X是兩個變量app
5 變量還應遵照如下某條著名的命名規則：
Camel 標記法 首字母是小寫的，接下來的字母都以大寫字符開頭。例如： var myTestValue = 0, mySecondValue = "hi"; Pascal 標記法 首字母是大寫的，接下來的字母都以大寫字符開頭。例如： Var MyTestValue = 0, MySecondValue = "hi"; 匈牙利類型標記法 在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，以下所示「 Var iMyTestValue = 0, sMySecondValue = "hi";
注意：
function func1(){
var a = 123;
b=456
}
func1();
// alert(a);
// alert(b);
// 不推薦
2.2 基礎規範
1 每行結束能夠不加分號. 沒有分號會以換行符做爲每行的結束
a=1;b=2;
a=1 b=2;------錯誤
a=1
b=2
//推薦
a=1;
b=2;
{
a=1;
b=2;
//推薦加tab
a=1;
b=2;
}
2 註釋 支持多行註釋和單行註釋. /* */ //
3 使用{}來封裝代碼塊
2.3 常量和標識符
常量 ：直接在程序中出現的數據值
標識符：
- 由不以數字開頭的字母、數字、下劃線(_)、美圓符號($)組成
- 常用於表示函數、變量等的名稱
- 例如：_abc,$abc,abc,abc123是標識符，而1abc不是
- JavaScript語言中表明特定含義的詞稱爲保留字，不容許程序再定義爲標識符
2.4 數據類型
數字類型(Number)
簡介 最基本的數據類型 不區分整型數值和浮點型數值 全部數字都採用64位浮點格式存儲，至關於Java和C語言中的double格式 能表示的最大值是±1.7976931348623157 x 10308 能表示的最小值是±5 x 10 -324
整數：
在JavaScript中10進制的整數由數字的序列組成
精確表達的範圍是
-9007199254740992 (-253) 到 9007199254740992 (253)
超出範圍的整數，精確度將受影響
浮點數：
使用小數點記錄數據
例如：3.4，5.6
使用指數記錄數據
例如：4.3e23 = 4.3 x 1023
16進制和8進制數的表達
16進制數據前面加上0x，八進制前面加0
16進制數是由0-9,A-F等16個字符組成
8進制數由0-7等8個數字組成
16進制和8進制與2進制的換算
# 2進制: 1111 0011 1101 0100 <-----> 16進制:0xF3D4 <-----> 10進制:62420 # 2進制: 1 111 001 111 010 100 <-----> 8進制:0171724
字符串(String)
簡介 是由Unicode字符、數字、標點符號組成的序列 字符串常量首尾由單引號或雙引號括起 JavaScript中沒有字符類型 經常使用特殊字符在字符串中的表達 字符串中部分特殊字符必須加上右劃線\ 經常使用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線
String數據類型的使用
- 特殊字符的使用方法和效果
- Unicode的插入方法
|
1
2
3
4
|
<script>
var
str
=
"\u4f60\u597d\n歡迎來到\"JavaScript世界\""
;
alert(
str
);
<
/
script>
|
布爾型(Boolean)
簡介
Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1,false=0
布爾值也能夠看做on/off、yes/no、1/0對應true/false
Boolean值主要用於JavaScript的控制語句，例如
if (x==1){
y=y+1;
}else {
y=y-1;
}
Null & Undefined
Undefined 類型
Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。
當函數無明確返回值時，返回的也是值 "undefined";
Null 類型
另外一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 其實是從值 null 派生來的，所以 ECMAScript 把它們定義爲相等的。
儘管這兩個值相等，但它們的含義不一樣。undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示還沒有存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。若是函數或方法要返回的是對象，那麼找不到該對象時，返回的一般是 null。
var person=new Person()
var person=null
數據類型轉換
JavaScript屬於鬆散類型的程序語言 變量在聲明的時候並不須要指定數據類型 變量只有在賦值的時候纔會肯定數據類型 表達式中包含不一樣類型數據則在計算過程當中會強制進行類別轉換
數字 + 字符串：數字轉換爲字符串
數字 + 布爾值：true轉換爲1，false轉換爲0
字符串 + 布爾值：布爾值轉換爲字符串true或false
強制類型轉換函數
函數parseInt： 強制轉換成整數 例如parseInt("6.12")=6 ; parseInt(「12a")=12 ; parseInt(「a12")=NaN ;parseInt(「1a2")=1
函數parseFloat： 強制轉換成浮點數 parseFloat("6.12")=6.12
函數eval： 將字符串強制轉換爲表達式並返回結果 eval("1+1")=2 ; eval("1<2")=true
類型查詢函數(typeof)
ECMAScript 提供了 typeof 運算符來判斷一個值是否在某種類型的範圍內。能夠用這種運算符判斷一個值是否表示一種原始類型：若是它是原始類型，還能夠判斷它表示哪一種原始類型。
函數typeof ：查詢數值當前類型 (string / number / boolean / object )
例如typeof("test"+3) "string" 例如typeof(null) "object " 例如typeof(true+1) "number" 例如typeof(true-false) "number"
ECMAScript 運算符
ECMAScript 算數運算符
加(＋)、 減(－)、 乘(*) 、除(/) 、餘數(% ) 加、減、乘、除、餘數和數學中的運算方法同樣 例如：9/2=4.5，4*5=20，9%2=1
-除了能夠表示減號還能夠表示負號 例如：x=-y
+除了能夠表示加法運算還能夠用於字符串的鏈接 例如："abc"+"def"="abcdef"
遞增(＋＋) 、遞減(－－)
假如x=2，那麼x++表達式執行後的值爲3，x--表達式執行後的值爲1
i++至關於i=i+1，i--至關於i=i-1
遞增和遞減運算符能夠放在變量前也能夠放在變量後：--i
var i=1;
console.log(i++);
console.log(++i);
console.log(i--);
console.log(--i);
一元加減法：
var a=1;
var b=1;
a=-a; //a=-1
var c="10";
alert(typeof (c));
c=+c; //類型轉換
alert(typeof (c));
// -------------------
var d="yuan";
d=+d;
alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會獲得一個NaN數據
alert(typeof(d));//Number
//NaN特色:
var n=NaN;
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
alert(n!=NaN);//NaN參與的全部的運算都是false,除了!=
ECMAScript 邏輯運算符
等於 ( == ) 、不等於( != ) 、 大於( > ) 、 小於( < ) 大於等於(>=) 、小於等於(<=) 與 (&&) 、或(||) 、非(!)
1 && 1 = 1 1 || 1 = 1
1 && 0 = 0 1 || 0 = 1
0 && 0 = 0 0 || 0 = 0
!0=1
!1=0
邏輯 AND 運算符(&&)
邏輯 AND 運算的運算數能夠是任何類型的，不止是 Boolean 值。
若是某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不必定返回 Boolean 值：
- 若是某個運算數是 null，返回 null。
- 若是某個運算數是 NaN，返回 NaN。
- 若是某個運算數是 undefined，返回undefined。
邏輯 OR 運算符(||)
與邏輯 AND 運算符類似，若是某個運算數不是 Boolean 值，邏輯 OR 運算並不必定返回 Boolean 值
ECMAScript 賦值運算符
賦值 =
JavaScript中=表明賦值，兩個等號==表示判斷是否相等
例如，x=1表示給x賦值爲1
if (x==1){...}程序表示當x與1相等時
if(x==「on」){…}程序表示當x與「on」相等時
配合其餘運算符造成的簡化表達式
例如i+=1至關於i=i+1，x&=y至關於x=x&y
實例：
View Code
ECMAScript等性運算符
執行類型轉換的規則以下：
- 若是一個運算數是 Boolean 值，在檢查相等性以前，把它轉換成數字值。false 轉換成 0，true 爲 1。
- 若是一個運算數是字符串，另外一個是數字，在檢查相等性以前，要嘗試把字符串轉換成數字。
- 若是一個運算數是對象，另外一個是字符串，在檢查相等性以前，要嘗試把對象轉換成字符串。
- 若是一個運算數是對象，另外一個是數字，在檢查相等性以前，要嘗試把對象轉換成數字。
在比較時，該運算符還遵照下列規則：
- 值 null 和 undefined 相等。
- 在檢查相等性時，不能把 null 和 undefined 轉換成其餘值。
- 若是某個運算數是 NaN，等號將返回 false，非等號將返回 true。
- 若是兩個運算數都是對象，那麼比較的是它們的引用值。若是兩個運算數指向同一對象，那麼等號返回 true，不然兩個運算數不等。
ECMAScript 關係運算符(重要)
|
1
2
|
var
bResult =
"Blue"
<
"alpha"
;
alert(bResult);
//輸出 true
|
在上面的例子中，字符串 "Blue" 小於 "alpha"，由於字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。
比較數字和字符串
另外一種棘手的情況發生在比較兩個字符串形式的數字時，好比：
|
1
2
|
var
bResult =
"25"
<
"3"
;
alert(bResult);
//輸出 "true"
|
上面這段代碼比較的是字符串 "25" 和 "3"。兩個運算數都是字符串，因此比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）。
不過，若是把某個運算數該爲數字，那麼結果就有趣了：
|
1
2
|
var
bResult =
"25"
< 3;
alert(bResult);
//輸出 "false"
|
這裏，字符串 "25" 將被轉換成數字 25，而後與數字 3 進行比較，結果不出所料。
總結：
|
1
2
|
比較運算符兩側若是一個是數字類型,一個是其餘類型,會將其類型轉換成數字類型.
比較運算符兩側若是都是字符串類型,比較的是最高位的asc碼,若是最高位相等,繼續取第二位比較.
|
Boolean運算符(重要)
var temp=new Object();// false;[];0; null; undefined;object(new Object();)
if(temp){
console.log("yuan")
}else {
console.log("alex")
}
全等號和非全等號
等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所作的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。
控制語句
if 控制語句
if-else基本格式
if (表達式){
語句１;
......
}else{
語句２;
.....
}
功能說明
若是表達式的值爲true則執行語句1,
不然執行語句2
var x= (new Date()).getDay();
//獲取今天的星期值，0爲星期天
var y;
if ( (x==6) || (x==0) ) {
y="週末";
}else{
y="工做日";
}
alert(y);
//等價於
y="工做日";
if ( (x==6) || (x==0) ) {
y="週末";
}
if 能夠單獨使用
if語句嵌套格式
if (表達式1) {
語句1;
}else if (表達式2){
語句2;
}else if (表達式3){
語句3;
} else{
語句4;
}
View Code
switch 選擇控制語句
switch基本格式
switch (表達式) {
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
}
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定義";
}
switch比else if結構更加簡潔清晰，使程序可讀性更強,效率更高。
switch爲何效率高？
首先要看一個問題，if 語句適用範圍比較廣，只要是 boolean 表達式均可以用 if 判斷；而 switch 只能對基本類型進行數值比較。二者的可比性就僅限在兩個基本類型比較的範圍內。
說到基本類型的數值比較，那固然要有兩個數。而後重點來了——
if 語句每一句都是獨立的，看下面的語句：
if (a == 1) ...
else if (a == 2) ...
這樣 a 要被讀入寄存器兩次，1 和 2 分別被讀入寄存器一次。因而你是否發現其實 a 讀兩次是有點多餘的，在你所有比較完以前只須要一次讀入寄存器就好了，其他都是額外開銷。可是 if 語句必須每次都把裏面的兩個數從內存拿出來讀到寄存器，它不知道你其實比較的是同一個 a。
因而 switch case 就出來了，把上面的改爲 switch case 版本：
switch (a) {
case 0:
break;
case 1:
}
總結:
1.switch用來根據一個整型值進行多路分支，而且編譯器能夠對多路分支進行優化
2.switch-case只將表達式計算一次,而後將表達式的值與每一個case的值比較,進而選
擇執行哪個case的語句塊
3.if..else 的判斷條件範圍較廣，每條語句基本上獨立的，每次判斷時都要條件加載
一次。
因此在多路分支時用switch比if..else if .. else結構要效率高。
for 循環控制語句
for循環基本格式
for (初始化;條件;增量){
語句1;
...
}
功能說明
實現條件循環，當條件成立時，執行語句1，不然跳出循環體
for (var i=1;i<=7;i++){
document.write("<H"+i+">hello</H "+i+"> ");
document.write("<br>");
}
----------------------------------------------
var arr=[1,"hello",true]//var dic={"1":"111"}
for (var i in arr){
console.log(i)
console.log(arr[i])
}
注意：
View Code
結論：for i in 不推薦使用.
while 循環控制語句
while循環基本格式
while (條件){
語句1；
...
}
功能說明
運行功能和for相似，當條件成立循環執行語句花括號{}內的語句，不然跳出循環
var i=1;
while (i<=7) {
document.write("<H"+i+">hello</H "+i+"> ");
document.write("<br>");
i++;
}
//循環輸出H1到H7的字體大小
View Code
練習：分別用for循環和while循環計算出1-100的和？
異常處理
|
1
2
3
4
5
6
7
8
9
10
|
try
{
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch
(e) {
// 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally {
//不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
|
注：主動拋出異常 throw Error('xxxx')
ECMA對象
從傳統意義上來講，ECMAScript 並不真正具備類。事實上，除了說明不存在類，在 ECMA-262 中根本沒有出現「類」這個詞。ECMAScript 定義了「對象定義」，邏輯上等價於其餘程序設計語言中的類。
var o = new Object();
對象的概念與分類：
- 由ECMAScript定義的本地對象.獨立於宿主環境的 ECMAScript 實現提供的對象.(native object)
- ECMAScript 實現提供的、獨立於宿主環境的全部對象，在 ECMAScript 程序開始執行時出現.這意味着開發者沒必要明確實例化內置對象，它已被實例化了。ECMA-262 只定義了兩個內置對象，即 Global 和 Math （它們也是本地對象，根據定義，每一個內置對象都是本地對象）。（built-in object）
- 全部非本地對象都是宿主對象（host object），即由 ECMAScript 實現的宿主環境提供的對象。全部 BOM 和 DOM 對象都是宿主對象。
object對象：ECMAScript 中的全部對象都由這個對象繼承而來；Object 對象中的全部屬性和方法都會出如今其餘對象中
ToString() : 返回對象的原始字符串表示。
ValueOf() : 返回最適合該對象的原始值。對於許多對象，該方法返回的值都與 ToString() 的返回值相同。
11種內置對象
包括：
Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object
簡介：
在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是經過對象實現的
<script language="javascript">
var aa=Number.MAX_VALUE;
//利用數字對象獲取可表示最大數
var bb=new String("hello JavaScript");
//建立字符串對象
var cc=new Date();
//建立日期對象
var dd=new Array("星期一","星期二","星期三","星期四");
//數組對象
</script>
String對象
自動建立字符串對象：
|
1
2
3
|
var str1
=
"hello world"
;
alert(str1.length);
alert(str1.substr(
1
,
5
));
|
調用字符串的對象屬性或方法時自動建立對象，用完就丟棄
手工建立字符串對象
|
1
2
3
|
var str1
=
new String(
"hello word"
);
alert(str1.length);
alert(str1.substr(
1
,
3
));
|
採用new建立字符串對象str1，全局有效
String對象的屬性
|
1
2
|
獲取字符串長度
length
|
var str1="String對象";
var str2="";
alert("str1長度 "+str1.length);
alert("str2長度 "+str2.length);
String對象的方法(1) —— 格式編排方法
格式編排方法返回值列表
View Code
String對象的方法(2)—— 大小寫轉換
View Code
String對象的方法(3) —— 獲取指定字符
View Code
String對象的方法(4)—— 查詢字符串
View Code
String對象的方法(5) ——子字符串處理
截取子字符串
View Code
替換子字符串
View Code
分割字符串
View Code
鏈接字符串
View Code
Array對象
建立數組對象
View Code
建立二維數組
View Code
Array對象的屬性
獲取數組元素的個數：length
View Code
Array對象的方法
鏈接數組-join方法
View Code
鏈接數組-concat方法
View Code
數組排序-reverse sort
View Code
數組切片-slice
View Code
刪除子數組
View Code
數組的進出棧操做(1)
View Code
數組的進出棧操做(2)
View Code
總結js的數組特性：
View Code
Date對象
建立Date對象
View Code
Date對象的方法—獲取日期和時間
View Code
練習實例：
View Code
Date對象的方法—設置日期和時間
View Code
Date對象的方法—日期和時間的轉換
View Code
RegExp對象
View Code
Math對象
View Code
Function 對象(重點)
函數的定義：
|
1
2
3
|
function 函數名 (參數){
函數體;
return
返回值;
}
|
功能說明：
- 可使用變量、常量或表達式做爲函數調用的參數
- 函數由關鍵字function定義
- 函數名的定義規則與標識符一致，大小寫是敏感的
- 返回值必須使用return
Function 類能夠表示開發者定義的任何函數。
用 Function 類直接建立函數的語法以下：
function 函數名 (參數){
函數體;
return 返回值;
}
//another way:
var 函數名 = new Function("參數1","參數n","function_body");
雖然因爲字符串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行爲與用 Function 類明確建立的函數行爲是相同的。
實例：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
alert(1);
function
func1(){
alert(
'hello yuan!'
);
return
8
}
ret=func1();
alert(ret)
－－－－－－－－－－－－－－－－
var
func1=
new
Function(
"name"
,
"alert(\"hello\"+name);"
)
func1(
"yuan"
)
|
注意：js的函數加載執行與python不一樣，它是總體加載完纔會執行，因此執行函數放在函數聲明上面或下面均可以：
View Code
Function 對象的 length 屬性
如前所述，函數屬於引用類型，因此它們也有屬性和方法。
好比，ECMAScript 定義的屬性 length 聲明瞭函數指望的參數個數。
|
1
|
alert(func1.length)
|
Function 對象的方法
Function 對象也有與全部對象共享的 valueOf() 方法和 toString() 方法。這兩個方法返回的都是函數的源代碼，在調試時尤爲有用。
|
1
|
alert(void(fun1(1,2)))
|
運算符void()做用：攔截方法的返回值
函數的調用
View Code
函數的內置對象arguments
View Code
匿名函數
View Code
函數的做用域鏈和閉包
做用域
js的做用域和py類似，if while等控制語句並無本身做用域；而函數是有本身的做用域的；
if(1==1){
var s=12;
}
console.log(s);//12
// ----------------------
function f(){
var temp=666;
}
f();
console.log(temp);//Uncaught ReferenceError: temp is not defined
嵌套函數的做用域：
例1:
var city = 'beijing';
function func(){
var city = 'shanghai';
function inner(){
var city = 'shenzhen';
console.log(city);
}
inner();
}
func();
例2:
var city = 'beijing';
function Bar(){
console.log(city);
}
function func(){
var city = 'shanghai';
return Bar;
}
var ret = func();
ret(); //beijing
閉包：
var city = 'beijing';
function func(){
var city = "shanghai";
function inner(){
// var city = "langfang";
console.log(city);
}
return inner;
}
var ret = func();
ret();
思考題1：
View Code
做用域鏈(Scope Chain)：
在JavaScript中，函數也是對象，實際上，JavaScript裏一切都是對象。函數對象和其它對象同樣，擁有能夠經過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的做用域中對象的集合，這個集合被稱爲函數的做用域鏈，它決定了哪些數據能被函數訪問。
var x=1;
function foo() {
var y = 2;
function bar() {
var z = 3;
}
}
#bar的做用域鏈： barScopeChain=[bar.AO, foo.AO, global.VO];
#foo的做用域鏈： fooScopeChain=[foo.Ao, global.VO];
View Code
View Code
函數的scope等於自身的AO對象加上父級的scope，也能夠理解爲一個函數的做用域等於自身活動對象加上父級做用域.
函數執行先後的做用域鏈：
注意：做用域鏈的非本身部分在函數對象被創建（函數聲明、函數表達式）的時候創建，而不須要等到執行
思考題2:
View Code
BOM對象
BOM（瀏覽器對象模型），能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做。
使 JavaScript 有能力與瀏覽器「對話」。
window對象
window對象
全部瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不須要建立對象,直接使用便可.
Window 對象方法
View Code
交互方法：
View Code
練習：
View Code
setInterval clearInterval
View Code
setTimeout clearTimeout
View Code
History 對象
History 對象屬性
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。
|
1
|
length 返回瀏覽器歷史列表中的 URL 數量。
|
History 對象方法
back() 加載 history 列表中的前一個 URL。 forward() 加載 history 列表中的下一個 URL。 go() 加載 history 列表中的某個具體頁面。
View Code
Location 對象
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問。
Location 對象方法
location.assign(URL) location.reload() location.replace(newURL)//注意與assign的區別
DOM對象(DHTML)
7.1 什麼是 DOM？
DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準：
"W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"
W3C DOM 標準被分爲 3 個不一樣的部分：
- 核心 DOM - 針對任何結構化文檔的標準模型
- XML DOM - 針對 XML 文檔的標準模型
- HTML DOM - 針對 HTML 文檔的標準模型
- 什麼是 XML DOM？ －－－－>XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。
- 什麼是 HTML DOM？－－－－>HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。
7.2 DOM 節點
根據 W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點(NODE)：
- 整個文檔是一個文檔節點(document對象)
- 每一個 HTML 元素是元素節點(element 對象)
- HTML 元素內的文本是文本節點(text對象)
- 每一個 HTML 屬性是屬性節點(attribute對象)
- 註釋是註釋節點(comment對象)
畫dom樹是爲了展現文檔中各個對象之間的關係，用於對象的導航。
節點(自身)屬性:
- attributes - 節點（元素）的屬性節點
- nodeType – 節點類型
- nodeValue – 節點值
- nodeName – 節點名稱
- innerHTML - 節點（元素）的文本值
導航屬性:
- parentNode - 節點（元素）的父節點 (推薦)
- firstChild – 節點下第一個子元素
- lastChild – 節點下最後一個子元素
- childNodes - 節點（元素）的子節點
注意：
View Code
推薦導航屬性：
View Code
節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱爲根（root）
- 每一個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
下面的圖片展現了節點樹的一部分，以及節點之間的關係：
訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,咱們可以以不一樣的方式來訪問 HTML 元素：
頁面查找：
- 經過使用 getElementById() 方法
- 經過使用 getElementsByTagName() 方法
- 經過使用 getElementsByClassName() 方法
- 經過使用 getElementsByName() 方法
局部查找：
View Code
7.3 HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素得到焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證. onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。
onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
兩種爲元素附加事件屬性的方式
<div onclick="alert(123)">點我呀</div>
<p id="abc">試一試!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
alert("hi");
};
</script>
注意：
View Code
onload：
onload 屬性開發中 只給 body元素加.
這個屬性的觸發 標誌着 頁面內容被加載完成.
應用場景: 當有些事情咱們但願頁面加載完馬上執行,那麼可使用該事件屬性.
View Code
onsubmit:
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交.
View Code
Event 對象
Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,而且會在事件函數被調用時傳給事件函數.咱們得到僅僅須要接收一下便可.
好比onkeydown,咱們想知道哪一個鍵被按下了，須要問下event對象的屬性，這裏就時KeyCode；
思考：onclick＝function(event){};這個方法是誰調用的？
事件傳播：
View Code
7.4 增刪改查演示
7.4.1 node的CURD：
增:
|
1
2
|
createElement(name)建立元素
appendChild();將元素添加
|
刪:
|
1
2
3
|
得到要刪除的元素
得到它的父元素
使用removeChild()方法刪除
|
改:
第一種方式:
使用上面增和刪結合完成修改
第二中方式:
使用setAttribute();方法修改屬性
使用innerHTML屬性修改元素的內容
查: 使用以前介紹的方法.
View Code
7.4.2 修改 HTML DOM
- 改變 HTML 內容
改變元素內容的最簡答的方法是使用 innerHTML ，innerText。
- 改變 CSS 樣式
|
1
2
|
<p id=
"p2"
>Hello world!</p>
document.getElementById(
"p2"
).style.color=
"blue"
;<br> .style.fontSize=48px
|
- 改變 HTML 屬性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 建立新的 HTML 元素
createElement(name)
- 刪除已有的 HTML 元素
elementNode.removeChild(node)
- 關於class的操做
elementNode.className
elementNode.classList.add
elementNode.classList.remove
8 實例練習
1 搜索框
<input id="ID1" type="text" value="請輸入用戶名" onblur="Blurs()" onfocus="Focus()">
<script>
function Focus(){
var input=document.getElementById("ID1");
if (input.value=="請輸入用戶名"){
input.value="";
}
};
function Blurs(){
var ele=document.getElementById("ID1");
var val=ele.value;
if(!val.trim()){
ele.value="請輸入用戶名";
}
}
</script>
2 模態對話框
View Code
3 全選反選取消
View Code
4 兩級聯動
View Code