Web技術(shù)應(yīng)用基礎(chǔ)第六章

上傳人：1*** IP屬地：云南上傳時(shí)間：2025-01-19 格式：PPT 頁數(shù)：129 大?。?.08MB 積分：20 舉報(bào) 版權(quán)申訴

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

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

文檔簡介

1第6章JavaScript

第6章JavaScript2

第6章JavaScript學(xué)習(xí)要點(diǎn)：

理解腳本的基本概念，JavaScript運(yùn)行機(jī)制

熟練掌握將JavaScript語句嵌入HTML文檔，和調(diào)入外部JS文件方法

應(yīng)用JavaScript基本語法、控制語句和函數(shù)完成JavaScript程序設(shè)計(jì)

掌握window對(duì)象、document對(duì)象和JavaScript內(nèi)置對(duì)象的屬性和方法的應(yīng)用

熟練應(yīng)用JavaScript編制事件處理程序3JavaScript歷史JavaScript是由Netscape公司開發(fā)的一種腳本語言，其目的是為了擴(kuò)展基本HTML的功能，用于代替復(fù)雜的CGI程序來處理Web頁表單信息，提高了響應(yīng)速度，同時(shí)可以為Web頁增加動(dòng)態(tài)效果。Netscape將這種腳本語言命名為LiveScript，它的整個(gè)語法以Java為基礎(chǔ)，但比Java要簡單，同時(shí)，由于它是一種腳本語言，所以無需編譯，可由瀏覽器直接解釋運(yùn)行，而不象Java那樣需要經(jīng)過編譯。Netscape見LiveScript大有發(fā)展前途，而SUN也覺得可以利用Livescript為Java的普及做鋪墊，于是兩家簽訂協(xié)議，將LiveScript改為JavaScript，造就了這個(gè)強(qiáng)力的WEB頁開發(fā)工具。46.1JavaScript概述6.1.1JavaScript運(yùn)行機(jī)制

腳本:完成某種功能的小程序段.接近高級(jí)語言，不具有高級(jí)語言復(fù)雜、嚴(yán)謹(jǐn)?shù)恼Z法規(guī)則。腳本語言功能:能夠?qū)撁婀δ苓M(jìn)行管理與控制，具有動(dòng)態(tài)效果，完成計(jì)算、表單客戶端驗(yàn)證、游戲編寫和頁面特效制作等工作。客戶端腳本:在客戶機(jī)上運(yùn)行的腳本程序，客戶端產(chǎn)生動(dòng)態(tài)效果。服務(wù)器端腳本:在服務(wù)器上運(yùn)行的腳本程序，支持?jǐn)?shù)據(jù)庫通信，與客戶交互，產(chǎn)生動(dòng)態(tài)效果。腳本語言主要有:VBScript和JavaScript

第6章JavaScript5JavaScript運(yùn)行過程:(1)瀏覽器地址欄目輸入請求頁面的URL(頁面嵌入了JavaScript程序段)。(2)瀏覽器將請求發(fā)送到服務(wù)器。(3)服務(wù)器響應(yīng)請求，將嵌入JavaScript的HTML文檔發(fā)送到客戶端。(4)客戶端瀏覽器從上到下逐行解釋執(zhí)行HTML標(biāo)記和JavaScript腳本，并把JavaScript腳本交腳本引擎執(zhí)行，把執(zhí)行結(jié)果向客戶展示。

第6章JavaScript66.1.2JavaScript特點(diǎn)1.JavaScript是一種腳本語言2.基于對(duì)象（不是基于面向?qū)ο笳Z言）3.事件驅(qū)動(dòng)4.動(dòng)態(tài)（HTML是靜態(tài)頁面）5.安全6.與平臺(tái)無關(guān)

第6章JavaScript77JavaScript與Java語言的比較JavaScript與Java之間其它的一些主要區(qū)別１、Java程序被編譯成為字節(jié)代碼文件；JavaScript則是將字符正文傳遞給客戶端并由客戶端解釋執(zhí)行。２、JavaScript是基于對(duì)象的，它自身具有已創(chuàng)建完畢的對(duì)象；而Java則是面向?qū)ο蟮?，?duì)象必須從類中創(chuàng)建。３、JavaScript的代碼以字符的形式嵌入在HTML文檔中；Javaapplet則是由文檔引用，其代碼以字節(jié)代碼的形式保存在另一個(gè)獨(dú)立的文件中。8JavaScript與Java語言的比較JavaScript與Java之間其它的一些主要區(qū)別４、在HTML文檔中，用標(biāo)識(shí)<SCRIPT>標(biāo)明JavaScript腳本；而Javaapplet則用標(biāo)識(shí)<APPLET>來標(biāo)明。５、JavaScript采用弱類型；而Java則采用強(qiáng)類型。9JavaScript是一種弱類型語言下面的例子說明了在JavaScript中使用變量的靈活性<html><head><title>JavaScript是弱類型的</title><ScriptLanguage="JavaScript"></SCRIPT></head></html>106.1.3JavaScript應(yīng)用示例

——圖像互換位置

第6章JavaScript

1.任務(wù)要求

要求頁面上有兩幅圖像及有關(guān)圖像的說明的文字，當(dāng)用戶用鼠標(biāo)左鍵單擊頁面時(shí)，圖像交換位置。

例6.111ex6-01.html代碼清單<html><head><title>JavaScript應(yīng)用案例</title><scriptlanguage="JavaScript">functionChangeImage(){vardog_top=dog.style.topvardog_left=dog.style.leftdog.style.top=cat.style.topdog.style.left=cat.style.left

cat.style.top=dog_top

cat.style.left=dog_left}</script></head>

第6章JavaScript事件響應(yīng)函數(shù)，圖像互換位置定義腳本嵌入HTML腳本段12<bodyonclick="ChangeImage()"><fontface="隸書"color="blue"size=6>請單擊頁面</font><p><divid="cat"style="position:absolute;top:60px;left:60px"><imgsrc="cat.gif"width="80"hieght="80"><fontsize=5color="red">cat</font></div><divid="dog"style="position:absolute;top:60px;left:160px"><imgsrc="dog.gif"width="80"hieght="80"><fontsize=5color="red">dog</font></div></body></html>

第6章JavaScriptdiv塊的id為dog鼠標(biāo)單擊事件，調(diào)用ChangeImage()函數(shù)div塊的id為cat13

屬性language是script標(biāo)記的必須指定的基本屬性。一般被指定為JavaScript或VBScript。

runat=Server表示該段腳本在服務(wù)器端執(zhí)行，如果省略，則表示該段腳本將發(fā)送到客戶端運(yùn)行。

腳本代碼放在HTML的注釋標(biāo)記之間，這樣做既不影響支持腳本的瀏覽器正確解釋執(zhí)行腳本程序；也可以使不支持腳本的瀏覽器把這段程序當(dāng)作注釋而旁路掉。

第6章JavaScript146.2JavaScript基本語法

JavaScript由JavaScript核心語言、JavaScript客戶端擴(kuò)展和JavaScript服務(wù)器端擴(kuò)展三部分組成。核心語言部分包括JavaScript的基本語法和JavaScript的內(nèi)置對(duì)象，在客戶端和服務(wù)器端均可運(yùn)行。作用：與HTML超文本標(biāo)記語言、Java小程序一起在一個(gè)Web頁面中鏈接多個(gè)對(duì)象，與Web客戶交互。

第6章JavaScript156.2.1在HTML文檔中調(diào)入或嵌入JavaScript1.嵌入JavaScript使用<script>標(biāo)記把JavaScript語句嵌入HTML文檔

語法規(guī)則：<scriptlanguage=JavaScript></script>language默認(rèn)值：JavaScript例6.2

第6章JavaScript16例6.2<html><head><title>JavaScript嵌入HTML</title></head><body><scriptlanguage="JavaScript">document.write("HelloWorld!")

</script></body></html>

第6章JavaScript172.鏈接外部JavaScript將JavaScript代碼以擴(kuò)展名“.js”單獨(dú)存放

語法:<scriptsrc="JavaScript文件名"></script>

第6章JavaScript例6.318ex6-03.js清單如下：document.write("HelloWorld!")ex6-03.html清單如下:<html><head><title>鏈接JS外部文件</title><scriptsrc="ex6-03.js"></script></head><body></body></html>鏈接JS外部文件

第6章JavaScript19直接添加腳本直接添加腳本直接將代碼作為事件響應(yīng)屬性的值。例如：<inputtype="button"value="clickme!"onclick=javascript:alert("hello")>20

6.2.2JavaScript書寫格式區(qū)分大小寫

可以沒有可見行結(jié)束標(biāo)志，換行符作為行終止符。也可以用(;)作為一行終止符。

C語言、C＋＋和Java語言中，使用分號(hào)(;)作一行的結(jié)束標(biāo)志

如果需要把幾行代碼寫在一行，使用分號(hào)(;)分開。

vara=3varb=6varc=0vara=3;b=6;c=0

第6章JavaScript21

為了使程序清晰易讀，采用縮進(jìn)格式來書寫。

可以用兩種方法進(jìn)行注釋。注釋方法與C＋＋相同。

//：從注釋標(biāo)記“//”起直到行尾的字符都被忽略。

/**/：在“/*”與“*/”之間的字符都被忽略。

第6章JavaScript226.2.3基本數(shù)據(jù)類型1.數(shù)據(jù)類型

數(shù)值型(整數(shù)和浮點(diǎn)數(shù))

字符型

布爾型(取值為true或false)

空值

2.常量

值保持不變的量

第6章JavaScript233.變量關(guān)鍵字“var”聲明變量并分配存儲(chǔ)空間，var為可選項(xiàng)

var

a=3//聲明變量，并賦初值

a=3//省略關(guān)鍵字var

vara//聲明變量后,賦值

a=6

三種方法等效，但不能既不用關(guān)鍵字“var”也不賦初置。

第6章JavaScript2424JavaScript定義變量

JavaScript的命名規(guī)則第一個(gè)字符必須為字母、下劃線(_)，或者美元符號(hào)($)緊接著的字符可以使字母、數(shù)字、下劃線(_)或者美元符號(hào)($)變量名中不能有空格與其它標(biāo)點(diǎn)符號(hào)。變量名不能為保留字。變量名對(duì)字母的大小寫敏感（變量Orange!=orange）。P_154選擇題第一題25JavaScript內(nèi)部定義的保留字不能用作變量名。JavaScript區(qū)分大小寫的，變量Num與變量num是兩個(gè)不同的變量。JavaScript的變量采用了弱類型(Looselytyped)表達(dá)方式,變量在聲明時(shí)不必顯式說明它的類型，而是在使用時(shí)根據(jù)數(shù)據(jù)的類型來確定變量的類型。在函數(shù)體外聲明為全局變量JavaScript提供四種類型變量：數(shù)值型：36，3.1415926，-3.1E12等字符串型：“Hello!”邏輯型：true，false空值型：null

第6章JavaScript2626轉(zhuǎn)義字符字符說明\b退格符\f換頁符\n換行符\r回車符\’單引號(hào)\”雙引號(hào)\t制表符和C語言一樣，js也有轉(zhuǎn)義字符，常用的就是：“\n”274.表達(dá)式表達(dá)式是由變量、常量和運(yùn)算符按一定規(guī)則組成的集合，表達(dá)式的值可以是數(shù)字、字符串或布爾量。JavaScript有三種表達(dá)式:算術(shù)表達(dá)式、串表達(dá)式和邏輯表達(dá)式。

第6章JavaScript285.運(yùn)算符

.對(duì)象訪問、[]數(shù)組下標(biāo)、()括號(hào)；++增、--減、-取負(fù)、~位邏輯非、！邏輯非；delete、new、Typeof、this；*乘、/除、%取模、+加、-減；<<,>>移位、<小于、<=小于等于、>大于、>=大于等于、==等于、!=不等于；&位或、^位異或、|位與、&&與、||邏輯或；=賦值；(Jscript是弱變量型的，可以重復(fù)賦值)?:條件運(yùn)算。優(yōu)先次序從前到后！

第6章JavaScript29一、一元運(yùn)算符(1)遞增++和遞減--JS代碼：varbox1=100;++box1;document.write(“box1=”+box1+“<br/>”);varbox2=100;--box2document.write(“box2=”+box2);30前置和后置的區(qū)別JS代碼：varbox=100;varage=++box;varheight=box++;document.write("age="+age+"<br/>");document.write("height="+height+"<br/>");document.write("box="+box);二、算術(shù)運(yùn)算符

varbox=“100”+100varbox=“100”-10加法運(yùn)算時(shí)，其中一個(gè)是字符串，那么結(jié)果就會(huì)轉(zhuǎn)換為字符串。相當(dāng)于字符串連接符，不能再算作是加法算術(shù)運(yùn)算符。32二、算術(shù)運(yùn)算符varbox="100"-10;document.write("box="+box+"<br/>");varage=5/4;document.write("age="+age+"<br/>");varheight=("你的年齡是："+(10+10));

document.write(height);如果在算術(shù)運(yùn)算符的值不是數(shù)值，那么它會(huì)先使用Number()轉(zhuǎn)型函數(shù)將其轉(zhuǎn)換為數(shù)值(隱式轉(zhuǎn)換)。33二、關(guān)系運(yùn)算符

varbox1=3>2;document.write(box1+"<br/>");//輸出truevarbox2="3">22;document.write(box2+"<br/>");//輸出falsevarbox3="3">"22";document.write(box3+"<br/>");//輸出truevarbox4="a">"B";//a為97，B為66document.write(box4+"<br/>");//輸出truevarbox5="Blue"<"alpha";//Blue的第一個(gè)字母是B，alpha的第一個(gè)字母是a，a為97，B為66document.write(box5)//輸出true兩個(gè)操作數(shù)有一個(gè)是數(shù)值，則將另一個(gè)轉(zhuǎn)換為數(shù)值，在進(jìn)行數(shù)值比較

34二、位運(yùn)算符

JavaScript語言中包括了七種位運(yùn)算符：~(位非)，&(位與)，|(位或)，^(位異或)，<<(左移)，>>(有符右移號(hào))，>>>(無符號(hào)右移)

varbox=25&3;

document.write(box);varbox=25|3;

document.write(box);varbox=25^3;

document.write(box);//輸出1//輸出27//輸出26356.3JavaScript控制結(jié)構(gòu)和函數(shù)

6.3.1JavaScript控制結(jié)構(gòu)

1.if…elseif(條件){//如果條件為true，進(jìn)行處理。}else{//如果條件為false，進(jìn)行處理。}如果不需要處理false情況，可不寫else語句段，例如：if(條件){//如果條件為true，進(jìn)行處理。}

第6章JavaScript362.switch語句switch(表達(dá)式){case值1：語句集1breakcase值2：語句集2break…

default:

語句集

break}

第6章JavaScript如果表達(dá)式值等于值1，執(zhí)行語句集1如果表達(dá)式值與常量都不匹配，執(zhí)行default語句集

3737switch語句varx=“c”;vary;Switch(x){case“a”:y=5;case“b”:y=6;default:y=0;}指出代碼錯(cuò)誤383.forfor循環(huán)語句設(shè)置了一個(gè)計(jì)數(shù)器計(jì)算循環(huán)次數(shù)，達(dá)到循環(huán)次數(shù)后結(jié)束循環(huán)。for(初始化表達(dá)式；條件；增量表達(dá)式){

語句集}

第6章JavaScript394.循環(huán)語句whilewhile循環(huán)語句不直接指明循環(huán)次數(shù)，具體循環(huán)次數(shù)由運(yùn)行時(shí)情況決定，滿足循環(huán)條件執(zhí)行循環(huán)體語句，不滿足循環(huán)條件退出循環(huán)體。語法規(guī)則：while(條件){

語句段}·break語句：根據(jù)條件終止循環(huán)?！ontinue語句：根據(jù)條件，跳過循環(huán)體內(nèi)剩余語句，進(jìn)入下一次循環(huán)。

第6章JavaScript4040可以用在for或while循環(huán)中，使循環(huán)中斷，跳到for或while循環(huán)結(jié)束的位置。例:for(i=0;i<20;i++){ if(i>10){ break;}document.write(i+”-”);}

break運(yùn)行結(jié)果：0-1-2-3-4-5-6-7-8-9-10-4141continue用在for或while循環(huán)可以跳過循環(huán)體中剩余的語句，直接進(jìn)行下一次循環(huán)。例:variNum=0;for(vari=1;i<10;i++){ if(i%5==0){ continue; } iNum++;}alert(iNum);continue運(yùn)行結(jié)果：8426.3.2函數(shù)函數(shù)必須先定義，后使用。瀏覽器先執(zhí)行HTML文檔中的<head>模塊，JavaScript中常把自定義函數(shù)放在<head>模塊中，在HTML文檔主體<body>中調(diào)用函數(shù)。函數(shù)定義的規(guī)則如下：function

函數(shù)名(參數(shù)列表){

函數(shù)體}·function：關(guān)鍵字，使解釋程序知道后面定義函數(shù)·函數(shù)名：可以是任何合法的標(biāo)識(shí)符·參數(shù)列表：函數(shù)的參數(shù)列表，多個(gè)參數(shù)用逗號(hào)分開·函數(shù)體：函數(shù)執(zhí)行的運(yùn)算

第6章JavaScript43JavaScript函數(shù)內(nèi)置函數(shù)

eval

函數(shù)：用于計(jì)算字符串表達(dá)式的值

isNaN

函數(shù)：用于驗(yàn)證參數(shù)是否為NaN（非數(shù)字）<SCRIPTLANGUAGE="JavaScript">varstr1=prompt(“輸入一個(gè)表達(dá)式，我給您計(jì)算","1+1");varresult=eval(str1);document.write(str1+"="+result);varx=prompt("輸入一些數(shù)據(jù)","0");if(isNaN(x))alert(x+"不是一個(gè)數(shù)字");else

alert(x+"是一個(gè)數(shù)字");</SCRIPT>44自定義函數(shù)定義函數(shù)：function函數(shù)名(參數(shù)1,參數(shù)2，…){

語句;}//通常在文檔的HEAD部分定義函數(shù)，可以確保先定義后使用;//函數(shù)返回值使用“return返回值”;如果使用”return”或沒有使用return,則函數(shù)返回值為不確定值(undefined)。調(diào)用函數(shù)：

函數(shù)調(diào)用一般和表單元素的事件一起使用，調(diào)用格式為：事件名＝“函數(shù)名”

;functionsum(one,two){varresult=one+two;

returnresult;}<INPUTname=“add”type=“button”value=“加法"onClick="sum(2,5)">表示單擊此按鈕時(shí)，調(diào)用函數(shù)sum()執(zhí)行45函數(shù)的應(yīng)用num1num2result46定義函數(shù)JavaScript代碼<HEAD><SCRIPTlanguage="JavaScript">functioncompute(op){varnum1,num2;num1=parseFloat(document.myform.num1.value);num2=parseFloat(document.myform.num2.value);if(op=="+") document.myform.result.value=num1+num2;if(op=="-") document.myform.result.value=num1-num2;if(op=="*") document.myform.result.value=num1*num2;if(op=="/"&&num2!=0) document.myform.result.value=num1/num2;}</SCRIPT></HEAD>定義函數(shù)compute()，完成計(jì)算的功能。op參數(shù)代表運(yùn)算符號(hào)47調(diào)用函數(shù)<FORMaction=""method="post"name="myform"><P>第一個(gè)數(shù)<INPUTname="num1"type="text"><BR>第二個(gè)數(shù)<INPUTname="num2"type="text"></P><P><INPUTname="addButton"type="button"value="＋"onClick="compute('+')"><INPUTname="subButton"type="button"value="－"onClick="compute('-')"><INPUTname="mulButton"type="button"value="×"onClick="compute('*')"><INPUTname="divButton"type="button"value="÷"onClick="compute('/')"></P><P>計(jì)算結(jié)果<INPUTname="result"type="text"></P></FORM>486.4JavaScript對(duì)象6.4.1JavaScript對(duì)象概述

對(duì)象具有:

屬性(properties)

方法(methods)3種對(duì)象:

JavaScript內(nèi)建對(duì)象

瀏覽器環(huán)境提供的對(duì)象

自定義對(duì)象

第6章JavaScript496.4.2自定義對(duì)象語法：function對(duì)象名稱(屬性列表){this.屬性1=參數(shù)1this.屬性2=參數(shù)2…this.方法1=函數(shù)名1this.方法2=函數(shù)名2…}

第6章JavaScript50創(chuàng)建對(duì)象實(shí)例

語法：對(duì)象實(shí)例名=new對(duì)象名稱(屬性值列表)

第6章JavaScript51functionstudent(id,name,url){this.id=id=namethis.url=urlthis.display=student_display}MyStudent=newstudent("000001","林琳","")定義學(xué)生對(duì)象學(xué)生對(duì)象實(shí)例

第6章JavaScript對(duì)象實(shí)例名=new對(duì)象名稱(屬性值列表)52student(id,name,url)

MyStudentid:000001name:林琳url:

YourStudentid:000002name:李四url:定義學(xué)生對(duì)象對(duì)象實(shí)例，具體學(xué)生

第6章JavaScript536.4.3對(duì)象屬性和方法的引用

1.對(duì)象屬性的引用語法：對(duì)象實(shí)例名.屬性成員名例,MyStudent.name=“林琳”

第6章JavaScript54語法：對(duì)象實(shí)例名[n]例,MyStudent[0]="000001"MyStudent[1]="林琳"MyStudent[2]=或：MyStudent["id"]="000001"MyStudent["name"]="林琳"MyStudent["url"]=

第6章JavaScript552.對(duì)象方法的引用

語法：對(duì)象實(shí)例名.方法名稱()例如：MyStudent.display()

第6章JavaScript566.4.4對(duì)象的操作1.for…in語句

for…in是操作對(duì)象的語句，也稱遍歷。遍歷是指逐一通過一個(gè)對(duì)象的所有屬性，它的計(jì)數(shù)值是對(duì)象中的屬性個(gè)數(shù)。語法：for(變量in

對(duì)象){

語句段}

第6章JavaScript572.with語句語法：with(對(duì)象實(shí)例名){

語句段}例：with(MyStudent){id="000001"name="林琳"url=}

第6章JavaScript586.this關(guān)鍵詞用戶引用當(dāng)前所指的對(duì)象，格式:

this[屬性名]

第6章JavaScript596.4.5事件驅(qū)動(dòng)與事件處理

第6章JavaScript

發(fā)生火災(zāi)事件調(diào)用消防車處理火災(zāi)事件日常生活中的事件事件處理程序客戶觸發(fā)鍵盤事件調(diào)用事件處理程序響應(yīng)鍵盤事件JavaScript中的事件客戶觸發(fā)鍵盤事件60JavaScript常用事件事件名稱說明onClick鼠標(biāo)左鍵單擊頁面對(duì)象時(shí)發(fā)生。如，鼠標(biāo)左鍵單擊按鈕等onChange對(duì)象內(nèi)容發(fā)生改變時(shí)發(fā)生。如文本框內(nèi)容改變時(shí)onFocus對(duì)象獲得焦點(diǎn)（鼠標(biāo)）時(shí)發(fā)生onBlur對(duì)象失去焦點(diǎn)（鼠標(biāo)）時(shí)發(fā)生onload網(wǎng)頁載入瀏覽器時(shí)發(fā)生，發(fā)生對(duì)象為HTML的<body>標(biāo)記onUnload用戶離開當(dāng)前頁面時(shí)發(fā)生，發(fā)生對(duì)象為HTML的<body>標(biāo)記onMouseOver鼠標(biāo)移到對(duì)象上時(shí)發(fā)生onMouseOut鼠標(biāo)離開對(duì)象上時(shí)發(fā)生onMouseMove鼠標(biāo)在對(duì)象上移動(dòng)時(shí)發(fā)生onMouseDown鼠標(biāo)在對(duì)象上按下時(shí)發(fā)生onMouseUp鼠標(biāo)在對(duì)象上釋放時(shí)發(fā)生onSubmit表單提交時(shí)發(fā)生。如單擊“提交”按鈕，產(chǎn)生onSubmit事件onResize窗口大小改變時(shí)發(fā)生

第6章JavaScript616.4.61.對(duì)象的定義與創(chuàng)建例6.5例6.5

第6章JavaScript62例6.5<html><head><title>JavaScrip對(duì)象應(yīng)用</title><scriptlanguage="JavaScript">functionstudent(id,name,url){

this.id=id=namethis.url=urlthis.display=student_display}

第6章JavaScript63functionstudent_display(){document.writeln("id="+this["id"]+"<br>")document.writeln("name="+this["name"]+"<br>")document.writeln("url="+this["url"]+"<br>")}MyStudent=newstudent("000001","林琳",“")MyStudent.display()</script></head><body></body></html>

第6章JavaScript64

第6章JavaScript2.用戶輸入信息驗(yàn)證例6.6界面上有一個(gè)輸入卡號(hào)文本框和一個(gè)密碼框輸入卡號(hào)后，驗(yàn)證用戶輸入卡號(hào)的格式是否正確（要求輸入以10起頭的6位數(shù)）如果輸入不正確，提示客戶重新輸入，卡號(hào)輸入正確后才能輸入密碼。例6.665

第6章JavaScriptex6-06.html代碼清單如下：

<html><head><title>驗(yàn)證信用卡號(hào)</title><scriptlanguage="JavaScript">functioninput(){//獲得鼠標(biāo)焦點(diǎn)事件，清空輸入卡號(hào)文本框，輸入卡號(hào)

if(document.myForm.card.value=="請輸入10開始的6位數(shù)字10xxxx")document.myForm.card.value=""}66

第6章JavaScriptfunctionverify(){//響應(yīng)失去鼠標(biāo)焦點(diǎn)事件，驗(yàn)證卡號(hào)輸入格式是否正確

varcardNumber=document.myForm.card.valueif(cardNumber.substr(0,2)!="10"||isNaN(cardNumber)){alert("輸入格式錯(cuò)誤,請重新輸入!")document.myForm.card.focus()}}</script></head>67獲得鼠標(biāo)焦點(diǎn)，調(diào)用input()函數(shù)失去鼠標(biāo)焦點(diǎn)，調(diào)用verify()函數(shù)

<body><formname="myForm"method="post"action="">請輸入卡號(hào)：<br><inputname="card"type="text"size=28value="請輸入10開始的6位數(shù)字10xxxx"

onFocus="input()"onBlur="verify()"><p>

請輸入密碼：<br><inputname="pass"type="password"size=30></body></html>

第6章JavaScript686.5window對(duì)象在JavaScript中的應(yīng)用

6.5.1window對(duì)象構(gòu)成

對(duì)象有用戶建立的對(duì)象，也有系統(tǒng)提供的內(nèi)建對(duì)象。Window對(duì)象是內(nèi)建對(duì)象中的最頂層對(duì)象。Window對(duì)象指的是瀏覽器窗口對(duì)象。

第6章JavaScript69

第6章JavaScriptwindowlocationdocumenthistorylinkbodyanchorformimageselectionappletseventnavigatorbuttoncheckboxtextoptionpasswordselectsubmitradioreset706.5.2window對(duì)象定位例如:window→document→form→text。window.document.myForm.card(1)瀏覽器窗口，頂層Window對(duì)象(2)頁面文檔內(nèi)容，document對(duì)象(3)文檔內(nèi)的表單，名為myForm(4)表單文本框，名為card(4)表單密碼框，名為pass

頂層window對(duì)象第2層document對(duì)象第3層form對(duì)象第4層text對(duì)象

第6章JavaScript716.5.3window對(duì)象的屬性

1.window對(duì)象主要屬性屬性名稱

說明

范例name當(dāng)前窗口名字parent當(dāng)前窗口父窗口

self當(dāng)前打開窗口

self.status=“你好”top窗口集合中最頂層窗口

status設(shè)置當(dāng)前打開窗口狀態(tài)欄的顯示數(shù)據(jù)

self.status=“歡迎”defaultStatus當(dāng)前窗口狀態(tài)欄的顯示數(shù)據(jù)

self.defaultStatus=“歡迎”

第6章JavaScript726.5.4window對(duì)象的方法

1.window對(duì)象的主要方法

第6章JavaScript方法名稱說明使用范例alert()創(chuàng)建一個(gè)帶提示信息和“確定”按鈕的對(duì)話框window.alert("請輸入姓名！")confirm()創(chuàng)建帶提示信息、“確定”和“取消”按鈕對(duì)話框window.confirm("鏈接到google?")close()關(guān)閉當(dāng)前打開的瀏覽器窗口window.close()open()打開一個(gè)新的瀏覽器窗口window.open(URL,"新窗口名",新窗口設(shè)置)prompt()創(chuàng)建一個(gè)帶提示信息、“確定”、“取消”按鈕及輸入字符串字段的對(duì)話框mpt("請輸入姓名!")setTimeout()設(shè)置一個(gè)時(shí)間控制器window.setTimeout("clearTimeOut()",3000)clearTimeout()清除原來時(shí)間控制器內(nèi)的設(shè)置window.clearTimeout()732.JavaScript的接口元素

alert(提示)：顯示警告框，“提示”是可選項(xiàng)，警告框中輸出的內(nèi)容。

例：alert("對(duì)不起，用戶名錯(cuò)誤。")

第6章JavaScript74

prompt(提示,缺省值)：顯示提示框，等待用戶輸入文本，用戶選擇“確認(rèn)”按鈕，返回文本框中內(nèi)容，選擇“取消”按鈕，返回一個(gè)空字符串?！疤崾尽焙汀叭笔≈怠倍际强蛇x項(xiàng)，“缺省值”是文本框默認(rèn)值例：prompt("請輸入姓名：")

第6章JavaScript75

comfirm(提示)：顯示確認(rèn)框，等待用戶選擇按鈕?！疤崾尽笨蛇x的，是在提示框中顯示的內(nèi)容，用戶可以根據(jù)提示選擇“確定”或“取消”按鈕例：confirm(MyString+“你好！鏈接到ex07-002.html頁面？")

第6章JavaScript766.5.5window對(duì)象的事件onLoad：網(wǎng)頁載入瀏覽器時(shí)發(fā)生onUnLoad：網(wǎng)頁從瀏覽器窗口中刪除時(shí)發(fā)生onBeforeUnLoad：網(wǎng)頁被關(guān)閉前發(fā)生OnResize：用戶調(diào)整窗口大小時(shí)發(fā)生OnScroll：用戶滾動(dòng)窗口時(shí)發(fā)生OnError：載入的網(wǎng)頁產(chǎn)生錯(cuò)誤時(shí)發(fā)生

第6章JavaScript776.5.6window對(duì)象應(yīng)用案例1.狀態(tài)欄內(nèi)容更新例6.7

第6章JavaScript78<html><head><title>window對(duì)象屬性的應(yīng)用</title><scriptlangnge="JavaScript"><!--functionclearStatus(){window.status="學(xué)習(xí)成功！"}functionwriteStatus(str){

setTimeout("clearStatus()",2000)window.status=str}--></script></head>

第6章JavaScript79<body><form><inputtype="button"name="ControlButton"value="鼠標(biāo)移過來，看狀態(tài)欄！“

onMouseOver="writeStatus('歡迎學(xué)習(xí)Web技術(shù)！');returntrue;"></form></body></html>

第6章JavaScript802.打開一個(gè)新窗口例6.8

第6章JavaScript81例6.8<html><head><title>window對(duì)象的open()方法</title></head><body><fontsize=4><b><p>window對(duì)象的open()方法</p><form><inputtype="button"name="ControlButton"value="請把鼠標(biāo)移過來“

onMouseOver="window.open(':8080','新窗口','width=350,height=200')"></form></b></font></body></html>

第6章JavaScript823.客戶端輸入信息驗(yàn)證例6.9：在客戶端驗(yàn)證用戶輸入數(shù)據(jù)。頁面上有一個(gè)超級(jí)鏈接，當(dāng)用戶點(diǎn)擊鏈接時(shí)，由prompt提示框提示用戶輸入姓名，然后JavaScript程序驗(yàn)證用戶輸入，如果輸入正確彈出確認(rèn)框confirm，若用戶在確認(rèn)框選擇“確認(rèn)”按鈕，則鏈接到網(wǎng)站；如果輸入錯(cuò)誤，出現(xiàn)警告框alert，輸出"對(duì)不起，輸入錯(cuò)誤。"，程序終止例6.9

第6章JavaScript83<HTML><HEAD><TITLE>JavaScript接口元素應(yīng)用</TITLE><SCRIPTLANGUAGE="JavaScript"></SCRIPT></HEAD>

第6章JavaScript84<BODY><CENTER><AHREF=“:8080”onClick=MyLink(‘林琳')><H2>你好！歡迎光臨tomcat！</H2></A></CENTER></BODY></HTML>

第6章JavaScript856.6document對(duì)象在JavaSCript中應(yīng)用

6.6.1document對(duì)象的屬性

第6章JavaScript屬性名稱說明范例alinkColor活動(dòng)超級(jí)鏈接色document.alinkColor=〞r(shí)ed〞bgColor背景色document.bgColor=〞ff0000〞fgColor前景色document.fgColor=〞ff000f〞linkColor未曾訪問過的超級(jí)鏈接的顏色document.linkColor=〞blue〞vlinkColor訪問過的超級(jí)鏈接的顏色document.vlinkColor=〞green〞lastModified最后一次修改頁面時(shí)間date=lastModifiedlocation頁面的URL地址url_info=document.locationtitle頁面的標(biāo)題tit_info=document.title866.6.2document對(duì)象的方法

第6章JavaScript方法名稱說明范例clear()清除文件窗口內(nèi)數(shù)據(jù)document.clear()close()關(guān)閉文檔document.close()open()打開文檔document.open()write()向當(dāng)前文檔寫入數(shù)據(jù)document.write(〞你好〞)writeln()向當(dāng)前文檔寫入數(shù)據(jù)，并換行document.write(〞你好〞)getElementById(〞對(duì)象id〞)獲得指定id對(duì)象的元素document.getElementById("advImage").style.pixelTopgetElementsByName(〞對(duì)象名〞)獲得指定對(duì)象名的一組同名對(duì)象元素document.getElementsByName("MyCheckbox")87

第6章JavaScript6.6.3document對(duì)象的事件表6-13document對(duì)象鼠標(biāo)事件及其使用鼠標(biāo)事件使用說明鼠標(biāo)事件使用說明onClick單擊鼠標(biāo)左鍵時(shí)發(fā)生onMouseOver鼠標(biāo)移到對(duì)象上時(shí)發(fā)生ondblClick雙擊鼠標(biāo)左鍵時(shí)發(fā)生onMouseUp釋放鼠標(biāo)左鍵時(shí)發(fā)生onMouseDown按下鼠標(biāo)左鍵時(shí)發(fā)生onSelectStart開始選取對(duì)象內(nèi)容時(shí)發(fā)生onMouseMove在對(duì)象上移動(dòng)鼠標(biāo)時(shí)發(fā)生onDragStart以拖曳方式選取對(duì)象時(shí)發(fā)生onMouseOut鼠標(biāo)離開對(duì)象時(shí)發(fā)生88表6-14document對(duì)象按鍵事件及其使用

第6章JavaScript按鍵事件使用說明onKeyDown用戶按下按鍵時(shí)發(fā)生onKeyPress用戶按下按鍵時(shí)發(fā)生onKeyDown事件，然后產(chǎn)生onKeyPress事件，如果用戶按住按鍵不放，則產(chǎn)生一系列onKeyPress事件onKeyUp用戶釋放按鍵時(shí)發(fā)生onHelp用戶按下系統(tǒng)定義的幫助鍵時(shí)發(fā)生896.6.4document對(duì)象應(yīng)用案例例6.8

文本框內(nèi)容互換任務(wù)要求：頁面上有2個(gè)文本框，用戶在第1個(gè)文本框輸入內(nèi)容后，點(diǎn)擊第2個(gè)文本框，將在第2個(gè)文本框內(nèi)顯示第1個(gè)文本框的內(nèi)容。

例6.10

第6章JavaScript90<html><head><title>document對(duì)象應(yīng)用</title></head><body>

將文字輸入文本框1<form><inputtype=textonChange="document.my.elements[0].value=this.value;"></form>單擊文本框2顯示文本框1內(nèi)容<formname="my"><inputtype=textonChange="document.form[0].elements[0].value=this.value;"></form></body></html>

第6章JavaScript例6.10HTMLDOM根據(jù)W3C的HTMLDOM標(biāo)準(zhǔn)，HTML文檔中的所有內(nèi)容都是節(jié)點(diǎn)：整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)每個(gè)HTML元素是元素節(jié)點(diǎn)HTML元素內(nèi)的文本是文本節(jié)點(diǎn)每個(gè)HTML屬性是屬性節(jié)點(diǎn)注釋是注釋節(jié)點(diǎn)9192父結(jié)點(diǎn)（parent）子結(jié)點(diǎn)（child）同胞結(jié)點(diǎn)（sibling）例：創(chuàng)建新的HTML元素-appendChild()<divid="div1"><pid=“p1”>這是一段文本.</p><pid=“p2”>這是另一段文本.</p></div><script>varpara=document.createElement("p");varnode=document.createTextNode("新的一段文本.");para.appendChild(node);varelement=document.getElementById("div1");element.appendChild(para);</script>93例：改變HTML內(nèi)容

改變元素內(nèi)容的最簡答的方法是使用innerHTML屬性。

下面的例子更改<p>元素的HTML內(nèi)容：<html><body><pid="p1">HelloWorld!</p><script>document.getElementById("p1").innerHTML="Newtext!";</script></body></html>94956.7JavaScript內(nèi)置對(duì)象

6.7.1String對(duì)象1.創(chuàng)建String對(duì)象使用格式：①var字符串變量名="字符串"

例如：var

str1=“HelloWorld!”②var字符串變量名=new

String（"字符串"）例如：varstr1==new

String（“HelloWorld!”）2.字符串對(duì)象屬性

length:返回字符串的長度。

第6章JavaScript96

3.String對(duì)象方法

方法名稱說明范例big()增加字符串顯示字體的大小str1.big()small()減小字符串文本的大小str1.small()italics()以斜體字顯示字符串str1.italics()bold()以粗體字顯示字符串str1.bold()blink()字符串閃爍顯示str1.blink()fixed()以固定字高顯示字符串str1.fixed()fontcolor()設(shè)置字體顯示顏色str1.fontcolor("red")fontsize(size)設(shè)置字體大小str1.fontsize(5)strike()顯示帶刪除劃線的字符串str1.strike()sub()把文本顯示成下標(biāo)str1.sub()sup()把文本顯示成上標(biāo)str1.sup()

第6章JavaScript97方法名稱說明范例toLowerCase()

將字符轉(zhuǎn)換為小寫str1.toLowerCase()toUpperCase()將字符轉(zhuǎn)換為大寫str1.toUpperCase()indexOf(str,start-position)從start-position位置開始，從左到右查找并返回str子字符串位置，如果找不到返回-1str1.indexOf("he",3)charAt(index)

返回指定位置處的字符，第一個(gè)位置為0str1.charAt(3)substring(start,end)返回start與end位置之間的子串str1.substring(4,8)

第6章JavaScript<html><body><pid="p1">Clicktolocatewhere"locate"firstoccurs.</p><pid="p2">0</p><buttononclick="myFunction()">Tryit</button><script>functionmyFunction(){varstr=document.getElementById("p1").innerHTML;varn=str.indexOf("locate");document.getElementById("p2").innerHTML=n+1;}</script></body></html>98閱讀代碼，分析結(jié)果：<html><body><buttononclick="myFunction()">點(diǎn)我</button><pid="demo">PleasevisitMicrosoft!</p><script>functionmyFunction(){varstr=document.getElementById("demo").innerHTML;vartxt=str.replace("Microsoft","W3cSchool");document.getElementById("demo").innerHTML=txt;}</script></body></html>99閱讀代碼，分析結(jié)果：<html><body><pid="demo">Clickthebuttontodisplaythearrayvaluesafterthesplit.</p><buttononclick="myFunction()">Tryit</button><script>functionmyFunction(){varstr="a,b,c,d,e,f";varn=str.split(",");document.getElementById("demo").innerHTML=n[2];}</script></body></html>100閱讀代碼，分析結(jié)果：1016.7.2Math對(duì)象

第6章JavaScript屬性名稱說明范例E常數(shù)eMath.E=2.718281…LN1010的自然對(duì)數(shù)Math.LN10=2.302585…LN22的自然對(duì)數(shù)Math.LN2=0.693147…LOG2E以2為底E的對(duì)數(shù)Math.LOG2E=1.442695…LOG10E以10為底E的對(duì)數(shù)Math.LOG10E=0.434294…PI圓周率Math.PI=3.141592…SQRT1_20.5的平方根Math.SQRT1_2=0.707106…SQRT22的平方根Math.SQRT2=1.414213…102方法名稱說明范例sin(x),cos(x)返回x正、余弦值，單位弧度Math.sin(1)=0.841470…asin(x),acos(x)返回x反正、余弦值Math.asin(1)=1.570796…tan(x),atan(x)返回x正切、反正切值，單位弧度Math.tan(1)=1.557407…sqrt(x)返回x平方根Math.sqrt(9)=3pow(bv,ev)以bv為底的ev次方Math.pow(2,3)=8abs(x)返回x絕對(duì)值Math.abs(-6)=6random()返回0~1的隨機(jī)數(shù)Math.random()min(x,y)返回x和y中較小的數(shù)Math.min(6,8)=6max(x,y)返回x和y中較大的數(shù)Math.max(6,8)=8round(x)把x參數(shù)舍入到最接近的整數(shù)Math.round(2.667)=3ceil(x)返回大于或等于x的最接近整數(shù)Math.ceil(3.889)=4floor(x)返回小于或等于x的最接近整數(shù)Math.floor(3.889)=3

第6章JavaScript1036.7.3Array對(duì)象語法：數(shù)組對(duì)象實(shí)例名=newArray()例如：vararr1=newArray()vararr2=newArray(8)

第6章JavaScript1042.Array對(duì)象的屬性與方法常用的方法:join()：返回?cái)?shù)組中所有元素連接而成的字符串。

reverse()：將數(shù)組元素逆轉(zhuǎn)排列。

sort()：對(duì)數(shù)組中元素進(jìn)行排序。

第6章JavaScript105JavaScript數(shù)組對(duì)象特點(diǎn):(1)JavaScript可以給一個(gè)數(shù)組的不同元素賦予不類型的值例如：arr1[0]=20//數(shù)值型

arr1[1]=〝張三〞//字符串型

arr1[2]=false//布爾型定義二維數(shù)組：

vararr=newArray(8)for(i=0;i<8;i++)arr[i]=newArray(5)//創(chuàng)建了一個(gè)8×5的二維數(shù)組(2)數(shù)組的長度可以動(dòng)態(tài)變化例如:arr=newArray(8)//定義長度為8的數(shù)組

arr[19]=10//長度增為20

第6章JavaScript1064.7.4.Date對(duì)象

Date對(duì)象主要用于對(duì)系統(tǒng)日期和時(shí)間的操作。沒有屬性，有多種方法。語法形式：

var日期對(duì)象實(shí)例名=new

Date()

例如，MyDate=new

Date()

建立了一個(gè)日期變量MyDate，如果沒有特別指定時(shí)間，將把系統(tǒng)的機(jī)內(nèi)時(shí)間放入MyDate變量。

第6章JavaScript107方法名稱說明范例getYear()返回對(duì)象實(shí)例年份，MyDate.getYear()getMonth()返回對(duì)象實(shí)例月份，值0～11，0是1月MyDate.getMonth()getDate()返回對(duì)象實(shí)例日期,值為1～31MyDate.getDate()getDay()返回對(duì)象實(shí)例星期，值0～6，0星期日MyDate.getDay()getHours()返回小時(shí)，其值為0～23MyDate.getHours()getMinutes()返回分鐘，其值為0～59MyDate.getMinutes()getSeconds()返回秒數(shù)，其值為0～59MyDate.getSeconds()getTime()返回表示時(shí)間的整數(shù)，從1970年1月1日00：00：00開始，以毫秒為單位MyDate.getTime()setYear(timevalue)設(shè)置年份,timevalue為大于1900的整數(shù)MyDate.setYear(2008)setMonth(timevalue)設(shè)置月份數(shù),值為0～11，0代表1月MyDate.setMonth(7)setDate(timevalue)設(shè)置日期,值為1～31MyDate.setDate(20)setDay()設(shè)置星期，其值為0～6，0表示星期日MyDate.setDay(5)

第6章JavaScript108方法名稱說明范例setHours(timevalue)設(shè)置小時(shí)數(shù),timevalue的值為0～23MyDate.setHours(12)setMinutes(timevalue)設(shè)置分鐘數(shù),timevalue的值為0～59MyDate.setMinutes(30)setSeconds(timevalue)設(shè)置秒數(shù),timevalue的值為0～59MyDate.setSeconds(30)setTime()設(shè)置用長整數(shù)表示的時(shí)間，從1970年1月1日00：00：00開始，以毫秒為單位進(jìn)行計(jì)算MyDate.setTime(2000)

第6章JavaScript1096.7.5JavaScript內(nèi)置對(duì)象應(yīng)用案例例6.11

例6.11

第6章JavaScript110<html><head><title>JavaScript內(nèi)置對(duì)象應(yīng)用案例</title><scriptlanguage="JavaScript"></script></head>

第6章JavaScript111<body><scriptlanguage="JavaScript">varBooks=newArray()Books[0]=newBook("算法與數(shù)據(jù)結(jié)構(gòu)","嚴(yán)蔚敏陳文博","清華大學(xué)出版社")Books[1]=newBook("XML/JSP網(wǎng)頁編程教材","吳艾","北京希望電子出版社")Books[2]=newBook("英華大字典","鄭易里","商務(wù)印書館")</script><fontcolor="blue"face="隸書"size=5>點(diǎn)擊按鈕查閱詳細(xì)信息<formname="BookForm"><inputtype=buttonvalue="算法與數(shù)據(jù)結(jié)構(gòu)

人人文庫> 全部分類> 教育資料 > 中學(xué)教育

溫馨提示

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

Web技術(shù)應(yīng)用基礎(chǔ)第六章

文檔簡介

溫馨提示

最新文檔

評(píng)論

Web技術(shù)應(yīng)用基礎(chǔ)第六章

文檔簡介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔