JavaScript Usage


The script in the HTML must be between the <script> and </script> tags.

Scripts can be placed in the <body> and <head> sections of the HTML page.


<script> Tag

To insert JavaScript in the HTML page, please use the <script> tag.

<script> and </script> will tell JavaScript where to start and end.

The line of code between <script> and </script> contains JavaScript:

<script>
    alert("My first JavaScript");
</script>

You don't need to understand the code above. Just understand that the browser will interpret and execute the JavaScript code located between <script> and </script> 

lampIn this example may use type="text/javascript" in the <script> tag. This is no longer necessary. JavaScript is the default scripting language in all modern browsers and HTML5.



JavaScript in <body>

In this example, JavaScript will write text to the HTML <body> when the page is loading:

Example

<!DOCTYPE html>
<html>
<body>
    .
    .
    <script>
    document.write("<h1>This is a title</h1>");
    document.write("<p>This is a paragraph</p>");
    </script>
    .
    .
</body>
</html>

 Try It! 


JavaScript Functions and Events

The JavaScript statement in the above example will be executed when the page is loading.

Usually, we need to execute codes when an event occurs, such as when the user clicks a button.

If we put JavaScript codes in a function, we can call the function when an event occurs.

You will learn more about JavaScript functions and events in later chapters.


JavaScript in <head> or <body>

You can put an unlimited number of scripts in the HTML document.

The script can be in the <body> or <head> part of the HTML, or in both parts.

The better practice is to put the function in the <head> section, or at the bottom of the page. This way they can be placed in the same location without disturbing the content of the page.


JavaScript Functions in <head>

In this example, we placed a JavaScript function in the <head> section of the HTML page.

This function will be called when the button is clicked:

Example

<!DOCTYPE html>
<html>
<head>
    <script>
    function myFunction()
    {
         document.getElementById("demo").innerHTML="My first JavaScript function";
    }
    </script>
</head>
<body>
    <h1>My Web page</h1>
    <p id="demo">A paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

 Try It! 


JavaScript Functions in <body>

In this example, we placed a JavaScript function in the <body> section of the HTML page.

This function will be called when the button is clicked:

Example

<!DOCTYPE html>
<html>
<body>
    <h1>My Web page</h1>
    <p id="demo">A paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
    
    <script>
    function myFunction()
    {
         document.getElementById("demo").innerHTML="My first JavaScript function";
    }
    </script>
</body>
</html>

 Try It! 


External JavaScript

You can also save the script to an external file. External files usually contain code used by multiple web pages.

The file extension of the external JavaScript file is .js.

If you need to use an external file, please set the .js file in the "src" attribute of the <script> tag:

Example

<!DOCTYPE html>
<html>
<body>
    <script src="myScript.js"></script>
</body>
</html>

 Try It! 

You can place the script in the <head> or <body>, and the script in the <script> tag will run exactly the same as the externally referenced script.

The code of myScript.js file is as follows:

function myFunction()
{
     document.getElementById("demo").innerHTML="My first JavaScript function";
}
lampExternal scripts cannot contain <script> tags.