前端基礎(chǔ)之JavaScript
一 JavaScript概述
1.1 JavaScript的歷史
- 1992年Nombas開發(fā)出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).后將其改名ScriptEase.(客戶端執(zhí)行的語言)
- Netscape(網(wǎng)景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產(chǎn)品中開發(fā)出一套livescript的腳本語言.Sun和Netscape共同完成.后改名叫Javascript
- 微軟隨后模仿在其IE3.0的產(chǎn)品中搭載了一個JavaScript的克隆版叫Jscript.
- 為了統(tǒng)一三家,ECMA(歐洲計算機制造協(xié)會)定義了ECMA-262規(guī)范.國際標(biāo)準(zhǔn)化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標(biāo)準(zhǔn)（ISO/IEC-16262）嫉称。從此生真，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失斅降怼）將 ECMAScript 作為 JavaScript 實現(xiàn)的基礎(chǔ)吐绵。EcmaScript是規(guī)范.
1.2 ECMAScript
盡管 ECMAScript 是一個重要的標(biāo)準(zhǔn)瑰剃，但它并不是 JavaScript 唯一的部分，當(dāng)然，也不是唯一被標(biāo)準(zhǔn)化的部分。實際上虑乖，一個完整的 JavaScript 實現(xiàn)是由以下 3 個不同部分組成的：
- 核心（ECMAScript）
- 文檔對象模型（DOM） Document object model (整合js，css晾虑，html)
- 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
- Javascript 在開發(fā)中絕大多數(shù)情況是基于對象的.也是面向?qū)ο蟮?
簡單地說疹味，ECMAScript 描述了以下內(nèi)容：
- 語法
- 類型
- 語句
- 關(guān)鍵字
- 保留字
- 運算符
- 對象（封裝，繼承走贪，多態(tài)）基于對象的語言佛猛。使用對象
二 JavaScript基礎(chǔ)
2.1 JS的引入方式
1 直接編寫
<script>
alert('hello yuan')
</script>
2 導(dǎo)入文件
<script src="hello.js"></script>
2.2 JS的變量、常量和標(biāo)識符
2.2.1 JS的變量
x = 5
y = 6
z = x + y
在代數(shù)中坠狡，我們使用字母（比如 x）來保存值（比如 5）。通過上面的表達(dá)式 z=x+y遂跟，我們能夠計算出 z 的值為 11逃沿。在 JavaScript 中，這些字母被稱為變量幻锁。
那么如何在JS中定義使用變量呢凯亮？
1、聲明變量時不用聲明變量類型. 全都使用var關(guān)鍵字;
var a;
a = 3;
2哄尔、一行可以聲明多個變量.并且可以是不同類型
var name="yuan", age=20, job="lecturer";
3假消、聲明變量時 可以不用var. 如果不用var 那么它是全局變量
4、變量命名,首字符只能是字母,下劃線,$美元符 三選一岭接，余下的字符可以是下劃線富拗、美元符號或任何字母或數(shù)字字符且區(qū)分大小寫，x與X是兩個變量
Camel 標(biāo)記法
首字母是小寫的鸣戴，接下來的字母都以大寫字符開頭啃沪。例如：
var myTestValue = 0, mySecondValue = "hi";
Pascal 標(biāo)記法
首字母是大寫的，接下來的字母都以大寫字符開頭窄锅。例如：
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利類型標(biāo)記法
在以 Pascal 標(biāo)記法命名的變量前附加一個小寫字母（或小寫字母序列）创千，說明該變量的類型。例如入偷，i 表示整數(shù)追驴，s 表示字符串，如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";
2.2.2 常量和標(biāo)識符
常量 ：直接在程序中出現(xiàn)的數(shù)據(jù)值
標(biāo)識符：
- 由不以數(shù)字開頭的字母疏之、數(shù)字殿雪、下劃線(_)、美元符號($)組成
- 常用于表示函數(shù)体捏、變量等的名稱
- 例如：_abc,$abc,abc,abc123是標(biāo)識符冠摄，而1abc不是
- JavaScript語言中代表特定含義的詞稱為保留字糯崎，不允許程序再定義為標(biāo)識符
2.3 JS的數(shù)據(jù)類型
number ----- 數(shù)值
boolean ----- 布爾值
string ----- 字符串
undefined ----- undefined
null ----- null
2.3.1 數(shù)字類型(number)
- 不區(qū)分整型數(shù)值和浮點型數(shù)值;
- 所有數(shù)字都采用64位浮點格式存儲，相當(dāng)于Java和C語言中的double格式河泳。
- 能表示的最大值是±1.7976931348623157 x 10308
- 能表示的最小值是±5 x 10 -324
整數(shù)：
- 在JavaScript中10進(jìn)制的整數(shù)由數(shù)字的序列組成
- 精確表達(dá)的范圍是-9007199254740992 (-253) 到 9007199254740992 (253)
- 超出范圍的整數(shù)沃呢，精確度將受影響
浮點數(shù)：
- 使用小數(shù)點記錄數(shù)據(jù) 例如：3.4，5.6
- 使用指數(shù)記錄數(shù)據(jù) 例如：4.3e23 = 4.3 x 1023
16進(jìn)制和8進(jìn)制數(shù)的表達(dá):
- 16進(jìn)制數(shù)據(jù)前面加上0x拆挥，由0-9,A-F等16個字符組成;
- 八進(jìn)制前面加0薄霜，由0-7等8個數(shù)字組成
2進(jìn)制: 1111 0011 1101 0100 <-----> 16進(jìn)制:0xF3D4 <-----> 10進(jìn)制:62420
2進(jìn)制: 1 111 001 111 010 100 <-----> 8進(jìn)制:0171724
2.3.2 字符串類型(string)
- 是由Unicode字符、數(shù)字纸兔、標(biāo)點符號組成的序列惰瓜；
- 字符串常量首尾由單引號或雙引號括起；
- JavaScript中沒有字符類型汉矿；
常用特殊字符在字符串中的表達(dá)：
- 字符串中部分特殊字符必須加上右劃線\崎坊；
- 常用的轉(zhuǎn)義字符 \n:換行 ':單引號 ":雙引號 \:右劃線
2.3.3 布爾類型(boolean)
Boolean類型僅有兩個值：true和false，也代表1和0洲拇，實際運算中true=1,false=0
布爾值也可以看作on/off奈揍、yes/no、1/0對應(yīng)true/false
Boolean值主要用于JavaScript的控制語句赋续，例如：
if (x==1){
y=y+1;
}else{
y=y-1;
}
2.3.4 Null & Undefined類型
Undefined類型
Undefined 類型只有一個值男翰，即 undefined。當(dāng)聲明的變量未初始化時纽乱，該變量的默認(rèn)值是 undefined蛾绎。
當(dāng)函數(shù)無明確返回值時，返回的也是值 "undefined";
Null類型
另一種只有一個值的類型是 Null鸦列，它只有一個專用值 null租冠，即它的字面量。值 undefined 實際上是從值 null 派生來的敛熬，因此 ECMAScript 把它們定義為相等的肺稀。
盡管這兩個值相等，但它們的含義不同应民。undefined 是聲明了變量但未對其初始化時賦予該變量的值话原，null 則用于表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）诲锹。如果函數(shù)或方法要返回的是對象繁仁，那么找不到該對象時，返回的通常是 null归园。
2.4 運算符
算術(shù)運算符：
+ - * / % ++ --
比較運算符：
> >= < <= != == === !==
邏輯運算符：
&& || 黄虱！
賦值運算符：
= += -= *= /=
字符串運算符：
+ 連接，兩邊操作數(shù)有一個或兩個是字符串就做連接運算
2.4.1 算術(shù)運算符
注意1: 自加自減
假如x=2庸诱，那么x++表達(dá)式執(zhí)行后的值為3捻浦，x--表達(dá)式執(zhí)行后的值為1晤揣；i++相當(dāng)于i=i+1，i--相當(dāng)于i=i-1朱灿；
遞增和遞減運算符可以放在變量前也可以放在變量后：--i
var i=10;
console.log(i++);//10
console.log(i);//11
console.log(++i);//12
console.log(i);//12
console.log(i--);//12
console.log(--i);//10
注意2: 單元運算符
- 除了可以表示減號還可以表示負(fù)號 例如：x=-y
+ 除了可以表示加法運算還可以用于字符串的連接 例如："abc"+"def"="abcdef"
js不同于python昧识，是一門弱類型語言
靜態(tài)類型語言
一種在編譯期間就確定數(shù)據(jù)類型的語言。大多數(shù)靜態(tài)類型語言是通過要求在使用任一變量之前聲明其數(shù)據(jù)類型來保證這一點的盗扒。Java 和 C 是靜態(tài)類型語言跪楞。
動態(tài)類型語言
一種在運行期間才去確定數(shù)據(jù)類型的語言，與靜態(tài)類型相反侣灶。VBScript 和 Python 是動態(tài)類型的甸祭，因為它們確定一個變量的類型是在您第一次給它賦值的時候。
強類型語言
一種總是強制類型定義的語言褥影。Java 和 Python 是強制類型定義的池户。您有一個整數(shù)，如果不明確地進(jìn)行轉(zhuǎn)換 凡怎，不能將把它當(dāng)成一個字符串去應(yīng)用煞檩。
弱類型語言
一種類型可以被忽略的語言，與強類型相反栅贴。JS 是弱類型的。在JS中熏迹，可以將字符串 '12' 和整數(shù) 3 進(jìn)行連接得到字符串'123'檐薯，然后可以把它看成整數(shù) 123 ，所有這些都不需要任何的顯示轉(zhuǎn)換注暗。
所以說 Python 既是動態(tài)類型語言 (因為它不使用顯示數(shù)據(jù)類型聲明)坛缕，又是強類型語言 (因為只要一個變量獲得了一個數(shù)據(jù)類型，它實際上就一直是這個類型了)捆昏。
注意3: NaN
var d="yuan";
d=+d;
alert(d);//NaN:屬于Number類型的一個特殊值,當(dāng)遇到將字符串轉(zhuǎn)成數(shù)字無效時,就會得到一個NaN數(shù)據(jù)
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,除了!=
2.4.2 比較運算符
> >= < <= != == === !==
用于控制語句時：
if (2>1){ // 3 0 false null undefined ［］
console.log("條件成立!")
}
等號和非等號的同類運算符是全等號和非全等號赚楚。這兩個運算符所做的與等號和非等號相同，只是它們在檢查相等性前骗卜，不執(zhí)行類型轉(zhuǎn)換宠页。
console.log(2==2);//true
console.log(2=="2");//true
console.log(2==="2");//false
console.log(2!=="2");//true
注意1：
var bResult = "Blue" < "alpha";
alert(bResult); //輸出 true
在上面的例子中，字符串 "Blue" 小于 "alpha"寇仓，因為字母 B 的字符代碼是 66举户，字母 a 的字符代碼是 97。
比較數(shù)字和字符串
另一種棘手的狀況發(fā)生在比較兩個字符串形式的數(shù)字時遍烦，比如：
var bResult = "25" < "3";
alert(bResult); //輸出 "true"
上面這段代碼比較的是字符串 "25" 和 "3"俭嘁。兩個運算數(shù)都是字符串，所以比較的是它們的字符代碼（"2" 的字符代碼是 50服猪，"3" 的字符代碼是 51）供填。
不過拐云，如果把某個運算數(shù)該為數(shù)字，那么結(jié)果就有趣了：
var bResult = "25" < 3;
alert(bResult); //輸出 "false"
這里近她，字符串 "25" 將被轉(zhuǎn)換成數(shù)字 25叉瘩，然后與數(shù)字 3 進(jìn)行比較，結(jié)果不出所料泄私。
總結(jié)：
比較運算符兩側(cè)如果一個是數(shù)字類型,一個是其他類型,會將其類型轉(zhuǎn)換成數(shù)字類型.
比較運算符兩側(cè)如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續(xù)取第二位比較.
注意2：
等性運算符：
執(zhí)行類型轉(zhuǎn)換的規(guī)則如下：
如果一個運算數(shù)是 Boolean 值房揭，在檢查相等性之前，把它轉(zhuǎn)換成數(shù)字值晌端。false 轉(zhuǎn)換成 0捅暴，true 為 1。
如果一個運算數(shù)是字符串咧纠，另一個是數(shù)字蓬痒，在檢查相等性之前，要嘗試把字符串轉(zhuǎn)換成數(shù)字漆羔。
如果一個運算數(shù)是對象梧奢，另一個是字符串，在檢查相等性之前演痒，要嘗試把對象轉(zhuǎn)換成字符串亲轨。
如果一個運算數(shù)是對象，另一個是數(shù)字鸟顺，在檢查相等性之前惦蚊，要嘗試把對象轉(zhuǎn)換成數(shù)字。
在比較時讯嫂，該運算符還遵守下列規(guī)則：
值 null 和 undefined 相等蹦锋。
在檢查相等性時，不能把 null 和 undefined 轉(zhuǎn)換成其他值欧芽。
如果某個運算數(shù)是 NaN莉掂，等號將返回 false，非等號將返回 true千扔。
如果兩個運算數(shù)都是對象憎妙，那么比較的是它們的引用值。如果兩個運算數(shù)指向同一對象昏鹃，那么等號返回 true尚氛，否則兩個運算數(shù)不等。
2.4.3 邏輯運算符
if (2>1 && [1,2]){
console.log("條件與")
}
// 思考返回內(nèi)容?
console.log(1 && 3);//3
console.log(0 && 3);//0
console.log(0 || 3);//3
console.log(2 || 3);//2
總結(jié)：JS的邏輯運算遵循短路原
2.5 流程控制
- 順序結(jié)構(gòu)(從上向下順序執(zhí)行)
- 分支結(jié)構(gòu)
- 循環(huán)結(jié)構(gòu)
2.5.1 順序結(jié)構(gòu)
<script>
console.log(“星期一”);
console.log(“星期二”);
console.log(“星期三”);
</script>
2.5.1 分支結(jié)構(gòu)
單分支
if(表達(dá)式){
語句１;
}else{
語句2;
}
功能說明：如果表達(dá)式的值為true則執(zhí)行語句1,否則執(zhí)行語句2
示例：
var x= (new Date()).getDay();
//獲取今天的星期值洞渤，0為星期天
var y;
if ( (x==6) || (x==0) ) {
y="周末";
}else{
y="工作日";
}
console.log(y);
多分支
if(表達(dá)式1){
語句1;
}else if(表達(dá)式2){
語句2;
}else{
語句3;
}
示例：
var score=window.prompt("您的分?jǐn)?shù):");
if (score>90){
ret="優(yōu)秀";
}else if (score>80){
ret="良";
}else if (score>60){
ret="及格";
}else {
ret = "不及格";
}
alert(ret);
switch-case結(jié)構(gòu)
switch基本格式
switch (表達(dá)式) {
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結(jié)構(gòu)更加簡潔清晰阅嘶，使程序可讀性更強,效率更高。
2.5.2 循環(huán)結(jié)構(gòu)
for循環(huán)：
for(初始表達(dá)式;條件表達(dá)式;自增或自減){
執(zhí)行語句
……
}
功能說明：實現(xiàn)條件循環(huán)，當(dāng)條件成立時讯柔，執(zhí)行語句1抡蛙，否則跳出循環(huán)體
for循環(huán)的另一種形式：
for( 變量 in 數(shù)組或?qū)ο?
{
執(zhí)行語句
……
}
while循環(huán)：
while (條件){
語句1；
...
}
功能說明：運行功能和for類似魂迄，當(dāng)條件成立循環(huán)執(zhí)行語句花括號{}內(nèi)的語句粗截，否則跳出循環(huán)；同樣支持continue與break語句捣炬。
var i=1;
while (i<=7) {
document.write("<H"+i+">hello</H "+i+"> ");
document.write("<br>");
i++;
}
//循環(huán)輸出H1到H7的字體大小
2.5.3 異常處理
try {
//這段代碼從上往下運行熊昌，其中任何一個語句拋出異常該代碼塊就結(jié)束運行
}catch (e) {
// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執(zhí)行湿酸。
//e是一個局部變量婿屹，用來指向Error對象或者其他拋出的對象
}finally {
//無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執(zhí)行推溃。
}
//主動拋出異常
throw Error('xxxx')