Web技術(shù)應用基礎第六章_第1頁
Web技術(shù)應用基礎第六章_第2頁
Web技術(shù)應用基礎第六章_第3頁
Web技術(shù)應用基礎第六章_第4頁
Web技術(shù)應用基礎第六章_第5頁
已閱讀5頁，還剩124頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1第6章JavaScript

第6章JavaScript2

第6章JavaScript學習要點：

理解腳本的基本概念，JavaScript運行機制

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

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

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

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

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

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

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

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

——圖像互換位置

第6章JavaScript

1.任務要求

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

例6.111ex6-01.html代碼清單<html><head><title>JavaScript應用案例</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事件響應函數(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鼠標單擊事件，調(diào)用ChangeImage()函數(shù)div塊的id為cat13

<script>標記位于<head>和</head>標記之間，在<script>標記中的腳本段將在頁面主體(即在<body>標記中的內(nèi)容)被瀏覽器載入之前解釋執(zhí)行。

<script>標記位于<body>和</body>標記之間時,這一段腳本程序?qū)⒃贖TML文檔被瀏覽器載入過程中被解釋執(zhí)行?

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

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

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

第6章JavaScript146.2JavaScript基本語法

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

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

語法規(guī)則：<scriptlanguage=JavaScript><!--JavaScript代碼--></script>language默認值：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代碼以擴展名“.js”單獨存放

語法:<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直接添加腳本直接添加腳本直接將代碼作為事件響應屬性的值。例如：<inputtype="button"value="clickme!"onclick=javascript:alert("hello")>20

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

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

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

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

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

第6章JavaScript21

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

可以用兩種方法進行注釋。注釋方法與C＋＋相同。

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

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

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

數(shù)值型(整數(shù)和浮點數(shù))

字符型

字符型

布爾型(取值為true或false)

空值

2.常量

值保持不變的量

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

var

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

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

vara//聲明變量后,賦值

a=6

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

第6章JavaScript2424JavaScript定義變量

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

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

第6章JavaScript285.運算符

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

第6章JavaScript29一、一元運算符(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ù)運算符

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

document.write(height);如果在算術(shù)運算符的值不是數(shù)值，那么它會先使用Number()轉(zhuǎn)型函數(shù)將其轉(zhuǎn)換為數(shù)值(隱式轉(zhuǎn)換)。33二、關(guā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的第一個字母是B，alpha的第一個字母是a，a為97，B為66document.write(box5)//輸出true兩個操作數(shù)有一個是數(shù)值，則將另一個轉(zhuǎn)換為數(shù)值，在進行數(shù)值比較

34二、位運算符

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

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，進行處理。}else{//如果條件為false，進行處理。}如果不需要處理false情況，可不寫else語句段，例如：if(條件){//如果條件為true，進行處理。}

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

default:

語句集

break}

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

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

語句集}

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

語句段}·break語句：根據(jù)條件終止循環(huán)?！ontinue語句：根據(jù)條件，跳過循環(huán)體內(nèi)剩余語句，進入下一次循環(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運行結(jié)果：0-1-2-3-4-5-6-7-8-9-10-4141continue用在for或while循環(huán)可以跳過循環(huán)體中剩余的語句，直接進行下一次循環(huán)。例:variNum=0;for(vari=1;i<10;i++){ if(i%5==0){ continue; } iNum++;}alert(iNum);continue運行結(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ù)名：可以是任何合法的標識符·參數(shù)列表：函數(shù)的參數(shù)列表，多個參數(shù)用逗號分開·函數(shù)體：函數(shù)執(zhí)行的運算

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

eval

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

isNaN

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

alert(x+"是一個數(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)">表示單擊此按鈕時，調(diào)用函數(shù)sum()執(zhí)行45函數(shù)的應用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()，完成計算的功能。op參數(shù)代表運算符號47調(diào)用函數(shù)<FORMaction=""method="post"name="myform"><P>第一個數(shù)<INPUTname="num1"type="text"><BR>第二個數(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>計算結(jié)果<INPUTname="result"type="text"></P></FORM>486.4JavaScript對象6.4.1JavaScript對象概述

對象具有:

屬性(properties)

方法(methods)3種對象:

JavaScript內(nèi)建對象

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

自定義對象

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

第6章JavaScript50創(chuàng)建對象實例

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

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

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

MyStudentid:000001name:林琳url:

YourStudentid:000002name:李四url:定義學生對象對象實例，具體學生

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

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

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

第6章JavaScript552.對象方法的引用

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

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

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

對象){

語句段}

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

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

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

this[屬性名]

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

第6章JavaScript

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

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

第6章JavaScript62例6.5<html><head><title>JavaScrip對象應用</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.用戶輸入信息驗證例6.6界面上有一個輸入卡號文本框和一個密碼框輸入卡號后，驗證用戶輸入卡號的格式是否正確（要求輸入以10起頭的6位數(shù)）如果輸入不正確，提示客戶重新輸入，卡號輸入正確后才能輸入密碼。例6.665

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

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

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

第6章JavaScriptfunctionverify(){//響應失去鼠標焦點事件，驗證卡號輸入格式是否正確

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

<body><formname="myForm"method="post"action="">請輸入卡號：<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對象在JavaScript中的應用

6.5.1window對象構(gòu)成

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

第6章JavaScript69

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

頂層window對象第2層document對象第3層form對象第4層text對象

第6章JavaScript716.5.3window對象的屬性

1.window對象主要屬性屬性名稱

說明

范例name當前窗口名字parent當前窗口父窗口

self當前打開窗口

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

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

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

self.defaultStatus=“歡迎”

第6章JavaScript726.5.4window對象的方法

1.window對象的主要方法

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

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

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

第6章JavaScript74

prompt(提示,缺省值)：顯示提示框，等待用戶輸入文本，用戶選擇“確認”按鈕，返回文本框中內(nèi)容，選擇“取消”按鈕，返回一個空字符串。“提示”和“缺省值”都是可選項，“缺省值”是文本框默認值例：prompt("請輸入姓名：")

第6章JavaScript75

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

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

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

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

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

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

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

第6章JavaScript802.打開一個新窗口例6.8

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

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

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

第6章JavaScript83<HTML><HEAD><TITLE>JavaScript接口元素應用</TITLE><SCRIPTLANGUAGE="JavaScript"><!--functionMyLink(MyName){varMyString=prompt("請輸入姓名：")if(MyString==MyName)/*驗證輸入姓名是否正確*/{varMybool=confirm(MyString+“你好！鏈接到tomcat頁面？")if(!Mybool)window.event.returnValue=false}else{alert("對不起，用戶名錯誤。")window.event.returnValue=false}}--></SCRIPT></HEAD>

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

第6章JavaScript856.6document對象在JavaSCript中應用

6.6.1document對象的屬性

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

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

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

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

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

例6.10

第6章JavaScript90<html><head><title>document對象應用</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標準，HTML文檔中的所有內(nèi)容都是節(jié)點：整個文檔是一個文檔節(jié)點每個HTML元素是元素節(jié)點HTML元素內(nèi)的文本是文本節(jié)點每個HTML屬性是屬性節(jié)點注釋是注釋節(jié)點9192父結(jié)點（parent）子結(jié)點（child）同胞結(jié)點（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)置對象

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

例如：var

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

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

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

length:返回字符串的長度。

第6章JavaScript96

3.String對象方法

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

返回指定位置處的字符，第一個位置為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()">點我</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對象

第6章JavaScript屬性名稱說明范例E常數(shù)eMath.E=2.718281…LN1010的自然對數(shù)Math.LN10=2.302585…LN22的自然對數(shù)Math.LN2=0.693147…LOG2E以2為底E的對數(shù)Math.LOG2E=1.442695…LOG10E以10為底E的對數(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絕對值Math.abs(-6)=6random()返回0~1的隨機數(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對象語法：數(shù)組對象實例名=newArray()例如：vararr1=newArray()vararr2=newArray(8)

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

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

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

第6章JavaScript105JavaScript數(shù)組對象特點:(1)JavaScript可以給一個數(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)建了一個8×5的二維數(shù)組(2)數(shù)組的長度可以動態(tài)變化例如:arr=newArray(8)//定義長度為8的數(shù)組

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

第6章JavaScript1064.7.4.Date對象

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

var日期對象實例名=new

Date()

例如，MyDate=new

Date()

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

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

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

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

例6.11

第6章JavaScript110<html><head><title>JavaScript內(nèi)置對象應用案例</title><scriptlanguage="JavaScript"><!--functionupBookInfo(titleInfo){document.BookForm.BookTitle.value=titleInfodocument.BookForm.BookAuth.value=this.Authdocument.BookForm.BookPublisher.value=this.Publisher}functionBook(title,auth,publisher){this.Title=titlethis.Auth=auththis.Publisher=publisherthis.UpInfo=upBookInfo}--></script></head>

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 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

提交評論