JavaScript在網(wǎng)頁設(shè)計中的嵌入應(yīng)用方法是什么

本篇內(nèi)容主要講解“JavaScript在網(wǎng)頁設(shè)計中的嵌入應(yīng)用方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“JavaScript在網(wǎng)頁設(shè)計中的嵌入應(yīng)用方法是什么”吧!

---- JavaScript是由Netscape公司開發(fā)的一種腳本設(shè)計語言，它與Java有關(guān)，并與Java 共享一些相同的語法和結(jié)構(gòu)，但它又不是Java的簡化版本。JavaScript是一種擴展到HTML 的腳本設(shè)計語言，它使網(wǎng)頁開發(fā)者可以更有效地控制頁面，并能對用戶觸發(fā)事件作出即時響應(yīng)，諸如單擊鼠標(biāo)、表單操作等等，而且這些都不需要客戶機與服務(wù)器的交互通訊，這樣同時就為最終用戶提供了更快速的操作，減小了服務(wù)器端的負(fù)擔(dān)。

---- JavaScript不能脫離HTML而獨立存在，只有在支持JavaScript的瀏覽器中，它才能作為HTML頁面的一部分起作用，但它確實增強了網(wǎng)頁的表現(xiàn)力，并提供了比基本HTML標(biāo)記更強的交互性。隨著互聯(lián)網(wǎng)的發(fā)展和網(wǎng)絡(luò)應(yīng)用的豐富，開發(fā)者們開始用JavaScript創(chuàng)建各種誘人的頁面效果，如各種頁面漸變、圖片特效、文字特效等等；當(dāng)然也有許多實用的頁面功能擴展，如頁面的用戶訪問控制、動態(tài)導(dǎo)航、表單數(shù)據(jù)校驗等。

---- 現(xiàn)在的主流瀏覽器都提供了對JavaScript的強力支持，我們的網(wǎng)頁開發(fā)者更是不能回避，只要啟動了想象力，你就可以創(chuàng)建各種各樣的JavaScript嵌入應(yīng)用。本文將向大家介紹幾種最實用的JavaScript程序，對網(wǎng)頁開發(fā)者都能提供很好的指導(dǎo)作用，甚至只要改動或增加少量代碼，你就可以實現(xiàn)更豐富的頁面功能。

---- 一、保護框架結(jié)構(gòu)的JavaScript程序

---- 現(xiàn)在的許多網(wǎng)站為了便于導(dǎo)航，紛紛在網(wǎng)頁中加入了框架結(jié)構(gòu)（FRAME），這樣就可以方便網(wǎng)站瀏覽，容易保持頁面一致性。但我們經(jīng)常會發(fā)現(xiàn)這樣一些情況：1）在使用框架結(jié)構(gòu)的網(wǎng)頁里，由于鏈接其他頁面或循環(huán)鏈接造成框架結(jié)構(gòu)頁面的一個幀里嵌套了另一個含有框架結(jié)構(gòu)的頁面，影響了頁面效果和實際閱讀面積，或者你精心設(shè)計的頁面被別人嵌入他的框架結(jié)構(gòu)中，作為他的頁面一部分；2）你設(shè)計的本該在框架結(jié)構(gòu)中的內(nèi)部頁面被用戶打開到單獨瀏覽器窗口中，失去了相應(yīng)的框架導(dǎo)航作用。對于這兩種問題，我們可以用 JavaScript來解決。

---- 如果你不想讓你的頁面被嵌套在其他框架結(jié)構(gòu)里，你可以在你的頁面相應(yīng)位置加入下面幾行代碼即可。（此處略去相應(yīng)位置其它HTML代碼）

< head >
< script language="JavaScript" >
if(self!=top){top.location=self.location;}
< /script >
< /head >

---- 對于第二位情況，如果你不想讓你的頁面脫離相應(yīng)的框架結(jié)構(gòu)，也只要在相應(yīng)頁面中加入下面代碼。（此處同樣略去相應(yīng)位置其它HTML代碼）

< head >
< script language="JavaScript" >
if(self==top){self.location.href="url";}
< /script >
< /head >

---- 這里的url應(yīng)該設(shè)置成你網(wǎng)頁中定義相應(yīng)框架結(jié)構(gòu)的頁面地址。在這兩個例子中，你還可以設(shè)置在新的窗口中打開你的頁面，而不是用你的頁面替換原有頁面。

window.open("url","windowName","windowFeatures")

---- 二、讓網(wǎng)頁具備瀏覽器識別適應(yīng)功能

---- 隨著網(wǎng)絡(luò)的技術(shù)發(fā)展，動態(tài)網(wǎng)頁已被Netscape和Microsoft分別引入應(yīng)用，但在標(biāo)準(zhǔn)應(yīng)用中有相當(dāng)大的分歧，往往必須分別為它們倆分別編寫不同的HTML頁面，同時兼顧不支持動態(tài)網(wǎng)頁的瀏覽器。用下面的JavaScript可以解決這個問題。

< script language="JavaScript" >
function testBrowser(){
ie=((navigator.appName=="Microsoft.
Internet Explorer")&&
(parseInt(navigator.appVision) >=4))
ns=((navigator.appName=="Netscape")&&
(parseInt(navigator.appVision) >=4))
if(ie){self.location.href="index_ie.html";}
if(ns){self.location.href="index_ns.html";}
} < /script >
同時，還必須在該頁面的BODY
中還要加入對程序的調(diào)用：
< body onLoad="testBrowser()" >

---- 這個調(diào)用在網(wǎng)頁被加載時激活，如果瀏覽器是IE4.0或更高版本，瀏覽器就加載相應(yīng) index_ie.html；如果瀏覽器是Netscape 4.0或更高版本，瀏覽器就加載相應(yīng) index_ns.html；如果兩種情況都不滿足，瀏覽器就停留在現(xiàn)在的頁面。 三、表單數(shù)據(jù)項的校驗

---- 表單是網(wǎng)頁開發(fā)者經(jīng)常采用的一種與用戶交互的方式，通過表單可以就指定內(nèi)容與用戶交流信息。我們不希望用戶的誤操作而漏掉部分表單項目，也不希望用戶輸入無效信息干擾了我們的調(diào)查過程。這時，我們也可以用JavaScript對表單內(nèi)容進(jìn)行校驗。

---- 在下面的例子中我們將對一個簡單的表單進(jìn)行校驗，假設(shè)表單（定義為userInfo）中有兩項，分別為用戶名（userName）和電子郵件地址（userEmail），我們的校驗程序如下：

< script language="JavaScript" >
function checkForm(){
if (document.userInfo.userName.value==""){
alert（“用戶名必須輸入：”）
return false;}
if (document.userInfo.userEmail.value.indexOf(′@′)==-1){
alert（"請輸入正確的電子郵件地址！”）；
return false;}
}< /script >
同時，在表單的提交項中必須加入對該程序的調(diào)用：
< form action="YOUR_CGI" onSubmit="checkForm()" >

---- 如果還有更多的調(diào)查項目，則可以設(shè)置更多更嚴(yán)格的校驗條件，使你的表單取得更有效更準(zhǔn)確的結(jié)果。

---- 四、進(jìn)行網(wǎng)頁的欄目導(dǎo)航

---- 我們經(jīng)常在別人的網(wǎng)頁上看到利用選擇列表來進(jìn)行欄目導(dǎo)航，這樣既節(jié)約了空間，又十分的醒目和方便，這里我們可以用JavaScript很輕松的實現(xiàn)這種效果。

< form name="siteGuide" >
< stlect name="siteList"
onChange="self.location.href=this.form.siteList.options[
this.form.siteList.selectedIndex].value" >
< option selected value="#" >請選擇欄目< /option >
< option value="http://www.ciw.com.cn" >
中國計算機報< /option >
< option value="http://www.ccw.com.cn" >
計算機世界< /option >
< /select > < /form >

---- 這里，我們還可以把JavaScript獨立出來作為一個函數(shù)進(jìn)行調(diào)用，甚至加以擴展，以實現(xiàn)更多的功能。

---- 五、動態(tài)圖片廣告更換顯示

---- 在網(wǎng)頁上放置廣告圖片的鏈接已經(jīng)是很普遍的事情，但如果要同時放置幾個廣告圖片時，不但展用了太多頁面空間，也影響了用戶的訪問熱情，但如果我們采用動態(tài)圖片廣告更換顯示的話，就既節(jié)約了頁面的空間，又不影響相應(yīng)的鏈接。

< script language="JavaScript" >
function loadBanner(){
setTimer=setTimeout("changeBanner()",5000);
listCode=0;
listBanner=new Arrey(2)
listBanner[0]=new Image(400,40)
listBanner[0].src="banner_0.gif"
listBanner[1]=new Image(400,40)
listBanner[1].src="banner_1.gif"
}
function changeBanner(){
listCode=listCode+1
if(listCode=="2"){listCode=0}
bannerSrc="banner_"+listCode+".gif"
document.adBanner.src=bannerSrc
setTimer=setTimeout("changeBanner()",5000);
}
function changeLink(){
if(listCode==0){adLink="http://www.netease.com"}
if(listCode==1){adLink="http://www.chinabyte.com"}
self.location=adLink
}< /script >
同時，為了確保效果，建議在網(wǎng)頁的
Body中激活相應(yīng)JavaScript函數(shù)。
< body onLoad="LoadBanner()" >

還要在頁面相應(yīng)放置廣告圖片的地方放置以下代碼，
< a href="JavaScript:changeLink()" >
< img src="banner_o.gif"
border="0" name="adBanner"
width="400" height="40" alt="動態(tài)廣告圖片" >< /a >

到此，相信大家對“JavaScript在網(wǎng)頁設(shè)計中的嵌入應(yīng)用方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！