JS Where To

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Where To

The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
</body>
</html>

				
			
				
					<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
				
			

Output

JavaScript in Body

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when “called” for.

For example, a function is called when an event occurs, like when the user clicks a button.

JavaScript in <head> or <body>

Any number of scripts can be used in an HTML document.

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

JavaScript in <head>

In this example, a JavaScript function is inserted 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>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

				
			

Output

Demo JavaScript in Head

A Paragraph.

JavaScript in <body>

In this example, a JavaScript function is inserted in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<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>

				
			

Output

Demo JavaScript in Body

A Paragraph.

External JavaScript

Scripts can also be inserted in external files:

External file: myScript.js

				
					function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

				
			

External scripts are practical when the same code is applied on many different web pages.

JavaScript files have the file extension .js.

To access an external script, insert the name of the script file in the src (source) attribute of a <script> tag.

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>

				
			

An external script can be placed in the reference in <head> or <body> as you like.

The script behaves as if it was located exactly where the <script> tag is located.

External scripts cannot have <script> tags.

External JavaScript Advantages

Placing scripts in external files has some advantages:

  • It divides the HTML and code.
  • It makes HTML and JavaScript easier to read and maintain.
  • Cached JavaScript files can speed up page loads.

To use the several script files to one page  – apply several script tags:

Example

				
					<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

				
			

External References

An external script can be referenced in 3 different ways:

  • With a full URL (a full web address).
  • With a file path (like /js/).
  • Without any path.

This example uses a full URL to link to myScript.js:

Example

				
					<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click Me</button>
<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="https://www.webhostguru.com/js/myScript.js"></script>
</body>
</html>