Summary of methods for embedding JS in HTML documents

This time I will bring you a summary of the HTML document methods of embedding JS, and what are the precautions for embedding JS in HTML documents. The following is a practical case, let’s take a look.

Embedding JavaScript in HTML

There are 4 ways to embed client-side JavaScript code in HTML documents:

1 .Inline, placed between the <script> and </script> tags (less);

2. Placed in an external file specified by the src attribute of the <script> tag (more) ;</p> <p style="text-align: left;">3. Place it in a self-<a href="http://www.php.cn/code/8922.html" target="_blank">HTML event handler</a>, which is specified by an HTML attribute value such as onclick or <a href="http://www.php.cn/wiki/1457.html" target="_blank">onmouseover</a> (rarely);</p> <p style="text-align: left;">4. Put it in a URL. This URL uses the special protocol "javascript" protocol (rarely); </p> <p style="text-align: left;"><span style="color: #0000ff">0——Attachment: Script type</span></p> <p style="text-align: left;">JavaScript is the original scripting language of the Web. By default, the <script> element contains or references JavaScript code. If you want to use a non-standard scripting language, such as VBScript, you must use the type attribute to specify the MIME type of the script, for example: </p> <pre class="brush:php;toolbar:false">&lt;script type=&quot;text/vbscript&quot;&gt;   ... ...  &lt;/script&gt;</pre> <p style="text-align: left;"><span style="color: #ff0000">The default value of the type attribute is "text/javascript". </span></p> <p style="text-align: left;"><span style="color: #0000ff">1——Inline <script> element</span></p> <p style="text-align: left;">For example: </p> <pre class="brush:php;toolbar:false"> &lt;script&gt;   function displayTime(){   ... ...   }   window.onload = displayTime;  &lt;/script&gt;</pre> <p style="text-align: left;"><span style="color: #0000ff">2——Src attribute uses external The script</span></p> <p style="text-align: left;"><script> tag in the file supports the src attribute, which specifies the URL of the file containing JavaScript code. Its usage is as follows: </p> <p style="text-align: left;"><span style="text-decoration:underline;">Copy code</span> The code is as follows:</p> <p style="text-align: left;"><script src="../../scripts/util.js">< /script></p> <p style="text-align: left;">When using the src attribute, anything between the <script></script> tags will be ignored.

When you include a script in a page using the src attribute, you give the script full control over the Web page.

3——Event handler in HTML

When the HTML file where the script is located is loaded into the browser, the JavaScript code in this script will only be executed once . JavaScript code can register event handlers by assigning functions to properties of the Element object. This Element object represents an HTML element in the document.

For example:

Copy code The code is as follows:

The attributes of the event handler defined in HTML can contain any JavaScript statements, separated by commas. These statements form the body of a function, which then becomes the value of the corresponding event handler property.

4 - JavaScript in the URL

Following the URL with a javascript: protocol qualifier is another way to embed JavaScript code into the client. This special protocol type specifies that the URL content is an arbitrary string, which is JavaScript code that will be run by the JavaScript interpreter. It is treated as a separate line of code, which means statements must be separated by semicolons and comments must be replaced by /**/ comments. The resource recognized by javascript:URL is the return value of the executed code converted into a string. If the code returns undefined, then the resource has no content.

javascript: The URL can be anywhere a regular URL can be used: such as the href attribute of the tag, the action attribute of

, or even window.open () method parameters.

The JavaScript URL in the hyperlink can be like this:

<a href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
What time is it? 
</a>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Vue to implement tree view data

How to use the V-Distpicker component

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