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

JavaScript與jQuery

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

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

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

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

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

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

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

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

3.1.3String類型5.查找與替換字符串在JavaScript中使用match()或search()方法可以查找匹配正則表達式的字符串內(nèi)容。match()方法的語法格式如下：match(regExp)參數(shù)regExp的位置需要填入一個正則表達式，例如match(/a/g)表示全局查找字母a，后面的小寫字母g是英文單詞gobal的首字母簡寫，表示全局查找。其返回值為符合條件的所有字符串片段。3.1.3String類型5.查找與替換字符串search()方法的語法格式如下：search(regExp)參數(shù)regExp的位置同樣需要填入一個正則表達式。不同之處在于，search()方法的返回值是符合匹配條件的字符串索引值。3.1.3String類型5.查找與替換字符串在JavaScript中使用replace()方法可以替換匹配正則表達式的字符串內(nèi)容。replace()方法的語法格式如下：replace(regExp,replaceText)參數(shù)regExp的位置需要填入一個正則表達式，參數(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中可以對字符串類型的變量使用slice()和substrig()方法截取其中的字符串片段。其中slice()方法用于去掉指定片段，substring()方法用于節(jié)選指定片段。3.1.3String類型6.獲取字符串片段slice()方法語法格式如下：slice(start,end)其中start參數(shù)位置填寫需要刪除的字符串的第一個字符位置，end參數(shù)位置填寫需要刪除字符串的結束位置（不包括該位置上的字符），如果end參數(shù)省略則默認填入字符串長度。如果填入的屬性值為負數(shù)，表示從字符串的最后一個位置開始計算，例如-1表示倒數(shù)第一個字符。3.1.3String類型6.獲取字符串片段substring()方法語法格式如下：substring(start,end)與slice()方法的語法結構類似，其中start參數(shù)位置填寫需要節(jié)選的字符串的第一個字符位置，end參數(shù)位置填寫需要節(jié)選字符串的結束位置（不包括該位置上的字符），同樣如果end參數(shù)省略則默認填入字符串長度。3.1.3String類型6.獲取字符串片段當參數(shù)均為非負數(shù)時，substring()與slice()方法獲取的結果完全一樣。只有參數(shù)值存在負數(shù)情況時，這兩個方法才會有所不同：substring()方法會忽略負數(shù)，直接將其當作0來處理；而slice()方法會用字符串長度加上該負數(shù)數(shù)值，計算出對應的位置。例如：varmsg="happy";//該字符串長度為5位varresult1=msg.substring(1,-1);//返回值為hvarresult2=slice(1,-1);//返回值為app3.1.3String類型6.獲取字符串片段【例3-8】JavaScript獲取字符串片段的簡單應用

3.1.3String類型7.字符串大小寫轉(zhuǎn)換在JavaScript中可以對字符串類型的變量使用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符號表示換行，這種符號稱為轉(zhuǎn)義字符。與C語言、Java語言相似，在JavaScript中String類型也包含了一系列轉(zhuǎn)義字符。具體情況如表所示。3.1.3String類型8.轉(zhuǎn)義字符【例3-10】JavaScript轉(zhuǎn)義字符的簡單應用3.1.4Number類型在JavaScript中使用Number類型表示數(shù)字，其數(shù)字可以是32位以內(nèi)的整數(shù)或64位以內(nèi)的浮點數(shù)。例如：varx=9;vary=3.14;Number類型還支持使用科學計數(shù)法、八進制和十六進制的表示方式。3.1.4Number類型1.科學計數(shù)法對于極大或極小的數(shù)字也可以使用科學記數(shù)法表示，寫法格式如下：上述格式表示數(shù)字后面跟指數(shù)e再緊跟乘以的倍數(shù)，其中數(shù)值可以是整數(shù)或浮點數(shù)，倍數(shù)可以允許為負數(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.科學計數(shù)法【例3-11】JavaScript科學計數(shù)法的簡單應用3.1.4Number類型2.八進制與十六進制數(shù)在JavaScript中，Number類型也可以用于表示八進制或十六進制的數(shù)。八進制的數(shù)需要用數(shù)字0開頭，后面跟的數(shù)字只能是0-7（八進制字符）之間的一個。例如：varx=010;//這里相當于十進制的83.1.4Number類型2.八進制與十六進制數(shù)十六進制的數(shù)需要用數(shù)字0和字母x開頭，后面跟字符只能是0-9或A-F（十六進制字符）之間的一個，大小寫不限。例如：varx=0xA;//這里相當于十進制的10或varx=0xa;//等同于0xA雖然Number類型可以使用八進制或十六進制的賦值方式，但是執(zhí)行代碼時仍然會將其轉(zhuǎn)換為十進制結果。3.1.4Number類型2.八進制與十六進制數(shù)【例3-12】八進制與十六進制的表達方式

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

3.1.4Number類型4.特殊Number值(2)NaNNaN表示的是非數(shù)字（NotaNumber），該數(shù)值用于表示數(shù)據(jù)轉(zhuǎn)換成Number類型失敗的情況，從而無需拋出異常錯誤。例如將String類型轉(zhuǎn)換為Number類型。NaN因為不是真正的數(shù)字，不能用于進行數(shù)學計算。并且即使兩個數(shù)值均為NaN，它們也并不相等。例如將英文單詞轉(zhuǎn)換為Number類型，就會導致轉(zhuǎn)換結果為NaN，具體代碼如下：varx="red";varresult=Number(x);//返回值為NaN，因為沒有對應的數(shù)值可以轉(zhuǎn)換3.1.4Number類型4.特殊Number值(2)NaNJavaScript還提供了用于判斷數(shù)據(jù)類型是否為數(shù)值的方法isNaN()，其返回值是布爾值。當檢測的數(shù)據(jù)可以正確轉(zhuǎn)換為Number類型時返回真（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的應用3.1.5Boolean類型布爾值（boolean）在很多程序語言中都被用于進行條件判斷，其值只有兩種：true（真）或者false（假）。3.1.5Boolean類型布爾類型的值可以直接使用單詞true或false，也可以使用表達式。例如：varanswer=true;varanswer=false;varanswer=(1>2);其中1>2的表達式不成立，因此返回結果為false（假）。3.1.5Boolean類型【例3-16】JavaScriptBoolean類型的簡單應用3.2JavaScript對象類型3.2.1本地對象3.2.2內(nèi)置對象3.2.3宿主對象3.2JavaScript對象類型在JavaScript中，對象類型分為三種：本地對象、內(nèi)置對象和宿主對象。本地對象（nativeobject）是ECMAScript定義的引用類型；內(nèi)置對象（built-inobject）指的是無需實例化可直接使用的對象，其實也是特殊的本地對象；宿主對象（hostobject）指的是用戶的機器環(huán)境，包括DOM和BOM。3.2.1本地對象1.數(shù)組Array2.日期Date3.正則表達式RegExp

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

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

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

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

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

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

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

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

3.2.3宿主對象宿主對象包括HTMLDOM（文檔對象模型）和BOM（瀏覽器對象模型）。具體內(nèi)容和用法請參考第5章內(nèi)容。3.3JavaScript類型轉(zhuǎn)換3.3.1轉(zhuǎn)換成字符串3.3.2轉(zhuǎn)換成數(shù)字3.3.3強制類型轉(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()方法有兩種模式，分別稱為默認模式和基數(shù)模式。在默認模式中，toString()不帶參數(shù)直接使用，此時無論是整數(shù)、小數(shù)或者科學計數(shù)法表示的內(nèi)容，都會顯示為十進制的數(shù)值。例如：varx1=99;varx2=99.90;varx3=1.25e8;

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