Example
Write "Hello JavaScript!" with JavaScript:
document.getElementById["demo"].innerHTML = "Hello JavaScript!";
Try it Yourself »
Definition and Usage
The tag is used to embed a client-side script [JavaScript].
The element either contains scripting
statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Tips and Notes
Tip: Also look at the element for users that have disabled scripts in their browser, or have a browser that doesn't support client-side scripting.
Tip: If you want to learn more about JavaScript, visit our JavaScript Tutorial.
Browser Support
| Yes | Yes | Yes | Yes | Yes |
Attributes
| async | async | Specifies that the script is downloaded in parallel to parsing the page, and executed as soon as it is available [before parsing completes] [only for external scripts] |
| crossorigin | anonymous use-credentials | Sets the mode of the request to an HTTP CORS Request |
| defer | defer | Specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing [only for external scripts] |
| integrity | filehash | Allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated |
| nomodule | True False | Specifies that the script should not be executed in browsers supporting ES2015 modules |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url | Specifies which referrer information to send when fetching a script |
| src | URL | Specifies the URL of an external script file |
| type | scripttype | Specifies the media type of the script |
Differences Between HTML and XHTML
In XHTML, the content inside scripts is declared as #PCDATA [instead of CDATA], which means that entities will be parsed.
This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:
// var i = 10;
if [i < 5] {
// some code
}
//]]>
Global Attributes
The tag also supports the Global Attributes in HTML.
Related Pages
HTML tutorial: HTML Scripts
HTML DOM reference: Script Object
JavaScript Tutorial: Learn JavaScript
Default CSS Settings
Most browsers will display the element with the following default values:
The HTML Document
An HTML document is made up of HTML elements, HTML element attributes, comments, special characters, and doctype. If you like to add presentational features to an HTML document you can attach css to an HTML document, to add dynamic user experience [e.g. popup, alert message, animations etc.] to an HTML document you can add JavaScipt to your HTML document.
If javascript is disabled in the browser property, even though an external script is attached or a script is written within ... tags in an HTML document, it becomes inactive.
Certain JavaScripts do not work with all the browsers and sometimes a script works on and above [or vice a versa] a particular version of a web browser.
The script Tag
The script is an HTML element. Html script element is used to enclose client side scripts like JavaScript within an HTML document.
Syntax
JavaScript statements.......
There are four types of attributes in script element:
1. language
The language attribute is used to specify the scripting language and it's version for the enclosed code. In the following example, JavaScript version is 1.2. If a specific browser does not support the said JavaScript version, the code is ignored. If you do not specify a language attribute, the default behavior depends on the browser version. The language attribute is deprecated in HTML 4.01.
Example
JavaScript statements.......
2. src
This attribute specifies the location of an external script. This attribute is useful for sharing functions among many different pages. Note that external JavaScript files contain only JavaScript statements and files must have the extension .js.
Example
JavaScript statements.......
3. defer
If you set defer attribute, the browser delays the execution of the script or it changes the order of the execution of the script. This can improve the performance by delaying execution of scripts until the content of body is read and displayed by the browser.
4. type
This attribute specifies the scripting language. The scripting language is specified as a content type [e.g., "text/javascript" ]. The attribute is supported by all modern browser.
Example
JavaScript statements.......
The noscript tag
If any browser does not support the JavaScript code the alternate content placed within noscript tag is being executed.
Example
... code ....
Javascript in HTML document
There are two general areas in HTML document where JavaScript can be placed. First is between ...... section, another is specific location in ...... section. If you want to display a message 'Good Morning' [through the JavaScript alert command] at the time of page loading then you must place the script at the ...... section. In the following examples you will see the different location of ..... tags in a HTML document.
Script in the Head
Script in head section
JavaScript statements.......
Script in the Body
Script in the Body
JavaScript statements.......
Scripts in the Head and Body
Script in head and body section
JavaScript statements.......
JavaScript statements.......
Two Scripts in the Body
Two Scripts in the Body
JavaScript statements.......
Note: Optionally, if your script is not required to be executed before the content of the body is displayed, and your script takes longer time to load objects, you can place your script at the end of the body element.
Double or Single Quotes in JavaScript
There is no preferred method, you can use either. If you use one form of the quote [either single or double] in the string, you may use other as the literal.
Previous: JavaScript and ECMA Specification
Next:
JavaScript Syntax and comments
JavaScript: Tips of the Day
Object.freeze
const box = { p: 10, q: 20 };
Object.freeze[box];
const shape = box;
shape.p = 100;
console.log[shape];
Object.freeze makes it impossible to add, remove, or modify properties of an object [unless the property's value is another object].
When we create the variable shape and set it equal to
the frozen object box, shape also refers to a frozen object. You can check whether an object is frozen by using Object.isFrozen. In this case, Object.isFrozen[shape] returns true, since the variable shape has a reference to a frozen object.
Since shape is frozen, and since the value of p is not an object, we cannot modify the property p. p is still equal to 10, and { p: 10, q: 20 } gets logged.
Ref: //bit.ly/3jFRBje