Implementing JavaScript in Web pages

Implementing JavaScript in Web pages

Consider a scenario of BookYourHotel website. While booking a Hotel , the customers are requested to specify their area of interests by clicking the radio button against certain options , such as adventure sports, movies, spa , and site seeing. The customers can avail the selected facility free of costs . If the customers select any of  these radio buttons , the details about that facility should open as a list.
For example, if the customers selects the adventure sports radio button, the type of sports  such as , paragliding, bungee-jumping, or river- rafting , should be displayed as the list of check boxes, where the customers can select the preferred activity. Such functionality can be implemented by using JavaScript.

JavaScript is the one of the most popular scripting languages. It can be used to provide functionality to a Web page, such as populating a text box when a user selects an option in the list box. These functionalities can be triggered by the user action.

A script can be embedded directly into the Web page by writing the JavaScript code inside the <Script> tag or by writing the entire JavaScript code in an external JavaScript (.js) file. While using an external file for the JavaScript code , you need to refer to this file on the Web page.






Embedding a Script into a Web page

The JavaScript code can be embedded into a Web page by using the <Script> tag. The following syntax is used for embedding a script into a Web page:

<SCRIPT type="text/javascript" > JavaScript statements
</SCRIPT>

In the preceding syntax, the <SCRIPT> and </SCRIPT> tags indicates the start and end of the script. The type attribute of the <SCRIPT> tag indicates the type of scripting language. One or more JavaScript statements between the <SCRIPT> tag and the </SCRIPT> tag form a script block. The script block is executed by the browser's built in JavaScript interpreter.

The <SCRIPT> tag can be inserted into the body section of a Web page or the head section of a Web page or both. If the script is meant to be executed in response to an action performed by the user, it is normally placed in the head section. It helps in placing all scripts at one place without interfering with the content of the page. However, if the script need to be executed as soon as the page is loaded it is placed in the body section of the Web page. 

Consider the following code:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<BODY>
<SCRIPT type="text/javascript">
alert('Welcome to JavaScript');
</SCRIPT>
</HEAD>
</BODY>
</HTML>

The preceding code illustrates the use of the <SCRIPT> tag in the body section of the Web page . It will display the message , Welcome to JavaScript , in a message box as soon as the Web page is loaded.

Creating and using an External File


When you embed a script in  an HTML page, it becomes difficult to manage both , the HTML code and the JavaScript code. To avoid this issue, you can write the JavaScript code in an external file and refers to the same in an HTML file. The external JavaScript file is saved with the .js extension. 

The following syntax is used to refer to an external JavaScript file:

<SCRIPT type="text/javascript" src="URL">

In the preceding code URL refers to the path of the external JavaScript file.

To create an used the external JavaScript file, you need to perform the following steps:

  1. Open Notepad and write the following code:
alert( " Product On Sale  :" n" + " 1. LEO mobile  n" +" 2.LEO Camera n" +" 3. KP watch n" +" 3. n);
      2. Save the file as sale.js.
      3. Create the home page of the Website in which you want to refer to the external JavaScript file. For the write the following code in a Notepad file:

<!DOCTYPE HTML>
<HTML>
<BODY>
<H1>Buy Products </H1>
</BODY>
<HTML>

      4. Save the file as home.html
      5. Add the highlighted code snippet , as shown in the following code in the home.html file:

 <!DOCTYPE HTML>

<HTML>
<BODY<
<H1>Buy Products </H1>
<SCRIPT type="text/javascript" src="sale.js">
</SCRIPT>
</BODY>
<HTML>


The src attribute of the <SCRIPT> tag is used to specify the path to the external JavaScript file , sale.js. The path to be specified in the src attribute can be either absolute or  relative. 




About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment