How To Implement JavaScript


If you are new to JavaScript, then the following article will guide you through the steps you need to take in order to implement JavaScript in an HTML page.

Lets go through each steps, one at a time …

Step 1 : Fire Up A Code Editor

Source Code Editors or simply Code Editors are specially designed text editors used by software developers to simplify writing high quality code and speed up the development process.

Code Editors generally have the following features :

  • Syntax highlighting :  Display text in different colors and fonts according to the category of terms.
  • Indentations : Format source code by adding up spaces at the beginning of a code block in a conventional way to signal the type of code in the block.
  • Autocomplete : The application predicts the rest of the code that a user is typing.
  • Brace Matching : A syntax highlighting feature that highlights matching sets of braces (square brackets, curly brackets, or parentheses).
 Writing JavaScript however, does not require any special type of code editor or tools installed on your computer. All you will need is a simple text editor that you are comfortable with.
What code editor you choose is totally up to you. My personal favorite is VS Code
There are others you can choose from :  Atom, Notepad++, Sublime Text etc.

Step 2 : Paste In Some HTML

Create a new file with a proper name eg: index.html and paste in the below HTML code :

<!DOCTYPE html>
<html lang=”en”>


        <meta charset=”utf-8″>
        <title>HTML Snippet</title>



Up until now, you have just setup a basic HTML page with no content. You can directly open the HTML file using a web browser. The next step is to add some JavaScript code.

Step 3 : Write Some JavaScript

JavaScript can be included in an HTML page by enclosing the code using the ‘script‘ tags and placing it anywhere within the HTML document.

The scripts are generally placed within the ‘head‘ or the ‘body‘ tag or in both.

There are no limitations to the number of scripts that you can include within an HTML document. However, Including too many JavaScript from various sources can degrade your HTML page load time. We will talk more about this later in the JavaScript Best Practices guide.

Example : Simple JavaScript


    alert(“Hello !! I am JavaScript”);


The use of the type attribute: <script type=”text/javascript”> is no longer needed now days because JavaScript has become the default scripting language in HTML.

Example : JavaScript in Head Tags

If you need your JavaScript to be executed before the page is fully rendered, then you need to place it in the head of your HTML document as follows :

See the Pen dh-JavaScript-In-The-Head by Ozesh Thapa (@zaagan) on CodePen.

Example : JavaScript in The Body

Similar to placing it in the head, JavaScript can also be placed in the body of the HTML document. Placing your scripts at the bottom of the ‘body‘ element improves the display speed because script interpretation slows down the display.

See the Pen dh-JavaScript-In-The-Body by Ozesh Thapa (@zaagan) on CodePen.

Example : JavaScript From External Source

Large applications normally contains thousands of lines of JavaScript code. The code itself is mostly re-used by many different pages. In such cases, JavaScript code is often separated in a different file and later on included in the HTML document.

Some of its advantages are :

  • Easy to Read And Maintain

    Separation of HTML and JavaScript code can help in code maintainability and readability.

  • Speed Up Load Time

    External JavaScript files are usually cached by the browsers which helps in improving the page load time.

JavaScript files have the file extension : .js.

The script in the .js file cannot contain the script tags.

In the following example, The JavaScript file is placed in the same folder as the current page.

<script src=”myJavaScriptFile.js”></script>


You may also like...

Leave a Reply

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