Basics of JavaScript: Part 2

Introduction

 
The previous part explained the purpose of using JavaScript
 
This article discusses the following topics:
  1. Inline and external JavaScript.
  2. Advantages of external JavaScript over inline JavaScript.
  3. Where the script tag should be placed.
JavaScript can be stored inline on the page or in an external JavaScript (.js) file.
 
First, let's see how to create an Inline JavaScript.
 

Inline JavaScript

 
The first step is to create a user interface that looks like this.
 
 
The following is the HTML required for creating the preceding UI:
  1. <!DOCTYPE html>    
  2. <head>    
  3.     <title>Inline JavaScript</title>    
  4. </head>    
  5. <body>    
  6.     <form>    
  7.         <p>Enter Number:     
  8.             <input type="text" name="txtOne" id="txtOne">    
  9.             </p>    
  10.             <input type="submit" value="Validate"/>    
  11.         </form>    
  12.     </body>    
  13. </html> 
Now what we want is, we want to add a functionality using which we will be able to check if the input is a valid number or not. If the user enters a number and clicks the button, then we want to display an alert box stating the number is valid else if the user enters some literal text then we want to display an alert box requesting that a valid number be entered. So, let’s see how to do that.
 
Write the following in the head section.
  1. <head>    
  2.     <title>Inline JavaScript</title>    
  3.     <!--to add a javascript we use script tag where we pass the text/javascript as the script type-->    
  4.     <script type="text/javascript">    
  5. //to create a function we use function keyword and name of the function    
  6. //here ValidateInput is the function name. The parameters are optional    
  7. function ValidateInput()    
  8. {    
  9. //to get the html element based on an Id we can use document.getElementById('ElementId')    
  10. var number = document.getElementById('txtOne').value;//retrieving the value    
  11. //to check if an input is number of or we use isNaN function    
  12. if (!isNaN(number))     
  13. {    
  14. alert(number + ' is a valid number');    
  15. }    
  16. else    
  17. {    
  18. alert('Please enter a valid number');    
  19. }    
  20. }    
  21. </script>    
  22. </head>   
Pass the function name in the button’s onclick event.
  1. <input type="submit" value="Validate" onclick="ValidateInput()"/>   
Open the file in a browser.
 
Pass a string and click Validate.
 
 
Since g is not a number we got the alert box stating “Please enter a valid number”.
 
Now specify a valid number and click Validate.
 
 
Now let’s see how to do the same thing using an external js file.
 

External JavaScript

 
The first step is to create a file with an extension of .js and inside that JavaScript, file add the following JavaScript code.
  1. function ValidateInput()    
  2. {    
  3.     var number = document.getElementById('txtOne').value;    
  4. if (!isNaN(number))     
  5. {    
  6.     alert(number + ' is a valid number');    
  7. }    
  8. else    
  9. {    
  10.     alert('Please enter a valid number');    
  11. }    
  12. }  
In the HTML document, we need to specify the source of the JavaScript file using the src attribute of the script tag.
  1. <head>    
  2. <title>Untitled Document</title>    
  3. <script src="script.js" type="text/javascript"></script>    
  4. </head>  
Save and open the file in the browser.
 
 
 
Advantages of using External JavaScript over Inline JavaScript
 

Maintainability

 
External JavaScript files can be used in multiple pages without having to duplicate the code inline on every page. If there is a requirement to change anything you only have one place to change.
 

Performance

 
An external JavaScript file can be cached by the browser whereas an inline JavaScript on the page is loaded every time the page loads.
 

Separation

 
It is a good practice to separate HTML, CSS, and JavaScript since it makes it easier to work with them.
 
Script tag in HTML
  • Where should the script tag be placed in HTML? Inside the body or in the head section.
  • In general, it can be placed either in the head section or in the body section.
  • Let’s look at some of the examples where we will place the script tag in the head as well as in the body section.
Example 1
  1. <html>    
  2.     <head>    
  3.         <title></title>    
  4.         <script type="text/javascript">    
  5. alert('Basics of javascript');    
  6. </script>    
  7.     </head>    
  8.     <body></body>    
  9. </html>   
In the preceding example, we have passed the script element in the head section.
 
Open the file in the browser.
 
 
Now let’s move the script element in the body section.
  1. <html>    
  2.     <head>    
  3.         <title></title>    
  4.     </head>    
  5.     <body>    
  6.         <script type="text/javascript">    
  7. alert('Basics of javascript');    
  8. </script>    
  9.     </body>    
  10. </html>   
Open file in a browser.
 
 
We got the same output.
 
Example 2
 
There are some scenarios where when we place the script tag in the body section it will work, but it is not going to work in the head section.
 
First, remove the script tag from the body section and add a textbox control to your form.
  1. <html>    
  2.     <head>    
  3.         <title></title>    
  4.     </head>    
  5.     <body>    
  6.         <form>    
  7.             <input type="text" id="txtOne"/>    
  8.         </form>    
  9.     </body>    
  10. </html> 
 
Now what we want here is, whenever this page is loaded we want to change the background color of the preceding textbox control to Yellow.
 
Write the following JavaScript code after the closing form tag.
  1. <script type="text/javascript">    
  2. document.getElementById('txtOne').style.backgroundColor = 'yellow';    
  3. </script>   
Open File in a browser.
 
 
Now let’s see how to do the same by shifting the script element to the head section.
  1. <html>    
  2.     <head>    
  3.         <title></title>    
  4.         <script type="text/javascript">    
  5. document.getElementById('txtOne').style.backgroundColor = 'yellow';    
  6. </script>    
  7.     </head>    
  8.     <body>    
  9.         <form>    
  10.             <input type="text" id="txtOne"/>    
  11.         </form>    
  12.     </body>    
  13. </html>   
Open the file in the browser.
 
 
Look at the output we got. The background color of the textbox did not change to Yellow.
 
So, why did the JavaScript not work in this case?
 
Our JavaScript code is present before the textbox control. By the time the JavaScript code is executed, the textbox is still not loaded into the browser’s document object model. This is the reason JavaScript can’t find the textbox.
 

Summary

 
In this article, we discussed where we can add JavaScript and its advantages. We also discussed where the script tag should be placed in an HTML file.
 
I hope you like it
 
Thank you.