《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件-第一章 Javascipt簡(jiǎn)介

第一章Javascipt簡(jiǎn)介內(nèi)容提綱Javascript簡(jiǎn)史Javascript的主要內(nèi)容在HTML中使用JavascriptJavascript的基本語(yǔ)法變量和變量的作用域數(shù)據(jù)類型運(yùn)算符流程控制語(yǔ)句Javascript簡(jiǎn)史Web前端三層結(jié)構(gòu)層：HTML從語(yǔ)義的角度，描述頁(yè)面結(jié)構(gòu)樣式層：CSS從審美的角度，美化頁(yè)面行為層：Javascript從交互的角度，提升用戶體驗(yàn)JS的作用控制Web前端的結(jié)構(gòu)和樣式；給網(wǎng)頁(yè)添加一些功能、動(dòng)畫特效、交互；對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證。Javascript簡(jiǎn)史Javascript簡(jiǎn)史Javascript的誕生誕生于1995年，由Netscape的LiveScript發(fā)展而來(lái)的語(yǔ)言，其主要作用是增強(qiáng)網(wǎng)頁(yè)的交互性。/js/pro_js_history.aspJavaScript與Java什么關(guān)系？Javascript與ECMAScriptECMAScript不是一門語(yǔ)言，而是一個(gè)標(biāo)準(zhǔn)JavaScript、Jscript、ActionScript等腳本語(yǔ)言都是ECMAScript的實(shí)現(xiàn)Javascript簡(jiǎn)史擴(kuò)展知識(shí)：計(jì)算機(jī)編程語(yǔ)言分為3類標(biāo)簽語(yǔ)言，如HTML、CSS等解析型語(yǔ)言，如JS、PHP等編譯型語(yǔ)言，如C、C++、JAVA等Javascript的主要內(nèi)容ECMAScript、DOM、BOMECMAScript：ECMAScript定義了Javascript的語(yǔ)法核心和基本對(duì)象。（前三章學(xué)習(xí)）DOM：DocumentObjectModel的縮寫，即文檔對(duì)象模型

。（第五章）BOM：BrowserObjectModel的縮寫，即瀏覽器對(duì)象模型。（第四章）在HTML中使用JavascriptJavascript常見(jiàn)的運(yùn)行環(huán)境是客服端瀏覽器，不需要服務(wù)器就能獨(dú)立運(yùn)行。Javascript的<script>元素屬性。（見(jiàn)書P3）typesrc……網(wǎng)頁(yè)中使用Javascript的兩種方式。內(nèi)嵌JS見(jiàn)01_03_01.html外鏈JS見(jiàn)01_03_02.html注意事項(xiàng)見(jiàn)P4在HTML中使用Javascript擴(kuò)展知識(shí)：在開發(fā)過(guò)程中，我們經(jīng)常需要在瀏覽器中顯示某個(gè)變量值，常用的方法有：window.alert();document.write();console.log();mpt();在HTML中使用Javascript任務(wù)1

編寫JS代碼，分別用內(nèi)嵌和外鏈的方式，在瀏覽器控制臺(tái)輸出“helloJS!”Javascript的基本語(yǔ)法區(qū)分大小寫：ECMAScript中的一切區(qū)分大小寫。標(biāo)識(shí)符：標(biāo)識(shí)符指變量、函數(shù)、屬性、函數(shù)參數(shù)等。標(biāo)識(shí)符命名規(guī)則（見(jiàn)P5）注釋：?jiǎn)涡凶⑨尩臉?biāo)識(shí)符（//）。多行注釋的標(biāo)識(shí)符（/*…*/）。語(yǔ)句：ECMAScript中的語(yǔ)句以分號(hào)“；”結(jié)尾。變量什么是變量?從字面上看，變量是可變的量；從編程角度講，變量是用于存儲(chǔ)某種/某些數(shù)值的存儲(chǔ)器。我們可以把變量看做一個(gè)盒子,盒子用來(lái)存放物品,物品可以是衣服、玩具、水果...等。

變量變量命名

我們?yōu)榱藚^(qū)分盒子，可以用BOX1,BOX2等名稱代表不同盒子，BOX1就是盒子的名字（也就是變量的名字）。變量變量命名

變量名字可以任意取，只不過(guò)取名字要遵循一些規(guī)則:1.必須以字母、下劃線或美元符號(hào)開頭，后面可以跟字母、下劃線、美元符號(hào)和數(shù)字。2.駝峰命名，變量名區(qū)分大小寫，如:A與a是兩個(gè)不同變量。3.不允許使用JavaScript關(guān)鍵字和保留字做變量名。

下面哪些變量名是合理的？6num%summySumsum+num_mychar$numa1script變量變量聲明(確定你的存在)

我們要使用盒子裝東西,是不是先要找到盒子,在編程中，這個(gè)過(guò)程叫聲明變量。JS中只支持聲明變量，不支持聲明常量。語(yǔ)法:

var變量名;

例如： varmynum;//聲明一個(gè)變量mynum varnum1,mun2;//聲明一個(gè)變量num1變量變量賦值（多樣化的我）

我們可以把變量看做一個(gè)盒子,盒子用來(lái)存放物品,那如何在變量中存儲(chǔ)內(nèi)容呢?使用“=”號(hào)給變量存儲(chǔ)內(nèi)容。例如：

varmynum=5;//聲明變量mynum并賦值JS變量的聲明和其他語(yǔ)言的變量類型哪里不一樣？不用聲明變量類型變量Javascript中的變量聲明有兩種方法：顯式聲明。用關(guān)鍵字var進(jìn)行的聲明。隱式聲明。不用關(guān)鍵字var聲明(在開啟嚴(yán)格模式下會(huì)報(bào)錯(cuò))。變量的作用域變量的作用域

變量聲明后才能使用(函數(shù)名變量除外)。全局變量(global)的作用域?yàn)槿?，聲明可以是顯示的，也可以是隱式的。局部變量(local)的作用域?yàn)榫植?，只在函?shù)的內(nèi)部有定義；局部變量的聲明只能為顯示聲明。注意：函數(shù)內(nèi)部隱式聲明的變量也是全局變量練習(xí)：代碼01_07_01.html變量的數(shù)據(jù)類型JavaScript的數(shù)據(jù)類型由兩大類型系統(tǒng)實(shí)現(xiàn)。基本類型系統(tǒng)：值類型、引用類型。Typeof操作符來(lái)檢測(cè)變量值的數(shù)據(jù)類型。變量的數(shù)據(jù)類型Javascript是一門弱類型語(yǔ)言，無(wú)需要聲明類型，可保存任何類型的數(shù)據(jù)。保存的值不同，其數(shù)據(jù)的類型就不同；無(wú)需強(qiáng)制轉(zhuǎn)換。聲明后，可隨時(shí)重新賦值。支持不同類型的數(shù)據(jù)之間運(yùn)算，JS引擎對(duì)其類型轉(zhuǎn)換。變量的數(shù)據(jù)類型任務(wù)2

定義兩個(gè)變量a和b，分別賦值為null和’null’。1.判斷b的值是否為空值2.判斷a和b的值是否相等3.查看a、b變量的數(shù)據(jù)類型運(yùn)算符運(yùn)算符運(yùn)算符是用來(lái)對(duì)數(shù)值和變量進(jìn)行運(yùn)算的符號(hào)。運(yùn)算符所使用的值被稱為操作數(shù)。一元運(yùn)算符、二元運(yùn)算符、三元運(yùn)算符運(yùn)算符可作如下分類：算術(shù)運(yùn)算符、賦值運(yùn)算符、字符串運(yùn)算符、位運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、逗號(hào)運(yùn)算符運(yùn)算符(1)算術(shù)運(yùn)算符算符說(shuō)明例子結(jié)果+加X(jué)=2,x+24-減X=2,5-x3*乘X=4,x*520/除15/53%求余5%21++遞加X(jué)=5,x++X=6--遞減X=5,x--X=4運(yùn)算符(2)賦值運(yùn)算符算符說(shuō)明例子=x=yX=y+=X+=yX=x+y-=x-=yX=x-y*=X*=yX=x*y/=x/=yX=x/y.=x.=yX=x.y%=X%=yX=x%y運(yùn)算符(3)字符串運(yùn)算符JS中使用“+”作為字符串運(yùn)算符，用于連接兩個(gè)字符串。

運(yùn)算符(4)比較運(yùn)算符數(shù)學(xué)題，小明考90分，小紅考95分，問(wèn)誰(shuí)的分?jǐn)?shù)高？算符說(shuō)明例子==等于，注意和賦值運(yùn)算符“=”區(qū)分開5==8返回false5==‘5’返回true===全等于，要求值、類型都相等5===‘5’返回false!=不等于5!=8返回true5!=‘5’返false!==不全等于，只有在無(wú)需類型轉(zhuǎn)換運(yùn)算數(shù)不相等的情況下，才返回true5!==‘5’返回true>大于5>8返回false<小于5<8返回true>=大于或等于5>=8返回false<=小于或等于5<=8返回true運(yùn)算符(5)邏輯運(yùn)算符算符說(shuō)明例子&&邏輯與(AND)x=6，y=3(x<10&&y>1)返回true||邏輯或(OR)x=6，y=3(x==5||y==5)返回false!非(NOT)x=6，y=3!(x==y)返回truexor異或(XOR)x=6，y=3(x<10xory<1)返回true運(yùn)算符(6)其他運(yùn)算符算符說(shuō)明例子，逗號(hào)運(yùn)算符Vara=1,b=2,c=3;?:三元運(yùn)算符3<6?’對(duì)’:’錯(cuò)’運(yùn)算符課后練習(xí)1）在頁(yè)面上輸出“尊敬的XXVIP客戶，歡迎您登陸”（xx是本人的名字）2）聲明姓名(name)和密碼(pwd)兩個(gè)變量，如果其中有一個(gè)變量值為空，則提示“姓名或密碼不能為空”，否則提示“登錄成功！”3）判斷998這個(gè)數(shù)字是不是偶數(shù)？流程控制語(yǔ)句流程控制：控制程序的執(zhí)行順序。

順序結(jié)構(gòu)。分支結(jié)構(gòu)(條件結(jié)構(gòu)或選擇結(jié)構(gòu))。循環(huán)結(jié)構(gòu)。流程控制語(yǔ)句-分支結(jié)構(gòu)If分支結(jié)構(gòu)

可以稱if語(yǔ)句，根據(jù)表達(dá)式的布爾值進(jìn)行分支選擇。1.單一條件分支結(jié)構(gòu)If(條件){//表達(dá)式為真時(shí)執(zhí)行的語(yǔ)句塊}題目：如果你的實(shí)訓(xùn)成績(jī)>60,那么恭喜你，你及格了

流程控制語(yǔ)句-分支結(jié)構(gòu)If分支結(jié)構(gòu)

2.雙向條件語(yǔ)句if(表達(dá)式){//表達(dá)式為真時(shí)執(zhí)行的語(yǔ)句塊}else{//表達(dá)式為假執(zhí)行的語(yǔ)句塊}題目：流程控制語(yǔ)句-分支結(jié)構(gòu)If分支結(jié)構(gòu)

3.多向條件語(yǔ)句if(表達(dá)式1){//表達(dá)式1為真時(shí)執(zhí)行的語(yǔ)句塊}elseif(表達(dá)式2){//表達(dá)式1為假,表達(dá)式2為真時(shí)執(zhí)行的語(yǔ)句塊}else{ //表達(dá)式1為假,表達(dá)式2為假時(shí)執(zhí)行的語(yǔ)句塊 }流程控制語(yǔ)句-分支結(jié)構(gòu)任務(wù)3：

流程控制語(yǔ)句-分支結(jié)構(gòu)switch分支結(jié)構(gòu)

Switch語(yǔ)句和if語(yǔ)句類似，不同之處switch的條件可有多個(gè)值，而不局限于true或false。流程控制語(yǔ)句-分支結(jié)構(gòu)switch分支結(jié)構(gòu)

例題：模擬游戲按鍵觸發(fā)，當(dāng)按下鍵A時(shí)往左；按下鍵W時(shí)往上……流程控制語(yǔ)句-循環(huán)語(yǔ)句很多事情不只是做一次，要重復(fù)做比如：在操場(chǎng)上跑十圈我們可以使用循環(huán)語(yǔ)句來(lái)完成這個(gè)功能，循環(huán)語(yǔ)句就是重復(fù)執(zhí)行一段代碼那么，要完成一個(gè)循環(huán)，需要哪些條件呢？1.需要計(jì)算已經(jīng)跑了幾圈，也就是一個(gè)計(jì)數(shù)器2.需要一個(gè)循環(huán)的退出條件，在這里就是跑夠10圈3.計(jì)數(shù)器需要不斷的在改變

你可以1,2,3,4….一直數(shù)到10

也可以10,9,8,7…一直到1流程控制語(yǔ)句-循環(huán)語(yǔ)句While循環(huán)

例題：流程控制語(yǔ)句-循環(huán)語(yǔ)句While循環(huán)

例題：流程控制語(yǔ)句-循環(huán)語(yǔ)句任務(wù)4：用whlie循環(huán)完成下面兩個(gè)練習(xí)1.輸出0-9的數(shù)字2.求0-100的所有數(shù)之和流程控制語(yǔ)句-循環(huán)語(yǔ)句dowhile循環(huán)

例題：流程控制語(yǔ)句-循環(huán)語(yǔ)句for循環(huán)

例題：流程控制語(yǔ)句-循環(huán)語(yǔ)句任務(wù)5：用for循環(huán)完成下面的練習(xí)1.輸出0-9的數(shù)字2.求0-100的所有數(shù)之和3.流程控制語(yǔ)句-循環(huán)語(yǔ)句break語(yǔ)句

例題：流程控制語(yǔ)句-循環(huán)語(yǔ)句continue語(yǔ)句

例題：流程控制語(yǔ)句-循環(huán)語(yǔ)句break語(yǔ)句和continue語(yǔ)句區(qū)別本章小結(jié)Javascript知識(shí)體系的組成部分在HTML中使用Javascript的方式Javascript的基本語(yǔ)法Javascript數(shù)據(jù)類型流程控制語(yǔ)句課后練習(xí)P30獨(dú)立實(shí)踐2.九九