JavaScript 에센셜 | 위니북스

JavaScript 실행하기

1. 실행 환경

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

코드 에디터: Visual Studio Code(VSC)를 사용해 소스코드를 작성하고 실행합니다.
브라우저: 크롬(Chrome)을 사용합니다
- 개발자도구: F12 또는 Ctrl + Shift + i / Cmd + Opt + i 또는 우클릭 → 검사(Inspect)

2. 코드 작성하기

HTML 파일 내부 삽입하기

HTML내에 javascript를 포함하고 로드합니다.

HTML 태그 내 삽입

<button onclick="window.alert('hello world');">Click me!</button>

<button onclick="window.alert('hello world');">Click me!</button>

script 태그를 통해 삽입

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <!-- script 태그는 body 하단에 위치합니다 -->
    <script>
      console.log('hello world!');
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <!-- script 태그는 body 하단에 위치합니다 -->
    <script>
      console.log('hello world!');
    </script>
  </body>
</html>

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>

<!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('hello console');

console.log('hello console');

브라우저 콘솔창

크롬 브라우저의 콘솔창은 Ctrl + Shift + i (맥 Cmd + Opt + i) 버튼을 누르면 나오는 창입니다. 다음은 크롬에서 about 페이지에 접속한 화면입니다.

이 페이지는 비어있는 페이지이며 간단한 javascript 연습을 하기 충분합니다.

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