HTML+CSS+JavaScript項(xiàng)目7-教學(xué)講解課件

上傳人：平*** IP屬地：貴州上傳時(shí)間：2022-12-30 格式：PPTX 頁(yè)數(shù)：128 大?。?.71MB 積分：20 舉報(bào) 版權(quán)申訴

HTML+CSS+JavaScript項(xiàng)目7-教學(xué)講解課件_第2頁(yè)

HTML+CSS+JavaScript項(xiàng)目7-教學(xué)講解課件_第3頁(yè)

HTML+CSS+JavaScript項(xiàng)目7-教學(xué)講解課件_第4頁(yè)

HTML+CSS+JavaScript項(xiàng)目7-教學(xué)講解課件_第5頁(yè)

已閱讀5頁(yè)，還剩123頁(yè)未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

項(xiàng)目7

“趕快回家網(wǎng)”首頁(yè)面制作·運(yùn)算符和表達(dá)式·函數(shù)的調(diào)用·JavaScript基本語(yǔ)法·流程控制語(yǔ)句HTML項(xiàng)目7“趕快回家網(wǎng)”首頁(yè)面制作·運(yùn)算符和表達(dá)式·Jav【任務(wù)7-1】JavaScript概述【任務(wù)7-2】JavaScript語(yǔ)言基礎(chǔ)【任務(wù)7-3】流程控制語(yǔ)句【任務(wù)7-5】制作“趕快回家網(wǎng)”首頁(yè)面【任務(wù)7-4】函數(shù)目錄【任務(wù)7-1】JavaScript概述【任務(wù)7-2】Java【任務(wù)7-1】認(rèn)識(shí)表格相關(guān)標(biāo)記

知識(shí)引入需求分析JavaScript是Web上一種功能強(qiáng)大的編程語(yǔ)言，用于開(kāi)發(fā)交互式的Web頁(yè)面。它不需要進(jìn)行編譯，而是直接嵌入在HTML頁(yè)面中，把靜態(tài)頁(yè)面轉(zhuǎn)變成支持用戶交互并響應(yīng)事件的動(dòng)態(tài)頁(yè)面。本章將對(duì)JavaScript簡(jiǎn)介、JavaScript的引入方式和基本語(yǔ)法進(jìn)行詳細(xì)講解。【任務(wù)7-1】認(rèn)識(shí)表格相關(guān)標(biāo)記

知識(shí)引入需求分析JavaSc12JavaScript引入方式3JavaScript基本語(yǔ)法知識(shí)引入JavaScript簡(jiǎn)介4一個(gè)簡(jiǎn)單的JavaScript程序【任務(wù)7-1】認(rèn)識(shí)表格相關(guān)標(biāo)記

12JavaScript引入方式3JavaScript基本語(yǔ)1、JavaScript簡(jiǎn)介在瀏覽網(wǎng)頁(yè)時(shí)，既能看到靜態(tài)的文本、圖像，也可以看到浮動(dòng)的動(dòng)畫(huà)、信息框以及動(dòng)態(tài)變換的時(shí)鐘信息等。要想實(shí)現(xiàn)頁(yè)面上這些實(shí)時(shí)的、動(dòng)態(tài)的、可交互的網(wǎng)頁(yè)效果就需要使用JavaScript語(yǔ)言來(lái)編寫(xiě)實(shí)現(xiàn)。下面，將針對(duì)JavaScript的起源、JavaScript的主要特點(diǎn)以及JavaScript的應(yīng)用進(jìn)行詳細(xì)講解?！救蝿?wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介（1）JavaScript的起源JavaScript是Web頁(yè)面中的一種腳本編程語(yǔ)言，也是一種通用的、跨平臺(tái)的、基于對(duì)象和事件驅(qū)動(dòng)并具有安全性的腳本語(yǔ)言。JavaScript的前身叫做LiveScript，是由Netscape(網(wǎng)景)公司開(kāi)發(fā)的腳本語(yǔ)言。后來(lái)在Sun公司推出著名的Java語(yǔ)言之后，Netscape公司和Sun公司于1995年一起重新設(shè)計(jì)了LiveScript，并把它改名為JavaScript?！救蝿?wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介（2）JavaScript的主要特點(diǎn)JavaScript是一種基于對(duì)象（Object）和事件驅(qū)動(dòng)（EventDriven）并具有安全性能的解釋性腳本語(yǔ)言，它具有以下幾個(gè)主要特點(diǎn)：解釋性：JavaScript不同于一些編譯性的程序語(yǔ)言（如C、C++等），它是一種解釋性的程序語(yǔ)言，它的源代碼不需要進(jìn)行編譯，而是直接在瀏覽器中解釋執(zhí)行?；趯?duì)象：JavaScript是一種基于對(duì)象的語(yǔ)言，它的許多功能來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。在JavaScript中，既可以使用預(yù)定義對(duì)象，也可以使用自定義對(duì)象。事件驅(qū)動(dòng)：JavaScript可以直接對(duì)用戶或客戶的輸入做出響應(yīng)，無(wú)需經(jīng)過(guò)Web服務(wù)程序，而是以事件驅(qū)動(dòng)的方式進(jìn)行的。如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等事件發(fā)生后，可以引起事件的響應(yīng)?！救蝿?wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介跨平臺(tái)性：在HTML頁(yè)面中，JavaScript依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)。只要在計(jì)算機(jī)上安裝了支持JavaScript的瀏覽器，那么程序就可以正確執(zhí)行。安全性：JavaScript是一種安全性語(yǔ)言，它不允許訪問(wèn)本地硬盤，也不能對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，而只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互?！救蝿?wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介（3）JavaScript的應(yīng)用作為一門獨(dú)立的編程語(yǔ)言，JavaScript可以做很多事情，但最主流的應(yīng)用是在Web上創(chuàng)建網(wǎng)頁(yè)特效。使用JavaScript腳本語(yǔ)言實(shí)現(xiàn)的動(dòng)態(tài)頁(yè)面，在網(wǎng)頁(yè)上隨處可見(jiàn)。JavaScript的幾種常見(jiàn)應(yīng)用如下：驗(yàn)證用戶輸入的內(nèi)容網(wǎng)頁(yè)動(dòng)畫(huà)效果窗口的應(yīng)用文字特效【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式在HTML文檔中引入JavaScript有兩種方式，一種是在HTML文檔中直接嵌入JavaScript腳本，稱為內(nèi)嵌式；另一種是鏈接外部JavaScript腳本文件，稱為外鏈?zhǔn)?。具體講解如下?！救蝿?wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式【任務(wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式（1）內(nèi)嵌式在HTML文檔中，通過(guò)<script>標(biāo)簽及其相關(guān)屬性可以引入JavaScript代碼。當(dāng)瀏覽器讀取到<script>標(biāo)簽時(shí)，就解釋執(zhí)行其中的腳本語(yǔ)句。其基本語(yǔ)法格式如下：該語(yǔ)法中，type屬性用來(lái)指定HTML文檔引用的腳本語(yǔ)言類型，當(dāng)type屬性的值為text/javascript時(shí)，表示<script></script>元素中包含的是JavaScript腳本。通常，我們將<script></script>元素放在<head>和</head>之間，稱為頭腳本；也可以將其放在<body>和</body>之間，稱為體腳本。<head><scripttype="text/javascript">//此處為JavaScript代碼</script></head>【任務(wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式<head>【任務(wù)7-1】知2、JavaScript引入方式（2）外鏈?zhǔn)疆?dāng)腳本代碼比較復(fù)雜或者同一段代碼需要被多個(gè)網(wǎng)頁(yè)文件使用時(shí)，可以將這些腳本代碼放置在一個(gè)擴(kuò)展名為.js的文件中，然后通過(guò)外鏈?zhǔn)揭朐搄s文件。在Web頁(yè)面中使用外鏈?zhǔn)揭隞avaScript文件的基本語(yǔ)法格式如下：<scripttype="text/javascript"src="JS文件的路徑"></script>【任務(wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式<scripttype="3、JavaScript基本語(yǔ)法下面，將對(duì)JavaScript基本語(yǔ)法進(jìn)行講解，具體如下：（1）執(zhí)行順序JavaScript程序按照在HTML文件中出現(xiàn)的順序逐行執(zhí)行。如果某些代碼（例如函數(shù)、全局變量等）需要在整個(gè)HTML文件中使用，最好將其放在HTML文件的<head>…</head>標(biāo)記中。某些代碼，如函數(shù)體內(nèi)的代碼，不會(huì)被立即執(zhí)行，只有當(dāng)所在的函數(shù)被其他程序調(diào)用時(shí)，該代碼才會(huì)被執(zhí)行。（2）大小寫(xiě)敏感JavaScript嚴(yán)格區(qū)分字母大小寫(xiě)。也就是說(shuō)，在輸入關(guān)鍵字、函數(shù)名、變量以及其他標(biāo)識(shí)符時(shí)，都必須采用正確的大小寫(xiě)形式。例如，變量username與變量userName是兩個(gè)不同的變量?！救蝿?wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法【任務(wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法（3）每行結(jié)尾的分號(hào)可有可無(wú)JavaScript語(yǔ)言并不要求必須以分號(hào)（；）作為語(yǔ)句的結(jié)束標(biāo)記。如果語(yǔ)句的結(jié)束處沒(méi)有分號(hào)，JavaScript會(huì)自動(dòng)將該行代碼的結(jié)尾作為語(yǔ)句的結(jié)尾。但是，通常習(xí)慣在每行代碼的結(jié)尾處加上分號(hào)，來(lái)保證代碼的嚴(yán)謹(jǐn)性、準(zhǔn)確性?！救蝿?wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法【任務(wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法（4）注釋在編寫(xiě)程序時(shí)，為了使代碼易于閱讀，通常需要為代碼加一些注釋。注釋是對(duì)程序中某個(gè)功能或者某行代碼的解釋、說(shuō)明，而不會(huì)被JavaScript當(dāng)成代碼執(zhí)行。JavaScript中主要包括兩種注釋：?jiǎn)涡凶⑨尯投嘈凶⑨尅＞唧w如下：?jiǎn)涡凶⑨屖褂秒p斜線“//”作為注釋標(biāo)記，將“//”放在一行代碼的末尾或者單獨(dú)一行的開(kāi)頭，它后面的內(nèi)容就是注釋部分。多行注釋可以包含任意行數(shù)的注釋文本。多行注釋是以“/*”標(biāo)記開(kāi)始，以“*/”標(biāo)記結(jié)束，中間的所有內(nèi)容都為注釋文本。這種注釋可以跨行書(shū)寫(xiě)，但不能有嵌套的注釋。【任務(wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法【任務(wù)7-1】知識(shí)點(diǎn)講解4、一個(gè)簡(jiǎn)單的JavaScript程序Adobe公司的Dreamweaver工具是建立Web站點(diǎn)和應(yīng)用程序的專業(yè)工具。下面，我們將繼續(xù)使用Dreamweaver工具創(chuàng)建一個(gè)簡(jiǎn)單的JavaScript程序。如下圖所示?！救蝿?wù)7-1】知識(shí)點(diǎn)講解4、一個(gè)簡(jiǎn)單的JavaScript程序【任務(wù)7-1】知識(shí)點(diǎn)講1、關(guān)鍵字和標(biāo)識(shí)符（1）關(guān)鍵字JavaScript關(guān)鍵字（ReservedWords），又被稱為“保留字”，是指在JavaScript語(yǔ)言中被事先定義好并賦予特殊含義的單詞。JavaScript關(guān)鍵字不能作為變量名和函數(shù)名使用，否則會(huì)使JavaScript在載入過(guò)程中出現(xiàn)編譯錯(cuò)誤?！救蝿?wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符【任務(wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符（1）關(guān)鍵字JavaScript關(guān)鍵字，如下表所示。abstractcontinuefinallyinstanceofprivatethisbooleandefaultfloatintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticvarcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwith【任務(wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符abstractcontinuefinal1、關(guān)鍵字和標(biāo)識(shí)符（2）標(biāo)識(shí)符在JavaScript中，標(biāo)識(shí)符用來(lái)命名變量和函數(shù)，或者用作JavaScript代碼中某些循環(huán)的標(biāo)簽。標(biāo)識(shí)符的命名規(guī)則和其他很多編程語(yǔ)言的命名規(guī)則相同，第一個(gè)字符不能是數(shù)字，其后的字符可以是字母、數(shù)字、下劃線或美元符號(hào)。例如，下面是合法的標(biāo)識(shí)符：imy_name_name$strn1

【任務(wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符i【任務(wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符（2）標(biāo)識(shí)符注意:數(shù)字不允許作為首字符出現(xiàn)，這樣JavaScript可以輕易地區(qū)別標(biāo)識(shí)符和數(shù)字。標(biāo)識(shí)符不能和JavaScript中用于其他目的的關(guān)鍵字同名。【任務(wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符注意:【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型變量就是指程序中一個(gè)已經(jīng)命名的存儲(chǔ)單元，它的主要作用就是為數(shù)據(jù)操作提供存放信息的容器。下面將對(duì)變量的命名、聲明及賦值進(jìn)行講解。（1）變量的命名在編程過(guò)程中，經(jīng)常需要定義一些符號(hào)來(lái)標(biāo)記某些名稱，如函數(shù)名、變量名等，這些符號(hào)被稱為標(biāo)識(shí)符。在JavaScript中，標(biāo)識(shí)符主要用來(lái)命名變量和函數(shù)。其中，命名變量時(shí)需要注意以下幾點(diǎn)：必須以字母或下劃線開(kāi)頭，中間可以是數(shù)字、字母或下劃線。變量名不能包含空格、加、減等符號(hào)。不能使用JavaScript中的關(guān)鍵字作為變量名，如varint。JavaScript的變量名嚴(yán)格區(qū)分大小寫(xiě)，如UserName與username代表兩個(gè)不同的變量?！救蝿?wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型（2）變量的聲明與賦值在JavaScript中，使用變量前需要先對(duì)其進(jìn)行聲明。所有的JavaScript變量都由關(guān)鍵字var聲明，語(yǔ)法格式如下：在聲明變量的同時(shí)也可以對(duì)變量進(jìn)行賦值，例如：var變量名;

varabc=1;

【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型var變量名;varabc=1;【任務(wù)2、變量和數(shù)據(jù)類型（2）變量的聲明與賦值如果只是聲明了變量，并未對(duì)其賦值，則其默認(rèn)為undefined。聲明變量時(shí)，需要遵循的規(guī)則如下：可以使用一個(gè)關(guān)鍵字var同時(shí)聲明多個(gè)變量，只需用逗號(hào)“，”分隔變量名即可。例如：可以在聲明變量的同時(shí)對(duì)其賦值，即初始化，例如：vara,b,c;//同時(shí)聲明a、b和c三個(gè)變量

vara=1,b=2,c=3；//同時(shí)聲明a、b和c三個(gè)變量，并分別對(duì)其進(jìn)行初始化

【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型vara,b,c;2、變量和數(shù)據(jù)類型c)var語(yǔ)句可以用作for循環(huán)和for/in循環(huán)的一部分，這樣就使循環(huán)變量的聲明成為循環(huán)語(yǔ)法自身的一部分，使用起來(lái)比較方便。d)使用var語(yǔ)句多次聲明同一個(gè)變量，如果重復(fù)聲明的變量已經(jīng)有一個(gè)初始值，那么此時(shí)的聲明就相當(dāng)于對(duì)變量的重新賦值?！救蝿?wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型（3）數(shù)據(jù)類型數(shù)值型數(shù)字（number）是最基本的數(shù)據(jù)類型。JavaScript和其他程序設(shè)計(jì)語(yǔ)言（如C和Java）的不同之處在于它并不區(qū)分整型數(shù)值和浮點(diǎn)型數(shù)值。在JavaScript中，所有數(shù)字都是數(shù)值型。字符串型字符串(string)是由Unicode字符、數(shù)字、標(biāo)點(diǎn)符號(hào)等組成的序列，它是JavaScript用來(lái)表示文本的數(shù)據(jù)類型。程序中的字符串型數(shù)據(jù)包含在單引號(hào)或雙引號(hào)中，由單引號(hào)定界的字符串中可以包含雙引號(hào)，由雙引號(hào)定界的字符串中也可以包含單引號(hào)。【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型c)布爾型數(shù)值型數(shù)據(jù)類型和字符串型數(shù)據(jù)類型的值有無(wú)窮多個(gè)，但布爾型數(shù)據(jù)類型只有兩個(gè)值，分別由“true”和“false”表示。一個(gè)布爾值代表一個(gè)“真值”，它說(shuō)明某個(gè)事物是真還是假。d)特殊數(shù)據(jù)類型JavaScript還包括一些特殊類型的數(shù)據(jù)，轉(zhuǎn)義字符、未定義值和空值。【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式（1）運(yùn)算符運(yùn)算符是程序執(zhí)行特定算術(shù)或邏輯操作的符號(hào)，用于執(zhí)行程序代碼運(yùn)算。JavaScript中的運(yùn)算符主要包括算數(shù)運(yùn)算符、比較運(yùn)算符、賦值運(yùn)算符、邏輯運(yùn)算符和條件運(yùn)算符五種，具體介紹如下?！救蝿?wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式（1）運(yùn)算符a)算數(shù)運(yùn)算符算術(shù)運(yùn)算符用于連接運(yùn)算表達(dá)式，主要包括加（+）、減（—）、乘（*）、除（/）、取模（%）、自增（++）、自減（--）等運(yùn)算符，常用的算術(shù)運(yùn)算符如下表所示。算術(shù)運(yùn)算符描述+加運(yùn)算符-減運(yùn)算符*乘運(yùn)算符/除運(yùn)算符++自增運(yùn)算符。該運(yùn)算符有i++(在使用i之后，使i的值加1)和++i（在使用i之前，先使i的值加1）兩種--自減運(yùn)算符。該運(yùn)算符有i--(在使用i之后，使i的值減1)和--i（在使用i之前，先使i的值減1）兩種【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式算術(shù)運(yùn)算符描述+加運(yùn)算符-減運(yùn)算符*乘運(yùn)算3、運(yùn)算符和表達(dá)式（1）運(yùn)算符b)比較運(yùn)算符比較運(yùn)算符在邏輯語(yǔ)句中使用，用于判斷變量或值是否相等。其運(yùn)算過(guò)程需要首先對(duì)操作數(shù)進(jìn)行比較，然后返回一個(gè)布爾值true或false。常用的比較運(yùn)算符如下表所示。比較運(yùn)算符描述<

小于>

大于<=小于等于>=大于等于==等于。只根據(jù)表面值進(jìn)行判斷，不涉及數(shù)據(jù)類型。例如，“27”==27的值為true===絕對(duì)等于。同時(shí)根據(jù)表面值和數(shù)據(jù)類型進(jìn)行判斷。例如，“27”===27的值為false!=不等于。只根據(jù)表面值進(jìn)行判斷，不涉及數(shù)據(jù)類型。例如，“27”!=27的值為false!==不絕對(duì)等于。同時(shí)根據(jù)表面值和數(shù)據(jù)類型進(jìn)行判斷。例如，“27”!==27的值為true【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式比較運(yùn)算符描述<

小于>

大于<=小于等于3、運(yùn)算符和表達(dá)式（1）運(yùn)算符c)邏輯運(yùn)算符邏輯運(yùn)算符是根據(jù)表達(dá)式的值來(lái)返回真值或是假值。JavaScript支持常用的邏輯運(yùn)算符，具體如下表所示。邏輯運(yùn)算符描述&&邏輯與，只有當(dāng)兩個(gè)操作數(shù)a、b的值都為true時(shí)，a&&b的值才為true；否則為false||邏輯或，只有當(dāng)兩個(gè)操作數(shù)a、b的值都為false時(shí)，a||b的值才為false；否則為true!邏輯非，!true的值為false，而!false的值為true【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式邏輯運(yùn)算符描述&&邏輯與，只有當(dāng)兩個(gè)操作數(shù)3、運(yùn)算符和表達(dá)式（1）運(yùn)算符d)賦值運(yùn)算符最基本的賦值運(yùn)算符是等于號(hào)“=”，用于對(duì)變量進(jìn)行賦值。其他運(yùn)算符可以和賦值運(yùn)算符“=”聯(lián)合使用，構(gòu)成組合賦值運(yùn)算符。常用的賦值運(yùn)算符如下表所示。賦值運(yùn)算符描述=將右邊表達(dá)式的值賦給左邊的變量。例如，username=“name”+=將運(yùn)算符左邊的變量加上右邊表達(dá)式的值賦給左邊的變量。例如，a+=b，相當(dāng)于a=a+b-=將運(yùn)算符左邊的變量減去右邊表達(dá)式的值賦給左邊的變量。例如，a-=b，相當(dāng)于a=a-b*=將運(yùn)算符左邊的變量乘以右邊表達(dá)式的值賦給左邊的變量。例如，a*=b，相當(dāng)于a=a*b/=將運(yùn)算符左邊的變量除以右邊表達(dá)式的值賦給左邊的變量。例如，a/=b，相當(dāng)于a=a/b%=將運(yùn)算符左邊的變量用右邊表達(dá)式的值求模，并將結(jié)果賦給左邊的變量。例如，a%=b，相當(dāng)于a=a%b【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式賦值運(yùn)算符描述=將右邊表達(dá)式的值賦給左邊的3、運(yùn)算符和表達(dá)式（1）運(yùn)算符e)條件運(yùn)算符條件運(yùn)算符是JavaScript中的一種特殊的三目運(yùn)算符，其語(yǔ)法格式如下：若操作數(shù)的值為true，則整個(gè)表達(dá)式的結(jié)果為“結(jié)果1”，否則為“結(jié)果2”。操作數(shù)？結(jié)果1：結(jié)果2

【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式操作數(shù)？結(jié)果1：結(jié)果2【任務(wù)7-2】知識(shí)點(diǎn)3、運(yùn)算符和表達(dá)式（2）運(yùn)算符優(yōu)先級(jí)JavaScript運(yùn)算符均有明確的優(yōu)先級(jí)與結(jié)合性，優(yōu)先級(jí)較高的運(yùn)算符將先于優(yōu)先級(jí)較低的運(yùn)算符進(jìn)行運(yùn)算。結(jié)合性則是指具有同等優(yōu)先級(jí)的運(yùn)算符將按照怎樣的順序進(jìn)行運(yùn)算，結(jié)合性有向左結(jié)合和向右結(jié)合兩種?！救蝿?wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式（2）運(yùn)算符優(yōu)先級(jí)JavaScript運(yùn)算符的優(yōu)先級(jí)及結(jié)合性如下表所示。賦值運(yùn)算符結(jié)合性運(yùn)算符最高向左.、[]、（）由高到低依次排列向右++、--、-、!、delete、new、typeof、void向左*、/、%向左+、-向左<<、>>、>>>向左<、<=、>、>=、in、instanceof向左==、!=、===、!===向左&向左^向左|向左&&向左||向右?:向右=向右*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=最低向左，【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式賦值運(yùn)算符結(jié)合性運(yùn)算符最高向左.、[]3、運(yùn)算符和表達(dá)式（3）表達(dá)式表達(dá)式是一個(gè)語(yǔ)句集合，像一個(gè)組一樣，計(jì)算結(jié)果是一個(gè)單一的值，該值可以是boolean、number、string、function或者object數(shù)據(jù)類型之一。一個(gè)表達(dá)式本身可以很簡(jiǎn)單，如一個(gè)數(shù)字或者變量。另外，它還可以包含許多連接在一起的變量關(guān)鍵字以及運(yùn)算符?！救蝿?wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式【任務(wù)7-2】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句if條件語(yǔ)句是最基本、最常用的條件控制語(yǔ)句。通過(guò)判斷條件表達(dá)式的值為true或者false，來(lái)確定是否執(zhí)行某一條語(yǔ)句。主要包括單向判斷語(yǔ)句、雙向判斷語(yǔ)句和多向判斷語(yǔ)句，具體如下：【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句單向判斷語(yǔ)句單向判斷語(yǔ)句是結(jié)構(gòu)最簡(jiǎn)單的條件語(yǔ)句，如果程序中存在絕對(duì)不執(zhí)行某些指令的情況，就可以使用單向判斷語(yǔ)句，其語(yǔ)法格式如下：?jiǎn)蜗蚺袛嗾Z(yǔ)句的執(zhí)行流程如下圖所示。if（執(zhí)行條件）{

執(zhí)行語(yǔ)句

}

【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句if（執(zhí)行條件）{【任務(wù)7-31、條件語(yǔ)句（1）if條件語(yǔ)句雙向判斷語(yǔ)句雙向判斷語(yǔ)句是if條件語(yǔ)句的基礎(chǔ)形式，只是在單向判斷語(yǔ)句基礎(chǔ)上增加了一個(gè)從句，其基本語(yǔ)法格式如下：雙向判斷語(yǔ)句的執(zhí)行流程如下圖所示。if（執(zhí)行條件）{執(zhí)行語(yǔ)句1}else{執(zhí)行語(yǔ)句2}

【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句if（執(zhí)行條件）{【任務(wù)7-31、條件語(yǔ)句（1）if條件語(yǔ)句多向判斷語(yǔ)句多向判斷語(yǔ)句可以在根據(jù)表達(dá)式的結(jié)果判斷一個(gè)條件，然后根據(jù)返回值做近一步的判斷，其基本語(yǔ)法格式如下：在多向判斷語(yǔ)句的語(yǔ)法中，通過(guò)elseif語(yǔ)句可以對(duì)多個(gè)條件進(jìn)行判斷，并且根據(jù)判斷的結(jié)果執(zhí)行相關(guān)事件。if（執(zhí)行條件1）{執(zhí)行語(yǔ)句1}elseif（執(zhí)行條件2）{執(zhí)行語(yǔ)句2}elseif（執(zhí)行條件3）{執(zhí)行語(yǔ)句3}......

【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句if（執(zhí)行條件1）{【任務(wù)7-1、條件語(yǔ)句（1）if條件語(yǔ)句多向判斷語(yǔ)句的執(zhí)行流程如下圖所示?！救蝿?wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（2）switch語(yǔ)句switch條件語(yǔ)句是典型的多路分支語(yǔ)句，其作用與if’語(yǔ)句類似，但switch條件語(yǔ)句比if語(yǔ)句更具有可讀性。switch條件語(yǔ)句的基本語(yǔ)法格式如下：switch(表達(dá)式){ case目標(biāo)值1:

執(zhí)行語(yǔ)句1 break; case目標(biāo)值2:

執(zhí)行語(yǔ)句2 break;

．．．．．． case目標(biāo)值n:

執(zhí)行語(yǔ)句n break; default:

執(zhí)行語(yǔ)句n+1 break;}

【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（2）switch語(yǔ)句switch(表達(dá)式){1、條件語(yǔ)句（2）switch語(yǔ)句在上面的語(yǔ)法結(jié)構(gòu)中，{}中的執(zhí)行語(yǔ)句被稱作循環(huán)體，循環(huán)體是否執(zhí)行取決于循環(huán)條件。當(dāng)循環(huán)條件為true時(shí)，循環(huán)體就會(huì)執(zhí)行。循環(huán)體執(zhí)行完畢時(shí)會(huì)繼續(xù)判斷循環(huán)條件，如條件仍為true則會(huì)繼續(xù)執(zhí)行，直到循環(huán)條件為false時(shí)，整個(gè)循環(huán)過(guò)程才會(huì)結(jié)束?！救蝿?wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（2）switch語(yǔ)句【任務(wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（1）while循環(huán)語(yǔ)句while語(yǔ)句是最基本的循環(huán)語(yǔ)句，其基本語(yǔ)法格式如下：在上面的語(yǔ)法結(jié)構(gòu)中，{}中的執(zhí)行語(yǔ)句被稱作循環(huán)體，循環(huán)體是否執(zhí)行取決于循環(huán)條件。當(dāng)循環(huán)條件為true時(shí)，循環(huán)體就會(huì)執(zhí)行。循環(huán)體執(zhí)行完畢時(shí)會(huì)繼續(xù)判斷循環(huán)條件，如條件仍為true則會(huì)繼續(xù)執(zhí)行，直到循環(huán)條件為false時(shí)，整個(gè)循環(huán)過(guò)程才會(huì)結(jié)束。while(循環(huán)條件){執(zhí)行語(yǔ)句………}

【任務(wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（1）while循環(huán)語(yǔ)句while(循環(huán)條件){2、循環(huán)語(yǔ)句（1）while循環(huán)語(yǔ)句while循環(huán)的執(zhí)行流程如下圖所示?！救蝿?wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（1）while循環(huán)語(yǔ)句【任務(wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（2）do……while循環(huán)語(yǔ)句do…while循環(huán)語(yǔ)句也稱為后測(cè)試循環(huán)語(yǔ)句，它也是利用一個(gè)條件來(lái)控制是否要繼續(xù)執(zhí)行該語(yǔ)句，其基本語(yǔ)法格式如下：在上面的語(yǔ)法結(jié)構(gòu)中，關(guān)鍵字do后面{}中的執(zhí)行語(yǔ)句是循環(huán)體。do…while循環(huán)語(yǔ)句將循環(huán)條件放在了循環(huán)體的后面。這也就意味著，循環(huán)體會(huì)無(wú)條件執(zhí)行一次，然后再根據(jù)循環(huán)條件來(lái)決定是否繼續(xù)執(zhí)行。do{執(zhí)行語(yǔ)句………}while(循環(huán)條件);

【任務(wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（2）do……while循環(huán)語(yǔ)句do{【任務(wù)72、循環(huán)語(yǔ)句（2）do……while循環(huán)語(yǔ)句do…while循環(huán)的執(zhí)行流程如下圖所示?！救蝿?wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（2）do……while循環(huán)語(yǔ)句【任務(wù)7-3】知2、循環(huán)語(yǔ)句（2）do……while循環(huán)語(yǔ)句注意:do…while循環(huán)語(yǔ)句結(jié)尾處的while語(yǔ)句括號(hào)后面有一個(gè)分號(hào)“;”，在書(shū)寫(xiě)過(guò)程中一定不要漏掉，否則JavaScript會(huì)認(rèn)為循環(huán)是一個(gè)空語(yǔ)句。【任務(wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（2）do……while循環(huán)語(yǔ)句注意:【任務(wù)7-2、循環(huán)語(yǔ)句（3）for循環(huán)語(yǔ)句for循環(huán)語(yǔ)句也稱為計(jì)次循環(huán)語(yǔ)句，一般用于循環(huán)次數(shù)已知的情況，其基本語(yǔ)法格式如下：在上面的語(yǔ)法結(jié)構(gòu)中，for關(guān)鍵字后面()中包括了三部分內(nèi)容：初始化表達(dá)式、循環(huán)條件和操作表達(dá)式，它們之間用“;”分隔，{}中的執(zhí)行語(yǔ)句為循環(huán)體。for（初始化表達(dá)式;循環(huán)條件;操作表達(dá)式）{

執(zhí)行語(yǔ)句 ………}

【任務(wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（3）for循環(huán)語(yǔ)句for（初始化表達(dá)式;循環(huán)3、跳轉(zhuǎn)語(yǔ)句跳轉(zhuǎn)語(yǔ)句用于實(shí)現(xiàn)循環(huán)執(zhí)行過(guò)程中程序流程的跳轉(zhuǎn)。在Javascript中，跳轉(zhuǎn)語(yǔ)句包括break語(yǔ)句和continue語(yǔ)句，對(duì)它們的具體講解如下：（1）break語(yǔ)句在switch條件語(yǔ)句和循環(huán)語(yǔ)句中都可以使用break語(yǔ)句，當(dāng)它出現(xiàn)在switch條件語(yǔ)句中時(shí)，作用是終止某個(gè)case并跳出switch結(jié)構(gòu)。break語(yǔ)句的基本語(yǔ)法格式如下：（2）continue語(yǔ)句continue語(yǔ)句的作用是終止本次循環(huán)，執(zhí)行下一次循環(huán)，其基本語(yǔ)法格式如下：break;

break;

【任務(wù)7-3】知識(shí)點(diǎn)講解3、跳轉(zhuǎn)語(yǔ)句跳轉(zhuǎn)語(yǔ)句用于實(shí)現(xiàn)循環(huán)執(zhí)行過(guò)程中程序流程的跳轉(zhuǎn)。在3、跳轉(zhuǎn)語(yǔ)句注意:continue語(yǔ)句只是結(jié)束本次循環(huán)，而不是終止整個(gè)循環(huán)語(yǔ)句的執(zhí)行。而break語(yǔ)句則是結(jié)束整個(gè)循環(huán)過(guò)程，不再判斷執(zhí)行循環(huán)的條件是否成立?！救蝿?wù)7-3】知識(shí)點(diǎn)講解3、跳轉(zhuǎn)語(yǔ)句注意:【任務(wù)7-3】知識(shí)點(diǎn)講解【任務(wù)7-4】函數(shù)知識(shí)引入需求分析在Javascript中，經(jīng)常會(huì)遇到程序需要多次重復(fù)操作的情況，這時(shí)就需要重復(fù)書(shū)寫(xiě)相同的代碼，這樣不僅加重了開(kāi)發(fā)人員的工作量，而且對(duì)于代碼的后期維護(hù)也是相當(dāng)困難的。為此，Javascript提供了函數(shù)，它可以將程序中繁瑣的代碼模塊化，提高程序的可讀性，并且便于后期維護(hù)。【任務(wù)7-4】函數(shù)知識(shí)引入需求分析在Javascript中，【任務(wù)7-4】知識(shí)儲(chǔ)備12函數(shù)的調(diào)用3函數(shù)中變量的作用域知識(shí)引入初識(shí)函數(shù)【任務(wù)7-4】知識(shí)儲(chǔ)備12函數(shù)的調(diào)用3函數(shù)中變量的作用域知識(shí)1、初識(shí)函數(shù)在Javascript程序設(shè)計(jì)中，為了使代碼更為簡(jiǎn)潔并可以重復(fù)使用，通常會(huì)將某段實(shí)現(xiàn)特定功能的代碼定義成一個(gè)函數(shù)。所謂的函數(shù)就是在計(jì)算機(jī)程序中由多條語(yǔ)句組成的邏輯單元，在Javascript中，函數(shù)使用關(guān)鍵字function來(lái)定義，其語(yǔ)法格式如下所示：<scripttype="text/javascript"> function函數(shù)名([參數(shù)1,參數(shù)2,……])｛

函數(shù)體｝</script>

【任務(wù)7-4】知識(shí)點(diǎn)講解1、初識(shí)函數(shù)在Javascript程序設(shè)計(jì)中，為了使代碼更為1、初識(shí)函數(shù)從上述語(yǔ)法格式可以看出，函數(shù)的定義由關(guān)鍵字“function”、“函數(shù)名”、“參數(shù)”和“函數(shù)體”四部分組成，關(guān)于這四部分的相關(guān)講解具體如下：function：在聲明函數(shù)時(shí)必須使用的關(guān)鍵字。函數(shù)名：創(chuàng)建函數(shù)的名稱，函數(shù)名是唯一的。

參數(shù)：外界傳遞給函數(shù)的值，它是可選的，當(dāng)有多個(gè)參數(shù)時(shí)，各參數(shù)用“，”分隔。函數(shù)體：函數(shù)定義的主體，專門用于實(shí)現(xiàn)特定的功能?！救蝿?wù)7-4】知識(shí)點(diǎn)講解1、初識(shí)函數(shù)從上述語(yǔ)法格式可以看出，函數(shù)的定義由關(guān)鍵字“fu2、函數(shù)的調(diào)用當(dāng)函數(shù)定義完成后，要想在程序中發(fā)揮函數(shù)的作用，必須得調(diào)用這個(gè)函數(shù)。函數(shù)的調(diào)用非常簡(jiǎn)單，只需引用函數(shù)名，并傳入相應(yīng)的參數(shù)即可。函數(shù)調(diào)用的語(yǔ)法格式如下：在上述語(yǔ)法格式中，“[參數(shù)1，參數(shù)2…]”是可選的，用于表示參數(shù)列表，其值可以是一個(gè)或多個(gè)。函數(shù)名稱([參數(shù)1,參數(shù)2,……])

【任務(wù)7-4】知識(shí)點(diǎn)講解2、函數(shù)的調(diào)用當(dāng)函數(shù)定義完成后，要想在程序中發(fā)揮函數(shù)的作用，3、函數(shù)中變量的作用域在前面介紹過(guò)變量需要先定義后使用，但這并不意味著定義變量后就可以隨時(shí)使用該變量。變量需要在它的作用范圍內(nèi)才可以被使用，這個(gè)作用范圍稱為變量的作用域。變量的作用域取決于這個(gè)變量是哪一種變量，在Javascript中，變量一般分為全局變量和局部變量，對(duì)它們的具體解釋如下：全局變量：在所有函數(shù)之外定義，其作用域范圍是同一個(gè)頁(yè)面文件中的所有腳本。局部變量：是定義在函數(shù)體之內(nèi)，只對(duì)該函數(shù)是可見(jiàn)的，而對(duì)其他函數(shù)則是不可見(jiàn)的。【任務(wù)7-4】知識(shí)點(diǎn)講解3、函數(shù)中變量的作用域在前面介紹過(guò)變量需要先定義后使用，但這最終效果如圖所示：【任務(wù)7-5】布局及定義基礎(chǔ)樣式最終效果如圖所示：【任務(wù)7-5】布局及定義基礎(chǔ)樣式效果如圖所示：【任務(wù)7-6】制作頭部模塊效果如圖所示：【任務(wù)7-6】制作頭部模塊效果如圖所示：【任務(wù)7-7】制作導(dǎo)航模塊效果如圖所示：【任務(wù)7-7】制作導(dǎo)航模塊效果如圖所示：【任務(wù)7-8】制作banner和時(shí)間模塊效果如圖所示：【任務(wù)7-8】制作banner和時(shí)間模塊效果如圖所示：【任務(wù)7-9】制作客運(yùn)信息模塊效果如圖所示：【任務(wù)7-9】制作客運(yùn)信息模塊效果如圖所示：【任務(wù)7-10】制作底部模塊效果如圖所示：【任務(wù)7-10】制作底部模塊項(xiàng)目總結(jié)建議讀者認(rèn)真體會(huì)變量、表達(dá)式及運(yùn)算符的應(yīng)用，能夠熟練地進(jìn)行變量的聲明與賦值。掌握條件語(yǔ)句、循環(huán)語(yǔ)句及跳轉(zhuǎn)語(yǔ)句，能夠熟練地運(yùn)用流程控制語(yǔ)句控制程序的執(zhí)行流程。在實(shí)際工作中，函數(shù)的應(yīng)用非常廣泛。讀者需要注意函數(shù)中變量的作用域，能夠進(jìn)行函數(shù)的聲明及調(diào)用。大家需要認(rèn)真總結(jié)，學(xué)以致用哦！項(xiàng)目總結(jié)建議讀者認(rèn)真體會(huì)變量、表達(dá)式及運(yùn)算符的應(yīng)用，能夠HTML+CSS+JavaScript項(xiàng)目7-“教學(xué)講解課件項(xiàng)目7

知識(shí)引入需求分析JavaScript是Web上一種功能強(qiáng)大的編程語(yǔ)言，用于開(kāi)發(fā)交互式的Web頁(yè)面。它不需要進(jìn)行編譯，而是直接嵌入在HTML頁(yè)面中，把靜態(tài)頁(yè)面轉(zhuǎn)變成支持用戶交互并響應(yīng)事件的動(dòng)態(tài)頁(yè)面。本章將對(duì)JavaScript簡(jiǎn)介、JavaScript的引入方式和基本語(yǔ)法進(jìn)行詳細(xì)講解?！救蝿?wù)7-1】認(rèn)識(shí)表格相關(guān)標(biāo)記

12JavaScript引入方式3JavaScript基本語(yǔ)1、JavaScript簡(jiǎn)介在瀏覽網(wǎng)頁(yè)時(shí)，既能看到靜態(tài)的文本、圖像，也可以看到浮動(dòng)的動(dòng)畫(huà)、信息框以及動(dòng)態(tài)變換的時(shí)鐘信息等。要想實(shí)現(xiàn)頁(yè)面上這些實(shí)時(shí)的、動(dòng)態(tài)的、可交互的網(wǎng)頁(yè)效果就需要使用JavaScript語(yǔ)言來(lái)編寫(xiě)實(shí)現(xiàn)。下面，將針對(duì)JavaScript的起源、JavaScript的主要特點(diǎn)以及JavaScript的應(yīng)用進(jìn)行詳細(xì)講解?！救蝿?wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介（1）JavaScript的起源JavaScript是Web頁(yè)面中的一種腳本編程語(yǔ)言，也是一種通用的、跨平臺(tái)的、基于對(duì)象和事件驅(qū)動(dòng)并具有安全性的腳本語(yǔ)言。JavaScript的前身叫做LiveScript，是由Netscape(網(wǎng)景)公司開(kāi)發(fā)的腳本語(yǔ)言。后來(lái)在Sun公司推出著名的Java語(yǔ)言之后，Netscape公司和Sun公司于1995年一起重新設(shè)計(jì)了LiveScript，并把它改名為JavaScript?！救蝿?wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介（2）JavaScript的主要特點(diǎn)JavaScript是一種基于對(duì)象（Object）和事件驅(qū)動(dòng)（EventDriven）并具有安全性能的解釋性腳本語(yǔ)言，它具有以下幾個(gè)主要特點(diǎn)：解釋性：JavaScript不同于一些編譯性的程序語(yǔ)言（如C、C++等），它是一種解釋性的程序語(yǔ)言，它的源代碼不需要進(jìn)行編譯，而是直接在瀏覽器中解釋執(zhí)行?；趯?duì)象：JavaScript是一種基于對(duì)象的語(yǔ)言，它的許多功能來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。在JavaScript中，既可以使用預(yù)定義對(duì)象，也可以使用自定義對(duì)象。事件驅(qū)動(dòng)：JavaScript可以直接對(duì)用戶或客戶的輸入做出響應(yīng)，無(wú)需經(jīng)過(guò)Web服務(wù)程序，而是以事件驅(qū)動(dòng)的方式進(jìn)行的。如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等事件發(fā)生后，可以引起事件的響應(yīng)?！救蝿?wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介跨平臺(tái)性：在HTML頁(yè)面中，JavaScript依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)。只要在計(jì)算機(jī)上安裝了支持JavaScript的瀏覽器，那么程序就可以正確執(zhí)行。安全性：JavaScript是一種安全性語(yǔ)言，它不允許訪問(wèn)本地硬盤，也不能對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，而只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互?！救蝿?wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介（3）JavaScript的應(yīng)用作為一門獨(dú)立的編程語(yǔ)言，JavaScript可以做很多事情，但最主流的應(yīng)用是在Web上創(chuàng)建網(wǎng)頁(yè)特效。使用JavaScript腳本語(yǔ)言實(shí)現(xiàn)的動(dòng)態(tài)頁(yè)面，在網(wǎng)頁(yè)上隨處可見(jiàn)。JavaScript的幾種常見(jiàn)應(yīng)用如下：驗(yàn)證用戶輸入的內(nèi)容網(wǎng)頁(yè)動(dòng)畫(huà)效果窗口的應(yīng)用文字特效【任務(wù)7-1】知識(shí)點(diǎn)講解1、JavaScript簡(jiǎn)介【任務(wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式在HTML文檔中引入JavaScript有兩種方式，一種是在HTML文檔中直接嵌入JavaScript腳本，稱為內(nèi)嵌式；另一種是鏈接外部JavaScript腳本文件，稱為外鏈?zhǔn)?。具體講解如下?！救蝿?wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式【任務(wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式（1）內(nèi)嵌式在HTML文檔中，通過(guò)<script>標(biāo)簽及其相關(guān)屬性可以引入JavaScript代碼。當(dāng)瀏覽器讀取到<script>標(biāo)簽時(shí)，就解釋執(zhí)行其中的腳本語(yǔ)句。其基本語(yǔ)法格式如下：該語(yǔ)法中，type屬性用來(lái)指定HTML文檔引用的腳本語(yǔ)言類型，當(dāng)type屬性的值為text/javascript時(shí)，表示<script></script>元素中包含的是JavaScript腳本。通常，我們將<script></script>元素放在<head>和</head>之間，稱為頭腳本；也可以將其放在<body>和</body>之間，稱為體腳本。<head><scripttype="text/javascript">//此處為JavaScript代碼</script></head>【任務(wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式<head>【任務(wù)7-1】知2、JavaScript引入方式（2）外鏈?zhǔn)疆?dāng)腳本代碼比較復(fù)雜或者同一段代碼需要被多個(gè)網(wǎng)頁(yè)文件使用時(shí)，可以將這些腳本代碼放置在一個(gè)擴(kuò)展名為.js的文件中，然后通過(guò)外鏈?zhǔn)揭朐搄s文件。在Web頁(yè)面中使用外鏈?zhǔn)揭隞avaScript文件的基本語(yǔ)法格式如下：<scripttype="text/javascript"src="JS文件的路徑"></script>【任務(wù)7-1】知識(shí)點(diǎn)講解2、JavaScript引入方式<scripttype="3、JavaScript基本語(yǔ)法下面，將對(duì)JavaScript基本語(yǔ)法進(jìn)行講解，具體如下：（1）執(zhí)行順序JavaScript程序按照在HTML文件中出現(xiàn)的順序逐行執(zhí)行。如果某些代碼（例如函數(shù)、全局變量等）需要在整個(gè)HTML文件中使用，最好將其放在HTML文件的<head>…</head>標(biāo)記中。某些代碼，如函數(shù)體內(nèi)的代碼，不會(huì)被立即執(zhí)行，只有當(dāng)所在的函數(shù)被其他程序調(diào)用時(shí)，該代碼才會(huì)被執(zhí)行。（2）大小寫(xiě)敏感JavaScript嚴(yán)格區(qū)分字母大小寫(xiě)。也就是說(shuō)，在輸入關(guān)鍵字、函數(shù)名、變量以及其他標(biāo)識(shí)符時(shí)，都必須采用正確的大小寫(xiě)形式。例如，變量username與變量userName是兩個(gè)不同的變量?！救蝿?wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法【任務(wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法（3）每行結(jié)尾的分號(hào)可有可無(wú)JavaScript語(yǔ)言并不要求必須以分號(hào)（；）作為語(yǔ)句的結(jié)束標(biāo)記。如果語(yǔ)句的結(jié)束處沒(méi)有分號(hào)，JavaScript會(huì)自動(dòng)將該行代碼的結(jié)尾作為語(yǔ)句的結(jié)尾。但是，通常習(xí)慣在每行代碼的結(jié)尾處加上分號(hào)，來(lái)保證代碼的嚴(yán)謹(jǐn)性、準(zhǔn)確性。【任務(wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法【任務(wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法（4）注釋在編寫(xiě)程序時(shí)，為了使代碼易于閱讀，通常需要為代碼加一些注釋。注釋是對(duì)程序中某個(gè)功能或者某行代碼的解釋、說(shuō)明，而不會(huì)被JavaScript當(dāng)成代碼執(zhí)行。JavaScript中主要包括兩種注釋：?jiǎn)涡凶⑨尯投嘈凶⑨?。具體如下：?jiǎn)涡凶⑨屖褂秒p斜線“//”作為注釋標(biāo)記，將“//”放在一行代碼的末尾或者單獨(dú)一行的開(kāi)頭，它后面的內(nèi)容就是注釋部分。多行注釋可以包含任意行數(shù)的注釋文本。多行注釋是以“/*”標(biāo)記開(kāi)始，以“*/”標(biāo)記結(jié)束，中間的所有內(nèi)容都為注釋文本。這種注釋可以跨行書(shū)寫(xiě)，但不能有嵌套的注釋?！救蝿?wù)7-1】知識(shí)點(diǎn)講解3、JavaScript基本語(yǔ)法【任務(wù)7-1】知識(shí)點(diǎn)講解4、一個(gè)簡(jiǎn)單的JavaScript程序Adobe公司的Dreamweaver工具是建立Web站點(diǎn)和應(yīng)用程序的專業(yè)工具。下面，我們將繼續(xù)使用Dreamweaver工具創(chuàng)建一個(gè)簡(jiǎn)單的JavaScript程序。如下圖所示。【任務(wù)7-1】知識(shí)點(diǎn)講解4、一個(gè)簡(jiǎn)單的JavaScript程序【任務(wù)7-1】知識(shí)點(diǎn)講1、關(guān)鍵字和標(biāo)識(shí)符（1）關(guān)鍵字JavaScript關(guān)鍵字（ReservedWords），又被稱為“保留字”，是指在JavaScript語(yǔ)言中被事先定義好并賦予特殊含義的單詞。JavaScript關(guān)鍵字不能作為變量名和函數(shù)名使用，否則會(huì)使JavaScript在載入過(guò)程中出現(xiàn)編譯錯(cuò)誤?！救蝿?wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符【任務(wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符（1）關(guān)鍵字JavaScript關(guān)鍵字，如下表所示。abstractcontinuefinallyinstanceofprivatethisbooleandefaultfloatintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticvarcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwith【任務(wù)7-2】知識(shí)點(diǎn)講解1、關(guān)鍵字和標(biāo)識(shí)符abstractcontinuefinal1、關(guān)鍵字和標(biāo)識(shí)符（2）標(biāo)識(shí)符在JavaScript中，標(biāo)識(shí)符用來(lái)命名變量和函數(shù)，或者用作JavaScript代碼中某些循環(huán)的標(biāo)簽。標(biāo)識(shí)符的命名規(guī)則和其他很多編程語(yǔ)言的命名規(guī)則相同，第一個(gè)字符不能是數(shù)字，其后的字符可以是字母、數(shù)字、下劃線或美元符號(hào)。例如，下面是合法的標(biāo)識(shí)符：imy_name_name$strn1

varabc=1;

vara=1,b=2,c=3；//同時(shí)聲明a、b和c三個(gè)變量，并分別對(duì)其進(jìn)行初始化

【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型vara,b,c;2、變量和數(shù)據(jù)類型c)var語(yǔ)句可以用作for循環(huán)和for/in循環(huán)的一部分，這樣就使循環(huán)變量的聲明成為循環(huán)語(yǔ)法自身的一部分，使用起來(lái)比較方便。d)使用var語(yǔ)句多次聲明同一個(gè)變量，如果重復(fù)聲明的變量已經(jīng)有一個(gè)初始值，那么此時(shí)的聲明就相當(dāng)于對(duì)變量的重新賦值?！救蝿?wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型（3）數(shù)據(jù)類型數(shù)值型數(shù)字（number）是最基本的數(shù)據(jù)類型。JavaScript和其他程序設(shè)計(jì)語(yǔ)言（如C和Java）的不同之處在于它并不區(qū)分整型數(shù)值和浮點(diǎn)型數(shù)值。在JavaScript中，所有數(shù)字都是數(shù)值型。字符串型字符串(string)是由Unicode字符、數(shù)字、標(biāo)點(diǎn)符號(hào)等組成的序列，它是JavaScript用來(lái)表示文本的數(shù)據(jù)類型。程序中的字符串型數(shù)據(jù)包含在單引號(hào)或雙引號(hào)中，由單引號(hào)定界的字符串中可以包含雙引號(hào)，由雙引號(hào)定界的字符串中也可以包含單引號(hào)?！救蝿?wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型【任務(wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型c)布爾型數(shù)值型數(shù)據(jù)類型和字符串型數(shù)據(jù)類型的值有無(wú)窮多個(gè)，但布爾型數(shù)據(jù)類型只有兩個(gè)值，分別由“true”和“false”表示。一個(gè)布爾值代表一個(gè)“真值”，它說(shuō)明某個(gè)事物是真還是假。d)特殊數(shù)據(jù)類型JavaScript還包括一些特殊類型的數(shù)據(jù)，轉(zhuǎn)義字符、未定義值和空值?！救蝿?wù)7-2】知識(shí)點(diǎn)講解2、變量和數(shù)據(jù)類型【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式（1）運(yùn)算符運(yùn)算符是程序執(zhí)行特定算術(shù)或邏輯操作的符號(hào)，用于執(zhí)行程序代碼運(yùn)算。JavaScript中的運(yùn)算符主要包括算數(shù)運(yùn)算符、比較運(yùn)算符、賦值運(yùn)算符、邏輯運(yùn)算符和條件運(yùn)算符五種，具體介紹如下。【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式（1）運(yùn)算符a)算數(shù)運(yùn)算符算術(shù)運(yùn)算符用于連接運(yùn)算表達(dá)式，主要包括加（+）、減（—）、乘（*）、除（/）、取模（%）、自增（++）、自減（--）等運(yùn)算符，常用的算術(shù)運(yùn)算符如下表所示。算術(shù)運(yùn)算符描述+加運(yùn)算符-減運(yùn)算符*乘運(yùn)算符/除運(yùn)算符++自增運(yùn)算符。該運(yùn)算符有i++(在使用i之后，使i的值加1)和++i（在使用i之前，先使i的值加1）兩種--自減運(yùn)算符。該運(yùn)算符有i--(在使用i之后，使i的值減1)和--i（在使用i之前，先使i的值減1）兩種【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式算術(shù)運(yùn)算符描述+加運(yùn)算符-減運(yùn)算符*乘運(yùn)算3、運(yùn)算符和表達(dá)式（1）運(yùn)算符b)比較運(yùn)算符比較運(yùn)算符在邏輯語(yǔ)句中使用，用于判斷變量或值是否相等。其運(yùn)算過(guò)程需要首先對(duì)操作數(shù)進(jìn)行比較，然后返回一個(gè)布爾值true或false。常用的比較運(yùn)算符如下表所示。比較運(yùn)算符描述<

小于>

【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式操作數(shù)？結(jié)果1：結(jié)果2【任務(wù)7-2】知識(shí)點(diǎn)3、運(yùn)算符和表達(dá)式（2）運(yùn)算符優(yōu)先級(jí)JavaScript運(yùn)算符均有明確的優(yōu)先級(jí)與結(jié)合性，優(yōu)先級(jí)較高的運(yùn)算符將先于優(yōu)先級(jí)較低的運(yùn)算符進(jìn)行運(yùn)算。結(jié)合性則是指具有同等優(yōu)先級(jí)的運(yùn)算符將按照怎樣的順序進(jìn)行運(yùn)算，結(jié)合性有向左結(jié)合和向右結(jié)合兩種?！救蝿?wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式（2）運(yùn)算符優(yōu)先級(jí)JavaScript運(yùn)算符的優(yōu)先級(jí)及結(jié)合性如下表所示。賦值運(yùn)算符結(jié)合性運(yùn)算符最高向左.、[]、（）由高到低依次排列向右++、--、-、!、delete、new、typeof、void向左*、/、%向左+、-向左<<、>>、>>>向左<、<=、>、>=、in、instanceof向左==、!=、===、!===向左&向左^向左|向左&&向左||向右?:向右=向右*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=最低向左，【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式賦值運(yùn)算符結(jié)合性運(yùn)算符最高向左.、[]3、運(yùn)算符和表達(dá)式（3）表達(dá)式表達(dá)式是一個(gè)語(yǔ)句集合，像一個(gè)組一樣，計(jì)算結(jié)果是一個(gè)單一的值，該值可以是boolean、number、string、function或者object數(shù)據(jù)類型之一。一個(gè)表達(dá)式本身可以很簡(jiǎn)單，如一個(gè)數(shù)字或者變量。另外，它還可以包含許多連接在一起的變量關(guān)鍵字以及運(yùn)算符。【任務(wù)7-2】知識(shí)點(diǎn)講解3、運(yùn)算符和表達(dá)式【任務(wù)7-2】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句if條件語(yǔ)句是最基本、最常用的條件控制語(yǔ)句。通過(guò)判斷條件表達(dá)式的值為true或者false，來(lái)確定是否執(zhí)行某一條語(yǔ)句。主要包括單向判斷語(yǔ)句、雙向判斷語(yǔ)句和多向判斷語(yǔ)句，具體如下：【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（1）if條件語(yǔ)句單向判斷語(yǔ)句單向判斷語(yǔ)句是結(jié)構(gòu)最簡(jiǎn)單的條件語(yǔ)句，如果程序中存在絕對(duì)不執(zhí)行某些指令的情況，就可以使用單向判斷語(yǔ)句，其語(yǔ)法格式如下：?jiǎn)蜗蚺袛嗾Z(yǔ)句的執(zhí)行流程如下圖所示。if（執(zhí)行條件）{

執(zhí)行語(yǔ)句

}

執(zhí)行語(yǔ)句1 break; case目標(biāo)值2:

執(zhí)行語(yǔ)句2 break;

．．．．．． case目標(biāo)值n:

執(zhí)行語(yǔ)句n break; default:

執(zhí)行語(yǔ)句n+1 break;}

【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（2）switch語(yǔ)句switch(表達(dá)式){1、條件語(yǔ)句（2）switch語(yǔ)句在上面的語(yǔ)法結(jié)構(gòu)中，{}中的執(zhí)行語(yǔ)句被稱作循環(huán)體，循環(huán)體是否執(zhí)行取決于循環(huán)條件。當(dāng)循環(huán)條件為true時(shí)，循環(huán)體就會(huì)執(zhí)行。循環(huán)體執(zhí)行完畢時(shí)會(huì)繼續(xù)判斷循環(huán)條件，如條件仍為true則會(huì)繼續(xù)執(zhí)行，直到循環(huán)條件為false時(shí)，整個(gè)循環(huán)過(guò)程才會(huì)結(jié)束。【任務(wù)7-3】知識(shí)點(diǎn)講解1、條件語(yǔ)句（2）switch語(yǔ)句【任務(wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（1）while循環(huán)語(yǔ)句while語(yǔ)句是最基本的循環(huán)語(yǔ)句，其基本語(yǔ)法格式如下：在上面的語(yǔ)法結(jié)構(gòu)中，{}中的執(zhí)行語(yǔ)句被稱作循環(huán)體，循環(huán)體是否執(zhí)行取決于循環(huán)條件。當(dāng)循環(huán)條件為true時(shí)，循環(huán)體就會(huì)執(zhí)行。循環(huán)體執(zhí)行完畢時(shí)會(huì)繼續(xù)判斷循環(huán)條件，如條件仍為true則會(huì)繼續(xù)執(zhí)行，直到循環(huán)條件為false時(shí)，整個(gè)循環(huán)過(guò)程才會(huì)結(jié)束。while(循環(huán)條件){執(zhí)行語(yǔ)句………}

【任務(wù)7-3】知識(shí)點(diǎn)講解2、循環(huán)語(yǔ)句（2）do……while循環(huán)語(yǔ)

人人文庫(kù)> 全部分類> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

HTML+CSS+JavaScript項(xiàng)目7-教學(xué)講解課件

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

HTML+CSS+JavaScript項(xiàng)目7-教學(xué)講解課件

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔