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

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

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

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

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

1.JavaScript技術簡介

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

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

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

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

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

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

(3)一種簡單的語言。

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

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

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

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

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

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

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

2.JavaScript使用方法

JavaScript 是一種輕量級的編程語言，通常該語言是通過嵌入或導入到HTML中實現(xiàn)自身的功能的。

2.1 嵌入式JavaScript腳本

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

＜script＞

//JavaScript腳本

＜/script＞

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

2.2 外部的JavaScript

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

＜html＞

＜head＞

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

＜/body＞

＜/ head ＞

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

3.JavaScript應用實例

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

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

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

圖1 登錄界面

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

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

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

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)頁設計更為簡單，具體表現(xiàn)在一下幾點：

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

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

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

5.結束語

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

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

[2]賈紅健.JavaScript中的面向對象[J].電子技術與軟件工程,2016,(05): 254-255.

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

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

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

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

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

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