Getting Started

In this section, we will learn different ways to make a JavaScript-powered web page.

Before we proceed, make sure you have some basic working knowledge of HTML and CSS, otherwise please refer to our tutorials on them.

There are three ways to add JavaScript to a web page.

Method Description
Internal JavaScript Embed JavaScript code within the script tags (<script> and </script>).
External JavaScript Load an external JavaScript file using the script tag (<script>), with its src attribute pointing to the file location.
Inline JavaScript Place JavaScript code directly within the HTML opening element, using the element attributes, like onclick, onload, onmouseover, onkeypress, etc.,

Internal JavaScript

Internal JavaScript code can be embedded directly within an HTML document using the script tags (<script> and </script>) as shown below.

  • The JavaScript code must go within the script tags (<script> and </script>).
  • The browser interprets all the code between the script tags as an executable script.

The below example prints a message using inline JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript</title>
</head>
<body>
    <script>
        var greet = "Hello World!";
        document.write(greet); // Prints: Hello World!
    </script>
</body>
</html>

External JavaScript

External JavaScript files can be included within an HTML document using the script tag as shown below.

  • Javascript files are separate files with a .js file extension.
  • This method is the most preferred way to add JavaScript to an HTML document, as the same script files can be used across multiple HTML documents.
  • This method avoids code repetition between HTML documents.
  • This method reduces the maintenance cost.

Similar to images and stylesheets, when an external JavaScript file is downloaded for the first time, it is stored in the browser's cache.

  • This makes the file available for the next time without another download.
  • It avoid multiple downloads from a web server.
  • It makes a web page load faster from the second time, as it need not download the already downloaded JavaScript files.

Let's consider the below content in the "hello.js" JavaScript file.

// A function to display a message
function sayHello() {
    alert("Hello World!");
}

// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;

The below example prints a message upon a button click using external JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

Inline JavaScript

Inline JavaScript code can be embedded directly within an HTML element using the special attributes available on an element.

  • The special attributes may change with element.
  • This method is not recommended unless necessary, as it clutters up your HTML with JavaScript.
  • This method makes both HTML and JavaScript hard to read, understand, and maintain.

The below example shows an alert message upon a click on the button element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

Positioning JavaScript Code

The script element <script> can be included in either <head> or <body> elements, but it is recommended to place just before closing the body (</body>) element.

  • JavaScript is required only after the page is loaded.
  • If the JavaScript is placed within the head section (i.e. <head>), it obstructs the initial page rendering, which loads the page content only after all the <script> elements have loaded and executed the JavaScript associated with them.
  • If the JavaScript is placed just before closing the body section (i.e </body>), then web page is rendered first and then loads the JavaScript, which improves the initial loading.

The below example included the external JavaScript file just before closing the body element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

Client-side Scripting Vs Server-side Scripting

JavaScript is a client-side scripting language.

Let's take a look at some key differences between the Client-side Scripting and Server-side Scripting.

Client-side Scripting Server-side Scripting
Client-side scripting languages are interpreted and executed by a web browser. Server-side scripting languages are interpreted and executed by a web browser, and the output is sent back to web browser in the form of HTML.
Examples: JavaScript and VBScript Examples: Java, PHP, ASP, Ruby, Python, etc.,
Processing happens on web server, which is faster than server-side scripting languages. Processing happens on a web server, which is slower than client-side scripting languages.
It can be used to validate user input before sending it to server for processing, so we can reduce the bandwidth usage. It takes bandwidth.

Overall

JavaScript is going to stay for a long time, so every web developer must know about it.

Related Links