《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》教案 第1、2章 緒論；JavaScript入門

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》教案第1章緒論一、教學(xué)目標(biāo)：了解JavaScript的概念與特點(diǎn)；了解jQuery的概念與特點(diǎn)；掌握任意一款Web開發(fā)工具。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：了解JavaScript的概念與特點(diǎn)；難點(diǎn)：了解jQuery的概念與特點(diǎn)。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章是全書的緒論部分，主要介紹JavaScript、jQuery概述以及Web開發(fā)工具的選擇。JavaScript和HTML、CSS一起被稱為是Web開發(fā)的三大核心技術(shù)，當(dāng)今所有瀏覽器都支持JavaScript，無需額外安裝第三方插件。而jQuery是一個輕量級的跨平臺JavaScript函數(shù)庫，它化簡了JavaScript代碼復(fù)雜度，其語法能用讓用戶更方便地選取和操作HTML元素、處理各類事件、實(shí)現(xiàn)JavaScript特效與動畫，并且能為不同類型的瀏覽器提供更便捷的API用于AJAX交互。五、教學(xué)基本內(nèi)容：JavaScript概述JavaScript簡介JavaScript是一種輕量級的直譯式編程語言，基于ECMAScript標(biāo)準(zhǔn)（注:一種由ECMA國際組織通過ECMA-262標(biāo)準(zhǔn)化的腳本程序語言）。通常在HTML網(wǎng)頁中使用JavaScript為頁面增加動態(tài)效果和功能。JavaScript和HTML、CSS一起被稱為是Web開發(fā)的三大核心技術(shù)，目前JavaScript已經(jīng)廣泛應(yīng)用于Web開發(fā)，市面上絕大多數(shù)網(wǎng)頁都使用了JavaScript代碼?？梢哉f當(dāng)今所有瀏覽器都支持JavaScript，無需額外安裝第三方插件。JavaScript起源JavaScript最早是在1995年的時候由網(wǎng)景（Netscape）公司的BrendanEich用了十天時間開發(fā)出來的，用于當(dāng)時的網(wǎng)景導(dǎo)航者（NetscapeNavigator）瀏覽器2.0版。最初這種腳本語言的官方名稱為LiveScript，后來應(yīng)用于網(wǎng)景導(dǎo)航者瀏覽器2.0B3版的時候正式更名為JavaScript。更名的原因是因?yàn)楫?dāng)時網(wǎng)景公司與Sun公司開展了合作，網(wǎng)景公司的管理層希望在他們的瀏覽器中增加對于Java技術(shù)的支持。該名稱容易讓人誤以為該腳本語言是和Java語言有關(guān)，但實(shí)際上該語言的語法風(fēng)格與Scheme更為接近。JavaScriptvsJava因?yàn)槊Q的相近，JavaScript常被誤以為和Java有關(guān)，但事實(shí)上它們是無論從概念還是設(shè)計上都毫無關(guān)聯(lián)的兩種語言。JavaScript是Netscape公司的BrendanEich發(fā)明的一種輕量級語言，主要應(yīng)用于網(wǎng)頁開發(fā)，無需事先編譯；而Java是由Sun公司的JamesGosling發(fā)明的一種面向?qū)ο蟪绦蛘Z言，根據(jù)應(yīng)用方向又可分為J2SE（Java2標(biāo)準(zhǔn)版）、J2ME（Java2微型版）和J2EE（Java2企業(yè)版）三個版本，需要先編譯再執(zhí)行。JavaScript的主旨是為非程序開發(fā)者快速上手使用的，而Java是更高級更復(fù)雜的一種面向?qū)I(yè)程序開發(fā)者的語言，比JavaScript難度大、應(yīng)用范圍更廣。JavaScript的特點(diǎn)1. 腳本語言JavaScript是一種直譯式的腳本語言，無需事先編譯，可以在程序運(yùn)行的過程中逐行進(jìn)行解釋使用。該語言適合非程序開發(fā)人員使用。2. 簡單性JavaScript具有非常簡單的語法，其腳本程序面向非程序開發(fā)人員。HTML前端開發(fā)者都有能力為網(wǎng)頁添加JavaScript片段。3. 弱類型JavaScript無需定義變量的類型，所有變量的聲明都可以用統(tǒng)一的類型關(guān)鍵詞表示。在運(yùn)行過程中，JavaScript會根據(jù)變量的值判斷其實(shí)際類型。4. 跨平臺性JavaScript語言是一種Web程序開發(fā)語言，它只與瀏覽器支持情況有關(guān)，與操作系統(tǒng)的平臺類型無關(guān)。目前JavaScript可以在無需安裝第三方插件的情況下被大多數(shù)主流瀏覽器完全支持，因此JavaScript程序在編寫后可以在不同類型的操作系統(tǒng)中運(yùn)行，適用于PC、筆記本電腦、平板電腦和手機(jī)等各類包含瀏覽器的設(shè)備。5. 大小寫敏感JavaScript語言是一種大小寫敏感的語言，例如字母a和A會被認(rèn)為是不同的內(nèi)容。同樣在使用函數(shù)時也必須嚴(yán)格遵守大小寫的要求使用正確的方法名稱。jQuery概述jQuery簡介jQuery這個名稱來源于JavaScript和Query（查詢）的組合，是一個輕量級的跨平臺JavaScript函數(shù)庫，擁有MIT軟件許可協(xié)議。目前主流瀏覽器基本上都支持jQuery。jQuery秉承“writeless，domore（寫的更少，做的更多）”的核心理念，其語法能用讓用戶更方便地選取和操作HTML元素、處理各類事件、實(shí)現(xiàn)JavaScript特效與動畫，并且能為不同類型的瀏覽器提供更便捷的API用于AJAX交互。jQuery也能讓開發(fā)者基于JavaScript函數(shù)庫開發(fā)新的插件。jQuery通用性和可擴(kuò)展性相結(jié)合，它的出現(xiàn)將改變?nèi)藗儗avaScript的使用方式。jQuery發(fā)展史jQuery最早是在2006年1月由一位美國的軟件工程師JohnResing在紐約BarCamp（注：一種國際研討會網(wǎng)絡(luò)，由參與者互相分享Web技術(shù)）上發(fā)布的，JohnResing既是jQuery的創(chuàng)造者，也是jQueryJavaScript函數(shù)庫的核心開發(fā)者。最初的jQuery1.0版正式發(fā)布于2006年4月26日，經(jīng)歷多次升級，直至2022年12月發(fā)布的jQuery3.6.3版為本書修訂時的最新版本。目前jQuery是由TimmyWillison所領(lǐng)導(dǎo)的開發(fā)團(tuán)隊負(fù)責(zé)進(jìn)行維護(hù)。目前jQuery仍然是網(wǎng)絡(luò)上使用范圍最廣泛的JavaScript函數(shù)庫。根據(jù)Builtwith（注：一款用于統(tǒng)計流行網(wǎng)站使用的構(gòu)建技術(shù)和編程語言的工具）的最新統(tǒng)計數(shù)據(jù)得出結(jié)論，目前流量排名最高的百萬個網(wǎng)頁中超過70%都在使用jQuery，其中國內(nèi)比較著名的網(wǎng)站有：CCTV、新浪、搜狗、愛奇藝、豆瓣、CSDN、bilibili、支付寶等。jQuery的特點(diǎn)1. 輕量級封裝網(wǎng)頁使用jQuery所需要引用的JS文件只有32kb左右，幾乎不會影響頁面的加載速度。2. 化簡JavaScriptjQuery的選擇器化簡了JavaScript查找DOM對象的代碼復(fù)雜度，基本只需要一行代碼就可以查找各種HTML元素或更改指定元素CSS樣式。3. 兼容CSS3兼容CSS3的選擇器語法規(guī)則，可以根據(jù)元素的樣式來快速查找HTML元素。4. 跨瀏覽器支持jQuery支持目前所有主瀏覽器，例如IE、Firefox、Safari、Opera、Chrome等。因此開發(fā)者不用擔(dān)心瀏覽器的兼容性問題。jQuery的版本比較目前jQuery共有三種版本，解釋如下：jQuery1.x版本：該版本是使用最為廣泛的jQuery版本，適用于絕大多數(shù)Web前端項目開發(fā)，兼容性較高。該版本未來不會再增加新的功能，官網(wǎng)只做BUG維護(hù)。其最終版為2016年5月發(fā)布的jQuery1.12.4版。jQuery2.x版本：jQuery2.x版本相對1.x而言實(shí)際上沒有新增功能，僅僅是在1.x的基礎(chǔ)上去除了對IE6-8的支持，降低了文件大小且提升了性能，因此使用人數(shù)相對較少。該版本未來同樣不會再增加新的功能，官網(wǎng)只做BUG維護(hù)。其最終版為2016年5月發(fā)布的jQuery2.2.4版。jQuery3.x版本：該版本是目前最新的jQuery版本，最近一次是2022年12月發(fā)布的jQuery3.6.3版。該版本支持IE9+、Opera最新版、以及其他主流瀏覽器的最新版及前一版。需要注意的是，如果需要兼容IE6-8、Opera12.1x或者Safari5.1等舊版本的瀏覽器，官方建議使用jQuery1.12.x。Web開發(fā)工具JavaScript和jQuery源代碼文件均為純文本內(nèi)容，電腦操作系統(tǒng)中自帶的寫字板或記事本工具就可以打開和編輯源代碼內(nèi)容。因此本書不對開發(fā)工具作特定要求，使用任意一款純文本編輯器均可以進(jìn)行網(wǎng)頁內(nèi)容的編寫。這里介紹幾款常用的網(wǎng)頁開發(fā)工具軟件：AdobeDreamweaver、SublimeText、NodePad++、EditPlus、VSCode以及WebStorm。AdobeDreamweaverAdobeDreamweaver是一款所見即所得的網(wǎng)頁編輯器，中文名稱為“夢想編織者”或“織夢”。該軟件最初的1.0版是1997年由美國Macromedia公司發(fā)布的，后來該公司于2005年被Adobe公司收購。Dreamweaver也是當(dāng)時第一套針對專業(yè)Web前端工程師所設(shè)計的可視化網(wǎng)頁開發(fā)工具，整合了網(wǎng)頁開發(fā)與網(wǎng)站管理的功能。Dreamweaver支持HTML5/CSS3源代碼的編輯和預(yù)覽功能，最大的優(yōu)點(diǎn)是可視化性能帶來的直觀效果，開發(fā)界面可以分屏為代碼部分與預(yù)覽視圖，開發(fā)者修改代碼部分時預(yù)覽視圖會隨著修改內(nèi)容實(shí)時變化。Dreamweaver也有它的弱點(diǎn)，由于不同瀏覽器存在兼容性問題，Dreamweaver的預(yù)覽視圖難以達(dá)到與所有瀏覽器完全一致的效果。如需考慮跨瀏覽器兼容問題，預(yù)覽畫面僅能作為輔助參考。SublimeTextSublimeText的界面布局非常有特色，它支持文件夾導(dǎo)航圖和代碼縮略圖效果。該軟件支持多種編程語言的語法高亮，也具有代碼自動完成提示功能。該軟件還具有自動恢復(fù)功能，如果在編程過程中意外退出，在下次啟動該軟件時文件會自動恢復(fù)關(guān)閉之前的編輯狀態(tài)。NodePad++NodePad++的名稱來源于Windows系列操作系統(tǒng)自帶的記事本NotePad，在此基礎(chǔ)上多了兩個加號，立刻帶了質(zhì)的飛越。這是一款免費(fèi)開源的純文本編輯器，具有完整中文化接口并支持UTF-8技術(shù)。由于它具有語法高亮顯示、代碼折疊等功能，因此也非常適合作為計算機(jī)程序的編輯器。EditPlusEditPlus是由韓國SangilKim（ES-Computing）公司發(fā)布的一款文字編輯器，支持HTML、CSS、JavaScript、PHP、Java等多種計算機(jī)程序的語法高亮顯示與代碼折疊功能。其中最具特色的是EditPlus具有自動完成功能，例如在CSS源文件中輸入字母b加上空格，就會自動生成border:1pxsolidred語句。開發(fā)者可以自行編輯快捷鍵所代表的代碼塊，然后在開發(fā)過程中使用快捷方式讓EditPlus自動完成指定代碼內(nèi)容。VisualStudioCodeVisualStudioCode常被簡稱為VSCode，是微軟公司出品的一款免費(fèi)開源的開發(fā)工具，支持Windows、MacOS以及Linux操作系統(tǒng)。該軟件具有語法高亮、代碼自動補(bǔ)全、查看定義等功能，也內(nèi)置了Git版本控制系統(tǒng)和命令行工具。該軟件安裝后可以在其內(nèi)置的擴(kuò)展程序商店安裝擴(kuò)展包來拓展軟件功能，例如Chinese漢化包插件、Beautify代碼格式化插件、AutoRenameTag自動補(bǔ)全HTML/XML頭尾標(biāo)簽插件等，適合喜歡自己DIY配置工具的開發(fā)者。該軟件支持多種編程語言，例如JavaScript、TypeScript、HTML、CSS，也可以通過下載擴(kuò)展包來支持Java、Python、Go等其他編程語言。WebStormWebStorm是JetBrains公司旗下的一款JavaScript開發(fā)工具，適合進(jìn)行Web前端開發(fā)以及與JavaScript相關(guān)的程序編寫。該軟件直接支持代碼高亮、代碼折疊、代碼補(bǔ)全以及格式化等功能，無需安裝額外的插件。正常版本是付費(fèi)軟件，但是該軟件對于教育教學(xué)行業(yè)非常友好，學(xué)生和教師均可使用學(xué)校郵箱去申請免費(fèi)教育版許可證，該許可證有效期為每次1年，到期時如果用戶還在學(xué)校仍可免費(fèi)續(xù)約。本章小結(jié)本章首先介紹了JavaScript基礎(chǔ)知識，包括JavaScript簡介、起源、JavaScript與Java的不同之處以及JavaScript的特點(diǎn)。其次，詳細(xì)介紹了jQuery背景知識，包括jQuery簡介、發(fā)展史和特點(diǎn)。最后，介紹了6款Web開發(fā)工具，分別是AdobeDreamwaver、SublimeText、NodePad++、EditPlus、VisualStudioCode以及WebStorm。六、課后習(xí)題1.什么是JavaScript？它有哪些特點(diǎn)？答：JavaScript是一種輕量級的直譯式編程語言，基于ECMAScript標(biāo)準(zhǔn)（注:一種由ECMA國際組織通過ECMA-262標(biāo)準(zhǔn)化的腳本程序語言）。通常在HTML網(wǎng)頁中使用JavaScript為頁面增加動態(tài)效果和功能。其特點(diǎn)是腳本語言、簡單性、弱類型、跨平臺性、大小寫敏感。2.JavaScript與另外哪兩個技術(shù)并稱為Web前端的三大核心技術(shù)？答：HTML和CSS。3.什么是jQuery？它有哪些特點(diǎn)？答：jQuery這個名稱來源于JavaScript和Query（查詢）的組合，是一個輕量級的跨平臺JavaScript函數(shù)庫，擁有MIT軟件許可協(xié)議。jQuery的語法能用讓用戶更方便地選取和操作HTML元素、處理各類事件、實(shí)現(xiàn)JavaScript特效與動畫，并且能為不同類型的瀏覽器提供更便捷的API用于AJAX交互。jQuery也能讓開發(fā)者基于JavaScript函數(shù)庫開發(fā)新的插件。其特點(diǎn)是輕量級封裝、化簡JavaScript、兼容CSS3、跨瀏覽器支持。4.jQuery有哪幾類版本？如果需要兼容舊版本瀏覽器（例如IE6-8）選擇哪個版本更好?答：分別是jQuery1.x、2.x和3.x版本。如果需要兼容舊版瀏覽器，官方建議選擇jQuery1.12.x版本。《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》教案第2章JavaScript入門一、教學(xué)目標(biāo)：了解JavaScript的使用方式；了解JavaScript的基本語法規(guī)則；熟悉JavaScript的變量聲明與命名規(guī)范。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：了解JavaScript的基本語法規(guī)則；難點(diǎn)：JavaScript的使用方式（內(nèi)部和外部的用法）。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要內(nèi)容是JavaScript基礎(chǔ)知識，包括JavaScript的使用方式、語法規(guī)則、變量聲明與明明規(guī)范等內(nèi)容。五、教學(xué)基本內(nèi)容：2.1JavaScript的實(shí)現(xiàn)完整JavaScript的實(shí)現(xiàn)是由以下三個部分組成：ECMAScript：核心標(biāo)準(zhǔn)。DOM：文檔對象模型。BOM：瀏覽器對象模型。2.1.1ECMAScriptECMAScript是JavaScript的核心標(biāo)準(zhǔn)，它描述了該語言的語法和基本對象。2.1.2DOMDOM指的是DocumentObjectModel（文檔對象模型），它是HTML的應(yīng)用程序接口。DOM將整個HTML頁面看作是由各種節(jié)點(diǎn)層級構(gòu)成的結(jié)構(gòu)文檔。2.1.3BOMBOM指的是BrowserObjectModel（瀏覽器對象模型），可以對瀏覽器窗口進(jìn)行訪問和操作處理。該模型最早是由IE3.0與NetscapeNavigator3.0提供的，目前所有的主流瀏覽器都支持BOM，但是會有各自獨(dú)立的實(shí)現(xiàn)內(nèi)容。2.2JavaScript的使用JavaScript有兩種使用方式：一是在HTML文檔中直接添加代碼；二是將JavaScript腳本代碼寫到外部的JavaScript文件中，再在HTML文檔中引用該文件的路徑地址。這兩種使用方式的效果完全相同，可以根據(jù)使用率和代碼量選擇相應(yīng)的開發(fā)方式。例如有多個網(wǎng)頁文件需要引用同一段JavaScript代碼時，則可以寫在外部文件中進(jìn)行引用，以減少代碼冗余。2.2.1內(nèi)部JavaScriptJavaScript代碼可以直接寫在HTML頁面中，只需使用<script>首尾標(biāo)簽嵌套即可。相關(guān)HTML代碼語法格式如下：<script>//JavaScript代碼...</script>使用JavaScript代碼中的alert()方法制作一段簡單的示例：<script>alert("HelloJavaScript!");</script>該語句表示打開網(wǎng)頁后彈出警告對話框，顯示的文字內(nèi)容為"HelloJavaScript!"。【例2-1】內(nèi)部JavaScript的簡單應(yīng)用在HTML5頁面使用內(nèi)部JavaScript代碼彈出對話框。【代碼說明】本示例在<body>首尾標(biāo)簽之間使用<script>標(biāo)簽插入了一行簡單的JavaScript代碼，用于彈出對話框并顯示提示語句。當(dāng)前為Chrome瀏覽器的運(yùn)行效果，不同瀏覽器的對話框樣式稍有不同。內(nèi)部JavaScript代碼可位于HTML網(wǎng)頁的任何位置，例如放入<head>或者<body>首尾標(biāo)簽中均可。同一個HTML網(wǎng)頁也允許在不同位置放入多段JavaScript代碼。為了頁面代碼的可讀性，通常把JavaScript代碼統(tǒng)一放在同一個位置，例如頁面的底部或者<head>首尾標(biāo)簽中。2.2.2外部JavaScript如果選擇將JavaScript代碼保存到外部文件中，則只需要在HTML頁面的<script>標(biāo)簽中聲明src屬性即可。此時外部文件的類型必須是JavaScript類型文件（簡稱為JS文件），即文件后綴名為.js。相關(guān)HTML代碼語法格式如下：<scriptsrc="JavaScript文件URL"></script>以在本地js文件夾中的myFirstScript.js文件為例，在HTML頁面中的引用方法如下：<scriptsrc="js/myFirstScript.js"></script>引用語句放在<head>或<body>首尾標(biāo)簽中均可，與在<script>標(biāo)簽中直接寫腳本代碼的運(yùn)行效果完全一樣。【例2-2】外部JavaScript的簡單應(yīng)用在HTML5頁面引用外部JS文件彈出對話框。【代碼說明】本示例在<head>首尾標(biāo)簽之間對外部JS文件myFirstScript.js進(jìn)行了引用，該方法的運(yùn)行效果與內(nèi)部JS代碼完全一樣。不同之處在于，外部JS文件中直接寫JavaScript相關(guān)代碼即可，無需使用<script>首尾標(biāo)簽。2.3JavaScript語法2.3.1JavaScript大小寫在JavaScript中大小寫是嚴(yán)格區(qū)分的，無論是變量、函數(shù)名稱、運(yùn)算符和其他語法都必須嚴(yán)格按照要求的大小寫進(jìn)行聲明和使用。例如變量hello與變量HELLO會被認(rèn)為是完全不同的內(nèi)容。2.3.2JavaScript分號很多編程語言（例如C、Java和Perl等）都要求每句代碼結(jié)尾要使用分號（;）表示結(jié)束。而JavaScript的語法規(guī)則對此比較寬松，如果一行代碼結(jié)尾沒有分號也是可以被正確執(zhí)行的。例如：varx=99;或varx=99以上均為正確的語法格式，在沒有分號結(jié)束的時候JavaScript會把該行代碼的折行看作結(jié)束標(biāo)志。但是為考慮到瀏覽器的兼容性，建議不要省略代碼結(jié)尾的分號，以免部分瀏覽器不能正常顯示。2.3.3JavaScript注釋為了提高程序代碼的可讀性，JavaScript允許在代碼中添加注釋。注釋僅用于對代碼進(jìn)行輔助提示，不會被瀏覽器執(zhí)行。JavaScript有兩種注釋方式：單行注釋和多行注釋。單行注釋用雙斜杠（//）開頭，可以自成一行也可以寫在JavaScript代碼的后面。例如：//該提示語句自成一行alert("HelloJavaScript!");或alert("HelloJavaScript!");//該提示語句寫在JavaScript代碼后面多行注釋使用/*開頭，以*/結(jié)尾，在這兩個符號之間的所有內(nèi)容都會被認(rèn)為是注釋內(nèi)容，均不會被瀏覽器所執(zhí)行。例如：/*這是一個多行注釋在首尾符號之間的所有內(nèi)容都被認(rèn)為是注釋均不會被瀏覽器執(zhí)行*/alert("HelloJavaScript!");注：這兩種注釋符號僅可在JavaScript代碼中使用，其使用范圍是所有外部的JS文件以及<script>和</script>標(biāo)簽之間。利用注釋內(nèi)容不會被執(zhí)行的特點(diǎn)，在調(diào)試JavaScript代碼時如果希望暫停某一句或幾句代碼的執(zhí)行，可使用單行或多行注釋符號將需要禁用的代碼做成注釋。例如：//alert("HelloJavaScript1");//alert("HelloJavaScript2");alert("HelloJavaScript3");此時第一、二行的JavaScript代碼由于最前面添加了單行注釋符號，因此不會被執(zhí)行。當(dāng)調(diào)試完成后去掉注釋符號，代碼即可恢復(fù)運(yùn)行。2.3.4JavaScript代碼塊和Java語言類似，JavaScript語言也使用一對大括號標(biāo)識需要被執(zhí)行的多行代碼。例如：varx=9;if(x<10){x=10;alert(x);}上述代碼在if條件成立時，會執(zhí)行大括號里面的所有代碼。2.4JavaScript變量2.4.1變量的聲明JavaScript是一種弱類型的腳本語言，無論是數(shù)字、文本還是其他內(nèi)容，統(tǒng)一使用關(guān)鍵詞var加上變量名稱進(jìn)行聲明，其中關(guān)鍵詞var來源于英文單詞variable（變量）的前三個字母?？梢栽诼暶髯兞康耐瑫r對其指定初始值；也可以先聲明變量，再另行賦值。例如：varx=2;varmsg="HelloJavaScript!";varname;常見變量的賦值為數(shù)字或文本形式。當(dāng)變量的賦值內(nèi)容為文本時，需要使用引號（單引號、雙引號均可）括住內(nèi)容；當(dāng)為變量賦值為數(shù)字的時候，內(nèi)容不要加引號，否則會被當(dāng)作字符串處理。JavaScript也允許使用一個關(guān)鍵詞var同時定義多個變量。例如：varx1,x2,x3;//一次定義了三個變量名稱同時定義的變量類型可以不一樣，并且可為其中部分或全部變量進(jìn)行初始化。例如：varx1=2,x2="Hello",x3;由于JavaScript變量是弱類型的，因此同一個變量可以用于存放不同類型的值。例如可以聲明一個變量初始化時用于存放數(shù)值，然后將其更改為存放字符串。代碼如下：varx=99;//初始化時變量x存放的是數(shù)值99x="Hello";//將變量x更改為存放字符串"Hello"這段代碼從語法上來說沒有任何問題，但是為了良好的編程習(xí)慣不建議此種做法。應(yīng)該將變量用于保存相同類型的值。變量的聲明不是必須的，可以不使用關(guān)鍵詞var聲明直接使用。例如：msg1="Hello"msg2="JavaScript";msg=msg1+""+msg2;alert(msg);//運(yùn)行結(jié)果為顯示HelloJavaScript上述代碼中的msg1、msg2和msg均沒有使用關(guān)鍵詞var事先聲明就直接使用了，這種寫法也是有效的。當(dāng)程序遇到未聲明過的名稱時，會自動使用該名稱創(chuàng)建一個變量并繼續(xù)使用?！纠?-3】JavaScript變量的簡單應(yīng)用在JavaScript中使用關(guān)鍵詞聲明變量并使用?！敬a說明】本示例在JavaScript代碼部分使用關(guān)鍵詞var聲明了變量msg，并將其應(yīng)用于alert()方法中。瀏覽器會根據(jù)變量名稱找到其所對應(yīng)的值并顯示出來。需要注意的是，如果聲明的變量沒有賦值，則本示例中alert(msg)的顯示內(nèi)容會變成undefined（未定義）。2.4.2變量的命名規(guī)范一個有效的變量命名需要遵守以下兩條規(guī)則：首位字符必須是字母（A-Za-z）、下劃線（_）或者美元符號（$）；其他位置上的字符可以是下劃線（_）、美元符號（$）、數(shù)字（0-9）或字母（A-Za-z）。例如：varhello;//正確var_hello;//正確var$hello;//正確var$x_$y;//正確var123;//不正確，首位字符必須是字母、下劃線或者美元符號var%x;//不正確，首位字符必須是字母、下劃線或者美元符號varx%x;//不正確，中間的字符不能使用下劃線、美元符號、數(shù)字或字母以外的內(nèi)容常用的變量命名方式有Camel標(biāo)記法、Pascal標(biāo)記法和匈牙利類型標(biāo)記法等。Camel標(biāo)記法：又稱為駝峰標(biāo)記法，該規(guī)則聲明的變量首字母為小寫，其他單詞以大寫字母開頭。例如：varmyFirstScript、varmyTest等。Pascal標(biāo)記法：該規(guī)則聲明的變量所有單詞首字母均大寫。例如：varMyFirstScript、varMyTest等。匈牙利類型標(biāo)記法：該規(guī)則是在Pascal標(biāo)記法的基礎(chǔ)上為變量加一個小寫字母的前綴，用于提示該變量的類型，如i表示整數(shù)、s表示字符串等。例如：varsMyFirstScript、variMyTest等。事實(shí)上只要符合變量命名規(guī)范的寫法均可以被正確執(zhí)行，以上標(biāo)記法僅為開發(fā)者提供參考從而形成良好的編程風(fēng)格。2.4.3JavaScript關(guān)鍵字和保留字JavaScript遵循ECMA-262標(biāo)準(zhǔn)中規(guī)定的一系列關(guān)鍵字規(guī)則，這些關(guān)鍵字不能作為變量或者函數(shù)名稱。全部關(guān)鍵字共計25個。表2-1JavaScript關(guān)鍵字一覽表break case catch continue defaultdelete do else finally forfunction if in instanceof newreturn switch this throw trytypeof var void while with如果使用了上述關(guān)鍵詞作為變量或者函數(shù)名稱會引起報錯。在ECMA-262中還規(guī)定了一系列保留字，這些字是為將來的關(guān)鍵字而保留的單詞，同樣也不可以作為變量或者函數(shù)的名稱。全部保留字共計31個。表2-2JavaScript保留字一覽表abstract boolean byte char classconst debugger double enum exportextends final float goto implementsimport int interface long nativepackage private protected public shortstatic super synchronized throws transientvolatile如果使用了上述保留字作為變量或者函數(shù)名稱會被認(rèn)為是使用了關(guān)鍵字，從而一樣引起報錯。2.5JavaScript彈窗JavaScript可以為網(wǎng)頁創(chuàng)建彈窗式的消息對話框，例如之前例2-1中使用的alert()就是彈出一個帶有確認(rèn)按鈕的警告對話框。當(dāng)彈窗對話框出現(xiàn)后，用戶必須關(guān)閉后才可以繼續(xù)瀏覽或操作網(wǎng)頁上的其他內(nèi)容。JavaScript彈窗共有三種形式：警告對話框、提示對話框、確認(rèn)對話框。2.5.1警告對話框alert警告對話框是最常用的對話框，可以用來顯示一段文本給用戶查看，只包含一個“確定”按鈕，用戶必須點(diǎn)擊按鈕后對話框方可消失。其語法結(jié)構(gòu)如下：window.alert("文本內(nèi)容");或alert("文本內(nèi)容");//window前綴可以省略不寫，簡寫為alert()即可例如：alert("你好！");上述代碼表示打開網(wǎng)頁后彈出警告對話框，顯示的文字內(nèi)容為"你好！"。2.5.2提示對話框prompt提示對話框自帶一個文本輸入?yún)^(qū)域，可以用于收集用戶輸入的內(nèi)容。當(dāng)用戶輸入某個值并點(diǎn)擊“確定”按鈕后就可以獲取到該值。需要注意的是，如果用戶點(diǎn)擊了“取消”按鈕，即使輸入了值也不會獲取，返回值為null空值。其語法結(jié)構(gòu)如下：mpt("提示內(nèi)容","默認(rèn)值");或prompt("提示內(nèi)容","默認(rèn)值");//window前綴可以省略不寫，簡寫為prompt()即可其中默認(rèn)值為選填內(nèi)容，如果未填寫具體的值只留下一對引號則用戶會看到一個空白輸入框，否則會先顯示默認(rèn)值，再由用戶刪除自己重新填寫。例如：varx=mpt("請輸入一個數(shù)字","");//這里默認(rèn)值未填寫內(nèi)容//用戶點(diǎn)了取消按鈕if(x==null){alert("您點(diǎn)了取消按鈕，因此未能獲取到填寫內(nèi)容");}//用戶點(diǎn)了確定按鈕else{alert("您填寫的數(shù)字是"+x);}上述代碼表示打開網(wǎng)頁后彈出提示對話框，嘗試獲取用戶填寫的值并賦值給x。2.5.3確認(rèn)對話框confirm確認(rèn)對話框有“確定”和“取消”2個按鈕，用于確認(rèn)用戶的行為，例如用戶點(diǎn)擊按鈕希望刪除某些數(shù)據(jù)時，可以使用確認(rèn)對話框進(jìn)行二次確認(rèn)以免操作。其語法結(jié)構(gòu)如下：window.confirm("提示內(nèi)容");或confirm("提示內(nèi)容");//window前綴可以省略不寫，簡寫為confirm()即可當(dāng)用戶點(diǎn)擊“確認(rèn)”按鈕后會