[Javascript] 자바스크립트 개념 및 적용방법과 적용위치
Javascript - 자바스크립트 개념 및 적용방법과 적용위치
목차
- Javascript란?
- Javascript 적용방법
- Javascript 적용위치
1. Javascript란?
웹페이지를 만들때 사용되는 언어는 HTML, CSS 그리고 바로 Javascript 입니다.
HTML은 웹의 내용과 구조를 정의하는데 사용되고, CSS는 웹의 레이아웃 및 색상, 크기, 폰트 등 웹의 디자인적 요소를 정의하는데 사용됩니다. 그리고 이러한 웹의 구성 요소들이 동적으로 동작하게 하거나 사용자와의 상호작용을 할 수 있게끔 하는데 사용되는 언어가 바로 Javascript입니다.
2. Javascript 적용방법
1) HTML 문서내 적용방법
html 문서안에서 <script></script> 태그 사이에 javascript 코드를 직접 작성하여 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head> ... </head>
<body>
<button type="button" onclick="func1()">버튼</button>
<script>
function func1() {
alert("안녕하세요")
}
</script>
</body>
</html>
2) 외부파일 적용방법
javascript 파일(ex, script.js)을 외부에 따로 만든후, html문서안에서 <script src="javascript파일 경로"></script> 태그에 파일 경로를 지정하여 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head> ... </head>
<body>
<button type="button" onclick="func1()">버튼</button>
<script src="script.js"></script>
</body>
</html>
script.js
function func1() {
alert("안녕하세요")
}
3. Javascript 적용위치
1) <head></head> 태그 사이
html 파싱 초반에 javascript 다운 및 실행이 진행되기 때문에 웹사이트가 화면에 보여지기까지 시간이 오래 소요되며, DOM 관련 에러가 발생할 가능성이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="script.js"></script>
</head>
<body>
...
</body>
</html>
2) <body></body> 태그의 맨 마지막
html 파싱이 끝난후 javascript 다운 및 실행이 진행되기 때문에 웹사이트가 빨리 보여지나, javascript를 포함한 전체 웹사이트 로딩시간은 큰 차이가 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
</html>
3) <head></head> 태그 사이 + async 속성 사용
async 속성을 사용하게 되면 javascript 다운로드가 비동기로 진행되어 시간을 절약할 수 있게 됩니다. 하지만 html 파싱이 끝나기 전에 javascript가 실행될 수 있기 때문에 1번 상황에서 발생했던 문제가 똑같이 발생할 가능성이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
...
<script async src="script.js"></script>
</head>
<body>
...
</body>
</html>
4) <head></head> 태그 사이 + defer 속성 사용
defer 속성을 사용하게 되면 javascript 다운로드는 async와 같이 비동기적으로 javascript 다운로드가 이루어집니다. 하지만 차이점은 html 파싱이 끝난 후에 javascript 실행이 이루어지기 때문에 가장 효율적인 방법이 될 것 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
...
<script defer src="script.js"></script>
</head>
<body>
...
</body>
</html>