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在网页设计中的嵌入应用方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！