코딩왕랄프👊🏻

[자바스크립트] HTML 페이지에 자바스크립트 적용 방법 본문

Javascript

[자바스크립트] HTML 페이지에 자바스크립트 적용 방법

hyerm_2 2022. 2. 7. 15:21
반응형
SMALL

HTML과 자바스크립트는 다른 언어 이므로, HTML에서 자바스크립트를 실행하려면 다음과 같은 적용 방법이 사용된다.

아주 간단하나, 필수적이므로 꼭 잘 기억해 두자.

 

 

1. Head 태그 안에서 외부 자바스크립트 파일을 Loading 하는 방식

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="./pratice.js"></script>
    </head>
    <body>
    </body>
</html>

=> 현재 HTML이 브라우저에서 해석되기 전에 별도로 저장한 자바스크립트 파일을 먼저 읽어서 해석하는 방식

 

 

2. HTML 태그 안에 Inline 방식

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
    	<input type="button" onclick="alert('hello world')" value="Hello World" />
    </body>
</html>

=> HTML 태그 안에 자바스크립트 코드가 들어가는 방식

 

 

3. Script 태그 안에 삽입 방식

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
    	<script type="text/javascript">
        	alert('Hello World');
        </script>
    </body>
</html>

=> HTML 안에 자바스크립트 태그를 넣어 그 안에 자바스크립트 코드가 들어가는 방식

 

 

4. Body 태그 안에 외부 자바스크립트 파일 Loading 방식

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
    	<script type="text/javascript" src="./practice.js"></script>
    </body>
</html>

=> HTML이 해석되는 중간에 별도로 저장한 자바스크립트 파일을 읽어서 해석하는 방식

 

 

 

  • 2번과 3번의 경우는 HTML소스와 자바스크립트 소스가 분리되지 못하여 서로 의존관계가 높아져 향후 유지보수성이 안좋을 수 있다.이를 anti-pattern이라 하는데, 개발 시 피해야 하는 개발 방법이다.
  • 1번과 4번의 경우는 HTML소스와 자바스크립트 소스를 파일로 엄격하게 분리한 방식으로, 중복코드 개발을 줄일 수 잇고 리소스 사용을 최소화 할 수 있는 장점도 있다.
  • 많은 자바스크립트 전문가들이 body 태그의 가장 하단에서 js 파일을 로딩 하는 것을 추천, 조언 하고 있으니 참고하는게 좋을 듯 하다!

 

 

출처

"웹 애플리케이션 개발을 위한 자바스크립트와 Jquery 기초 가이드"

반응형
LIST

'Javascript' 카테고리의 다른 글

[Javascript] Math 객체, 메서드  (0) 2022.09.21
[Javascript] 배열 요소 확인 방법  (0) 2022.07.18
[자바스크립트] Alert, Confirm, Prompt 차이  (0) 2022.02.07
[자바스크립트] Ajax 정의  (0) 2022.02.07
[자바스크립트] 자바스크립트 기능  (0) 2022.02.07
'Javascript' Related Articles more