初識(shí)JavaScript
知識(shí)點(diǎn)
(1) . 了解JavaScript的發(fā)展歷史及主要特點(diǎn)
(2) . 了解JavaScript的應(yīng)用范圍
(3) . 掌握J(rèn)avaScript的語(yǔ)法規(guī)范以及在HTML文檔中的應(yīng)用
一、 JavaScript的簡(jiǎn)介
JavaScript（JS）是基于對(duì)象和事件驅(qū)動(dòng)的客戶端腳本語(yǔ)言全景，主要是用來(lái)進(jìn)行Web前端開(kāi)發(fā)的.在JavaScript中敞掘，可以編寫(xiě)響應(yīng)鼠標(biāo)單擊等事件的代碼，創(chuàng)建動(dòng)態(tài)頁(yè)面特效惕橙，從而高效地控制頁(yè)面內(nèi)容良蛮，比如演示案例中的“層切換”和“樹(shù)形菜單”特效融蹂，它們可以在有限的頁(yè)面空間里展現(xiàn)更多的內(nèi)容帮寻。
特別說(shuō)明乍狐，雖然JavaScript可以實(shí)現(xiàn)許多動(dòng)態(tài)效果，但要實(shí)現(xiàn)一個(gè)特效可能需要十幾行固逗，甚至幾十行的代碼浅蚪，而使用jQuery（js程序庫(kù)）可能只需要幾行代碼就能實(shí)現(xiàn)同樣的效果，關(guān)于jQuery的技術(shù)烫罩，我們會(huì)在后面的課程中進(jìn)行講解惜傲，而JavaScript是學(xué)習(xí)jQuery的基礎(chǔ)，打好基礎(chǔ)至關(guān)重要贝攒。
(一) JavaScript的發(fā)展概況
JavaScript語(yǔ)言誕生
JavaScript標(biāo)準(zhǔn)的制定
JavaScript的應(yīng)用推廣
(二) JavaScript的特點(diǎn)解釋型語(yǔ)言
JavaScript是一種解釋型語(yǔ)言盗誊，其源代碼不需要編譯就可以通過(guò)瀏覽器解釋運(yùn)行。在編寫(xiě)代碼時(shí)，它可以和HTML代碼結(jié)合在一起來(lái)解釋執(zhí)行浊伙。基于對(duì)象的語(yǔ)言
它能運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象。許多功能可以來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用长捧。安全性
它不允許訪問(wèn)本地的硬盤(pán)嚣鄙，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除串结，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互哑子。這樣可有效地防止數(shù)據(jù)的丟失。跨平臺(tái)性
JavaScript依賴于瀏覽器本身肌割，與操作環(huán)境無(wú)關(guān)卧蜓，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行
(三) JavaScript的應(yīng)用驗(yàn)證用戶輸入的內(nèi)容
使用JavaScript腳本語(yǔ)言可以在客戶端對(duì)用戶輸入的數(shù)據(jù)進(jìn)行驗(yàn)證把敞。例如在制作用戶注冊(cè)信息頁(yè)面時(shí)弥奸，要求用戶輸入確認(rèn)密碼，以確定用戶輸入密碼是否準(zhǔn)確奋早。如果用戶在“確認(rèn)密碼”域輸入的信息與“密碼”域輸入的信息不同盛霎，將彈出相應(yīng)的提示信息，如圖所示耽装。文字特效
使用JavaScript腳本語(yǔ)言可以使文字實(shí)現(xiàn)多種特效愤炸。例如使文字旋轉(zhuǎn)，如圖所示掉奄。動(dòng)畫(huà)效果
在瀏覽網(wǎng)頁(yè)時(shí)规个，經(jīng)常會(huì)看到一些動(dòng)畫(huà)效果，使頁(yè)面顯得更加生動(dòng)姓建。使用JavaScript腳本語(yǔ)言也可以實(shí)現(xiàn)動(dòng)畫(huà)效果诞仓，例如在頁(yè)面中實(shí)現(xiàn)下雪的效果，如圖所示速兔。窗口的應(yīng)用
在打開(kāi)網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)看到一些浮動(dòng)的廣告窗口狂芋，這些廣告窗口是網(wǎng)站最大的盈利手段。我們也可以通過(guò)JavaScript腳本語(yǔ)言來(lái)實(shí)現(xiàn)憨栽，例如如圖所示的廣告窗口帜矾。
(四) 支持JavaScript的瀏覽器
眾所周知，JavaScript最初開(kāi)發(fā)出來(lái)就是為了嵌套在瀏覽器中使用的屑柔，瀏覽器對(duì)JavaScript支持也是JavaScript代碼能夠正常解析運(yùn)行的基礎(chǔ)屡萤，那么，支持JavaScript瀏覽器有哪些呢掸宛？其實(shí)現(xiàn)在市場(chǎng)上主流的瀏覽器都支持JavaScript死陆，如圖所示的幾款瀏覽器，都對(duì)JavaScript有很好的支持。
二措译、 編寫(xiě)JavaScript的工具
從原理上來(lái)說(shuō)别凤，我們可以用任何一種文本編輯工具來(lái)編寫(xiě)JavaScipt程序，如記事本领虹、Notepad++规哪、EditPlus等，但這一類的編輯工具在寫(xiě)代碼時(shí)很不方便塌衰，因?yàn)镴avaScript是可以嵌入HTML網(wǎng)頁(yè)文檔中的诉稍，所以我們可以用任何一款HTML網(wǎng)頁(yè)文件的編輯工具來(lái)完成JavaScript程序的編寫(xiě)，如Dreamwaver最疆、HBuilder杯巨、WebStorm等。運(yùn)用這些軟件工具來(lái)編寫(xiě)程序的好處是一是代碼自動(dòng)提示努酸，減少我們編寫(xiě)代碼的失誤和提高編寫(xiě)代碼的速度服爷，二是這些工具都有強(qiáng)大的糾錯(cuò)能力，幫助我們減少錯(cuò)誤获诈，三是提供了編寫(xiě)代碼的模板层扶，可以幫助我們提高速度和質(zhì)量。這些軟件編輯工具可以從網(wǎng)上很容易找到烙荷，安裝在計(jì)算機(jī)上就可以使用它們開(kāi)始我們的JavaScript征程了镜会。
(一) DreamWare
下載
鏈接：https://pan.baidu.com/s/1rK_TqCGYhuWX-ARJxK07nA
提取碼：xbi8創(chuàng)建站點(diǎn)
代碼字體設(shè)置
代碼提示快捷鍵
-
代碼格式化
?
三、 JavaScript在HTML中的應(yīng)用
(一) JavaScript的基本結(jié)構(gòu)
通常终抽，JavaScript代碼是用<script>標(biāo)簽嵌入到HTML文檔中戳表。
<script type="text/javascript">
</script >
(1) . type:是<script>標(biāo)簽的屬性，用于指定文本使用的語(yǔ)言類別是JavaScript.
(2) . :是注釋標(biāo)簽昼伴。
(二) 直接將JavaScript代碼嵌入HTML中
- 描述
在HTML文檔中可以使用<script>…</script>標(biāo)記將JavaScript腳本嵌入到其中匾旭。
在HTML文檔中的位置可以隨意，可以在head標(biāo)簽中圃郊，也可以在body標(biāo)簽中
這種方式比較常用价涝，適用于JavaScript代碼較少，且網(wǎng)站中的每個(gè)頁(yè)面使用的JavaScript代碼均不相同的情況。
<html>
<head>
<title>JavaScript簡(jiǎn)介</title>
<script>
......
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>JavaScript簡(jiǎn)介</title>
</head>
<body>
<script>
......
</script>
</body>
</html>
- 經(jīng)驗(yàn)
通常將JavaScript代碼放在<head>標(biāo)簽中 - 演示案例:使用<script>標(biāo)簽
需求
彈出一個(gè)提示框，內(nèi)容為“Hello吠勘，歡迎來(lái)到JavaScript世界”
效果
核心代碼
<script type="text/javascript">
alert("Hello 歡迎來(lái)到JavaScript世界");
</script>
(三) 鏈接外部的JavaScript
描述
在實(shí)際工作中，有時(shí)會(huì)希望在若干個(gè)頁(yè)面中運(yùn)行JavaScript實(shí)現(xiàn)相同的頁(yè)面效果居兆，針對(duì)這種情況，通常使用外部JavaScript文件竹伸。
外部JavaScript文件是將JavaScript寫(xiě)入一個(gè)外部文件中泥栖，以*.js為擴(kuò)展名保存，然后將該文件指定給<script>標(biāo)簽中的”src”屬性，這樣就可以使用這個(gè)外部文件吧享。演示案例：使用外部js文件
實(shí)現(xiàn)效果核心代碼
hello.js代碼
document.write("使用JavaScript輸出Hello World");
document.write("<h1>Hello World</h1>");
export.html
<script type="text/javascript" src="js/hello.js"></script>注意
外部文件不能包含<script>標(biāo)簽魏割，通常將擴(kuò)展名為.js的文件放到網(wǎng)站目錄單獨(dú)存放腳本的子目錄中，一般為js钢颂，這樣容易管理和維護(hù)钞它。
(四) 直接在HTML標(biāo)簽中使用描述
有時(shí)候需要在頁(yè)面中加入簡(jiǎn)短的JavaScript代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)單的頁(yè)面效果，如單擊按鈕時(shí)彈出一個(gè)對(duì)話框等甸陌，這樣通常會(huì)在按鈕事件中加入JavaScript處理程序。演示案例：直接在HTML標(biāo)簽中
需求
當(dāng)單擊“彈出消息框”按鈕時(shí)盐股，彈出提示對(duì)話框钱豁。
效果
核心代碼
<input type="button" name="btn" value="彈出消息框" onClick="javascript:alert('歡迎你');"/>
代碼中，onclick是單擊的事件處理程序疯汁，當(dāng)用戶單擊按鈕時(shí)牲尺，就會(huì)執(zhí)行“javascript：”后面的JavaScript命令，alert()是一個(gè)函數(shù)幌蚊，alert()是一個(gè)函數(shù)谤碳，作用是向頁(yè)面彈出一個(gè)對(duì)話框。
?
四溢豆、 課堂練習(xí)
(一) 使用<script>標(biāo)簽實(shí)現(xiàn)如下效果
(二) 使用外部引用蜒简，實(shí)現(xiàn)如下效果
(三) 將“隨機(jī)抽獎(jiǎng)小程序”改成外部引用
