JavaScript+jQuery交互式Web前端開發(fā)（第2版） 課件 黑馬 第1-5章 初識(shí)JavaScript-對(duì)象

第1章初識(shí)JavaScript《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

了解JavaScript基本概念，能夠描述JavaScript的用途、由來、組成和特點(diǎn)

了解瀏覽器的組成，能夠描述瀏覽器的特點(diǎn)以及作用

掌握下載和安裝代碼編輯器的方法，能夠獨(dú)立下載和安裝代碼編輯器學(xué)習(xí)目標(biāo)/Target掌握J(rèn)avaScript常用的輸入輸出語句，能夠靈活運(yùn)用prompt()、alert()、

document.write()、console.log()語句

掌握J(rèn)avaScript注釋的使用，能夠合理運(yùn)用單行注釋、多行注釋增強(qiáng)代碼的

可讀性

掌握J(rèn)avaScript代碼引入方式，能夠靈活運(yùn)用行內(nèi)式、內(nèi)部式、外部式的方式

引入JavaScript代碼學(xué)習(xí)目標(biāo)/Target

了解什么是變量，能夠描述變量的概念

掌握變量的命名規(guī)則，能夠根據(jù)變量的命名規(guī)則為變量命名

掌握變量的聲明與賦值，能夠聲明變量并為其賦值章節(jié)概述/SummaryWeb前端開發(fā)必備的技術(shù)包括HTML（HypertextMarkupLanguage，超文本標(biāo)記語言）、CSS（CascadingStyleSheets，串聯(lián)樣式表）和JavaScript。HTML和CSS用于創(chuàng)建美觀且易于理解的網(wǎng)頁布局和頁面樣式，但對(duì)于具有交互性和動(dòng)態(tài)性的網(wǎng)頁，JavaScript是必不可少的。因此，學(xué)習(xí)Web前端開發(fā)并實(shí)現(xiàn)更為復(fù)雜的交互效果和功能不僅需要掌握HTML和CSS的基礎(chǔ)知識(shí)，還需要掌握J(rèn)avaScript技術(shù)。本章將介紹JavaScript基本概念、JavaScript開發(fā)工具、JavaScript基本使用和變量等內(nèi)容，讓讀者對(duì)JavaScript有初步的認(rèn)識(shí)。目錄/Contents1.11.21.3JavaScript基本概念JavaScript開發(fā)工具JavaScript基本使用1.4變量JavaScript基本概念1.1了解JavaScript基本概念，能夠描述JavaScript的用途1.1.1 JavaScript概述

先定一個(gè)小目標(biāo)！JavaScript是Web前端開發(fā)中用到的一門編程語言，最初主要用于開發(fā)交互式的網(wǎng)頁，但隨著技術(shù)的發(fā)展，JavaScript的應(yīng)用范圍已經(jīng)變得更加廣泛，它還可以用來開發(fā)服務(wù)器應(yīng)用、桌面應(yīng)用或者移動(dòng)應(yīng)用。許多JavaScript庫、框架和軟件，如jQuery、Node.js、Vue.js、Electron、微信小程序等，豐富了其生態(tài)。1.1.1 JavaScript概述在網(wǎng)頁中，HTML、CSS和JavaScript分別代表網(wǎng)頁的結(jié)構(gòu)、樣式和行為。HTML、CSS和JavaScript的說明如下表所示。1.1.1 JavaScript概述語言說明HTML決定網(wǎng)頁的結(jié)構(gòu)，相當(dāng)于人的身體CSS決定網(wǎng)頁呈現(xiàn)給用戶的模樣，相當(dāng)于人的衣服、妝容JavaScript實(shí)現(xiàn)業(yè)務(wù)邏輯和頁面控制，決定網(wǎng)頁的行為，相當(dāng)于人的各種動(dòng)作利用JavaScript可以實(shí)現(xiàn)網(wǎng)頁中的許多交互效果，例如輪播圖、選項(xiàng)卡、表單驗(yàn)證等。此外，利用JavaScript還可以實(shí)現(xiàn)網(wǎng)頁從服務(wù)器動(dòng)態(tài)獲取數(shù)據(jù)，例如，用戶在百度搜索引擎網(wǎng)站中進(jìn)行搜索時(shí)，在搜索框中輸入需要搜索的關(guān)鍵詞后，網(wǎng)頁會(huì)通過服務(wù)器智能感知用戶將要搜索的內(nèi)容，服務(wù)器接收到用戶發(fā)出的請(qǐng)求后進(jìn)行相應(yīng)處理，并將感知結(jié)果顯示到網(wǎng)頁中。1.1.1 JavaScript概述了解JavaScript的由來，能夠描述JavaScript的由來1.1.2 JavaScript的由來

先定一個(gè)小目標(biāo)！1995年，網(wǎng)景通信公司（NetscapeCommunicationsCorporation，簡(jiǎn)稱網(wǎng)景公司）的創(chuàng)始人認(rèn)為網(wǎng)頁需要一種“膠水語言”，讓網(wǎng)頁設(shè)計(jì)師和兼職程序員可以很容易地組裝圖片和插件之類的組件，且相關(guān)代碼可以直接編寫在HTML代碼中，于是網(wǎng)景公司招募了工程師，為網(wǎng)景導(dǎo)航者（NetscapeNavigator）瀏覽器開發(fā)了JavaScript語言。1.1.2 JavaScript的由來1996年，網(wǎng)景公司在網(wǎng)景導(dǎo)航者2.0瀏覽器中正式內(nèi)置了JavaScript語言。其后，微軟公司（MicrosoftCorporation）開發(fā)了一種與JavaScript語言相近的JScript語言，內(nèi)置于InternetExplorer3.0瀏覽器，與網(wǎng)景導(dǎo)航者瀏覽器競(jìng)爭(zhēng)。后來，網(wǎng)景公司面臨喪失JavaScript語言的主導(dǎo)權(quán)的局面，決定將JavaScript語言提交給Ecma國際（EcmaInternational，前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)，即EuropeanComputerManufacturersAssociation，現(xiàn)名稱并非為首字母縮略詞），希望JavaScript能夠成為國際標(biāo)準(zhǔn)。1.1.2 JavaScript的由來Ecma國際是一個(gè)國際性會(huì)員制的信息和電信標(biāo)準(zhǔn)組織，該組織發(fā)布了ECMA-262標(biāo)準(zhǔn)文件，規(guī)定了瀏覽器腳本語言的標(biāo)準(zhǔn)，并將這種語言稱為ECMAScript。JavaScript和JScript可以理解為ECMAScript的實(shí)現(xiàn)和擴(kuò)展。1.1.2 JavaScript的由來1.1.2 JavaScript的由來需要說明的是，JavaScript語言和Java語言名稱比較相似，這是因?yàn)榫W(wǎng)景公司在為JavaScript命名時(shí)，考慮到該公司與Java語言的開發(fā)商Sun公司（2009年被Oracle公司收購）的合作關(guān)系。然而，JavaScript和Java只是名字相似，本質(zhì)上是兩種不同的語言。了解JavaScript的組成，能夠描述JavaScript的組成1.1.3 JavaScript的組成

先定一個(gè)小目標(biāo)！1.1.3 JavaScript的組成JavaScript是由ECMAScript、DOM、BOM這3部分組成的。JavaScript的組成部分如下圖所示。1.1.3 JavaScript的組成下面對(duì)JavaScript的組成部分進(jìn)行介紹。ECMAScript：規(guī)定了JavaScript的編程語法和基礎(chǔ)核心內(nèi)容，是瀏覽器廠商共同遵守的一套JavaScript語法工業(yè)標(biāo)準(zhǔn)。DOM（DocumentObjectModel）：文檔對(duì)象模型，是W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）組織制定的用于處理HTML文檔和XML（eXtensibleMarkupLanguage，可擴(kuò)展標(biāo)記語言）文檔的編程接口，它提供了對(duì)文檔的結(jié)構(gòu)化表述，并定義了一種方式使程序可以對(duì)該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)、樣式和行為。BOM（BrowserObjectModel）：瀏覽器對(duì)象模型，是一套編程接口，用于對(duì)瀏覽器進(jìn)行操作，如刷新頁面、彈出警告框、控制頁面跳轉(zhuǎn)等。了解JavaScript的特點(diǎn)，能夠描述JavaScript的特點(diǎn)1.1.4 JavaScript的特點(diǎn)

先定一個(gè)小目標(biāo)！010203123JavaScript是腳本語言中的一種，它的語法規(guī)則比較松散，使開發(fā)人員能夠快速編寫程序。使用腳本語言編寫的代碼可以直接由解釋器執(zhí)行，不需要生成獨(dú)立的可執(zhí)行文件。由于腳本語言只在被調(diào)用時(shí)自動(dòng)進(jìn)行解釋或編譯，所以具有簡(jiǎn)單易用的特點(diǎn)。簡(jiǎn)單易用JavaScript不依賴特定的操作系統(tǒng)，僅需要瀏覽器的支持。無論用戶使用的操作系統(tǒng)是Windows、Linux、macOS還是Android、iOS，只要這些操作系統(tǒng)中安裝了支持JavaScript的瀏覽器，就可以運(yùn)行JavaScript?？缙脚_(tái)面向?qū)ο笫擒浖_發(fā)中的一種重要的編程思想。JavaScript為面向?qū)ο筇峁┝酥С?，使開發(fā)者能夠通過面向?qū)ο笏枷脒M(jìn)行編程。許多優(yōu)秀的庫和框架的誕生都離不開面向?qū)ο笏枷?。面向?qū)ο笫笿avaScript開發(fā)變得快捷、高效，還可以降低開發(fā)成本。面向?qū)ο?.1.4 JavaScript的特點(diǎn)JavaScript開發(fā)工具1.2了解瀏覽器，能夠描述瀏覽器的特點(diǎn)以及作用

先定一個(gè)小目標(biāo)！1.2.1瀏覽器1.2.1瀏覽器瀏覽器是用戶訪問互聯(lián)網(wǎng)中各種網(wǎng)站所必備的工具，常見的瀏覽器及其特點(diǎn)如下表所示。瀏覽器廠商特點(diǎn)Internet

Explorer微軟公司W(wǎng)indows操作系統(tǒng)的內(nèi)置瀏覽器Edge微軟公司W(wǎng)indows10操作系統(tǒng)新增的瀏覽器，響應(yīng)速度更快、功能更多Chrome谷歌公司目前市場(chǎng)占有率較高的瀏覽器，具有簡(jiǎn)潔、快速的特點(diǎn)FirefoxMozilla公司由Mozilla開發(fā)的網(wǎng)頁瀏覽器，安全性高、占用系統(tǒng)資源小Safari蘋果公司主要應(yīng)用在iOS、macOS操作系統(tǒng)中瀏覽器一般由渲染引擎和JavaScript引擎組成。渲染引擎負(fù)責(zé)解析HTML代碼與CSS代碼，用于實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)和樣式的渲染；JavaScript引擎是JavaScript語言的解釋器，用于讀取網(wǎng)頁中的JavaScript代碼并運(yùn)行。Chrome瀏覽器使用的渲染引擎是Blink，使用的JavaScript引擎是V8。1.2.1瀏覽器1.2.1瀏覽器在Chrome瀏覽器控制臺(tái)中運(yùn)行代碼多學(xué)一招在Chrome瀏覽器的控制臺(tái)中可以直接輸入JavaScript代碼并運(yùn)行。下面演示如何在Chrome瀏覽器的控制臺(tái)中使用alert()語句實(shí)現(xiàn)在頁面中彈出一個(gè)警告框。其中，alert()語句是在1.3.3小節(jié)講解的內(nèi)容，此處為了演示操作，提前使用了該語句。1.2.1瀏覽器多學(xué)一招首先在Chrome瀏覽器中按“F12”鍵，或在網(wǎng)頁的空白區(qū)域右擊，并在彈出的快捷菜單中選擇“檢查”，啟動(dòng)開發(fā)者工具。然后切換到“Console”（控制臺(tái)）面板，可以看到一個(gè)閃爍的光標(biāo)，此時(shí)可以在控制臺(tái)中輸入代碼。如下圖所示。1.2.1瀏覽器多學(xué)一招按“Enter”鍵，即可看到JavaScript代碼的運(yùn)行結(jié)果，如下圖所示。1.2.1瀏覽器多學(xué)一招另外，在控制臺(tái)中還可以通過“Ctrl+鼠標(biāo)滾輪”放大或縮小字體，通過“Shift+Enter”快捷鍵在輸入的代碼中換行。掌握下載和安裝代碼編輯器的方法，能夠獨(dú)立下載和安裝代碼編輯器

先定一個(gè)小目標(biāo)！1.2.2代碼編輯器1.2.2代碼編輯器“工欲善其事，必先利其器?！币豢顑?yōu)秀的代碼編輯器能夠極大地提高程序的開發(fā)效率。常見的JavaScript代碼編輯器有VisualStudioCode、SublimeText、HBuilder等。VisualStudioCode（簡(jiǎn)稱VSCode）是由微軟公司推出的一款免費(fèi)、開源的代碼編輯器。VisualStudioCode代碼編輯器具有如下特點(diǎn)。1.2.2代碼編輯器輕巧快速，占用系統(tǒng)資源較少。具備代碼智能補(bǔ)全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能?？缙脚_(tái)，可用于Windows、Linux和macOS操作系統(tǒng)。主題界面設(shè)計(jì)人性化。例如，可以快速查找文件、分屏顯示代碼、自定義主題顏色、快速查看最近打開的項(xiàng)目文件，以及查看項(xiàng)目文件結(jié)構(gòu)等。提供豐富的擴(kuò)展，用戶可以根據(jù)需要自行下載和安裝擴(kuò)展，以增強(qiáng)代碼編輯器的功能。打開瀏覽器并訪問VisualStudioCode官方網(wǎng)站，如下圖所示。1.下載和安裝VisualStudioCode代碼編輯器1.2.2代碼編輯器在VisualStudioCode官方網(wǎng)站頁面中，單擊“DownloadforWindows”按鈕可以下載Windows操作系統(tǒng)的VisualStudioCode安裝包。如需下載其他操作系統(tǒng)的VisualStudioCode安裝包，單擊“”按鈕，即可看到其他操作系統(tǒng)版本的下載選項(xiàng)，如下圖所示。1.2.2代碼編輯器VisualStudioCode安裝包下載成功后，在下載目錄中找到該安裝包，雙擊啟動(dòng)安裝程序，按照程序的安裝向?qū)崾静僮?，直到安裝完成。1.2.2代碼編輯器VisualStudioCode安裝成功后，啟動(dòng)該編輯器，即可進(jìn)入VisualStudioCode初始界面，如下圖所示。1.2.2代碼編輯器為了提高VisualStudioCode代碼編輯器的易用性，使其界面和提示信息顯示為中文，需要安裝中文語言擴(kuò)展。單擊VisualStudioCode初始界面左側(cè)的第5個(gè)按鈕“”，進(jìn)入擴(kuò)展界面，在該界面的搜索框中輸入關(guān)鍵詞“Chinese”找到中文語言擴(kuò)展，單擊“Install”按鈕進(jìn)行安裝即可。2.安裝中文語言插件1.2.2代碼編輯器安裝中文語言擴(kuò)展界面如下圖所示。2.安裝中文語言插件1.2.2代碼編輯器1.2.2代碼編輯器需要說明的是，中文語言擴(kuò)展安裝成功后，需要重新啟動(dòng)VisualStudioCode代碼編輯器，該擴(kuò)展才會(huì)生效。LiveServer擴(kuò)展用于搭建具有實(shí)時(shí)重新加載功能的本地服務(wù)器，可以實(shí)現(xiàn)保存代碼后瀏覽器自動(dòng)同步刷新，即時(shí)查看網(wǎng)頁效果。單擊VisualStudioCode初始界面左側(cè)的第5個(gè)圖標(biāo)按鈕“”進(jìn)入擴(kuò)展界面，在該界面的搜索框中輸入關(guān)鍵詞“LiveServer”找到LiveServer擴(kuò)展，單擊“安裝”按鈕進(jìn)行安裝即可。3.安裝LiveServer擴(kuò)展1.2.2代碼編輯器安裝LiveServer擴(kuò)展界面如下圖所示。3.安裝LiveServer擴(kuò)展1.2.2代碼編輯器安裝LiveServer擴(kuò)展后，可在編寫好的網(wǎng)頁文件中右擊，在彈出的快捷菜單中選擇“OpenwithLiveServer”調(diào)用瀏覽器打開網(wǎng)頁文件。1.2.2代碼編輯器在開發(fā)項(xiàng)目時(shí)，需要?jiǎng)?chuàng)建項(xiàng)目文件夾，以保存項(xiàng)目所需的文件。下面在本地創(chuàng)建一個(gè)文件夾Chapter01，創(chuàng)建好文件夾后，首先在VisualStudioCode代碼編輯器的菜單欄中單擊“文件”，然后單擊“打開文件夾...”并選擇Chapter01文件夾。打開文件夾后的界面如下圖所示。4.創(chuàng)建項(xiàng)目文件夾1.2.2代碼編輯器JavaScript基本使用1.3掌握J(rèn)avaScript初體驗(yàn)，能夠在VisualStudioCode代碼編輯器中編寫一段簡(jiǎn)單的JavaScript代碼

先定一個(gè)小目標(biāo)！1.3.1JavaScript初體驗(yàn)1.3.1JavaScript初體驗(yàn)下面將通過一個(gè)案例演示如何在VisualStudioCode代碼編輯器中編寫一段簡(jiǎn)單的JavaScript代碼。本案例的需求是打開網(wǎng)頁時(shí)自動(dòng)彈出一個(gè)警告框，警告框中的提示內(nèi)容為“鍥而不舍，金石可鏤”。編寫完JavaScript代碼后，按“Ctrl+S”快捷鍵保存代碼，然后右擊VisualStudioCode代碼編輯器中的Example1.html文件，選擇“OpenwithLiveServer”，就會(huì)自動(dòng)通過瀏覽器打開Example1.html文件。1.3.1JavaScript初體驗(yàn)掌握J(rèn)avaScript代碼引入方式，能夠靈活運(yùn)用行內(nèi)式、內(nèi)部式、外部式的方式引入JavaScript代碼1.3.2JavaScript代碼引入方式

先定一個(gè)小目標(biāo)！1.3.2JavaScript代碼引入方式在網(wǎng)頁中編寫JavaScript代碼時(shí)，有3種引入JavaScript代碼的方式，分別是行內(nèi)式、內(nèi)部式和外部式，下面分別對(duì)這3種引入方式進(jìn)行講解。行內(nèi)式是將JavaScript代碼作為HTML標(biāo)簽的屬性值使用。例如，在打開網(wǎng)頁時(shí)自動(dòng)彈出一個(gè)警告框，警告框中的提示內(nèi)容為“通過行內(nèi)式引入JavaScript代碼”，示例代碼如下。1.行內(nèi)式1.3.2JavaScript代碼引入方式<bodyonload="alert('通過行內(nèi)式引入JavaScript代碼');"></body>在上述示例代碼中，<body>標(biāo)簽的onload屬性表示頁面加載事件，用于在網(wǎng)頁打開時(shí)自動(dòng)執(zhí)行JavaScript代碼，該屬性的值為行內(nèi)式JavaScript代碼。需要說明的是，使用行內(nèi)式不適合在HTML標(biāo)簽中書寫大量的JavaScript代碼，這是因?yàn)樾袃?nèi)式代碼與HTML標(biāo)簽混合在一起，不利于代碼維護(hù)。1.3.2JavaScript代碼引入方式內(nèi)部式將JavaScript代碼寫在<script>標(biāo)簽中。<script>標(biāo)簽可以寫在<head>標(biāo)簽或<body>標(biāo)簽中。例如，在打開網(wǎng)頁時(shí)自動(dòng)彈出一個(gè)警告框，警告框中的提示內(nèi)容為“通過內(nèi)部式引入JavaScript代碼”，示例代碼如下。2.內(nèi)部式1.3.2JavaScript代碼引入方式<body>

<script>

alert('通過內(nèi)部式引入JavaScript代碼');

</script></body>由于通過內(nèi)部式可以將多行JavaScript代碼寫在<script>標(biāo)簽中，相比于行內(nèi)式，使用內(nèi)部式更方便閱讀代碼，所以內(nèi)部式是引入JavaScript代碼的常用方式之一。1.3.2JavaScript代碼引入方式另外，<script>標(biāo)簽有一個(gè)type屬性，該屬性表示腳本類型。由于在HTML5中type屬性的默認(rèn)值為text/javascript（表示JavaScript），所以在使用HTML5時(shí)可以省略type屬性。1.3.2JavaScript代碼引入方式外部式將JavaScript代碼單獨(dú)寫在一個(gè)文件中（一般使用“.js”作為該文件的擴(kuò)展名），然后在HTML中通過<script>標(biāo)簽引入該文件。外部式適合在JavaScript代碼量較多的情況下使用。例如，創(chuàng)建一個(gè)test.js文件，在該文件中編寫如下代碼。3.外部式1.3.2JavaScript代碼引入方式alert('通過外部式引入JavaScript代碼');在HTML文件中使用外部式引入JavaScript代碼，示例代碼如下。<body>

<scriptsrc="test.js"></script></body>需要注意的是，在使用外部式時(shí)，<script>標(biāo)簽內(nèi)不可以編寫JavaScript代碼。以上分別介紹了引入JavaScript代碼的3種方式。在實(shí)際開發(fā)中，提倡結(jié)構(gòu)、樣式、行為的分離，即分離HTML、CSS、JavaScript這3部分代碼，這樣可以提高代碼的可讀性和可維護(hù)性。當(dāng)需要編寫大量的、邏輯復(fù)雜的、具有特定功能的JavaScript代碼時(shí)，推薦使用外部式。1.3.2JavaScript代碼引入方式010203123使用外部式JavaScript代碼存在于獨(dú)立文件中，有利于修改和維護(hù)，而使用內(nèi)部式會(huì)導(dǎo)致HTML代碼與JavaScript代碼混合在一起。使用外部式可以通過瀏覽器緩存提高響應(yīng)速度。例如，在多個(gè)頁面中引入相同的JavaScript文件時(shí)，打開第1個(gè)頁面后，瀏覽器會(huì)將JavaScript文件緩存下來，下次打開其他頁面時(shí)就不用重新下載該文件。使用外部式有利于HTML頁面代碼結(jié)構(gòu)化，可以把大量的JavaScript代碼分離到HTML頁面外，這樣既美觀，又方便文件級(jí)別的代碼復(fù)用。1.3.2JavaScript代碼引入方式外鏈?zhǔn)较啾惹度胧?，具有以?點(diǎn)優(yōu)勢(shì)。另外，瀏覽器運(yùn)行JavaScript代碼時(shí)，無論使用的是內(nèi)部式還是外部式，頁面的加載和渲染都會(huì)暫停，等待腳本執(zhí)行完成后才會(huì)繼續(xù)。為了盡可能減少對(duì)整個(gè)頁面的影響，推薦將不需要提前運(yùn)行的JavaScript代碼所在的<script>標(biāo)簽放在HTML文檔的底部。1.3.2JavaScript代碼引入方式JavaScript異步加載多學(xué)一招使用外部式時(shí)，為了減少JavaScript加載過程對(duì)頁面造成的影響，可以使用HTML5為<script>標(biāo)簽新增的兩個(gè)可選屬性async和defer，實(shí)現(xiàn)異步加載。實(shí)現(xiàn)異步加載后，即使JavaScript文件下載失敗，也不會(huì)阻塞后面的JavaScript代碼運(yùn)行。async屬性用于異步加載，即先下載文件，不阻塞其他代碼運(yùn)行，下載完成后再運(yùn)行，示例代碼如下。1.3.2JavaScript代碼引入方式<scriptsrc="file.js"async></script>defer屬性用于延后執(zhí)行，即先下載文件，不阻塞其他代碼運(yùn)行，直到網(wǎng)頁加載完成后再運(yùn)行，示例代碼如下。<scriptsrc="file.js"defer></script>掌握J(rèn)avaScript常用的輸入輸出語句，能夠靈活運(yùn)用prompt()、alert()、document.write()、console.log()語句1.3.3

JavaScript常用的輸入輸出語句

先定一個(gè)小目標(biāo)！在實(shí)際開發(fā)中，為了方便數(shù)據(jù)的輸入和輸出，JavaScript提供了輸入輸出語句。常用的輸入輸出語句如下表所示。1.3.3

JavaScript常用的輸入輸出語句類型語句作用輸入prompt()在網(wǎng)頁中彈出輸入框輸出alert()在網(wǎng)頁中彈出警告框document.write()在網(wǎng)頁中輸出內(nèi)容console.log()在控制臺(tái)中輸出內(nèi)容使用prompt()語句實(shí)現(xiàn)在網(wǎng)頁中彈出一個(gè)帶有提示信息的輸入框，示例代碼如下。1.3.3

JavaScript常用的輸入輸出語句1.prompt()語句prompt('請(qǐng)輸入手機(jī)號(hào)：');使用alert()語句實(shí)現(xiàn)在網(wǎng)頁中彈出一個(gè)警告框，示例代碼如下。1.3.3

JavaScript常用的輸入輸出語句2.alert()語句alert('這是一個(gè)警告框');使用document.write()語句時(shí)，如果輸出內(nèi)容中含有HTML標(biāo)簽，則輸出內(nèi)容會(huì)被瀏覽器解析。下面使用document.write()語句在頁面中輸出“誰知盤中餐，粒粒皆辛苦?！保纠a如下。1.3.3

JavaScript常用的輸入輸出語句3.document.write()語句document.write('誰知盤中餐，粒粒皆辛苦。');使用console.log()語句在控制臺(tái)中輸出“一年之計(jì)在于春，一日之計(jì)在于晨。”，示例代碼如下。1.3.3

JavaScript常用的輸入輸出語句4.console.log()語句console.log('一年之計(jì)在于春，一日之計(jì)在于晨。');如果輸出的內(nèi)容中包含JavaScript結(jié)束標(biāo)簽，則會(huì)導(dǎo)致代碼提前結(jié)束。若要解決這個(gè)問題，需要使用“\”對(duì)結(jié)束標(biāo)簽的“/”進(jìn)行轉(zhuǎn)義，即使用“<\/script>”，示例代碼如下。1.3.3

JavaScript常用的輸入輸出語句輸出內(nèi)容包含JavaScript結(jié)束標(biāo)簽的情況腳下留心document.write('<script>alert(1);<\/script>');運(yùn)行上述示例代碼后，頁面中會(huì)彈出一個(gè)警告框。如果沒有使用“\”對(duì)結(jié)束標(biāo)簽進(jìn)行轉(zhuǎn)義，則</script>會(huì)被當(dāng)成結(jié)束標(biāo)簽，使得頁面不會(huì)彈出警告框，程序會(huì)報(bào)錯(cuò)。掌握J(rèn)avaScript注釋的使用，能夠合理運(yùn)用單行注釋、多行注釋增強(qiáng)代碼的可讀性

先定一個(gè)小目標(biāo)！1.3.4

JavaScript注釋注釋用于對(duì)代碼進(jìn)行解釋和說明，其目的是讓代碼閱讀者能夠更加輕松地了解代碼的設(shè)計(jì)邏輯、用途等。在實(shí)際開發(fā)中，為了提高代碼的可讀性、方便代碼的維護(hù)和升級(jí)，可以在編寫JavaScript代碼時(shí)添加注釋。注釋在程序解析時(shí)會(huì)被JavaScript解釋器忽略。1.3.4

JavaScript注釋單行注釋以“//”開始，到該行結(jié)束之前的內(nèi)容都是注釋。下面通過代碼演示單行注釋的使用。1.單行注釋prompt('請(qǐng)輸入用戶名：'); //提示用戶輸入用戶名上述示例代碼中，“//”和后面的“提示用戶輸入用戶名”是一條單行注釋，運(yùn)行代碼后這部分內(nèi)容不會(huì)在頁面中顯示。1.3.4

JavaScript注釋多行注釋以“/*”開始，以“*/”結(jié)束。在多行注釋中可以嵌套單行注釋，但不可以嵌套多行注釋。下面通過代碼演示多行注釋的使用。2.多行注釋/*

prompt('請(qǐng)輸入用戶名：');*/1.3.4

JavaScript注釋上述示例代碼中，從“/*”開始到“*/”結(jié)束的內(nèi)容就是多行注釋。在VisualStudioCode代碼編輯器中，可以使用快捷鍵對(duì)當(dāng)前選中的行添加注釋或取消注釋，單行注釋使用快捷鍵“Ctrl+/”，多行注釋使用快捷鍵“Shift+Alt+A”。1.3.4

JavaScript注釋變量1.4了解什么是變量，能夠描述變量的概念1.4.1

什么是變量

先定一個(gè)小目標(biāo)！變量是指程序在內(nèi)存中申請(qǐng)的一塊用來存放數(shù)據(jù)的空間，用于存儲(chǔ)程序運(yùn)行過程中產(chǎn)生的臨時(shí)數(shù)據(jù)。變量由變量名和變量值組成，通過變量名可以訪問變量值。1.4.1

什么是變量1.4.1

什么是變量假設(shè)把內(nèi)存想象成一列火車，變量相當(dāng)于火車的車廂，變量名相當(dāng)于火車座車廂的座位號(hào)，變量值相當(dāng)于乘客。乘務(wù)員通過火車車廂的座位號(hào)就可以找到對(duì)應(yīng)的乘客。例如，程序在內(nèi)存中保存名為seat01、seat02和seat03的3個(gè)變量，變量值分別為小明、小智和小華，如下圖所示。掌握變量的命名規(guī)則，能夠根據(jù)變量的命名規(guī)則為變量命名1.4.2

變量的命名規(guī)則

先定一個(gè)小目標(biāo)！在程序中，使用規(guī)范的變量名有助于代碼閱讀者更好地理解和閱讀代碼。在JavaScript中，變量的命名需要遵循相關(guān)規(guī)則，從而避免代碼編寫出錯(cuò)。1.4.2

變量的命名規(guī)則1.4.2

變量的命名規(guī)則JavaScript中變量的命名規(guī)則如下。不能以數(shù)字開頭，且不能包含+、-等運(yùn)算符，如01user、02-user是非法的變量名。嚴(yán)格區(qū)分大小寫，如apple和Apple是兩個(gè)不相同的變量名。不能使用JavaScript中的關(guān)鍵字命名。關(guān)鍵字是指在JavaScript中被事先定義并賦予特殊含義的單詞，如if、this就是JavaScript中的關(guān)鍵字。1.4.2

變量的命名規(guī)則為了提高代碼的可讀性，在對(duì)變量命名時(shí)應(yīng)遵循以下建議。使用字母、下畫線或美元符號(hào)（$）命名，如score、set_name、$a、user01。盡量做到“見其名知其義”，如age表示年齡、sex表示性別、num表示數(shù)字等。用下畫線分隔多個(gè)單詞，如show_message；或采用駝峰命名法，變量的第1個(gè)單詞首字母小寫，后面的單詞首字母大寫，如leftHand、myFirstName等。需要說明的是，只要程序不報(bào)錯(cuò)，其他字符（如中文字符）也能作為變量名使用，但是不推薦這種命名方式。1.4.2

變量的命名規(guī)則JavaScript中常見的關(guān)鍵字多學(xué)一招在JavaScript中，關(guān)鍵字分為保留關(guān)鍵字和未來保留關(guān)鍵字。保留關(guān)鍵字是指目前已經(jīng)生效的關(guān)鍵字。常見的保留關(guān)鍵字如下表所示。1.4.2

變量的命名規(guī)則breakcasecatchclassconstcontinuedebuggerdefaultdeletedoelseexportextendsfinallyforfunctionifimportininstanceofnewreturnsuperswitchthisthrowtrytypeofvarvoidwhilewithyieldenumlet—多學(xué)一招未來保留關(guān)鍵字是指ECMAScript規(guī)范中預(yù)留的關(guān)鍵字，目前它們沒有特殊的作用，但是在未來的某個(gè)時(shí)間可能會(huì)具有一定的作用。未來保留關(guān)鍵字如下表所示。1.4.2

變量的命名規(guī)則implementspackagepublicinterfaceprivatestaticprotected——在命名變量時(shí)，不建議使用上表中列舉的未來保留關(guān)鍵字，以免未來它們轉(zhuǎn)換為保留關(guān)鍵字時(shí)程序出錯(cuò)。掌握變量的聲明與賦值，能夠聲明變量并為其賦值1.4.3

變量的聲明與賦值

先定一個(gè)小目標(biāo)！在程序中，經(jīng)常需要使用變量來保存數(shù)據(jù)。例如，將兩個(gè)數(shù)字相乘的結(jié)果保存到變量中，以便在后面的計(jì)算中使用。在使用變量時(shí)，需要先聲明變量，類似于坐火車時(shí)需要先預(yù)定火車票。聲明變量后，就可以為變量賦值，從而完成數(shù)據(jù)的存儲(chǔ)。1.4.3

變量的聲明與賦值JavaScript中通常使用var關(guān)鍵字聲明變量，聲明變量后，變量值默認(rèn)會(huì)被設(shè)定為undefined，表示未定義。如果需要使用變量保存具體的值就需要在聲明變量后為其賦值。先聲明變量后賦值的示例代碼如下。1.先聲明變量后賦值//聲明變量varusername;

//聲明一個(gè)名稱為username的變量varage,sex,height;

//同時(shí)聲明3個(gè)變量//為變量賦值username='小智';

//為變量賦值'小智'age=20;

//為變量賦值20sex='男';

//為變量賦值'男'height=180;

//為變量賦值1801.4.3

變量的聲明與賦值當(dāng)變量的值是數(shù)字型數(shù)據(jù)時(shí)，不需要將其寫在單引號(hào)中，如果將數(shù)字型數(shù)據(jù)寫到單引號(hào)中，則表示該數(shù)據(jù)為字符串型數(shù)據(jù)，而不是數(shù)字型數(shù)據(jù)。如果想要查看變量的值，則可以使用console.log()語句將變量的值輸出到控制臺(tái)。console.log(username); //輸出變量username的值console.log(age); //輸出變量age的值console.log(sex); //輸出變量sex的值console.log(height); //輸出變量height的值1.4.3

變量的聲明與賦值1.4.3

變量的聲明與賦值ECMAScript6.0新增了let關(guān)鍵字，用于聲明變量，它的用法類似于var，但是let所聲明的變量只在它所在的塊級(jí)作用域內(nèi)有效。1.4.3

變量的聲明與賦值在聲明變量的同時(shí)為變量賦值，這個(gè)過程又稱為定義變量或初始化變量，示例代碼如下。2.聲明變量的同時(shí)并賦值varusername='小智'; //聲明username變量并賦值為'小智'varage=20; //聲明age變量并賦值為20varsex='男'; //聲明sex變量并賦值為'男'varheight=180;

//聲明height變量并賦值為1801.4.3

變量的聲明與賦值使用變量的語法細(xì)節(jié)多學(xué)一招在JavaScript中使用變量時(shí)，還有一些語法細(xì)節(jié)，具體介紹如下。1.4.3

變量的聲明與賦值（1）更新變量的值當(dāng)聲明一個(gè)變量并賦值后，如果重新為該變量賦值，則原來的值會(huì)被覆蓋，示例代碼如下。varage=20;console.log(age); //輸出結(jié)果為：20age=22; //更新變量的值console.log(age); //輸出結(jié)果為：22多學(xué)一招1.4.3

變量的聲明與賦值（2）同時(shí)聲明多個(gè)變量在var關(guān)鍵字后面可以同時(shí)聲明多個(gè)變量，多個(gè)變量名之間使用英文逗號(hào)隔開，示例代碼如下。//同時(shí)聲明多個(gè)變量，沒有賦值varusername,password,phone;//同時(shí)聲明多個(gè)變量，并賦值varusername='小智',password='123456',phone=;如果只聲明變量沒有賦值，則輸出結(jié)果為undefined。如果不聲明變量，直接輸出變量的值，則程序會(huì)報(bào)錯(cuò)。掌握使用變量保存商品信息的案例，能夠編寫代碼實(shí)現(xiàn)案例1.4.4

【案例】使用變量保存商品信息

先定一個(gè)小目標(biāo)！下面將通過一個(gè)案例演示如何使用變量保存商品信息。其中，商品名稱為襯衫，商品顏色為白色，商品價(jià)格為50，商品尺寸為均碼。1.4.4

【案例】使用變量保存商品信息掌握使用變量保存用戶輸入的值的案例，能夠編寫代碼實(shí)現(xiàn)案例1.4.5

【案例】使用變量保存用戶輸入的值

先定一個(gè)小目標(biāo)！在前面的小節(jié)中講解了使用prompt()語句可以在頁面中彈出一個(gè)輸入框，提示用戶輸入內(nèi)容。當(dāng)用戶輸入內(nèi)容后，使用變量就可以保存用戶輸入的內(nèi)容。下面演示如何使用變量保存用戶輸入的值。聲明一個(gè)email變量，當(dāng)用戶打開頁面時(shí)提示用戶輸入郵箱，用戶輸入郵箱并單擊“確認(rèn)”按鈕后，頁面將顯示用戶的郵箱。1.4.5

【案例】使用變量保存用戶輸入的值如果在頁面中輸入“123456@”并單擊“確定”按鈕后，頁面的顯示信息如下圖所示。1.4.5

【案例】使用變量保存用戶輸入的值掌握交換兩個(gè)變量的值的案例，能夠編寫代碼實(shí)現(xiàn)案例1.4.6

【案例】交換兩個(gè)變量的值

先定一個(gè)小目標(biāo)！學(xué)習(xí)了JavaScript的變量后，下面通過一個(gè)案例來練習(xí)變量的使用。本案例將實(shí)現(xiàn)交換兩個(gè)變量的值。首先定義兩個(gè)變量apple1和apple2，其中，變量apple1的值為紅蘋果，變量apple2的值為青蘋果，然后定義第3個(gè)變量temp來保存臨時(shí)數(shù)據(jù)，用于實(shí)現(xiàn)紅蘋果和青蘋果的交換。1.4.6

【案例】交換兩個(gè)變量的值在實(shí)現(xiàn)紅蘋果和青蘋果交換的過程中，我們可以想象成左手拿著紅蘋果（apple1），右手拿著青蘋果（apple2），前面有一張桌子（temp）。為了將左手的紅蘋果和右手的青蘋果交換，首先需要將左手的紅蘋果放到桌子上，然后將右手的青蘋果給左手，最后右手再從桌子上拿起紅蘋果，這樣就完成了交換。下面編寫代碼實(shí)現(xiàn)紅蘋果和青蘋果的交換。1.4.6

【案例】交換兩個(gè)變量的值1.4.6

【案例】交換兩個(gè)變量的值本章小結(jié)本章首先介紹了JavaScript基本概念，包括JavaScript概述，JavaScript的由來、組成和特點(diǎn)，其次介紹了JavaScript開發(fā)工具的相關(guān)內(nèi)容，然后講解了JavaScript基本使用，包括JavaScript代碼引入方式、常用的輸入輸出語句及注釋，最后講解了變量，包括變量的概念、命名規(guī)則、聲明與賦值，并通過案例演示變量的基本使用。本章小結(jié)第2章JavaScript基礎(chǔ)《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

了解數(shù)據(jù)類型的分類，能夠描述JavaScript中的基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型

掌握常用的基本數(shù)據(jù)類型，能夠根據(jù)實(shí)際需求定義基本數(shù)據(jù)類型的變量

掌握數(shù)據(jù)類型轉(zhuǎn)換，能夠根據(jù)實(shí)際需求將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)、數(shù)字型數(shù)據(jù)

或字符串型數(shù)據(jù)

掌握運(yùn)算符的使用，能夠靈活運(yùn)用運(yùn)算符完成運(yùn)算學(xué)習(xí)目標(biāo)/Target掌握選擇結(jié)構(gòu)語句，能夠根據(jù)實(shí)際需求選擇合適的選擇結(jié)構(gòu)語句

掌握循環(huán)結(jié)構(gòu)語句，能夠根據(jù)實(shí)際需求選擇合適的循環(huán)結(jié)構(gòu)語句

掌握跳轉(zhuǎn)語句，能夠靈活運(yùn)用continue語句或break語句完成程序中的流程跳轉(zhuǎn)章節(jié)概述/SummaryJavaScript作為一門編程語言，在Web前端開發(fā)領(lǐng)域中扮演著至關(guān)重要的角色。作為一名初學(xué)者，掌握J(rèn)avaScript基礎(chǔ)是十分必要的。只有掌握了JavaScript基礎(chǔ)，才能更好地理解和編寫JavaScript程序，為后續(xù)的學(xué)習(xí)奠定堅(jiān)實(shí)的基礎(chǔ)。本章將對(duì)JavaScript基礎(chǔ)進(jìn)行講解，包括數(shù)據(jù)類型、數(shù)據(jù)類型轉(zhuǎn)換、運(yùn)算符和流程控制。目錄/Contents2.12.22.3數(shù)據(jù)類型數(shù)據(jù)類型轉(zhuǎn)換運(yùn)算符2.4流程控制數(shù)據(jù)類型2.1了解數(shù)據(jù)類型的分類，能夠描述JavaScript中的基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型2.1.1 數(shù)據(jù)類型分類

先定一個(gè)小目標(biāo)！2.1.1 數(shù)據(jù)類型分類在JavaScript中，數(shù)據(jù)類型可以分為基本數(shù)據(jù)類型（或稱為值類型）和復(fù)雜數(shù)據(jù)類型（或稱為引用類型）。JavaScript中的數(shù)據(jù)類型分類如下圖所示。需要說明的是，JavaScript中的數(shù)組、函數(shù)和正則表達(dá)式都屬于對(duì)象型，所以復(fù)雜數(shù)據(jù)類型中只列出了對(duì)象型。復(fù)雜數(shù)據(jù)類型的使用較難，這里大家只需了解，具體會(huì)在第5章中詳細(xì)講解。2.1.1 數(shù)據(jù)類型分類強(qiáng)類型語言和弱類型語言的區(qū)別多學(xué)一招強(qiáng)類型語言是指一種強(qiáng)制類型定義的語言，當(dāng)某個(gè)變量被定義數(shù)據(jù)類型后，如果不進(jìn)行強(qiáng)制轉(zhuǎn)換，則該變量的數(shù)據(jù)類型不會(huì)改變，常見的強(qiáng)類型語言有Java、C++等。弱類型語言是指一種弱類型定義的語言，變量可以在運(yùn)行時(shí)被賦予不同數(shù)據(jù)類型的數(shù)據(jù)，變量的數(shù)據(jù)類型是由其值來確定的。常見的弱類型語言有JavaScript、PHP等。2.1.1 數(shù)據(jù)類型分類多學(xué)一招下面通過代碼比較強(qiáng)類型語言和弱類型語言。2.1.1 數(shù)據(jù)類型分類//強(qiáng)類型語言（以Java語言為例）intage=24; //變量age是整型//弱類型語言（以JavaScript語言為例）varage=24; //變量age是數(shù)字型age=‘a(chǎn)bc’; //將一個(gè)字符串賦值給變量age，此時(shí)變量age變成了字符串型由上述代碼可知，JavaScript變量的數(shù)據(jù)類型取決于被賦予的值的類型。掌握常用的基本數(shù)據(jù)類型，能夠根據(jù)實(shí)際需求定義基本數(shù)據(jù)類型的變量2.1.2 常用的基本數(shù)據(jù)類型

先定一個(gè)小目標(biāo)！在JavaScript中，常用的基本數(shù)據(jù)類型有布爾型、數(shù)字型、字符串型、空型和未定義型，而大整型和符號(hào)型不常用。2.1.2 常用的基本數(shù)據(jù)類型2.1.2 常用的基本數(shù)據(jù)類型1.布爾型布爾型數(shù)據(jù)有兩個(gè)值，分別是true（真）和false（假）。布爾型數(shù)據(jù)通常用于表示程序中的邏輯判斷結(jié)果，其中，true表示事件成功或條件成立的情況，false表示事件失敗或條件不成立的情況。例如，判斷數(shù)字3是否大于數(shù)字2，其結(jié)果用布爾型數(shù)據(jù)表示為true。注意由于在JavaScript中嚴(yán)格區(qū)分大小寫，所以只有當(dāng)true和false全部為小寫時(shí)才表示布爾型數(shù)據(jù)。2.1.2 常用的基本數(shù)據(jù)類型下面通過代碼演示布爾型的使用，首先聲明兩個(gè)變量，然后分別賦值為true和false，示例代碼如下。varresult01=true;varresult02=false;在上述示例代碼中，第1行代碼聲明變量result01并賦值為布爾型數(shù)據(jù)true；第2行代碼聲明變量result02并賦值為布爾型數(shù)據(jù)false。2.1.2 常用的基本數(shù)據(jù)類型2.數(shù)字型JavaScript中的數(shù)字型數(shù)據(jù)可以分為整數(shù)和浮點(diǎn)數(shù)（表示小數(shù)），在數(shù)字前面添加“+”表示正數(shù)，添加“-”表示負(fù)數(shù)，通常情況下省略“+”。2.1.2 常用的基本數(shù)據(jù)類型（1）整數(shù)在JavaScript中，通常使用十進(jìn)制表示整數(shù)，此外還可以使用二進(jìn)制、八進(jìn)制或十六進(jìn)制。十進(jìn)制由數(shù)字0~9組成，使用規(guī)則是逢十進(jìn)一；二進(jìn)制數(shù)由數(shù)字0和1組成，使用規(guī)則是逢二進(jìn)一；八進(jìn)制由數(shù)字0~7組成，使用規(guī)則是逢八進(jìn)一；十六進(jìn)制數(shù)由數(shù)字0~9以及字母A~F組成，不區(qū)分大小寫，使用規(guī)則是逢十六進(jìn)一。2.1.2 常用的基本數(shù)據(jù)類型下面通過代碼演示數(shù)字型數(shù)據(jù)中整數(shù)的使用，首先聲明4個(gè)變量，然后分別給這4個(gè)變量賦值為二進(jìn)制、八進(jìn)制、十進(jìn)制、十六進(jìn)制的整數(shù)，示例代碼如下。varbin=0b11010; //二進(jìn)制表示的26varoct=0o32; //八進(jìn)制表示的26vardec=26; //十進(jìn)制數(shù)26varhex=0x1a; //十六進(jìn)制表示的26在上述示例代碼中，以0b開始的數(shù)字表示二進(jìn)制數(shù)，以0o開始的數(shù)字表示八進(jìn)制數(shù)，以0x開始的數(shù)字表示十六進(jìn)制數(shù)。其中，b、o和x不區(qū)分大小寫。另外，JavaScript還允許用以0開始的數(shù)字表示八進(jìn)制數(shù)，但不推薦。2.1.2 常用的基本數(shù)據(jù)類型浮點(diǎn)數(shù)可以使用標(biāo)準(zhǔn)格式和科學(xué)記數(shù)法格式表示。標(biāo)準(zhǔn)格式是指數(shù)學(xué)中小數(shù)的寫法，如1.10；科學(xué)記數(shù)法格式是指將數(shù)字表示成一個(gè)數(shù)與10的n次冪相乘的形式，在程序中使用E或e后面跟一個(gè)數(shù)字的方式表示10的n次冪，如2.15E3表示2.15

103。（2）浮點(diǎn)數(shù)2.1.2 常用的基本數(shù)據(jù)類型下面通過代碼演示數(shù)字型數(shù)據(jù)中浮點(diǎn)數(shù)的使用，首先聲明4個(gè)變量，然后分別使用標(biāo)準(zhǔn)格式和科學(xué)記數(shù)法格式表示浮點(diǎn)數(shù)，示例代碼如下。//使用標(biāo)準(zhǔn)格式表示浮點(diǎn)數(shù)varfNum01=-3.12;varfNum02=3.12;//使用科學(xué)記數(shù)法格式表示浮點(diǎn)數(shù)varfNum03=3.14E5;varfNum04=7.35E-5;數(shù)字型數(shù)據(jù)中的最大值、最小正數(shù)值和特殊值多學(xué)一招在JavaScript中，當(dāng)需要獲取數(shù)字型數(shù)據(jù)的取值范圍時(shí)，可以使用MAX_VALUE和MIN_VALUE。由于MAX_VALUE和MIN_VALUE是Number對(duì)象的靜態(tài)屬性，所以需要通過Number.MAX_VALUE、Number.MIN_VALUE的方式進(jìn)行訪問。2.1.2 常用的基本數(shù)據(jù)類型多學(xué)一招通過如下代碼可以查詢JavaScript中的數(shù)字型數(shù)據(jù)的最大值和最小正數(shù)值。2.1.2 常用的基本數(shù)據(jù)類型console.log(Number.MAX_VALUE); //輸出結(jié)果為：1.7976931348623157e+308console.log(Number.MIN_VALUE); //輸出結(jié)果為：5e-324在上述代碼中，第1行代碼使用Number.MAX_VALUE獲取了JavaScript中數(shù)字型數(shù)據(jù)的最大值；第2行代碼使用Number.MIN_VALUE獲取了JavaScript中數(shù)字型數(shù)據(jù)的最小正數(shù)值。多學(xué)一招2.1.2 常用的基本數(shù)據(jù)類型在JavaScript中數(shù)字型數(shù)據(jù)有3個(gè)特殊值，分別是Infinity（無窮大）、-Infinity（無窮?。┖蚇aN（NotaNumber，非數(shù)字）。在計(jì)算中，當(dāng)計(jì)算結(jié)果超出了JavaScript最大可表示的數(shù)字時(shí)，會(huì)返回Infinity；當(dāng)計(jì)算結(jié)果超出了JavaScript最小可表示的數(shù)字時(shí)，會(huì)返回-Infinity；如果進(jìn)行了非法的運(yùn)算操作，JavaScript會(huì)返回NaN。多學(xué)一招下面通過代碼演示數(shù)字型數(shù)據(jù)中出現(xiàn)3個(gè)特殊值的情況。2.1.2 常用的基本數(shù)據(jù)類型console.log(Number.MAX_VALUE*2); //輸出結(jié)果為：Infinityconsole.log(-Number.MAX_VALUE*2); //輸出結(jié)果為：-Infinityconsole.log('abc'-2); //輸出結(jié)果為：NaN在上述代碼中，第1行代碼使用數(shù)字型數(shù)據(jù)的最大值乘2，輸出結(jié)果為Infinity；第2行代碼使用數(shù)字型數(shù)據(jù)的最大值的相反數(shù)乘2，輸出結(jié)果為-Infinity；第3行代碼使用字符串'abc'減2，輸出結(jié)果為NaN。2.1.2 常用的基本數(shù)據(jù)類型字符串是指計(jì)算中用于表示文本的一系列字符，在JavaScript中使用單引號(hào)（‘）、雙引號(hào)（“）和反引號(hào)（`）標(biāo)注字符串。下面通過代碼演示字符串型數(shù)據(jù)的使用。//使用單引號(hào)標(biāo)注字符串vara=''; //表示空字符串varstr1='書籍'; //表示字符串'書籍'//使用雙引號(hào)標(biāo)注字符串varb=""; //表示空字符串varstr2="書籍是人類進(jìn)步的階梯";//表示字符串"書籍是人類進(jìn)步的階梯"http://使用反引號(hào)標(biāo)注字符串varc=``; //表示空字符串varstr3=`讀萬卷書行萬里路`; //表示字符串`讀萬卷書行萬里路`3.字符串型2.1.2 常用的基本數(shù)據(jù)類型在字符串中，單引號(hào)、雙引號(hào)和反引號(hào)可以嵌套使用，示例代碼如下。//單引號(hào)中嵌套雙引號(hào)varfruit01='"apple"banana'; //字符串內(nèi)容為"apple"banana//雙引號(hào)中嵌套單引號(hào)varfruit02="'pear'blueberry"; //字符串內(nèi)容為'pear'blueberry//單引號(hào)中嵌套反引號(hào)varfood01='`noodles`rice'; //字符串內(nèi)容為`noodles`rice//雙引號(hào)中嵌套反引號(hào)varfood02="`fish`meat"; //字符串內(nèi)容為`fish`meat//反引號(hào)中嵌套單引號(hào)varcolor01=`'pink'red`; //字符串內(nèi)容為'pink'red//反引號(hào)中嵌套雙引號(hào)varcolor02=`"black"white`; //字符串內(nèi)容為"black"white2.1.2 常用的基本數(shù)據(jù)類型如果在單引號(hào)中使用單引號(hào)、在雙引號(hào)中使用雙引號(hào)，或在反引號(hào)中使用反引號(hào)，則需要使用“\”對(duì)單引號(hào)、雙引號(hào)或反引號(hào)進(jìn)行轉(zhuǎn)義，具體如下。\'：?jiǎn)我?hào)。\"：雙引號(hào)。\`：反引號(hào)。2.1.2 常用的基本數(shù)據(jù)類型下面通過代碼演示字符串的單引號(hào)、雙引號(hào)和反引號(hào)嵌套使用的情況。//單引號(hào)中嵌套單引號(hào)varspeak='I\'m小明'; //字符串內(nèi)容為I'm小明//雙引號(hào)中嵌套雙引號(hào)varboyName="\"小智\""; //字符串內(nèi)容為"小智"http://反引號(hào)中嵌套反引號(hào)vargirlName=`\`小麗\``; //字符串內(nèi)容為`小麗`2.1.2 常用的基本數(shù)據(jù)類型字符串是由若干個(gè)字符組成的，字符的數(shù)量就是字符串的長(zhǎng)度。在JavaScript中可以使用length屬性獲取整個(gè)字符串的長(zhǎng)度，示例代碼如下。varstr='Ilikerunning';console.log(str.length); //輸出結(jié)果為：142.1.2 常用的基本數(shù)據(jù)類型空型表示聲明的變量未指向任何對(duì)象，它只有一個(gè)特殊的null值。下面通過代碼演示數(shù)據(jù)類型為空型的情況。varage=null;console.log(age); //輸出結(jié)果為：null在上述示例代碼中，第1行代碼聲明了一個(gè)變量age，并賦值為null；第2行代碼用于在控制臺(tái)中輸出變量的age的值。4.空型2.1.2 常用的基本數(shù)據(jù)類型未定義型表示聲明的變量還未被賦值，此時(shí)變量的值為undefined，表示未定義。下面通過代碼演示數(shù)據(jù)類型為未定義型的情況。varage;console.log(age); //輸出結(jié)果為：undefined在上述示例代碼中，由于沒有為聲明的變量age賦值，所以輸出結(jié)果為undefined。5.未定義型字面量多學(xué)一招字面量是指源代碼中的固定值的表示法，使用字面量可以在代碼中表示某個(gè)值。在閱讀代碼時(shí)，通過觀察字面量可以快速地判斷數(shù)據(jù)的類型。JavaScript中常見的字面量如下。2.1.2 常用的基本數(shù)據(jù)類型數(shù)字字面量：1、2、3字符串字面量：'用戶名'、"密碼"布爾字面量：true、false數(shù)組字面量：[1,2,3]對(duì)象字面量：{username:'小智',password:123456}數(shù)據(jù)類型轉(zhuǎn)換2.2掌握數(shù)據(jù)類型轉(zhuǎn)換，能夠根據(jù)實(shí)際需求將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)

先定一個(gè)小目標(biāo)！2.2.1將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)在比較數(shù)據(jù)或進(jìn)行條件判斷時(shí)，經(jīng)常需要將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)。在JavaScript中，使用Boolean()可以將給定的數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)，在轉(zhuǎn)換時(shí)，表示空值或否定的值（包括空字符串、數(shù)字0、NaN、null和undefined）會(huì)被轉(zhuǎn)換為false，其他的值會(huì)被轉(zhuǎn)換為true。2.2.1將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)2.2.1將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)的示例代碼如下。console.log(Boolean('')); //輸出結(jié)果為：falseconsole.log(Boolean(0)); //輸出結(jié)果為：falseconsole.log(Boolean(NaN)); //輸出結(jié)果為：falseconsole.log(Boolean(null)); //輸出結(jié)果為：falseconsole.log(Boolean(undefined)); //輸出結(jié)果為：falseconsole.log(Boolean('小智')); //輸出結(jié)果為：trueconsole.log(Boolean(123456)); //輸出結(jié)果為：true掌握數(shù)據(jù)類型轉(zhuǎn)換，能夠根據(jù)實(shí)際需求將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)

先定一個(gè)小目標(biāo)！2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)在JavaScript的開發(fā)過程中，有時(shí)候需要將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)進(jìn)行計(jì)算。例如，將字符串型數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)進(jìn)行算術(shù)運(yùn)算。將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)的方式有3種，分別是parseInt()、parseFloat()和Number()。2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)在使用parseInt()將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)時(shí)，會(huì)直接忽略數(shù)據(jù)的小數(shù)部分，返回?cái)?shù)據(jù)的整數(shù)部分，示例代碼如下。console.log(parseInt('100.56')); //輸出結(jié)果為：1001.parseInt()2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)需要注意的是，parseInt()可以自動(dòng)識(shí)別十進(jìn)制數(shù)和十六進(jìn)制數(shù)字符串。例如，'0xF'會(huì)被識(shí)別為15。但對(duì)于其他進(jìn)制數(shù)字符串，則需要通過parseInt()的第2個(gè)參數(shù)設(shè)置進(jìn)制才能正確識(shí)別，該參數(shù)的取值范圍為2~36，示例代碼如下。console.log(parseInt('20',8)); //輸出結(jié)果為：162.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)1.parseInt()在使用parseFloat()將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)時(shí)，會(huì)將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)中的浮點(diǎn)數(shù)，示例代碼如下。console.log(parseFloat('100.56')); //輸出結(jié)果為：100.56console.log(parseFloat('314e-2')); //輸出結(jié)果為：3.14在上述示例代碼中，第1行代碼將字符串'100.56'轉(zhuǎn)換為數(shù)字型數(shù)據(jù)，控制臺(tái)中的輸出結(jié)果為100.56；第2行代碼將字符串'314e-2'轉(zhuǎn)換為數(shù)據(jù)3.14。2.parseFloat()2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)使用Number()將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)的示例代碼如下。console.log(Number('100.56')); //輸出結(jié)果為：100.56console.log(Number('100.abc')); //輸出結(jié)果為：NaN在上述示例代碼中，第1行代碼將字符串'100.56'轉(zhuǎn)換為數(shù)字型數(shù)據(jù)，控制臺(tái)中的輸出結(jié)果為100.56；第2行代碼將字符串'100.abc'轉(zhuǎn)換為數(shù)字型數(shù)據(jù)，控制臺(tái)中的輸出結(jié)果為NaN。3.Number()2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)不同類型數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)的結(jié)果如下表所示。待轉(zhuǎn)換數(shù)據(jù)parseInt()轉(zhuǎn)換結(jié)果parseFloat()轉(zhuǎn)換結(jié)果Number()轉(zhuǎn)換結(jié)果純數(shù)字字符串對(duì)應(yīng)的數(shù)字對(duì)應(yīng)的數(shù)字對(duì)應(yīng)的數(shù)字非純數(shù)字字符串NaNNaNNaN空字符串NaNNaN0nullNaNNaN0undefinedNaNNaNNaNtrueNaNNaN1falseNaNNaN02.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)在轉(zhuǎn)換純數(shù)字字符串時(shí)，會(huì)忽略字符串前面的0，如字符串"0333"會(huì)被轉(zhuǎn)換為333。如果字符串前后有空格，則這些空格會(huì)被忽略。如果字符串開頭有正號(hào)“+”或負(fù)號(hào)“-”，則該字符串會(huì)被當(dāng)成正數(shù)或負(fù)數(shù)，如'-333'會(huì)被轉(zhuǎn)換為-333。2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)使用isNaN()判斷一個(gè)值是否為NaN多學(xué)一招如果想要判斷一個(gè)值是否為NaN，可以使用isNaN()進(jìn)行判斷。isNaN()在接收一個(gè)值后會(huì)將該值隱式轉(zhuǎn)換為數(shù)字。如果轉(zhuǎn)換結(jié)果為NaN，那么isNaN()將返回true；否則，返回false。2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)多學(xué)一招下面通過代碼演示isNaN()的使用。2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)console.log(isNaN(3)); //輸出結(jié)果為：falseconsole.log(isNaN('abc')); //輸出結(jié)果為：true在上述代碼中，由于第1行代碼中的3是數(shù)字，所以輸出結(jié)果為false；由于第2行代碼中的'abc'是不能轉(zhuǎn)換為數(shù)字的字符串，即轉(zhuǎn)換結(jié)果為NaN，所以輸出結(jié)果為true。需要注意的是，isNaN()只能判斷一個(gè)值是否為NaN，而不能判斷一個(gè)值是否為有效的數(shù)字。如果需要判斷一個(gè)值是否為數(shù)字，可以使用typeof運(yùn)算符，詳見2.3.8小節(jié)。2.2.2將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)多學(xué)一招掌握數(shù)據(jù)類型轉(zhuǎn)換，能夠根據(jù)實(shí)際需求將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)

先定一個(gè)小目標(biāo)！2.2.3將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)在JavaScript中可以使用String()或toString()將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)，它們的區(qū)別是，String()可以將任意類型的數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)；而toString()只能將除null和undefined之外的數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)。在使用toString()對(duì)數(shù)字進(jìn)行數(shù)據(jù)類型的轉(zhuǎn)換時(shí)，可以通過設(shè)置參數(shù)將數(shù)字轉(zhuǎn)換為指定進(jìn)制的字符串。2.2.3將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)2.2.3將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)下面通過代碼演示將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)。varnum01=23;varnum02=46;console.log(String(num01)); //輸出結(jié)果為：23console.log(num01.toString()); //輸出結(jié)果為：23console.log(num02.toString(2)); //輸出結(jié)果為：101110運(yùn)算符2.3掌握算術(shù)運(yùn)算符的使用，能夠靈活應(yīng)用算術(shù)運(yùn)算符完成運(yùn)算

先定一個(gè)小目標(biāo)！2.3.1算術(shù)運(yùn)算符算術(shù)運(yùn)算符用于對(duì)兩個(gè)數(shù)字或變量進(jìn)行算術(shù)運(yùn)算，與數(shù)學(xué)中的加、減、乘、除運(yùn)算類似。JavaScript中常用的算術(shù)運(yùn)算符如下表所示。運(yùn)算符運(yùn)算示例結(jié)果+加3+36-減6-33*乘3*515/除8/24%取模（取余）5%75**冪運(yùn)算4**216++自增（前置）a=2;b=++a;a=3;b=3;自增（后置）a=2;b=a++;a=3;b=2;--自減（前置）a=2;b=--a;a=1;b=1;自減（后置）a=2;b=a--;a=1;b=2;2.3.1算術(shù)運(yùn)算符自增和自減運(yùn)算可以快速對(duì)變量的值進(jìn)行遞增或遞減運(yùn)算，自增和自減運(yùn)算符可以放在變量前也可以放在變量后。當(dāng)自增（或自減）運(yùn)算符放在變量前時(shí)，稱為前置自增（或前置自減）；當(dāng)自增（或自減）運(yùn)算符放在變量后面時(shí)，稱為