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

JavaScript基礎教程01第1章JavaScript簡介02第2章JavaScript語法基礎03第3章JavaScript程序結構04第4章函數(shù)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的數(shù)據(jù)類型、Java的對象體系、Scheme的函數(shù)等。腳本語言也稱為動態(tài)語言，以文本保存，可以使用任何文本編輯器編寫。腳本語言一般比較簡單、易學、易用，類似于命令，可以快速開發(fā)，方便部署，運行簡單。腳本語言根據(jù)運行環(huán)境劃分，可以分為客戶端腳本語言和服務器端腳本語言。1.1什么是JavaScript客戶端腳本語言可以在客戶端直接運行，一般不需要連接數(shù)據(jù)庫，可以減小服務器的壓力?？蛻舳四_本語言不需要編譯，通過瀏覽器還可以看到源代碼，相對沒有那么安全。一般使用客戶端腳本語言進行有效性驗證，比如表單驗證，驗證兩次密碼是否一致。常見的客戶端腳本語言有JavaScript、JScript、VBScript等。服務器端腳本語言也是人們說的后臺編程語言，一般需要連接數(shù)據(jù)庫和編譯成二進制可執(zhí)行文件再執(zhí)行，通過瀏覽器不能查看源代碼，相對于客戶端腳本語言更安全。一般使用服務器端腳本語言進行安全驗證，比如可以使用加密算法，將密碼加密后保存到數(shù)據(jù)庫當中。常見的服務器端腳本語言有ASP、PHP、JSP等。1.1什么是JavaScript

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

JavaScript主要用于Web前端開發(fā)，想做前端開發(fā)就必須了解JavaScript。現(xiàn)在前端專業(yè)有很多框架，比如比較流行的Bootstrap、Foundation、Vue.js、Angular.js等框架，都要用到JavaScript或者jQuery，jQuery是JavaScript的代碼庫，也是基于JavaScript基礎的。比如Bootstrap要實現(xiàn)輪播圖、折疊、響應式導航、下拉菜單等就必須先引用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的函數(shù)，C語言是面向過程的編程語言。

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

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

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

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

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

JavaScript以文本保存，可以使用任何文本編輯器編寫。比如最簡單的記事本，EditPlus也方便小巧，EditPlus編輯器功能更強大，不僅可以處理文本、HTML程序語言，同時編輯多文件，還可以無限制地撤銷與重做。JavaScript一般嵌套在HTML代碼中，所以可以根據(jù)網頁需求選擇不同的編輯器。現(xiàn)在比較流行的編輯器有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（數(shù)字天堂）公司推出的，現(xiàn)在很多公司開發(fā)時都使用的是HBuilder，HBuilder初始界面有軟件使用手冊，HBuilder的最大優(yōu)勢是快，有完整的語法提示、代碼塊等，可以大大提高開發(fā)效率。創(chuàng)建Web項目時可以自動生成CSS、IMG、JS文件夾。其工作界面如圖1-4所示。其中，Dreamweaver開發(fā)效率相對要低些，但站點管理和拆分視圖還不錯，可以一邊敲代碼一邊看效果，能很快看到效果，方便教學，很多老師教學都使用的是Dreamweaver軟件，對于初學者也適合使用Dreamweaver。但對于公司來說，更注重開發(fā)效率，一般使用的是SublimeText和HBuilder。用戶可以根據(jù)具體情況選擇不同的軟件進行編碼。1.4JavaScript開發(fā)環(huán)境1.4JavaScript開發(fā)環(huán)境

1.4.2瀏覽器瀏覽器是用來顯示網頁中的文字、圖像等信息，用戶還可以通過瀏覽器進行操作，產生交互效果。從1990年瀏覽器誕生至今，有很多瀏覽器，但瀏覽器的內核有所不同，都有各自的私有屬性，也就出現(xiàn)了兼容性問題?，F(xiàn)在主流的瀏覽器有谷歌、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)?；鸷鼮g覽器調試JavaScript與IE、谷歌類似，按F12鍵，打開調試器面板，可以通過斷點調試，如圖1-7所示。1.4JavaScript開發(fā)環(huán)境

1.4.3Web服務器

Web服務器的主要作用是可以放置網站文件、數(shù)據(jù)文件等相關文件，可供全世界瀏覽、下載。Web服務器的工作原理：先與瀏覽器建立連接，用戶可以發(fā)出請求，然后Web服務器做出響應，最后將效果返還瀏覽器。IIS服務器是現(xiàn)在流行的大型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!"，可以有很多方式實現(xiàn)，現(xiàn)詳細講解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數(shù)據(jù)類型012.1數(shù)據(jù)類型數(shù)據(jù)類型是對數(shù)據(jù)的一種描述。程序語言中引入數(shù)據(jù)類型既是為了更合理地分配內存空間，也規(guī)范了數(shù)據(jù)之間的操作。JavaScript中的數(shù)據(jù)類型可以簡單地分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。2.1數(shù)據(jù)類型

2.1.1JavaScript數(shù)據(jù)類型的特點

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

2.1.2基本數(shù)據(jù)類型

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

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

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

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

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

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

2.1.2基本數(shù)據(jù)類型２.字符串（String）型

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

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

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

2.1.2基本數(shù)據(jù)類型２.字符串（String）型

2.1數(shù)據(jù)類型

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

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

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

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

2.1.2基本數(shù)據(jù)類型４.空（Null）類型

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

2.1.2基本數(shù)據(jù)類型

5.未定義（Undefined）類型

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

2.1.2基本數(shù)據(jù)類型６.Symbol類型

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

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

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

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

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

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

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

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

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

2.1.4引用數(shù)據(jù)類型

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

JavaScript中的引用數(shù)據(jù)類型包括數(shù)組、函數(shù)、對象等。2.1數(shù)據(jù)類型

2.1.4引用數(shù)據(jù)類型１.數(shù)組

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

2.1.4引用數(shù)據(jù)類型２.函數(shù)

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

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

}

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

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

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

2.1.4引用數(shù)據(jù)類型３.對象

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

2.1.4引用數(shù)據(jù)類型３.對象

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

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

objName.屬性名；

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

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

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

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

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

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

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

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字符和數(shù)字組成，具體規(guī)則如下：（1）變量名由字母、數(shù)字、下劃線(_)和美元符號($)組成。（2）變量名不能以數(shù)字開頭。（3）變量名中不能包含空格和其他標點符號。（4）變量名不能是JavaScript中的關鍵字。2.2變量和常量

2.2.2變量１.變量的定義

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

2.2.2變量

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

2.2.2變量

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

2.2.2變量

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

2.2.2變量

３.變量的作用域

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

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

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

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

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賦值運算符和表達式賦值運算符一般用于將一個數(shù)據(jù)賦值給一個變量。賦值運算符可以和算術運算符、位運算符等結合，形成復合賦值運算符。賦值運算符的具體用法如表2-6所示。2.3運算符和表達式2.3運算符和表達式

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

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

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

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

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

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

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

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

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

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

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

3.1順序結構013.1順序結構

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

3.2選擇結構023.2選擇結構

選擇結構是指在程序運行過程中，會根據(jù)一定的條件判斷，選擇性地執(zhí)行一部分語句。通常需要根據(jù)某個條件是否滿足來決定是否執(zhí)行指定的語句，或者從給定的兩個或多個語句中選擇其一?；镜倪x擇結構如圖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比較大小，當大的數(shù)在前面時，則交換位置;第21行代碼將交換位置后的三個數(shù)從小到大依次輸出。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語句，間接實現(xiàn)多分支結構。if…elseif…的一般格式如下：3.2選擇結構3.2.2if語句的其他形式2、if…elseif…形式通過if…elseif…實現(xiàn)的選擇結構如圖3-3所示。3.2選擇結構3.2.2if語句的其他形式2、if…elseif…形式if…elseif…可以實現(xiàn)較為復雜的選擇結構，例如：3.2選擇結構3.2.2if語句的其他形式2、if…elseif…形式if…elseif…可以實現(xiàn)較為復雜的選擇結構，例如：其中，第12行代碼對第一種可能的情況進行判斷；第15行代碼對第二種可能的情況進行判斷；第20行代碼對第三種可能的情況進行判斷。對于分支較多的情況，使用這種形式雖然可以實現(xiàn)，但比較麻煩。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è)根據(jù)利潤發(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語句實現(xiàn)多分支選擇結構使用if語句可以實現(xiàn)簡單的分支結構，如果要間接實現(xiàn)多分支需要使用多個if或if…else的配合，程序結構較為復雜。JavaScript提供了直接實現(xiàn)多分支的程序語句switch…case,switch…case語句的基本格式如下：程序運行時，會先計算“表達式”的值，然后判斷表達式的值，如果與“常量表達式1”的值相等，則執(zhí)行“語句組1”；如果與“常量表達式2”的值相等，則執(zhí)行“語句組2”，以此類推。如果表達式的值不與任何一個常量表達式的值相等，則執(zhí)行“default”后的“語句組n”。break語句的作用是退出整個switch分支。在大多數(shù)情況下，每個語句組后都應該有一個break語句。default后的語句組后一般不需要break語句，例如：3.2選擇結構3.2.4switch…case語句實現(xiàn)多分支選擇結構其中，第3行代碼中Math.floor()函數(shù)的作用是對參數(shù)向下取整，如Math.floor(87/10)將得到結果8；第5行代碼和第6行代碼的語句組是一樣的，可以只保留第6行的語句組，寫成如下形式：3.2選擇結構【課堂案例3-2】switch語句的基本使用案例描述：簡單的日程查詢。根據(jù)輸入的日程，查詢出當日的活動內容。日程安排如表3-1。案例目標：掌握switch語句的基本使用。3.2選擇結構【課堂案例3-2】switch語句的基本使用案例代碼：（3-2.html）3.2選擇結構【課堂案例3-2】switch語句的基本使用案例結果：通過瀏覽器運行代碼，效果如圖3-5所示。案例分析：第3行代碼聲明變量content，用于保存日程安排的具體內容；第4~12行代碼對date值進行判斷，并根據(jù)判斷結果對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語句，用于實現(xiàn)循環(huán)結構。其中,for…in語句一般用于數(shù)組的遍歷操作。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語句實現(xiàn)的結果是一樣。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語句實現(xiàn)循環(huán)是程序中經常使用的，例如：其中，第3行代碼中的“vari=0;”和“i++;”語句也可以寫在程序中的其他位置，上面的代碼可以改寫為：3.3循環(huán)結構3.3.3for語句3.3循環(huán)結構3.3.4for…in語句JavaScript還提供了for…in語句，專門用于數(shù)組元素和對象屬性的遍歷操作。for…in語句的一般格式如下：其中，“變量名”是用戶定義的變量，用來訪問數(shù)組元素或對象屬性；“對象名”是要操作的對象，可以是數(shù)組名或對象的名稱；“語句塊”是要重復執(zhí)行的代碼塊，例如：3.3循環(huán)結構3.3.4for…in語句其中，第2行代碼定義一個數(shù)組，并初始化；第3~5行代碼對數(shù)組進行遍歷操作，變量index用來保存數(shù)組元素的索引。每循環(huán)一次，索引依次往后增加，直到將數(shù)組元素訪問完，循環(huán)結束。在瀏覽器中運行此代碼，結果如圖3-8所示。使用for…in操作對象屬性，與操作數(shù)組元素類似，例如：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)的舉例中，都是根據(jù)設定好的循環(huán)條件正常執(zhí)行和終止循環(huán)，在現(xiàn)實問題中，可能出現(xiàn)某種需要提前結束循環(huán)的操作。例如，在慈善募捐中，當募捐款達到一定數(shù)量，就可結束。使用循環(huán)可以處理此問題，但不能確定循環(huán)的次數(shù)，需要將每次募捐款的數(shù)量累加，并判斷是否達到需要的數(shù)量，如果沒有達到則繼續(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)嵌套在解決實際問題時，應根據(jù)需要合理使用循環(huán)嵌套。例如，要輸出如下矩陣：1234246836912481216先分析，這是一個4行4列的矩陣，應該使用雙重循環(huán)嵌套實現(xiàn)。用外循環(huán)控制行的輸出，內循環(huán)控制列的輸出。行數(shù)由1遞增到4，列數(shù)也由1遞增到4，輸出的數(shù)據(jù)剛好是行乘以列的結果，如第3行第2列的數(shù)據(jù)等于3×2的結果。每輸出4個數(shù)據(jù)進行一次換行。由此可以編寫出如下程序代碼：3.3循環(huán)結構3.3.6循環(huán)嵌套其中，第2行代碼定義變量n，用于記錄輸出數(shù)據(jù)的個數(shù)；第4~7行代碼構成內循環(huán)；第5行代碼判斷當輸出的數(shù)據(jù)個數(shù)為4的整數(shù)倍時進行換行。在瀏覽器中運行此代碼，結果如圖3-12所示。3.3循環(huán)結構【課堂案例3-3】循環(huán)的基本使用案例描述：有一個有趣的古典數(shù)學問題：有一對兔子，從出生后第3個月起，每個月都生一對兔子。小兔子長到第3個月后，每個月又生一對兔子。假設所有兔子都不死，每個月的兔子對數(shù)是多少？這就是Fibonacci數(shù)列，數(shù)列的特點是，第1個和第2個數(shù)為1，從第3個數(shù)開始，每個數(shù)是前兩個數(shù)之和，即：F1=1(n=1)F2=1(n=1)Fn=Fn-1+Fn-2(n>=3)求Fibonacci數(shù)列的前40個數(shù)。案例目標：掌握循環(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行代碼輸出一個表格的開始標記和結束標記，將數(shù)據(jù)輸出到一個表格中；第4行代碼用于控制行數(shù)；第6行代碼用于控制列數(shù)；由于第7行代碼每次輸出兩列，所以循環(huán)兩次，每行可以輸出4列；第8行和第9行代碼求出將要輸出的后兩個數(shù)。由于每次輸出兩個數(shù)，所以總共只需要循環(huán)20次，即可輸出40個數(shù)。在解決此類實際問題時，可以將前幾個數(shù)列出一個表格，分析數(shù)據(jù)之間的關系，得出規(guī)律后，再根據(jù)規(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…語句實現(xiàn)。3.4本章小結循環(huán)結構是指在特定情況下重復執(zhí)行某一代碼塊的結構。循環(huán)結構可以通過while、do…while、for、for…in等基本語句實現(xiàn)。無論何種循環(huán)語句，都應該有執(zhí)行循環(huán)和退出循環(huán)的條件，除非是特殊需要。while和do…while語句的用法基本相同，區(qū)別在于while語句是先判斷條件，在條件滿足時執(zhí)行循環(huán)語句塊，do…while語句是先執(zhí)行一次循環(huán)語句塊，再根據(jù)條件判斷是否繼續(xù)執(zhí)行循環(huán)語句塊。for語句的作用與while語句相同，從語法上看，for語句將循環(huán)初始量、循環(huán)條件和循環(huán)增量都寫在了for后的括號內，while語句則是寫在程序不同的三個