JavaScript Usage

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

JavaScript script code can be placed in the HTML page's<body>and<head>section.

<script> Tag

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

The <script> and </script> tags tell JavaScript where to begin 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 code above. Just understand that the browser interprets and executes the JavaScript code between <script> and </script>.

lamp Those old 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 in HTML5.

JavaScript in <body>

In this example, JavaScript writes text into 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>

Try it Yourself »

JavaScript Functions and Events

The JavaScript statements in the example above are executed 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 the 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 placed in the <body> or <head> section of an HTML page, or in both sections.

The common practice is to put functions in the <head> section, or at the bottom of the page. This places them in one location, without interfering with the page content.

JavaScript Functions in <head>

In this example, we place a JavaScript function in the <head> section of an 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 Yourself</button> </body> </html>

Try it Yourself »

JavaScript Functions in <body>

In this example, we place a JavaScript function in the <body> section of an 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 Yourself</button> <script>function myFunction() { document.getElementById("demo").innerHTML="My first JavaScript function"; }</script> </body> </html>

Try it Yourself »

External JavaScript

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

The file extension for external JavaScript files is .js.

To use an external file, 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 Yourself »

You can place the script in <head> or <body>. Scripts inside the <script> tag behave exactly the same as externally referenced scripts.

The myScript.js file code is as follows:

function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; }
lamp External scripts cannot contain <script> tags.
Other Extensions