JavaScript에 대한 자세한 소개: 세 가지 소개 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript에 대한 자세한 소개: 세 가지 소개 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 03, 2022 pm 04:39 PM

javascript

이 기사에서는 javascript에 대한 관련 지식을 제공합니다. JavaScript의 세 가지 도입 방법인 인라인 스타일, 외부 스타일 및 사용 방법을 함께 살펴보는 것이 좋습니다. 모두에게.

JavaScript에 대한 자세한 소개: 세 가지 소개 방법

[관련 추천 : javascript 동영상 튜토리얼, 웹 프론트엔드]

1. 인라인 도입 방법

인라인 작성, 각 태그에 별도로 설정

오픈 태그 내 이벤트를 통해 속성 참조 js

(1)의 기능은 onclick [on + event type]

과 같이 태그의 이벤트 속성(on으로 시작하는 속성)에 작성됩니다. 권장사항: html에는 큰따옴표를 사용하고 js에는 작은따옴표를 사용하세요.

예:

<input>

참고: 인라인 소개, JS에는 가중치 증가 개념이 없으므로 일반적으로 사용되지 않습니다. [기본적으로 사용되지 않음]

예는 다음과 같습니다.

<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="JavaScript에 대한 자세한 소개: 세 가지 소개 방법" ></img>
    </div>
  <!--js内联写法01结束-->
  </body>
</html>

출력 결과:

JavaScript에 대한 자세한 소개: 세 가지 소개 방법

2. 인라인 도입 방법(내부 소개)

스크립트 태그에 작성

내부 참고:

script 태그를 사용하여 스크립트 태그에 js 코드를 작성하면 페이지 아무 곳에나 작성 가능
script 태그 일반적으로 본문 끝이나 본문 뒤에 사용됩니다.

(1) 헤더는 브라우저 렌더링에 영향을 줄 수 있습니다.

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

참고: 일반적으로 혼자서 연습문제를 작성할 때, 게으르고 싶고 js 파일을 설정하고 싶지 않을 때 사용됩니다. [

연습 사용]보통 혼자서 프로젝트를 할 때, 하단은 로딩 순서에 영향을 주지 않으며 CSS 파일과 결합될 수 있습니다. 구별하기 위해 다른 곳에 배치하면 onload를 사용하여 마무리하는 것이 가장 좋습니다. 예는 다음과 같습니다.

<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="JavaScript에 대한 자세한 소개: 세 가지 소개 방법" ></img>
  </div>
  <!--js内联写法02结束-->
  </body>
  <script>
    //js代码
    //找到XX元素，一般给元素加id 
    yuansuojb=document.getElementById(&#39;yuansu&#39;);    
    //给xx元素加事件
    yuansuojb.onclick=function(){
      //代码段
      alert(1);
    }
    //触发事件
  </script>
</html>

출력 결과:

3. 외부 도입 방법외부 파일을 도입하려면 스크립트 태그에 src를 사용하세요.

단계:

Write 독립적인 js 파일

(2) HTML 페이지 코드 구조를 사용하여 HTML 페이지 외부의 여러 JS 코드 조각 분리 , 파일 재사용에 편리하고 아름답습니다
```
<script></script>
```

자주 사용되는

]

src를 사용하세요 href 대신 예는 다음과 같습니다.

js 코드를 .js 파일에 작성하고 HTML에서 참조합니다. .html 파일의 내용은 다음과 같습니다.

<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="JavaScript에 대한 자세한 소개: 세 가지 소개 방법" ></img>
  </div>
  </body>
  <script src=&#39;js/index.js&#39;></script>
</html>

.js 파일 내용은 다음과 같습니다:

//js代码

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

출력 결과:

[관련 권장 사항:

javascript 비디오 튜토리얼

web front-end JavaScript에 대한 자세한 소개: 세 가지 소개 방법 ]