《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第7章 JavaScript基礎(chǔ)語法_第1頁
《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第7章 JavaScript基礎(chǔ)語法_第2頁
《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第7章 JavaScript基礎(chǔ)語法_第3頁
《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第7章 JavaScript基礎(chǔ)語法_第4頁
《Web前端技術(shù)（HTML+CSS+JavaScript）》課件-第7章 JavaScript基礎(chǔ)語法_第5頁
已閱讀5頁，還剩61頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第7章JavaScript基礎(chǔ)語法學(xué)習(xí)目標123了解JavaScript的基本概念熟悉JavaScript的基本使用方法掌握JavaScript變量的定義與應(yīng)用4掌握JavaScript數(shù)據(jù)類型與運算符的應(yīng)用6掌握JavaScript函數(shù)的定義與應(yīng)用5掌握JavaScript控制結(jié)構(gòu)的應(yīng)用本章架構(gòu)★★★7.1初探JavaScript7.2編寫JavaScript第一個實例7.3明晰JavaScript詞法結(jié)構(gòu)★★7.4應(yīng)用JavaScript運算符7.5應(yīng)用JavaScript數(shù)據(jù)類型★7.6使用JavaScript選擇結(jié)構(gòu)★7.7使用JavaScript循環(huán)結(jié)構(gòu)★7.8使用JavaScript函數(shù)★7.9綜合案例7.1初探JavaScript7.1初探JavaScriptJavaScript是一種基于對象(Object)和事件驅(qū)動(EventDriven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java腳本語言（Java小程序）一起實現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標準的HTML語言中實現(xiàn)的。1JavaScript概念7.1初探JavaScript2JavaScript基本特點腳本編寫語言基于對象的語言簡單性安全性動態(tài)性跨平臺性7.1初探JavaScript1．對軟件環(huán)境的要求（1）操作系統(tǒng)：Windows95/98/NT/2000/Me/XP等。（2）瀏覽器：Netscape公司的Navigator2.0以上版本的瀏覽器；微軟公司的InternetExplorer3.0以上版本的瀏覽器等。（3）編輯器：用于編輯HTML文檔的字符編輯器或者HTML文檔編輯器。2．對硬件配置的要求（1）電腦內(nèi)存：至少為32MB。（2）CRT：至少需要256顏色，分辨率在640×480以上。（3）CPU：至少為256MB。3JavaScript開發(fā)環(huán)境7.1初探JavaScript1.純文本編輯工具

使用純文本編輯器來編寫腳本，如Windows的Notepad，是腳本編程人員常用的一種方法。2.專業(yè)化腳本編輯工具HbuilderXAntechinusJavaScriptEditorNetScapeNavigatorGold4JavaScript編寫工具7.2編寫JavaScript第一個實例7.2編寫JavaScript第一個實例1JavaScript結(jié)構(gòu)<script> JavaScript程序</script>在HTML文件中嵌入JavaScript的方法，可以通過<script>標簽的屬性來決定。<script>…</script>標簽對的位置并不是固定的，可以出現(xiàn)在HTML文檔的<head>…</head>或者<body>…</body>標簽對之間，也可以出現(xiàn)在文檔的多個位置。7.2編寫JavaScript第一個實例2<script>標簽的屬性屬性描述src包含JavaScript源代碼的文件的URL，文件應(yīng)以.Js為擴展名language表示在HTML中使用哪種腳本語言7.2編寫JavaScript第一個實例3利用<script>標簽的language屬性使用language屬性的方法如下：<scriptLanguage="JavaScript">

代碼…</script>其中，把<script>標簽的language屬性設(shè)置為JavaScript，則表示所有支持JavaScript的瀏覽器都能夠代理JavaScript代碼。例7-1演示了如何在html網(wǎng)頁中的script標簽中編寫腳本。例7-1chapter07_01.html7.2編寫JavaScript第一個實例4利用<script>標簽的src屬性引入外部js文件使用src屬性的方法如下：<scriptLanguage="JavaScript"src="*.js"></script>注意：使用<script>標簽引入外部js文件時，不能簡化<script>標簽寫法。例7-2chapter07_02.html7.3明晰JavaScript詞法結(jié)構(gòu)7.3明晰JavaScript詞法結(jié)構(gòu)標識符是用來識別具體對象的一個名稱。最常見的標識符就是變量名，以及后面要提到的函數(shù)名。JavaScript是一門區(qū)分字母大小寫的語言，且和其他任何編程語言一樣，Javascript保留了一些標識符為自己所用，保留字不能用做普通的標識符。注意：保留字包括關(guān)鍵字、未來保留字、空字面量和布爾值字面量1標識符7.3明晰JavaScript詞法結(jié)構(gòu)JavaScript標識符必須以字母、下劃線（_）或美元符（$）開始。后續(xù)的字符可以是字母、數(shù)字、下劃線或美元符（數(shù)字是不允許作為首字符出現(xiàn)的，以便JavaScript可以輕易區(qū)分開標識符和數(shù)字）。例如，下面是合法的標識符：helloworldhello_world_helloworld$helloworld下面是非法的標識符：int//int是JavaScript中的保留字1.5//1.5是由數(shù)字開頭，并且標識符中不能含有點號(.)helloworld//標識符中不能含有空格2命名規(guī)則7.3明晰JavaScript詞法結(jié)構(gòu)（1）單行注釋單行注釋以兩個斜杠開頭，然后在該行中書寫注釋文字，注釋內(nèi)容不超過一行。例如：//JavaScript注釋語句（2）多行注釋多行注釋又叫注釋塊，它表示一段文字都是注釋的內(nèi)容。多行注釋以符號“/*”開頭，并以“*/”結(jié)尾，中間部分為注釋的內(nèi)容，注釋內(nèi)容可以跨越多行，但其中不能有嵌套的注釋。示例代碼如下：/*這是一個多行注釋，這一行是注釋的開始函數(shù)定義的開始……函數(shù)定義的結(jié)束*/3JavaScript程序的注釋7.3明晰JavaScript詞法結(jié)構(gòu)例7-3

chapter07_03.html4標識符、命名規(guī)則、注釋的應(yīng)用7.3明晰JavaScript詞法結(jié)構(gòu)在程序運行期間，程序可以向系統(tǒng)申請分配若干內(nèi)存單元，用來存儲各種類型的數(shù)據(jù)。系統(tǒng)分配的內(nèi)存單元要使用一個標記符來標識，并且其中的數(shù)據(jù)是可以更改的，所以稱之為變量。標記內(nèi)存單元的標記符就是變量名，內(nèi)存單元中所裝載的數(shù)據(jù)就是變量值。定義一個變量，系統(tǒng)就會為之分配一塊內(nèi)存，程序可以使用變量名來表示這塊內(nèi)存中的數(shù)據(jù)。5變量7.3明晰JavaScript詞法結(jié)構(gòu)變量名必須以大寫字母（A~Z）、小寫字母（a~z）或下劃線（_）開頭，其他的字符可以用字母、下劃線或數(shù)字（0~9）。變量名中不能有空格、“+”號、“-”號等其他符號。不能使用JavaScript中的保留字作為變量名。這些保留字是在JavaScript內(nèi)部使用的，不能作為變量的名稱。例如，var、int、double、true等都不能作為變量的名稱。?在對變量命名時，最好把變量名的意義與其代表的內(nèi)容對應(yīng)起來，以便能方便地區(qū)分變量的含義。例如，name這樣的變量名就很容易讓人明白其代表的內(nèi)容。?JavaScript變量名是區(qū)分大小寫的，因此在使用時必須確保大小寫相同。不同大小寫的變量，例如name、Name、NAME，將被視為不同的變量。?JavaScript變量命名約定與Java類似。也就是說，對于變量名為一個單詞的，則要求其為小寫字母，例如area。對于變量名由兩個或兩個以上的單詞組成的，則要求第二個和第二個以后的單詞的首字母為大寫，例如userName。5JavaScript中的變量命名要點7.3明晰JavaScript詞法結(jié)構(gòu)變量在使用之前必須聲明，這不僅是JavaScript的要求，也是一個好的編程習(xí)慣。由于JavaScript是弱類型語言，因此它不像大多數(shù)高級語言那樣強制限定每種變量的類型，也就是說，在創(chuàng)建一個變量時可以不指定該變量將要存放何種類型的信息。實際上，根據(jù)需要，還可以給同一個變量賦予一些不同類型的數(shù)據(jù)。在JavaScript中聲明變量的方式有以下兩種。格式1：var變量名1[,變量名2,變量名3,…]格式2：var變量名1=值1[,變量名2=值2變量名3=值3,…]6變量聲明7.3明晰JavaScript詞法結(jié)構(gòu)在JavaScript中聲明變量時，還可以在使用格式2聲明變量時省略關(guān)鍵字var，即直接在賦值語句中隱式地聲明變量。使用賦值語句隱式聲明變量的格式為：格式3：變量名=值;7使用賦值語句隱式聲明變量7.3明晰JavaScript詞法結(jié)構(gòu)不管聲明變量時是否賦值，在程序中任何地方需要改變變量的值時都可以使用賦值語句來給變量賦值。賦值語句由變量名、等號以及確定的值組成。賦值語句的格式與上面的格式3相同，即：格式4：變量名=值;8變量賦值7.3明晰JavaScript詞法結(jié)構(gòu)JavaScript的常量通常又稱為字面常量，它是不能改變的數(shù)據(jù)，與基本的數(shù)據(jù)類型相對應(yīng)。一般有以下幾種常量。1．整型常量整型常量可以使用十六進制、八進制和十進制表示。十六進制以0x或者0X開頭，如0x8a。八進制必須以0開頭，如0168。十進制的第一位不能是0（數(shù)字0除外），如235。2．實型常量實型常量是由整數(shù)部分加小數(shù)部分表示，如11.376和689.78，實型常量也可以使用科學(xué)計數(shù)法來表示，如8E7，7e6等。3．布爾值布爾常量用于區(qū)分一個事務(wù)的正反兩面，不是真就是假。其值只有true和false兩種。9常量7.3明晰JavaScript詞法結(jié)構(gòu)4．字符串型常量JavaScript中沒有單獨的字符常量，而只有由若干字符所組成的字符串型常量。字符串型常量使用單引號（‘’）或雙引號（“”）引起來的若干字符，如“ab”、“abook”等。一個字符串中不包含任何字符也是可以的，其形式為“”，表示一個空字符串。5．null常量JavaScript中有一個null常量，表示一個變量所指向的對象為空值。6．undefined常量undefined常量用于表示變量還沒有被賦值的狀態(tài)或?qū)ο蟮哪硞€屬性不存在。null表示賦給變量的值為“空”，“空”是一個有特殊意義的值，而undefined則表示還沒有對變量賦值，變量的值還處于未知狀態(tài)。9常量7.3明晰JavaScript詞法結(jié)構(gòu)例7-4chapter07_04.html9使用變量案例7.4應(yīng)用JavaScript運算符7.4應(yīng)用JavaScript運算符表達式是變量、運算符以及其他表達式的集合，所有表達式都計算成一個值。在實際中有僅具有值的表達式以及把值賦給變量的表達式兩種類型的表達式。例如：example="AnExample"是把值賦給變量example的表達式。表達式是利用運算符來連接數(shù)據(jù)的。運算符是完成操作的一系列符號，用于將一個或幾個數(shù)據(jù)按照某種規(guī)則進行運算，并產(chǎn)生一個操作結(jié)果。它必須作用在數(shù)據(jù)上才有效，使用運算符的數(shù)據(jù)稱為操作數(shù)。1運算符概念7.4應(yīng)用JavaScript運算符JavaScript中的運算符主要有算術(shù)運算符、字符串運算符、邏輯運算符、比較運算符、條件運算符等。2運算類別7.4應(yīng)用JavaScript運算符JavaScript中的運算符主要有算術(shù)運算符、字符串運算符、邏輯運算符、比較運算符、條件運算符等。根據(jù)操作數(shù)的個數(shù)，可以將JavaScript中的運算符分為以下幾種。單目運算符：只作用于一個數(shù)據(jù)上的運算符。?雙目運算符：作用于兩個數(shù)據(jù)上的運算符。?三目運算符：作用于3個數(shù)據(jù)上的運算符。3運算類別7.4應(yīng)用JavaScript運算符1．加（+）、減（-）、乘（*）、除（/）運算符加（+）、減（-）、乘（*）、除（/）運算符符合日常的數(shù)學(xué)運算規(guī)則，兩邊的運算數(shù)的類型要求是數(shù)值型的（“+”也可用于字符串連接操作），如果不是數(shù)值型，JavaScript會將它們轉(zhuǎn)換為數(shù)值型。2．取模運算符（%）這個運算符也可以稱為取余運算符，其兩邊的運算數(shù)的類型必須是數(shù)值型的。A%B的結(jié)果是數(shù)A除以數(shù)B后得到的余數(shù)。例如，11%2=1。以上的運算符都是雙目運算符，使用這些運算符時如果不注意，有可能會出現(xiàn)NaN或其他錯誤的結(jié)果。例如，如果除數(shù)為0，就會出現(xiàn)錯誤。4算術(shù)和賦值運算符7.4應(yīng)用JavaScript運算符3．取反運算符（-）取反運算的作用就是將值的符號變成相反的。即把一個正值轉(zhuǎn)換成相應(yīng)的負值，反之亦然。例如，x=5，則-x=-5。該運算符是單目運算符，同樣也要求操作數(shù)都是數(shù)值型的，如果不是數(shù)值型的，會被轉(zhuǎn)換成數(shù)值型。4．增量運算符（++）和減量運算符（--）這兩種運算符實際上是代替變量x進行x=x+1和x=x-1操作的簡單而有效的方法。表示將變量值加1或減1后再將結(jié)果賦給這個變量。有++x和x++兩種用法。該運算符置于變量之前和置于變量之后所得到的結(jié)果是不同的。4算術(shù)和賦值運算符7.4應(yīng)用JavaScript運算符=：將一個值或者表達式的結(jié)果賦給變量，例如，x=3。?+=：將變量與所賦的值相加后的結(jié)果再賦給該變量，例如，x+=3等價于x=x+3。

-=：將變量與所賦的值相減后的結(jié)果再賦給該變量，例如，x-=3等價于x=x-3。*=：將變量與所賦的值相乘后的結(jié)果再賦給該變量，例如，x*=3等價于x=x*3。

/=：將變量與所賦的值相除后的結(jié)果再賦給該變量，例如，x/=3等價于x=x/3。%=：將變量與所賦的值求模后的結(jié)果再賦給該變量，例如，x%=3等價于x=x%3。5賦值運算符7.4應(yīng)用JavaScript運算符字符串運算符只有一個字符串連接運算符（+），它是一個雙目運算符。在JavaScript中，可以使用字符串連接運算符將兩個字符串連接起來形成一個新的字符串。例如，“This”+“is”的運算結(jié)果為“Thisis”，“中國”+“青島”運算結(jié)果為“中國青島”。另外，字符串連接運算符還可以和前面的賦值運算符聯(lián)合使用，形成“+=”運算符，它的作用是，將運算符右側(cè)的字符串拼接到該運算符左側(cè)字符串的后面，并將結(jié)果賦值給運算符左側(cè)的操作數(shù)。6字符串運算符7.4應(yīng)用JavaScript運算符<：小于。?<=：小于等于。?>：大于。?>=：大于等于。?==：等于。?===：嚴格等于。?!=：不等于。?!==：嚴格不等于。7比較運算符7.4應(yīng)用JavaScript運算符邏輯與（&&）：當兩個操作數(shù)的值都為true時，運算結(jié)果為true，否則為false。邏輯或（||）：只要兩個操作數(shù)中有一個值為true時，運算結(jié)果就為true。如果兩個操作數(shù)的值都為假，則運算結(jié)果為假。邏輯非（?。簩Σ僮鲾?shù)取反。即true值非運算的結(jié)果為false，false值非運算的結(jié)果為true。8邏輯運算符7.4應(yīng)用JavaScript運算符9運算符優(yōu)先級7.4應(yīng)用JavaScript運算符10演示了JavaScript運算符的應(yīng)用例7-5chapter07_05.html7.5應(yīng)用JavaScript數(shù)據(jù)類型7.5應(yīng)用JavaScript數(shù)據(jù)類型程序設(shè)計語言所支持的數(shù)據(jù)類型是這種語言最為基本的部分。JavaScript能夠處理多種類型的數(shù)據(jù)，這些數(shù)據(jù)類型可以分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型兩類。JavaScript的基本數(shù)據(jù)類型包括常用的數(shù)值型、字符串型和布爾型，以及兩個特殊的數(shù)據(jù)類型：空值和未定義。另外，它還支持復(fù)合數(shù)據(jù)類型數(shù)組、函數(shù)、對象等。由于JavaScript采用弱類型的形式，因而數(shù)據(jù)在使用前不必先聲明，而是在使用或賦值時才確定其數(shù)據(jù)類型。7.5應(yīng)用JavaScript數(shù)據(jù)類型數(shù)值型（number）是最基本的數(shù)據(jù)類型，可以用于完成數(shù)學(xué)運算。JavaScript和其他程序設(shè)計語言的不同之處在于它并不區(qū)別整型數(shù)值和浮點型數(shù)值。在JavaScript中，所有數(shù)字都是由浮點型表示的。目前，JavaScript采用IEEE754標準定義的64位浮點數(shù)值格式來表示數(shù)據(jù)。1數(shù)值型7.5應(yīng)用JavaScript數(shù)據(jù)類型字符串（string）是由Unicode字符（JavaScript1.3之前的版本只支持ASCII碼字符）、數(shù)字、標點符號等組成的序列，是JavaScript中用來表示文本的數(shù)據(jù)類型。JavaScript和C、Java不同，它沒有char這樣的字符數(shù)據(jù)類型。要表示單個字符，必須使用長度為1的字符串。2字符串類型7.5應(yīng)用JavaScript數(shù)據(jù)類型數(shù)值型數(shù)據(jù)和字符串類型的數(shù)據(jù)的值都有無窮多，但是布爾型數(shù)據(jù)的值只有兩個，由布爾型直接量true和false來表示，分別代表真和假。它主要用來說明或代表一種狀態(tài)或標志，通常是在程序中比較所得的結(jié)果。3布爾型7.5應(yīng)用JavaScript數(shù)據(jù)類型JavaScript中還有一個特殊的空值型數(shù)據(jù)，用關(guān)鍵字null來表示，它表示“無值”，并不表示“null”這4個字母，也不是0和空字符串，而是JavaScript的一種對象類型。null常被看作對象類型的一個特殊值，即代表“無對象”的值。null是個獨一無二的值，有別于其他所有的值。如果一個變量的值為null，那么就表示它的值不是有效的對象、數(shù)字、字符串和布爾值。4空值型7.5應(yīng)用JavaScript數(shù)據(jù)類型在JavaScript中還有一個特殊的未定義值，用undefined來表示。如下情況時返回undefined值： 使用了一個并未聲明的變量時。? 使用了已經(jīng)聲明但還沒有賦值的變量時。? 使用了一個并不存在的對象屬性時。5未定義值7.5應(yīng)用JavaScript數(shù)據(jù)類型例7-6chapter07_06.html6演示JavaScript數(shù)據(jù)類型的應(yīng)用7.6使用JavaScript選擇結(jié)構(gòu)7.6使用JavaScript選擇結(jié)構(gòu)在任何一種語言中，程序控制是必須的，它能使得整個程序不會發(fā)生混亂，使程序順利按其一定的方式執(zhí)行?？刂平Y(jié)構(gòu)主要包括：順序結(jié)構(gòu)、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)。1控制結(jié)構(gòu)7.6使用JavaScript選擇結(jié)構(gòu)選擇結(jié)構(gòu)語句需要根據(jù)給出的條件進行判斷來決定執(zhí)行對應(yīng)的代碼。通常選擇結(jié)構(gòu)為if和switch兩種。在JavaScript中，我們可使用以下條件語句：if語句：只有當指定條件為true時，使用該語句來執(zhí)行代碼。if...else語句：當條件為true時執(zhí)行代碼，當條件為false時執(zhí)行其他代碼。if...elseif....else語句：使用該語句來選擇多個代碼塊之一來執(zhí)行。switch語句：使用該語句來選擇多個代碼塊之一來執(zhí)行。2選擇結(jié)構(gòu)7.6使用JavaScript選擇結(jié)構(gòu)例7-7chapter07_07.html3演示JavaScript選擇結(jié)構(gòu)的應(yīng)用7.7使用JavaScript循環(huán)結(jié)構(gòu)7.7使用JavaScript循環(huán)結(jié)構(gòu)循環(huán)結(jié)構(gòu)是程序中一個重要的結(jié)構(gòu)。循環(huán)結(jié)構(gòu)的特點就是在給定的條件成立時,反復(fù)執(zhí)行某個程序段。通常稱給定條件就是循環(huán)條件；反復(fù)執(zhí)行的程序段稱為循環(huán)體,循環(huán)體可以是復(fù)合語句,單個語句。在循環(huán)體中也可以包含循環(huán)語句，從而實現(xiàn)循環(huán)的嵌套。循環(huán)結(jié)構(gòu)主要包括：for結(jié)構(gòu)、while結(jié)構(gòu),do..while結(jié)構(gòu),還可以使用嵌套循環(huán)完成復(fù)雜的程序控制的操作。7.7使用JavaScript循環(huán)結(jié)構(gòu)for結(jié)構(gòu)語句是最常用的循環(huán)語句，它比較適合循環(huán)次數(shù)已知的情況。語法：for(初始化表達式;條件;遞增表達式){語句塊}其中：初始化表達式：循環(huán)開始的初始值。條件：每次循環(huán)都執(zhí)行條件表達式，結(jié)果為true才能繼續(xù)循環(huán)。遞增表達式：使能夠跳出循環(huán)。1for結(jié)構(gòu)7.7使用JavaScript循環(huán)結(jié)構(gòu)while結(jié)構(gòu)語句比較適合循環(huán)次數(shù)不確定，但是已知循環(huán)控制條件的情況。語法：while(表達式){語句1；語句2；......

語句n；}2while結(jié)構(gòu)7.7使用JavaScript循環(huán)結(jié)構(gòu)do…while結(jié)構(gòu)的用法與while結(jié)構(gòu)類似。語法：do{

語句1；

語句2； ....

語句n;}while(循環(huán)條件);3do…while結(jié)構(gòu)7.7使用JavaScript循環(huán)結(jié)構(gòu)1.breakbreak語句用于跳出循環(huán)。在switc

溫馨提示

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

評論

0/150

提交評論