[Javascript] 자바스크립트 개념 및 적용방법과 적용위치

2023. 12. 19. 00:45

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>

저작자표시 비영리 변경금지

'IT 개발 > JavsScript' 카테고리의 다른 글

[Javascript] 자바스크립트 자료형과 형변환 (0)	2023.12.21
[Javascript] 자바스크립트 변수(var, let, const) 및 호이스팅(hoisting) (0)	2023.12.20

KADOSHoly