HTML <script> tagS2C Home   « HTML <script> tag

Definition

The <script> tag is a self closing tag for defining an inline script or imported script to be embedded within the HTML document.

Example


<!DOCTYPE html>   <!-- The DOCTYPE declaration must always come first in any HTML document --> 
<html  lang="en">   <!-- Always enter a language for a webpage -->
<head>
  <title>Appears in browser toolbar, favourites and search engine results.</title>
</head>

<body>
  
  <script>
    function changeExampleBg(color){
      document.getElementById("example").style.background = color;
    }
  </script>
  
  <p id="example">Some random text:</p>
  <label for="color">Change example background colour to:</label>
  <button type="button" onclick="changeExampleBg('cyan')">Cyan</button>
  <button type="button" onclick="changeExampleBg('orange')">Orange</button>

  <!-- Put imported scripts just before closing body tag for efficiency -->
  <script src="../js/jquery.js"></script>
</body>
</html>

Some random text.

Required Attributes

NONE

Optional Attributes

async specifies whether the script is executed asynchronously.

Can only be used when the src attribute is also present.


<!-- Valid values are an empty string or async -->
<script async src="../js/jquery.js"></script>
<script async="async" src="../js/jquery.js"></script>

charset specifies the character set of the linked document.


<script type="text/javascript" charset="ISO-8859-1"></script>

crossorigin specifies the MIME type of a script.


<!-- Valid values are anonymousand use-credentials -->
<script crossorigin="use-credentials" src="../js/jquery.js"></script>

defer specifies whether execution of the script is delayed until the page has loaded.

Can only be used when the src attribute is also present.


<!-- Valid values are an empty string or defer -->
<script defer src="../js/jquery.js"></script>
<script defer="defer" src="../js/jquery.js"></script>

src specifies the URL location of the external script.


<!-- relative URL to this document -->
<script src="../js/jquery.js"></script>

<!-- Absolute URL -->
<script src="http://htmldoctor.info/js/jquery.js"></script>

type specifies the MIME type of a script.

Default value is text/javascript so this can be omitted for JavaScript files.


<script type="text/javascript" src="../js/jquery.js"></script>

Optional Attributes

defer - limited browser support - specifies execution of the script is delayed until the page has loaded.

Global Attributes

Common

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<script class="classname"></script>

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<script id="idname"></script>

style - specifies an inline style for the element allowing you to apply the style to the content.


<script style="color:red;text-align:left"></script>

title - specifies extra information about the content.


<script title="information about the content"></script>

Keyboard

accesskey - specifies a keyboard shortcut to associate with the element.


<script accesskey="aKeyValue"></script>

tabindex - specifies a tab order for the element.


<script tabindex="someNumber"></script>

Language

dir - specifies the directional flow of the content.


<script dir="ltr"></script>   <!-- The text will flow from left to right -->
<script dir="rtl"></script>   <!-- The text will flow from right to left -->

lang - specifies a language code for the content of the element.


<script lang="en"></script>

spellcheck - specifies whether the element is to have its spelling checked.


<!-- Valid values are true and  false - default is inherited / browser specific. -->
<script spellcheck="true"></script>

translate - specifies whether the content of the element can be translated.


<!-- Valid values are yes and  no - default is yes. -->
<script translate="no"></script> 

Miscellaneous

contenteditable - specifies whether the content of the element is editable.


<!-- Valid values are true and  false - default is inherited. -->
<script contenteditable="false"></script> 

draggable - specifies whether the the element is draggable.

Only text selections, images, and links can be dragged.


<!-- Valid values are true and  false - default is browser specific. -->
<script draggable="true"></script>

hidden - specifies whether the element is not yet, or no longer, relevant.


<!-- Valid values are an empty string or hidden -->
<script hidden></script> 
<script hidden="hidden"></script> 

Event Attributes

Document

onabort - The JavaScript code to be run on abort.


<script onabort="go()"></script>   <!-- Executes the go() function -->

onerror - The JavaScript code to be run when an error occurs when the file is being loaded.


<script onerror="go()"></script>   <!-- Executes the go() function -->

onload - The JavaScript code to be run when the document is loaded.


<script onload="go()"></script>   <!-- Executes the go() function -->

onresize - The JavaScript code to be run when the browser window is resized.


<script onresize="go()"></script>   <!-- Executes the go() function -->

onscroll - The JavaScript code to be run when the scrollbar of an element is being scrolled.


<script onscroll="go()"></script>   <!-- Executes the go() function -->

onunload - The JavaScript code to be run once a page has unloaded or the browser window has been closed.


<script onunload="go()"></script>   <!-- Executes the go() function -->

Document Element

oncopy - The JavaScript code to be run when the user copies the content of an element.


<script oncopy="go()"></script>   <!-- Executes the go() function -->

oncut - The JavaScript code to be run when the user cuts the content of an element.


<script oncut="go()"></script>   <!-- Executes the go() function -->

onpaste - The JavaScript code to be run when the user pastes some content into an element.


<script onpaste="go()"></script>   <!-- Executes the go() function -->

Drag and Drop

ondrag - The JavaScript code to be run when an element is dragged.


<script ondrag="go()"></script>   <!-- Executes the go() function -->

ondragend - The JavaScript code to be run when an element has stopped being dragged.


<script ondragend="go()"></script>   <!-- Executes the go() function -->

ondragenter - The JavaScript code to be run when an element has been dragged to a valid drop target.


<script ondragenter="go()"></script>   <!-- Executes the go() function -->

ondragleave - The JavaScript code to be run when an element leaves a valid drop target.


<script ondragleave="go()"></script>   <!-- Executes the go() function -->

ondragover - The JavaScript code to be run when an element is being dragged over a valid drop target.


<script ondragover="go()"></script>   <!-- Executes the go() function -->

ondragstart - The JavaScript code to be run at the start of a drag operation.


<script ondragstart="go()"></script>   <!-- Executes the go() function -->

ondrop - The JavaScript code to be run when dragged element is being dropped.


<script ondrop="go()"></script>   <!-- Executes the go() function -->

Form

onblur - The JavaScript code to be run on abort.


<script onblur="go()"></script>   <!-- Executes the go() function -->

onchange - The JavaScript code to be run when object changed and attempt to leave field.


<script onchange="go()"></script>   <!-- Executes the go() function -->

oncontextmenu - The JavaScript code to be run when a context menu is triggered.


<script oncontextmenu="go()"></script>   <!-- Executes the go() function -->

onfocus - The JavaScript code to be run when the element gets focus.


<script onfocus="go()"></script>   <!-- Executes the go() function -->

oninput - The JavaScript code to be run when an element gets user input.


<script oninput="go()"></script>   <!-- Executes the go() function -->

oninvalid - The JavaScript code to be run when an element is invalid.


<script oninvalid="go()"></script>   <!-- Executes the go() function -->

onreset - The JavaScript code to be run when the reset button of a form is clicked.


<script onreset="go()"></script>   <!-- Executes the go() function -->

onselect - The JavaScript code to be run when some or all of the contents of an object are selected.


<script onselect="go()"></script>   <!-- Executes the go() function -->

onsubmit - The JavaScript code to be run when a form is submitted.


<script onsubmit="go()"></script>   <!-- Executes the go() function -->

Keyboard

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed.


<script onkeydown="go()"></script>   <!-- Executes the go() function -->

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<script onkeypress="go()"></script>   <!-- Executes the go() function -->

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<script onkeyup="go()"></script>   <!-- Executes the go() function -->

Media

oncanplay - The JavaScript code to be run when a file has buffered enough so it is ready to start playing.


<script oncanplay="go()"></script>   <!-- Executes the go() function -->

oncanplaythrough - The JavaScript code to be run when a file can be played all the way to the end without further need of buffering.


<script oncanplaythrough="go()"></script>   <!-- Executes the go() function -->

oncuechange - The JavaScript code to be run when the cue changes when using the track element.


<script oncuechange="go()"></script>   <!-- Executes the go() function -->

ondurationchange - The JavaScript code to be run when the length of the media is changed.


<script ondurationchange="go()"></script>   <!-- Executes the go() function -->

onemptied - The JavaScript code to be run when a media resource element suddenly becomes empty, usually due to an error.


<script onemptied="go()"></script>   <!-- Executes the go() function -->

onended - The JavaScript code to be run when the media has reach the end.


<script onended="go()"></script>   <!-- Executes the go() function -->

onloadeddata - The JavaScript code to be run when media data is loaded and playback can start.


<script onloadeddata="go()"></script>   <!-- Executes the go() function -->

onloadedmetadata - The JavaScript code to be run when metadata has been loaded.


<script onloadedmetadata="go()"></script>   <!-- Executes the go() function -->

onloadstart - The JavaScript code to be run when the media resource has started loading.


<script onloadstart="go()"></script>   <!-- Executes the go() function -->

onpause - The JavaScript code to be run when the media resource has been paused.


<script onpause="go()"></script>   <!-- Executes the go() function -->

onplay - The JavaScript code to be run when the media resource starts playback.


<script onplay="go()"></script>   <!-- Executes the go() function -->

onplaying - The JavaScript code to be run when playback has already begun.


<script onplaying="go()"></script>   <!-- Executes the go() function -->

onprogress - The JavaScript code to be run when the browser is fetching the media data.


<script onprogress="go()"></script>   <!-- Executes the go() function -->

onratechange - The JavaScript code to be run when the playback rate changes.


<script onratechange="go()"></script>   <!-- Executes the go() function -->

onseeked - The JavaScript code to be run when the seeking attribute is set to false indicating that seeking has finished.


<script onseeked="go()"></script>   <!-- Executes the go() function -->

onseeking - The JavaScript code to be run hen the seeking attribute is set to true indicating that seeking is currently active.


<script onseeking="go()"></script>   <!-- Executes the go() function -->

onstalled - The JavaScript code to be run when the browser is unable to continue fetching media data.


<script onstalled="go()"></script>   <!-- Executes the go() function -->

onsuspend - The JavaScript code to be run when media data has stopped before being completely loaded.


<script onsuspend="go()"></script>   <!-- Executes the go() function -->

ontimeupdate - The JavaScript code to be run when the media resources current playback position has changed.


<script ontimeupdate="go()"></script>   <!-- Executes the go() function -->

onvolumechange - The JavaScript code to be run when the volume has changed or been muted.


<script onvolumechange="go()"></script>   <!-- Executes the go() function -->

onwaiting - The JavaScript code to be run when the media resource has paused but is expected to resume.


<script onwaiting="go()"></script>   <!-- Executes the go() function -->

Mouse

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<script onclick="go()"></script>   <!-- Executes the go() function -->

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<script ondblclick="go()"></script>   <!-- Executes the go() function -->

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<script onmousedown="go()"></script>   <!-- Executes the go() function -->

onmousemove - The JavaScript code to be run when the mouse button is moved.


<script onmousemove="go()"></script>   <!-- Executes the go() function -->

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<script onmouseout="go()"></script>   <!-- Executes the go() function -->

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<script onmouseover="go()"></script>   <!-- Executes the go() function -->

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<script onmouseup="go()"></script>   <!-- Executes the go() function -->

onwheel - The JavaScript code to be run when the mouse wheel rolls up or down over an element.


<script onwheel="go()"></script>   <!-- Executes the go() function -->

Window

NONE

go to home page Homepage go to top of page Top