JavaScript基礎教程PPT完整全套教學課件

JavaScript基礎教程01第1章JavaScript簡介02第2章JavaScript語法基礎03第3章JavaScript程序結構04第4章函數05第5章JavaScript事件06第6章JavaScript內置對象07第7章面向對象編程基礎08第8章綜合案例第1章JavaScript簡介JavaScript基礎教程學習目標

1.1什么是JavaScript011.1什么是JavaScript

JavaScript是基于對象和事件驅動的客戶端腳本語言，不需要編譯即可直接在瀏覽器上運行。JavaScript依賴于瀏覽器，因此JavaScript的誕生是在瀏覽器之后的。史上第一個瀏覽器的誕生是在1990年，1994年Netscape公司發(fā)布了Navigator瀏覽器，這是第一款比較成熟的瀏覽器，但只能瀏覽，提交表單時不知道是否提交成功，還得向服務器發(fā)出請求，判斷是否提交成功，這樣非常麻煩，因此JavaScript為了解決這一問題而誕生。1995年，BrendanEich花了10天的時間設計出了JavaScript。不過借鑒的來源很多，借鑒了C語言的基本語法、Java的數據類型、Java的對象體系、Scheme的函數等。腳本語言也稱為動態(tài)語言，以文本保存，可以使用任何文本編輯器編寫。腳本語言一般比較簡單、易學、易用，類似于命令，可以快速開發(fā)，方便部署，運行簡單。腳本語言根據運行環(huán)境劃分，可以分為客戶端腳本語言和服務器端腳本語言。1.1什么是JavaScript客戶端腳本語言可以在客戶端直接運行，一般不需要連接數據庫，可以減小服務器的壓力?？蛻舳四_本語言不需要編譯，通過瀏覽器還可以看到源代碼，相對沒有那么安全。一般使用客戶端腳本語言進行有效性驗證，比如表單驗證，驗證兩次密碼是否一致。常見的客戶端腳本語言有JavaScript、JScript、VBScript等。服務器端腳本語言也是人們說的后臺編程語言，一般需要連接數據庫和編譯成二進制可執(zhí)行文件再執(zhí)行，通過瀏覽器不能查看源代碼，相對于客戶端腳本語言更安全。一般使用服務器端腳本語言進行安全驗證，比如可以使用加密算法，將密碼加密后保存到數據庫當中。常見的服務器端腳本語言有ASP、PHP、JSP等。1.1什么是JavaScript

JavaScript的主要特點：輕量級、解釋型語言、跨平臺性等。其中，輕量級是指需要遵循的慣例和規(guī)則比較少，或者說遵循起來比較簡單。JavaScript的語法簡單，依賴比較少，調試也方便。解釋型語言是指不需要編譯直接運行。JavaScript只需要將其寫在網頁中，不需要編譯，打開瀏覽器就可以運行查看結果?？缙脚_性是指不依賴操作系統(tǒng)和硬件環(huán)境，不管在什么平臺都可以運行。JavaScript僅依賴于瀏覽器，與操作環(huán)境無關，只要有支持JavaScript的瀏覽器就可以執(zhí)行。

JavaScript主要用于Web前端開發(fā)，想做前端開發(fā)就必須了解JavaScript?，F在前端專業(yè)有很多框架，比如比較流行的Bootstrap、Foundation、Vue.js、Angular.js等框架，都要用到JavaScript或者jQuery，jQuery是JavaScript的代碼庫，也是基于JavaScript基礎的。比如Bootstrap要實現輪播圖、折疊、響應式導航、下拉菜單等就必須先引用jQuery。Foundation與Bootstrap類似，也需要引用jQuery。Vue.js與Angular.js也都需要有JavaScript基礎。

1.2JavaScript與Java的區(qū)別021.2JavaScript與Java的區(qū)別初學JavaScript時，很多人都會問JavaScript與Java有什么關系，雖然它們名字很相似，但兩者本質上是不同的，沒有任何血緣關系，就像菠蘿與波羅蜜,京東與京東方一樣。Java原名Oak語言，申請注冊時Oak已被人使用了，故改成了Java語言，Java是提議者在喝咖啡時想到的，因此Java語言的圖標是一杯咖啡。而JavaScript語言原名LiveScript，后因Java非常受歡迎，Netscape公司因為營銷策略與Sun公司合作，將其改名為JavaScript。JavaScript只是為了名字和Java類似，方便宣傳與推廣。JavaScript的語法其實與Java的語法有非常大的差異，JavaScript主要借鑒的是C語言與Scheme的函數，C語言是面向過程的編程語言。

JavaScript與Java所屬的公司不同，JavaScript是Netscape公司發(fā)布的客戶端腳本語言,Java是Sun公司發(fā)布的面向對象的程序設計語言。1.2JavaScript與Java的區(qū)別

JavaScript與Java的執(zhí)行方式不同，JavaScript是解釋性語言，不需要編譯即可直接在瀏覽器上執(zhí)行，JavaScript還不可以對服務器端的數據進行操作。而Java可以連接數據庫，對服務器端的數據進行增刪改查等操作，不過Java需要先編譯成.class文件再執(zhí)行，Java主要在服務器上運行。

JavaScript與Java的數據類型不同，Java編譯前要檢測變量的數據類型，比較嚴格，屬于強類型語言，而JavaScript沒那么嚴格，屬于弱類型語言。

JavaScript與Java的用途也不一樣,JavaScript主要用于用戶輸入內容的有效性驗證、網頁游戲開發(fā)、動態(tài)效果等，而Java主要用于后臺程序設計、安全性驗證等。

JavaScript與Java從本質上是兩種完全不同的語言，但也有相似之處：都嚴格區(qū)分大小寫；JavaScript借鑒了Java的基礎語法和對象體系，JavaScript是基于對象的，Java是面向對象的。

1.3JavaScript能做什么031.3JavaScript能做什么在網頁中，HTML是超文本標記語言，負責主體結構的搭建；CSS是層疊樣式表，負責修飾；JavaScript是腳本語言，負責動態(tài)交互效果。JavaScript最初是為了判斷表單是否提交成功而誕生的，JavaScript主要用于表單驗證、事件處理、網頁游戲、改變HTML內容、改變樣式、文字特效、輪播圖、放大特效等動態(tài)網頁特效，比如：用戶注冊登錄時，可以驗證用戶輸入的信息是否為有效的，判斷內容是否為空，內容的長度、數據類型、兩次輸入的值是否一致等；還可以有相關的事件處理，獲取焦點、失去焦點、文本改變、選中文本、提交、重置等操作都可以觸發(fā)不同事件?，F在很多網站注冊登錄都在一個頁面上，還可以使用JavaScript實現選項卡的切換效果。導航欄可以使用鼠標事件實現，一般網站的導航是水平導航，可以使用鼠標經過與移開事件實現鼠標移上去顯示二級菜單，移開二級菜單隱藏。后臺管理的導航一般是垂直導航，可以使用單擊事件實現單擊一級菜單顯示或隱藏二級菜單，還可以使用DOM動態(tài)添加子節(jié)點。1.3JavaScript能做什么網站首頁一般有輪播圖，也可以使用JavaScript實現，而且實現方法還很多，最簡單的是將圖片名稱改成數字，通過數字自增，改變圖片路徑，實現每隔幾秒切換一張圖片；可以使用數組存放圖片，通過索引配合單擊事件實現上一張下一張的翻頁效果；還可以使用鼠標移入移出事件實現鼠標經過停止輪播，移開繼續(xù)輪播。現在電子商務非常流行，購物網站的很多特效也都可以通過JavaScript實現，比如商品展示頁面可以將鼠標放到商品上實現放大鏡效果，放大顯示查看細節(jié)；展示列表過長，可以有滾動到頂部功能；購物車頁面可以實現單擊添加或減少數量、計算總價、全選等操作；還可以在頁面上有浮動的廣告窗口等。

JavaScript不僅可以實現很多動態(tài)交互效果，比如倒計時、時間的獲取、隨機點名、文字圖片旋轉、漸變效果、淡入淡出效果、換膚效果等，還可以做簡易計算器、網頁游戲等。

1.4JavaScript開發(fā)環(huán)境041.4JavaScript開發(fā)環(huán)境

JavaScript以文本保存，可以使用任何文本編輯器編寫。比如最簡單的記事本，EditPlus也方便小巧，EditPlus編輯器功能更強大，不僅可以處理文本、HTML程序語言，同時編輯多文件，還可以無限制地撤銷與重做。JavaScript一般嵌套在HTML代碼中，所以可以根據網頁需求選擇不同的編輯器?，F在比較流行的編輯器有HBuilder、SublimeText3、Dreamweaver、WebStorm、IntelliJIDEA、VisualStudioCode等。每款軟件都有各自的優(yōu)缺點，下面簡單介紹一下Dreamweaver、SublimeText、HBuilder三款軟件。1.4JavaScript開發(fā)環(huán)境

1.4.1開發(fā)工具１.Dreamweaver

Dreamweaver是Adobe公司的一款可視化編程軟件，初始界面中間分三列，第一列可以打開最近的項目，第二列可以新建HTML、PHP、CSS、JavaScript文件等，還可以創(chuàng)建站點，方便整個項目的管理，第三列介紹軟件的主要功能。下方還有快速入門、新增功能、資源等，方便使用者學習。其初始界面如圖1-1所示。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.1開發(fā)工具１.Dreamweaver單擊初始界面中的新建HTML，進入其工作界面，工作界面有代碼、設計、拆分三種視圖。代碼視圖中代碼有不同顏色標識，在敲代碼時也有很多提示，不過對于初學者不建議使用提示，不然連標簽、屬性名都記不全。初學者適合使用拆分模式，一邊敲代碼一邊看效果。設計視圖用得比較少，設計視圖可能會生成很多不必要的代碼。其工作界面如圖1-2所示。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.1開發(fā)工具２.SublimeText

SublimeText是程序員JonSkinner開發(fā)的，是目前主流的前端開發(fā)編輯器，其特點是體積小、運行速度快、可以自動補全代碼，而且代碼高亮提示，界面比較美觀，方便用戶查看。SublimeText安裝方便，但需要很多插件。SublimeText可以新建HTML、CSS、JavaScript、Java、C、ASP、PHP等多種文件，其工作界面如圖1-3所示。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.1開發(fā)工具３.HBuilder

HBuilder是DCloud（數字天堂）公司推出的，現在很多公司開發(fā)時都使用的是HBuilder，HBuilder初始界面有軟件使用手冊，HBuilder的最大優(yōu)勢是快，有完整的語法提示、代碼塊等，可以大大提高開發(fā)效率。創(chuàng)建Web項目時可以自動生成CSS、IMG、JS文件夾。其工作界面如圖1-4所示。其中，Dreamweaver開發(fā)效率相對要低些，但站點管理和拆分視圖還不錯，可以一邊敲代碼一邊看效果，能很快看到效果，方便教學，很多老師教學都使用的是Dreamweaver軟件，對于初學者也適合使用Dreamweaver。但對于公司來說，更注重開發(fā)效率，一般使用的是SublimeText和HBuilder。用戶可以根據具體情況選擇不同的軟件進行編碼。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.2瀏覽器瀏覽器是用來顯示網頁中的文字、圖像等信息，用戶還可以通過瀏覽器進行操作，產生交互效果。從1990年瀏覽器誕生至今，有很多瀏覽器，但瀏覽器的內核有所不同，都有各自的私有屬性，也就出現了兼容性問題?，F在主流的瀏覽器有谷歌、IE、火狐等，下面簡單介紹這三種瀏覽器。1.4JavaScript開發(fā)環(huán)境

1.4.2瀏覽器１.IE瀏覽器

IE（InternetExplorer）瀏覽器是微軟公司推出的，其內核（IE內核）是微軟獨立開發(fā)的，只支持Windows操作系統(tǒng)。360、搜狗瀏覽器的內核也是IE內核。不同版本的IE瀏覽器對JavaScript的支持情況是不同的，因此針對IE瀏覽器會編寫很多代碼處理兼容性問題。IE瀏覽器限制網頁運行腳本或ActiveX控件，需要允許阻止的內容才能運行，看到JavaScript代碼的運行效果。IE瀏覽器的調試可以通過右鍵檢查元素或按F12鍵直接進入，如圖1-5所示。其中，DOM資源管理器面板顯示的是頁面結構，可以在右側修改樣式，查看布局及事件等，使用三個圖標分別可以檢查元素、突出顯示元素、顏色選取器；控制臺面板顯示報錯、警告等信息；調試程序面板可以添加斷點、監(jiān)聽調試；網絡面板可以請求網絡資源的路徑時間等信息。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.2瀏覽器２.谷歌瀏覽器谷歌瀏覽器（GoogleChrome）是谷歌公司推出的，其內核是WebKit，多線程虛擬機運行速度快，不容易崩潰，還有防止惡意軟件功能，非常安全。谷歌瀏覽器調試與IE類似，調試JS可以在頁面上單擊右鍵然后選擇檢查，也可以直接按F12鍵或者Ctrl+Shift+I快捷鍵進入調試頁面，如圖1-6所示。其中，Elements（元素）面板顯示頁面結構，下方可以修改樣式、事件監(jiān)聽等，使用其前方兩個圖標分別可以檢查元素、切換類別，查看不同分辨率下的效果；同樣有控制臺、資源、網絡、性能、內存等面板；Sources（資源管理）面板中可以打斷點調試JS文件；Network（網絡）面板中還可以查看具體的耗時情況。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.2瀏覽器３.火狐瀏覽器火狐瀏覽器（MozillaFirefox），其內核是Gecko，支持多種操作系統(tǒng)。火狐瀏覽器調試JavaScript與IE、谷歌類似，按F12鍵，打開調試器面板，可以通過斷點調試，如圖1-7所示。1.4JavaScript開發(fā)環(huán)境

1.4.3Web服務器

Web服務器的主要作用是可以放置網站文件、數據文件等相關文件，可供全世界瀏覽、下載。Web服務器的工作原理：先與瀏覽器建立連接，用戶可以發(fā)出請求，然后Web服務器做出響應，最后將效果返還瀏覽器。IIS服務器是現在流行的大型Web服務器，下面將簡單的介紹IIS配置與網站部署。1.4JavaScript開發(fā)環(huán)境

1.4.3Web服務器１.IIS的配置步驟首先，在控制面板找到“程序和功能”，然后打開“打開或關閉Windows功能”，勾選“Internet信息服務”“FTP服務器”“Web管理工具”“萬維網服務”等復選框，如圖1-8所示。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.3Web服務器２.瀏覽網站打開IIS管理器，有一個默認的網站DefaultWebSite，先啟動IIS的目錄瀏覽功能，再單擊右側的瀏覽就可以在“瀏覽網站”選項器上瀏覽網站了。瀏覽器上該網站的路徑是http://localhost/。IIS管理器界面如圖1-9所示。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.3Web服務器１.IIS的配置步驟在IIS管理器界面也可以添加部署自己做的網站，填寫網站名稱，選擇網站路徑，綁定IP地址與端口，就可以在瀏覽器上瀏覽自己的網站了，其中綁定的網站的端口不可以重復?！疤砑泳W站”對話框如圖1-10所示。1.4JavaScript開發(fā)環(huán)境

1.5在HTML中使用JavaScript051.5在HTML中使用JavaScript

JavaScript代碼可以直接嵌套在HTML中，也可以在網頁中引用外部JS文件。不管是嵌套在網頁中的JavaScript代碼，還是引用外部JS文件都需要<script></script>標簽。比如要在文檔加載時彈出對話框，顯示"hello，javascript!"，可以有很多方式實現，現詳細講解JavaScript代碼寫在頭部、綁定在HTML元素上、引用外部JS文件三種方式。1.5在HTML中使用JavaScript1.5.1JavaScript代碼寫在頭部可以將JavaScript代碼寫在<head>與</head>之間，例如：1.5在HTML中使用JavaScript

1.5.1JavaScript代碼寫在頭部其中，第6~11行代碼為JavaScript代碼，在<head></head>內部，用<script></script>標簽包裹,第7~9行代碼為test（）方法，彈出對話框顯示"hello,javascript!";第10行代碼為當加載文檔時調用test方法。1.5在HTML中使用JavaScript1.5.2綁定在HTML元素上JavaScript代碼也可以寫在元素內，一般通過事件進行綁定，例如：1.5在HTML中使用JavaScript1.5.2綁定在HTML元素上1.5在HTML中使用JavaScript1.5.2綁定在HTML元素上1.5在HTML中使用JavaScript1.5.3引用外部JS文件HTML文件(1-5.html)中的代碼如下：1.5在HTML中使用JavaScript

1.5.3引用外部JS文件其中，第6行代碼為引用外部JS文件，src是文件的相對路徑，type是文本類型。外部JS文件（test.js）中的代碼如下：引用外部JS文件也可以不將事件綁定在元素上，使行為與結構分離，把body上的“onload="test()"”去掉，在JS文件中添加“window.onload=test;”。

1.6本章小結06

JavaScript是基于對象和事件驅動的客戶端腳本語言，不需要編譯，可以直接在瀏覽器上運行。JavaScript有輕量級、跨平臺等特性。JavaScript與Java本質上是兩種完全不同的語言，JavaScript是腳本語言、解釋型語言、弱類型語言；Java是編程語言、強類型語言，需要編譯再執(zhí)行。JavaScript主要用于表單驗證、事件處理、網頁游戲、改變HTML內容、改變樣式、文字特效、輪播圖、放大特效等動態(tài)網頁特效。JavaScript以文本保存，可以使用任何文本編輯器編寫。JavaScript代碼可以直接嵌套在HTML中，也可以在網頁中引用外部JS文件。1.6本章小結謝謝觀看！JavaScript基礎教程第2章JavaScript語法基礎學習目標

2.1數據類型012.1數據類型數據類型是對數據的一種描述。程序語言中引入數據類型既是為了更合理地分配內存空間，也規(guī)范了數據之間的操作。JavaScript中的數據類型可以簡單地分為基本數據類型和引用數據類型。2.1數據類型

2.1.1JavaScript數據類型的特點

JavaScript是弱類型語言，與C、Java等強類型語言比較，在定義變量時不需要嚴格指定變量的數據類型，但是變量的值仍然是保存在內存中的，也是具有數據類型概念的。Java-Script中變量的數據類型是解釋時動態(tài)指定的，例如：其中，第1行代碼定義變量x，此時x是未定義（Undefined）類型；第2行代碼對變量x賦值為10，此時x是數字（Number）型；第3行代碼對變量x賦值為"hello"，此時x是字符串（String）型。2.1數據類型

2.1.2基本數據類型

JavaScript中的基本數據類型包括數字(Number)型、字符串（String）型、布爾(Boolean)型、空（Null）類型、未定義（Undefined）類型等。在ECMAScript6中還引入了Symbol類型，用于表示獨一無二的值。2.1數據類型

2.1.2基本數據類型１.數字(Number)型

JavaScript中只有一種數字類型，不區(qū)分整型和浮點型，無論什么數值都采用IEEE754標準定義的64位浮點型來存儲。根據進制的不同，可以采用十進制、八進制和十六進制等不同的表示方法，例如：其中，第1行代碼對變量賦值為十進制整數；第2行代碼對變量賦值為八進制整數；第3行代碼對變量賦值為十六進制整數。若數字以0開頭，后面跟0~7組成的數字序列，則該數字為八進制表示。若數字以0x開頭，后面跟0~9、A~F的序列，則該數字為十六進制表示。2.1數據類型

2.1.2基本數據類型１.數字(Number)型在表示浮點數時，可以采用傳統(tǒng)計數法和科學計數法兩種方法。對于極大或極小的數，一般采用科學計數法表示，例如：其中，第1行代碼采用傳統(tǒng)計數法，將浮點數分為整數、小數點和小數三個部分，如123.456、0.254等；第2行代碼采用科學計數法，將浮點數表示為aEn的形式，即a×10n，如1.23E2、7.4E-3等。2.1數據類型

2.1.2基本數據類型１.數字(Number)型在JavaScript中還有NaN和Infinity兩個特殊的常量，用于表示非數字和超出JavaScript表示范圍的數字，例如：其中，第1行代碼計算表達式12*"hello"的值，計算結果是沒有意義的數字，使用NaN（即NotaNumber的縮寫）表示。NaN不與任何數字相等，可以使用函數isNaN()來判斷一個結果是否為數字。第2行代碼的數字范圍超出了JavaScript所能表示的最大范圍，使用Infinity表示，即無限大的意思；如果數字超出了JavaScript所能表示的最小范圍，則使用-Infinity表示，即無限小的意思。JavaScript中數字最大和最小值可以通過Number對象的MAX_VALUE和MIN_VALUE屬性獲取。2.1數據類型

2.1.2基本數據類型１.數字(Number)2.1數據類型

2.1.2基本數據類型２.字符串（String）型

JavaScript中將引號（雙引號或單引號）括起來的字符序列稱為字符串類型，用于表示普通文本，如'hello'、"hello"、'admin@163.com'、'學習JavaScript很容易'等。在使用字符串時要注意引號的成對使用。雙引號括起來的字符串中可以包含單引號，單引號括起來的字符串中可以包含雙引號，但雙引號和單引號不能交叉使用，例如：2.1數據類型

2.1.2基本數據類型２.字符串（String）型其中，第1行代碼使用雙引號對字符串進行界定；第2行代碼使用單引號對字符串進行界定；第3行代碼使用雙引號對字符串進行界定，雙引號內的單引號被當作普通字符處理，不具有字符串界定的功能；第4行代碼使用單引號對字符串進行界定，單引號內的雙引號被當作普通字符處理，不具有字符串界定的功能；第5行代碼，等號后是雙引號，所以以雙引號作為字符串的界定符號，在hello后找到對應的雙引號，結束字符串，后面的JavaScript無法處理，故出現語法錯誤；第6行代碼的錯誤原因與第5行代碼類似。2.1數據類型

2.1.2基本數據類型２.字符串（String）型在實際應用中，某些時候，需要在雙引號中包含雙引號、單引號中包含單引號，這時就需要用到轉義字符。轉義字符用于在字符串中插入省略號、引號、換行符和其他特殊字符，通常在特殊字符前加上反斜杠（\\）實現。常用轉義字符如表2-1所示。2.1數據類型

2.1.2基本數據類型２.字符串（String）型

2.1數據類型

2.1.2基本數據類型３.布爾(Boolean)型布爾類型通常用來表示邏輯上的真或假。該類型只有兩個值：true和false，分別代表真和假。布爾值經常用來表示條件測試，在以下兩種情況下使用。

(1)作為關系表達式、邏輯表達式的計算結果。

(2)作為開關標志，表示某種功能是否允許。布爾值用作測試，可以放在判斷語句中，例如：2.1數據類型

2.1.2基本數據類型３.布爾(Boolean)型其中，第1行代碼將關系表達式3>4的結果賦值給b，結果為false；第2行代碼將關系表達式4>3的結果賦值給b，結果為true；第4行代碼將a>b作為判斷條件，結果為true，執(zhí)行第5行代碼。2.1數據類型

2.1.2基本數據類型４.空（Null）類型

JavaScript中的null表示“nothing”，被看作不存在的事物。null是一種獨立的數據類型，通過typeof測試null，發(fā)現它是Object類型。人們經常通過對對象設置null來清空對象，例如：其中，第2行代碼的輸出結果為null；第3行代碼的輸出結果為Object，說明此時person仍是一個對象，但值是null。2.1數據類型

2.1.2基本數據類型

5.未定義（Undefined）類型

JavaScript中的undefined表示沒有賦值的變量，例如：2.1數據類型

2.1.2基本數據類型６.Symbol類型

Symbol類型是ECMAScript6才引入的一種新的原始數據類型，表示獨一無二的值，主要用于定義對象的唯一屬性名。由于每一個Symbol的值都是不相等的，所以Symbol作為對象的屬性名，可以保證屬性不重名。2.1數據類型

2.1.3數據類型的轉換在JavaScript中，對不同數據類型的數據進行運算時，要先對數據類型進行轉換，得到相同的數據類型，才能進行運算。例如：計算表達式1+'1'的結果。在運算過程中，先將整型1轉換為字符串類型，再與后面的字符串進行連接操作，得到字符串'11'。數據類型的轉換有隱式轉換和顯式轉換兩種。2.1數據類型

2.1.3數據類型的轉換１.隱式轉換隱式轉換是指在計算過程中，JavaScript根據計算的需要，將操作數自動轉換為需要的類型的過程。隱式轉換是系統(tǒng)自動完成的。隱式轉換規(guī)則如表2-2所示。2.1數據類型2.1數據類型

2.1.3數據類型的轉換１.隱式轉換其中，第1行代碼將數字1與字符串'1'相“+”，先將數字1隱式轉換為字符串'1'，再與字符串'1'相連接，得到結果'11';第2行代碼將布爾值true與字符串'1'相“+”，先將布爾值true轉換為字符串'true'，再與字符串'1'相連接，得到結果"true1"；第3行代碼類似前兩行代碼處理，先將null轉換為字符串'null'，然后執(zhí)行連接操作，得到結果'null2'；第4行代碼先將字符串'10'轉換為數字10，再除以5，得到結果2；第5行代碼先將字符串'abc'轉換為數字NaN，再除以2，得到結果NaN；第6行代碼將true轉換為數字1，再與數字1相加，得到結果2。2.1數據類型

2.1.3數據類型的轉換２.顯式轉換顯式轉換是指由代碼編寫者通過JavaScript提供的轉換方法進行的強制數據類型轉換。JavaScript提供了Number、String、Boolean三個對象，以及parseInt、parseFloat、toString三個函數進行顯式轉換。顯式轉換規(guī)則如表2-3所示。2.1數據類型2.1數據類型

2.1.3數據類型的轉換２.顯式轉換在編程中，應根據實際需要對數據類型進行顯式轉換，例如：2.1數據類型

2.1.3數據類型的轉換２.顯式轉換其中，第7行代碼將字符串'123abc'解析為整型，字符串開頭部分為數字字符串，則將這部分解析為數字；第8行代碼，解析方法相似；第9行代碼，字符串以非數字開頭，整個字符串解析為NaN；第10行代碼將字符串'44'當作十六進制表示，并解析為整型，故解析為十進制數68；第13行代碼將12轉換為二進制的字符串。2.1數據類型

【課堂案例2-1】基本數據類型的應用案例描述：在頁面中輸出各種數據類型的數據，并對數據類型進行轉換，觀察結果。案例目標：掌握JavaScript的基本數據類型。掌握基本數據類型的轉換。案例代碼：（2-1.html）2.1數據類型

【課堂案例2-1】基本數據類型的應用案例結果：通過瀏覽器運行代碼，并打開瀏覽器控制臺，輸出各種數據類型的數據，如圖2-1所示。案例分析：通過document.write()方法向頁面輸出內容時，無論輸出的數據是什么類型，都將被轉換成字符串輸出。為了看到不同數據類型的輸出結果，本案例采用console.log()方法在控制臺輸出。另外，可以通過typeof測試數據的數據類型。2.1數據類型

2.1.4引用數據類型

JavaScript中除了基本數據類型外，還有一種引用數據類型，也稱為復雜數據類型。該數據類型存放的不是一個簡單的值，而是很多不同數據類型的值的集合。JavaScript中的基本數據類型是直接存儲在棧區(qū)的，操作時是對該數據的直接操作；而引用數據類型的數據是存儲在堆區(qū)的，在棧區(qū)中存放的是指向該數據的地址，即操作的是對該數據的引用。

JavaScript中的引用數據類型包括數組、函數、對象等。2.1數據類型

2.1.4引用數據類型１.數組

JavaScript中的數組是一組有序數據的集合。一個普通變量可以存放一個值，而數組可以存放多個值。數組中的每個值稱為數組元素。數組元素從0開始按順序進行編號，稱為索引?？梢酝ㄟ^索引訪問數組中指定位置的元素，例如：其中，第1行代碼定義數組類型變量arr，并初始化；第2行代碼訪問數組中的第3個元素，并輸出。通過索引訪問數組元素時，索引從0開始。2.1數據類型

2.1.4引用數據類型２.函數

JavaScript中的函數實際是一個對象，實現了對代碼塊的封裝。一般將一段具有獨立功能的代碼定義為一個函數，以便對代碼塊進行調用。函數定義的基本格式如下：

functionfunName(形參1,形參2,形參3,…){代碼塊

}

funciton是函數定義的關鍵字；funName是自定義的函數名，可以是任意合法的自定義標識符；形參實際就是變量，表示函數需要用到的一些參數，調用函數時傳遞不同的參數，即可實現不同的具體功能；“{”與“}”之間是函數中的代碼塊，即函數要實現的功能代碼，稱為函數體。2.1數據類型

2.1.4引用數據類型２.函數函數定義后，需要被調用才能起作用。函數調用的基本格式如下：

funName(實參1,實參2,實參3,…);在函數調用時，將實參依次傳遞給形參，并執(zhí)行函數定義中的代碼塊。帶參數的函數調用，可以在不改變函數定義的情況下，實現更多的功能，例如：其中，第1行代碼定義函數并取名為myPrint；第2行代碼為函數的函數體；第4行代碼，調用自定義函數，結果是在頁面輸出“這是自定義的輸出函數，輸出的內容為：hello”。2.1數據類型

2.1.4引用數據類型３.對象

JavaScript中的對象是擁有屬性和方法的數據集合?，F實生活中的萬事萬物皆可看作對象，如一輛汽車。汽車有顏色、尺寸、品牌、型號等特征，同時也有行駛功能。在程序中，通過變量描述對象的特征，稱為對象的屬性；通過函數描述對象的功能，稱為對象的方法。定義對象的基本格式如下：2.1數據類型

2.1.4引用數據類型３.對象

objName是自定義的對象名；“{”與“}”之間是對象的數據集合；對象的數據通過名稱和值的關系描述，如果值為基本數據，則稱之為對象的屬性，如果值是函數，則稱之為對象的方法。每項數據之間通過逗號隔開（不是分號），最后一項數據后可以省略逗號。2.1數據類型

2.1.4引用數據類型３.對象對象定義后，訪問對象屬性和方法的格式如下：

objName.屬性名；

objName.方法名(實參1,實參2,…);點運算符（.）實現了對對象屬性和方法的調用，例如：2.1數據類型

2.1.4引用數據類型３.對象其中，第1~7行代碼定義了一個對象；第8行和第9行代碼分別調用對象的屬性和方法。2.1數據類型

【課堂案例2-2】對象的基本應用案例描述：定義汽車對象，并定義汽車的屬性和方法，在頁面輸出汽車的信息。案例目標：了解對象的基本定義的方法。了解對象屬性和方法的調用的方法。2.1數據類型

【課堂案例2-2】對象的基本應用案例代碼：（2-2.html）2.1數據類型

【課堂案例2-2】對象的基本應用案例結果：通過瀏覽器運行代碼，結果如圖2-2所示。案例分析：第3~16行代碼定義car對象；第4~6行代碼定義對象的屬性；第7~15行代碼定義對象的方法；第19~21行代碼分別調用對象的屬性；第23、25、27行代碼分別調用對象的方法。在定義對象的方法時，可以在對象內直接賦值為一個匿名函數，也可以賦值為對象外定義的命名函數。

2.2變量和常量022.2變量和常量

JavaScript中的變量和常量都可以被視為存放數據的容器，都是內存中的一塊空間。兩者的不同之處在于,變量在程序運行過程中，值是可以改變的；而常量的值是不變的。

2.2.1常量在JavaScript中，常量是在程序運行過程中保持不變的量。在進行賦值操作時，“=”號右邊的值一般都為常量值，如123、"abc"等。在編寫代碼的過程中，有時需要重復用到同一個值，為了簡化代碼的書寫，提高開發(fā)效率，通常將這樣的值定義為一個常量。常量定義的基本格式如下：

const常量名=常量值;

const是定義常量的關鍵字；為區(qū)分變量和常量，常量名通常大寫。2.2變量和常量

2.2.1常量

常量定義后，在程序運行過程中，只能通過常量名對常量值進行調用，不能對其值進行修改，例如：其中，第1行代碼定義常量并賦值；第2行代碼輸出常量值3.14；第3行代碼試圖修改常量的值，報錯"Assignmenttoconstantvariable"。2.2變量和常量

2.2.2變量１.變量的定義

JavaScript中，定義變量的基本格式如下：

var變量名1,變量名2,…;

JavaScript中使用var關鍵字定義變量，定義時不需要嚴格定義變量類型。變量名必須符合JavaScript標識符規(guī)則，由Unicode字符和數字組成，具體規(guī)則如下：（1）變量名由字母、數字、下劃線(_)和美元符號($)組成。（2）變量名不能以數字開頭。（3）變量名中不能包含空格和其他標點符號。（4）變量名不能是JavaScript中的關鍵字。2.2變量和常量

2.2.2變量１.變量的定義

JavaScript中的關鍵字是預先定義好的有特殊作用的字符串，如var、function、null等。在自定義變量名、函數名、對象名、數組名等時，都不能使用這些關鍵字。Java-Script常用關鍵字如表2-4所示。2.2變量和常量2.2變量和常量

2.2.2變量

２.變量的賦值變量定義后，應該對其賦值。沒有賦值的變量，值為undefined。變量可以在定義的同時賦值，也可以先定義后賦值。JavaScript中也可以直接對未定義的變量賦值，例如：其中，第1行代碼定義兩個變量；第2行和第3行代碼分別對已定義的變量賦值；第4行代碼定義變量，同時對變量賦值；第5行代碼直接對未定義的變量賦值。2.2變量和常量

2.2.2變量

３.變量的作用域變量的作用域是指變量起作用的范圍。根據變量作用域的不同，可分為局部變量和全局變量。局部變量，是指在函數內部定義的變量。該變量的作用域范圍是從定義變量的位置到函數結束。函數執(zhí)行結束，局部變量自動銷毀。全局變量，是指在函數外定義的變量。該變量的作用域范圍是頁面中的所有Java-Script代碼。頁面關閉后，全局變量才銷毀。2.2變量和常量

2.2.2變量

３.變量的作用域在編程中，應根據實際需要適當設置全局和局部變量，例如：2.2變量和常量

2.2.2變量

３.變量的作用域

其中，第2行代碼調用變量str，由于第3行代碼定義了變量str，所以該行代碼未報錯，而是undefined的結果；第3行代碼定義局部變量str并賦值；第4行代碼調用變量str，此時str已經被賦值，結果為"JavaScript"；第6行代碼調用已定義的函數；第7行代碼定義全局變量num，并賦值；第8行代碼調用全局變量，結果為2；第9行代碼在函數外調用局部變量，報錯。2.2變量和常量

【課堂案例2-3】常量和變量的使用案例描述：求一個圓的周長和面積。案例目標：掌握常量的使用。掌握變量的使用。理解變量的作用域。案例代碼：（2-3.html）2.2變量和常量

【課堂案例2-3】常量和變量的使用案例結果：在瀏覽器中運行代碼，結果如圖2-3所示。案例分析：計算圓周長時，產生了精度丟失的現象。原因是JavaScript中將所有的數字都按照64位浮點數存儲。數據運算時，要先轉換為二進制，在轉換為二進制的過程中可能出現意想不到的情況，產生精度丟失。解決精度丟失，比較簡單的辦法就是通過toFixed()方法保留精度。

2.3運算符和表達式032.3運算符和表達式運算符又稱操作符，是完成算術運算、邏輯運算、關系運算等一系列操作的符號。由運算符和操作數構成的集合稱為表達式。表達式具有“值”和“類型”兩個屬性。

JavaScript中的運算符和表達式主要有以下幾類。（1）算術運算符和表達式。（2）賦值運算符和表達式。（3）關系運算符和表達式。（4）邏輯運算符和表達式。（5）字符串運算符和表達式。（6）條件運算符和表達式。（7）位運算符和表達式。2.3運算符和表達式

2.3.1算術運算符和表達式算術運算符一般用于算術運算，包括加、減、乘、除、取余、自加、自減等。算術運算符的具體用法如表2-5所示。2.3運算符和表達式

2.3.1算術運算符和表達式

在進行算術運算運算時，應遵循運算符的優(yōu)先級，也可以通過“()”改變優(yōu)先級。算術運算符的優(yōu)先級如圖2-4所示。2.3運算符和表達式

2.3.2賦值運算符和表達式賦值運算符一般用于將一個數據賦值給一個變量。賦值運算符可以和算術運算符、位運算符等結合，形成復合賦值運算符。賦值運算符的具體用法如表2-6所示。2.3運算符和表達式2.3運算符和表達式

2.3.3關系運算符和表達式關系運算符一般用于對兩個數據進行比較，并返回一個布爾值。關系表達式一般用于判斷語句中。關系運算符的具體用法如表2-7所示。2.3運算符和表達式2.3運算符和表達式

2.3.4邏輯運算符和表達式邏輯運算符用于測試變量或數據之間的邏輯關系，邏輯運算符兩側的數據都應是布爾型，返回結果也是布爾型。邏輯運算符的具體用法如表2-8所示。2.3運算符和表達式

2.3.5字符串運算符和表達式對兩個字符串進行“+”操作，表示連接兩個字符串。例如："hello"+"JavaScript"，結果為"helloJavaScript"。“+”也同樣用于兩個數字的算術加操作，判斷“+”是用于算術加，還是字符串連接，主要取決于操作數。如果兩側的操作數都是數字，則“+”表示算術加。如果兩側的操作數有一個是字符串，則“+”表示字符串連接。此時，兩側的操作數都將轉換為字符串類型。2.3運算符和表達式

2.3.6條件運算符和表達式條件運算符是一個需要3個數據的運算符，其作用相當于一個if…else語句。條件運算符的基本格式如下：條件表達式?表達式1：表達式2；當“條件表達式”為真時，返回“表達式1”的值；否則，返回“表達式2”的值，例如：其中，第4行代碼使用條件運算符，求x和y中的較大值，并賦值給變量z。2.3運算符和表達式

2.3.7位運算符和表達式位運算符是指將數據轉換為二進制數，對二進制數按位進行運算，再將運算結果轉換為十進制數返回。位運算符的具體用法如表2-9所示。2.3運算符和表達式

2.3.7位運算符和表達式2.3運算符和表達式【課堂案例2-4】運算符的使用案例描述：使用運算符，判斷年份是否是閏年。案例目標：掌握運算符的基本使用。案例代碼：（2-4.html）2.3運算符和表達式

【課堂案例2-4】運算符的使用案例結果：使用運算符，判斷年份是否是閏年。案例分析：第2行代碼通過函數prompt()接收用戶的輸入，并將其轉換為數字類型。第3行代碼通過條件運算符，判斷是否是閏年。閏年的條件是，能被4整除，且不能被100整除；或能被400整除。第4行代碼通過函數alert()輸出信息，輸出的內容通過字符串連接符（+）進行連接。

2.4本章小結04本章主要講解了JavaScript中的數據類型、變量和常量、運算符和表達式等基礎語法知識。

JavaScript包含數字、字符串、布爾、空、未定義等基本數據類型，還包含數組、函數和對象等引用數據類型。在ECMAScript6中引入了Symbol類型，表示一個唯一的值。在進行數據運算時，不同的數據類型會進行數據類型的轉換，可以是隱式轉換，也可以是顯式轉換。

JavaScript中通過變量存放數據，對于在程序運行過程中始終不變的量，可以定義為常量。根據變量作用的范圍，將變量分為局部變量和全局變量。在程序中，應盡可能使用局部變量，更合理地利用內存空間。

JavaScript通過運算符對數據進行各種運算，包括算術運算符、賦值運算符、邏輯運算符、關系運算符、字符串連接符、條件運算符和位運算符等。合理的使用條件運算符，可以減少代碼量。由操作數和操作符構成表達式，表達式構成語句，一條一條的語句就構成了程序。2.4本章小結謝謝觀看！JavaScript基礎教程第3章JavaScript程序結構學習目標

3.1順序結構013.1順序結構

順序結構是指按照語句在程序中的先后順序，逐條依次執(zhí)行的程序結構。順序結構是程序中最簡單、最基本的結構。順序結構如圖3-1所示。3.1順序結構JavaScript中的一條語句通常以分號（;）結束。語句一般由運算符和操作數構成的表達式組成，也可以包含函數調用、關鍵字、注釋等。語句代表了發(fā)送給JavaScript引擎的一條指令，由不同的語句就構成了整個JavaScript程序，例如：整個程序中的語句按照語句的順序依次執(zhí)行。第3行代碼在“=”的兩邊增加空格，以提高代碼的可讀性。3.1順序結構

3.2選擇結構023.2選擇結構

選擇結構是指在程序運行過程中，會根據一定的條件判斷，選擇性地執(zhí)行一部分語句。通常需要根據某個條件是否滿足來決定是否執(zhí)行指定的語句，或者從給定的兩個或多個語句中選擇其一。基本的選擇結構如圖3-2所示。3.2選擇結構

3.2.1簡單的if語句簡單的if語句一般用于簡單的條件判斷。在JavaScript中，if語句的一般格式如下：“表達式”一般是關系表達式，返回一個布爾值，也可以是邏輯表達式，甚至是一個常量值，只要其值能轉換為一個布爾值即可?！罢Z句塊”可以是一條或多條語句，當有多條語句時，必須將語句塊以“{}”括起來，當只有一條語句時，“{}”可以省略，例如：3.2選擇結構3.2選擇結構

3.2.1簡單的if語句其中，第3~5行代碼通過對話框接收用戶輸入，并分別存儲在三個變量中；第6行代碼使用if語句判斷x和y變量值的大小，如果x大于y，則執(zhí)行第7~9行代碼，交換x和y的值,否則跳過此代碼塊，繼續(xù)執(zhí)行后面的代碼;第11行代碼對x和z比較大小，第16行代碼對y和z比較大小，當大的數在前面時，則交換位置;第21行代碼將交換位置后的三個數從小到大依次輸出。3.2選擇結構3.2.2if語句的其他形式if語句除了上面的一般形式外，還可以添加else子句，在else子句部分還可以嵌套多層的if語句，用于對更復雜條件的判斷。1、if…else形式3.2選擇結構3.2.2if語句的其他形式1、if…else形式當“表達式”為真時，執(zhí)行語句塊1，否則（即“表達式”為假）執(zhí)行語句塊2，例如：其中，第7行代碼與第4行代碼匹配，表示“x>0”不成立的條件，即x小于或等于零。3.2選擇結構3.2.2if語句的其他形式2、if…elseif…形式在else子句部分，還可以嵌套多層的if語句，間接實現多分支結構。if…elseif…的一般格式如下：3.2選擇結構3.2.2if語句的其他形式2、if…elseif…形式通過if…elseif…實現的選擇結構如圖3-3所示。3.2選擇結構3.2.2if語句的其他形式2、if…elseif…形式if…elseif…可以實現較為復雜的選擇結構，例如：3.2選擇結構3.2.2if語句的其他形式2、if…elseif…形式if…elseif…可以實現較為復雜的選擇結構，例如：其中，第12行代碼對第一種可能的情況進行判斷；第15行代碼對第二種可能的情況進行判斷；第20行代碼對第三種可能的情況進行判斷。對于分支較多的情況，使用這種形式雖然可以實現，但比較麻煩。JavaScript提供了專門的多分支語句switch…case,后面將進行詳細介紹。3.2選擇結構3.2.3if語句的嵌套在if語句的不同形式中，if子句和else子句中都可以再嵌套完整的if語句，構成if語句的嵌套。嵌套if語句的一般格式如下：3.2選擇結構3.2.3if語句的嵌套在有多層if語句嵌套時，要注意else與if的正確匹配關系，else始終與最近的if進行匹配，例如：3.2選擇結構3.2.3if語句的嵌套在有多層if語句嵌套時，要注意else與if的正確匹配關系，else始終與最近的if進行匹配，例如：其中，第9~14行代碼是嵌套的if語句，在第8行代碼的條件為真時才會被執(zhí)行；第17~22行代碼也是嵌套的if語句,在第8行代碼的條件為假時才會被執(zhí)行。3.2選擇結構【課堂案例3-1】if語句的基本使用案例描述：某企業(yè)根據利潤發(fā)放獎金的規(guī)則如下：利潤低于或等于１５００００元時，按利潤的１０％提成；利潤低于或等于３０００００元時，低于１５００００元的部分，按１０％提成，高于１５００００元的部分，按7.5％提成；利潤低于或等于600000元時，低于300000元的部分按前面的辦法提成，高于300000元的部分，按1.5％提成；利潤高于600000元時，超過600000元的部分，按1％提成。輸入利潤，計算應發(fā)獎金總額。案例目標：掌握ｉｆ語句的基本使用。3.2選擇結構【課堂案例3-1】if語句的基本使用案例代碼：(3-1.html)3.2選擇結構【課堂案例3-1】if語句的基本使用案例結果：通過瀏覽器運行代碼，效果如圖3-4所示。案例分析：第13行的else與第10行的if配對，即“i>600000”。3.2選擇結構3.2.4switch…case語句實現多分支選擇結構使用if語句可以實現簡單的分支結構，如果要間接實現多分支需要使用多個if或if…else的配合，程序結構較為復雜。JavaScript提供了直接實現多分支的程序語句switch…case,switch…case語句的基本格式如下：程序運行時，會先計算“表達式”的值，然后判斷表達式的值，如果與“常量表達式1”的值相等，則執(zhí)行“語句組1”；如果與“常量表達式2”的值相等，則執(zhí)行“語句組2”，以此類推。如果表達式的值不與任何一個常量表達式的值相等，則執(zhí)行“default”后的“語句組n”。break語句的作用是退出整個switch分支。在大多數情況下，每個語句組后都應該有一個break語句。default后的語句組后一般不需要break語句，例如：3.2選擇結構3.2.4switch…case語句實現多分支選擇結構其中，第3行代碼中Math.floor()函數的作用是對參數向下取整，如Math.floor(87/10)將得到結果8；第5行代碼和第6行代碼的語句組是一樣的，可以只保留第6行的語句組，寫成如下形式：3.2選擇結構【課堂案例3-2】switch語句的基本使用案例描述：簡單的日程查詢。根據輸入的日程，查詢出當日的活動內容。日程安排如表3-1。案例目標：掌握switch語句的基本使用。3.2選擇結構【課堂案例3-2】switch語句的基本使用案例代碼：（3-2.html）3.2選擇結構【課堂案例3-2】switch語句的基本使用案例結果：通過瀏覽器運行代碼，效果如圖3-5所示。案例分析：第3行代碼聲明變量content，用于保存日程安排的具體內容；第4~12行代碼對date值進行判斷，并根據判斷結果對content賦不同的值；第13行代碼將結果輸出。讀者可以改變date變量的值，查看不同的運行結果。

3.3循環(huán)結構033.3循環(huán)結構循環(huán)結構是指在程序運行過程中，重復執(zhí)行一段代碼塊的結構。在實際問題中，往往用于解決需要重復處理的問題。一般循環(huán)結構的流程如圖3-6所示。JavaScript中提供了while語句、do…while語句、for語句和for…in語句，用于實現循環(huán)結構。其中,for…in語句一般用于數組的遍歷操作。3.3循環(huán)結構3.3.1while語句while語句的一般格式如下：在執(zhí)行while語句時，首先判斷“表達式”的值，如果值為真，則執(zhí)行語句塊代碼，接著繼續(xù)判斷“表達式”的值，如果值為真，則重復執(zhí)行語句塊代碼，直到“表達式”的值為假，退出while語句。每次執(zhí)行完語句塊代碼后，都要重新判斷“表達式”的值，以確定是繼續(xù)重復執(zhí)行代碼，還是退出循環(huán)。為了不形成死循環(huán)，每次循環(huán)后，“表達式”應該有變化，例如：3.3循環(huán)結構其中，第2行代碼設置循環(huán)的初始量；第4行代碼使用while循環(huán)，并設置循環(huán)條件；第5行和第6行代碼是循環(huán)的語句塊，i++為循環(huán)增量，如果沒有第6行代碼，將形成死循環(huán)。3.3.1while語句3.3循環(huán)結構在執(zhí)行do…while語句時，先執(zhí)行一次語句塊，再判斷“表達式”的值，如果值為真，則循環(huán)執(zhí)行語句塊，直到表達式的值為假，退出循環(huán)。與while語句不同的是，do…while至少會執(zhí)行一次語句塊，例如：3.3.2do…while語句do…while語句的一般格式如下：3.3循環(huán)結構3.3.2do…while語句執(zhí)行此代碼得到的結果與上面while語句實現的結果是一樣。3.3循環(huán)結構3.3.3for語句在JavaScript中，還有一種更加靈活的循環(huán)語句，那就是for語句。for語句的一般格式如下：在執(zhí)行到for語句時，先執(zhí)行“表達式1”，然后判斷“表達式2”的值，如果值為真，則執(zhí)行“語句塊”和“表達式3”，再繼續(xù)判斷“表達式2”的值，如果值為真，則循環(huán)執(zhí)行“語句塊”和“表達式3”，直到“表達式2”的值為假，退出循環(huán)。for循環(huán)結構的一般流程如圖3-7所示。3.3循環(huán)結構3.3.3for語句for語句實現循環(huán)是程序中經常使用的，例如：其中，第3行代碼中的“vari=0;”和“i++;”語句也可以寫在程序中的其他位置，上面的代碼可以改寫為：3.3循環(huán)結構3.3.3for語句3.3循環(huán)結構3.3.4for…in語句JavaScript還提供了for…in語句，專門用于數組元素和對象屬性的遍歷操作。for…in語句的一般格式如下：其中，“變量名”是用戶定義的變量，用來訪問數組元素或對象屬性；“對象名”是要操作的對象，可以是數組名或對象的名稱；“語句塊”是要重復執(zhí)行的代碼塊，例如：3.3循環(huán)結構3.3.4for…in語句其中，第2行代碼定義一個數組，并初始化；第3~5行代碼對數組進行遍歷操作，變量index用來保存數組元素的索引。每循環(huán)一次，索引依次往后增加，直到將數組元素訪問完，循環(huán)結束。在瀏覽器中運行此代碼，結果如圖3-8所示。使用for…in操作對象屬性，與操作數組元素類似，例如：3.3循環(huán)結構3.3.4for…in語句其中，第2行代碼定義一個對象，并初始化；第3~5行代碼對對象屬性進行遍歷操作，變量attr用來保存對象的屬性名。每循環(huán)一次，自動往后訪問對象的下一個屬性，直到將對象屬性訪問完，循環(huán)結束。在瀏覽器中運行此代碼，結果如圖3-9所示。3.3循環(huán)結構3.3.5循環(huán)控制語句前面關于循環(huán)的舉例中，都是根據設定好的循環(huán)條件正常執(zhí)行和終止循環(huán)，在現實問題中，可能出現某種需要提前結束循環(huán)的操作。例如，在慈善募捐中，當募捐款達到一定數量，就可結束。使用循環(huán)可以處理此問題，但不能確定循環(huán)的次數，需要將每次募捐款的數量累加，并判斷是否達到需要的數量，如果沒有達到則繼續(xù)，如果達到了就終止循環(huán)。在JavaScript中可以通過break和continue語句對循環(huán)進行控制。1、break語句break語句可用于跳出switch分支，也可用于跳出當前循環(huán)，繼續(xù)執(zhí)行循環(huán)后面的語句，例如：3.3循環(huán)結構3.3.5循環(huán)控制語句1、break語句3.3循環(huán)結構3.3.5循環(huán)控制語句1、break語句其中，第5行代碼使用while循環(huán)，循環(huán)條件始終為“真”；第6行代碼判斷sum的值，如果大于或等于10萬元，則執(zhí)行第7行代碼，退出整個循環(huán)，否則，執(zhí)行else中的代碼塊；每循環(huán)一次，都要執(zhí)行第6行代碼，只要“sum>=100000”成立，執(zhí)行break語句就可以退出整個循環(huán)。在瀏覽器中運行此代碼，結果如圖3-10所示。3.3循環(huán)結構3.3.5循環(huán)控制語句2、continue語句continue語句用于結束本次循環(huán)，繼續(xù)下一次循環(huán)，例如：其中，第3行代碼判斷i值是否能被3整除，如果能整除，則執(zhí)行continue語句，結束本次循環(huán)；只有第3行代碼中的條件不成立，才會執(zhí)行第6行代碼。在瀏覽器中運行此代碼，結果如圖3-11所示。3.3循環(huán)結構3.3.5循環(huán)控制語句2、continue語句3.3循環(huán)結構3.3.6循環(huán)嵌套一個循環(huán)體內可以包含另一個循環(huán)，稱為循環(huán)的嵌套。內嵌的循環(huán)中又可以再包含循環(huán)，構成多重循環(huán)。while循環(huán)、do…while循環(huán)和for循環(huán)都可以相互嵌套。下面的幾種嵌套都是合法的?！瓆（5）do{…for(;;){…}…}while();（6）for(;;){…for(;;){…}…}（7）for(;;){…while(){…}…}（1）while(){…while(){…}…}（2）while(){…do{…}while();…}（3）do{…do{…}while();…}while();（4）while(){…for(;;){…}3.3循環(huán)結構3.3.6循環(huán)嵌套在解決實際問題時，應根據需要合理使用循環(huán)嵌套。例如，要輸出如下矩陣：1234246836912481216先分析，這是一個4行4列的矩陣，應該使用雙重循環(huán)嵌套實現。用外循環(huán)控制行的輸出，內循環(huán)控制列的輸出。行數由1遞增到4，列數也由1遞增到4，輸出的數據剛好是行乘以列的結果，如第3行第2列的數據等于3×2的結果。每輸出4個數據進行一次換行。由此可以編寫出如下程序代碼：3.3循環(huán)結構3.3.6循環(huán)嵌套其中，第2行代碼定義變量n，用于記錄輸出數據的個數；第4~7行代碼構成內循環(huán)；第5行代碼判斷當輸出的數據個數為4的整數倍時進行換行。在瀏覽器中運行此代碼，結果如圖3-12所示。3.3循環(huán)結構【課堂案例3-3】循環(huán)的基本使用案例描述：有一個有趣的古典數學問題：有一對兔子，從出生后第3個月起，每個月都生一對兔子。小兔子長到第3個月后，每個月又生一對兔子。假設所有兔子都不死，每個月的兔子對數是多少？這就是Fibonacci數列，數列的特點是，第1個和第2個數為1，從第3個數開始，每個數是前兩個數之和，即：F1=1(n=1)F2=1(n=1)Fn=Fn-1+Fn-2(n>=3)求Fibonacci數列的前40個數。案例目標：掌握循環(huán)的基本使用。掌握循環(huán)嵌套的使用。3.3循環(huán)結構【課堂案例3-3】循環(huán)的基本使用案例代碼：（3-3.html）3.3循環(huán)結構【課堂案例3-3】循環(huán)的基本使用案例結果：通過瀏覽器運行代碼，效果如圖3-13所示。案例分析：第3行代碼和第13行代碼輸出一個表格的開始標記和結束標記，將數據輸出到一個表格中；第4行代碼用于控制行數；第6行代碼用于控制列數；由于第7行代碼每次輸出兩列，所以循環(huán)兩次，每行可以輸出4列；第8行和第9行代碼求出將要輸出的后兩個數。由于每次輸出兩個數，所以總共只需要循環(huán)20次，即可輸出40個數。在解決此類實際問題時，可以將前幾個數列出一個表格，分析數據之間的關系，得出規(guī)律后，再根據規(guī)律編寫程序。

3.4本章小結04本章主要講解了JavaScript程序的基本結構。JavaScript程序一般分為順序結構、選擇結構和循環(huán)結構三種。順序結構是指程序代碼按照程序語句的順序逐條執(zhí)行，是程序結構中最簡單的一種。選擇結構是指按照條件選擇執(zhí)行某塊代碼的結構，這也是程序中常見的一種結構。在選擇結構中，最簡單的是if語句，滿足if后面的條件則執(zhí)行相應的代碼塊，否則不執(zhí)行。由if…else…構成的選擇結構，包含了兩個分支，滿足if條件時執(zhí)行一個代碼塊，否則執(zhí)行另一代碼塊。if…elseif…可以構成更多的條件判斷。if語句的各種形式也可以按照語法規(guī)則進行嵌套。嵌套的if語句相當于在某一條件下，進行更細的條件判斷。對于較復雜的多分支結構，還可以通過switch…case…語句實現。3.4本章小結循環(huán)結構是指在特定情況下重復執(zhí)行某一代碼塊的結構。循環(huán)結構可以通過while、do…while、for、for…in等基本語句實現。無論何種循環(huán)語句，都應該有執(zhí)行循環(huán)和退出循環(huán)的條件，除非是特殊需要。while和do…while語句的用法基本相同，區(qū)別在于while語句是先判斷條件，在條件滿足時執(zhí)行循環(huán)語句塊，do…while語句是先執(zhí)行一次循環(huán)語句塊，再根據條件判斷是否繼續(xù)執(zhí)行循環(huán)語句塊。for語句的作用與while語句相同，從語法上看，for語句將循環(huán)初始量、循環(huán)條件和循環(huán)增量都寫在了for后的括號內，while語句則是寫在程序不同的三個