A client-side script is a program that is:
Scripts in HTML have “run-to-completion” semantics, meaning that the browser will generally run the script uninterrupted before doing anything else, such as firing further events or continuing to parse the document.
The script may be defined:
If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.
Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested.
An interface script is a script that respond to clicks or other user interactions.
see HTML - Web Worker. Background script
The SCRIPT element 1) 2) 3) places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
Syntax:
<script
type="ContentType"
src="URI"
async=false
defer=false >
</script>
<!-- The below script tag is then illegal and will not work -->
<script />
where:
it's non-conforming to have executable script in a script element when the src attribute is present.
The fallback element is the noscript element.
With the template element, they are script-supporting elements. They are used to support scripts.
Example:
<script src="http://example.com/PathToMyScript.js" type="application/javascript"></script>
Including a script tag cause the browser to stop the rendering process of the page. It will wait for the script to load, execute, and then continue. This is generally bad and why you should always include scripts at the bottom of the page.
The type attribute of the script element defines the language such as
See language
To calculate the integrity, see HTML - Integrity attribute (SRI | Source Resource Integrity)
The program executes on the client's machine when:
The default fetch mode for scripts that appear within a SCRIPT element is to :
This is bad for performance. You should always use one of this option:
Scripts are executed and the load event is executed.
With the onLoad HTML attribute
function onBowserLoad() {
const browser = bowser.getParser(window.navigator.userAgent);
console.log(`The bowser script has loaded and executed. You can then use it. Your browser name is "${browser.getBrowserName()}"`);
}
<script
type="application/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.min.js"
integrity="sha512-hsF/cpBvi/vjCP4Ps/MrPUFk6l4BqcGbzVUhqjJdX2SmAri1Oj8FBUGCvBiKHYd6gg3vLsV16CtIRNOvK5X4lQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
onLoad="onBowserLoad(event)"
defer>
</script>
In Javascript with dynamic javascript loading:
var script = document.createElement('script');
script.src = "https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.min.js"; // Set the location of the script
script.integrity ="sha512-hsF/cpBvi/vjCP4Ps/MrPUFk6l4BqcGbzVUhqjJdX2SmAri1Oj8FBUGCvBiKHYd6gg3vLsV16CtIRNOvK5X4lQ==";
script.crossOrigin="anonymous";
script.referrerPolicy="no-referrer";
let head = document.querySelector('head');
head.appendChild( script );
script.addEventListener('load', function() {
const browser = bowser.getParser(window.navigator.userAgent);
console.log(`The bowser script has loaded and executed. You can then use it. Your browser name is "${browser.getBrowserName()}"`);
});
A script can be run:
The flow of execution stay the same: when an algorithm B says to return to another algorithm A, it implies that A called B. Upon returning to A, the implementation must continue from where it left off in calling B.
An operation that is to run immediately must interrupt the currently running task, run itself, and then resume the previously running task.
In parallel, the currently running task is not interrupted, ie the subsequent steps are run, one after another, at the same time as other logic in the specification (e.g., at the same time as the event loop).
To run a script in parallel, you can use one of the resource fetch instruction such as the async attribute of the script element.
HTML's support for scripts is independent of the scripting language. Scripts are evaluated by script engines that must be known to a user agent (The browser generally).
As HTML does not rely on a specific scripting language, document authors must explicitly tell user agents the language of each script.
This may be done either through:
For all scripts in a document with the following META declaration in the HEAD:
Syntax:
<META http-equiv="Content-Script-Type" content="type">
where type defines the type of the scripting language
In the absence of a META declaration, the default can be set by a Content-Script-Type HTTP header.
The value of the type attribute for a SCRIPT element overrides the default scripting language for that element.
Example of document with TCL as default language and the call of a vbsscript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>
<INPUT NAME="num" onchange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}" VALUE="0">
<SCRIPT type="text/javascript">
...
</SCRIPT>
vbs script
Event handler for a text field:
<INPUT name="edit1" size="50">
<SCRIPT type="text/vbscript">
Sub edit1_changed()
If edit1.value = "abc" Then
button1.enabled = True
Else
button1.enabled = False
End If
End Sub
</SCRIPT>
Same example than above but in TCL
<INPUT name="edit1" size="50">
<SCRIPT type="text/tcl">
proc edit1_changed {} {
if {[edit value] == abc} {
button1 enable 1
} else {
button1 enable 0
}
}
edit1 onChange edit1_changed
</SCRIPT>
Scripts should refer to an element according to its assigned name.
Scripting engines should observe the following precedence rules when identifying an element:
The document attribute document.scripts return an HTMLCollection of the script elements in the Document.
A script element has several associated pieces of state.
How to load a script dynamically with Javascript?