❮ Js Window Screen Javascript Json Stringify ❯

JavaScript Usage

JavaScript script code in HTML must be placed between the <script> and </script> tags.

JavaScript script code can be placed in the <body> and <head> sections of an HTML page.

The <script> Tag

To insert JavaScript into an HTML page, use the <script> tag.

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

The lines of code between <script> and </script> contain JavaScript:

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

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

| | Older examples might 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 writes text to the HTML <body> when the page loads:

Example

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

JavaScript Functions and Events

The JavaScript statements in the above example execute when the page loads.

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

If we put JavaScript code into a function, we can call that function when an event occurs.

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

JavaScript in <head> or <body>

You can place an unlimited number of scripts in an HTML document.

Scripts can be in the <body> or <head> section of an HTML page, or in both.

It is common practice to put functions in the <head> section or at the bottom of the page. This way, they can be placed in one location without interfering with the page's content.

JavaScript Function in <head>

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

The function is called when a 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>

JavaScript Function in <body>

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

The function is called when a 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>

External JavaScript

Scripts can also be saved in external files. External files usually contain code that is used by multiple web pages.

The file extension for external JavaScript files is .js.

To use an external file, set the src attribute in the <script> tag to the .js file:

Example

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

You can place scripts in the <head> or <body>, and the scripts in the <script> tag work the same as external scripts.

The myScript.js file contains the following code:

function myFunction()
{
    document.getElementById("demo").innerHTML="My first JavaScript function";
}

| | External scripts cannot contain <script> tags. | | --- | --- |

❮ Js Window Screen Javascript Json Stringify ❯