Chapter 4 Placement of JavaScript - Technology369kk

PLACEMENT

There is a flexiblity given to include Javascript code anywhere in an HTML document. However the most prefrred ways to include JavaScript in an HTML file are as follow: So, In this post we are discuss about that placement  in JavaScript so lets begin. 

  • Script in <head>.......</head> section.
  • Script in <body>.......</body> section.
  • Script in <body>.......</body>  and <head>.....</head> section.
  • Script the following secion, we will see how we can place JavaScript in an HTML file in diffrent ways. 

JavaScript in <head>.........</head> Section: 

  • If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that in the head  as follows. 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript of Placement</title>
 
    <script>
        function sayHello(){
        alert("Hello World")
    }
    </script>

</head>
<body
    <h2>Chapter 4:  PLACEMENTS:</h2>

    <h2>JavaScript in <head>.......</head> Section</h2>
    Click here for the results:
    <input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>


This code will be produce the following results

Click here for the results: 


JavaScript in <body>.........</body> Section: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript of Placement</title>
</head>
<body>    
    <h2>JavaScript in <body>.......</body> Section</h2>
    Click here for the results:
    <script>
        function clcikConfirm(){
        confirm("I hope u r understand, which place is good?");
    }
    </script>
    <input type="button" onclick="clcikConfirm()" value="ClickHere" />

</body>
</html>


  • Output: This is the following results: 
  • Click here for the results: 


JavaScript in <body> and <head> Sections:

  • You can aslo write javascript code in head and body section altogether as follows: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Chapter 4_Placement</title>
    <script type="text/javascript">
   
    function SayWishes(){
        alert("Do you want to Learning next page");
    }
    </script>
</head>
<body>    
    <h2>JavaScript in <body>.......<head> Section</h2>
        <script>
            document.log("Do you want next learning topic ");            
        </script>
    <input type="button" onclick="SayWishes()" value="Say Wishes"/>

</body>
</html>


Output: 

Click here for the results:    

JavaScript in External File: 

  • As you begin to work more extensively with javaScript, you will be likely to find that there are cases where you are reusing identical javaScript code on multiple pages of a site. 
  • You are not restricted to be maintainig idetical JavaScript in an external file and then include it your HTML files.
  • Here is an example to show how can include an external JavaScript file in Your HTML code using script tag its src attribute. 
  • Type this code in your html file: 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter 4 PLACEMENTS</title>
        <script type="text/javascript" src="testfile.js"></script>

</head>
<body>
    <h2>In this program we are learn about external file how to use</h2>

</body>
</html>


  • To use JavaScript from an external file source, you need to write all your JavaScript source code in a simple text file with the extension ".js" and then include that file as shown above. 
  • For example, you can keeep the following content in test.js file  in you editor folder anf the use can use another file I mean html file after including the testfile.js file. 
  • Type the following content in you .js file. 

function exterFile(){
    alert("Welcome to External File Program in JS");
}
document.write("This is External File..");



The Follwing Output:

This is External File..

In this program we are learn about external file how to use




I hope this is helpful






Post a Comment

0 Comments

Post a Comment