Using JavaScript in HTML

The <script> tag

In HTML5, script has the following attributes: async, defer, charset, src, type,

async (optional):

Keywords: asynchronous script, external file, immediate download;

When the tag contains this attribute, the script (external file) will be downloaded immediately. It is only valid for external script files. Other operations on the page can be performed while downloading. Parsing and execution will be stopped after downloading is completed, and parsing will continue after execution, but the execution order cannot be guaranteed.

<script src="js/index2.js" async="async"></script>

defer (optional):

Keywords: Delayed script, external file, delayed loading;

When the tag contains this attribute, the script can wait until the page is completely parsed or displayed before execution. It is only valid for external files. If there are two scripts with defer at the same time, the former will be executed before the latter due to the delay.

<script src="js/index1.js" defer="defer"></script>

charset (optional):

Keywords: character set

Most browsers already ignore its value, so it is rarely used.

src (optional):

Keywords: external reference

Indicates the address of the external file that needs to be referenced.

type (optional):

Keywords: MIME (content type of scripting language)

To ensure maximum browser compatibility, the type attribute value is still mainly text/javascript. If this attribute is not written, its default value is still text/javascript.

Note: When referencing external files, do not add other JS code in the tag. When parsing, the browser will only download the external script file referenced by src, and the code embedded in the table will be ignored.

Position of the <script> tag

Usually, we put references to tags with external files (including CSS files, JavaScript files) in the same location, usually in the <head> tag.

However, once multiple JavaScript external files are encountered during the parsing process, the page cannot be fully displayed until all external files are loaded, so we usually put it at the bottom of the <body> tag, as shown below:

It was mentioned above that <script> has the defer attribute, but as mentioned in HTML5, HTML5 will ignore the defer attribute set for embedded scripts. Currently, only IE4~IE7 still support the defer attribute. IE8 and later will fully follow the HTML5 standard, so putting <script> at the bottom of the <body> tag is still the best choice.

Advantages of Referencing External Files

Easy to maintain: Putting all JavaScript files together not only avoids touching the HTML code, but also makes it easier for developers to write and maintain code.
Speed up browsing: If multiple HTML pages reference the same JavaScript external file, the file will only be loaded once (cached), which means that the page loading speed can be accelerated.
Security: When referencing external files, if the user views the HTML code, they will not see the JavaScript code, which is more secure than writing it in tags.

The <noscript> tag

The literal meaning is NO-script, no script, that is, when the browser does not support JavaScript, the content in the <noscript> tag will be displayed.

Your browser does not support script;
The browser supports scripts, but JavaScript is disabled;

If any of the above two conditions are met, the content within the <noscript> tag will be displayed.

The page above gives users a message that will only be displayed when the browser does not support or disables JavaScript. Otherwise, the user will never see it and it will not affect the display of other elements on the page.

Summarize

The above is the example code of using JavaScript in HTML that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Will the most successful companies in the future be technology companies or design companies?

>>: Practice of implementing user login through front-end and back-end interaction of Node.js