Four ways to embed JavaScript in HTML documents

This article mainly introduces 4 methods of embedding client-side JavaScript code in HTML documents. Interested friends can refer to it, as follows:

Embedding JavaScript in HTML

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

1. Embed inline, placed between <script> and </ Between script> tags (less); <br></p> <p>2. Place it in an external file specified by the src attribute of the <script> tag (more); <br></p> <p>3 . Place it in an HTML event handler that specifies it by an HTML attribute value such as onclick or onmouseover (rarely); <br></p> <p>4. Place it in a URL that uses special Protocol "javascript" protocol (rarely); <br></p> <p><span style="color: #0000ff">0 - Attached: Script type </span></p> <p>JavaScript is the original scripting language of the Web, by default Below, 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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;script type=&quot;text/vbscript&quot;&gt; ... ... &lt;/script&gt;</pre><div class="contentsignin">Copy after login</div></div><p><span style="color: #ff0000">The default value of the type attribute is "text/javascript". </span></p><p><span style="color: #0000ff">1——Inline <script> element</span></p><p>For example: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;script&gt; function displayTime(){ ... ... } window.onload = displayTime; &lt;/script&gt;</pre><div class="contentsignin">Copy after login</div></div><p><span style="color: #0000ff">2——Src attribute uses external The script</span></p><p><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 class="codetitle"><span style="text-decoration:underline;">Copy code</span> The code is as follows:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">&lt;script src=&quot;../../scripts/util.js&quot;&gt;&lt;/script&gt;</pre><div class="contentsignin">Copy after login</div></div><p>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:

<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">

The attributes of the event handler defined in HTML can contain any JavaScript statements, each of which Separate with 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

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