HTML - (Client-side) Script (Element)

> (World Wide) Web - (W3|WWW) > HyperText markup Language (HTML)

1 - About

A client-side script is a program that is:

  • linked (server-side script)
  • or directly embedded in an HTML document (in-line script)

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.

Advertising

3 - Definition

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.

4 - GUI / Background

4.1 - Interface

An interface script is a script that respond to clicks or other user interactions.

4.2 - Background

see HTML - Web Worker. Background script

5 - Element

The SCRIPT element 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>

where:

  • ContentType defines the script language
  • URI can point to an external file
  • async=false or true to execute script in parallel (ie the user agent can continue parsing and rendering and run the script as soon as possible.
  • defer=false or true indicates no document creation (ie no “document.write” in javascript) - the user agent can continue parsing and rendering and executes the script after.

Processing:

  • With async, the browser downloads the script asynchronously while it continues to parse the HTML document. When the script finishes downloading, parsing is blocked while the script executes. Example: for analytics scripts that should run early.
  • With defer, the browser downloads the script asynchronously while it continues to parse the HTML document. The script doesn't run until the parsing is complete. Example: A video player

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:

  • src
<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.

Advertising

5.1 - Type

The type attribute of the script element define the language such as

  • text/tcl
  • text/javascript (javascript)
  • text/vbscript

See language

5.2 - Integrity

The integrity can be calculated with the following command line. It calculate the digest with the sha384 and apply the base64 algorithm above.

openssl dgst -sha384 -binary script.js | openssl base64 -A

where:

If the output was:

ZYfZnVukOuh/gRpU9uN+T9XwwRFJ9Y+0Ylk3zKvI184omb/HoOtQ0F8Iol7Nix7q

the script element would be:

<script src="script.js" integrity="sha384-ZYfZnVukOuh/gRpU9uN+T9XwwRFJ9Y+0Ylk3zKvI184omb/HoOtQ0F8Iol7Nix7q" type="text/javascript"></script>
Advertising

6 - Execution

The program executes on the client's machine when:

  • the document loads,
  • or at some other time such as when an event occurs.

6.1 - Load

Scripts that appear within a SCRIPT element are executed when the document is loaded.

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.

6.2 - Event

Scripts are executed every time a specific event occurs.

6.3 - Type

A script can be run:

  • immediately (default)
  • or in parallel

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.

6.3.1 - Immediately

An operation that is to run immediately must interrupt the currently running task, run itself, and then resume the previously running task.

6.3.2 - Parallel

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, set the async attribute of the script element.

In parallel - Doc ref

7 - Language

7.1 - Declaration

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:

  • a default declaration
  • or a local declaration.

7.1.1 - Default

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.

7.1.2 - Local

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>

7.2 - Example

7.2.1 - JavaScript

<INPUT NAME="num" onchange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}"
    VALUE="0">

7.2.2 - VBScript

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>

7.2.3 - Tcl

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>

8 - HTML Element Script Reference

8.1 - How

Scripts should refer to an element according to its assigned name.

8.2 - Precedence

Scripting engines should observe the following precedence rules when identifying an element:

  • a name attribute takes precedence over an id if both are set.

9 - Management

9.1 - Get (DOM Accessors)

The document attribute document.scripts return an HTMLCollection of the script elements in the Document.

9.2 - State processing

A script element has several associated pieces of state.

10 - Documentation / Reference

web/html/script.txt · Last modified: 2019/04/14 14:25 by gerardnico