JavaScript在網頁設計中的嵌入應用方法是什么

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

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

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

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

---- 一、保護框架結構的JavaScript程序

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

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

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

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

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

---- 這里的url應該設置成你網頁中定義相應框架結構的頁面地址。在這兩個例子中，你還可以設置在新的窗口中打開你的頁面，而不是用你的頁面替換原有頁面。

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

---- 二、讓網頁具備瀏覽器識別適應功能

---- 隨著網絡的技術發展，動態網頁已被Netscape和Microsoft分別引入應用，但在標準應用中有相當大的分歧，往往必須分別為它們倆分別編寫不同的HTML頁面，同時兼顧不支持動態網頁的瀏覽器。用下面的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
中還要加入對程序的調用：
< body onLoad="testBrowser()" >

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

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

---- 在下面的例子中我們將對一個簡單的表單進行校驗，假設表單（定義為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 >
同時，在表單的提交項中必須加入對該程序的調用：
< form action="YOUR_CGI" onSubmit="checkForm()" >

---- 如果還有更多的調查項目，則可以設置更多更嚴格的校驗條件，使你的表單取得更有效更準確的結果。

---- 四、進行網頁的欄目導航

---- 我們經常在別人的網頁上看到利用選擇列表來進行欄目導航，這樣既節約了空間，又十分的醒目和方便，這里我們可以用JavaScript很輕松的實現這種效果。

< 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獨立出來作為一個函數進行調用，甚至加以擴展，以實現更多的功能。

---- 五、動態圖片廣告更換顯示

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

< 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 >
同時，為了確保效果，建議在網頁的
Body中激活相應JavaScript函數。
< body onLoad="LoadBanner()" >

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

到此，相信大家對“JavaScript在網頁設計中的嵌入應用方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！