Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the embedded application method of JavaScript in web design". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "JavaScript in web design embedded application method is what" it!

JavaScript is a scripting language developed by Netscape that is related to Java and shares some of the same syntax and structure as Java, but it is not a simplified version of Java. JavaScript is a scripting language that extends to HTML, allowing web developers to control pages more effectively and respond instantly to user-triggered events, such as mouse clicks, form actions, etc., without requiring client-server interaction, thus providing faster actions for end users and reducing the burden on the server side.

JavaScript doesn't exist independently of HTML, it only works as part of HTML pages in browsers that support JavaScript, but it does enhance the expressiveness of web pages and provide more interactivity than basic HTML markup. With the development of the Internet and the abundance of network applications, developers began to use JavaScript to create a variety of attractive page effects, such as various page gradients, image effects, text effects, etc.; of course, there are also many practical page function extensions, such as page user access control, dynamic navigation, form data verification, etc.

Today's mainstream browsers offer strong JavaScript support, and our web developers can't avoid it, as long as you start imagination, you can create a variety of JavaScript embedded applications. This article will introduce you to some of the most useful JavaScript programs, which can provide good guidance for web developers, and even with a small change or addition of code, you can achieve richer page functionality.

JavaScript programs that protect the framework structure

Many websites now add a frame structure (FRAME) to the web page for easy navigation, so that it is easy to browse the website and easy to maintain page consistency. But we often find such situations: 1) in the use of frame structure of the web page, due to links to other pages or circular links caused by a frame structure of the page nested in another page containing frame structure, affecting the page effect and actual reading area, or you carefully designed the page is embedded in his frame structure, as part of his page; 2) The internal pages you designed that should be in the frame structure are opened by the user in a separate browser window, losing the corresponding frame navigation. For both of these problems, we can solve them with JavaScript.

If you don't want your page to be nested in other frames, you can add the following lines of code to your page. (Other HTML codes in the corresponding positions are omitted here)

< head >

< script language="JavaScript" >

if(self!= top){top.location=self.location;}

< /script >

< /head >

---For the second case, if you don't want your page to fall out of the frame structure, just add the following code to the corresponding page. (Other HTML codes in the corresponding positions are omitted here as well)

< head >

< script language="JavaScript" >

if(self==top){self.location.href="url";}

< /script >

< /head >

The url here should be set to the URL of the page that defines the corresponding frame structure in your web page. In both cases, you can also set your page to open in a new window instead of replacing it with yours.

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

---Second, let the web page have browser recognition adaptation function

With the development of network technology, dynamic web pages have been introduced into applications by Netscape and Microsoft respectively, but there are considerable differences in standard applications, and often different HTML pages must be written for them separately, taking into account browsers that do not support dynamic web pages. This problem can be solved with JavaScript below.

< 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 >

Also, you must be in the BODY of the page.

Also add calls to the program:

< body onLoad="testBrowser()" >

----This call is activated when the page is loaded and loads index_ie.html if the browser is IE4.0 or later, index_ns.html if the browser is Netscape 4.0 or later, and stays on the current page if neither is true. III. Verification of form data items

Forms are a way web developers often interact with users, through which they can communicate information about specified content. We don't want users to miss some form items by mistake, nor do we want users to enter invalid information to interfere with our investigation process. In this case, we can also use JavaScript to verify the content of the form.

----In the following example we will validate a simple form, assuming that the form (defined as userInfo) has two items, userName and userEmail, our validation procedure is as follows:

< script language="JavaScript" >

function checkForm(){

if (document.userInfo.userName.value==""){

alert ("username must be entered: ")

return false;}

if (document.userInfo.userEmail.value.indexOf(´@´)==-1){

alert ("Please enter the correct email address! "）;

return false;}

}

< /script >

At the same time, a call to the program must be added to the submission item of the form:

< form action="YOUR_CGI" onSubmit="checkForm()" >

----If there are more survey items, you can set more stringent verification conditions to make your form more effective and accurate.

----IV. Navigation of the columns of the web page

----We often see the use of selection lists on other people's web pages for column navigation, which saves space, but also is very eye-catching and convenient, here we can use JavaScript very easily to achieve this effect.

< form name="siteGuide" >

< stlect name="siteList" onChange="self.location.href=this.form.siteList.options[ this.form.siteList.selectedIndex].value" >

< option selected value="#" >

please select the part

< /option >

< option value="http://www.ciw.com.cn" >

China Computer News

< /option >

< option value="http://www.ccw.com.cn" >

computer world

< /option >

< /select >

< /form >

---Here, we can also call JavaScript as a function independently, and even extend it to achieve more functions.

---V. Dynamic picture advertisement replacement display

----Placing links to advertising images on web pages is already a very common thing, but if you want to place several advertising images at the same time, not only use too much page space, but also affect the user's enthusiasm for access, but if we use dynamic image advertising to replace the display, it saves space on the page and does not affect the corresponding links.

< 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 >

At the same time, in order to ensure the effect, it is recommended that

Activate the corresponding JavaScript function in Body.

< body onLoad="LoadBanner()" >

Also place the following code on the page where the ad image should be placed

< a href="_JavaScript:changeLink()" >

< img src="banner_o.gif" border="0" name="adBanner" width="400" height="40" alt="动态广告图片" >

< /a >

At this point, I believe that everyone has a deeper understanding of "what is the embedded application method of JavaScript in web design", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.