- jQuery網頁特效設計基礎教程(慕課版·第2版)
- 馬靜媛 黃栗 夏鵬主編
- 1689字
- 2025-06-06 15:34:45
1.1 JavaScript概述
1.1.1 什么是JavaScript

JavaScript概述
JavaScript是由Netscape公司開發的一種Web頁面腳本語言,也是一種通用的、跨平臺的、基于對象和事件驅動的,并具有相對安全性的解釋型腳本語言。它不需要進行編譯,而是直接嵌入HTML(Hypertext Markup Language,超文本標記語言)頁面中,把靜態頁面轉變成支持用戶交互并響應相應事件的動態頁面,在Web系統中應用非常廣泛。
1.1.2 JavaScript的應用
如今,用戶已經習慣了App、微信小程序等移動應用的操作模式,兼具良好的互動體驗和及時的用戶反饋才能讓設計出的網頁具備競爭力。而我們常見的鼠標指針懸浮變色、顯示或隱藏部分內容、注冊表單驗證提示、手風琴菜單、幻燈片輪播等特效,都可以使用JavaScript制作。JavaScript給網頁帶來了豐富的交互效果和動態的用戶體驗,使網頁更加生動和富有活力。下面我們介紹JavaScript的常見應用。
1.校驗用戶輸入的內容
在程序開發過程中,對用戶輸入內容的校驗通常分為兩種:校驗功能和校驗格式。
校驗功能常常與服務器端的數據庫相關聯。例如,在開發密碼登錄頁面時,用戶要輸入正確的登錄名和登錄密碼。如果用戶輸入了不正確的登錄名或登錄密碼,頁面將彈出相應的提示,如圖1-1所示。這種校驗必須在表單提交后,由服務器端的程序進行。
校驗格式可以只發生在客戶端,即在將表單提交到服務器端之前完成。JavaScript能及時響應用戶的操作,對提交的表單做即時校驗。JavaScript常用于校驗用戶輸入的格式。
圖1-2所示為典型的新用戶注冊信息填寫頁面,它要求對用戶輸入的格式進行校驗,確認用戶名不能為空;密碼至少需要6個字符,且密碼和確認密碼必須一致;手機號格式正確等。例如,當用戶輸入不符合指定格式的手機號時,就會在頁面輸出提示信息“手機號不正確”,如圖1-2所示。

圖1-1 校驗登錄名和登錄密碼是否正確

圖1-2 校驗用戶輸入的格式是否正確
2.實現實時預覽效果
在Web編程中,多數情況下需要程序與用戶進行交互,告訴用戶已經發生的情況,或者從用戶的輸入中獲得下一步的數據,程序的運行過程大多數是一步步交互的過程。這種完全不用通過服務器端處理,僅在客戶端動態顯示網頁的功能,不僅可以節省網頁與服務器端的通信時間,又可以制作出便于用戶使用的友好頁面,使網頁功能更加人性化。
例如,在實現許愿字條時,為了讓用戶可以實時看到添加內容后許愿字條的效果,用戶每輸入一個文字,右側的字條預覽區都會實時顯示許愿字條的效果,如圖1-3所示。

圖1-3 實時預覽許愿字條效果
3.實現動畫效果
網頁中經常會有一些動畫效果,其能使頁面顯得更加生動。使用JavaScript腳本語言也可以實現動畫效果,例如在頁面中實現一種星星閃爍的動畫效果,如圖1-4所示。

圖1-4 星星閃爍動畫效果
4.實現浮動廣告窗口
在打開網頁時我們經常會看到一些浮動的廣告窗口。這些廣告窗口是網站最大的盈利手段之一,它們也可以通過JavaScript腳本語言來實現,如圖1-5所示。

圖1-5 浮動廣告窗口的應用
5.實現文字特效
使用JavaScript語言可以實現多種文字特效。例如文字滾動的特效,如圖1-6所示。

圖1-6 文字滾動特效
1.1.3 JavaScript的特點
JavaScript是為適應動態網頁制作的需要而產生的一種編程語言,它具有以下特點。
1.無須編譯,在瀏覽器中運行時被解釋
JavaScript不同于一些編譯性的編程語言(例如C、C++等),它是一種解釋性的程序語言,它的源代碼不需要經過編譯,而是直接在瀏覽器中運行時被解釋。
2.基于對象
JavaScript是一種基于對象的語言,這意味著它能運用自己已經創建的對象。因此,它的許多功能可以來自腳本環境中對象的方法與腳本的相互作用。
3.事件驅動
JavaScript可以直接對用戶輸入做出響應,無須經過Web服務程序。它對用戶輸入的響應是以事件驅動的方式進行的。所謂事件驅動,就是指在主頁中執行了某種操作所產生的動作,此動作稱為“事件”。例如按鼠標按鍵、移動窗口、選擇菜單等都可以稱為事件。當事件發生后,可能會引起相應的事件響應。
4.相對簡單
JavaScript是一種基于Java基本語句和控制流的簡單而緊湊的語言,對于學習Java來說是一種非常好的過渡。此外,它的變量類型采用弱類型,并未采用嚴格的數據類型。
5.支持多種瀏覽器
JavaScript依賴于瀏覽器本身,與操作環境無關。只要計算機能運行瀏覽器,并且瀏覽器支持JavaScript,就可正確運行JavaScript。
6.安全性高
JavaScript是一種安全性高的語言,不允許將數據存入服務器中和對網絡文檔進行修改和刪除,只能通過瀏覽器實現信息瀏覽或動態交互,這樣可有效地防止數據丟失。
- 柳工出海:中國制造的全球化探索
- 版面設計與制作
- 網頁設計與制作
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網頁設計基礎培訓
- 網頁設計與制作:HTML+CSS+JavaScript標準教程
- Adobe Dreamweaver CS5中文版經典教程
- Vue.js Web開發案例教程(在線實訓版)
- HTML5+CSS3網頁制作基礎培訓教程
- 動態網頁設計(第2版)
- 全能網頁設計師精煉手冊
- HTML+CSS+JavaScript網頁設計與布局:從新手到高手
- Vue.js核心技術解析與uni-app跨平臺實戰開發
- 巧學巧用Dreamweaver CS6制作網頁
- Linux系統與網絡服務管理技術大全(第二版)
- Highcharts網頁圖表制作實例詳解 (Web開發典藏大系)