海南軟件職業(yè)技術(shù)學(xué)院 陳少暉

J a v a S c r i p t技術(shù)在網(wǎng)頁(yè)中的應(yīng)用

海南軟件職業(yè)技術(shù)學(xué)院 陳少暉

JavaScript是一種解釋性語(yǔ)言，主要特點(diǎn)是基于對(duì)象和事件驅(qū)動(dòng)的，同時(shí)具有安全性，其目的就是增強(qiáng)Web客戶交互，彌補(bǔ)了HTML的缺陷。

JavaScript可以增強(qiáng)頁(yè)面交互效果，給用戶提供更好、更令人興奮的體驗(yàn)；確保用戶在表單中輸入有效的信息，可以節(jié)省業(yè)務(wù)開(kāi)支；即時(shí)創(chuàng)建HTML頁(yè)面；還可以處理表單，設(shè)置cookie，創(chuàng)建基于Web的應(yīng)用程序。如今開(kāi)發(fā)網(wǎng)頁(yè)要求越來(lái)越高，要有美觀的界面、強(qiáng)大的功能、簡(jiǎn)單的操作，這些要求都可以使用JavaScript來(lái)實(shí)現(xiàn)。

1.JavaScript技術(shù)簡(jiǎn)介

JavaScript是一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，其源代碼不需要經(jīng)過(guò)編譯再發(fā)送到客戶端，而是瀏覽器直接執(zhí)行發(fā)送給客戶冠的文本格式代碼。JavaScript組成為三部分，包括ECMAScript，描述了該語(yǔ)言的語(yǔ)法和基本對(duì)象；文檔對(duì)象模型（DOM），描述處理網(wǎng)頁(yè)內(nèi)容的方法和接口；瀏覽器對(duì)象模型（BOM），描述與瀏覽器進(jìn)行交互的方法和接口。

目前，JavaScript是因特網(wǎng)上最流行的腳本語(yǔ)言。其彌補(bǔ)了HTML語(yǔ)言的缺陷，是HTML與動(dòng)態(tài)網(wǎng)頁(yè)程序設(shè)計(jì)語(yǔ)言折中的選擇。JavaScript腳本語(yǔ)言主要特點(diǎn)如下：

(1)一種腳本編寫(xiě)的語(yǔ)言。

目前，C、C++、Java等語(yǔ)言都是需要先編譯才能使用，而JavaScript的語(yǔ)法基本結(jié)構(gòu)形式與這些語(yǔ)言非常類似，但是無(wú)須編譯，而是在程序運(yùn)行過(guò)程中被逐行解釋。JavaScript與HTML標(biāo)識(shí)相結(jié)合，從而使用戶的操作更簡(jiǎn)單方便。

(2)一種基于對(duì)象的語(yǔ)言。

JavaScript也可以被看作是一種面向?qū)ο蟮恼Z(yǔ)言，這意味著JavaScript能運(yùn)用其已經(jīng)創(chuàng)建的對(duì)象，使編程方法更加簡(jiǎn)化。

(3)一種簡(jiǎn)單的語(yǔ)言。

JavaScript腳本語(yǔ)言和其他基礎(chǔ)編程語(yǔ)言相通，對(duì)于使用者來(lái)說(shuō)上手比較容易，同時(shí)，其變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。

(4)一種高安全性的語(yǔ)言。

JavaScript不被允許訪問(wèn)本地的硬盤，且不能向服務(wù)器發(fā)送信息，只能在瀏覽器中瀏覽信息或動(dòng)態(tài)交互。JavaScript作為一種高安全性的語(yǔ)言可以有效地防止數(shù)據(jù)的丟失或?qū)ο到y(tǒng)的非法訪問(wèn)。

(5)一種動(dòng)態(tài)響應(yīng)的語(yǔ)言。

JavaScript腳本語(yǔ)言可以在瀏覽器中直接對(duì)用戶的輸入做出響應(yīng)，器使用的是“事件驅(qū)動(dòng)”機(jī)制，從而簡(jiǎn)化編程。

(6)一種跨平臺(tái)的語(yǔ)言。

JavaScript腳本語(yǔ)言無(wú)論在任何時(shí)候任何地方，只要計(jì)算機(jī)能使用瀏覽器，就能被正確執(zhí)行。

2.JavaScript使用方法

JavaScript 是一種輕量級(jí)的編程語(yǔ)言，通常該語(yǔ)言是通過(guò)嵌入或?qū)氲紿TML中實(shí)現(xiàn)自身的功能的。

2.1 嵌入式JavaScript腳本

HTML中JavaScript腳本必須位于＜script＞與＜/script＞標(biāo)簽之間，＜script＞與＜/script＞會(huì)告訴JavaScript在何處開(kāi)始和結(jié)束。具體用法如下：

＜script＞

//JavaScript腳本

＜/script＞

該腳本可以不限數(shù)量的放置在HTML頁(yè)面的＜body＞或＜head＞部分中的任何位置，或者同時(shí)存在兩個(gè)部分中。通常的做法是把函數(shù)放入 ＜head＞ 部分中，或者放在頁(yè)面底部。這樣就可以把它們安置到同一處位置，不會(huì)干擾頁(yè)面的內(nèi)容.

2.2 外部的JavaScript

也可以把JavaScript腳本保存到外部文件（擴(kuò)展名是.js）中，在網(wǎng)頁(yè)HTML文檔的＜head＞標(biāo)簽中導(dǎo)入該外部文件，實(shí)例如下：

＜html＞

＜head＞

＜script src=”myScript.js”＞＜/script＞

＜/body＞

＜/ head ＞

這種方法的優(yōu)點(diǎn)是不同的頁(yè)面可以引用同一個(gè)JavaScript腳本，就是重復(fù)使用。同時(shí)注意外部JavaScript腳本不能包含＜script＞標(biāo)簽。

3.JavaScript應(yīng)用實(shí)例

JavaScript腳本語(yǔ)言可以應(yīng)用到很多網(wǎng)站建設(shè)的熱門技術(shù)中，其中包括圖像處理、CSS技術(shù)、Ajax技術(shù)等。在開(kāi)發(fā)和設(shè)計(jì)網(wǎng)頁(yè)時(shí)，使用JavaScript腳本語(yǔ)言可以使頁(yè)面的交互效果加強(qiáng)，可以使網(wǎng)頁(yè)界面更加美觀，增強(qiáng)用戶視覺(jué)效果，同時(shí)還可以使用特效處理使用戶的使用操作更加簡(jiǎn)單和網(wǎng)頁(yè)功能更加強(qiáng)大。

如今JavaScript最常用也是最基本的功能是用于表單驗(yàn)證，其在表單數(shù)據(jù)發(fā)送到服務(wù)器之前首先在客戶端直接在瀏覽器中驗(yàn)證數(shù)據(jù)信息，這樣可以減少客戶端與服務(wù)器的數(shù)據(jù)傳遞進(jìn)而減少網(wǎng)絡(luò)流量，提高了用戶的操作效率。

下面將以登錄界面為例，展示JavaScript在用戶進(jìn)行登錄時(shí)對(duì)表單的驗(yàn)證過(guò)程，用來(lái)說(shuō)明在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中如何使用JavaScript技術(shù)。

圖1 登錄界面

當(dāng)用戶進(jìn)行登錄時(shí)，JavaScript腳本語(yǔ)言會(huì)在數(shù)據(jù)發(fā)送到服務(wù)器之前首先在客戶端進(jìn)行表單驗(yàn)證；表單驗(yàn)證通過(guò)之后才會(huì)將數(shù)據(jù)發(fā)送到服務(wù)器端進(jìn)行下一步操作。JavaScript在客戶端中的表單驗(yàn)證流程圖如圖2所示。

圖2 JavaScript在客戶端的表單驗(yàn)證流程圖

在登錄界面頁(yè)面中，JavaScript腳本語(yǔ)言主要功能是驗(yàn)證用戶輸入的數(shù)據(jù)：對(duì)用戶名Email和密碼的格式進(jìn)行驗(yàn)證，如果輸入為空或者格式不正確，瀏覽器將彈出警告框告提示用戶輸入的錯(cuò)誤信息。具體代碼如下：

function check(){

var mail=document.getElementById(“email”).value;

if(mail==””){//檢測(cè)Email是否為空

alert(“Email不能為空”);

return false;

}

if(mail.indexOf(“@”)==-1){

alert(“Email格式不正確 必須包含@”);

return false;

}

if(mail.indexOf(“.”)==-1){

alert(“Email格式不正確 必須包含.”);

return false;

}

return true;

}

4.JavaScript的優(yōu)勢(shì)

使用JavaScript腳本語(yǔ)言可以使網(wǎng)頁(yè)設(shè)計(jì)更為簡(jiǎn)單，具體表現(xiàn)在一下幾點(diǎn)：

(1)使用JavaScript腳本語(yǔ)言可以在客戶端直接進(jìn)行數(shù)據(jù)驗(yàn)證，從而減少了客戶端對(duì)服務(wù)器的訪問(wèn)，這樣可以節(jié)省更多的網(wǎng)絡(luò)流量。

(2)使用JavaScript腳本語(yǔ)言可以動(dòng)態(tài)的控制網(wǎng)頁(yè)頁(yè)面中各元素的外觀和狀態(tài)，從而可以動(dòng)態(tài)的制定用戶需要的網(wǎng)頁(yè)元素，這樣可以使網(wǎng)頁(yè)界面更加美輪美奐。

(3)JavaScript可以只在用戶端就使多種任務(wù)，而不需要網(wǎng)絡(luò)和服務(wù)器的參與，從而支持分布式的運(yùn)算和處理。

5.結(jié)束語(yǔ)

本文主要介紹了JavaScript技術(shù)在網(wǎng)頁(yè)中的應(yīng)用，結(jié)合實(shí)例介紹如何使用JavaScript技術(shù)進(jìn)行表單驗(yàn)證。JavaScript功能非常強(qiáng)大，本文的介紹僅僅是很小的一方面。

[1]戚利娜. 基于JavaScript的網(wǎng)頁(yè)元素拖拽功能的實(shí)現(xiàn)[J]. 福建電腦,2017,(02):127+129.

[2]賈紅健.JavaScript中的面向?qū)ο骩J].電子技術(shù)與軟件工程,2016,(05): 254-255.

[3]李紅.主流Javascript框架比較與分析[J].鞍山師范學(xué)院學(xué)報(bào),2015,(04): 40-47.

[4]田會(huì).JavaScript與Java在Web開(kāi)發(fā)中的應(yīng)用與區(qū)別[J].電子技術(shù)與軟件工程,2014,(09):268.

[5]代慶梅.淺析JavaScript MVC框架在Web開(kāi)發(fā)中的應(yīng)用[J].電腦知識(shí)與技術(shù),2014,(10):2242-2245.

[6]雷燕瑞,白蕾.高職JavaScript課程教學(xué)芻議[J].軟件,2014,(01):152-154.

[7]冀瀟,李楊.JavaScript與Java在Web開(kāi)發(fā)中的應(yīng)用與區(qū)別[J].通信技術(shù),2013,(06):145-147+151.

陳少暉（1985-），女，海南瓊海人，軟件工程碩士，助教，研究方向：軟件工程。