First Program in JavaScript

The JavaScript is used to turn a static HTML webpage into an interactive and dynamic webpage. For this purpose, JavaScript codes are combined with HTML.

There are three ways to insert JavaScript into an HTML page.

  1. Head Section
  2. Body Section
  3. External JavaScript

The Script tag

This is the most important element which is used to insert JavaScript in an HTML document. It has both an opening and closing tag.

Example:

<script> ... </script>

Now, we will create a simple webpage, which will print a Heading "JavaScript Tutorial" and a string "Hello World!" using JavaScript, in three ways stated above.

1. Head Section: You can insert JavaScript into the head section of an HTML page within <script> tag.

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            document.write("Hello World!");
        </script>
    </head>
    <body>
        <h1>JavaScript Tutorial</h1>
    </body>
</html>

Output:

Hello World!

JavaScript Tutorial

2. Body Section: You can also insert JavaScript at the end of the body of the HTML page inside <script> tag.

Example:

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        <h1>JavaScript Tutorial</h1>
        <script>
            document.write("Hello World!");
        </script>
    </body>
</html>

Output:

JavaScript Tutorial

Hello World!

3. External JavaScript: JavaScript can be saved as a separate file using .JS extension which acts as an external script source. This file can be used in any HTML page. Here, you need to pay attention to two aspects:

  • The <script> tag in the HTML page: An attribute src is used within the script tag where you need to pass the path of your External Script(.JS file).
    Syntax:
    <script src = "Filename.JS"></script>
  • External JavaScript: A separate file is created, where the statements of JavaScript are written without any of the HTML tags. The file must be saved with .JS extension.

If the file is saved in the same folder as the HTML file, the name of the file can be passed to the attribute src. Otherwise, you need to pass the complete path of the .JS file.

Example:

<!DOCTYPE html>
<html lang="en">
    <head> </head>
    <body>
        <h1>JavaScript Tutorial</h1>
        <script src="/index.js"></script>
    </body>
</html>

External file: index.js

document.write('Hello World!');

Output:

JavaScript Tutorial

Hello World!

Out of head section & body section, it is better to choose body section to insert the script.

Why not head section?
The browser examines the code from top to bottom. If the browser gets stuck with the script present in the head section, then other requested elements of the webpage may be ignored.

Why body section?
When the script is inserted at the end of the body section, naturally, the browser will reach the script tag at last, after rendering all the HTML elements to the requester. Therefore, placing the JavaScript in the body section is a better choice.

Syntax of JavaScript

Now, let us look at the JavaScript in the above example again.

<script>
    document.write("Hello World!");
</script>
  • document.write(): Due to the presence of Parentheses, we can say that this is a function which is used to display the output on the webpage. Parameters can be passed to the function within these parentheses.
  • "Hello World": A sequence of characters placed inside a pair of single or double quotes is known as a String. Since the string is placed inside the parentheses of the function, it as a parameter to it.
  • Semicolon: JavaScript terminates a statement by placing a semicolon at the end.

Comments in JavaScript

JavaScript allows you to comment the statements so that the execution of those statements could be ignored. You can comment a single line or multiple statements in one go.

Single-line Comment: (Double slash //)
Example:

//Single-line comment in JavaScript

Multi-line Comment: (/* ... */)
Example:

/* Multi-line
comment
in 
JavaScript. */

With the help of comments, you can create a detailed self-explanatory program. Along with this, you can selectively execute the statements, by commenting a line, to test the code for errors.