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的神奇世界”這句話飒炎。這是因?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)型,案例的話我們先了解玩數(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>
...