|
|
The Definition and UsageThe The Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. Tips and NotesTip: Also look at the <noscript> 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
Attributes
|
Example:
HTML
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Example:
HTML
<!DOCTYPE html>
<html>
<style>
script {
display: none;
}
</style>
<body>
<h1>The script element</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
Example:
HTML
<script type="text/javascript">
//<![CDATA[
let i = 10;
if (i < 5) {
// some code
}
//]]>
</script>
The async attribute is a boolean attribute.
If the async attribute is set, the script is downloaded in parallel to parsing the page, and executed as soon as it is available. The parsing of the page is interrupted once the script is downloaded completely, and then the script is executed, before the parsing of the rest of the page continues.
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Note: There are several ways an external script can be executed:
async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes) defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsingasync or defer is present: The script is downloaded and executed immediately, blocking parsing until the script is completedThe numbers in the table specify the first browser version that fully supports the attribute.
<script async>
Example:
HTML
<p id="p1">Hello World!</p>
<script src="demo_async.js" async></script>
The crossorigin attribute sets the mode of the request to an HTTP CORS Request.
Web pages often make requests to load resources on other servers. Here is where CORS comes in.
A cross-origin request is a request for a resource (e.g. style sheets, iframes, images, fonts, or scripts) from another domain.
CORS is used to manage cross-origin requests.
CORS stands for Cross-Origin Resource Sharing, and is a mechanism that allows resources on a web page to be requested from another domain outside their own domain. It defines a way of how a browser and server can interact to determine whether it is safe to allow the cross-origin request. CORS allows servers to specify who can access the assets on the server, among many other things.
Tip: The opposite of cross-origin requests is same-origin requests. This means that a web page can only interact with other documents that are also on the same server. This policy enforces that documents that interact with each other must have the same origin (domain).
Tip: Also look at the integrity attribute.
The numbers in the table specify the first browser version that fully supports the attribute.
<script crossorigin="anonymous|use-credentials">
| Value | Description |
|---|---|
| anonymous use-credentials |
Specifies the mode of the CORS request:
|
Here is a link to a .js file on another server. Here we use both the integrity and crossorigin attributes.
<script
type="text/javascript"
src="my_script.js"
crossorigin="anonymous"
></script>
Here is a link to a .js file on another server. Here we use both the integrity and crossorigin attributes.
Example:
HTML
<script
type="text/javascript"
src="my_script.js"
crossorigin="anonymous"
></script>
Here is a link to a .js file on another server. Here we use both the integrity and crossorigin attributes.
Example:
HTML
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="use-credentials">
</script>
The defer attribute is a boolean attribute.
If the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Note: There are several ways an external script can be executed:
async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes) defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsingasync or defer is present: The script is downloaded and executed immediately, blocking parsing until the script is completedThe numbers in the table specify the first browser version that fully supports the attribute.
<script defer>
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The script defer attribute</h1>
<script src="https://www.w3schools.com/tags/demo_defer.js" defer></script>
<p>The script above requests information from the paragraph below. Normally, this is not possible, because the script is executed before the paragraph exists.</p>
<p id="p1">Hello World!</p>
<p>However, the defer attribute specifies that the script should be executed later. This way the script can request information from the paragraph.</p>
</body>
</html>
The integrity attribute allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated.
Subresource Integrity (SRI) is a W3C specification that allows web developers to ensure that resources hosted on third-party servers have not been altered. Use of SRI is recommended!
When using SRI, the webpage holds the hash and the server holds the file (the .js file in this case). The browser downloads the file, then checks it, to make sure that it is a match with the hash in the integrity attribute. If it matches, the file is used, and if not, the file is blocked.
You can use an online SRI hash generator to generate integrity hashes: SRI Hash Generator
The numbers in the table specify the first browser version that fully supports the attribute.
<script integrity="filehash">
| Value | Description |
|---|---|
| filehash | The file hashing value of the external script file |
Example:
HTML
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
The noModule property of the HTMLScriptElement interface is a boolean value that indicates whether the script should be executed in browsers that support ES modules. Practically, this can be used to serve fallback scripts to older browsers that do not support JavaScript modules.
It reflects the nomodule attribute of the <script> element.
| nomodule | True False |
Specifies that the script should not be executed in browsers supporting ES2015 modules |
Example:
HTML
<script id="el" nomodule>
// If the browser supports JavaScript modules, the following script will not be executed.
console.log("The browser does not support JavaScript modules");
</script>
<script>
const el = document.getElementById("el");
console.log(el.noModule); // Output: true
</script>
The referrerpolicy attribute specifies which referrer information to send when fetching a script.
The numbers in the table specify the first browser version that fully supports the attribute.
<script referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url">
| Value | Description |
|---|---|
| no-referrer | No referrer information is sent |
| no-referrer-when-downgrade | Default. Sends the origin, path, and query string if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP is not ok) |
| origin | Sends the origin (scheme, host, and port) of the document |
| origin-when-cross-origin | Sends the origin of the document for cross-origin request. Sends the origin, path, and query string for same-origin request |
| same-origin | Sends a referrer for same-origin request. Sends no referrer for cross-origin request |
| strict-origin-when-cross-origin | Sends the origin if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, and HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP) |
| unsafe-url | Sends the origin, path, and query string (regardless of security). Use this value carefully! |
It sets the referrerpolicy for a script.
Example:
HTML
<script src="myscripts.js" referrerpolicy="origin"></script>
The Referer header will be omitted entirely. No referrer information is sent along with requests.
Example:
HTML
<script src="myscripts.js" referrerpolicy="no-referrer"></script>
The URL is sent as a referrer when the protocol security level stays the same (e.g.HTTP→HTTP, HTTPS→HTTPS), but isn't sent to a less secure destination (e.g. HTTPS→HTTP).
| no-referrer-when-downgrade | Default. Sends the origin, path, and query string if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP is not ok) |
Example:
HTML
<script src="myscripts.js" referrerpolicy="no-referrer-when-downgrade"></script>
Only send the origin of the document as the referrer in all cases. The document https://example.com/page.html will send the referrer https://example.com/.
| origin | Sends the origin (scheme, host, and port) of the document |
Example:
HTML
<script src="myscripts.js" referrerpolicy="origin"></script>
Send a full URL when performing a same-origin request, but only send the origin of the document for other cases.
| origin-when-cross-origin | Sends the origin of the document for cross-origin request. Sends the origin, path, and query string for same-origin request |
Example:
HTML
<script src="myscripts.js" referrerpolicy="origin-when-cross-origin"></script>
A referrer will be sent for same-site origins, but cross-origin requests will contain no referrer information.
| same-origin | Sends a referrer for same-origin request. Sends no referrer for cross-origin request |
Example:
HTML
<script src="myscripts.js" referrerpolicy="same-origin"></script>
JS Example
Example:
JS
const scriptElem = document.createElement("script");
scriptElem.src = "/";
scriptElem.referrerPolicy = "same-origin";
document.body.appendChild(scriptElem);
Only send the origin of the document as the referrer when the protocol security level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure destination (e.g. HTTPS→HTTP).
Example:
HTML
<script src="myscripts.js" referrerpolicy="strict-origin"></script>
This is the user agent's default behavior if no policy is specified. Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (e.g. HTTPS→HTTPS), and send no header to a less secure destination (e.g. HTTPS→HTTP).
| strict-origin-when-cross-origin | Sends the origin if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, and HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP) |
Example:
HTML
<script src="myscripts.js" referrerpolicy="strict-origin-when-cross-origin"></script>
Send a full URL when performing a same-origin or cross-origin request. This policy will leak origins and paths from TLS-protected resources to insecure origins. Carefully consider the impact of this setting.
| unsafe-url | Sends the origin, path, and query string (regardless of security). Use this value carefully! |
Example:
HTML
<script src="myscripts.js" referrerpolicy="unsafe-url"></script>
The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.
The src attribute specifies the URL of an external script file.
If you want to run the same JavaScript on several pages in a web site, you should create an external JavaScript file, instead of writing the same script over and over again. Save the script file with a .js extension, and then refer to it using the src attribute in the <script> tag.
Note: The external script file cannot contain the <script> tag.
Note: Point to the external script file exactly where you would have written the script.
<script src="URL">
| Value | Description |
|---|---|
| URL | The URL of the external script file.
Possible values:
|
It points to an external JavaScript file.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The script src attribute</h1>
<script src="demo_script_src.js">
</script>
</body>
</html>
The type attribute specifies the type of the script.
The type attribute identifies the content between the <script> and </script> tags.
<script type="scripttype">
| Value | Description |
|---|---|
| scripttype | Specifies the type of the script. Some common values:
Look at IANA Media Types for a complete list of standard media types. |
Example:
HTML
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
| html script |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 4 months ago |
Uploaded by: | Admin |
Views: | 176 |
Reffered: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script