JavaScript 苑，追憶。。。
JavaScript概述
JavaScript的歷史javascript
- 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是規範.
ECMAScriptcss
儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：html
- 核心（ECMAScript）
- 文檔對象模型（DOM）Document object model（整合js,css,heml）
- 瀏覽器對象模型（BOM）Browser object model（整合js和瀏覽器）
- Javascript在開發中絕大多數狀況是基於對象的，也是面向對象的
簡單地說，ECMAScript描述了一下內容：前端
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象(封裝 繼承 多態)基於對象的語言，使用對象
JavaScript的引入方式
|
1
2
3
4
5
6
|
{
#1 直接編寫#}
<script>
alert(
'hello yuan'
)
</script>
{
#2 導入文件#}
<script src=
"hello.js"
></script>
|
二 JavaScript的基礎
2.1 變量
|
1
2
3
|
x=5
y=6
z=x+y
|
在代數中，咱們使用字母（好比x）來保存值（好比5）。java
經過上面的表達式z=x+y，咱們可以計算出z的值爲11。node
在JavaScript中，這些字母被稱爲變量。python
0變量是弱類型的(很隨便)；面試
1 聲明變量時不使用聲明變量類型，全都使用var關鍵字；正則表達式
|
1
|
var
a;
|
2 一行能夠聲明多個變量，而且能夠是不一樣類型。數組
|
1
|
var
name=
"yuan"
,age=20,job=
"lecturer"
;
|
3 （瞭解）聲明變量時，能夠不用var，若是不用var那麼它是全局變量。
4 變量命名，首字符只能是字母，下劃線，$美圓符三選一，且區分大小寫，x與X是兩個變量
5 變量還應遵照如下某條著名的命名規則：
|
1
2
3
4
5
6
7
8
9
|
Camel 標記法
首字母是小寫的，接下來的字母都是大寫字符開頭，例如：
var
myTestValue = 0, mySecondValue =
"hi"
;
Pascal 標記法
首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
Var MyTestValue = 0,MySecondValue =
"hi"
;
匈牙利類型標記法
在以Pascal標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i表示整數，s表示字符串，以下所示：
Var iMyTestValue = 0, sMySecondValue =
"hi"
;
|
注意：
|
1
2
3
4
5
6
7
8
9
10
11
|
function
func1(){
var
a = 123;
b=456
}
func1();
// alert(a);
// alert(b);
// 不推薦
|
2.2 基礎規範
1 每行結束能夠不加分號，沒有分號會以換行符做爲每行的結束
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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)
|
1
2
3
4
5
6
|
簡介
最基本的數據類型
不區分整形數值和浮點型數值
全部數字都採用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.3x10^23
16進制和18進制數的表達
16進制數據前面加上0x，八進制前面加0
16進制數是由0-9，A-F等16個字符組成
8進制數由0-7等8個數字組成
16進制和8進制與2進制的換算
|
1
2
|
#2進制：1111 0011 1101 0100 <-----> 16進制：0xF3D4 <-----> 10進制：62420
#2進制：1 111 001 111 010 100 <----> 8進制：0171724
|
字符串(String)
|
1
2
3
4
5
6
7
|
簡介
是由Unicode字符、數字、標點符號組成的序列
字符串常量首尾由單引號和雙引號括起
JavaScript中沒有字符類型
經常使用特殊字符在字符串中的表達
字符串中部分特殊字符必須加上右劃線\
經常使用的轉義符 \n:換行 \':單引號 \":雙引號 \\:右劃線
|
String數據類型的使用
- 特殊字符的使用方法和效果
- Unicode的插入方法
|
1
2
3
4
|
<script>
var
str=
"\u4f60\u597d\n歡迎來到\"JavaScript世界\""
;
alert(str);
</script>
|
布爾值(Boolean)
|
1
2
3
4
5
6
7
8
9
|
簡介
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
|
1
2
3
4
5
6
7
8
9
10
|
Undefined 類型
Undefined 類型只有一個值，即undefined。當聲明變量未初始化時，該變量的默認值是undefined。
當函數無明確返回值是，返回的也是值
"undefined"
;
Null 類型
另外一種只有一個值的類型是Null，它只有一個專用值
null
，即它的字面量。值undefined其實是從值
null
派生帶來的，所以 ECMAScript 把它們定義爲相等的。
儘管這兩個值相等，當它們的含義不一樣。undefined 是聲明瞭變量但未對其初始化賦予該變量的值，
null
則用於表示還沒有存在的對象（在討論
typeof
運算符時，簡單地介紹過這一點）。若是函數或方法要返回的是對象，那麼找不到該對象時，返回的一般是
null
。
var
person=
new
Person()
var
person=
null
|
數據類型轉換
|
1
2
3
4
5
6
7
8
9
10
|
JavaScript屬於鬆散類型的程序語言
變量在聲明的時候並不須要指定數據類型
變量只有在賦值的時候纔會肯定數據類型
表達式中包含不一樣類型數據則在計算過程當中會強制進行類別轉換
數字+字符串：數字轉換爲字符串
數字+布爾值：
true
轉換爲1，
false
轉換爲0
字符串+布爾值：布爾值轉換爲字符串
true
或
false
|
強制類型轉換函數
|
1
2
3
4
5
6
7
|
函數parseInt：強制類型轉換成整數 例如parseInt(
"6.12"
)=6;
pariseInt(
"12a"
)=12; parseInt(
"a12"
)=NaN; parseInt(
"la2"
)=1
函數parseFloat：強制轉換成浮點數 parseFloat(
"6.12"
)=6.12
函數eval：將字符串強制轉換爲表達式並返回結果 eval(
"1+1"
)=2;
eval(
"1<2"
)=
true
|
類型查詢函數(typeof)
ECMAScript 提供了 typeof 運算符來判斷一個值是否在某種類型的範圍內。能夠用這種運算符判斷一個值是否表示一種原始類型：若是它是原始類型，還能夠判斷它表示哪一種原始類型。
|
1
2
3
4
5
6
|
函數
typeof
：查詢數值當前類型（string / number / boolean / object）
例如
typeof
(
"test"
+3)
"string"
例如
typeof
(
null
)
"object "
例如
typeof
(
true
+1)
"number"
例如
typeof
(
true
-
false
)
"number"
|
ECMAScript 運算符
ECMAScript 算數運算符
|
1
2
3
4
5
|
加(＋)、 減(－)、 乘(*) 、除(/) 、餘數(% ) 加、減、乘、除、餘數和數學中的運算方法同樣 例如：9/2=4.5，4*5=20，9%2=1
-除了能夠表示減號還能夠表示負號 例如：x=-y
+除了能夠表示加法運算還能夠用於字符串的鏈接 例如：
"abc"
+
"def"
=
"abcdef"
|
遞增（+ +）、遞減（- -）
|
1
2
3
4
5
6
7
8
9
|
假如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);
|
一元加減法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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
2
3
4
5
6
7
8
|
等於 ( == ) 、不等於( != ) 、 大於( > ) 、 小於( < )
大於等於(>=) 、小於等於(<=)
與 (&&) 、或(||) 、非(!)
&& 1 = 1 1 || 1 = 1
&& 0 = 0 1 || 0 = 1
&& 0 = 0 0 || 0 = 0
!0=1
!1=0
|
邏輯OR運算符(||)
與邏輯AND運算符類似，若是某個運算符不是Boolean值，邏輯OR運算並不必定返回 Blooean 值
ECMAScript 賦值運算符
|
1
2
3
4
5
6
7
|
賦值 =
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
|
實例：
|
1
2
3
4
5
6
7
8
9
10
|
2== 「2」
2=== 「2」
4!= 「4」
4!== 「4」
var
a = 2;
var
b = 4;
var
c = a<b | --b>--a;
var
c = a<b || --b>--a;
var
c = a<b &&--b>--a;
var
c = a<b & --b>--a;
|
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運算符(重要)
|
1
2
3
4
5
6
7
|
var
temp=
new
Object();
// false;[];0; null; undefined;object(new Object();)
if
(temp){
console.log(
"yuan"
)
}
else
{
console.log(
"alex"
)
}
|
全等號和非全等號
等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所作的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。
控制語句
if控制語句
|
1
2
3
4
5
6
7
8
9
10
11
|
if
-
else
基本格式
if
(表達式){
語句１;
......
}
else
{
語句２;
.....
}
功能說明
若是表達式的值爲
true
則執行語句1,
不然執行語句2
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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 能夠單獨使用
|
1
2
3
4
5
6
7
8
9
10
|
if
語句嵌套格式
if
(表達式1) {
語句1;
}
else
if
(表達式2){
語句2;
}
else
if
(表達式3){
語句3;
}
else
{
語句4;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
|
if
(x==1){
y=
"星期一"
;
}
else
if
(x==2){
y=
"星期二"
;
...
}
else
if
(x==6){
y=
"星期六"
;
}
else
if
(x==0){
y=
"星期日"
;
}
else
{
y=
"未定義"
;
|
switch 選擇控制語句
|
1
2
3
4
5
6
7
|
switch
基本格式
switch
(表達式) {
case
值1:語句1;
break
;
case
值2:語句2;
break
;
case
值3:語句3;
break
;
default
:語句4;
}
|
|
1
2
3
4
5
6
7
8
9
10
|
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結構更加清晰，是程序可讀性更強，效率更高。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
首先要看一個問題，
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
結構要效率高。
switch
爲何效率高？
|
for 循環控制語句
|
1
2
3
4
5
6
7
|
for
循環基本格式
for
(初始化;條件;增量){
語句1;
...
}
功能說明
實現條件循環，當條件成立時，執行語句1，不然跳出循環體
|
|
1
2
3
4
5
6
7
8
9
10
|
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])
}
|
注意：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
doms=document.getElementsByTagName(
"p"
);
for
(
var
i
in
doms){
console.log(i);
// 0 1 2 length item namedItem
//console.log(doms[i])
}
//循環的是你獲取的th一個DOM元素集，for in用來循環對象的全部屬性，dom元素集包含了你上面輸出的屬性。
//若是你只要循環dom對象的話，能夠用for循環:
for
(
var
i=0;i<doms.length;i++){
console.log(i) ;
// 0 1 2
//console.log(doms[i])
}
|
結論：for i in 不推薦使用
while 循環控制語句
|
1
2
3
4
5
6
7
|
while
循環基本格式
while
(條件){
語句1；
...
}
功能說明
運行功能和
for
相似，當條件成立循環執行語句花括號{}內的語句，不然跳出循環
|
|
1
2
3
4
5
6
7
|
var
i=1;
while
(i<=7) {
document.write(
"<H"
+i+
">hello</H "
+i+
"> "
);
document.write(
"<br>"
);
i++;
}
//循環輸出H1到H7的字體大小
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script language=
"JavaScript"
>
/* sayhello是定義的函數名，前面必須加上function和空格*/
function
sayHello(){
var
hellostr;
var
myname=prompt(
"請問您貴姓？"
,
"苑"
);
hellostr=
"您好，"
+myname+
'先生，歡迎進入"探索之旅"！'
;
alert(hellostr);
document.write(hellostr);
}
//這裏是對前面定義的函數進行調用
sayHello();
</script>
|
練習：分別用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("xxx")
3、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 對象中的全部屬性和方法都會出如今其餘對象中
|
1
2
|
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程序大多數功能都是經過對象實現的
|
1
2
3
4
5
6
7
8
9
10
|
<script language=
"javascript"
>
var
aa=Number.MAX_VALUE;
//利用數字對象獲取可表示最大數
var
bb=
new
String(
"hello JavaScript"
);
//建立字符串對象
var
cc=
new
Date();
//建立日期對象
var
dd=
new
Array(
"星期一"
,
"星期二"
,
"星期三"
,
"星期四"
);
//數組對象
</script>
|
3.1 String對象
字符串對象建立
字符串建立(兩種方式)
① 變量 = 「字符串」
② 字串對象名稱 = new String (字符串)
|
1
2
|
var
str1=
"hello world"
;
var
str1=
new
String(
"hello word"
);
|
字符串對象的屬性和函數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
x.length －－－－獲取字符串的長度
x.toLowerCase() －－－－轉爲小寫
x.toUpperCase() －－－－轉爲大寫
x.trim() －－－－去除字符串兩邊空格
－－－－字符串查詢方法
x.charAt(index) －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引
x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)
x.match(regexp) －－－－match返回匹配字符串的數組，若是沒有匹配則返回
null
x.search(regexp) －－－－search返回匹配字符串的首字符位置索引
示例：
var
str1=
"welcome to the world of JS!"
;
var
str2=str1.match(
"world"
);
var
str3=str1.search(
"world"
);
alert(str2[0]);
// 結果爲"world"
alert(str3);
// 結果爲15
－－－－子字符串處理方法
x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置，不能用(-3,-1)這樣的複數
x.slice(start, end) －－－－切片操做字符串
示例：
var
str1=
"abcdefgh"
;
var
str2=str1.slice(2,4);
var
str3=str1.slice(4);
var
str4=str1.slice(2,-1);
var
str5=str1.slice(-3,-1);
alert(str2);
//結果爲"cd"
alert(str3);
//結果爲"efgh"
alert(str4);
//結果爲"cdefg"
alert(str5);
//結果爲"fg"
x.replace(findstr,tostr) －－－－ 字符串替換
x.split(); －－－－分割字符串
var
str1=
"一,二,三,四,五,六,日"
;
var
strArray=str1.split(
","
);
alert(strArray[1]);
//結果爲"二"
x.concat(addstr) －－－－ 拼接字符串
|
String對象的方法(1) —— 格式編排方法
格式編排方法返回值列表
書寫格式:
String對象提供了一組針對HTML格式的方法，如x.anchor()返回錨定義字符串<a>x</a>，
x.bold()返回粗體表示字符串<b>x</b>，x.sup()返回上標格式字符串<sup>x</sup>。
-----------------------------------------
var x="yuan";
var y="x.italics():"+x.italics();
document.write(y.fontsize(10));//<font size="10">x.italics():<i>yuan</i></font>
String對象的方法(2)—— 大小寫轉換
|
1
2
3
4
5
6
7
8
|
var
str1=
"AbcdEfgh"
;
var
str2=str1.toLowerCase();
var
str3=str1.toUpperCase();
alert(str2);
//結果爲"abcdefgh"
alert(str3);
//結果爲"ABCDEFGH"
|
String對象的方法(3) —— 獲取指定字符
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
書寫格式
x.charAt(index)
x.charCodeAt(index)
使用註解
x表明字符串對象
index表明字符位置
index從0開始編號
charAt返回index位置的字符
charCodeAt返回index位置的Unicode編碼
----------------------
var
str1=
"welcome to the world of JS! 苑昊"
;
var
str2=str1.charAt(28);
var
str3=str1.charCodeAt(28);
alert(str2);
//結果爲"苑"
alert(str3);
//結果爲33489
|
String對象的方法(4)—— 查詢字符串
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
//書寫格式
//
//x.indexOf(findstr,index)
//x.lastIndexOf(findstr)
//-------------------------------------
var
str1=
"welcome to the world of JS!"
;
var
str2=str1.indexOf(
"l"
);
var
str3=str1.lastIndexOf(
"l"
);
alert(str2);
//結果爲2
alert(str3);
//結果爲18
//-------*********************************************************-------
//書寫格式
//
//x.match(regexp)
//
//x.search(regexp)
//
//使用註解
//
//x表明字符串對象
//
//regexp表明正則表達式或字符串
//
//match返回匹配字符串的數組，若是沒有匹配則返回null
//
//search返回匹配字符串的首字符位置索引
//-------------------------------------
var
str1=
"welcome to the world of JS!"
;
var
str2=str1.match(
"world"
);
var
str3=str1.search(
"world"
);
alert(str2[0]);
//結果爲"world"
alert(str3);
//結果爲15
|
String對象的方法(5) ——子字符串處理
截取子字符串
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
//截取子字符串
//
//書寫格式
//
//x.substr(start, length)
//
//x.substring(start, end)
//
//使用註解
//
//x表明字符串對象
//
//start表示開始位置
//
//length表示截取長度
//
//end是結束位置加1
//
//第一個字符位置爲0
var
str1=
"abcdefgh"
;
var
str2=str1.substr(2,4);
var
str3=str1.substring(2,4);
alert(str2);
//結果爲"cdef"
alert(str3);
//結果爲"cd"
//-------*********************************************************-------
//x.slice(start, end)
var
str1=
"abcdefgh"
;
var
str2=str1.slice(2,4);
var
str3=str1.slice(4);
var
str4=str1.slice(2,-1);
var
str5=str1.slice(-3,-1);
alert(str2);
//結果爲"cd"
alert(str3);
//結果爲"efgh"
alert(str4);
//結果爲"cdefg"
alert(str5);
//結果爲"fg"
|
替換子字符串
|
1
2
3
4
5
6
|
//x.replace(findstr,tostr)
var
str1=
"abcdefgh"
;
var
str2=str1.replace(
"cd"
,
"aaa"
);
alert(str2);
//結果爲"abaaaefgh"
|
分割字符串
|
1
2
3
4
5
6
|
var
str1=
"一,二,三,四,五,六,日"
;
var
strArray=str1.split(
","
);
alert(strArray[1]);
//結果爲"二"
|
鏈接字符串
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//y=x.concat(addstr)
//
//使用註解
//
//x表明字符串對象
//addstr爲添加字符串
//返回x+addstr字符串
var
str1=
"abcd"
;
var
str2=str1.concat(
"efgh"
);
alert(str2);
//結果爲"abcdefgh"
|
3.2 Array對象
3.2.1 數組建立
建立數組的三種方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
建立方式1:
var
arrname = [元素0,元素1,….];
// var arr=[1,2,3];
建立方式2:
var
arrname =
new
Array(元素0,元素1,….);
// var test=new
Array(100,
"a"
,
true
);
建立方式3:
var
arrname =
new
Array(長度);
// 初始化數組對象:
var
cnweek=
new
Array(7);
cnweek[0]=
"星期日"
;
cnweek[1]=
"星期一"
;
...
cnweek[6]=
"星期六"
;
|
建立二維數組：
|
1
2
3
4
5
6
7
8
9
10
11
|
var
cnweek=
new
Array(7);
for
(
var
i=0;i<=6;i++){
cnweek[i]=
new
Array(2);
}
cnweek[0][0]=
"星期日"
;
cnweek[0][1]=
"Sunday"
;
cnweek[1][0]=
"星期一"
;
cnweek[1][1]=
"Monday"
;
...
cnweek[6][0]=
"星期六"
;
cnweek[6][1]=
"Saturday"
;
|
3.2.2 數組對象的屬性和方法
鏈接數組-join方法：
|
1
2
3
4
5
|
x.join(bystr) －－－－將數組元素拼接成字符串
var
arr1=[1, 2, 3, 4, 5, 6, 7];
var
str1=arr1.join(
"-"
);
alert(str1);
//結果爲"1-2-3-4-5-6-7"
|
鏈接數組-concat方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//鏈接數組-concat方法
//
//x.concat(value,...)
var
a = [1,2,3];
var
a =
new
Array(1,2,3);
var
b=a.concat(4,5) ;
alert(a.toString());
//返回結果爲1,2,3
alert(b.toString());
//返回結果爲1,2,3,4,5
|
數組排序-reverse sort
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
//x.reverse()
//x.sort()
var
arr1=[32, 12, 111, 444];
//var arr1=["a","d","f","c"];
arr1.reverse();
//顛倒數組元素
alert(arr1.toString());
//結果爲444,111,12,32
arr1.sort();
//排序數組元素
alert(arr1.toString());
//結果爲111,12,32,444
//------------------------------
arr=[1,5,2,100];
//arr.sort();
//alert(arr);
//若是就想按着數字比較呢?
function
intSort(a,b){
if
(a>b){
return
1;
//-1
}
else
if
(a<b){
return
-1;
//1
}
else
{
return
0
}
}
arr.sort(intSort);
alert(arr);
function
IntSort(a,b){
return
a-b;
}
|
數組切片-slice
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//x.slice(start, end)
//
//使用註解
//
//x表明數組對象
//start表示開始位置索引
//end是結束位置下一數組元素索引編號
//第一個數組元素索引爲0
//start、end可爲負數，-1表明最後一個數組元素
//end省略則至關於從start位置截取之後全部數組元素
var
arr1=[
'a'
,
'b'
,
'c'
,
'd'
,
'e'
,
'f'
,
'g'
,
'h'
];
var
arr2=arr1.slice(2,4);
var
arr3=arr1.slice(4);
var
arr4=arr1.slice(2,-1);
alert(arr2.toString());
//結果爲"c,d"
alert(arr3.toString());
//結果爲"e,f,g,h"
alert(arr4.toString());
//結果爲"c,d,e,f,g"
|
刪除子數組
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//x. splice(start, deleteCount, value, ...)
//
//使用註解
//
//x表明數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數能夠省略
var
a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
//a變爲 [1,4,5,6,7,8]
alert(a.toString());
a.splice(1,1);
//a變爲[1,5,6,7,8]
alert(a.toString());
a.splice(1,0,2,3);
//a變爲[1,2,3,5,6,7,8]
alert(a.toString());
|
數組的進出棧操做(1)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//push pop這兩個方法模擬的是一個棧操做
//x.push(value, ...) 壓棧
//x.pop() 彈棧
//使用註解
//
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//push是將value值添加到數組x的結尾
//pop是將數組x的最後一個元素刪除
var
arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//結果爲"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//結果爲"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//結果爲"1,2,3,4,5"
|
數組的進出棧操做(2)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// unshift shift
//x.unshift(value,...)
//x.shift()
//使用註解
//
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//unshift是將value值插入到數組x的開始
//shift是將數組x的第一個元素刪除
var
arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);
//結果爲"4,5,1,2,3"
arr1. unshift([6,7]);
alert(arr1);
//結果爲"6,7,4,5,1,2,3"
arr1.shift();
alert(arr1);
//結果爲"4,5,1,2,3"
|
總結js的數組特性：
|
1
2
3
4
5
6
7
8
9
|
// js中數組的特性
//java中數組的特性, 規定是什麼類型的數組,就只能裝什麼類型.只有一種類型.
//js中的數組特性1: js中的數組能夠裝任意類型,沒有任何限制.
//js中的數組特性2: js中的數組,長度是隨着下標變化的.用到多長就有多長.
var
arr5 = [
'abc'
,123,1.14,
true
,
null
,undefined,
new
String(
'1213'
),
new
Function(
'a'
,
'b'
,
'alert(a+b)'
)];
/* alert(arr5.length);//8
arr5[10] = "hahaha";
alert(arr5.length); //11
alert(arr5[9]);// undefined */
|
Date對象
建立Date對象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//方法1：不指定參數
var
nowd1=
new
Date();
alert(nowd1.toLocaleString( ));
//方法2：參數爲日期字符串
var
nowd2=
new
Date(
"2004/3/20 11:12"
);
alert(nowd2.toLocaleString( ));
var
nowd3=
new
Date(
"04/03/20 11:12"
);
alert(nowd3.toLocaleString( ));
//方法3：參數爲毫秒數
var
nowd3=
new
Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());
//方法4：參數爲年月日小時分鐘秒毫秒
var
nowd4=
new
Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));
//毫秒並不直接顯示
|
Date對象的方法—獲取日期和時間
|
1
2
3
4
5
6
7
8
9
10
11
|
獲取日期和時間
getDate() 獲取日
getDay () 獲取星期
getMonth () 獲取月（0-11）
getFullYear () 獲取完全年份
getYear () 獲取年
getHours () 獲取小時
getMinutes () 獲取分鐘
getSeconds () 獲取秒
getMilliseconds () 獲取毫秒
getTime () 返回累計毫秒數(從1970/1/1午夜)
|
練習實例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
function
getCurrentDate(){
//1. 建立Date對象
var
date =
new
Date();
//沒有填入任何參數那麼就是當前時間
//2. 得到當前年份
var
year = date.getFullYear();
//3. 得到當前月份 js中月份是從0到11.
var
month = date.getMonth()+1;
//4. 得到當前日
var
day = date.getDate();
//5. 得到當前小時
var
hour = date.getHours();
//6. 得到當前分鐘
var
min = date.getMinutes();
//7. 得到當前秒
var
sec = date.getSeconds();
//8. 得到當前星期
var
week = date.getDay();
//沒有getWeek
// 2014年06月18日 15:40:30 星期三
return
year+
"年"
+changeNum(month)+
"月"
+day+
"日 "
+hour+
":"
+min+
":"
+sec+
" "
+parseWeek(week);
}
alert(getCurrentDate());
//解決 自動補齊成兩位數字的方法
function
changeNum(num){
if
(num < 10){
return
"0"
+num;
}
else
{
return
num;
}
}
//將數字 0~6 轉換成 星期日到星期六
function
parseWeek(week){
var
arr = [
"星期日"
,
"星期一"
,
"星期二"
,
"星期三"
,
"星期四"
,
"星期五"
,
"星期六"
];
// 0 1 2 3 .............
return
arr[week];
}
|
Date對象的方法—設置日期和時間
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//設置日期和時間
//setDate(day_of_month) 設置日
//setMonth (month) 設置月
//setFullYear (year) 設置年
//setHours (hour) 設置小時
//setMinutes (minute) 設置分鐘
//setSeconds (second) 設置秒
//setMillliseconds (ms) 設置毫秒(0-999)
//setTime (allms) 設置累計毫秒(從1970/1/1午夜)
var
x=
new
Date();
x.setFullYear (1997);
//設置年1997
x.setMonth(7);
//設置月7
x.setDate(1);
//設置日1
x.setHours(5);
//設置小時5
x.setMinutes(12);
//設置分鐘12
x.setSeconds(54);
//設置秒54
x.setMilliseconds(230);
//設置毫秒230
document.write(x.toLocaleString( )+
"<br>"
);
//返回1997年8月1日5點12分54秒
x.setTime(870409430000);
//設置累計毫秒數
document.write(x.toLocaleString( )+
"<br>"
);
//返回1997年8月1日12點23分50秒
|
Date對象的方法—日期和時間的轉換
|
1
2
3
4
5
6
7
8
9
10
11
12
|
日期和時間的轉換:
getTimezoneOffset():8個時區×15度×4分/度=480;
返回本地時間與GMT的時間差，以分鐘爲單位
toUTCString()
返回國際標準時間字符串
toLocalString()
返回本地格式時間字符串
Date.parse(x)
返回累計毫秒數(從1970/1/1午夜到本地時間)
Date.UTC(x)
返回累計毫秒數(從1970/1/1午夜到國際時間)
|
RegExp對象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
//RegExp對象
// 在表單驗證時使用該對象驗證用戶填入的字符串是否符合規則.
//建立正則對象方式1 參數1 正則表達式 參數2 驗證模式 g global / i 忽略大小寫. //參數2通常填寫g就能夠，也有「gi」.
// 用戶名 首字母必須是英文, 除了第一位其餘只能是英文數字和_ . 長度最短不能少於6位 最長不能超過12位
//----------------------------建立方式1
/* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");
//
//驗證字符串
var str = "bc123";
alert(reg1.test(str));// true
//----------------------------建立方式2 /填寫正則表達式/匹配模式;
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
alert(reg2.test(str));// true
*/
//-------------------------------正則對象的方法-------------------
//test方法 ==> 測試一個字符串是否複合 正則規則. 返回值是true 和false.
//-------------------------String 中與正則結合的4個方法------------------.
// macth search split replace
var
str =
"hello world"
;
//alert(str.match(/o/g)); //查找字符串中 複合正則的 內容.
//alert(str.search(/h/g));// 0 查找字符串中符合正則表達式的內容位置
//alert(str.split(/o/g)); // 按照正則表達式對字符串進行切割. 返回數組;
alert(str.replace(/o/g,
"s"
));
// hells wsrld 對字符串按照正則進行替換.
|
Math對象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
//Math對象
//該對象中的屬性方法 和數學有關.
//Math是內置對象 , 與Global的不一樣之處是, 在調用時 須要打出 "Math."前綴.
//屬性學習:
//alert(Math.PI);
//方法學習:
//alert(Math.random()); // 得到隨機數 0~1 不包括1.
//alert(Math.round(1.5)); // 四捨五入
//練習：獲取1-100的隨機整數，包括1和100
//var num=Math.random();
//num=num*10;
//num=Math.round(num);
// alert(num)
//============max min=========================
/* alert(Math.max(1,2));// 2
alert(Math.min(1,2));// 1 */
//-------------pow--------------------------------
alert(Math.pow(2,4));
// pow 計算參數1 的參數2 次方.
abs(x) 返回數的絕對值。
exp(x) 返回 e 的指數。
floor(x)對數進行下舍入。
log(x) 返回數的天然對數（底爲e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四捨五入爲最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。
|
Function 對象(重點)
函數的定義：
|
1
2
3
|
function
函數名 (參數){
函數體;
return
返回值;
}
|
功能說明：
- 可使用變量、常量或表達式做爲函數調用的參數
- 函數由關鍵字function定義
- 函數名的定義規則與標識符一致，大小寫是敏感的
- 返回值必須使用return
Function 類能夠表示開發者定義的任何函數。
用 Function 類直接建立函數的語法以下：
|
1
2
3
4
5
6
|
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不一樣，它是總體加載完纔會執行，因此執行函數放在函數聲明上面或下面均可以：
|
1
2
3
4
5
6
7
8
9
10
|
<script>
//f(); --->OK
function
f(){
console.log(
"hello"
)
}
f()
//----->hello
</script>
|
Function 對象的 length 屬性
如前所述，函數屬於引用類型，因此它們也有屬性和方法。
好比，ECMAScript 定義的屬性 length 聲明瞭函數指望的參數個數。
|
1
|
alert(func1.length)
|
Function 對象的方法
Function 對象也有與全部對象共享的 valueOf() 方法和 toString() 方法。這兩個方法返回的都是函數的源代碼，在調試時尤爲有用。
|
1
|
alert(void(fun1(1,2)))
|
運算符void()做用：攔截方法的返回值
函數的調用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function
func1(a,b){
alert(a+b);
}
func1(1,2);
//3
func1(1,2,3);
//3
func1(1);
//NaN
func1();
//NaN
//只要函數名寫對便可,參數怎麼填都不報錯.
-------------------面試題-----------
function
a(a,b){
alert(a+b);
}
var
a=1;
var
b=2;
a(a,b)
|
函數的內置對象arguments
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
function
add(a,b){
console.log(a+b);
//3
console.log(arguments.length);
//2
console.log(arguments);
//[1,2]
}
add(1,2)
------------------arguments的用處1 ------------------
function
nxAdd(){
var
result=0;
for
(
var
num
in
arguments){
result+=arguments[num]
}
alert(result)
}
nxAdd(1,2,3,4,5)
// ------------------arguments的用處2 ------------------
function
f(a,b,c){
if
(arguments.length!=3){
throw
new
Error(
"function f called with "
+arguments.length+
" arguments,but it just need 3 arguments"
)
}
else
{
alert(
"success!"
)
}
}
f(1,2,3,4,5)
|
匿名函數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 匿名函數
var
func =
function
(arg){
return
"tony"
;
}
// 匿名函數的應用
(
function
(){
alert(
"tony"
);
} )()
(
function
(arg){
console.log(arg);
})(
'123'
)
|
函數的做用域和閉包
做用域
js的做用域和py類似，if while等控制語句並無本身做用域；而函數是有本身的做用域的；
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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：
|
1
2
3
4
5
6
7
8
9
10
11
|
var
city =
'beijing'
;
function
func(){
var
city =
'shanghai'
;
function
inner(){
var
city =
'shenzhen'
;
console.log(city);
}
inner();
}
func();
|
例2：
|
1
2
3
4
5
6
7
8
9
10
11
|
var
city =
'beijing'
;
function
Bar(){
console.log(city);
}
function
func(){
var
city =
'shanghai'
;
return
Bar;
}
var
ret = func();
ret();
//beijing
|
閉包：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
city =
'beijing'
;
function
func(){
var
city =
"shanghai"
;
function
inner(){
// var city = "langfang";
console.log(city);
}
return
inner;
}
var
ret = func();
ret();
|
思考題1：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var
city =
'beijing'
;
function
func(){
var
city =
"shanghai"
;
function
inner(){
// var city = "langfang";
console.log(city);
}
return
inner;
}
var
ret = func();
ret();
var
city =
'beijing'
;
function
Bar(){
console.log(city);
}
function
func(){
var
city =
'shanghai'
;
return
Bar;
}
var
ret = func();
ret();
//beijing
|
做用域鏈（Scope Chain）：
在JavaScript中，函數也是對象，實際上，JavaScript裏一切都是對象。函數對象和其它對象同樣，擁有能夠經過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的做用域中對象的集合，這個集合被稱爲函數的做用域鏈，它決定了哪些數據能被函數訪問。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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];
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
什麼是AO,VO?
在函數建立時，每一個函數都會建立一個活動對象Active Object(AO)，全局對象爲Global Object(VO)，建立函數的過程也就是爲這個對象添加屬性的過程，做用域鏈就是由這些綁定了屬性的活動對象構成的。
例如：找x變量；bar函數在搜尋變量x的過程當中，先從自身AO對象上找，若是bar.AO存在這個屬性，那麼會直接使用這個屬性的值，若是不存在，則會轉到父級函數的AO對象，也就是foo.AO
若是找到x屬性則使用，找不到繼續 在global.VO對象查找，找到x的屬性，返回屬性值。若是在global.VO中沒有找到，則會拋出異常ReferenceError
執行上下文。
函數在執行時會建立一個稱爲「執行上下文（execution context）」的內部對象，執行上下文定義了函數
執行時的環境。每一個執行上下文都有本身的做用域鏈，用於標識符解析，當執行上下文被建立時，而它的做用
域鏈初始化爲當前運行函數的[[Scope]]所包含的對象。
函數執行
在函數執行過程當中，每遇到一個變量，都會檢索從哪裏獲取和存儲數據，該過程從做用域鏈頭部，也就是從活
動對象開始搜索，查找同名的標識符，若是找到了就使用這個標識符對應的變量，若是沒有則繼續搜索做用域
鏈中的下一個對象，若是搜索完全部對象都未找到，則認爲該標識符未定義，函數執行過程當中，每一個標識符都
要經歷這樣的搜索過程。
|
建立做用域鏈的過程
|
1
2
3
4
5
6
7
8
9
10
11
12
|
函數進入全局，建立VO對象，綁定x屬性<入棧>
global.VO={x=underfind; foo:reference of
function
}(這裏只是預解析，爲AO對象綁定聲明的屬性，函數執行時纔會執行賦值語句，因此值是underfind)
遇到foo函數，建立foo.AO，綁定y屬性<入棧>
foo.AO={y=underfind, bar:reference of
function
}
遇到bar函數，建立bar.AO，綁定z屬性<入棧>
bar.AO={z:underfind}
做用域鏈和執行上下文都會保存在堆棧中，因此：
bar函數的scope chain爲：[0]bar.AO-->[1]foo.AO-->[2]global.VO
foo函數的scope chain爲：[0]foo.AO-->[1]global.Vo
//建議：少定義全局變量
//理由：由於做用域鏈是棧的結構，全局變量在棧底，每次訪問全局變量都會遍歷一次棧，//這樣會影響效率
|
函數的scope等於自身的AO對象加上父級的scope，也能夠理解爲一個函數的做用域等於自身活動對象加上父級做用域.
函數執行先後的做用域鏈：
注意：做用域鏈的非本身部分在函數對象被創建（函數聲明、函數表達式）的時候創建，而不須要等到執行
思考題2：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
for
(
var
i=1; i<=9; i++) {
setTimeout(
function
timer(){
console.log( i );
},1000 );
}
//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
for
(
var
i=1; i<=9; i++) {
(
function
(){
var
j = i;
setTimeout(
function
timer(){
console.log( j );
}, 1000 );
})();
|
BOM對象
window對象
全部瀏覽器都支持 window 對象
概念上講：一個html文檔對應一個window對象
功能上講：控制瀏覽器窗口的
使用上講：window對象不須要建立對象，直接使用便可
window 對象方法
|
1
2
3
4
5
6
7
8
9
10
11
12
|
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt() 顯示可提示用戶輸入的對話框。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close() 關閉瀏覽器窗口。
setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
setTimeout() 在指定的毫秒數後調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
scrollTo() 把內容滾動到指定的座標。
|
方法使用
一、alert confirm prompt以及open函數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//----------alert confirm prompt----------------------------
//alert('aaa');
/* var result = confirm("您肯定要刪除嗎?");
alert(result); */
//prompt 參數1 : 提示信息. 參數2:輸入框的默認值. 返回值是用戶輸入的內容.
// var result = prompt("請輸入一個數字!","haha");
// alert(result);
方法講解:
//open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址.
//調用方式1
//open("http://www.baidu.com");
//參數1 什麼都不填 就是打開一個新窗口. 參數2.填入新窗口的名字(通常能夠不填). 參數3: 新打開窗口的參數.
open(
''
,
''
,
'width=200,resizable=no,height=100'
);
// 新打開一個寬爲200 高爲100的窗口
//close方法 將當前文檔窗口關閉.
//close();
|
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var
num = Math.round(Math.random()*100);
function
acceptInput(){
//2.讓用戶輸入(prompt) 並接受 用戶輸入結果
var
userNum = prompt(
"請輸入一個0~100之間的數字!"
,
"0"
);
//3.將用戶輸入的值與 隨機數進行比較
if
(isNaN(+userNum)){
//用戶輸入的無效(重複2,3步驟)
alert(
"請輸入有效數字!"
);
acceptInput();
}
else
if
(userNum > num){
//大了==> 提示用戶大了,讓用戶從新輸入(重複2,3步驟)
alert(
"您輸入的大了!"
);
acceptInput();
}
else
if
(userNum < num){
//小了==> 提示用戶小了,讓用戶從新輸入(重複2,3步驟)
alert(
"您輸入的小了!"
);
acceptInput();
}
else
{
//答對了==>提示用戶答對了 , 詢問用戶是否繼續遊戲(confirm).
var
result = confirm(
"恭喜您!答對了,是否繼續遊戲?"
);
if
(result){
//是 ==> 重複123步驟.
num = Math.round(Math.random()*100);
acceptInput();
}
else
{
//否==> 關閉窗口(close方法).
close();
}
}
}
|
二、setInterval,clearInterval
setInterval() 方法會不停地調用函數，直到clearInterval()被調用或窗口被關閉。由setInterval() 返回的ID值可用做 clearInterval() 方法的參數。
|
1
2
|
語法：<br> setInterval(code,millisec)
其中，code爲要調用的函數或要執行的代碼串。millisec週期性執行或調用 code 之間的時間間隔，以毫秒計。
|
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<input id=
"ID1"
type=
"text"
onclick=
"begin()"
>
<button onclick=
"end()"
>中止</button>
<script>
function
showTime(){
var
nowd2=
new
Date().toLocaleString();
var
temp=document.getElementById(
"ID1"
);
temp.value=nowd2;
}
var
clock;
function
begin(){
if
(clock==undefined){
showTime();
clock=setInterval(showTime,1000);
}
}
function
end(){
clearInterval(clock);
}
</script>
|
DOM對象
什麼是HTML DOM
- HTML Document Object Model（文檔對象模型）
- HTML DOM 定義了訪問和操做HTML文檔的標準方法
- HTML DOM 把 HTML 文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹)
DOM樹
畫dom樹是爲了展現文檔中各個對象之間的關係，用於對象的導航。
document就是整個html文件中的全部標籤
DOM節點
節點類型
HTML 文檔中的每一個成分都是一個節點。
DOM 是這樣規定的：
整個文檔是一個文檔節點 (document)
每一個 HTML 標籤是一個元素節點 (element)
包含在 HTML 元素中的文本是文本節點
每個 HTML 屬性是一個屬性節點
其中，document與element節點是重點。
節點查找
直接查找節點
|
1
2
3
4
|
document.getElementById(「idname」)
document.getElementsByTagName(「tagname」)
document.getElementsByName(「name」)
document.getElementsByClassName(「name」)
|
導航節點屬性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
''
'
parentElement // 父節點標籤元素
children // 全部子標籤
firstElementChild // 第一個子標籤元素
lastElementChild // 最後一個子標籤元素
nextElementtSibling // 下一個兄弟標籤元素
previousElementSibling // 上一個兄弟標籤元素
'
''
|
節點操做
建立節點：
|
1
|
createElement(標籤名) ：建立一個指定名稱的元素。
|
例：var tag=document.createElement("input")
tag.setAttribute("type","text");
添加節點：
|
1
2
3
4
5
|
追加一個子節點（做爲最後的子節點）
somenode.appendChild(newnode)
把增長的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);
|
刪除節點：
|
1
|
removeChild()：得到要刪除的元素，經過父元素調用刪除
|
節點屬性操做：
一、獲取文本節點的值：innerText innerHTML
二、attribute 操做
|
1
2
3
4
5
|
elementNode.setAttribute(name,value)
elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML)
elementNode.removeAttribute(「屬性名」);
|
三、value獲取當前選中的value值
1.input
2.select （selectedIndex）
3.textarea
四、innerHTML 給節點添加html代碼：
該方法不是w3c的標準，可是主流瀏覽器支持
tag.innerHTML = 「<p>要顯示內容</p>」;
五、關於class的操做：
|
1
2
3
|
elementNode.className
elementNode.classList.add
elementNode.classList.remove
|
六、改變css樣式：
|
1
2
3
|
<p id=
"p2"
>Hello world!</p>
document.getElementById(
"p2"
).style.color=
"blue"
;
.style.fontSize=48px
|
DOM Event(事件)
事件類型
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素得到焦點(光標)。 練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onmouseleave 鼠標從元素離開
onselect 文本被選中。
onsubmit 確認按鈕被點擊。
|
綁定事件方式
方式1：
|
1
2
3
4
5
6
7
8
|
<div id=
"div"
onclick=
"foo(this)"
>點我呀</div>
<script>
function
foo(self){
// 形參不能是this;
console.log(
"點你大爺!"
);
console.log(self);
}
</script>
|
方式2：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<p id=
"abc"
>試一試!</p>
<script>
var
ele=document.getElementById(
"abc"
);
ele.onclick=
function
(){
console.log(
"ok"
);
console.log(
this
);
// this直接用
};
</script>
|
時間介紹
一、onload：
onload 屬性開發中 只給 body元素加.這個屬性的觸發 標誌着 頁面內容被加載完成.應用場景: 當有些事情咱們但願頁面加載完馬上執行,那麼可使用該事件屬性.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<script>
/*
window.onload=function(){
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
};
*/
function
fun() {
var
ele=document.getElementById(
"ppp"
);
ele.onclick=
function
(){
alert(123)
};
}
</script>
</head>
<body onload=
"fun()"
>
<p id=
"ppp"
>hello p</p>
</body>
</html>
|
二、onsubmit：
當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<script>
window.onload=
function
(){
//阻止表單提交方式1().
//onsubmit 命名的事件函數,能夠接受返回值. 其中返回false表示攔截表單提交.其餘爲放行.
var
ele=document.getElementById(
"form"
);
ele.onsubmit=
function
(event) {
// alert("驗證失敗 表單不會提交!");
// return false;
// 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動做。
alert(
"驗證失敗 表單不會提交!"
);
event.preventDefault();
}
};
</script>
</head>
<body>
<form id=
"form"
>
<input type=
"text"
/>
<input type=
"submit"
value=
"點我!"
/>
</form>
</body>
</html>
|
三、Event 對象：
Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,而且會在事件函數被調用時傳給事件函數.咱們得到僅僅須要接收一下便可.
好比onkeydown,咱們想知道哪一個鍵被按下了，須要問下event對象的屬性，這裏就時KeyCode；
四、事件傳播：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div id=
"abc_1"
style=
"border:1px solid red;width:300px;height:300px;"
>
<div id=
"abc_2"
style=
"border:1px solid red;width:200px;height:200px;"
>
</div>
</div>
<script type=
"text/javascript"
>
document.getElementById(
"abc_1"
).onclick=
function
(){
alert(
'111'
);
};
document.getElementById(
"abc_2"
).onclick=
function
(event){
alert(
'222'
);
event.stopPropagation();
//阻止事件向外層div傳播.
}
</script>
|
實例練習
一、搜索框
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<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>
</head>
<body>
<input id=
"ID1"
type=
"text"
value=
"請輸入用戶名"
onblur=
"Blurs()"
onfocus=
"Focus()"
>
</body>
</html>
|
二、模態對話框
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
.back{
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div
class
=
"back"
>
<input id=
"ID1"
type=
"button"
value=
"click"
onclick=
"action('show')"
>
</div>
<div
class
=
"shade hide"
></div>
<div
class
=
"models hide"
>
<input id=
"ID2"
type=
"button"
value=
"cancel"
onclick=
"action('hide')"
>
</div>
<script>
function
action(act){
var
ele=document.getElementsByClassName(
"shade"
)[0];
var
ele2=document.getElementsByClassName(
"models"
)[0];
if
(act==
"show"
){
ele.classList.remove(
"hide"
);
ele2.classList.remove(
"hide"
);
}
else
{
ele.classList.add(
"hide"
);
ele2.classList.add(
"hide"
);
}
}
</script>
</body>
</html>
|
三、表格案例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
.back{
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div
class
=
"back"
>
<input id=
"ID1"
type=
"button"
value=
"click"
onclick=
"action('show')"
>
</div>
<div
class
=
"shade hide"
></div>
<div
class
=
"models hide"
>
<input id=
"ID2"
type=
"button"
value=
"cancel"
onclick=
"action('hide')"
>
</div>
<script>
function
action(act){
var
ele=document.getElementsByClassName(
"shade"
)[0];
var
ele2=document.getElementsByClassName(
"models"
)[0];
if
(act==
"show"
){
ele.classList.remove(
"hide"
);
ele2.classList.remove(
"hide"
);
}
else
{
ele.classList.add(
"hide"
);
ele2.classList.add(
"hide"
);
}
}
</script>
</body>
</html>
|
四、select移動
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<div id=
"box1"
>
<select multiple=
"multiple"
size=
"10"
id=
"left"
>
<option>book</option>
<option>book2</option>
<option>book3</option>
<option>book4</option>
<option>book5</option>
<option>book6</option>
</select>
</div>
<div id=
"choice"
>
<input
class
=
"add"
type=
"button"
value=
"--->"
onclick=
"add()"
><br>
<input
class
=
"remove"
type=
"button"
value=
"<---"
onclick=
"remove();"
><br>
<input
class
=
"add-all"
type=
"button"
value=
"====>"
onclick=
"ADDall()"
><br>
<input
class
=
"remove-all"
type=
"button"
value=
"<==="
onclick=
"remall()"
>
</div>
<div>
<select multiple=
"multiple"
size=
"10"
id=
"right"
>
<option>book9</option>
</select>
</div>
<script>
function
add(){
var
right=document.getElementById(
"right"
);
var
options=document.getElementById(
"left"
).getElementsByTagName(
"option"
);
for
(
var
i=0; i<options.length;i++){
var
option=options[i];
if
(option.selected==
true
){
right.appendChild(option);
i--;
}
}
}
function
ADDall(){
var
right=document.getElementById(
"right"
);
var
options=document.getElementById(
"left"
).getElementsByTagName(
"option"
);
for
(
var
i=0; i<options.length;i++){
var
option=options[i];
right.appendChild(option);
i--;
}
}
</script>
|
五、二級聯動
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<select id=
"province"
>
<option>請選擇省:</option>
</select>
<select id=
"city"
>
<option>請選擇市:</option>
</select>
<script>
data={
"河北省"
:[
"廊坊"
,
"邯鄲"
],
"北京"
:[
"朝陽區"
,
"海淀區"
]};
var
p=document.getElementById(
"province"
);
var
c=document.getElementById(
"city"
);
for
(
var
i
in
data){
var
option_pro=document.createElement(
"option"
);
option_pro.innerHTML=i;
p.appendChild(option_pro);
}
p.onchange=
function
(){
pro=(
this
.options[
this
.selectedIndex]).innerHTML;
citys=data[pro];
c.options.length=0;
for
(
var
i
in
citys){
var
option_city=document.createElement(
"option"
);
option_city.innerHTML=citys[i];
c.appendChild(option_city);
}
}
</script>
|
六、跑馬燈與tab切換
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>tab</title>
<style>
*{margin:0; padding:0; list-style:none;}
body{
font-family:
"Helvetica Neue"
,
"Hiragino Sans GB"
,
"Microsoft YaHei"
,
"\9ED1\4F53"
, Arial, sans-serif;
}
h3{
text-align: center;
color:darkcyan;
margin-top: 30px;
letter-spacing: 5px;
}
.box{
width: 1000px;
margin:50px auto 0px;
}
#title{
line-height: 40px;
font-size: 16px;
font-weight: bold;
color: rgb(102,102,102);
}
#title span{
float: left;
width: 166px;
text-align: center;
}
#title span:hover{
/*color: black;*/
cursor: pointer;
}
#content{
margin-top: 20px;
}
#content li{
width: 1050px;
display: none;
}
#content li div{
width: 156px;
margin-right: 14px;
float: left;
text-align: center;
}
#content li div a{
font-size: 14px;
color: black;
line-height: 14px;
/* float: left;*/
display: inline-block;
margin-top: 10px;
}
#content li a:hover{
color:
#B70606;
}
#content li div span{
font-size: 16px;
line-height: 16px;
/*float: left;*/
display: block;
color: rgb(102,102,102);
margin-top: 10px;
}
#content img{
float: left;
width: 155px;
height: 250px;
}
#title .select{
|
js擴展
js做用域
做用域是JavaScript最重要的概念之一，想要學好JavaScript就須要理解JavaScript做用域和做用域鏈的工做原理。
任何程序設計語言都有做用域的概念，簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期。在JavaScript中，變量的做用域有全局做用域和局部做用域兩種。
做用域
1. 全局做用域(Global Scope)
在代碼中任何地方都能訪問到的對象擁有全局做用域，通常來講一下幾種情形擁有全局做用域：
(1)最外層函數和在最外層函數外面定義的變量擁有全局做用域
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var
name=
"yuan"
;
function
foo(){
var
age=23;
function
inner(){
console.log(age);
}
inner();
}
console.log(name);
// yuan
//console.log(age); // Uncaught ReferenceError: age is not defined
foo();
// 23
inner();
// Uncaught ReferenceError: inner is not defined
|
(2)全部末定義直接賦值的變量自動聲明爲擁有全局做用域，例如：
|
1
2
3
4
5
6
7
8
9
10
|
var
name=
"yuan"
;
function
foo(){
age=23;
var
sex=
"male"
}
foo();
console.log(age);
// 23
console.log(sex);
// sex is not defined
|
變量blog擁有全局做用域，而sex在函數外部沒法訪問到。
(3)全部window對象的屬性擁有全局做用域
通常狀況下，window對象的內置屬性都都擁有全局做用域，例如window.alert()、window.location、window.top等等。
2. 局部做用域(Local Scope)
和全局做用域相反，局部做用域通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部，全部在一些地方也會看到有人把這種做用域成爲函數做用域.
如示例1中的age與inner都只有局部做用域。（js中if、for沒有本身的做用域）
做用域鏈(Scope Chain)
在JavaScript中，函數也是對象，實際上，JavaScript裏一切都是對象。函數對象和其它對象同樣，擁有能夠經過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的做用域中對象的集合，這個集合被稱爲函數的做用域鏈，它決定了哪些數據能被函數訪問。
示例演示
please have a try:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
//-----**********************例1*********************************
var
s=12;
function
f(){
console.log(s);
var
s=12;
// if s=12
console.log(s)
}
f();
//-----**********************例2*********************************
var
s=10;
function
foo(){
console.log(s);
var
s=5;
console.log(s);
function
s(){console.log(
"ok"
)}
// 函數的定於或聲明是在詞法分析時完成的,執行時已再也不有任何操做
console.log(s);
}
foo();
//-----***********************例3********************************
function
bar(age) {
console.log(age);
var
age = 99;
var
sex=
'male'
;
console.log(age);
function
age() {
alert(123)
};
console.log(age);
return
100;
}
result=bar(5);
|
|
1
|
//函數名=函數體，在Python中也是這樣只不過Python顯示的是內存地址，js中函數聲明式就是把函數體賦值到函數名上
|
|
1
|
//-----********************************************************
|
結果分析
我相信你們必定會有想不到的結果，接下來咱們就以最複雜的例3來分析整個過程。
當一個函數建立後，它的做用域鏈會被建立此函數的做用域中可訪問的數據對象填充。在函數bar建立時，它的做用域鏈中會填入一個全局對象，該全局對象包含了全部全局變量，以下圖所示：
解析到函數調用時，即bar(5)，會生成一個active object的對象，該對象包含了函數的全部局部變量、命名參數、參數集合以及this，而後此對象會被推入做用域鏈的前端，當運行期上下文被銷燬，活動對象也隨之銷燬。新的做用域鏈以下圖所示：
過程解析：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
function
bar(age) {
console.log(age);
var
age = 99;
var
sex=
"male"
;
console.log(age);
function
age(){
alert(123);
} ;
console.log(age);
return
100;
}
result=bar(5);
一 詞法分析過程(涉及參數，局部變量聲明，函數聲明表達式)：
1-1 、分析參數，有一個參數，造成一個 AO.age=undefine;
1-2 、接收參數 AO.age=5;
1-3 、分析變量聲明，有一個
var
age, 發現 AO 上面有一個 AO.age ，則不作任何處理
1-4 、分析變量聲明，有一個
var
sex，造成一個 AO.sex=undefine;
1-5 、分析函數聲明，有一個
function
age(){} 聲明， 則把原有的 age 覆蓋成 AO.age=
function
(){};
二 執行過程：
2-1 、執行第一個 console.log(age) 時，當前的 AO.age 是一個函數，因此輸出的一個函數
2-2 、這句
var
age=99; 是對不 AO.age 的屬性賦值， AO.age=99 ，因此在第二個輸出的age是 99;
2-3 、同理第三個輸出的是 99, 由於中間沒有改變 age 值的語句了。
注意：執行階段：
function
age(){
alert(123)
} ;
不進行任何操做，將執行語句複製給age這部操做是在詞法分析時，即運行前完成的。
|
相關文章
- 1. html 再憶苑
- 2. 追憶
- 3. 追憶故友
- 4. 追憶2008
- 5. 五月追憶
- 6. 追憶流年
- 7. 追憶2011
- 8. CSP-S：追憶
- 9. 追憶黃昏
- 10. 追憶是杭州
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • XML DOM 克隆節點 - XML DOM 教程
- • YAML 入門教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。