Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第9章 JavaScript基礎(chǔ)1

Web前端基礎(chǔ)技術(shù)CSSJSHTML第9章JavaScript基礎(chǔ)（1/2）Contents目錄JavaScript概述數(shù)據(jù)類型類型變量與類型轉(zhuǎn)換運(yùn)算符與表達(dá)式程序結(jié)構(gòu)1.

JavaScript概述基于客戶端瀏覽器運(yùn)行的一種解析型腳本語言（順序解析執(zhí)行，無須編譯)；主要作用：實(shí)現(xiàn)與用戶的交互；獲取或動(dòng)態(tài)更新HTML元素的內(nèi)容和樣式

應(yīng)用：表單數(shù)據(jù)獲取和驗(yàn)證動(dòng)態(tài)更新HTML內(nèi)容：添加/移除元素動(dòng)態(tài)改變元素的屬性：值、樣式；示例第1個(gè)JavaScript程序,輸出數(shù)據(jù)目的：1.掌握代碼書寫位置：內(nèi)部方式；外部文件方式。2.掌握注釋的使用3.掌握調(diào)試方法：1)彈出對話框：alert(一個(gè)不同類型的數(shù)據(jù));如：alert(“ok!”);2)控制臺(tái)輸出：console.log(逗號(hào)分隔，多個(gè)不同類型數(shù)據(jù)),如：console.log(“ok!”,100,true);1可以省略type屬性內(nèi)部方式寫在head標(biāo)記內(nèi)（了解）2寫在body標(biāo)記內(nèi)（了解）在瀏覽器按F12中查看輸出3通常寫在文檔最后寫在文檔末尾，掌握添加firstJS.js文件，在js文件內(nèi)不需要script標(biāo)記使用外部js文件，在HTML中使用script標(biāo)記的src屬性引用目的：代碼與HTML分離；代碼復(fù)用。在html文件中引用外部js文件，通常放在HTML文件末尾相當(dāng)于在script標(biāo)記中插入外部js文件的內(nèi)容外部文件方式12二、.數(shù)據(jù)類型1.Number;2.String;3.Boolean;4.null;5.Undefined;6.Object;7.Function;8.數(shù)組Array整數(shù)：10進(jìn)制；8進(jìn)制；16進(jìn)制

2進(jìn)制；如：123

0o120XFF/0xff0B1100浮點(diǎn)數(shù)：小數(shù)與其他語言學(xué)習(xí)方法、學(xué)習(xí)思路相同，從數(shù)據(jù)類型開始=>變量=>類型轉(zhuǎn)換=>表達(dá)式=>程序結(jié)構(gòu)

255|10|62|655351.Number數(shù)字：整數(shù)和浮點(diǎn)數(shù)，通常使用十進(jìn)制。console.log(0xff,"|",0o12,"|",0o76,"|",0xFFFF)注：結(jié)果自動(dòng)轉(zhuǎn)換為10進(jìn)制輸出示例：在控制臺(tái)輸出不同進(jìn)制的數(shù)字使用單引號(hào)或雙引號(hào)括起來任何字符序列，如："我在學(xué)習(xí)JavaScript"'我在學(xué)習(xí)JavaScript'例如：1.在雙引號(hào)中使用雙引號(hào)；2.分行顯示console.log("他說：'你好！'")console.log("他說：\"你好！\"

")alert("你的選擇是：\n1)A

2)B

3)C")2.String字符串直接使用比較少，一般兩種場景：1.變量賦值為null（此時(shí)為object類型）；2.一般在使用函數(shù)查找元素對象時(shí)，如果未找到，此時(shí)函數(shù)返回值為null3.Boolean布爾類型：取值為：true|false4.null(值)對象類型的值，表示不指向任何對象，即不存在這個(gè)對象(一般由函數(shù)返回)特殊字符：\n\’\"\\1.未聲明的變量，或者未賦值的變量；2.對象中不存在的屬性對象一般包含屬性和方法.使用new關(guān)鍵字創(chuàng)建：newObject();(很少直接使用該方式創(chuàng)建對象)varobj=newObject()//創(chuàng)建對象=‘張三’

//可以為對象指定任意屬性obj.age=18console.log(,obj.age,obj.x)//通過對象.屬性名引用5.undefined（類型/值）6.Object對象類型通常我們會(huì)使用大括號(hào)語法來定義對象，例如：varobj={name:'張三',age:18}/*輸出屬性*/console.log(,obj.age)所有變量都使用var關(guān)鍵字進(jìn)行聲明掌握對象的定義方法｛屬性名:屬性值,…｝

varbook={

id:1,

bookName:"三國演義",

price:12.8,

};console.log(book)console.log(book.id,book.bookName,book.price)

示例：定義一個(gè)Book對象，保存一本書的信息掌握對象的定義方法｛屬性名:屬性值,…｝定義函數(shù)的目的是為了共享代碼，實(shí)現(xiàn)代碼復(fù)用，其類型名為Function。定義函數(shù)的語法為：function函數(shù)名(參數(shù)列表){

/*程序片段*/}

functionadd(x,y){

returnx+y;

}

varfunc=add//保存函數(shù)類型的變量

varz=func(10,20)

//作為add函數(shù)使用

alert(typeofadd)//獲取add的類型：結(jié)果為function7.Function:函數(shù)類型，所有定義的函數(shù)都是函數(shù)類型形式參數(shù)不需要說明類型，返回值也不需要聲明類型,沒有返回值可以不寫return語句

數(shù)組是特殊的對象，可以使用newArray()方式創(chuàng)建數(shù)組，但更簡單的方式是使用中括號(hào)[]定義數(shù)組，例如：vararr=newArray(3)/*定義包含3個(gè)元素的數(shù)組arr*/定義數(shù)組后，可以使用任意下標(biāo)對元素賦值，數(shù)組的長度由最大下標(biāo)值決定，使用length屬性獲取數(shù)組的長度。沒有賦值的數(shù)組元素的默認(rèn)值為undefined(即未賦值)8.數(shù)組varx=[] /*定義空數(shù)組x,長度是任意的*/x[0]=100 /*指定數(shù)組下標(biāo)賦值*/x[100]="ABC" /*指定數(shù)組下標(biāo)賦值,元素的類型可以不同*/console.log(x[0],x[100]) /*輸出結(jié)果為：100ABC*/console.log(x[2]) /*輸出結(jié)果為：undefined*/console.log(x.length) /*輸出長度，結(jié)果為101*/vary=[1,2,3]/*定義的同時(shí)初始化數(shù)組y*/通常我們會(huì)使用中括號(hào)[]語法來定義對象，例如：掌握數(shù)組的定義方法[元素1,元素2,…]

示例：定義一個(gè)books數(shù)組，保存多本書的信息掌握數(shù)組的定義方法[元素1,元素2,…]試一試<script>//1.輸出不同進(jìn)制的數(shù)字

console.log(25,"|",0b1101,"|",0o16,"|",0x1a);//結(jié)果：25|13|14|26//2.字符串類型string//使用單引號(hào)或雙引號(hào)括起來的任意字符

console.log("他說：'你好！'");console.log('他說："你好！"');console.log('他說："你好！"');//3.布爾類型booleanconsole.log(true,false);//4.null值，用于函數(shù)的返回值，表示不存在

//5.undefined類型，表示變量未聲明，或者聲明了沒有賦值；對象的屬性不存在，則取他們的類型時(shí)為undefinedvary;//任何類型的變量，都使用var進(jìn)行聲明

console.log(y,typeofy,typeofz);//結(jié)果為undefined//6.對象類型

varobj=newObject();="zs";obj.age=20;console.log(obj);//JSON-JavaScriptObjectNotationJavaScipt對象表示法

varstudent={name:"zs",age:18};console.log(,student.age);//7函數(shù)類型Functionfunctionadd(x,y){returnx+y;}varfunc=add//保存函數(shù)類型的變量

varz=func(10,20)//作為add函數(shù)使用

alert(z)//8數(shù)組類型

vararr=[]arr[0]=1arr[1]=2arr[10]=3console.log(arr,"數(shù)組長度："+arr.length)</script>數(shù)據(jù)類型示例代碼，上機(jī)測試三、變量的聲明和使用變量：命名的內(nèi)存單元，暫存數(shù)據(jù)；js變量為可變(variant)類型，類型由值決定，在賦值后決定其類型。命名規(guī)則，標(biāo)識(shí)符的命名規(guī)則。varx; //0.聲明變量；當(dāng)前值為undefined，類型為Undefined。x=10; //1.當(dāng)前為Number類型x="abc" //2.當(dāng)前為字符串String類型x=true; //3.當(dāng)前為Boolean類型x=null; //4.當(dāng)前為Object類型，值為null。x="102"; //5.字符串類型x='102a'; //6.字符串類型使用typeof函數(shù)取得變量類型：typeof變量名=>函數(shù)返回值為小寫字符串類型的類型名

；（1）變量聲明和使用：可變類型---所有的變量都使用var關(guān)鍵字聲明，表示可以保存任意類型數(shù)據(jù)（2）類型轉(zhuǎn)換：1.字符串

數(shù)字：Number/parseInt/parseFloat√

parseXXX函數(shù):只取數(shù)字(整數(shù)parseInt或小數(shù)parseFloat)開頭部分，因此不會(huì)四舍五入；非數(shù)字開頭的字符串執(zhí)行結(jié)果為NaNvarx1="100";varx2="100.89abc";varx3="abc100";console.log(Number(x1),Number(x2),Number(x3));console.log(parseInt(x1),parseInt(x2),parseInt(x3));console.log(parseFloat(x1),parseFloat(x2),parseFloat(x3));√

Number函數(shù)將純數(shù)字字符串轉(zhuǎn)換為數(shù)字；非數(shù)字字符串轉(zhuǎn)換結(jié)果為NaN，例如；Number(’10a’)NaNNaN：NotaNumber表示結(jié)果不是一個(gè)數(shù)字。√N(yùn)umber函數(shù)：null和空字符串””轉(zhuǎn)換為數(shù)字為：0，但undefined將轉(zhuǎn)換為NaN（2）類型轉(zhuǎn)換：2.數(shù)字->字符串，使用函數(shù)toString(),或使用連接符+””(空字符串)

//2.轉(zhuǎn)換為指定進(jìn)制數(shù)字

varx=123

y=x.toString(2)//y,z,a不聲明也可以直接賦值使用

z=x.toString(8)

a=x.toString(16)

console.log("2進(jìn)制為:"+y,",8進(jìn)制為："+z,",16進(jìn)制為："+a);（2）類型轉(zhuǎn)換：3.數(shù)字->boolean所有的非0數(shù)字都可以轉(zhuǎn)換為true,只有0為false。（2）類型轉(zhuǎn)換：4.boolean

數(shù)字true1;false0。Boolean(10)true;Boolean(-10)true;

注意；Boolean(undefined)false;Boolean(null)false;Boolean("")false;Boolean(NaN)falseNumber(true)1;Number(false)0;使用isNaN函數(shù)可以判斷一個(gè)變量是否是非數(shù)字，結(jié)果為true時(shí)表示非數(shù)字，不能使用Number函數(shù)轉(zhuǎn)換為數(shù)字，例如：varx1="100a"varx2="abc"varx3="89.7"console.log(isNaN(x1),isNaN(x2),isNaN(x3))結(jié)果為:truetruefasle。結(jié)果為true表示非數(shù)字字符串，不能使用Number函數(shù)轉(zhuǎn)換為數(shù)字；false表示是數(shù)字字符串，可以使用Number函數(shù)轉(zhuǎn)換為數(shù)字。

//1.字符串轉(zhuǎn)換為數(shù)值

varx1="100"

varx2="100.98.10"

varx3="100.98abc"

//Number(純數(shù)字字符串)->數(shù)值類型；非數(shù)字字符串==>NaN

console.log(Number(x1),Number(x2),Number(x3))

//null和空字符串""==>轉(zhuǎn)換為0

；但undefined轉(zhuǎn)換為NaN

console.log(Number(null),Number(""),Number(undefined))

//parseInt(數(shù)字字符串)取字符串整數(shù)部分(不會(huì)四舍五入)

console.log(parseInt(x1),parseInt(x2),parseInt(x3))

//parseFloat(數(shù)字字符串)去字符串小數(shù)部分(不會(huì)四舍五入)

console.log(parseFloat(x1),parseFloat(x2),parseFloat(x3))

//2.toString()任意類型轉(zhuǎn)換為字符串

varx=100

console.log(x+"")

console.log(x.toString(2),x.toString(8),x.toString(16))數(shù)據(jù)類型示例代碼，上機(jī)測試

//3.數(shù)字轉(zhuǎn)換為Boolean類型

//非0為true,0為false

console.log(Boolean(10),Boolean(-10),Boolean(0))

//null、""空字符串和undefined、NaN均為false

console.log(Boolean(null),Boolean(""),Boolean(undefined),Boolean(NaN))

//注意，在條件表達(dá)式中，表達(dá)式的值會(huì)自動(dòng)轉(zhuǎn)換為布爾類型

//4.Boolean轉(zhuǎn)換為數(shù)字

//true-->1

;false-->0

console.log(true,false)

//5.isNaN(變量)

判斷是否為非數(shù)字，實(shí)質(zhì)是指該變量能否使用Number轉(zhuǎn)換為數(shù)字

console.log(isNaN(null),isNaN(""),isNaN(NaN),isNaN(undefined))

數(shù)據(jù)類型示例代碼，上機(jī)測試四、運(yùn)算符和表達(dá)式包括：算術(shù)運(yùn)算；賦值與復(fù)合賦值運(yùn)算；比較運(yùn)算；邏輯運(yùn)算1.算術(shù)運(yùn)算符和表達(dá)式；【數(shù)值類型數(shù)據(jù)運(yùn)算】vara=1,b=2varx=a+bvary=a%bvarz=a*bconsole.log("x=",x,";y=",y,";z="+z)a++;b++x=a/by=++b+az=a++console.log("x=",x.toFixed(2),";y=",y,";z=",z)toFixed方法中的參數(shù)為數(shù)字，表示保留指定的小數(shù)位數(shù)。運(yùn)算符：+、-、*、/、%、++、--代碼分析√

如果數(shù)字字符串與任何類型相加，都表示字符串連接；√

但數(shù)字字符串與數(shù)字進(jìn)行其他算術(shù)運(yùn)算，則會(huì)將數(shù)字字符串自動(dòng)使用Number函數(shù)轉(zhuǎn)換后進(jìn)行運(yùn)算，例如：vara="10",b="10a"varx1=a+1/*101*/varx2=a-2/*8*/varx3=a*2/*20*/varx4=b*10/*NaN*/console.log(x1,x2,x3,x4)結(jié)果為：101820NaN[參與運(yùn)算的數(shù)據(jù)，實(shí)際使用時(shí)建議明確轉(zhuǎn)換為數(shù)字類型]代碼分析對變量進(jìn)行賦值：=+=、-=、*=、/=、%=varx=10;x+=10; x=x+10;

x=10;

y=2;

x/=y+2;x=x/(y+2)

原則：先算右邊表達(dá)式,左邊再對表達(dá)式的結(jié)果進(jìn)行復(fù)合運(yùn)算比較兩個(gè)數(shù)的大小，結(jié)果為布爾類型值。>、>=、<、<=、!=、==、===數(shù)值與字符串類型比較：==取值比較，僅取值比較（默認(rèn)將字符串使用Number轉(zhuǎn)換為數(shù)字再進(jìn)行比較），例如99==“99”=>true99=="99a"false“99a”無法轉(zhuǎn)換為數(shù)字===：絕對等

；

例如：99===“99”=>false值相等，但類型不同絕對等===條件：值和類型都要相同，或者引用同一個(gè)對象；注意：兩個(gè)獨(dú)立創(chuàng)建的對象是不相等的，更不可能全等2.賦值與復(fù)合賦值運(yùn)算符3.比較運(yùn)算符<script>vara=newString("123")varb=newString("123")varc=a

//==是取值比較；===是值相同，而且引用同一個(gè)對象

//但不同對象是不相等的，對象之間比較的是地址；更不能會(huì)全等

console.log(a==b,a===b,a=="123",a==="123")console.log(c==a,c===a,c=="123",c==="123")</script>注意：1.NaN不等于NaN;2.沒有賦值的變量不能用于運(yùn)算，否則出現(xiàn)異常console.log(NaN==NaN)//falsevarx;console.log(x==undefined)//true//y沒有聲明console.log(typeof(y))//undefined（未聲明類型）console.log(y==undefined)//異常沒有聲明變量不能參與運(yùn)算運(yùn)算符：&&||!

var

bol1=1||4;

var

bol2=1>4||4;

var

bol3=1<4||4;

//理解短路運(yùn)算

console.log("1||4

"

,bol1)

console.log("1>4||4

",bol2)

console.log("1<4||4

",bol3)

var

bol1=!1&&4;

var

bol2=!1>4&&4

var

bol3=!1<4

&&

4var

xx,yy=10;

xx=xx||yy;

x=0;

y=2;

z=

(x||++y);z=?;當(dāng)x=10呢優(yōu)先級：算術(shù)運(yùn)算符；比較運(yùn)算符；邏輯運(yùn)算符;賦值；其中()最高級，其次是取反運(yùn)算注意：在條件表達(dá)式中，（1）所有正負(fù)數(shù)均為true，只有0為false；（2）undefined和null、NaN及空字符串均為false邏輯運(yùn)算的結(jié)果有以下兩種：1）當(dāng)操作數(shù)包含非比較表達(dá)式時(shí)，結(jié)果為最終影響條件成立時(shí)的表達(dá)式值的結(jié)果2）當(dāng)操作數(shù)均為比較運(yùn)算式時(shí)，結(jié)果才為布爾類型的true或false。試一試4.邏輯運(yùn)算符連接多個(gè)表達(dá)式，最終結(jié)果用于判斷條件是否成立代碼分析varmsg=x>10?”大于10”：“小于等于10”;var

year=2004;

var

bol1=year

%4==0

&&

year

%

100!=0

var

bol2=year

%

400==0;

var

bol=bol1||bol2;

alert(

bol?"是閏年":"不是閏年")示例：問號(hào)表達(dá)式的使用顯示一個(gè)年份是否是閏年，輸出“是閏年”或“不是閏年”1.能被4整除且不能被100整除；2.能被400整除5.問號(hào)表達(dá)式：條件？值1：值2試一試<script>

vara=newString("123")

varb=newString("123")

varc=a;

console.log("a==b

",a==b,)

console.log("a===b

",a===b)

console.log("a==c

",a==c)

console.log("a===c

",a===c)

console.log("a=='123'

",a=="123")

console.log("a=='123'

",a==123)

console.log("a==='123'

",a==="123")</script>試一試1.理解練習(xí)：編程測試

2.理解練習(xí)：編程測試測試以下表達(dá)式，使用你的調(diào)試方法輸出結(jié)果varbol=NaN==NaN=>bol=?varx;x==undefined?y==undefined=>？typeof(y)==‘undefined’?//是否是存在的類型，是/否99==“99a”?//默認(rèn)將字符串使用Number轉(zhuǎn)換為數(shù)字進(jìn)行比較99==‘99’?結(jié)果是？值/值;值/引用會(huì)轉(zhuǎn)換為值類型比較；而兩者均為引用時(shí)作為對象比較1.下面哪個(gè)不是JavScript的注釋符A.//

B./**/

C.<!---->

D.全是2.JavaScrip代碼的使用方式包括：A.內(nèi)嵌方式

B.內(nèi)部方式

C.外部文件方式

D.全是3.console.log方法的主要作用是在瀏覽器的控制臺(tái)輸出調(diào)試信息A．正確

B.錯(cuò)誤4.null是一種JavaScript的數(shù)據(jù)類型。A．