《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件匯 周文潔 第1-7章 緒論、JavaScript入門 - jQuery選擇器與過濾器

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第1章緒論本章學(xué)習(xí)目標(biāo)了解JavaScript的概念與特點(diǎn)；了解jQuery的概念與特點(diǎn)；掌握任意一款Web開發(fā)工具。目錄1.1JavaScript概述1.2jQuery概述1.3Web開發(fā)工具的選擇1.1JavaScript概述1.1.1JavaScript簡(jiǎn)介1.1.2JavaScript起源1.1.3JavaScriptvsJava1.1.4JavaScript的特點(diǎn)1.1.1JavaScript簡(jiǎn)介JavaScript是一種輕量級(jí)的直譯式編程語言，基于ECMAScript標(biāo)準(zhǔn)（注:一種由ECMA國(guó)際組織通過ECMA-262標(biāo)準(zhǔn)化的腳本程序語言）。通常在HTML網(wǎng)頁中使用JavaScript為頁面增加動(dòng)態(tài)效果和功能。1.1.1JavaScript簡(jiǎn)介JavaScript和HTML、CSS一起被稱為是Web開發(fā)的三大核心技術(shù)，目前JavaScript已經(jīng)廣泛應(yīng)用于Web開發(fā)，市面上絕大多數(shù)網(wǎng)頁都使用了JavaScript代碼?？梢哉f當(dāng)今所有瀏覽器都支持JavaScript，無需額外安裝第三方插件。1.1.2JavaScript起源JavaScript最早是在1995年的時(shí)候由網(wǎng)景（Netscape）公司的BrendanEich用了十天時(shí)間開發(fā)出來的，用于當(dāng)時(shí)的網(wǎng)景導(dǎo)航者（NetscapeNavigator）瀏覽器2.0版。最初這種腳本語言的官方名稱為L(zhǎng)iveScript，后來應(yīng)用于網(wǎng)景導(dǎo)航者瀏覽器2.0B3版的時(shí)候正式更名為JavaScript。1.1.2JavaScript起源更名的原因是因?yàn)楫?dāng)時(shí)網(wǎng)景公司與Sun公司開展了合作，網(wǎng)景公司的管理層希望在他們的瀏覽器中增加對(duì)于Java技術(shù)的支持。該名稱容易讓人誤以為該腳本語言是和Java語言有關(guān)，但實(shí)際上該語言的語法風(fēng)格與Scheme更為接近。1.1.3JavaScriptvsJava因?yàn)槊Q的相近，JavaScript常被誤以為和Java有關(guān)，但事實(shí)上它們是無論從概念還是設(shè)計(jì)上都毫無關(guān)聯(lián)的兩種語言。1.1.3JavaScriptvsJavaJavaScript是Netscape公司的BrendanEich發(fā)明的一種輕量級(jí)語言，主要應(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è)版）三個(gè)版本，需要先編譯再執(zhí)行。1.1.3JavaScriptvsJavaJavaScript的主旨是為非程序開發(fā)者快速上手使用的，而Java是更高級(jí)更復(fù)雜的一種面向?qū)I(yè)程序開發(fā)者的語言，比JavaScript難度大、應(yīng)用范圍更廣。1.1.4JavaScript的特點(diǎn)1. 腳本語言JavaScript是一種直譯式的腳本語言，無需事先編譯，可以在程序運(yùn)行的過程中逐行進(jìn)行解釋使用。該語言適合非程序開發(fā)人員使用。1.1.4JavaScript的特點(diǎn)2. 簡(jiǎn)單性JavaScript具有非常簡(jiǎn)單的語法，其腳本程序面向非程序開發(fā)人員。HTML前端開發(fā)者都有能力為網(wǎng)頁添加JavaScript片段。1.1.4JavaScript的特點(diǎn)3. 弱類型JavaScript無需定義變量的類型，所有變量的聲明都可以用統(tǒng)一的類型關(guān)鍵詞表示。在運(yùn)行過程中，JavaScript會(huì)根據(jù)變量的值判斷其實(shí)際類型。1.1.4JavaScript的特點(diǎn)4. 跨平臺(tái)性JavaScript語言是一種Web程序開發(fā)語言，它只與瀏覽器支持情況有關(guān)，與操作系統(tǒng)的平臺(tái)類型無關(guān)。目前JavaScript可以在無需安裝第三方插件的情況下被大多數(shù)主流瀏覽器完全支持，因此JavaScript程序在編寫后可以在不同類型的操作系統(tǒng)中運(yùn)行，適用于PC、筆記本電腦、平板電腦和手機(jī)等各類包含瀏覽器的設(shè)備。1.1.4JavaScript的特點(diǎn)5. 大小寫敏感JavaScript語言是一種大小寫敏感的語言，例如字母a和A會(huì)被認(rèn)為是不同的內(nèi)容。同樣在使用函數(shù)時(shí)也必須嚴(yán)格遵守大小寫的要求使用正確的方法名稱。1.2jQuery概述1.2.1jQuery簡(jiǎn)介1.2.2jQuery發(fā)展史1.2.3jQuery的特點(diǎn)1.2.4jQuery的版本比較1.2.1jQuery簡(jiǎn)介jQuery這個(gè)名稱來源于JavaScript和Query（查詢）的組合，是一個(gè)輕量級(jí)的跨平臺(tái)JavaScript函數(shù)庫(kù)，擁有MIT軟件許可協(xié)議。目前主流瀏覽器基本上都支持jQuery。1.2.1jQuery簡(jiǎn)介jQuery秉承“writeless，domore（寫的更少，做的更多）”的核心理念，其語法能用讓用戶更方便地選取和操作HTML元素、處理各類事件、實(shí)現(xiàn)JavaScript特效與動(dòng)畫，并且能為不同類型的瀏覽器提供更便捷的API用于AJAX交互。1.2.1jQuery簡(jiǎn)介jQuery也能讓開發(fā)者基于JavaScript函數(shù)庫(kù)開發(fā)新的插件。jQuery通用性和可擴(kuò)展性相結(jié)合，它的出現(xiàn)將改變?nèi)藗儗?duì)JavaScript的使用方式。1.2.2jQuery發(fā)展史jQuery最早是在2006年1月由一位美國(guó)的軟件工程師JohnResing在紐約BarCamp（注：一種國(guó)際研討會(huì)網(wǎng)絡(luò)，由參與者互相分享Web技術(shù)）上發(fā)布的。JohnResing既是jQuery的創(chuàng)造者，也是jQueryJavaScript函數(shù)庫(kù)的核心開發(fā)者。1.2.2jQuery發(fā)展史最初的jQuery1.0版正式發(fā)布于2006年4月26日，經(jīng)歷多次升級(jí)，直至2022年12月發(fā)布的jQuery3.6.3版為本書修訂時(shí)的最新版本。目前jQuery是由TimmyWillison所領(lǐng)導(dǎo)的開發(fā)團(tuán)隊(duì)負(fù)責(zé)進(jìn)行維護(hù)。1.2.2jQuery發(fā)展史目前jQuery仍然是網(wǎng)絡(luò)上使用范圍最廣泛的JavaScript函數(shù)庫(kù)。根據(jù)Builtwith（注：一款用于統(tǒng)計(jì)流行網(wǎng)站使用的構(gòu)建技術(shù)和編程語言的工具）的最新統(tǒng)計(jì)數(shù)據(jù)得出結(jié)論，目前流量排名最高的百萬個(gè)網(wǎng)頁中超過70%都在使用jQuery，其中國(guó)內(nèi)比較著名的網(wǎng)站有：CCTV、新浪、搜狗、愛奇藝、豆瓣、CSDN、bilibili、支付寶等。1.2.2jQuery發(fā)展史jQuery在最流行的百萬個(gè)網(wǎng)站中的使用情況（數(shù)據(jù)來源：BuiltWith，2023年1月11日）1.2.3jQuery的特點(diǎn)1. 輕量級(jí)封裝網(wǎng)頁使用jQuery所需要引用的JS文件只有32kb左右，幾乎不會(huì)影響頁面的加載速度。1.2.3jQuery的特點(diǎn)2. 化簡(jiǎn)JavaScriptjQuery的選擇器化簡(jiǎn)了JavaScript查找DOM對(duì)象的代碼復(fù)雜度，基本只需要一行代碼就可以查找各種HTML元素或更改指定元素CSS樣式。1.2.3jQuery的特點(diǎn)3. 兼容CSS3

兼容CSS3的選擇器語法規(guī)則，可以根據(jù)元素的樣式來快速查找HTML元素。1.2.3jQuery的特點(diǎn)4. 跨瀏覽器支持jQuery支持目前所有主瀏覽器，例如IE、Firefox、Safari、Opera、Chrome等。因此開發(fā)者不用擔(dān)心瀏覽器的兼容性問題。1.2.4jQuery的版本比較目前jQuery共有三種版本：jQuery1.xjQuery2.xjQuery3.x1.2.4jQuery的版本比較 jQuery1.x版本：該版本是使用最為廣泛的jQuery版本，適用于絕大多數(shù)Web前端項(xiàng)目開發(fā)，兼容性較高。該版本本未來不會(huì)再增加新的功能，官網(wǎng)只做BUG維護(hù)。其最終版為2016年5月發(fā)布的jQuery1.12.4版。1.2.4jQuery的版本比較jQuery2.x版本：jQuery2.x版本相對(duì)1.x而言實(shí)際上沒有新增功能，僅僅是在1.x的基礎(chǔ)上去除了對(duì)IE6-8的支持，降低了文件大小且提升了性能，因此使用人數(shù)相對(duì)較少。該版本未來同樣不會(huì)再增加新的功能，官網(wǎng)只做BUG維護(hù)。其最終版為2016年5月發(fā)布的jQuery2.2.4版。1.2.4jQuery的版本比較jQuery3.x版本：該版本是目前最新的jQuery版本，最近一次是2022年12月發(fā)布的jQuery3.6.3版。該版本支持IE9+、Opera最新版、以及其他主流瀏覽器的最新版及前一版。需要注意的是，如果需要兼容IE6-8、Opera12.1x或者Safari5.1等舊版本的瀏覽器，官方建議使用jQuery1.12.x。1.3Web開發(fā)工具1.3.1AdobeDreamweaver1.3.2SublimeText1.3.3Notepad++1.3.4EditPlus1.3.5VisualStudioCode1.3.6WebStorm1.3Web開發(fā)工具JavaScript和jQuery源代碼文件均為純文本內(nèi)容，電腦操作系統(tǒng)中自帶的寫字板或記事本工具就可以打開和編輯源代碼內(nèi)容。因此本書不對(duì)開發(fā)工具作特定要求，使用任意一款純文本編輯器均可以進(jìn)行網(wǎng)頁內(nèi)容的編寫。1.3Web開發(fā)工具這里介紹幾款常用的網(wǎng)頁開發(fā)工具軟件：AdobeDreamweaverSublimeTextNodePad++EditPlus1.3.1AdobeDreamweaverAdobeDreamweaver是一款所見即所得的網(wǎng)頁編輯器，中文名稱為“夢(mèng)想編織者”或“織夢(mèng)”。該軟件最初的1.0版是1997年由美國(guó)Macromedia公司發(fā)布的，后來該公司于2005年被Adobe公司收購(gòu)。1.3.1AdobeDreamweaverDreamweaver也是當(dāng)時(shí)第一套針對(duì)專業(yè)Web前端工程師所設(shè)計(jì)的可視化網(wǎng)頁開發(fā)工具，整合了網(wǎng)頁開發(fā)與網(wǎng)站管理的功能。1.3.1AdobeDreamweaverDreamweaver支持HTML5/CSS3源代碼的編輯和預(yù)覽功能，最大的優(yōu)點(diǎn)是可視化性能帶來的直觀效果，開發(fā)界面可以分屏為代碼部分與預(yù)覽視圖，開發(fā)者修改代碼部分時(shí)預(yù)覽視圖會(huì)隨著修改內(nèi)容實(shí)時(shí)變化。1.3.1AdobeDreamweaver1.3.1AdobeDreamweaverDreamweaver也有它的弱點(diǎn)，由于不同瀏覽器存在兼容性問題，Dreamweaver的預(yù)覽視圖難以達(dá)到與所有瀏覽器完全一致的效果。如需考慮跨瀏覽器兼容問題，預(yù)覽畫面僅能作為輔助參考。1.3.2SublimeTextSublimeText的界面布局非常有特色，它支持文件夾導(dǎo)航圖和代碼縮略圖效果。該軟件支持多種編程語言的語法高亮，也具有代碼自動(dòng)完成提示功能。該軟件還具有自動(dòng)恢復(fù)功能，如果在編程過程中意外退出，在下次啟動(dòng)該軟件時(shí)文件會(huì)自動(dòng)恢復(fù)關(guān)閉之前的編輯狀態(tài)。1.3.2SublimeText1.3.3Notepad++NodePad++的名稱來源于Windows系列操作系統(tǒng)自帶的記事本NotePad，在此基礎(chǔ)上多了兩個(gè)加號(hào)，立刻帶了質(zhì)的飛越。這是一款免費(fèi)開源的純文本編輯器，具有完整中文化接口并支持UTF-8技術(shù)。由于它具有語法高亮顯示、代碼折疊等功能，因此也非常適合作為計(jì)算機(jī)程序的編輯器。1.3.3Notepad++1.3.4EditPlusEditPlus是由韓國(guó)SangilKim（ES-Computing）公司發(fā)布的一款文字編輯器，支持HTML、CSS、JavaScript、PHP、Java等多種計(jì)算機(jī)程序的語法高亮顯示與代碼折疊功能。1.3.4EditPlus其中最具特色的是EditPlus具有自動(dòng)完成功能，例如在CSS源文件中輸入字母b加上空格，就會(huì)自動(dòng)生成border:1pxsolidred語句。開發(fā)者可以自行編輯快捷鍵所代表的代碼塊，然后在開發(fā)過程中使用快捷方式讓EditPlus自動(dòng)完成指定代碼內(nèi)容。1.3.4EditPlus1.3.5 VisualStudioCodeVisualStudioCode常被簡(jiǎn)稱為VSCode，是微軟公司出品的一款免費(fèi)開源的開發(fā)工具，支持Windows、MacOS以及Linux操作系統(tǒng)。該軟件具有語法高亮、代碼自動(dòng)補(bǔ)全、查看定義等功能，也內(nèi)置了Git版本控制系統(tǒng)和命令行工具。該軟件安裝后可以在其內(nèi)置的擴(kuò)展程序商店安裝擴(kuò)展包來拓展軟件功能，例如Chinese漢化包插件、Beautify代碼格式化插件、AutoRenameTag自動(dòng)補(bǔ)全HTML/XML頭尾標(biāo)簽插件等，適合喜歡自己DIY配置工具的開發(fā)者。該軟件支持多種編程語言，例如JavaScript、TypeScript、HTML、CSS，也可以通過下載擴(kuò)展包來支持Java、Python、Go等其他編程語言。1.3.5 VisualStudioCode1.3.6WebStormWebStorm是JetBrains公司旗下的一款JavaScript開發(fā)工具，適合進(jìn)行Web前端開發(fā)以及與JavaScript相關(guān)的程序編寫。該軟件直接支持代碼高亮、代碼折疊、代碼補(bǔ)全以及格式化等功能，無需安裝額外的插件。正常版本是付費(fèi)軟件，但是該軟件對(duì)于教育教學(xué)行業(yè)非常友好，學(xué)生和教師均可使用學(xué)校郵箱去申請(qǐng)免費(fèi)教育版許可證，該許可證有效期為每次1年，到期時(shí)如果用戶還在學(xué)校仍可免費(fèi)續(xù)約。1.3.6WebStorm本章小結(jié)本章小結(jié)本章首先介紹了JavaScript基礎(chǔ)知識(shí)，包括JavaScript簡(jiǎn)介、起源、JavaScript與Java的不同之處以及JavaScript的特點(diǎn)。其次，詳細(xì)介紹了jQuery背景知識(shí)，包括jQuery簡(jiǎn)介、發(fā)展史和特點(diǎn)。最后，介紹了6款Web開發(fā)工具，分別是AdobeDreamwaver、SublimeText、NodePad++、EditPlus、VisualStudioCode以及WebStorm。Thankyou！JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第2章JavaScript入門本章學(xué)習(xí)目標(biāo) 了解完整JavaScript實(shí)現(xiàn)的組成部分； 掌握J(rèn)avaScript的使用方式； 掌握J(rèn)avaScript的基本語法規(guī)則；掌握J(rèn)avaScript的變量聲明與命名規(guī)范。目錄2.1JavaScript的實(shí)現(xiàn)2.2JavaScript的使用2.3JavaScript語法2.4JavaScript變量2.5JavaScript彈窗2.1JavaScript的實(shí)現(xiàn)2.1.1ECMAScript2.1.2DOM2.1.3BOM2.1JavaScript的實(shí)現(xiàn)

完整JavaScript的實(shí)現(xiàn)是由以下三個(gè)部分組成：ECMAScript：核心標(biāo)準(zhǔn)。DOM：文檔對(duì)象模型。BOM：瀏覽器對(duì)象模型。2.1.1ECMAScriptECMAScript是JavaScript的核心標(biāo)準(zhǔn)，它描述了該語言的語法和基本對(duì)象。2.1.2DOMDOM指的是DocumentObjectModel（文檔對(duì)象模型），它是HTML的應(yīng)用程序接口。DOM將整個(gè)HTML頁面看作是由各種節(jié)點(diǎn)層級(jí)構(gòu)成的結(jié)構(gòu)文檔。2.1.3BOMBOM指的是BrowserObjectModel（瀏覽器對(duì)象模型），可以對(duì)瀏覽器窗口進(jìn)行訪問和操作處理。該模型最早是由IE3.0與NetscapeNavigator3.0提供的，目前所有的主流瀏覽器都支持BOM，但是會(huì)有各自獨(dú)立的實(shí)現(xiàn)內(nèi)容。2.2JavaScript的使用2.2.1內(nèi)部JavaScript2.2.2外部JavaScript2.2JavaScript的使用JavaScript有兩種使用方式：一是在HTML文檔中直接添加代碼；二是將JavaScript腳本代碼寫到外部的JavaScript文件中，再在HTML文檔中引用該文件的路徑地址。2.2JavaScript的使用這兩種使用方式的效果完全相同，可以根據(jù)使用率和代碼量選擇相應(yīng)的開發(fā)方式。例如有多個(gè)網(wǎng)頁文件需要引用同一段JavaScript代碼時(shí)，則可以寫在外部文件中進(jìn)行引用，以減少代碼冗余。2.2.1內(nèi)部JavaScriptJavaScript代碼可以直接寫在HTML頁面中，只需使用<script>首尾標(biāo)簽嵌套即可。2.2.1內(nèi)部JavaScript相關(guān)HTML代碼語法格式如下：使用JavaScript代碼中的alert()方法制作一段簡(jiǎn)單的示例：<script>//JavaScript代碼...</script><script>alert("HelloJavaScript!");</script>該語句表示打開網(wǎng)頁后彈出警告對(duì)話框，顯示的文字內(nèi)容為"HelloJavaScript!"。2.2.1內(nèi)部JavaScript【例2-1】?jī)?nèi)部JavaScript的簡(jiǎn)單應(yīng)用2.2.2外部JavaScript如果選擇將JavaScript代碼保存到外部文件中，則只需要在HTML頁面的<script>標(biāo)簽中聲明src屬性即可。此時(shí)外部文件的類型必須是JavaScript類型文件（簡(jiǎn)稱為JS文件），即文件后綴名為.js。2.2.2外部JavaScript相關(guān)HTML代碼語法格式如下：以在本地js文件夾中的myFirstScript.js文件為例，在HTML頁面中的引用方法如下：<scriptsrc="JavaScript文件URL"></script><scriptsrc="js/myFirstScript.js"></script>引用語句放在<head>或<body>首尾標(biāo)簽中均可，與在<script>標(biāo)簽中直接寫腳本代碼的運(yùn)行效果完全一樣。2.2.2外部JavaScript【例2-2】外部JavaScript的簡(jiǎn)單應(yīng)用2.3JavaScript語法2.3.1JavaScript大小寫2.3.2JavaScript分號(hào)2.3.3JavaScript注釋2.3.4JavaScript代碼塊2.3.1JavaScript大小寫在JavaScript中大小寫是嚴(yán)格區(qū)分的，無論是變量、函數(shù)名稱、運(yùn)算符和其他語法都必須嚴(yán)格按照要求的大小寫進(jìn)行聲明和使用。例如變量hello與變量HELLO會(huì)被認(rèn)為是完全不同的內(nèi)容。2.3.2JavaScript分號(hào)很多編程語言（例如C、Java和Perl等）都要求每句代碼結(jié)尾要使用分號(hào)（;）表示結(jié)束。而JavaScript的語法規(guī)則對(duì)此比較寬松，如果一行代碼結(jié)尾沒有分號(hào)也是可以被正確執(zhí)行的。2.3.3JavaScript注釋為了提高程序代碼的可讀性，JavaScript允許在代碼中添加注釋。注釋僅用于對(duì)代碼進(jìn)行輔助提示，不會(huì)被瀏覽器執(zhí)行。JavaScript有兩種注釋方式：?jiǎn)涡凶⑨尯投嘈凶⑨尅?.3.3JavaScript注釋單行注釋用雙斜杠（//）開頭，可以自成一行也可以寫在JavaScript代碼的后面。例如：//該提示語句自成一行alert("HelloJavaScript!");或alert("HelloJavaScript!");//該提示語句寫在JavaScript代碼后面2.3.3JavaScript注釋多行注釋使用/*開頭，以*/結(jié)尾，在這兩個(gè)符號(hào)之間的所有內(nèi)容都會(huì)被認(rèn)為是注釋內(nèi)容，均不會(huì)被瀏覽器所執(zhí)行。例如：/*這是一個(gè)多行注釋

在首尾符號(hào)之間的所有內(nèi)容都被認(rèn)為是注釋

均不會(huì)被瀏覽器執(zhí)行*/alert("HelloJavaScript!");2.3.3JavaScript注釋利用注釋內(nèi)容不會(huì)被執(zhí)行的特點(diǎn)，在調(diào)試JavaScript代碼時(shí)如果希望暫停某一句或幾句代碼的執(zhí)行，可使用單行或多行注釋符號(hào)將需要禁用的代碼做成注釋。例如：//alert("HelloJavaScript1");//alert("HelloJavaScript2");alert("HelloJavaScript3");此時(shí)第一、二行的JavaScript代碼由于最前面添加了單行注釋符號(hào)，因此不會(huì)被執(zhí)行。當(dāng)調(diào)試完成后去掉注釋符號(hào)，代碼即可恢復(fù)運(yùn)行。2.3.2JavaScript代碼塊和Java語言類似，JavaScript語言也使用一對(duì)大括號(hào)標(biāo)識(shí)需要被執(zhí)行的多行代碼。2.3.2JavaScript代碼塊例如：varx=9;if(x<10){ x=10; alert(x);}上述代碼在if條件成立時(shí)，會(huì)執(zhí)行大括號(hào)里面的所有代碼。2.4JavaScript變量2.4.1變量的聲明2.4.2變量的命名規(guī)范2.4.3JavaScript關(guān)鍵字和保留字2.4.1變量的聲明JavaScript是一種弱類型的腳本語言，無論是數(shù)字、文本還是其他內(nèi)容，統(tǒng)一使用關(guān)鍵詞var加上變量名稱進(jìn)行聲明，其中關(guān)鍵詞var來源于英文單詞variable（變量）的前三個(gè)字母。2.4.1變量的聲明可以在聲明變量的同時(shí)對(duì)其指定初始值；也可以先聲明變量，再另行賦值。例如：varx=2;varmsg="HelloJavaScript!";varname;常見變量的賦值為數(shù)字或文本形式。當(dāng)變量的賦值內(nèi)容為文本時(shí)，需要使用引號(hào)（單引號(hào)、雙引號(hào)均可）括住內(nèi)容；當(dāng)為變量賦值為數(shù)字的時(shí)候，內(nèi)容不要加引號(hào)，否則會(huì)被當(dāng)作字符串處理。2.4.1變量的聲明JavaScript也允許使用一個(gè)關(guān)鍵詞var同時(shí)定義多個(gè)變量。例如：同時(shí)定義的變量類型可以不一樣，并且可為其中部分或全部變量進(jìn)行初始化。例如：varx1,x2,x3;//一次定義了三個(gè)變量名稱varx1=2,x2="Hello",x3;2.4.1變量的聲明由于JavaScript變量是弱類型的，因此同一個(gè)變量可以用于存放不同類型的值。例如可以聲明一個(gè)變量初始化時(shí)用于存放數(shù)值，然后將其更改為存放字符串。代碼如下：varx=99;//初始化時(shí)變量x存放的是數(shù)值99x="Hello";//將變量x更改為存放字符串"Hello"這段代碼從語法上來說沒有任何問題，但是為了良好的編程習(xí)慣不建議此種做法。應(yīng)該將變量用于保存相同類型的值。2.4.1變量的聲明變量的聲明不是必須的，可以不使用關(guān)鍵詞var聲明直接使用。例如：msg1="Hello"msg2="JavaScript";msg=msg1+""+msg2;alert(msg);//運(yùn)行結(jié)果為顯示HelloJavaScript上述代碼中的msg1、msg2和msg均沒有使用關(guān)鍵詞var事先聲明就直接使用了，這種寫法也是有效的。當(dāng)程序遇到未聲明過的名稱時(shí)，會(huì)自動(dòng)使用該名稱創(chuàng)建一個(gè)變量并繼續(xù)使用。2.4.1變量的聲明【例2-3】JavaScript變量的簡(jiǎn)單應(yīng)用2.4.2變量的命名規(guī)范一個(gè)有效的變量命名需要遵守以下兩條規(guī)則：首位字符必須是字母（A-Za-z）、下劃線（_）或者美元符號(hào)（$）；其他位置上的字符可以是下劃線（_）、美元符號(hào)（$）、數(shù)字（0-9）或字母（A-Za-z）。2.2.2變量的命名規(guī)范例如：varhello;//正確var_hello;//正確var$hello;//正確var$x_$y;//正確var123;//不正確，首位字符必須是字母、下劃線或者美元符號(hào)var%x;//不正確，首位字符必須是字母、下劃線或者美元符號(hào)varx%x;//不正確，中間的字符不能使用下劃線、美元符號(hào)、數(shù)字或字母以外的內(nèi)容2.2.2變量的命名規(guī)范常用的變量命名方式有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ǔ)上為變量加一個(gè)小寫字母的前綴，用于提示該變量的類型，如i表示整數(shù)、s表示字符串等。例如：varsMyFirstScript、variMyTest等。2.4.3JavaScript關(guān)鍵字和保留字JavaScript遵循ECMA-262標(biāo)準(zhǔn)中規(guī)定的一系列關(guān)鍵字規(guī)則，這些關(guān)鍵字不能作為變量或者函數(shù)名稱。2.4.3JavaScript關(guān)鍵字和保留字全部關(guān)鍵字共計(jì)25個(gè)，如表2-1所示。2.4.3JavaScript關(guān)鍵字和保留字在ECMA-262中還規(guī)定了一系列保留字，這些字是為將來的關(guān)鍵字而保留的單詞，同樣也不可以作為變量或者函數(shù)的名稱。全部保留字共計(jì)31個(gè)，如表2-2所示。2.5JavaScript彈窗2.5.1警告對(duì)話框alert2.5.2提示對(duì)話框prompt2.5.3確認(rèn)對(duì)話框confirm2.5JavaScript彈窗JavaScript可以為網(wǎng)頁創(chuàng)建彈窗式的消息對(duì)話框，例如之前例2-1中使用的alert()就是彈出一個(gè)帶有確認(rèn)按鈕的警告對(duì)話框。當(dāng)彈窗對(duì)話框出現(xiàn)后，用戶必須關(guān)閉后才可以繼續(xù)瀏覽或操作網(wǎng)頁上的其他內(nèi)容。JavaScript彈窗共有三種形式：警告對(duì)話框、提示對(duì)話框、確認(rèn)對(duì)話框。2.5.1警告對(duì)話框alert警告對(duì)話框是最常用的對(duì)話框，可以用來顯示一段文本給用戶查看，只包含一個(gè)“確定”按鈕，用戶必須點(diǎn)擊按鈕后對(duì)話框方可消失。其語法結(jié)構(gòu)如下：window.alert("文本內(nèi)容");或alert("文本內(nèi)容");//window前綴可以省略不寫，簡(jiǎn)寫為alert()即可2.5.1警告對(duì)話框alert例如：上述代碼表示打開網(wǎng)頁后彈出警告對(duì)話框，顯示的文字內(nèi)容為"你好！"。alert("你好！");2.5.2提示對(duì)話框prompt提示對(duì)話框自帶一個(gè)文本輸入?yún)^(qū)域，可以用于收集用戶輸入的內(nèi)容。當(dāng)用戶輸入某個(gè)值并點(diǎn)擊“確定”按鈕后就可以獲取到該值。需要注意的是，如果用戶點(diǎn)擊了“取消”按鈕，即使輸入了值也不會(huì)獲取，返回值為null空值。其語法結(jié)構(gòu)如下：mpt("提示內(nèi)容","默認(rèn)值");或prompt("提示內(nèi)容","默認(rèn)值");//window前綴可以省略不寫，簡(jiǎn)寫為prompt()即可2.5.2提示對(duì)話框prompt其中默認(rèn)值為選填內(nèi)容，如果未填寫具體的值只留下一對(duì)引號(hào)則用戶會(huì)看到一個(gè)空白輸入框，否則會(huì)先顯示默認(rèn)值，再由用戶刪除自己重新填寫。2.5.2提示對(duì)話框prompt例如：varx=mpt("請(qǐng)輸入一個(gè)數(shù)字","");//這里默認(rèn)值未填寫內(nèi)容//用戶點(diǎn)了取消按鈕if(x==null){alert("您點(diǎn)了取消按鈕，因此未能獲取到填寫內(nèi)容");}//用戶點(diǎn)了確定按鈕else{alert("您填寫的數(shù)字是"+x);}上述代碼表示打開網(wǎng)頁后彈出提示對(duì)話框，嘗試獲取用戶填寫的值并賦值給x。2.5.3確認(rèn)對(duì)話框confirm確認(rèn)對(duì)話框有“確定”和“取消”2個(gè)按鈕，用于確認(rèn)用戶的行為，例如用戶點(diǎn)擊按鈕希望刪除某些數(shù)據(jù)時(shí)，可以使用確認(rèn)對(duì)話框進(jìn)行二次確認(rèn)以免操作。其語法結(jié)構(gòu)如下：window.confirm("提示內(nèi)容");或confirm("提示內(nèi)容");//window前綴可以省略不寫，簡(jiǎn)寫為confirm()即可當(dāng)用戶點(diǎn)擊“確認(rèn)”按鈕后會(huì)返回布爾值true，當(dāng)點(diǎn)擊“取消”按鈕時(shí)會(huì)返回布爾值false，可以以此判斷用戶的意愿進(jìn)行下一步操作。2.5.3確認(rèn)對(duì)話框confirm例如：varresult=window.confirm("您確認(rèn)刪除數(shù)據(jù)嗎？");//用戶點(diǎn)了確認(rèn)按鈕if(result==true){alert("數(shù)據(jù)已刪除");}//用戶點(diǎn)了取消按鈕else{alert("您點(diǎn)了取消按鈕，數(shù)據(jù)未刪除");}上述代碼表示打開網(wǎng)頁后彈出確認(rèn)對(duì)話框，當(dāng)用戶點(diǎn)擊了“確認(rèn)”按鈕后才進(jìn)一步操作。2.5JavaScript彈窗注：以上三種彈窗均可以使用反斜杠+n（\n）的模式表示文本換行，例如：alert("第一行\(zhòng)n第二行");2.5JavaScript彈窗【例2-4】JavaScript彈窗的簡(jiǎn)單應(yīng)用本章小結(jié)本章小結(jié)本章為JavaScript的基礎(chǔ)知識(shí)入門，首先介紹了JavaScript的實(shí)現(xiàn)原理，包括ECMAScript、DOM和BOM的概念；其次介紹了JavaScript的使用方法，分為內(nèi)部和外部?jī)煞N模式；然后介紹了JavaScript的語法規(guī)則，包括大小寫、分號(hào)、注釋和代碼塊；接著介紹了JavaScript變量的概念，包括變量的聲明、命名規(guī)范以及關(guān)鍵字和保留字；最后介紹了JavaScript的三種彈窗，分別是警告對(duì)話框alert、提示對(duì)話框prompt以及確認(rèn)對(duì)話框confirm。Thankyou！JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第3章JavaScript數(shù)據(jù)類型與運(yùn)算符本章學(xué)習(xí)目標(biāo) 掌握J(rèn)avaScript的基本數(shù)據(jù)類型與對(duì)象類型； 掌握J(rèn)avaScript類型轉(zhuǎn)換方法； 掌握J(rèn)avaScript運(yùn)算符的使用。目錄3.1JavaScript基本數(shù)據(jù)類型3.2JavaScript對(duì)象類型3.3JavaScript類型轉(zhuǎn)換3.4JavaScript運(yùn)算符3.5階段案例：生肖計(jì)算3.1JavaScript基本數(shù)據(jù)類型3.1.1Undefined類型3.1.2Null類型3.1.3String類型3.1.4Number類型3.1.5Boolean類型3.1JavaScript基本數(shù)據(jù)類型JavaScript有五種原始類型分別是：Number（數(shù)字）、Boolean（布爾值）、String（字符串）、Null（空值）和Undefined（未定義）。JavaScript提供了typeof方法用于檢測(cè)變量的數(shù)據(jù)類型，該方法會(huì)根據(jù)變量本身的數(shù)據(jù)類型給出對(duì)應(yīng)名稱的返回值。語法格式如下：typeof變量名稱3.1JavaScript基本數(shù)據(jù)類型對(duì)于指定的變量使用typeof方法，其返回值是提示數(shù)據(jù)類型的文本內(nèi)容。3.1.1Undefined類型所有Undefined類型的輸出值都是undefined。當(dāng)需要輸出的變量從未聲明過，或者使用關(guān)鍵詞var聲明過但是從未進(jìn)行賦值時(shí)會(huì)顯示undefined字樣。例如：alert(y);//返回值為undefined，因?yàn)樽兞縴之前未使用關(guān)鍵詞var聲明或varx;alert(x);//返回值也是undefined，因?yàn)槲唇o變量x進(jìn)行賦值3.1.1Undefined類型【例3-1】JavaScript基礎(chǔ)數(shù)據(jù)類型Undefined的簡(jiǎn)單應(yīng)用3.1.2Null類型null值表示變量的內(nèi)容為空，可用于初始化變量，或者清空已經(jīng)賦值的變量。例如：varx=99;x=null;alert(x);//此時(shí)返回值是null而不是993.1.2Null類型【例3-2】JavaScript基礎(chǔ)數(shù)據(jù)類型Null的簡(jiǎn)單應(yīng)用3.1.3String類型在JavaScript中String類型用于存儲(chǔ)文本內(nèi)容，又稱為字符串類型。為變量進(jìn)行字符串賦值時(shí)需要使用引號(hào)(單引號(hào)或雙引號(hào)均可)括住文本內(nèi)容。例如：varcountry='China';或varcountry="China";3.1.3String類型如果字符串內(nèi)容本身也需要帶上引號(hào)，則用于包圍字符串的引號(hào)不可以和文本內(nèi)容中的引號(hào)相同。例如字符串本身如果帶有雙引號(hào)，則使用單引號(hào)包圍字符串；反之亦然。例如：vardialog='Todayisagift,thatiswhyitiscalled"Present".';或vardialog="Todayisagift,thatiswhyitiscalled'Present'.";3.1.3String類型String對(duì)象中包含了一系列方法，常用方法如表所示。3.1.3String類型1.字符串長(zhǎng)度在字符串中，每一個(gè)字符都有固定的位置，其位置從左往右進(jìn)行分配。以單詞hello為例，其位置規(guī)則如圖所示。首字符H從位置0開始，第二個(gè)字符L是位置1，以此類推，直到最后一個(gè)字符O的位置是字符串的總長(zhǎng)度少1。3.1.3String類型1.字符串長(zhǎng)度【例3-3】JavaScript獲取字符串長(zhǎng)度的簡(jiǎn)單應(yīng)用3.1.3String類型2.獲取字符串中的單個(gè)字符在JavaScript中可以使用charAt()方法獲取字符串指定位置上的單個(gè)字符。其語法結(jié)構(gòu)如下：例如：charAt(index)其中index參數(shù)值填寫需要獲取的字符所在位置。varmsg="HelloJavaScript";varx=msg.charAt(0);//表示獲取msg中的第一個(gè)字符，返回值為H3.1.3String類型2.獲取字符串中的單個(gè)字符如果需要獲取指定位置上單個(gè)字符的字符代碼，可以使用charCodeAt()方法。其語法結(jié)構(gòu)如下：例如：charCodeAt(index)var

msg="HelloJavaScript";varx=msg.charCodeAt(0);//表示獲取msg中的第一個(gè)字符的字符代碼，返回值為72其中index參數(shù)值填寫需要獲取的字符所在位置。3.1.3String類型2.獲取字符串中的單個(gè)字符【例3-4】JavaScript獲取字符串中單個(gè)字符的應(yīng)用3.1.3String類型3.連接字符串在JavaScript中可以使用concat()方法將新的字符串內(nèi)容連接到原始字符串上。其語法結(jié)構(gòu)如下：例如：concat(string1,string2...,stringN);varmsg="Hello";varnewMsg=msg.concat("JavaScript");alert(newMsg);//返回值為"HelloJavaScript"該方法允許帶有一個(gè)或多個(gè)參數(shù)，表示按照從左往右的依次連接這些字符串。3.1.3String類型3.連接字符串也可以直接使用加號(hào)（+）進(jìn)行字符串的連接，其效果相同。因此上述示例代碼可改為：varmsg="Hello";varnewMsg=msg+"JavaScript";alert(newMsg);//返回值為"HelloJavaScript"3.1.3String類型3.連接字符串【例3-5】JavaScript連接字符串的簡(jiǎn)單應(yīng)用3.1.3String類型3.查找字符串是否存在使用indexOf()和lastIndexOf()方法可以查找原始字符串中是否包含指定的字符串內(nèi)容。其語法格式如下：indexOf(searchString,startIndex)或lastIndexOf(searchString,startIndex)其中searchString參數(shù)位置填入需要用于對(duì)比查找的字符串片段，startIndex參數(shù)用于指定搜索的起始字符，該參數(shù)內(nèi)容如果省略則按照默認(rèn)順序搜索全文。3.1.3String類型3.查找字符串是否存在indexOf()和lastIndexOf()方法都可以用于查找指定內(nèi)容是否存在，如果存在，其返回值為指定內(nèi)容在原始字符串中的位置序號(hào)；如果不存在，則直接返回-1。區(qū)別在于，indexOf()是從序號(hào)0的位置開始正序檢索字符串內(nèi)容的，而lastIndexOf()是從序號(hào)最大值的位置開始倒序檢索字符串內(nèi)容。3.1.3String類型3.查找字符串是否存在【例3-6】JavaScript檢查字符串是否存在的簡(jiǎn)單應(yīng)用

3.1.3String類型5.查找與替換字符串在JavaScript中使用match()或search()方法可以查找匹配正則表達(dá)式的字符串內(nèi)容。match()方法的語法格式如下：match(regExp)參數(shù)regExp的位置需要填入一個(gè)正則表達(dá)式，例如match(/a/g)表示全局查找字母a，后面的小寫字母g是英文單詞gobal的首字母簡(jiǎn)寫，表示全局查找。其返回值為符合條件的所有字符串片段。3.1.3String類型5.查找與替換字符串search()方法的語法格式如下：search(regExp)參數(shù)regExp的位置同樣需要填入一個(gè)正則表達(dá)式。不同之處在于，search()方法的返回值是符合匹配條件的字符串索引值。3.1.3String類型5.查找與替換字符串在JavaScript中使用replace()方法可以替換匹配正則表達(dá)式的字符串內(nèi)容。replace()方法的語法格式如下：replace(regExp,replaceText)參數(shù)regExp的位置需要填入一個(gè)正則表達(dá)式，參數(shù)replaceText的位置填入需要替換的新的文本內(nèi)容。例如replace(/a/g,"A")表示的是把所有的小寫字母a都替換為大寫形式。該方法的返回值是已經(jīng)替換完畢的新字符串內(nèi)容。3.1.3String類型5.查找與替換字符串【例3-7】JavaScript查找和替換字符串

3.1.3String類型6.獲取字符串片段在JavaScript中可以對(duì)字符串類型的變量使用slice()和substrig()方法截取其中的字符串片段。其中slice()方法用于去掉指定片段，substring()方法用于節(jié)選指定片段。3.1.3String類型6.獲取字符串片段slice()方法語法格式如下：slice(start,end)其中start參數(shù)位置填寫需要?jiǎng)h除的字符串的第一個(gè)字符位置，end參數(shù)位置填寫需要?jiǎng)h除字符串的結(jié)束位置（不包括該位置上的字符），如果end參數(shù)省略則默認(rèn)填入字符串長(zhǎng)度。如果填入的屬性值為負(fù)數(shù)，表示從字符串的最后一個(gè)位置開始計(jì)算，例如-1表示倒數(shù)第一個(gè)字符。3.1.3String類型6.獲取字符串片段substring()方法語法格式如下：substring(start,end)與slice()方法的語法結(jié)構(gòu)類似，其中start參數(shù)位置填寫需要節(jié)選的字符串的第一個(gè)字符位置，end參數(shù)位置填寫需要節(jié)選字符串的結(jié)束位置（不包括該位置上的字符），同樣如果end參數(shù)省略則默認(rèn)填入字符串長(zhǎng)度。3.1.3String類型6.獲取字符串片段當(dāng)參數(shù)均為非負(fù)數(shù)時(shí)，substring()與slice()方法獲取的結(jié)果完全一樣。只有參數(shù)值存在負(fù)數(shù)情況時(shí)，這兩個(gè)方法才會(huì)有所不同：substring()方法會(huì)忽略負(fù)數(shù)，直接將其當(dāng)作0來處理；而slice()方法會(huì)用字符串長(zhǎng)度加上該負(fù)數(shù)數(shù)值，計(jì)算出對(duì)應(yīng)的位置。例如：varmsg="happy";//該字符串長(zhǎng)度為5位varresult1=msg.substring(1,-1);//返回值為hvarresult2=slice(1,-1);//返回值為app3.1.3String類型6.獲取字符串片段【例3-8】JavaScript獲取字符串片段的簡(jiǎn)單應(yīng)用

3.1.3String類型7.字符串大小寫轉(zhuǎn)換在JavaScript中可以對(duì)字符串類型的變量使用toLowerCase()和toUpperCase()方法轉(zhuǎn)換其中存在的大小寫字母。其中toLowerCase()表示將所有字母轉(zhuǎn)換為小寫，toUpperCase()表示將所有字母轉(zhuǎn)換位大寫。3.1.3String類型7.字符串大小寫轉(zhuǎn)換【例3-9】JavaScript字符串大小寫轉(zhuǎn)換3.1.3String類型8.轉(zhuǎn)義字符在前幾節(jié)的例題中都看到了alert()方法中帶有\(zhòng)n符號(hào)表示換行，這種符號(hào)稱為轉(zhuǎn)義字符。與C語言、Java語言相似，在JavaScript中String類型也包含了一系列轉(zhuǎn)義字符。具體情況如表所示。3.1.3String類型8.轉(zhuǎn)義字符【例3-10】JavaScript轉(zhuǎn)義字符的簡(jiǎn)單應(yīng)用3.1.4Number類型在JavaScript中使用Number類型表示數(shù)字，其數(shù)字可以是32位以內(nèi)的整數(shù)或64位以內(nèi)的浮點(diǎn)數(shù)。例如：varx=9;vary=3.14;Number類型還支持使用科學(xué)計(jì)數(shù)法、八進(jìn)制和十六進(jìn)制的表示方式。3.1.4Number類型1.科學(xué)計(jì)數(shù)法對(duì)于極大或極小的數(shù)字也可以使用科學(xué)記數(shù)法表示，寫法格式如下：上述格式表示數(shù)字后面跟指數(shù)e再緊跟乘以的倍數(shù)，其中數(shù)值可以是整數(shù)或浮點(diǎn)數(shù)，倍數(shù)可以允許為負(fù)數(shù)。例如：數(shù)值e倍數(shù)varx1=3.14e8;varx2=3.14e-8;變量x1表示的數(shù)是3.14乘以10的8次方，即314000000；變量x2表示的數(shù)是3.14乘以10的-8次方，即0.0000000314。3.1.4Number類型1.科學(xué)計(jì)數(shù)法【例3-11】JavaScript科學(xué)計(jì)數(shù)法的簡(jiǎn)單應(yīng)用3.1.4Number類型2.八進(jìn)制與十六進(jìn)制數(shù)在JavaScript中，Number類型也可以用于表示八進(jìn)制或十六進(jìn)制的數(shù)。八進(jìn)制的數(shù)需要用數(shù)字0開頭，后面跟的數(shù)字只能是0-7（八進(jìn)制字符）之間的一個(gè)。例如：varx=010;//這里相當(dāng)于十進(jìn)制的83.1.4Number類型2.八進(jìn)制與十六進(jìn)制數(shù)十六進(jìn)制的數(shù)需要用數(shù)字0和字母x開頭，后面跟字符只能是0-9或A-F（十六進(jìn)制字符）之間的一個(gè)，大小寫不限。例如：varx=0xA;//這里相當(dāng)于十進(jìn)制的10或varx=0xa;//等同于0xA雖然Number類型可以使用八進(jìn)制或十六進(jìn)制的賦值方式，但是執(zhí)行代碼時(shí)仍然會(huì)將其轉(zhuǎn)換為十進(jìn)制結(jié)果。3.1.4Number類型2.八進(jìn)制與十六進(jìn)制數(shù)【例3-12】八進(jìn)制與十六進(jìn)制的表達(dá)方式

3.1.4Number類型3.浮點(diǎn)數(shù)要定義浮點(diǎn)數(shù)，必須使用小數(shù)點(diǎn)以及小數(shù)點(diǎn)后面至少跟一位數(shù)字。例如：如果浮點(diǎn)數(shù)類型的小數(shù)點(diǎn)前面整數(shù)位為0可以省略。例如：varx=3.14;vary=5.0;varx=.15;//等同于0.153.1.4Number類型3.浮點(diǎn)數(shù)浮點(diǎn)數(shù)可以使用toFixed()方法規(guī)定小數(shù)點(diǎn)后保留幾位數(shù)。其語法格式如下：其中參數(shù)digital換成小數(shù)點(diǎn)后需要保留的位數(shù)即可。例如：toFixed(digital)varx=3.1415926;varresult=x.toFixed(2);//返回值為3.143.1.4Number類型3.浮點(diǎn)數(shù)該方法遵照四舍五入的規(guī)律，即使進(jìn)位后小數(shù)點(diǎn)后面只有0也會(huì)保留指定的位數(shù)。例如：varx=0.9999;varresult=x.toFixed(2);//返回值為1.003.1.4Number類型3.浮點(diǎn)數(shù)需要注意的是，在JavaScript中使用浮點(diǎn)數(shù)進(jìn)行計(jì)算，有時(shí)會(huì)產(chǎn)生誤差。例如：varx=0.7+0.1;alert(x);//返回值會(huì)變成0.7999999999999999，而不是0.8這是由于表達(dá)式使用的是十進(jìn)制數(shù)，但是實(shí)際的計(jì)算是轉(zhuǎn)換成二進(jìn)制數(shù)計(jì)算再轉(zhuǎn)回十進(jìn)制結(jié)果的，在此過程中有時(shí)會(huì)損失精度。此時(shí)使用自定義函數(shù)將兩個(gè)加數(shù)都乘以10進(jìn)行計(jì)算后再除以10還原。3.1.4Number類型3.浮點(diǎn)數(shù)【例3-13】JavaScript浮點(diǎn)數(shù)的簡(jiǎn)單應(yīng)用3.1.4Number類型4.特殊Number值在JavaScript中，Number類型還有一些特殊值，如表所示。3.1.4Number類型4.特殊Number值(1)InfinityInfinity表示無窮大的含義，有正負(fù)之分。當(dāng)數(shù)值超過了JavaScript允許的范圍就會(huì)顯示為Infinity（超過上限）或-Infinity（超過下限）。例如：varx=9e30000;alert(x);//因?yàn)樵摂?shù)字已經(jīng)超出上限，返回值為Infinity3.1.4Number類型4.特殊Number值(1)Infinity在數(shù)字比較大小時(shí)，無論原數(shù)據(jù)值為多少，結(jié)果為Infinity的兩個(gè)數(shù)認(rèn)為相等，而同樣兩個(gè)-Infinity也是相等的。例如：varx1=3e9000;varx2=9e3000;alert(x1==x2);//判斷變量x1與x2是否相等，返回值為true上述代碼中變量x1與x2的實(shí)際數(shù)據(jù)值并不相等，但是由于它們均超出了JavaScript可以接受的數(shù)據(jù)范圍，因此返回值均為Infinity，從而判斷是否相等時(shí)會(huì)返回true（真）。3.1.4Number類型4.特殊Number值(1)Infinity在JavaScript中使用數(shù)字0作為除數(shù)不會(huì)報(bào)錯(cuò)，如果正數(shù)除以0返回值就是Infinity，負(fù)數(shù)除以0返回值為-Infinity，特殊情況0除以0的返回值為NaN（非數(shù)字）。例如：varx1=5/0;//返回值是Infinityvarx2=-5/0;//返回值是-Infinityvarx3=0/0;//返回值是NaN3.1.4Number類型4.特殊Number值(1)InfinityInfinity不可以與其他正常顯示的數(shù)字進(jìn)行數(shù)學(xué)計(jì)算，返回結(jié)果均會(huì)是NaN。例如：varx=Numer.POSITIVE_INFINITY;varresult=x+99;alert(result);//返回值為NaN3.1.4Number類型4.特殊Number值(1)Infinity【例3-14】JavaScript特殊Number值Infinity的應(yīng)用

3.1.4Number類型4.特殊Number值(2)NaNNaN表示的是非數(shù)字（NotaNumber），該數(shù)值用于表示數(shù)據(jù)轉(zhuǎn)換成Number類型失敗的情況，從而無需拋出異常錯(cuò)誤。例如將String類型轉(zhuǎn)換為Number類型。NaN因?yàn)椴皇钦嬲臄?shù)字，不能用于進(jìn)行數(shù)學(xué)計(jì)算。并且即使兩個(gè)數(shù)值均為NaN，它們也并不相等。例如將英文單詞轉(zhuǎn)換為Number類型，就會(huì)導(dǎo)致轉(zhuǎn)換結(jié)果為NaN，具體代碼如下：varx="red";varresult=Number(x);//返回值為NaN，因?yàn)闆]有對(duì)應(yīng)的數(shù)值可以轉(zhuǎn)換3.1.4Number類型4.特殊Number值(2)NaNJavaScript還提供了用于判斷數(shù)據(jù)類型是否為數(shù)值的方法isNaN()，其返回值是布爾值。當(dāng)檢測(cè)的數(shù)據(jù)可以正確轉(zhuǎn)換為Number類型時(shí)返回真（true），其他情況返回假（false）。其語法規(guī)則如下：isNaN(變量名稱)3.1.4Number類型4.特殊Number值(2)NaN例如：varx1="red";varresult1=isNaN(x1);//返回值是假（false）

varx2="999";varresult2=isNaN(x2);//返回值是真（true）3.1.4Number類型4.特殊Number值(2)NaN【例3-15】JavaScript特殊Number值NaN的應(yīng)用3.1.5Boolean類型布爾值（boolean）在很多程序語言中都被用于進(jìn)行條件判斷，其值只有兩種：true（真）或者false（假）。3.1.5Boolean類型布爾類型的值可以直接使用單詞true或false，也可以使用表達(dá)式。例如：varanswer=true;varanswer=false;varanswer=(1>2);其中1>2的表達(dá)式不成立，因此返回結(jié)果為false（假）。3.1.5Boolean類型【例3-16】JavaScriptBoolean類型的簡(jiǎn)單應(yīng)用3.2JavaScript對(duì)象類型3.2.1本地對(duì)象3.2.2內(nèi)置對(duì)象3.2.3宿主對(duì)象3.2JavaScript對(duì)象類型在JavaScript中，對(duì)象類型分為三種：本地對(duì)象、內(nèi)置對(duì)象和宿主對(duì)象。本地對(duì)象（nativeobject）是ECMAScript定義的引用類型；內(nèi)置對(duì)象（built-inobject）指的是無需實(shí)例化可直接使用的對(duì)象，其實(shí)也是特殊的本地對(duì)象；宿主對(duì)象（hostobject）指的是用戶的機(jī)器環(huán)境，包括DOM和BOM。3.2.1本地對(duì)象1.數(shù)組Array2.日期Date3.正則表達(dá)式RegExp

4.對(duì)象Object3.2.1本地對(duì)象1.數(shù)組Array在JavaScript中可以使用數(shù)組（Array）類型在單個(gè)變量中存儲(chǔ)一系列的值。例如：varmobile=newArray();varmobile[0]="蘋果";varmobile[1]="三星";varmobile[2]="華為";數(shù)組是從0開始計(jì)數(shù)的，因此第一個(gè)元素的下標(biāo)是[0]，后面每新增一個(gè)元素下標(biāo)+1。使用Array類型存儲(chǔ)數(shù)組的特點(diǎn)是無需在一開始聲明數(shù)組的具體元素?cái)?shù)量，可以在后續(xù)代碼中陸續(xù)新增數(shù)組元素。3.2.1本地對(duì)象1.數(shù)組Array如果一開始就可以確定數(shù)組的長(zhǎng)度，即其中的元素不需要后續(xù)動(dòng)態(tài)加入，可直接寫成：varmobile=newArray("蘋果","三星","華為");或varmobile=["蘋果","三星","華為"];此時(shí)數(shù)組元素之間使用逗號(hào)隔開。3.2.1本地對(duì)象1.數(shù)組ArrayArray對(duì)象還包含了length屬性，可以用于獲取當(dāng)前數(shù)組的長(zhǎng)度，即數(shù)組中的元素個(gè)數(shù)。如果當(dāng)前數(shù)組中沒有包含元素，則length值為0。例如：varmobile=["蘋果","三星","華為"];varx=mobile.length;//這里x值為3Array對(duì)象還包含了一系列方法用于操作數(shù)組，常用方法如表4-7所示。3.2.1本地對(duì)象1.數(shù)組Array【例3-17】JavaScriptArray對(duì)象的簡(jiǎn)單應(yīng)用

3.2.1本地對(duì)象2.日期Date在JavaScript中使用Date對(duì)象處理時(shí)間日期有關(guān)內(nèi)容。有四種初始化方式，列舉如下：//表示獲取當(dāng)前的日期與時(shí)間newDate();//使用表示日期時(shí)間的字符串定義時(shí)間，例如填入May10,200012:12:00newDate(dateString);//使用從1970年1月1日到指定日期的毫秒數(shù)定義時(shí)間，例如填入1232345newDate(milliseconds);//自定義年、月、日、時(shí)、分、秒和毫秒，時(shí)分秒和毫秒?yún)?shù)缺省情況默認(rèn)為0newDate(year,month,day,hours,minutes,seconds,milliseconds);可以用Date對(duì)象一系列方法分別獲取指定的內(nèi)容，Date對(duì)象的常見方法如表3-6所示。3.2.1本地對(duì)象2.日期Date【例3-18】JavaScriptDate對(duì)象的簡(jiǎn)單應(yīng)用

3.2.1本地對(duì)象3.正則表達(dá)式RegExpRegExp對(duì)象表示正則表達(dá)式（RegularExpression），通常用于檢索文本中是否包含指定的字符串。其語法格式如下：newRegExp(pattern[,attributes])

參數(shù)解釋如下：pattern：該參數(shù)為字符串形式，用于規(guī)定正則表達(dá)式的匹配規(guī)則或填入其他正則表達(dá)式。attributes：該參數(shù)為可選參數(shù)，可包含屬性值g、i或者m，分別表示全局匹配、區(qū)分大小寫匹配與多行匹配。3.2.1本地對(duì)象3.正則表達(dá)式RegExp例如：還有一種簡(jiǎn)寫形式，格式如下：因此前面用于全局檢索數(shù)字0-9的正則表達(dá)式聲明可修改為如下內(nèi)容：varpattern=newRegExp([0-9],g);上述代碼表示聲明了一個(gè)用于全局檢索文本中是否包含數(shù)字0-9之間任意字符的正則表達(dá)式。/pattern/[attribute]varpattern=/[0-9]/g;JavaScript中常用的正則表達(dá)式如表3-7所示。3.2.1本地對(duì)象3.正則表達(dá)式RegExp

在RegExp對(duì)象創(chuàng)建完畢后，有兩種方法可以用于檢索文本，如表所示。3.2.1本地對(duì)象3.正則表達(dá)式RegExp(1)exec()方法的應(yīng)用exec()方法用于檢索文本中匹配正則表達(dá)式的字符串內(nèi)容。其語法格式如下：

例如：RegExpObject.exec(string)該方法如果找到了匹配內(nèi)容，其返回值為存放有檢索結(jié)果的數(shù)組；如果未找到任何匹配內(nèi)容，則返回null值。varpattern=newRegExp("e");//檢索文本中是否包含小寫字母e的正則表達(dá)式varresult1=pattern.exec("Hello");//返回值為e，因?yàn)樽址邪懽帜竐varresult2=pattern.exec("Hello");//返回值為null，因?yàn)樽址罄m(xù)內(nèi)容中不包含小寫字母e3.2.1本地對(duì)象3.正則表達(dá)式RegExp(1)exec()方法的應(yīng)用如果查到內(nèi)容較多，可以使用while循環(huán)語句進(jìn)行檢索。例如：vars="Helloeveryone";//初始字符串varpattern=newRegExp("e");//檢索文本中是否包含小寫字母e的正則表達(dá)式varresult;//用于獲取每次檢索結(jié)果//while循環(huán)while((result=pattern.exec(s))!=null){alert(result);//輸出本次檢索結(jié)果}3.2.1本地對(duì)象3.正則表達(dá)式RegExp(1)exec()方法的應(yīng)用【例3-19】JavaScript正則表達(dá)式exec()方法的簡(jiǎn)單應(yīng)用3.2.1本地對(duì)象3.正則表達(dá)式RegExp(2)test()方法的應(yīng)用

test()方法用于檢測(cè)文本中是否包含指定的正則表達(dá)式內(nèi)容，返回值為布爾值。其語法格式如下：例如：RegExpObject.test(string)varpattern=newRegExp("e");//檢索文本中是否包含小寫字母e的正則表達(dá)式varresult=pattern.test("Hello");//返回值為true，因?yàn)樽址邪懽帜竐3.2.1本地對(duì)象3.正則表達(dá)式RegExp(2)test()方法的應(yīng)用【例3-20】JavaScript正則表達(dá)式test()方法的簡(jiǎn)單應(yīng)用3.2.1本地對(duì)象4.對(duì)象Object在JavaScript中，所有類型都是對(duì)象，例如字符串、數(shù)字、數(shù)組等，這些可以帶有屬性和方法的變量稱為對(duì)象。例如String對(duì)象包含了length屬性用于獲取字符串長(zhǎng)度，也包含了subtring()、indexOf()等方法用于處理字符串。屬性是與對(duì)象相關(guān)的值，方法是對(duì)象可執(zhí)行的動(dòng)作。例如，將學(xué)生作為現(xiàn)實(shí)中的對(duì)象，他具有學(xué)號(hào)、姓名、班級(jí)、專業(yè)等屬性值，也可以具有選課、學(xué)習(xí)和考試等行為動(dòng)作。3.2.1本地對(duì)象4.對(duì)象Object在JavaScript中創(chuàng)建student對(duì)象的寫法如下：varstudent=newObject();="張三";//姓名student.id="2016010212";//學(xué)號(hào)student.major="計(jì)算機(jī)科學(xué)與技術(shù)";//專業(yè)//學(xué)習(xí)方法student.study=function(){alert("開始學(xué)習(xí)");};3.2.1本地對(duì)象4.對(duì)象Object獲取對(duì)象中的指定屬性有兩種方法，一是對(duì)象變量名稱后面加點(diǎn)(.)和屬性名稱（對(duì)象名.屬性名）；二是對(duì)象變量名稱后面使用中括號(hào)和引號(hào)包圍屬性名稱（對(duì)象名["屬性名"]）。仍然以上面的student對(duì)象為例，獲取其中學(xué)生姓名的寫法如下：varresult=;或varresult=student["name"];3.2.1本地對(duì)象4.對(duì)象Object還可以用該方法直接修改對(duì)象中的屬性值，例如將之前的學(xué)生姓名張三換成新內(nèi)容：="李四";alert();//此時(shí)輸出結(jié)果不再是張三，而是修改后的李四。3.2.1本地對(duì)象4.對(duì)象Object【例3-21】JavaScriptObject對(duì)象的簡(jiǎn)單應(yīng)用

3.2.2內(nèi)置對(duì)象1.Gobal對(duì)象2.Math對(duì)象3.2.2內(nèi)置對(duì)象1.Gobal對(duì)象在JavaScript中Gobal對(duì)象又稱為全局對(duì)象，其中包含的屬性和函數(shù)可以用于所有的本地JavaScript對(duì)象。Gobal對(duì)象的全局屬性和方法分別如表3-9和3-10所示。3.2.2內(nèi)置對(duì)象2.Math對(duì)象在JavaScript中Math對(duì)象用于數(shù)學(xué)計(jì)算，無需初始化創(chuàng)建，可以直接使用關(guān)鍵詞Math調(diào)用其所有的屬性和方法。Math對(duì)象的常用屬性和常用方法分別如表3-11和表3-12所示。【例3-22】JavaScriptMath對(duì)象的簡(jiǎn)單應(yīng)用

3.2.3宿主對(duì)象宿主對(duì)象包括HTMLDOM（文檔對(duì)象模型）和BOM（瀏覽器對(duì)象模型）。具體內(nèi)容和用法請(qǐng)參考第5章內(nèi)容。3.3JavaScript類型轉(zhuǎn)換3.3.1轉(zhuǎn)換成字符串3.3.2轉(zhuǎn)換成數(shù)字3.3.3強(qiáng)制類型轉(zhuǎn)換3.3.1轉(zhuǎn)換成字符串在JavaScript中，布爾值類型（Boolean）和數(shù)字類型（Number）這兩種基本數(shù)據(jù)類型均可使用toString()方法把值轉(zhuǎn)換為字符串形式。布爾值類型（Boolean）的toString()方法只能根據(jù)初始值返回true或者false。例如：varx=true;varresult=x.toString();//返回"true"3.3.1轉(zhuǎn)換成字符串而數(shù)字類型（Number）使用toString()方法有兩種模式，分別稱為默認(rèn)模式和基數(shù)模式。在默認(rèn)模式中，toString()不帶參數(shù)直接使用，此時(shí)無論是整數(shù)、小數(shù)或者科學(xué)計(jì)數(shù)法表示的內(nèi)容，都會(huì)顯示為十進(jìn)制的數(shù)值。例如：varx1=99;varx2=99.90;varx3=1.25e8;

varresult1=x1.toString();//返回值為"99"varresult2=x2.toString();//返回值為"99.9"varresult3=x3.to