JavaScript How To

## JS Basic

JS HOME JS Introduction JS How To JS Output JS Statements JS Comments JS Variables JS Data Types JS Objects JS Functions JS Operators JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Breaks JS Errors JS Validation

## JS Advanced

JS Object JS Number JS String JS Date JS Array JS Boolean JS Math JS RegExp

## JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Events DOM Navigation DOM Nodes DOM Nodelist

## JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS PopupAlert JS Timing JS Cookies

## JS Libraries

JS Libraries JS jQuery JS Prototype

## JS Examples

JS Basic Examples JS Objects Examples JS DOM Examples JS HTML Examples JS Browser Examples JS Quiz JS Certificate JS Summary

## JS References

Javascript Objects HTML DOM Objects

# JavaScript How To

« Previous
Next Chapter »

JavaScripts in HTML must be inserted between <script> and </script> tags.

JavaScripts can be put in the <body> and in the <head> section of an HTML page.

## The <script> Tag

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

The <script> and </script> tells where the JavaScript starts and ends.

The lines between the <script> and </script> contain the JavaScript:

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

You don't have to understand the code above. Just take it for a fact, that the browser will interpret and execute the JavaScript code between the <script> and </script> tags.

| Old examples may have type="text/javascript" in the <script> tag. This is no longer required. JavaScript is the default scripting language in all modern browsers and in HTML5.

## JavaScript in <body>

In this example, JavaScript writes into the HTML <body> while 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 while the page loads.

More often, we want to execute code when an event occurs, like when the user clicks a button.

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

You will learn much 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 in the <head> section of HTML, and/or in both.

It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.

## A JavaScript Function in <head>

In this example, a JavaScript function is placed 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</button>

</body>
</html>

Try it yourself »

## A JavaScript Function in <body>

In this example, a JavaScript function is placed 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</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>

Try it yourself »

## External JavaScripts

Scripts can also be placed in external files. External files often contain code to be used by several different web pages.

External JavaScript files have the file extension .js.

To use an external script, point to 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 the <head> or <body> as you like. The script will behave as if it was located exactly where you put the <script> tag in the document.

| External scripts cannot contain <script> tags.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE