Summary of using JS methods in HTML

This time I will bring you a summary of the methods of using JS in HTML. What are the precautions for using JS in HTML? Here are practical cases, let’s take a look.

Preface

JavaScript is the browser’s built-in scripting language. When a JavaScript script is embedded in a web page and the browser loads the web page, it will execute the script to operate the browser and achieve various dynamic effects

Methods for embedding JavaScript code into web pages

1,

<script><code>Element directly embeds code&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt; function sayHello() { alert(&amp;quot;hello!&amp;quot;); } &amp;lt;/script&amp;gt;&amp;lt;/h3&amp;gt;2, &amp;lt;h3 id=&amp;quot;script-code-Element-loads-external-script-pre-script-nbsp-type-text-javascript-nbsp-src-example-js-script&amp;quot;&amp;gt;&amp;lt;script&amp;gt;&amp;lt;code&amp;gt;Element loads external script&amp;lt;pre class=&amp;quot;brush:php;toolbar:false&amp;quot;&amp;gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;example.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/h3&amp;gt; &amp;lt;h2 id=&amp;quot;script-code-Tag-relatedAttribute-a-href-http-www-php-cn-wiki-html-target-blank-script&amp;quot;&amp;gt;&amp;lt;script&amp;gt; &amp;lt;code&amp;gt;Tag relatedAttribute&amp;lt;a href=&amp;quot;http://www.php.cn/wiki/169.html&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/h2&amp;gt;type attribute&amp;lt;h3 style=&amp;quot;text-align: left;&amp;quot;&amp;gt;&amp;lt;/h3&amp;gt; &amp;lt;ul class=&amp;quot; list-paddingleft-2&amp;quot;&amp;gt; &amp;lt;li&amp;gt;##&amp;lt;script&amp;gt;&amp;lt;p style=&amp;quot;text-align: left;&amp;quot;&amp;gt;The label defaults to JavaScript code, embedded javascript When scripting, the type attribute can be omitted&amp;lt;code&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;/li&amp;gt;If the value of the type attribute is not recognized by the browser, the code will not be executed, so it can be used in&amp;lt;li&amp;gt;&amp;lt;script&amp;gt;## To embed any text content in the # tag, just add a type attribute that the browser does not recognize. The browser will not execute or display its content, but the &amp;lt;p style=&amp;quot;text-align: left;&amp;quot;&amp;gt;&amp;lt;script&amp;gt;&amp;lt;code&amp;gt; node still exists. In the DOM, you can use the text attribute of the &amp;lt;script&amp;gt;&amp;lt;code&amp;gt; node to read its content &amp;lt;code&amp;gt;defer attribute&amp;lt;/script&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;pre class=&amp;quot;brush:php;toolbar:false&amp;quot;&amp;gt;&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt; &lt;h3 id=&quot;The-running-process-of-the-defer-attribute&quot;&gt; The running process of the defer attribute: &lt;/h3&gt; &lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/p&gt;The browser starts to parse the HTML web page&lt;ol class=&quot; list-paddingleft-2&quot;&gt; &lt;li&gt; &lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt;During the parsing process, # with the defer attribute is found ##&lt;script&gt;&lt;/script&gt; &lt;/li&gt;Element&lt;li&gt; &lt;p style=&quot;text-align: left;&quot;&gt;&lt;code&gt;</code>The browser continues to parse the HTML web page and downloads in parallel </p> <script></script> The external script loaded by the element

The browser has completed parsing the HTML web page, and now goes back to execute the downloaded script

Note:

Load resources asynchronously

• Execute scripts in sequence

• External scripts loaded using defer do not You should use the

  document
.write method

• async attribute

  <script></script>
  <script></script>

async attribute running process:

The browser starts to parse the HTML web page

1. During the parsing process, the

   <script></script>
tag with the async attribute
2. # is found

   ##The browser continues to parse the HTML web page and downloads the external script in the <script></script>

   tag in parallel

3. Script download completed , the browser pauses parsing the HTML web page and starts executing the downloaded script

4. After the script is executed, the browser resumes parsing the HTML web page

5. Note:

Asynchronous loading of resources

• will not execute JS in order. Whoever downloads it first will be executed first.

• External scripts loaded using async should not use the document.write method

• Async and defer attribute induction

can solve the "blocking effect"

• all load resources asynchronously, but the order of execution is different

• If the scripts If there is no dependency, use the async attribute. If there is a dependency between scripts, use the defer attribute

• Dynamicly generate script

  ['a.js', 'b.js'].forEach(function(src) {
      var script = document.createElement('script');
      script.src = src;
      script.async = false;
      document.head.appendChild(script);
  });

No Will block page rendering

• Async is set to false to ensure that b.js is executed after a.js

• is loaded after this code The script file will wait until b.ja is executed before executing it

• Summary of relevant knowledge points

included in

<script>The JavaScript code inside the tag will be parsed from top to next<ol class=" list-paddingleft-2"><li><p style="text-align: left;">No matter which way the code is embedded, as long as the defer and async attributes do not exist, the browser will process the <code><Script> tags in the order they appear on the page. Analysis<li><p style="text-align: left;">Advantages of loading external scripts: maintainability, cacheability, adaptability to the future<li><p style="text-align: left;"><code><script> Reasons for placing it at the bottom: 1. To avoid the "blocking effect". 2. Avoid calling <a href="http://www.php.cn/code/6401.html" target="_blank">DOM node before the DOM structure is generated, resulting in an error <p> I believe you have mastered the method after reading the case in this article, please pay attention for more exciting information Other related articles on php Chinese website! <p>Recommended reading:<p><a href="http://www.php.cn/js-tutorial-398251.html" target="_blank">How to deal with MySQL database access denial<br/><p><a href="http://www.php.cn/js-tutorial-398247.html" target="_blank">How to implement hexagonal button special effects<br/></script>

The above is the detailed content of Summary of using JS methods in HTML. For more information, please follow other related articles on the PHP Chinese website!