javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )
在 HTML 中使用JavaScript
JavaScript能以兩種方式嵌入HTML:
- 作為語句和函數(shù)使用時(shí),用 SCRIPT 標(biāo)記
- 作為事件處理程序使用時(shí),用 HTML 標(biāo)記
SCRIPT 標(biāo)記
使用SCRIPT標(biāo)記把腳本嵌入在HTML中,格式如舷:
<SCRIPT>
_ JavaScript 語句
</SCRIPT>
LANGUAGE屬性作為可選項(xiàng),用于指定腳本語言,用法如下:
<SCRIPT LANGUAGE="JavaScript">
_JavaScript 語句
</SCRIPT>
</SCRIPT>是<SCRIPT>的結(jié)束標(biāo)志,之間可以包括任意多的JavaScript語句.
JavaScript是區(qū)分大小寫檔
例1 一個(gè)簡(jiǎn)單的腳本
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello net.")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>
例1中的頁面顯示:
Hello net.That's all folks.
代碼隱匿
在不識(shí)別JavaScript的舊版本瀏覽器上,可以把腳本放置在注釋域中,這樣JavaScript代碼就不會(huì)被顯示出來. 把整個(gè)腳本用HTML的注釋標(biāo)記括起來:
<!-- 開始隱匿的腳本內(nèi)容,不被舊版本瀏覽器顯示
// 隱匿在此結(jié)束. -->
定義和調(diào)用函數(shù)
在頁(page)被裝載后,被置于SCRIPT標(biāo)記之間的腳本被分析.函數(shù)被存貯起來,但并未執(zhí)行. 函數(shù)由頁內(nèi)的事件調(diào)用執(zhí)行.
正確理解定義函數(shù)與調(diào)用函數(shù)之間的區(qū)別是很重要的,定義函數(shù)僅僅是命名了這個(gè)函數(shù)和說明當(dāng)此函數(shù)被調(diào)用時(shí)做什么,而調(diào)用函數(shù)才利用傳來的參數(shù)真正執(zhí)行指定的動(dòng)作.
例2 一個(gè)帶有函數(shù)和注釋的腳本
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- 開始隱匿的腳本內(nèi)容,不被舊版本瀏覽器顯示
function square(i) {
document.write("The call passed ",i, " to the function.","<BR>")
return i*i
}
document.write("The function returned ",square(5),".")
// 隱匿在此結(jié)束. -->
</SCRIPT>
</HEAD>
<BODY>
<BR>
All done.
</BODY>
例2中的頁面顯示:
We passed 5 to the function.
The function returned 25.
All done.
HEAD標(biāo)記
通常,應(yīng)該在文檔的HEAD部分定義頁(page)的所有函數(shù),因?yàn)镠EAD被首先裝載,這就保證了用戶做任何可能調(diào)用函數(shù)的動(dòng)作前,函數(shù)已全部裝載.
例3 有兩個(gè)函數(shù)的腳本.
<HEAD>
<SCRIPT>
<!--- hide script from old browsers
function bar() {
document.write("<HR ALIGN='LEFT' WIDTH=25%>")
}
function output(head,level,string) {
document.write("<H" + level + ">" + head + "</H" + level + "><p>" + string)
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!--- hide script from old browers
document.write (bar(),output("Make Me Big",3,"Make me ordinary."))
// end hiding from old browsers -->
</SCRIPT>
<P>
Thanks.
</BODY>
例3的結(jié)果:
Make Me Big
Make me ordinary.undefinedundefined
Thanks.
引號(hào)
用單引號(hào)(')把字符串常量括起來,用雙引號(hào)把屬性的值括起來,這樣腳本能夠把二者區(qū)分開. 在上個(gè)例子中, 函數(shù)bar中,常量left被放在屬性值.再舉一個(gè)例子:
<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">
編寫事件處理程序腳本(Scripting Event Handlers)
Navigator上的JavaScript應(yīng)用程序大部分是事件驅(qū)動(dòng)的,事件常常是用戶動(dòng)作的結(jié)果. 例如: 按動(dòng)按鈕是一個(gè)事件, 結(jié)果是把focus賦與一個(gè)form元素.Navigator能夠識(shí)別一組特定的事件. 你可以定義event handlers腳本,這些腳本在事件發(fā)生時(shí)會(huì)被自動(dòng)執(zhí)行.
事件處理程序是作為HTML標(biāo)記的屬性放在文檔中的,把要執(zhí)行JavaScript代碼賦給HTML標(biāo)記. 語法如下:
<TAG eventHandler="JavaScript Code">
其中, TAG是HTML的某一標(biāo)記, eventHandler是事件處理程序的名稱.
例如, 假定已創(chuàng)建了一個(gè)名為compute的JavaScript函數(shù),你可以把對(duì)該函數(shù)的調(diào)用賦給這個(gè)按鈕的onClick事件處理程序,從而實(shí)現(xiàn)當(dāng)用戶按此按鈕時(shí),Navigator執(zhí)行函數(shù)compute.
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
你可以把任何JavaScript語句放在onClick后的引號(hào)內(nèi),多個(gè)語句之間用分號(hào)隔開.這些語句只在當(dāng)用戶按動(dòng)此按鈕時(shí)才被執(zhí)行.
一般說來,把自己的事件處理程序定義成函數(shù)是一種好習(xí)慣,因?yàn)?
- 這使你的代碼模塊化--- 同一個(gè)函數(shù)可以作為多個(gè)不同item的事件處理程序.
- 這使你的代碼容易讀懂.
請(qǐng)注意,在此例中,使用this.form來引用當(dāng)前form, 關(guān)鍵字this用來引用當(dāng)前對(duì)象,此處即指button對(duì)象,于是this.form結(jié)構(gòu)被用來引用包含此button的form. 上例中onClick事件處理程序是以this.form(當(dāng)前form)為參數(shù)調(diào)用compute()函數(shù).
能用于HTML標(biāo)記中的事件如下:
- Focus, Blur, Change事件: 文本域,文本區(qū)和選擇
- Click事件: 按鈕,無線按鈕,核對(duì)框,遞交按鈕,復(fù)位按鈕,鏈接
- Select事件: 文本域,文本區(qū)
- MouseOver事件: 鏈接
如果一事件可用在HTML標(biāo)記里, 則可以給它定義事件處理程序.通常事件處理程序的名稱是以on開頭,后跟事件名稱. 如, Focus的處理程序名為onFocus.
許多對(duì)象有模擬事件的方法(method).如,button有一個(gè)名為click的方法能模擬按鈕被按下. 注意: 模擬事件的方法不能觸發(fā)事件處理程序.如方法click并不能觸發(fā)事件處理程序onClick. 但是,你可以直接調(diào)用事件處理程序(如,在腳本中,顯式調(diào)用onClick).
| 事件 | 何時(shí)發(fā)生 | 事件處理程序 |
| blur | 用戶將input focus從form元素上移去 | onBlur |
| click | 用戶在form元素或連接上接動(dòng)鼠標(biāo) | onClick |
| change | 用戶改變了文本,文本區(qū)或選擇元素的值 | onChange |
| focus | 用戶把input focus賦給form元素 | onFocus |
| load | 用戶把頁裝入Navigato | onLoad |
| mouseover | 用戶把鼠標(biāo)光標(biāo)從link或anchor上移過 | onMouseOve |
| select | 用戶選擇了form元素的輸入域 | onSelect |
| submit | 用戶提交了一個(gè)form | onSubmit |
| unload | 用戶退出此頁 | onUnload |
例4 有一個(gè)form和一個(gè)event handler屬性的腳本
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form) {
if (confirm("Are you sure?"))
form.result.value=eval(form.expr.value)
else
alert("Please come back again")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<BR>
</FORM>
</BODY>
例4中的頁面顯示
技巧與技術(shù)
本節(jié)介紹幾種有用的編寫腳本的技術(shù)
更新頁(Updating Pages)
在Navigator上JavaScript是按從頁的頂部到下的順序生成結(jié)果. 一旦有些東西被重新設(shè)計(jì)(format),你只能靠重新裝載此頁的辦法來改變,目前,你只能更新整 個(gè)頁, 而不能只更新某一部分. 但是你可以單獨(dú)更新frame中的"sub-window".
打印
目前, 還不能把用JavaScript產(chǎn)生的輸出打印出來. 例如,若你的頁上有如下內(nèi)容,
<P>This is some text
<SCRIPT>document.write("<P>And some generated text")</SCRIPT>
當(dāng)打印時(shí),你只會(huì)打出"This is some text", 即使你能在屏幕上看到兩行.
使用引號(hào)
一定要區(qū)分雙引號(hào)和單引號(hào),因?yàn)樵贖TML中事件處理程序必須用雙引號(hào) 括起來,參數(shù)用單引號(hào),例如:
<FORM NAME="myform">
<INPUT TYPE="button" NAME="button1" VALUE="Open Sesame!"
onClick="window.open('stmtsov.html', 'newWin','toolbar=no,directories=no')">
</FORM>
另外,你可以用前置反斜線(\)對(duì)引號(hào)進(jìn)行轉(zhuǎn)義.
定義函數(shù)
在HTML頁的HEAD部分定義全部函數(shù)是一個(gè)好習(xí)慣.這樣,在顯示任何內(nèi)容之前, 所有函數(shù)均已定義.否則在頁還在裝載時(shí),用戶可能做一些事情觸發(fā)事件處理程序, 調(diào)用了未定義函數(shù),將導(dǎo)致錯(cuò)誤.
創(chuàng)建數(shù)組
數(shù)組是一個(gè)有序的值的集合,利用數(shù)組名和索引來引用.例如,一個(gè)名為emp的數(shù)組存放著雇員的名字,并按雇員編號(hào)索引.于是,emp[1]是1號(hào)雇員,emp[2]是2號(hào)雇員, 依次類推.
JavaScript中沒有明確的數(shù)組數(shù)據(jù)類型,但由于數(shù)組與對(duì)象有類似之處(見 JavaScript Object Model),在JavaScript中,很容易創(chuàng)建數(shù)組.你可以定義一個(gè) 數(shù)組對(duì)象類型如下:
function MakeArray(n) {
this.length=n;
for (var i=1; i <= n; i++)
this[i] = 0
return this
}
}
這樣就定義了一個(gè)數(shù)組,第一個(gè)屬性length表示數(shù)組中元素個(gè)數(shù)(索引為0),其余各屬性初始值為0,索引為大于等于1的整數(shù).
調(diào)用new時(shí)帶上數(shù)組名和數(shù)組元素的個(gè)數(shù),就創(chuàng)建了一個(gè)數(shù)組.
emp=new makeArray(20);
該語句創(chuàng)建了一個(gè)名為emp的數(shù)組,有20個(gè)元素,初始值為0.
操作數(shù)組(Populating an Array)
通過給數(shù)組元素賦值的辦法來操作數(shù)組.如:
emp[1]="Casey Jones"
emp[2]="PHil Lesh"
emp[3]="August West"
等等.
還可以創(chuàng)建對(duì)象的數(shù)組.如,定義一個(gè)名為Employees的對(duì)象類型:
function Employee(empno,name,dept) {
this.empo= empno;
this.name= name;
this.dept= dept;
}
下列語句則創(chuàng)建了一個(gè)此對(duì)象的數(shù)組:
emp=new MakeArray(3)
emp[1]=new Employee(1,"Casey Jones", "Engineering")
emp[2]=new Employee(2,"Phil Lesh", "Music")
emp[3]=new Employee(3,"August",""Admin)
這時(shí),利用函數(shù)show_props(在JavaScript Object Model中定義)來顯示該 數(shù)組中的對(duì)象, 如下:
for (var n=1; n<=3; n++) {
document.write(show_props(emp[n],"emp")+"");
}
相關(guān)文章
抓取JavaScript動(dòng)態(tài)加載的內(nèi)容的方法總結(jié)
JavaScript動(dòng)態(tài)加載的內(nèi)容常見于現(xiàn)代Web應(yīng)用中,用于增強(qiáng)用戶體驗(yàn)和減少初始頁面加載時(shí)間,然而,這些動(dòng)態(tài)加載的內(nèi)容對(duì)于傳統(tǒng)的網(wǎng)頁抓取工具來說往往是不可見的,本文主要介紹了有JavaScript動(dòng)態(tài)加載的內(nèi)容如何抓取,需要的朋友可以參考下2024-09-09
微信小程序使用navigator實(shí)現(xiàn)頁面跳轉(zhuǎn)功能
本周學(xué)習(xí)了navigtor到導(dǎo)航組件,目前我想使用navigtor組件實(shí)現(xiàn)跳轉(zhuǎn)以及返回功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用navigator實(shí)現(xiàn)頁面跳轉(zhuǎn)功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
通過設(shè)置CSS中的position屬性來固定層的位置
position 屬性規(guī)定元素的定位類型,這個(gè)屬性定義建立元素布局所用的定位機(jī)制,本文給大家介紹通過設(shè)置CSS中的position屬性來固定層的位置，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JavaScript中Number對(duì)象的toFixed() 方法詳解
下面小編就為大家?guī)硪黄狫avaScript中Number對(duì)象的toFixed() 方法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
javascript實(shí)現(xiàn)鏈接單選效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)鏈接單選效果的方法,可實(shí)現(xiàn)點(diǎn)擊鏈接改變其背景色的功能,同時(shí)可禁用對(duì)應(yīng)鏈接的跳轉(zhuǎn),需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序swiper輪播圖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
js+css 實(shí)現(xiàn)遮罩居中彈出層(隨瀏覽器窗口滾動(dòng)條滾動(dòng))
本文為大家詳細(xì)介紹下使用js實(shí)現(xiàn)遮罩彈出層居中，且隨瀏覽器窗口滾動(dòng)條滾動(dòng)，示例代碼如下，感興趣的朋友可以參考下2013-12-12
處理文本部分內(nèi)容的TextRange對(duì)象應(yīng)用實(shí)例
TextRange是用來表現(xiàn)HTML元素中文字的對(duì)象，是一個(gè)用于處理JavaScript對(duì)象文本部分內(nèi)容的一個(gè)對(duì)象2014-07-07
這篇文章主要介紹了JS小游戲之仙劍翻牌源碼,是一款比較經(jīng)典的卡牌類游戲,對(duì)于javascript游戲設(shè)計(jì)有不錯(cuò)的借鑒價(jià)值,需要的朋友可以參考下2014-09-09
IE DOM實(shí)現(xiàn)存在的部分問題及解決方法
IE DOM實(shí)現(xiàn)存在的部分問題及解決方法2009-07-07