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
JavaScript in Body
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
Demo JavaScript in Head
A Paragraph.
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
Demo JavaScript in Body
A Paragraph.
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
Demo External JavaScript
A Paragraph.
This example links to "myScript.js".
(myFunction is stored in "myScript.js")
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
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
External JavaScript
A Paragraph.
This example uses a full web URL to link to "myScript.js".
(myFunction is stored in "myScript.js")