html 코드 내에 자바스크립트를 작성하는 위치는 개발자마다 다르다. 하지만 어느 위치에 작성하든 상관이 없다. 자바스크립트는 클라이언트 언어이며 프론트엔드를 위한 언어이기 때문이다. 즉 웹브라우저가 웹페이지의 실행을 완료한다는 것은 웹브라우저에서 html 문서와 함께 실행될 자바스크립트를 다운로드 받았다는 의미이기 때문이다.
자바스크립트 html 코드 작성 위치
javascript code in html
자바스크립트는 html 웹페이지에 존재하며 웹페이지를 동적으로 처리한다.
사용자가 버튼을 눌렀을 때 동작하는 이벤트도 자바스크립트이다.
이런 자바스크립트를 html 문서 내에 위치시키는 것은 의견이 다르지만 html 문서 어디에 위치하든 상관이 없다.
다만 자바스크립트는 <script/> 태그 내에 있기만 하면 된다.
웹페이지에서 자바스크립트를 실행하기 위해 작성하는 위치는 몇가지 방법이 있다.
- <head/> 태그 내에 <script/> 태그를 사용하여 자바스크립트 코드 작성
- <body/> 태그 내에 <script/> 태그를 사용하여 자바스크립트 코드 작성
- 외부 js 파일을 읽어들이는 방법
head 태그에 위치한 자바스크립트
가장 많이 사용된다.
html 웹문서의 head 태그내에 script 태그를 사용하고 script 태그 내에 자바스크립트 코드를 작성한다.
html 의 head 태그에 자바스크립트를 위치하는 방법은 아래 코드와 같다.
<!DOCTYPE html>
<html>
<head>
<!-- 자바스크립트 -->
<script type="text/javascript">
// 자바스크립트 코드 작성
</script>
<!--//-->
</head>
<body>
</body>
</html>
body 태그에 위치한 자바스크립트
body 태그내에 script 태그를 사용한다.
모듈 형식의 자바스크립트를 사용하거나 자바스크립트 동작을 후처리 동작하기 위해 사용하다.
간혼 html 문서의 태그 객체가 자바스크립트보다 우선하는 경우들이 있다.
그런 경우에 사용할 때 사용하지만, 딱히 의미는 없다.
만약, 자바스크립트를 body 태그에 굳이 위치시킨다면 body 태그의 마지막 위치에 있는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 자바스크립트 -->
<script type="text/javascript">
// 자바스크립트 코드 작성
</script>
<!--//-->
</body>
</html>
외부 js 파일 불러오기
자바스크립트의 함수들을 별도로 관리하기 위해 외부로 빼는 경우들이 있다.
html의 코드가 길어지는 것을 방지하고, 관리를 편하게 하기 위함이 있다.
자바스크립트를 별도의 파일로 만들어 외부에서 관리하면 여기저기서 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<!-- 외부 자바스크립트 -->
<script type="text/javascript" src="자바스크립파일.js"></script>
<!--//-->
</head>
<body>
<!-- 외부 자바스크립트 -->
<script type="text/javascript" src="자바스크립파일.js"></script>
<!--//-->
</body>
</html>외부에서 불러오는 자바스크립트 구문도 html 의 어느 위치에 있든 상관이 없다.
다만 정확히 불러오는 것이 중요하다.
src 부분에 자바스크립트 경로를 지정하면 된다.
처음 이 기능을 사용하는 사람의 경우 상대경로 절대경로에 대해 공부하게 될 것이다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 html body 태그에서 실행하는 방법 Executing javascript in html body tag (0) | 2021.09.12 |
|---|---|
| 자바스크립트 html head 태그에서 실행하는 방법 Executing javascript in html head tag (0) | 2021.09.10 |
| 자바스크립트 html 속성 변경하는 방법 여러가지 (0) | 2021.09.07 |
| 웹프로그래밍 자바스크립트란 기초 강좌와 튜토리얼 빠르게 보기 (0) | 2021.09.05 |
| 자바스크립트 html 태그 생성하고 추가하기 createElement prepend javascript (0) | 2021.06.26 |
댓글