script.../script inline, imported, data islands
I. inline scripts
inline script = script statements added in page between <script> and <⁄script>
- type attribute is required only if the language of the script is other than text/javascript (it gives the language type of the script)
- examples:
1.
<script>
alert("This is an inline JavaScript");
<⁄script>
2. (* VBScript deprecated in IE11)
<script type="text/vbscript">
Sub printMessage()
document.write("This is an inline VBScript.")
End Sub
Call printMessage()
<⁄script>
II. imported ⁄ external scripts
imported script = an external script file, containing scripting statements, linked to the current page through src attribute
- src attribute is required (it gives the URL of the external script file to be linked to the page)
- optional attributes: async, defer, charset, type
- observation: if charset attribute is specified, type attribute should not be present
- observation: if you want the script to be executed asynchronously, add the defer attribute too for fallback reasons
- examples:
1.
<script src="file.js"> <⁄script>
"file.js" content: alert("This is an external script! It has been imported into the current page!");
2.
<script src="file.js" async> <⁄script>
"file.js" content: alert("This is an external script! It has been imported into the current page! It won't block the parsing of the page, if the browser supports async attribute because it is executed asynchronously");
3.
<script src="file.js" defer> <⁄script>
"file.js" content: alert("This is an external script! It has been imported into the current page! It will wait for the parsing of the page to end, then it will be executed");
4.
<script src="file.js" async defer> <⁄script>
"file.js" content: alert("This is an external script! It has been imported into the current page! It has both the defer and async attributes specified. If the browser supports the async attribute, then the script will be executed synchronously, otherwise it will fall back to defer, waiting for the parsing to end and only then will be executed.");
5.
<script src="file.js" charset="UTF-8" > <⁄script>
"file.js" content: alert("This is an external script! It has been imported into the current page! It it UTF-8 encoded");
6.
<script src="file.vbs" type="text/vbscript" > <⁄script>
"file.vbs" content: Sub printMessage() document.write("This is a VBScript.") End Sub Call printMessage()
III. Data blocks ⁄ data islands
data blocks = data (not scripts) embedded inline, whose format is given by the value of the type attribute
- type attribute is required (it gives the format type of the stored data)
- a few MIME types that might be used as format for data blocks: "text/plain", "text/xml", "application/xml", "application/octet-stream"
- src attribute must be absent
- examples:
1.
<script type="text/plain">
// plain text data block stored
This plain text represents a data island or a data block.
It won't be displayed in browser because of the script tag
The browser won't interpret it as a script, thus won't execute it because of the specified type="text/plain"
<⁄script>
2.
<script type="application/xml">
// xml data block stored
<tag>
<subject> xml data islands </subject>
<example> xml stored in html </example>
</tag>
</script>
Video demonstration script element: inline scripts, external scripts, data islands
HTML5 inline scripts, external scripts, data islands, Tutorial
| min | video details |
|---|---|
| 00:11 | The script element allows you to include: |
| 00:11 | - scripts: inline or external |
| 00:15 | - data islands (blocks) |
| 00:25 | Use the script element to include: |
| 00:25 | 1. inline scripts - src attribute required |
| 01:01 | 2. external scripts - src attribute required |
| 02:03 | 3. data islands (data blocks) - type attribute is required |
| 02:48 | note: data islands don't display in browser |