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

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

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

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

JavaScript是一種解釋性語言，主要特點是基于對象和事件驅(qū)動的，同時具有安全性，其目的就是增強Web客戶交互，彌補了HTML的缺陷。

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

1.JavaScript技術(shù)簡介

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

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

(1)一種腳本編寫的語言。

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

(2)一種基于對象的語言。

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

(3)一種簡單的語言。

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

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

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

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

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

(6)一種跨平臺的語言。

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

2.JavaScript使用方法

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

2.1 嵌入式JavaScript腳本

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

＜script＞

//JavaScript腳本

＜/script＞

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

2.2 外部的JavaScript

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

＜html＞

＜head＞

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

＜/body＞

＜/ head ＞

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

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

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

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

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

圖1 登錄界面

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

圖2 JavaScript在客戶端的表單驗證流程圖

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

function check(){

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

if(mail==””){//檢測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)勢

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

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

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

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

5.結(jié)束語

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

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

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

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

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

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

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

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

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