The script element can include scripting in your pages,
either defined inline in the document or referenced to an external file.
The most commonly used type of script is JavaScript.
You use one script element for each script.
The script element has local attributes: type, src, defer, async, charset.
A start and end tag for script element are required;
self-closing tags are not permitted, even when referencing an external JavaScript library
The type attribute is optional in HTML5.
The async and defer attributes have been added in HTML5.
src attribute.
src attribute.
src attribute.
An inline script is included the JavaScript statements in the HTML page.
<!DOCTYPE HTML>
<html>
<head>
<script>
document.write("This is from the script");
</script>
</head>
<body>
<p>This is a test.</p>
<a href="http://java2s.com">Visit java2s.com</a>
</body>
</html>
By default, scripts are executed as soon as they are encountered in the page.
You usually use the script element inside the head element,
but you may use it anywhere in an HTML
document.
You can separate scripts into separate files and load them using the script element.
Suppose we have a file called simple.js,
its contents are shown in the following code.
document.write("This is from the external script");
The file contains a single statement.
Then we can use the src attribute in the script element to reference this file.
A script element must be empty if it uses the src attribute.
You can't use the same script element to define an inline script and an external script.
The following code shows how to use an external script.
<!DOCTYPE HTML> <html> <head> <script src="simple.js"></script> </head> <body> <p>This is a test.</p> <a href="http://java2s.com">Visit java2s.com</a> </body> </html>
The value for the src attribute is the URL of the script file that you want to load.
The simple.js file is in the same directory as the HTML file.
An end tag for the script element is needed, even though the element has no content. If you use a self-closing tag when referencing an external script, the browsers will ignore the element and not load the file.
You can control the execution of a
script by using the async and defer attributes.
The defer attribute tells the browser not to execute the script
until the page has been loaded and parsed.
To understand the benefit of the defer attribute, let's look at the problem that it solves.
Suppose simple2.js script file has a single statement listed as follows.
document.getElementById("myID").innerText = "myValue";
When this script runs, it will find an element with an
id attribute value of myID and
change the inner text of that element to myValue.
The following HTML document references the script file using a script element.
<!DOCTYPE HTML> <html> <head> <script src="simple2.js"></script> </head> <body> <p id='myID'>This is a test.</p> </body> </html>
The default behavior for a browser
when it encounters a script element is to stop processing the HTML document,
load the script file, and execute its contents.
This means that the browser loads and
executes the statement in simple2.js before it has parsed
the rest of the HTML, and discovered
the p element.
The script doesn't find the element it is looking for, and so no changes are applied.
After the script completes, the browser continues parsing the HTML,
and finds the p element.
To solve this problem, put the script element at the end of the document.
<!DOCTYPE HTML> <html> <body> <p id='myID'>This is a test.</p> <a href="http://java2s.com">Visit java2s.com</a> <script src="simple2.js"></script> </body> </html>
In HTML5 you can achieve the same effect by using the defer attribute.
When a browser encounters a script with the defer attribute,
it holds off loading and executing the script until all of the elements in the
HTML document have been parsed.
<!DOCTYPE HTML> <html> <head> <script defer src="simple2.js"></script> </head> <body> <p id='myID'>This is a test.</p> <a href="http://java2s.com">java2s.com</a> </body> </html>
You can use the defer attribute on external script files only.
It doesn't work for inline scripts.
The default browser behavior when it encounters a script element
is to stop processing the page while it loads and executes the script.
Each script element is executed synchronously
in the order in which they are defined, nothing else happens when
the script is loading and running.
You can improve performance by using the async attribute.
For example, a self-contained script, which does not interact with the
elements in the HTML document, can be executed asynchronously.
When you use the async attribute,
the browser loads and executes the script asynchronously while it
continues to parse the other elements in the HTML, including other script elements.
The following code shows the async attribute applied to a script element.
<!DOCTYPE HTML> <html> <head> <script async src="simple2.js"></script> </head> <body> <p>This is a test.</p> <a href="http://java2s.com">java2s.com</a> </body> </html>
The scripts with async attribute might not be executed
in the order in which they are defined.
This makes the async feature unsuitable for scripts that depend on
functions or values defined by other scripts.
The noscript element allows you to display content to
users who have disabled JavaScript or who are using a browser that
doesn't support it.
The noscript element displays content and
explains that they can't use your site or page unless they enable JavaScript.
The following code shows the
noscript element set up to display a simple message.
<!DOCTYPE HTML> <html> <head> <script defer src="simple2.js"></script> <noscript> <h1>Javascript is required!</h1> <p>You cannot use this page without Javascript</p> </noscript> </head> <body> <p>This is a test.</p> <a href="http://java2s.com">Visit java2s.com</a> </body> </html>
The remainder of the page is processed as normal, and the content elements are still displayed.
You can add multiple noscript elements to
a page.
You can also redirect the user's browser to a different URL if it doesn't support
JavaScript by placing a meta element inside the noscript element.
<!DOCTYPE HTML> <html> <head> <script defer src="simple2.js"></script> <noscript> <meta http-equiv="refresh" content="0; http://www.java2s.com"/> </noscript> </head> <body> <p>This is a test.</p> <a href="http://java2s.com">java2s.com</a> </body> </html>
This will redirect the user to the www.java2s.com site when a browser that doesn't support JavaScript, or that has JavaScript disabled.