《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第1章

項(xiàng)目1JavaScript初體驗(yàn)任務(wù)1先導(dǎo)知識(shí)：JavaScript概述任務(wù)2

JavaScript編寫初體驗(yàn)任務(wù)3

JavaScript腳本編寫的注意事項(xiàng)

任務(wù)1先導(dǎo)知識(shí)：JavaScript概述

1.1.1JavaScript的性質(zhì)

JavaScript是一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)弱類型、基于原型的語(yǔ)言，內(nèi)置對(duì)類型的支持。JavaScript的解釋器也稱為JavaScript引擎。

JavaScript是一種網(wǎng)絡(luò)腳本語(yǔ)言，廣泛應(yīng)用于客戶端，最早在HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用)網(wǎng)頁(yè)上使用，用于給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。

JavaScript的性質(zhì)可以概括如下：

(1)是一種直譯式腳本語(yǔ)言(代碼不進(jìn)行預(yù)編譯)。

(2)主要用來(lái)向HTML頁(yè)面添加交互行為。

(3)可以直接嵌入HTML頁(yè)面，但寫成單獨(dú)的js文件，以利于結(jié)構(gòu)和行為的分離。

(4)在絕大多數(shù)瀏覽器的支持下可以在多種平臺(tái)(如Windows、Linux、Android、iOS等)下運(yùn)行。

1.1.2JavaScript的使用場(chǎng)景

1.表單數(shù)據(jù)合法性驗(yàn)證

使用JavaScript腳本語(yǔ)言能有效地驗(yàn)證客戶端提交的表單上的數(shù)據(jù)的合法性，若數(shù)據(jù)合法則進(jìn)行下一步操作，否則返回錯(cuò)誤提示信息，如圖1.1所示。

圖1.1JavaScript用于表單校驗(yàn)

2.網(wǎng)頁(yè)特效

使用JavaScript腳本語(yǔ)言，結(jié)合DOM和CSS能創(chuàng)建絢麗多彩的網(wǎng)頁(yè)特效，如各種閃爍的文字、滾動(dòng)的廣告圖片、頁(yè)面輪換效果等，如圖1.2所示。

圖1.2JavaScript用于網(wǎng)頁(yè)特效

3.交互式菜單

使用JavaScript腳本語(yǔ)言可以創(chuàng)建具有動(dòng)態(tài)效果的交互式菜單，這種菜單完全可以與用Flash制作的頁(yè)面導(dǎo)航菜單相媲美，如圖1.3所示。

圖1.3交互式菜單

1.1.3JavaScript的特點(diǎn)

JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言，主要用于創(chuàng)建具有較強(qiáng)交互性的動(dòng)態(tài)頁(yè)面。JavaScript主要具有如下特點(diǎn)：

基于對(duì)象：JavaScript是基于對(duì)象的腳本編程語(yǔ)言，能通過(guò)DOM(文檔結(jié)構(gòu)模型)及自身提供的對(duì)象及操作方法來(lái)實(shí)現(xiàn)所需的功能。

事件驅(qū)動(dòng)：JavaScript采用事件驅(qū)動(dòng)方式響應(yīng)鍵盤事件、鼠標(biāo)事件及瀏覽器窗口事件等，并執(zhí)行指定的操作。

解釋性語(yǔ)言：JavaScript是一種解釋性腳本語(yǔ)言，無(wú)須專門的編譯器編譯，在嵌入JavaScript腳本的HTML文檔載入時(shí)被瀏覽器逐行解釋，大量節(jié)省了客戶端與服務(wù)器端進(jìn)行數(shù)據(jù)交互的時(shí)間。

實(shí)時(shí)性：JavaScript事件處理是實(shí)時(shí)的，無(wú)須經(jīng)服務(wù)器就可以對(duì)客戶端的事件做出響應(yīng)，并用處理的結(jié)果實(shí)時(shí)更新目標(biāo)頁(yè)面。

動(dòng)態(tài)性：JavaScript提供簡(jiǎn)單高效的語(yǔ)言流程，能靈活處理對(duì)象的各種方法和屬性，同時(shí)及時(shí)響應(yīng)文檔頁(yè)面的事件，實(shí)現(xiàn)頁(yè)面的交互性和動(dòng)態(tài)性。

跨平臺(tái)：JavaScript的正確運(yùn)行依賴于瀏覽器，而與具體的操作系統(tǒng)無(wú)關(guān)。只要客戶端裝有支持JavaScript的瀏覽器，JavaScript運(yùn)行結(jié)果就能正確反映在客戶端瀏覽器平臺(tái)上。

使用簡(jiǎn)單：JavaScript的基本結(jié)構(gòu)類似于C語(yǔ)言，采用小程序段的方式進(jìn)行編程，并具有簡(jiǎn)易的開發(fā)平臺(tái)和便捷的開發(fā)流程，可嵌入HTML文檔中供瀏覽器解釋執(zhí)行。同時(shí)JavaScript的變量類型是弱類型，使用不嚴(yán)格。

相對(duì)安全：JavaScript是客戶端腳本，通過(guò)瀏覽器解釋并執(zhí)行。JavaScript不允許用戶訪問(wèn)本地的硬盤，并且不能將數(shù)據(jù)存到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改或刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失。

1.1.4JavaScript的未來(lái)

tackOverflow在2017年所做的調(diào)查顯示，JavaScript是最常用的編程語(yǔ)言，如圖1.4所示。

圖1.4StackOverflow編程語(yǔ)言排名

從以上數(shù)據(jù)可以看出，JavaScript不可能在短期內(nèi)消失。在開發(fā)交互式網(wǎng)頁(yè)時(shí)，JavaScript仍然是最好的選擇之一，而且它是所有主要瀏覽器都支持的編程語(yǔ)言。

另一個(gè)重要的細(xì)節(jié)是，JavaScript已從一個(gè)可以將一些交互性帶入網(wǎng)頁(yè)的工具發(fā)展成為一個(gè)可以進(jìn)行高效服務(wù)器端開發(fā)的工具。Node.js是一個(gè)開放源碼的運(yùn)行環(huán)境，允許使用JavaScript創(chuàng)建服務(wù)器端代碼。幾十個(gè)基于Node.js的框架(如Meteor和Derby)使這種技術(shù)幾乎適用于任何類型的項(xiàng)目，并提供了構(gòu)建高度可擴(kuò)展的Web應(yīng)用程序所需的功能。

任務(wù)2JavaScript編寫初體驗(yàn)

1.2.1編寫“HelloWorld!”程序?qū)⒋a保存為.html(或.html)格式文件并雙擊打開，系統(tǒng)調(diào)用瀏覽器解釋執(zhí)行，運(yùn)行結(jié)果如圖1.5所示。

圖1.5“HelloWorld!”程序的運(yùn)行結(jié)果

1.2.2編寫簡(jiǎn)單的滾動(dòng)字幕程序

將代碼保存為.html(或.html)格式文件并雙擊打開，系統(tǒng)調(diào)用谷歌瀏覽器解釋執(zhí)行，運(yùn)行結(jié)果如圖1.6所示。

圖1.6簡(jiǎn)單的滾動(dòng)字幕的運(yùn)行結(jié)果

任務(wù)3JavaScript腳本編寫的注意事項(xiàng)

1.3.1選擇JavaScript腳本編輯器編寫JavaScript腳本代碼可以選擇普通的文本編輯器，如WindowsNotepad、UltraEdit、Dreamweaver、MicrosoftFrontPage等，只要所選的編輯器能將編輯的代碼最終保存為HTML文檔類型(?.htm、.html等)即可。

1.3.2引入腳本代碼到HTML文檔中

將JavaScript腳本嵌入HTML文檔中有3種標(biāo)準(zhǔn)方法：

(1)將代碼包含于<script>和</script>標(biāo)記對(duì)，然后嵌入HTML文檔中；

(2)通過(guò)<script>標(biāo)記的src屬性連接外部的JavaScript腳本文件；

(3)通過(guò)JavaScript偽URL地址引入。

1.通過(guò)<script>與</script>標(biāo)記對(duì)引入

瀏覽器載入嵌有JavaScript腳本的HTML文檔時(shí)，能自動(dòng)識(shí)別JavaScript腳本代碼的起始標(biāo)記<script>和結(jié)束標(biāo)記</script>，并將其間的代碼按照解釋JavaScript腳本代碼的方法加以解釋，然后將解釋的結(jié)果返回HTML文檔并在瀏覽器窗口顯示。

2.通過(guò)<script>標(biāo)記的src屬性引入

通過(guò)外部引入JavaScript腳本文件的方式也能實(shí)現(xiàn)同樣的功能。同時(shí)，該方法具有如下優(yōu)點(diǎn)：

(1)將腳本程序同現(xiàn)有頁(yè)面的邏輯結(jié)構(gòu)及瀏覽器結(jié)果分離。通過(guò)外部腳本，可以輕易實(shí)現(xiàn)多個(gè)頁(yè)面共用完成同一功能的腳本文件，以便通過(guò)更新一個(gè)腳本文件的內(nèi)容達(dá)到批量更新的目的。

(2)瀏覽器可以實(shí)現(xiàn)對(duì)目標(biāo)腳本文件的高速緩存，避免由于引用具有同樣功能的腳本代碼而導(dǎo)致下載時(shí)間增加。

3.通過(guò)JavaScript偽URL地址引入

在支持JavaScript腳本的瀏覽器中，可以通過(guò)JavaScript偽URL地址調(diào)用語(yǔ)句來(lái)引入JavaScript腳本代碼。

用鼠標(biāo)點(diǎn)擊文本框，系統(tǒng)彈出警示框，如圖1.7、圖1.8所示。

圖1.7警示框1

圖1.8警示框2

1.3.3嵌入腳本代碼的位置

JavaScript腳本代碼可放在HTML文檔中任何需要的位置。一般來(lái)說(shuō)，可以在<head>與</head>標(biāo)記對(duì)、<body>與</body>標(biāo)記對(duì)之間按需要放置JavaScript腳本代碼。

1.在<head>與</head>標(biāo)記對(duì)之間放置

放置在<head>與</head>標(biāo)記對(duì)之間