Adding A JavaScript Code to HTML
We can add the JavaScript code at any place in the HTML. We can put the <script> tag in between the <head> tag and <body> tag as well.
But in general most of the programmers put the <script> tag inside the <head> tag. So the JavaScript code will be execute first before the HTML page is render.
When browser rendering the HTML page and find the <script> tag than the browser will be switch to the JavaScript mode and execute the code, After the JavaScript code is executed the browser will start rendering the rest of the HTML page.
Add JavaScript Code (Place)
We can add the JavaScript code anywhere in the HTML page.
JavaScript Code into the <HEAD> tag
<html>
<head>
<script type="text/javascript">
alert("Hello from JavaScript Code!!!");
</script>
</head>
<body>
<h2>Body Tag</h2>
<p>JavaScript code is executed.</p>
</body>
</html>
// Hello from JavaScript Code!!!
// Body Tag
// JavaScript code is executed.
In above example, JavaScript code is placed inside the <HEAD> tag.
Flow of the execution:
Step 1: JavaScript code is located inside the <Head> tag so browser first turn the JavaScript mode on and execute the JavaScript code first and it show the one popup with the following message.
Hello from JavaScript Code!!!
Step 2: After that browser will turn off the JavaScript mode and start the rendering of the HTML page and it will show the following message on the screen.
Body Tag JavaScript code is executed.
Prons:
- JavaScript code will be executed first, so the all the necessary task will be completed first before the rendering of the HTML is start.
- All the events is successfully registered to the HTML elements, So when user is click on the button or any element the JavaScript code will be perform successfully.
Cons:
- JavaScript code is execute the first so it takes the time to render the HTML page, so user may be think that page is loading slowly.
JavaScript code at the end of the <BODY> tag
<html>
<body>
<h2>Body Tag</h2>
<p>JavaScript code Will be execute.</p>
<script type="text/javascript">
alert("Hello from JavaScript Code!!!");
</script>
</body>
</html>
// Body Tag
// JavaScript code is executed.
// Hello from JavaScript Code!!!
In above example, JavaScript code is placed at the end of the HTML page and just the before the closing <BODY> tag.
Flow of the execution:
Step 1: First browser will render the HTML code of the page and displayed the output at the browser.
Body Tag JavaScript code Will be execute.
Step 2: After that browser founds the <Script> tag so it will turn on the JavaScript mode and execute the JavaScript code. It will show the popup with the following message.
Hello from JavaScript Code!!!
Prons:
- HTML page will be render fast means it displayed on the screen quickly.
Cons:
- JavaScript code is load after the HTML page is render, So if user click on the button before the JavaScript code is load than the button’s event will be not fired.
JavaScript code between the HTML tags
<html>
<body>
<h2>Body Tag</h2>
<script type="text/javascript">
alert("Hello from JavaScript Code!!!");
</script>
<p>JavaScript code is executed.</p>
</body>
</html>
// Body Tag
// Hello from JavaScript Code!!!
// JavaScript code is executed.
In above example, JavaScript code is placed between the HTML tags.
Flow of the execution:
Step 1: Browser first start the rendering of the HTML page. It first found the <H2> tag so it will first displayed the following message on the screen.
Body Tag
Step 2: After that it found the <Script> tag so, it will turn on the JavaScript mode and start the execution of the JavaScript code. So it will displayed the following message in the popup.
Hello from JavaScript Code!!!
Step 3: After the execution of the <Script> tag is over, browser will turn off the JavaScript mode and start the rendering of the HTML page. And it will displayed the following message on the screen.
JavaScript code is executed.
So we can add the JavaScript code at any place into the HTML page as per our need.
All the above way have the some prons and cons, So it’s upon us that which way we have to use to add the JavaScript code into the HTML file.
Add JavaScript Code (Option)
We have the 2 option to add the JavaScript code into the HTML page.
- External JavaScript Code File.
- Internal
<Script>tag for the JavaScript Code.
1. External JavaScript Code File.
In this option we can create the sepreate JavaScript file, which have the only JavaScript code without the <Script> tag and file’s extension must be the .js (JavaScript).
So I created the one JavaScript file with the named JavaScriptFile.js, which have to following content.
JavaScriptFile.js
alert("Hello from External file: JavaScriptFile.js");
Now let’s put this to our HTML page.
<html>
<head>
<script type="text/javascript" src="JS/JavaScriptFile.js"></script>
</head>
<body>
<h2>Body Tag</h2>
<p>JavaScript code is executed.</p>
</body>
</html>
// Hello from External file: JavaScriptFile.js
// Body Tag
// JavaScript code is executed.
In above example, I placed the JavaScriptFile.js into the HTML page using the <script> tag.
In the <Script> tag we have to use the src attribute to pass the path of the JavaScript file. So when the page is loaded browser will automatically load all the JavaScript code from the path given to the src attribute.
This is good option to add the JavaScript code into the HTML page, because using this way we can separate the JavaScript code and HTML code.
2. Internal <Script> tag for the JavaScript Code.
<html>
<head>
<script type="text/javascript">
alert("Hello world!!!");
</script>
</head>
<body>
<h2>Body Tag</h2>
<p>JavaScript code is executed.</p>
</body>
</html>
// Hello world!!!
// Body Tag
// JavaScript code is executed.
In above example, I directly put the JavaScript code inside the <script> tag.
But this is not the good option to add the JavaScript code inside the HTML page. Because here JavaScript code and HTML code is placed inside the single page.
If we have too many lines of the JavaScript code than the use of the External JavaScript file is good option.