本書以零基礎講解為宗旨,用實例引導讀者深入學習,采取JavaScript基礎知識→JavaScript核心技術→JavaScript高級應用→網頁特效應用案例的講解模式,深入淺出地講解了JavaScript動態網頁設計和開發動態網站的各項技術及實戰技能。
本書適合任何想學習JavaScript動態網頁設計的人員,無論您是否從事計算機相關行業,無論您是否接觸過JavaScript動態網頁設計,通過學習本書內容均可快速掌握JavaScript動態網頁設計和開發動態網站的方法和技巧。
清華大學出版社“案例課堂”大系
叢書以案例的形式講解軟件的內容,讀者可以在實踐中熟練掌握軟件的使用方法。
每一個案例都精挑細選,同時配有全程語音講解的視頻文件,方便讀者學習。
案例的選材廣泛,涉及到軟件應用的各個領域、各個行業,學習無死角。
“CG設計”系列全彩精印,同等價位下內容更多,同等內容下更實惠。
“網站開發”系列附贈超值,全面學習無障礙:
CSS屬性速查表
HTML標簽速查表
網頁布局案例賞析
精彩網站配色方案賞析
精選JavaScript實例
JavaScript函數速查手冊
CSS+DIV布局案例賞析
案例源文件與教學課件
"網站開發案例課堂"系列圖書是專門為網站開發和數據庫初學者量身定做的一套學習用書,由IT應用實訓中心的高級講師編著,整套書涵蓋網站開發、數據庫設計等方面。整套書具有以下特點。
前沿科技
無論是網站建設、數據庫設計還是HTML5、CSS3,精選的是較為前沿或者用戶群最多的領域,幫助大家認識和了解最新動態。
權威的作者團隊
組織國家重點實驗室和資深應用專家聯手編著該套圖書,融合了豐富的教學經驗與優秀的管理理念。
學習型案例設計
以技術的實際應用過程為主線,全程采用圖解和多媒體同步結合的教學方式,生動、直觀、全面地剖析使用過程中的各種應用技能,降低難度,提升學習效率。
為什么要寫這樣一本書
隨著網絡的發展,很多企事業單位和廣大網民對于建立網站的需求越來越強烈,另外對于大中專院校,很多學生需要做畢業設計,但是這些讀者既不懂網頁代碼程序,又不知道從哪里下手。為此,本書針對這樣的零基礎讀者,全面帶領讀者學習JavaScript的相關知識,讀者在學習JavaScript中遇到的技術,本書基本上都有詳細講解。通過本書的實訓,讀者可以很快地進行JavaScript動態網頁的設計,提高職業化能力,從而解決公司實際需求問題。
本書特色
零基礎、入門級的講解
無論您是否從事計算機相關行業,無論您是否接觸過JavaScript動態網頁設計和動態網站開發,都能從本書中找到最佳起點。
實用、專業的范例和項目
本書在編排上緊密結合深入學習JavaScript動態網頁設計和開發動態網站技術的過程,從JavaScript基本操作開始,逐步帶領讀者學習JavaScript的各種應用技巧,側重實戰技能,使用簡單易懂的實際案例進行分析和操作指導,讓讀者學起來簡明輕松,操作起來有章可循。
隨時檢測自己的學習成果
每章首頁中均提供了學習目標,可指導讀者重點學習及學后檢查。
每章最后的"跟我練練手"板塊均根據該章內容精選而成,讀者可以隨時檢測自己的學習成果和實戰能力,做到融會貫通。
細致入微、貼心提示
本書在講解過程中,在各章中使用了"注意"、"提示"、"技巧"等小欄目,使讀者在學習過程中能更清楚地了解相關操作、理解相關概念,并輕松掌握各種操作技巧。
專業創作團隊和技術支持
本書由IT應用實訓中心編著和提供技術支持。
您在學習過程中遇到任何問題,可加入智慧學習樂園QQ群:221376441進行提問,隨時有資深實戰型講師答疑。
本書學習最佳途徑
本書以學習JavaScript動態網頁開發的最佳制作流程來分配章節,從最初的JavaScript基本操作開始,講解了JavaScript核心技術、JavaScript的高級應用等,最后結合HTML、CSS的相關知識講解各種經典的動態網頁特效的制作方法。大致內容分配如下圖所示。
超值光盤
全程同步錄像教學
本書所配光盤內容涵蓋了書中所有的知識點,詳細講解了每個實例的制作過程和技術點,比看書更輕松、收獲更多。
王牌資源大放送
贈送大量王牌資源,包括本書實例源文件、教學幻燈片、本書精品教學視頻、JavaScript函數速查手冊、精選的JavaScript實例、jQuery選擇器和事件速查手冊、HTML標簽速查表、網頁樣式與布局案例賞析、精彩網站配色方案賞析、CSS+DIV布局賞析案例。
讀者對象
* 沒有任何JavaScript動態網頁開發基礎的初學者。
* 有一定的JavaScript動態網頁開發和基礎,想精通網站開發的人員。
* 有一定的動態網站開發基礎,沒有項目經驗的人員。
* 正在進行畢業設計的學生。
* 大專院校及培訓學校的老師和學生。
創作團隊
本書由劉玉紅策劃,IT應用實訓中心高級組織編寫,參加編寫的人員有蒲娟、付紅、李園、王攀登、郭廣新、侯永崗、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、梁云梁和周浩浩。
在編寫過程中,我們雖竭盡所能將最好的講解呈現給了讀者,但難免有疏漏和不妥之處,敬請讀者不吝指正。
編 者
作者長期從事網站開發工作,數年來承接了大量的項目,具有豐富的實踐經驗。
第1篇 基礎知識
第1章 打開JavaScript動態網頁設計之門--必須了解的JavaScript知識 3
1.1 認識JavaScript 4
1.1.1 什么是JavaScript 4
1.1.2 JavaScript的特點 4
1.1.3 JavaScript與Java的區別 5
1.1.4 JavaScript版本 6
1.2 JavaScript的編寫工具 7
1.2.1 案例--使用記事本
編寫JavaScript 7
1.2.2 案例--使用Dreamweaver
編寫JavaScript 8
1.3 JavaScript在HTML中的使用 9
1.3.1 案例--在HTML網頁頭中
嵌入JavaScript代碼 9
1.3.2 案例--在HTML網頁中
嵌入JavaScript代碼 10
1.3.3 案例--在HTML網頁的元素
事件中嵌入JavaScript代碼 11
1.3.4 案例--在HTML中調用已經
存在的JavaScript文件 12
1.3.5 案例--通過JavaScript偽URL
引入JavaScript腳本代碼 13
1.4 JavaScript和瀏覽器 14
1.4.1 案例--在Internet Explorer中
調用JavaScript代碼 14
1.4.2 案例--在Firefox中調用
JavaScript代碼 15
1.4.3 案例--在Opera中調用
JavaScript代碼 15
1.4.4 案例--瀏覽器中的文檔對象
類型 15
1.5 跟我練練手 16
1.6 實戰演練--一個簡單的JavaScript
實例 16
1.7 高手甜點 17
第2章 讀懂JavaScript代碼前提--
JavaScript 編程基礎 19
2.1 JavaScript的基本語法 20
2.1.1 語句執行順序 20
2.1.2 區分大小寫 20
2.1.3 分號與空格 20
2.1.4 對代碼行進行折行 21
2.1.5 注釋 21
2.1.6 語句 23
2.1.7 語句塊 23
2.2 JavaScript的數據結構 24
2.2.1 標識符 24
2.2.2 關鍵字 25
2.2.3 保留字 25
2.2.4 常量 26
2.2.5 變量 26
2.3 JavaScript的數據類型 28
2.3.1 案例--typeof 運算符 28
2.3.2 案例--Undefined(未定義)
類型 29
2.3.3 案例--Null(空值)類型 30
2.3.4 案例--Boolean(布爾)類型 31
2.3.5 案例--Number(數值)類型 32
2.3.6 案例--String(字符串數據)
類型 32
2.3.7 案例--Object(對象數據)
類型 33
2.4 JavaScript的運算符 34
2.4.1 案例--算術運算符 34
2.4.2 案例--比較運算符 35
2.4.3 案例--位運算符 36
2.4.4 案例--邏輯運算符 37
2.4.5 案例--條件運算符 39
2.4.6 案例--賦值運算符 40
2.4.7 案例--運算符優先級 41
2.5 JavaScript的表達式 43
2.5.1 案例--賦值表達式 43
2.5.2 案例--算術表達式 44
2.5.3 案例--布爾表達式 44
2.5.4 案例--字符串表達式 45
2.5.5 案例--類型轉換 46
2.6 實戰演練--局部變量和全局變量的
優先級 47
2.7 跟我練練手 49
2.8 高手甜點 49
第3章 改變程序執行方向--程序控制
結構與語句 51
3.1 基本處理流程 52
3.2 賦值語句 52
3.3 條件判斷語句 53
3.3.1 案例--if語句 53
3.3.2 案例--"if...else"語句 54
3.3.3 案例--"if...else if"語句 55
3.3.4 案例--if語句的嵌套 56
3.3.5 案例--switch語句 57
3.4 循環控制語句 59
3.4.1 案例--while語句 59
3.4.2 案例--"do...while"語句 60
3.4.3 案例--for循環語句 61
3.5 跳轉語句 62
3.5.1 案例--break語句 62
3.5.2 案例--continue語句 63
3.6 案例--使用對話框 64
3.7 實戰演練--在頁面中顯示距離
2016年元旦節的天數 66
3.8 跟我練練手 68
3.9 高手甜點 68
第4章 JavaScript語言代碼中的
密碼--函數 69
4.1 函數的簡介 70
4.2 定義函數 70
4.2.1 不指定函數名 70
4.2.2 指定函數名 71
4.2.3 函數參數的使用 71
4.2.4 案例--函數返回值 72
4.3 函數的調用 74
4.3.1 案例--函數的簡單調用 74
4.3.2 案例--在表達式中
調用函數 75
4.3.3 案例--在事件響應中
調用函數 75
4.3.4 案例--通過鏈接調用函數 76
4.4 JavaScript中常用的函數 77
4.4.1 案例--嵌套函數 77
4.4.2 案例--遞歸函數 78
4.4.3 案例--內置函數 80
4.5 實戰演練--購物簡易計算器 87
4.6 跟我練練手 89
4.7 高手甜點 90
第5章 JavaScript 語言基礎--對象
與數組 91
5.1 了解對象 92
5.1.1 什么是對象 92
5.1.2 面向對象編程 93
5.1.3 JavaScript的內部對象 94
5.2 對象訪問語句 95
5.2.1 案例--"for...in"
循環語句 95
5.2.2 案例--with語句 96
5.3 JavaScript中的數組 97
5.3.1 案例--創建和訪問數組
對象 97
5.3.2 案例--使用"for...in"語句
控制數組 99
5.3.3 案例--Array對象的常用
屬性和方法 100
5.4 詳解常用的數組對象方法 110
5.4.1 案例--連接其他數組到
當前數組 110
5.4.2 案例--將數組元素連接為
字符串 111
5.4.3 案例--移除數組中最后一個
元素 111
5.4.4 案例--將指定的數值添加到
數組中 112
5.4.5 案例--反序排列數組中的
元素 113
5.4.6 案例--刪除數組中的第一個
元素 114
5.4.7 案例--獲取數組中的一部分
數據 115
5.4.8 案例--對數組中的元素進行
排序 115
5.4.9 案例--將數組轉換成
字符串 117
5.4.10 案例--將數組轉換成本地
字符串 117
5.4.11 案例--在數組開頭插入
數據 118
5.5 創建和使用自定義對象 119
5.5.1 案例--定義對象的
構造函數 119
5.5.2 案例--直接對對象初始化 121
5.5.3 案例--修改和刪除對象
實例的屬性 122
5.5.4 案例--通過原型為對象添加
新屬性和新方法 123
5.5.5 案例--自定義對象的嵌套 125
5.5.6 案例--內存的分配和釋放 127
5.6 實戰演練--利用二維數組創建
動態下拉菜單 127
5.7 跟我練練手 129
5.8 高手甜點 129
第6章 JavaScript的內置對象--
日期與字符串對象 131
6.1 日期對象 132
6.1.1 案例--創建日期對象 132
6.1.2 案例--日期對象的方法 133
6.2 詳解日期對象的常用方法 136
6.2.1 案例--返回當前日期和
時間 136
6.2.2 案例--以不同的格式顯示
當前日期 137
6.2.3 案例--返回日期所對應的
周次 138
6.2.4 案例--顯示當前時間 139
6.2.5 案例--返回距1970年1月1日
午夜的時差 140
6.2.6 案例--以不同的格式顯示
UTC日期 140
6.2.7 案例--根據世界時返回日期
對應的周次 141
6.2.8 案例--以不同的格式顯示
UTC時間 142
6.2.9 案例--設置日期對象中的
年份、月份與日期值 143
6.2.10 案例--設置小時、分鐘與
秒鐘的值 144
6.2.11 案例--設置Date對象的
UTC日期 145
6.2.12 案例--返回當地時間與
UTC時間的差值 146
6.2.13 案例--將Date對象中的日期
轉化為字符串格式 147
6.2.14 案例--返回以UTC時間
表示的日期字符串 147
6.2.15 案例--將日期對象轉化為
本地日期 148
6.2.16 案例--日期間的運算 148
6.3 字符串對象 149
6.3.1 創建字符串對象的方法 149
6.3.2 字符串對象的常用屬性 150
6.3.3 字符串對象的常用方法 151
6.4 詳解字符串對象的常用方法 152
6.4.1 案例--設置字符串字體
屬性 152
6.4.2 案例--以閃爍方式顯示
字符串 153
6.4.3 案例--轉換字符串的
大小寫 154
6.4.4 案例--連接字符串 155
6.4.5 案例--比較兩個字符串的
大小 155
6.4.6 案例--分割字符串 156
6.4.7 案例--從字符串中提取
字符串 157
6.5 實戰演練--制作網頁隨機驗證碼 158
6.6 跟我練練手 159
6.7 高手甜點 160
第7章 JavaScript的內置對象--
數值與數學對象 161
7.1 Number對象 162
7.1.1 案例--創建Number對象 162
7.1.2 案例--Number對象的屬性 162
7.1.3 Number對象的方法 166
7.2 詳解Number對象常用的方法 166
7.2.1 案例--把Number對象
轉換為字符串 166
7.2.2 案例--把Number對象
轉換為本地格式字符串 167
7.2.3 案例--四舍五入時指定
小數位數 167
7.2.4 案例--返回以指數記數法
表示的數字 168
7.2.5 案例--以指數記數法指定
小數位 169
7.3 Math對象 169
7.3.1 案例--創建Math對象 169
7.3.2 案例--Math對象的屬性 170
7.3.3 Math對象的方法 171
7.4 詳解Math對象常用的方法 172
7.4.1 案例--返回數的絕對值 172
7.4.2 案例--返回數的正弦值、
正切值和余弦值 173
7.4.3 案例--返回數的反正弦值、
正切值和余弦值 175
7.4.4 案例--返回兩個或多個
參數中的最大值或最小值 177
7.4.5 案例--計算指定數值的
平方根 178
7.4.6 案例--數值的冪運算 178
7.4.7 案例--計算指定數值的
對數 179
7.4.8 案例--取整運算 180
7.4.9 案例--生成0到1之間的
隨機數 180
7.4.10 案例--根據指定的坐標
返回一個弧度值 181
7.4.11 案例--返回大于或等于
指定參數的最小整數 182
7.4.12 案例--返回小于或等于
指定參數的最大整數 182
7.4.13 案例--返回以e為
基數的冪 183
7.5 實戰演練--使用Math對象
設計程序 184
7.6 跟我練練手 185
7.7 高手甜點 185
第8章 編程錯誤的終結者--
JavaScript的調試與優化 187
8.1 常見的錯誤和異常 188
8.2 處理異常的方法 189
8.2.1 案例--用onerror事件
處理異常 189
8.2.2 案例--使用
"try...catch...finally"
語句處理異常 191
第3章 改變程序執行方向--程序控制結構與語句
藥店
JavaScript編程中對程序流程的控制主要通過條件判斷、循環控制語句及continue、break來完成。其中,條件判斷按預先設定的條件執行程序,包括if語句和switch語句;而循環控制語句則可以重復完成任務,包括while語句、"do...while"語句及for語句。本章將主要講述JavaScript的程序控制結構與相關的語句。
本章要點(已掌握的在方框中打勾)
* 熟悉賦值語句的使用方法。
* 掌握條件判斷語句的使用方法。
* 掌握循環控制語句的使用方法。
* 掌握跳轉語句的使用方法。
3.1 基本處理流程
對數據結構的處理流程,稱為基本處理流程。在JavaScript中,基本處理流程包含3種結構,即順序結構、選擇結構和循環結構。
順序結構是JavaScript腳本程序中最基本的結構,它按照語句出現的先后順序依次執行,如圖3-1所示。
選擇結構按照給定的邏輯條件來決定執行順序,有單向選擇、雙向選擇和多向選擇之分,但程序在執行過程中都只執行其中一條分支。單向選擇和雙向選擇結構如圖3-2所示。
圖3-1 順序結構 圖3-2 單向選擇和雙向選擇結構
循環結構即根據代碼的邏輯條件來判斷是否重復執行某一段程序,若邏輯條件為true,則進入循環重復執行,否則結束循環。循環結構可分為條件循環和計數循環,如圖3-3所示。
圖3-3 循環結構
一般而言,在JavaScript腳本語言中,程序總體是按照順序結構執行的,而在順序結構中又可以嵌入選擇結構和循環結構。
3.2 賦 值 語 句
賦值語句是JavaScript程序中最常用的語句。在程序中,往往需要大量的變量來存儲程序中用到的數據,所以用來對變量進行賦值的賦值語句也會在程序中大量出現。賦值語句的語法格式如下:
變可量名=表達式
當使用關鍵字var聲明變量時,可以同時使用賦值語句對聲明的變量進行賦值。例如,聲明一些變量,并分別給這些變量賦值,代碼如下:
var username="Rose"
var bue=true
var variable="開懷大笑,益壽延年"
3.3 條件判斷語句
條件判斷語句是對語句中不同條件的值進行判斷,進而根據不同的條件執行不同的語句。條件判斷語句主要包括兩大類,分別是if判斷語句和switch多分支語句。
3.3.1 案例--if語句
if語句是使用最為普遍的條件選擇語句。每一種編程語言都有一種或多種形式的if語句,在編程中它經常被用到。
If語句的格式如下:
if(條件語句)
{
執行語句;
}
其中,"條件語句"可以是任何一種邏輯表達式。如果"條件語句"的返回結果為true,則程序先執行后面大括號{}中的"執行語句",然后執行它后面的其他語句。如果"條件語句"的返回結果為false,則程序跳過"條件語句"后面的"執行語句",直接去執行程序后面的其他語句。大括號的作用就是將多條語句組合成一個復合語句,作為一個整體來處理。如果大括號中只有一條語句,那么這對大括號{}就可以省略。
【例3.1】(實例文件:ch03\3.1.html)if語句的使用。
如果時間早于20:00,會獲得問候"Good day"。
上述代碼在IE 9.0瀏覽器中的顯示效果如圖3-4所示。單擊頁面中的【點擊這里】按鈕,可以看到按鈕下方顯示出"Good day"問候語,如圖3-5所示。
圖3-4 程序運行結果 圖3-5 程序運行結果
請使用小寫的if,如果使用大寫字母(IF)則會生成JavaScript錯誤。另外,在這個語法中,沒有else,因此,用戶已經告訴瀏覽器只有在指定條件為true時才執行代碼。
3.3.2 案例--"if...else"語句
"if...else"語句通常用于一個條件需要兩個程序分支來執行的情況。"if...else"語句語法格式如下所示。
if (條件)
{
當條件為true時執行的代碼
}
else
{
當條件不為true時執行的代碼
}
如果在該格式if從句后面再添加一個else從句,當條件語句返回結果為false時,那么程序將執行else后面的從句。
【例3.2】 (實例文件:ch03\3.2.html)"if...else"語句的使用。
上述代碼中使用了"if...else"語句,對變量a的值進行判斷,如果a值不等于"john"則輸出紅色標題,否則輸出藍色信息。
上述代碼在IE 9.0瀏覽器中的顯示效果如圖3-6所示,可以看到網頁輸出了藍色信息"請重新輸入名稱"。
圖3-6 "if...else"語句判斷
3.3.3 案例--"if...else if"語句
使用"if...else if"語句來選擇多個代碼塊之一來執行。"if...else if"語句的語法格式如下:
if (條件1)
{
當條件1為true時執行的代碼
}
else if (條件2)
{
當條件2為true時執行的代碼
}
else
{
當條件1和條件2都不為true時執行的代碼
}
【例3.3】 (實例文件:ch03\3.3.html)使用"if...else if"語句輸出問候語。
if...else if語句的使用
上述代碼在IE 9.0瀏覽器中的顯示效果如圖3-7所示。
圖3-7 "if...else if"語句判斷結果
3.3.4 案例--if語句的嵌套
if語句可以嵌套使用。當if語句的從句部分(大括號中的部分)是另外一個完整的if語句時,外層if語句的{}部分的從句內容可以省略。但是,在使用if語句的嵌套應用時,最好使用{}來確定層次關系。否則,由于使用{}的位置不同,可能會導致程序代碼的含義不同,從而輸出不同的結果。例如下面的兩個實例,由于{}位置的不同,導致輸出結果不同。
【例3.4】 (實例文件:ch03\3.4.html)if語句的嵌套。
上述代碼在IE 9.0瀏覽器中的顯示效果如圖3-8所示。
圖3-8 程序運行結果
【例3.5】 (實例文件:ch03\3.5.html)調整嵌套語句中{}的位置。
運行該程序,則不會出現任何結果,如圖3-9所示。可以看出,由于使用{}的位置不同,造成程序代碼的含義完全不同。因此,在嵌套使用時,最好使用{}對程序代碼的層次關系進行界定。
圖3-9 程序運行結果
3.3.5 案例--switch語句
switch選擇語句用于將一個表達式的結果同多個值進行比較,并根據比較結果選擇執行語句。switch語句的語法格式如下:
switch (表達式)
{
case 取值1 :
語句塊1;break;
case 取值2 :
語句塊2;break;
...
case 取值n;
語句塊n;break;
default :
語句塊n+1;
}
case語句只是相當于定義一個標記位置,程序根據switch條件表達式的結果,直接跳轉到第一個匹配的標記位置處,開始順序執行后面的所有程序代碼,包括后面的其他case語句下的代碼,直到碰到break語句或函數返回語句為止。default語句是可選的,它匹配上面所有case語句定義的值以外的其他值,也就是前面所有取值都不滿足時,就執行default后面的語句塊。
【例3.6】 (實例文件:ch03\3.6.html)應用switch語句判斷當前是星期幾。
……