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

Summary of methods for writing judgment statements in MySQL

Using JavaScript in HTML

Summary of methods for writing judgment statements in MySQL

Solution for Baidu site search not supporting https (tested)

How to solve the 2002 error when installing MySQL database on Alibaba Cloud

Example of how to mosaic an image using js

How to configure nginx to limit the access frequency of the same IP

Example of using @media responsive CSS to adapt to various screens

Vue.js style layout Flutter business development common skills

How to install vim editor in Linux (Ubuntu 18.04)

Solution to 1045 error in mysql database

MySQL reports an error: Can't find file: './mysql/plugin.frm' solution

Recommend

Implementation of mysql configuration SSL certificate login

Detailed explanation of MySQL view management view example [add, delete, modify and query operations]

Implementation of TCPWrappers access control in Centos

MySQL learning record: bloody incident caused by KEY partition

How to upload and download files between Linux server and Windows system

JavaScript canvas to achieve mirror image effect

js simulation to achieve the effect of enlarging the picture on the Jingdong details page

Example of using CSS3 to customize the style of input multiple-select box

50 Beautiful FLASH Website Design Examples

Vue globally introduces scss (mixin)

Application of anchor points in HTML

Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

Solution to the problem that Docker container cannot access Jupyter

mysql 5.7.23 winx64 decompression version installation tutorial

How to build sonarqube using docker