JavaScript 1: using JavaScript in HTML

Magic electronic kitten 2022-01-26 20:22:23 阅读数:747

javascript using javascript html

C Language class is a mess


1. script Elements

1.1 The location of the label

1.2 Delay script (defer)

1.3 Asynchronous scripts (async)

2. Embedded code and external files

3. Document mode  

4. noscript Elements

1. script Elements

towards HTML Insert... In the page JavaScript Main methods , Is the use of <script> Elements .
There are two elements :1. Embedded directly in the page JavaScript Code     2. Include external JavaScript file .
In the use of <script> Element embedding JavaScript Code , Just for <script> Appoint type attribute .
then , Put it like this JavaScript Just put the code directly inside the element :


<script type="text/javascript">
     function sayHi(){

If not specified script attribute , The default value is text/javascript.
Included in <script> Inside the element JavaScript The code will be interpreted from top to bottom . In the interpreter, right <script> Before all the code inside the element is evaluated , The rest of the page will not be loaded or displayed by the browser .
In the use of <script> The embedded JavaScript In the process of code , When... Appears in the code "</script>" When the string , Due to the rules of parsing embedded code , The browser will think this is the end </script> label . You can escape characters “\” It's written in <\/script> To solve this problem .
If you want to pass <script> Element to contain the external JavaScript file , that src attribute It's necessary . The value of this property is an external JavaScript Link to file .


<script type="text/javascript" src="example.js"></script> 

External file example.js Will be loaded into the current page .

The external file only needs to contain the... That is usually placed at the beginning <script> And closed </script> The ones between JavaScript The code can be .

Analysis and embedded JavaScript code , On the outside JavaScript file ( Includes downloading the file ) when , The processing of the page will also be temporarily stopped .

If it's in XHTML In the document , You can also omit the... That ended in the previous example code </script> label . Outside of introduction JavaScript When you file , If not used .js Extension , Please make sure that the server can return the correct MIME type .

It means best to use

* with src Attribute <script> The element should not be in it <script> and </script> There's an extra... Between the labels JavaScript Code . If it contains embedded code , Will only be downloaded and executed external Script files , The embedded Your code will be ignored .

adopt <script> Elemental src Attributes can also contain... From an external domain JavaScript file . its src Property can be pointing to the current HTML A complete page in a domain other than the domain in which the page is located URL


<script type="text/javascript" src=""></script>

  therefore , The code located in the external domain will also be loaded and parsed .

1.1 The location of the label

In traditional practice ,scrpt The label is placed on Head tag . However, because browsers only encounter body Tag before loading the page 、 That is, wait until all JavaScript The code is downloaded 、 After parsing and executing , To start rendering the content of the page , There is a significant delay when the browser renders the page , The browser window will be blank during the delay . To avoid this problem , modern Web Applications generally put all JavaScript Place reference in <body> After the page content in the element .

1.2 Delay script (defer)

HTML 4.01 by <script> The label defines defer attribute .

The purpose of this property is to show that the script will not affect the construction of the page when it is executed . in other words , The script will be delayed until the entire page has been parsed before running . therefore , stay <script> Element defer attribute , amount to Tell the browser to download now , But delay execution  .

HTML5 The specification requires scripts to be executed in the order in which they appear , So the first delay script will execute before the second delay script , And these two scripts will precede DOMContentLoaded Event to perform . But in reality , Their execution sequence is not necessarily so rigorous , So it's best to include only one delay script .

defer Property only applies to external Script files . Therefore support HTML5 The realization of Ignore to The embedded Script settings defer attribute .

Putting the delay script at the bottom of the page is the best choice . 

XHTML In the document , To put defer Property is set to defer="defer".

1.3 Asynchronous scripts (async)

TML5 by <script> The element defines async attribute .

async The same applies only to external script files , And tell the browser to download the file immediately . But the mark is async Script for There is no guarantee that they will be executed in the order specified . It is important to ensure that scripts do not depend on each other .

Appoint async The purpose of the attribute is Don't let the page wait for two scripts to download and execute , To load the rest of the page asynchronously . So , Asynchronous scripts are recommended Do not modify... During loading DOM.

The asynchronous script will be on the page load Before the event , But it could be in DOMContentLoaded Before or after the event triggers .

2. Embedded code and external files

stay HTML Embedded in JavaScript There's no problem with the code , But it is generally believed that the best way is to use external files to contain as much as possible JavaScript Code . The question has the following advantages .

  1. Maintainability : Can be without touching HTML Maintain files without marking
  2. Caching : The file only needs to be downloaded once , It can speed up the loading of web pages .
  3. Adapt to the future

3. Document mode  

The first two document modes are Hybrid mode and The standard model , Later, it was proposed that Quasi standard model , There is almost no difference between standard mode and quasi standard mode . So when someone mentioned “ The standard model ” when , It could be any of them .

4. noscript Elements

When the browser doesn't support JavaScript when ,<noscript> The element was born .

* * . *
. ∧_∧ ∩ * *
* * ( ・∀・)/ .
. ⊂ ノ* *
* * (つ ノ .*

Come on

This element can contain information that can appear in the document <body> In addition to <script> Anything outside the element HTML Element . Included in <noscript> The contents of the element will only be displayed if :

  1. The browser doesn't support scripts
  2. Browsers support scripts , But the script is disabled .
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
<p> This page requires browser support ( Enable )JavaScript.

This page will display a message to the user if the script is invalid . In a browser with scripting enabled , Users will never see it .

Reference material :《JavaScript Advanced programming ( The third edition )》[ beautiful ] Nicholas C.Zakas Writing Li SONGFENG Cao Li translate

copyright:author[Magic electronic kitten],Please bring the original link to reprint, thank you.