Home>Web design tutorial>HTML tutorial

Use JavaScript instance code in HTML

Author：Eve Cole Update Time：2025-02-04 22:00:02
<script> tag

Script in HTML5 mainly has the following attributes: Async, DEFER, Charset, SRC, Type,

  • Async (optional):

Keywords: asynchronous script, external file, download immediately;

When the label contains this attribute, download the script (external file) immediately, only the external script file is effective, the download can be performed at the same time as the download, the analysis and execution of the execution after the download is completed. Executive order.

 <script SRC = JS/Index2.js Async = Async> </Script>
  • DEFER (optional):

Keywords: delay script, external files, delay loading;

When the label contains this attribute, the script can wait until the page is completely parsed or displayed after executing. It is only valid for external files. If there are two scripts with Defer at the same time, due to delay, the former will be limited to the latter in the latter in the latter implement.

 <script SRC = JS/Index1.js DEFER = DEFER> </Script>
  • charset (optional):

Keywords: character set

Most browsers have ignored its value, so few people use it.

  • SRC (optional):

Keywords: external reference

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

  • Type (optional):

Keywords: MIME (content type of script language)

In order to ensure the maximum browser compatibility, the attribute values ​​of Type are still Text/JavaScript. If this attribute is not written, its default value is still Text/JavaScript.

Note: Do not add other JS codes to the outer file in the label. When parsing, the browser will only download the external script file referenced by SRC. The code embedded in the table will be ignored.

<script> label position

Usually, we will put the labels with external files (including CSS files, JavaScript files) in the same position, generally in the <head> tags.

However, once the analysis process is encountered in multiple JavaScript external files, it is necessary to wait until all the external files are loaded before the page can be completely displayed, so we usually put it in the bottom of the <body> tag, as shown below:

As mentioned above, the <script> has the definition of Defer, but because it is mentioned in HTML5, HTML5 will ignore the defer attribute set on the embedded script. At present, only IE4 ~ IE7 also supports the Defer attribute. IE8 will follow HTML5 after the IE8. Standards, so the bottom of the <Script> in the <body> label is still the best choice.

Quote the advantages of external files

  • Failure to maintain: Putting all the files of all JavaScrips together can not only not touch the HTML code, but also help developers to write and maintain code.
  • Accelerated browsing: If there are multiple HTML pages, the same JavaScript external file is referenced, and this file will only load (cache) once, which means that the loading speed of the page can be accelerated.
  • Security: Quote from external files. If the user views the HTML code, the code of JavaScript will not be seen, which is more secure than written in the label.

<noscript> label

Literal meaning, no-script, without script, that is, when the browser does not support JavaScript, the content of the <noScript> tag will be displayed.

  • The browser does not support the script;
  • Browser support script, but JavaScript is disabled;

The above two are in line with any of the contents of the <noscript> tag.

The page above, gives users a message. When the browser does not support or disables JavaScript will be displayed, otherwise users will never see and will not affect the display of other elements of the page.

Summarize

The above is the use of JavaScript instance code in HTML. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!

Related Articles