Detailed introduction to JavaScript: three introduction methods-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed introduction to JavaScript: three introduction methods

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 03, 2022 pm 04:39 PM

javascript

This article brings you relevant knowledge about javascript, which introduces in detail the three introduction methods of JavaScript: inline, embedded style, external style and how to use them; let’s take a look at them together ,I hope everyone has to help.

Detailed introduction to JavaScript: three introduction methods

[Related recommendations: javascript video tutorial, web front-end】

1. Inside the industry The introduction method

is written in the line, and is set separately in each tag.

References the js function through the event attribute in the opening tag.

(1) is written in Among the event attributes of the tag (attributes starting with on), such as onclick [on event type]

Recommendation: use double quotes for html and single quotes for js

Example:

<input>

Note: Inline introduction, there is no concept of increasing weight in JS, so it is not commonly used [Basically not used]

##Example As follows:

<html>
  <title>js样式内联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js内联写法01开始-->
    <!--当鼠标点击图片时跳出弹窗显示1223-->
    <div class="img">
    单击事件：
      <img  src="/static/imghwm/default1.png"  data-src="images/001.jpg"  class="lazy"   onclick="alert(1223)" alt="Detailed introduction to JavaScript: three introduction methods" ></img>
    </div>
  <!--js内联写法01结束-->
  </body>
</html>

Output result:

Detailed introduction to JavaScript: three introduction methods

2. Inline import method (internal import)

Write in script tag

Internal reference: By writing js code in script tag, use

When we need to reference the script on the head, put it on the head, otherwise it is placed on the bottom, because placing on the head may affect the browser rendering.

<script>
    alert(&#39;Hello World!&#39;);
</script>

Note: Usually when you write exercises by yourself, you use it when you want to be lazy and don’t want to set up js files [

Practice use]Usually do it yourself The project is placed at the bottom, which does not affect the loading order and can be distinguished from CSS files, and does not affect browser rendering; if placed elsewhere, it is best to use onload to wrap it up with

The example is as follows:

<html>
  <title>js样式内联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js内联写法02开始-->
  <div class="img">
    单击事件：
      <img  src="/static/imghwm/default1.png"  data-src="images/002.jpg"  class="lazy"   id=&#39;yuansu&#39; alt="Detailed introduction to JavaScript: three introduction methods" ></img>
  </div>
  <!--js内联写法02结束-->
  </body>
  <script>
    //js代码
    //找到XX元素，一般给元素加id 
    yuansuojb=document.getElementById(&#39;yuansu&#39;);    
    //给xx元素加事件
    yuansuojb.onclick=function(){
      //代码段
      alert(1);
    }
    //触发事件
  </script>
</html>

Output result:

3. External introduction method

Use src in the script tag to introduce external files

Steps:

( 2) Use HTML page code structure to separate multiple pieces of JS code outside the HTML page, which is beautiful and convenient for file reuse

<script></script>

Note: Like inline styles, placing them at the bottom and head needs to be considered on a case-by-case basis [

Frequently used] Use src instead of href

The example is as follows:
Write the js code into the .js file, and reference the

.html file content in the HTML as follows:

<html>
  <title>js样式外联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <div class="img">
    外联写法--单击事件：
      <img  src="/static/imghwm/default1.png"  data-src="images/003.jpg"  class="lazy"   id=&#39;yuansu&#39; alt="Detailed introduction to JavaScript: three introduction methods" ></img>
  </div>
  </body>
  <script src=&#39;js/index.js&#39;></script>
</html>

.js file content is as follows:

//js代码

//找到XX元素，一般给元素加id 
yuansuojb=document.getElementById(&#39;yuansu&#39;);    
//给xx元素加事件
yuansuojb.onclick=function(){
  //代码段
  var str="hello world !!!";
  alert(str);
}

Output result:

Detailed introduction to JavaScript: three introduction methods [Related recommendations:

javascript video tutorial

, web front-end]

The above is the detailed content of Detailed introduction to JavaScript: three introduction methods. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn