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

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

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

了解瀏覽器的組成，能夠描述瀏覽器的特點以及作用

掌握下載和安裝代碼編輯器的方法，能夠獨立下載和安裝代碼編輯器學習目標/Target掌握JavaScript常用的輸入輸出語句，能夠靈活運用prompt()、alert()、

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

掌握JavaScript注釋的使用，能夠合理運用單行注釋、多行注釋增強代碼的

可讀性

掌握JavaScript代碼引入方式，能夠靈活運用行內式、內部式、外部式的方式

引入JavaScript代碼學習目標/Target

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

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

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

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

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

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

先定一個小目標！010203123JavaScript是腳本語言中的一種，它的語法規(guī)則比較松散，使開發(fā)人員能夠快速編寫程序。使用腳本語言編寫的代碼可以直接由解釋器執(zhí)行，不需要生成獨立的可執(zhí)行文件。由于腳本語言只在被調用時自動進行解釋或編譯，所以具有簡單易用的特點。簡單易用JavaScript不依賴特定的操作系統(tǒng)，僅需要瀏覽器的支持。無論用戶使用的操作系統(tǒng)是Windows、Linux、macOS還是Android、iOS，只要這些操作系統(tǒng)中安裝了支持JavaScript的瀏覽器，就可以運行JavaScript?？缙脚_面向對象是軟件開發(fā)中的一種重要的編程思想。JavaScript為面向對象提供了支持，使開發(fā)者能夠通過面向對象思想進行編程。許多優(yōu)秀的庫和框架的誕生都離不開面向對象思想。面向對象使JavaScript開發(fā)變得快捷、高效，還可以降低開發(fā)成本。面向對象1.1.4 JavaScript的特點JavaScript開發(fā)工具1.2了解瀏覽器，能夠描述瀏覽器的特點以及作用

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

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

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

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

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

<script>

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

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

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

JavaScript常用的輸入輸出語句

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

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

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

JavaScript常用的輸入輸出語句2.alert()語句alert('這是一個警告框');使用document.write()語句時，如果輸出內容中含有HTML標簽，則輸出內容會被瀏覽器解析。下面使用document.write()語句在頁面中輸出“誰知盤中餐，粒粒皆辛苦?！?，示例代碼如下。1.3.3

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

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

JavaScript常用的輸入輸出語句輸出內容包含JavaScript結束標簽的情況腳下留心document.write('<script>alert(1);<\/script>');運行上述示例代碼后，頁面中會彈出一個警告框。如果沒有使用“\”對結束標簽進行轉義，則</script>會被當成結束標簽，使得頁面不會彈出警告框，程序會報錯。掌握JavaScript注釋的使用，能夠合理運用單行注釋、多行注釋增強代碼的可讀性

先定一個小目標！1.3.4

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

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

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

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

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

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

什么是變量

先定一個小目標！變量是指程序在內存中申請的一塊用來存放數(shù)據(jù)的空間，用于存儲程序運行過程中產生的臨時數(shù)據(jù)。變量由變量名和變量值組成，通過變量名可以訪問變量值。1.4.1

什么是變量1.4.1

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

變量的命名規(guī)則

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

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

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

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

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

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

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

變量的聲明與賦值

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

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

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

//同時聲明3個變量//為變量賦值username='小智';

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

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

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

//為變量賦值1801.4.3

變量的聲明與賦值當變量的值是數(shù)字型數(shù)據(jù)時，不需要將其寫在單引號中，如果將數(shù)字型數(shù)據(jù)寫到單引號中，則表示該數(shù)據(jù)為字符串型數(shù)據(jù)，而不是數(shù)字型數(shù)據(jù)。如果想要查看變量的值，則可以使用console.log()語句將變量的值輸出到控制臺。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關鍵字，用于聲明變量，它的用法類似于var，但是let所聲明的變量只在它所在的塊級作用域內有效。1.4.3

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

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

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

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

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

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

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

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

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

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

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

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

【案例】交換兩個變量的值

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

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

【案例】交換兩個變量的值1.4.6

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

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

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

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

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

掌握運算符的使用，能夠靈活運用運算符完成運算學習目標/Target掌握選擇結構語句，能夠根據(jù)實際需求選擇合適的選擇結構語句

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

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

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

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

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

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

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

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

先定一個小目標！2.3.1算術運算符算術運算符用于對兩個數(shù)字或變量進行算術運算，與數(shù)學中的加、減、乘、除運算類似。JavaScript中常用的算術運算符如下表所示。運算符運算示例結果+加3+36-減6-33*乘3*515/除8/24%取模（取余）5%75**冪運算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算術運算符自增和自減運算可以快速對變量的值進行遞增或遞減運算，自增和自減運算符可以放在變量前也可以放在變量后。當自增（或自減）運算符放在變量前時，稱為前置自增（或前置自減）；當自增（或自減）運算符放在變量后面時，稱為