홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

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

저자：Eve Cole 업데이트 시간：2022-08-05 09:45:24
이 기사에서는 JavaScript의 세 가지 도입 방법인 인라인 스타일, 임베디드 스타일, 외부 스타일 및 이를 사용하는 방법에 대한 자세한 소개를 포함하여 JavaScript에 대한 관련 지식을 제공합니다. 모두에게 도움이 되기를 바랍니다. .

1. 인라인 도입 방식을

라인에 작성하고, 각 태그를 별도로 설정합니다.

여는 태그의 이벤트 속성을 통해 js를 참조하는 기능(1)을

태그의 이벤트 속성(on으로 시작하는 속성)에 작성합니다

.

예: onclick [on+ event Type]

권장 사항: html에는 큰따옴표를 사용하고 js에는 작은따옴표를 사용합니다.

예:

<input type="button" value="Click me to open the world" onclick="alert('Hello World' )" />

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

예는 다음과 같습니다.

 <html>
  <title>JS 스타일 인라인 작성</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <본문>
  <!--JS 인라인 작성 방법은 01부터 시작됩니다-->
    <!--사진을 마우스로 클릭하면 1223이라는 팝업창이 뜹니다-->
    <div 클래스="img">
    클릭 이벤트:
      <img src="images/001.jpg" onclick="alert(1223)"></img>
    </div>
  <!--JS 인라인 작성 방법 01이 종료됩니다-->
  </body>
</html>

출력 결과:

+1.gif

2. 임베디드 도입 방식(내부 도입)

스크립트 태그에 작성됨

내부 참조: 스크립트 태그에 js 코드를 작성하여 사용

  • 스크립트 태그는 페이지의 어느 곳에나 쓸 수 있습니다.

  • 스크립트 태그는 일반적으로 본문 끝이나 본문 뒤에 사용됩니다.

(1) 어디서나 쓸 수 있습니다.

스크립트를 헤드에서 참조해야 하는 경우 헤드에 배치하고, 그렇지 않으면 맨 아래에 배치합니다. 헤드에 배치하면 브라우저 렌더링에 영향을 미칠 수 있기 때문입니다.

 <스크립트>
    Alert('안녕하세요!');
</script>

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

일반적으로 자신의 프로젝트를 작업할 때 가장 아래쪽에 배치합니다. 로딩 순서에 영향을 주지 않으며 CSS 파일과 구별될 수 있으며, 다른 곳에 배치하는 경우 onload를 사용하는 것이 가장 좋습니다.

예는 다음과 같습니다:

 <html>
  <title>JS 스타일 인라인 작성</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <본문>
  <!--js 02부터 인라인 쓰기 시작-->
  <div 클래스="img">
    클릭 이벤트:
      <img src="images/002.jpg" id='yuansu'></img>
  </div>
  <!--js 인라인 작성 방법 02 end-->
  </body>
  <스크립트>
    //js 코드//XX 요소를 찾습니다. 일반적으로 요소에 ID를 추가합니다. 
    yuansuojb=document.getElementById('yuansu');    
    //xx 요소에 yuansuojb.onclick=function(){ 이벤트 추가
      //코드 세그먼트 경고(1);
    }
    //이벤트 발생</script>
</html>

출력 결과:

+2.gif

3. 외부도입방법

외부 파일을 소개하려면 스크립트 태그에 src를 사용하세요.

단계:

  • 독립적인 js 파일 작성

  • 페이지의 스크립트 태그를 통해 참조됨

(1) 외부 JS 파일을 도입하는 스크립트에는 코드를 작성할 수 없습니다.

(2) HTML 페이지 코드 구조를 사용하여 HTML 페이지 외부의 여러 JS 코드 조각을 분리합니다. 이는 아름답고 파일 재사용에 편리합니다.

 <script src="main.js"></script>

참고: 인라인 스타일과 마찬가지로 하단과 머리 부분에 배치하는 것은 사례별로 고려해야 합니다. [ 자주 사용됨 ]

href가 아닌 src를 사용하세요

예는 다음과 같습니다:

js 코드를 .js 파일에 작성하고 HTML로 인용하세요.

.html 파일의 내용은 다음과 같습니다.

 <html>
  <title>JS 스타일의 외부링크 작성방법</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <본문>
  <div 클래스="img">
    외부 링크 쓰기--클릭 이벤트:
      <img src="images/003.jpg" id='yuansu'></img>
  </div>
  </body>
  <script src='js/index.js'></script>
</html>

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

 //js 코드//XX 요소를 찾습니다. 일반적으로 요소에 ID를 추가합니다. 
yuansuojb=document.getElementById('yuansu');    
//xx 요소에 yuansuojb.onclick=function(){ 이벤트 추가
  //코드 세그먼트 var str="hello world!!!";
  경고(str);
}

출력 결과:

+3.gif

관련 기사