Using JavaScript in HTML

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

Recommend

How to solve the problem of not finding the password after decompressing the MySQL free installation version

1. Unzip mysql-8.0.21-winx64 2. Configure environ...

Detailed explanation of transaction isolation levels in MySql study notes

background When we talk about transactions, every...

Three ways to forward linux ssh port

ssh is one of the two command line tools I use mo...

Simple analysis of EffectList in React

Table of contents EffectList Collection EffectLis...

About nginx to implement jira reverse proxy

Summary: Configure nginx reverse proxy jira and i...

js converts a multidimensional array into a one-dimensional array and then reorders it

Table of contents Let's talk about flattening...

An article to help you learn more about JavaScript arrays

Table of contents 1. The role of array: 2. Defini...

Incomplete solution for using input type=text value=str

I encountered a very strange problem today. Look a...

HTML+CSS+JS to implement the Don't Step on the Whiteboard game

Table of contents Background 1. Thought Analysis ...

MySQL 5.7.21 winx64 installation and configuration method graphic tutorial

This article summarizes the notes for installing ...

Implementation code for saving images to MySQL database and displaying them on the front-end page

Table of contents 1. First, use pycharm to create...

Two ways to reset the root password of MySQL database using lnmp

The first method: Use Junge's one-click scrip...

Responsive Web Design Learning (2) — Can videos be made responsive?

Previous episode review: Yesterday we talked abou...

Realize map aggregation and scattering effects based on vue+openlayer

Table of contents Preface: Result: 1. Polymerizat...

MySQL latest version 8.0.17 decompression version installation tutorial

Personally, I think the decompressed version is e...