The primary method of inserting JavaScript into an HTML page is via the script
element.
There are six attributes for the script
element:
There are two ways to use the script
element:
To include inline JavaScript code, place JavaScript code inside the script
element directly, as follows:
<script type="text/javascript"> function sayHi(){ alert("Hi!"); } </script>
The JavaScript code contained inside a script
element is interpreted from top to bottom.
As with inline JavaScript code, processing of the page is halted while the external file is interpreted.
A script
element with the src
attribute should not include additional JavaScript code between the <script>
and </script>
tags.
If both are provided, the script file is downloaded and executed while the inline code is ignored.
To include JavaScript from an external file, use the src
attribute to reference URL linked to a file containing JavaScript code, like this:
<script type="text/javascript" src="script.js"></script>
In the code above, an external file named script.js
is loaded into the page.
The file should only contain the Javascript code.
To include JavaScript files from outside domains.
<script type="text/javascript" src="http://www.example.com/script.js"></script>
The script
elements are interpreted in the order in which they appear in the page as long as the defer
and async
attributes are not present.
Traditionally, all script
elements were placed within the <head>
element on a page.
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="script1.js"></script> <script type="text/javascript" src="script2.js"></script> <script type="text/javascript" src="script3.js"></script> </head> <body> <!-- content here --> </body> </html>
Including all JavaScript files in the <head>
means that all of the JavaScript code must be processed before the page begins rendering.
For this reason, you can include JavaScript references in the <body>
element.
<!DOCTYPE html> <html> <body> <!-- content here --> <script type="text/javascript" src="script1.js"></script> <script type="text/javascript" src="script2.js"></script> </body> </html>
Using this approach, the page is completely rendered before the JavaScript code is processed.
defer
attribute on a <script>
element tells browser that download should begin immediately but execution should be deferred:
<!DOCTYPE html> <html> <head> <script type="text/javascript" defer src="example1.js"></script> <script type="text/javascript" defer src="example2.js"></script> </head> <body> <!-- content here --> </body> </html>
The defer attribute is supported only for external script files.
For XHTML documents, specify the async attribute as defer="defer"
.
async
which applies only to external scripts changes the way the script is processed.It signals the browser to begin downloading the file immediately.
async
scripts are not guaranteed to execute in the order in which they are specified.
<!DOCTYPE html> <html> <head> <script type="text/javascript" async src="example1.js"></script> <script type="text/javascript" async src="example2.js"></script> </head> <body> <!-- content here --> </body> </html>
In this code, the second script file might execute before the first. For XHTML documents, specify the async
attribute as async="async"
.
noscript
element provides alternate content for browsers without JavaScript.
This element can contain any HTML elements. Content in a noscript
will be displayed under the following two circumstances:
<!DOCTYPE html> <html> <head> <script src="example1.js"></script> </head> <body> <noscript> <p>This page requires a JavaScript-enabled browser.</p> </noscript> </body> </html>
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> document.writeln("Hello"); </script> </head> <body> </body> </html>