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
Comments