What is the difference between loading JavaScript files in HTML using <script type=text/javascript>
and <script type=module>
?
One script is one module. As simple as that. Modules can load each other and use special directives export and import to interchange functionality, call functions of one module from another one: export keyword labels variables and functions that should be accessible from outside the current module.
scripttype. Specifies the type of the script. Some common values: A JavaScript MIME type like: application/javascript (default) or application/ecmascript.
Feature: JavaScript modules: <script type=module>Each module explicitly identifies declarations it uses that need to be provided by other modules and which of its declarations are available for use by other modules. <script type=module> allows loading of JavaScript modules inside web pages.
A JavaScript module is a file that allows you to export its code. This allows other JavaScript files to import and use the exported code as their dependencies.
The HTML5 specification discourages the use of type=text/javascript
:
From https://www.w3.org/TR/html5/semantics-scripting.html#element-attrdef-script-type:
Omitting the (type) attribute, or setting it to a JavaScript MIME type, means that the script is a classic script, to be interpreted according to the JavaScript Script top-level production. Classic scripts are affected by the charset, async, and defer attributes. Authors should omit the attribute, instead of redundantly giving a JavaScript MIME type.
Setting the attribute to an ASCII case-insensitive match for the string "module" means that the script is a module script, to be interpreted according to the JavaScript Module top-level production. Module scripts are not affected by the charset and defer attributes.
(emphasis by me)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With