JavaScript簡(jiǎn)史
JavaScript誕生于1995年，JavaScript的誕生，使頁(yè)面不再是一成不變的靜態(tài)頁(yè)面，而且增加了用戶(hù)交互、控制瀏覽器及動(dòng)態(tài)創(chuàng)建頁(yè)面內(nèi)容等功能。最重要的是，JacaScript使合法性驗(yàn)證的工作在客戶(hù)端得以實(shí)現(xiàn)。
JavaScript嵌入到HTML語(yǔ)言中，直接通過(guò)瀏覽器就得以運(yùn)行，我們通常將JavaScript稱(chēng)為Web腳本語(yǔ)言。JavaScript是一種輕型的、解釋性的腳本語(yǔ)言，是一種由瀏覽器內(nèi)的解釋器解釋執(zhí)行的程序語(yǔ)言。
在HTML代碼中添加JavaScript腳本代碼的3個(gè)方式如下：
-
1.HTML文件混合方式：
JavaScript是嵌入到HTML文檔中才得以實(shí)現(xiàn)的，這時(shí)我們就需要通過(guò)<script></script>這對(duì)標(biāo)簽將JavaScript腳本嵌入到HTML頁(yè)面中使其產(chǎn)生作用，代碼塊如下：
...
<body>
<script type="text/javascript">
document.write("歡迎進(jìn)入JavaScript的神奇世界");
</script>
</body>
...
下面讓我們來(lái)看看運(yùn)行之后的結(jié)果吧:
可以看到，我們并沒(méi)有在<body>標(biāo)簽中添加任何其他的HTML標(biāo)簽，但是運(yùn)行的結(jié)果卻輸出了“歡迎進(jìn)入JavaScript的神奇世界”這句話(huà)。這是因?yàn)镴avaScript中的document.write()這個(gè)方法輸出了上面的這條語(yǔ)句。
-
2.JS文件引用方式：
當(dāng)JavaScript的代碼較少是，我們完全可以使用<script>標(biāo)簽將代碼嵌入到頁(yè)面中，但是，當(dāng)頁(yè)面需要嵌入的JavaScript代碼很多時(shí)，如果直接嵌入到頁(yè)面，會(huì)使頁(yè)面的可讀性變得較為復(fù)雜。因此，可以將行數(shù)多的JacaScript代碼創(chuàng)建為一個(gè)單獨(dú)的文件，該文件以js為擴(kuò)展名，然后在HTML文檔中指定文件路徑進(jìn)行引用。引用單獨(dú)的JavsScript文件不僅能使HTML頁(yè)面更為清晰，而且使JavaScript代碼能夠重復(fù)使用。下面讓我們來(lái)看看具體的使用方法：
我們先創(chuàng)建一個(gè)擴(kuò)展名為js的script腳本，然后在腳本中寫(xiě)入我們的輸出語(yǔ)句。
接著我們回到HTML頁(yè)面在<script>標(biāo)簽中引用我們直接編寫(xiě)的js腳本：
...
<body>
<script type="text/javascript" src="./test.js"></script>
</body>
...
我們?cè)龠\(yùn)行一遍，結(jié)果和上面是一樣的，是不是很簡(jiǎn)單？
-
3.HTML代碼嵌入式：
腳本代碼可以作為標(biāo)簽的屬性只。如：
...
<body>
<a href="javaScript:document.write('歡迎進(jìn)入JavaScript的神奇世界')">hello</a>
</body>
...
我們點(diǎn)擊hello的超鏈接，瀏覽器就會(huì)執(zhí)行JavaScript后面的腳本代程序碼。效果與上面無(wú)二，這里我們需要注意一下，因?yàn)橥饷嬗昧穗p引號(hào)，如雙引號(hào)內(nèi)需要使用則變?yōu)閱我?hào)。以上就是在HTML代碼中添加JavaScript腳本代碼的3個(gè)方法啦。
JavaScript核心語(yǔ)法
JavaScript是一門(mén)語(yǔ)言，與其他程序設(shè)計(jì)語(yǔ)言相同，有著獨(dú)特的語(yǔ)法結(jié)構(gòu)，主要包含變量、數(shù)據(jù)類(lèi)型、運(yùn)算符號(hào)、控制語(yǔ)句與注釋等。
-
1.變量
變量是存儲(chǔ)數(shù)據(jù)的基本單位，JavaScript通常利用變量來(lái)參與各種運(yùn)算，實(shí)現(xiàn)動(dòng)態(tài)的效果 。定義變量的方法如下：
...
<script>
var message;//聲明變量
message = "hi";//不聲明變量而直接賦值
var width = 34, height = 31;//連續(xù)聲明變量我們用逗號(hào)隔開(kāi)并分別賦值
</script>
...
var是聲明變量的關(guān)鍵字，message、width、height是變量名。為變量命名時(shí)，我們要遵循以下規(guī)則：
（1）第一個(gè)字符必須是一個(gè)字母、下劃線(_）或一個(gè)美元符號(hào)（$）。
（2）其他字符可以是字母、下劃線、美元符號(hào)或數(shù)字。
（3）區(qū)分大小寫(xiě)。
（4）不能與關(guān)鍵字同名，如：while、for 和 if 等。
變量可以不經(jīng)聲明而直接使用，但是這種方法很容易出錯(cuò)，因此不推薦使用。
JavaScript 的變量采用弱類(lèi)型的形式，即聲明變量時(shí)不必確定類(lèi)型，而是在使用或賦值時(shí)自動(dòng)確定其數(shù)據(jù)類(lèi)型，案例的話(huà)我們先了解玩數(shù)據(jù)類(lèi)型在給大家展示。
-
2.數(shù)據(jù)類(lèi)型
JavaScript中有5種簡(jiǎn)單的數(shù)據(jù)類(lèi)型，也稱(chēng)為基本數(shù)據(jù)類(lèi)型，分別是undefined、null、boolean、number和string。另外還有一種復(fù)雜數(shù)據(jù)類(lèi)型——object對(duì)象類(lèi)型。下面重點(diǎn)講解typeof操作符和JavaScript中的5種簡(jiǎn)單數(shù)據(jù)類(lèi)型：
typefo操作符——因?yàn)閖s是弱類(lèi)型的，因此需要一種手段來(lái)檢測(cè)給定變量的數(shù)據(jù)類(lèi)型，typefo就是負(fù)責(zé)提供這方面信息的操作符。
-
案例1.00
...<script> var message = "hi"; document.write(typeof message);//string var name; document.write(typeof name);//undefined var age = 16; document.write(typeof age);//number var obj = new Date(); document.write(typeof obj);//object var flag = 1<2; document.write(typeof flag);//Boolean </script>
...
其中，undefined表示變量沒(méi)有定義。boolean是布爾類(lèi)型，也稱(chēng)為真假類(lèi)型。此類(lèi)型有兩個(gè)標(biāo)準(zhǔn)值：true（真）和false（假）。布爾值用于表示一個(gè)邏輯表達(dá)式的結(jié)果，通常用作判斷處理。number類(lèi)型表示整數(shù)，小數(shù)。string式字符串類(lèi)型，是程序中使用最廣泛的一種類(lèi)型。字符串式位于單引號(hào)或雙引號(hào)中的若干字符。
null是空類(lèi)型，表示一個(gè)變量已經(jīng)有值，但值為空對(duì)象，使用typeof檢測(cè)時(shí)會(huì)返回object，如：
...
<script>
var obj = null;
document.write(typeof obj);
</script>
...
執(zhí)行以上腳本，輸出“object”。注意：JavaScript不區(qū)分單引號(hào)或雙引號(hào)，但應(yīng)避免出現(xiàn)引號(hào)不匹配的情況，如：
...
var str = 'hello";
var str = "hello';
...
-
3.運(yùn)算符
運(yùn)算符是一種特殊的符號(hào)，一般由1~3個(gè)字符組成，用于實(shí)現(xiàn)數(shù)據(jù)之間的運(yùn)算、賦值和比較。
JavaScript中的運(yùn)算符號(hào)：
| 類(lèi)型 | 運(yùn)算符 |
|---|---|
| 算術(shù)運(yùn)算符 | +, - , *, /, % , ++ ,-- |
| 賦值運(yùn)算符 | = |
| 比較運(yùn)算符 | >, < ,>=, <= ,==, != |
| 邏輯運(yùn)算符 | &&, ! |
!邏輯運(yùn)算符還有 “ || ”，但因?yàn)閙arkdown語(yǔ)法問(wèn)題無(wú)法在表格中顯示出來(lái)還請(qǐng)注意。
-
4.JavaScript的流程控制語(yǔ)句
JavaScript常用的程序流程有3種結(jié)構(gòu)：順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。
1.順序結(jié)構(gòu)
顧名思義，順序結(jié)構(gòu)就是程序按照語(yǔ)句出現(xiàn)的先后春旭依次執(zhí)行，這是所有程序的最基本結(jié)構(gòu)，程序中的大部分代碼通常采用的都是順序結(jié)構(gòu)。-
2.選擇結(jié)構(gòu)
在編寫(xiě)一個(gè)程序時(shí)，通常需要根據(jù)特定的條件執(zhí)行不同的語(yǔ)句，JavaScript中用選擇結(jié)構(gòu)來(lái)達(dá)到這種需求。JavaScript中選擇結(jié)構(gòu)有 if 語(yǔ)句和 switch 語(yǔ)句 。
（1）if 單分支語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例：
...<script> if(條件表達(dá)式){ 語(yǔ)句或語(yǔ)句塊 } </script>
...
（2）if 多分支語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例：
...
<script>
if(條件表達(dá)式1){
語(yǔ)句或語(yǔ)句塊1
}else if(條件表達(dá)式2){
語(yǔ)句或語(yǔ)句塊2
}else if(條件表達(dá)式n){
語(yǔ)句或語(yǔ)句塊n
}else{
語(yǔ)句或語(yǔ)句塊n
}
</script>
...
（3）switch 語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例：
...
<script>
switch(表達(dá)式){
case 取值1：語(yǔ)句或語(yǔ)句塊1；break;
case 取值2：語(yǔ)句或語(yǔ)句塊2；break;
......
case 取值n: 語(yǔ)句或語(yǔ)句塊n；break;
default: 語(yǔ)句或語(yǔ)句塊n+1；break;
}
</script>
...
- 循環(huán)結(jié)構(gòu)
（1） while語(yǔ)句的語(yǔ)法循環(huán)結(jié)構(gòu)和示例：
...
<script>
while(條件表達(dá)式){
語(yǔ)句或語(yǔ)句塊
}
</script>
...
（2） do-while語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例：
...
<script>
do{
語(yǔ)句或語(yǔ)句塊
}while(條件表達(dá)式);
</script>
...
（3）for 語(yǔ)句的語(yǔ)法結(jié)構(gòu)和示例：
...
<script>
for(初始化表達(dá)式;循環(huán)表達(dá)式;循環(huán)后的操作表達(dá)式){
語(yǔ)句或語(yǔ)句塊
}
</script>
...
