JavaScript 에센셜 | 위니북스

JavaScript 실행하기

1. 실행 환경

웹 브라우저에서 자바스크립트를 실행하기 위해서는 다음 두 가지가 필요합니다.

코드 에디터: Visual Studio Code(VSC)
Visual Studio Code(VSC)
브라우저: Chrome
Chrome

2. JavaScript 코드 연결하기

HTML 문서에 JavaScript 코드를 연결하는 방법을 알아보겠습니다.

인라인 JavaScript
HTML 요소의 이벤트 속성에 자바스크립트 코드를 작성할 수 있습니다.

<button onclick="alert('버튼이 클릭되었습니다.');">클릭하세요</button>

<button onclick="alert('버튼이 클릭되었습니다.');">클릭하세요</button>

내부 JavaScript
HTML 문서 내에서 <script> 태그를 사용하여 코드를 작성할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <script>
      console.log('내부 스크립트입니다!');
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <script>
      console.log('내부 스크립트입니다!');
    </script>
  </body>
</html>

외부 JavaScript
별도의 .js 파일을 생성하고 <script> 태그의 src 속성을 사용하여 자바스크립트 코드를 불러올 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./script.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./script.js"></script>
  </body>
</html>

console.log('외부 스크립트입니다');

console.log('외부 스크립트입니다');

<script> 태그는 어디에 위치해야 할까요?
브라우저는 HTML 문서를 로드하여 화면을 구성할 때, 마크업을 위에서 아래로 순차적으로 처리하여 화면을 구성합니다. 이 과정에서 <script>를 만나면 파싱을 중단하고, 외부 스크립트인 경우 파일을 다운로드한 후 실행합니다. 이로 인해 페이지가 부분적으로만 표시되는 등 사용자 경험이 저하될 수 있습니다.

<body> 태그 하단에 위치
body 태그 하단에 script를 위치시키면 콘텐츠가 먼저 로드되어 화면에 렌더링되기 때문에 사용자가 콘텐츠를 빠르게 볼 수 있습니다.
```
<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    
    
    <script src="script.js"></script>
  </body>
</html>
```
```
<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    
    
    <script src="script.js"></script>
  </body>
</html>
```
하지만 HTML 문서가 큰 경우, 스크립트 다운로드 시작이 지연되고, 파싱이 완료되기 전까지 자바스크립트의 기능을 사용할 수가 없어 자바스크립트에 의존하는 UI 요소는 작동하지 않을 수 있습니다.

async, defer 속성 사용
async와 defer 속성을 사용하여 HTML 파싱을 중단하지 않고 병렬적으로 스크립트를 다운로드할 수 있습니다.

async는 다운로드가 완료되면 HTML 파싱을 중단하고 파일을 실행합니다. 따라서 실행 순서가 보장되지 않습니다.
defer는 HTML 파싱이 완료된 후에 순서대로 파일을 실행합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <script src="async.js" async></script>
    <script src="defer.js" defer></script>
  </head>
  <body>
    <!-- HTML 콘텐츠 영역 -->
    <!-- ... -->
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <script src="async.js" async></script>
    <script src="defer.js" defer></script>
  </head>
  <body>
    <!-- HTML 콘텐츠 영역 -->
    <!-- ... -->
  </body>
</html>

[JS] Script삽입 위치(head, body, async, defer 비교)

3. 개발자 도구

개발자 도구의 콘솔(console) 탭에서 웹 페이지에서 발생하는 오류와 경고 메시지를 확인할 수 있습니다. 또한 자바스크립트 코드에서 사용되는 값이나 실행에 대한 로그를 남길 수 있습니다.

개발자도구	MacOS	Windows
단축키	`F12` / `Cmd + Opt + i`	`F12` / `Ctrl + Shift + i`

아는 만큼 보이는 크롬 개발자 도구

주소창에 about:blank를 입력하면 비어있는 페이지에 접속할 수 있습니다. 해당 페이지에 접속한 후 개발자 도구를 열어 간단한 자바스크립트 코드를 입력해보세요!