X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP 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 <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

Often, JavaScript code is written to be executed when an event occurs, like when the user clicks a button.

JavaScript code inside a function, can be invoked later, when an event occurs.

Invoke a function = Call upon a function (ask for the code in the function to be executed).

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


JavaScript in <head> or <body>

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

Scripts can be placed in the <body> or in the <head> section of HTML, and/or in both.

Often you will see scripts at the bottom of the <body> section of a web page. This can reduce display time.

Sometimes you will see all JavaScript functions in the <head> section.

Anyway, 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 invoked (called) when a button is clicked:

Example

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</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 invoked (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 = "Paragraph changed.";
}
</script>

</body>
</html>

Try it Yourself »

Note It is a good idea to place scripts at the bottom of the <body> element.
This improves page load, because HTML loading is not blocked by scripts loading.


External JavaScripts

Scripts can also be placed in external files.

External scripts are practical when the same code is used in many different web pages.

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 HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook