《網(wǎng)頁設計與制作》課件-第一章 Javascipt簡介

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

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

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

變量變量命名

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

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

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

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

var變量名;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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