Dynamically changing the document

script

A script element allows the JavaScript language to be used to respond to user actions.

The script element can be used in two ways:

  1. To import a script from an external resource
  2. To declare self-contained JavaScript within the document itself

Properties

src
Use sourceref syntax to specify the URL to an external resource containing JavaScript to parse and use.
type='module'
Treat the file's contents as an ECMAScript module.
nomodule
Treat the file's contents as a classic pre-ES2015 script.
async
Scripts imported from an external resource should be executed asynchronously.
defer
Scripts imported from an external resource should delay their execution until the page has been completely parsed.
integrity
An SHA-256 checksum value for the downloaded file that must be matched by the browser; this is to ensure that it has been untampered with enroute.
crossorigin
anonymous CORS credentials are set to 'same-origin'
use-credentials CORS credentials are set to 'include'
referrerpolicy
Which referer to send to the server when requesting the file. See Referrer Policy for details.
Feature Situation Action
no-referrer always instructs the browser to omit the referer header completely.
no-referrer-when-downgrade when switching from https: to http: instruct the browser to omit the referer header completely.
same-origin when going from one domain to a different domain instructs the browser to omit the referer header completely.
origin always instructs the browser to send the requestor's origin only (protocol + hostname + port).
strict-origin when switching from http: to https: instructs the browser to limit the referer header to just the origin.
origin-when-cross-origin when going from one domain to a different domain instructs the browser to limit the referer header to just the origin.
strict-origin-when-cross-origin when switching from https: to http: instruct the browser to omit the referer header completely.
unsafe-url always instructs the browser to send the requestor's complete origin, resource path, and all query-string variables.

Examples

head {
// The source may be locally hosted on the current website
script `/js/nav-widget.js`

// The source may be remotely hosted on another website.
script `https://example.com/jquery.min.js`
}
Importing a script from an external source

head {
script {
// recursively count an element's descendants
function deepCount(el) {
var x = 0;
for (let i=0; i < el.childen.length; i++) {
x += deepCount(el.childen[i]);
x++;
}
return x;
}
}
}
Self-contained JavaScript declared within the document

semantax > scripting > scriptDynamically changing the document

🔎