HTML script Tag - Client-side scripting element
-
HTML
<script>
tag is used to defines client-side JavaScript that is specifies within document or embedded external JavaScript file through theSRC
attribute. -
JavaScript executes on the user's local machine, when the document loads or some other time such as user click action, hover action etc.
-
JavaScript is not the same as Java Programming language.
-
Most common use of JavaScript to create interactive websites. It is mainly used for:
- User-side validation.
- Displaying modal windows and dialog boxes.
- Dynamically manage the content, element style, or even structure.
- Send/Receive data from server.
- Implements slider, carousel, accordion.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML script tag</title>
</head>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>
Example (Embedded external JavaScript file)
script_tag_external.js
function hello(){
alert("Hello World!");
}
script_tag_external.html
<!DOCTYPE html>
<html>
<head>
<title>HTML script tag</title>
<script src="script_tag_external.js"></script>
</head>
<body>
<input type="button" value="Click" onclick="hello()"/>
</body>
</html>
<script> Tag Attributes
HTML <script>
tag support following specific attributes.
Attributes | Value | Description |
---|---|---|
async | async | Specifies that script will executed asynchronously as soon as it's loads. Note: This attribute must be used only for external embedded file. |
charset | charset | Specifies the character encoding of external JavaScript file. |
defer | defer | Indicates that script will be executed, once page is loads completely. Note: This attribute must be used only for external embedded file. |
src | URL | Specifies the URL of an external JavaScript file. |
type | MIME_type | Specifies the valid MIME type of the scripting languages. |
Global Attributes
HTML <script>
tag support following global attributes.
Attributes | Value | Description |
---|---|---|
id | unique_name | Declared unique id for an element. |
class | class_name | Declared one or more classnames for an element. |
style | styles | CSS inline styles specify an element. |
title | title | Specify extra details of element contain, this will display as a "tooltip" for an elements. |
Event Attributes
HTML <script>
tag support following event attributes.
Attributes | Value | Description |
---|---|---|
onfocus | script | element gets focus on object when script tobe run. |
onblur | script | element lose the focus on object when scrip tobe run. |
onabort | script | element gets aborted on object when script tobe run. |
onchange | script | element gets anytime change on object when script tobe run. |
onbeforeunload | script | element gets unloaded on object when scrip tobe run. |
onclick | script | clicked on object when script tobe run. |
ondblclick | script | double click on object when script tobe run. |
onkeydown | script | key is pressed when script tobe run. |
onkeypress | script | key is pressed over element then released when script tobe run. |
onkeyup | script | key is released over element when script tobe run. |
onmousedown | script | mouse button was pressed over an element when script tobe run. |
onmouseout | script | mouse pointer release over an element when script tobe run. |
onmousemove | script | run mouse pointer moved when script tobe run. |
onmouseover | script | run mouse pointer move over when script tobe run. |
onmouseup | script | mouse button is released when script tobe run. |
onreset | script | form has been reset when script tobe run. |
onselect | script | Select some content when script tobe run. |
onsubmit | script | form has been submitted when script tobe run. |
onload | script | object has load when script tobe run. |
onchange | script | allow to change the object when script tobe run. |
onunload | script | unload to the browser window when script tobe run. |
ondrag | script | element being dragged when script tobe run. |
ondragend | script | element being stop dragged when script tobe run. |
ondragenter | script | element being go target dragged when script tobe run. |
ondragleave | script | element being leave to target dragged when script tobe run. |
ondragover | script | element being over to target dragged when script tobe run. |
ondragstart | script | element being start dragged when script tobe run. |
ondrop | script | element being dropped when script tobe run. |
onerror | script | element error occurs when script tobe run. |
onmessage | script | element message display when script tobe run. |
onerror | script | element error occurs when script tobe run. |
onmousewheel | script | mouse wheel will be rotate when script tobe run. |
onscroll | script | scrollbar is scroll when script tobe run. |
onresize | script | element should be resize when script tobe run. |
onselect | script | all element content selected when script tobe run. |
onstorage | script | element should be store in target when script tobe run. |
Browser Compatibility
- Google Chrome
Yes - Mozilla Firefox
Yes - Microsoft Edge
Yes - Opera
Yes - Safari
Yes