HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

JavaScript Where To


In HTML, JavaScripts 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 code:

Example

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

You don't have to understand the code above.

Just take it for a fact, that the browser will interpret the code between the <script> and </script> tags as JavaScript. 

Note 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 Functions and Events

Most often, JavaScript code is written to be executed 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 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.

Separating HTML and JavaScript, by putting all the code in one place, is always a good habit.


JavaScript 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 »


JavaScript 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, put the name of the script file in the source (src) attribute of the <script> tag:

Example

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

Try it yourself »

You can place an external script reference in <head> or <body> as you like.

The script will behave as if it was located exactly where you put the reference in the HTML document.

Note External scripts cannot contain <script> tags.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE