fbpx
April 6, 2020
javascript placement

JAVASCRIPT PLACEMENT | Learn How to Place JavaScript in HTML File

In this tutorial we will be discussing about JavaScript placement which entails how to place JavaScript in a HTML file. In our previous tutorial we discussed about JavaScript syntax which involved the basic syntax used in placing JavaScript codes in web documents.  If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: JavaScript Syntax | Introduction To Basic Syntax Used In JavaScript

JAVASCRIPT PLACEMENT

There are different ways we can place JavaScript codes inside the HTML file though most developers recommend placing it in the head section of the HTML file but in some cases you might need to do otherwise which i will be explaining below. Below are different ways you can place JavaScript files inside the HTML web document and they include:

The head section <head>

Placing the JavaScript codes in the head section is recommended mostly when you expect the web page user to carry out an action or event before the code runs for example if you want the user to click on a button or hover over a text before getting a response or an alert or before the code runs then you can use this JavaScript placement method. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <script language = "javascript" type = "text/javascript">
   function alertBuddy() {
      alert ('Hey buddy')
   }
      
   </script>
  
   <title>Simple JavaScript Code placed on the head Structure</title>
</head>
<body>

<input type="button" value="click me" onclick="alertBuddy()">
    
   
</body>
</html>

RESULT ON WEB PAGE

Simple JavaScript Code placed on the head Structure

Click on the “click me” button above to show effect

The body section <body>

JavaScript codes are added to the body of web pages most times when you need the code to be executed immediately the page loads. So the codes will be placed in-between the body section and it runs immediately the web page loads or sometimes as the page loads. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
  
   <title>Simple JavaScript Code placed on the body Structure</title>
</head>
<body>
   <script language = "javascript" type = "text/javascript">
      
         document.write ('Hey buddy')
      
         
      </script>

    
   
</body>
</html>

RESULT ON WEB PAGE

Simple JavaScript Code placed on the body Structure

The head and body section

You can as well have the JavaScript codes in the head and body section. Each carrying out different functions as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <script language = "javascript" type = "text/javascript">
      function alertBuddy() {
         alert ('Hey buddy')
      }
         
      </script>
   <title>Simple JavaScript Code placed on the body Structure</title>
</head>
<body>
   <script language = "javascript" type = "text/javascript">
      
         document.write ('Hey buddy')
      </script>
      <br>
      <br>
<input type="button" value="click me" onclick="alertBuddy()">
</body>
</html>

RESULT ON WEB PAGE

Simple JavaScript Code placed on the body Structure

The external JavaScript file method

Adding JavaScript to an external file is pretty a more better method when you need to run a setting code on multiple web pages. so instead of having the codes on each of the web page, we can simply place all the codes in a JavaScript file and link them to all the HTML pages using the <script> and src attribute as shown below.

note: JavaScript files ends with .js file extension.

<!DOCTYPE html>
<html lang="en">
<head>
   <script language = "javascript" type = "text/javascript" src="name-of-file.js">   
      </script>
   <title>Simple JavaScript Code placed on an external file Structure</title>
</head>
<body>
</body>
</html>

So on the external file you can structure all the JavaScript codes you will be needing during the web development.

CONCLUSION

These are the different methods used in adding JavaScript to web documents and we hope you had fund going through this tutorial and you can now link your JavaScript files to your web document easily. Lets move on to the next tutorial on JAVASCRIPT VARIABLES

Leave a Reply

Your email address will not be published. Required fields are marked *