자바스크립트 시작하기 — 웹페이지에 움직임을 넣는 첫걸음

HTML로 뼈대를 세우고 CSS로 옷을 입혔다면 이제 남은 것은 움직임입니다. 버튼을 눌렀을 때 카드가 넘어가고 숫자를 세어 화면에 다시 그려 넣는 일은 모두 자바스크립트가 맡습니다. 이 글에서는 자바스크립트의 역할, 이름 때문에 생기는 오해, 코드를 문서에 넣는 세 가지 방법, 실행 순서까지 정리합니다.

자바스크립트는 브라우저 안에서 무엇을 합니까

HTML은 “무엇이 있는가”를, CSS는 “어떻게 보이는가”를 적는 언어입니다. 여기에는 시간이라는 개념이 없습니다. 반면 자바스크립트는 “사용자가 무엇을 하면 무엇이 바뀌는가”를 적습니다. 즉 시간과 조건을 다루는 언어입니다. 아래 코드를 확장자가 .html인 파일로 저장하고 브라우저로 열면 버튼이 실제로 동작합니다.

<p id="counter">읽은 글: 0편</p>
<button id="readBtn">한 편 읽었습니다</button>

<script>
  let postCount = 0;
  const counter = document.querySelector("#counter");

  document.querySelector("#readBtn").addEventListener("click", function () {
    postCount = postCount + 1;
    counter.textContent = "읽은 글: " + postCount + "편";
  });
</script>

버튼을 누를 때마다 postCount라는 값이 1씩 늘고, 그 값이 문단의 글자로 다시 쓰입니다. HTML 파일 자체는 한 글자도 바뀌지 않습니다. 브라우저가 메모리에 들고 있는 화면만 바뀝니다. 이 원리를 자바스크립트 DOM — HTML 요소를 골라서 바꾸는 방법에서 자세히 다룹니다.

자바와 자바스크립트는 이름만 닮은 남남입니다

입문자가 가장 먼저 겪는 혼란입니다. 자바(Java)와 자바스크립트(JavaScript)는 문법도, 실행되는 장소도, 만든 회사도 다릅니다. 이름이 비슷한 이유는 1990년대에 자바가 크게 유행하던 시기에 마케팅 목적으로 붙인 것이기 때문입니다. 둘의 관계는 “인도”와 “인도네시아” 정도라고 생각하면 편합니다.

자바는 주로 서버와 안드로이드 앱에서 실행되고, 자바스크립트는 주로 브라우저에서 실행됩니다.
자바는 변수를 만들 때 타입을 미리 못 박지만, 자바스크립트는 값이 들어오는 대로 타입이 정해집니다.
자바 코드를 자바스크립트 파일에 붙여 넣으면 그냥 오류가 납니다. 서로 호환되지 않습니다.

코드를 문서에 넣는 세 가지 방법

자바스크립트를 페이지에 연결하는 방법은 크게 세 가지입니다. 아래로 갈수록 실무에서 권장되는 방식입니다.

<!-- 1. 인라인 속성: 태그 안에 직접 -->
<button onclick="alert('안녕하세요')">눌러보기</button>

<!-- 2. 내부 스크립트: 문서 안에 script 태그로 -->
<script>
  const noteTitle = "카드뉴스 만들기";
  console.log(noteTitle);
</script>

<!-- 3. 외부 파일: 별도의 .js 파일을 불러오기 -->
<script src="main.js"></script>

1번은 HTML과 동작이 뒤엉켜 관리가 어렵고, 2번은 짧은 실습에 적당합니다. 3번은 여러 페이지가 같은 코드를 공유할 수 있어 가장 널리 쓰입니다. 3번에서 주의할 점은 <script src="main.js"></script>처럼 여는 태그와 닫는 태그를 반드시 짝으로 써야 한다는 것입니다. <script src="main.js" />로 줄여 쓰면 브라우저가 파일을 읽지 않습니다.

콘솔은 자바스크립트의 실험실입니다

브라우저에서 F12를 누르면 개발자 도구가 열리고, 그중 Console 탭이 자바스크립트를 한 줄씩 실행해 보는 공간입니다. 파일을 만들지 않아도 바로 입력하고 결과를 볼 수 있어 연습에 가장 좋습니다.

const readerName = "지민";
console.log(readerName + "님, 반갑습니다.");   // 지민님, 반갑습니다.

console.log(3 > 2);          // true
console.log(typeof 42);      // number

// 오류가 난 위치를 눈에 띄게 보고 싶을 때
console.error("이미지를 찾지 못했습니다.");

console.log()는 괄호 안의 값을 콘솔에 찍어 주는 명령입니다. 코드가 원하는 대로 돌지 않을 때 중간중간 console.log()를 넣어 값을 확인하는 것이 가장 기본적인 문제 해결 방법입니다. 빨간 글씨는 오류 메시지이며, 옆의 줄 번호를 클릭하면 문제가 난 위치로 이동합니다.

실행 순서를 모르면 요소를 못 찾습니다

브라우저는 HTML을 위에서 아래로 한 줄씩 읽습니다. 그러다 script를 만나면 읽기를 멈추고 그 코드를 먼저 실행합니다. 입문자가 가장 자주 당하는 함정이 여기서 나옵니다.

<head>
  <script>
    const btn = document.querySelector("#readBtn");
    console.log(btn);   // null — 아직 버튼이 만들어지기 전입니다
  </script>
</head>
<body>
  <button id="readBtn">한 편 읽었습니다</button>
</body>

버튼보다 스크립트가 먼저 실행되었기 때문에 찾을 대상이 아직 존재하지 않고, 결과는 null입니다. 이후 btn.addEventListener(...)를 쓰면 “null의 속성을 읽을 수 없다”는 오류가 납니다. 해결책은 두 가지입니다. 스크립트를 </body> 바로 앞으로 내리거나, defer 속성을 붙이는 것입니다.

<head>
  <script src="main.js" defer></script>
</head>

defer는 “파일은 미리 내려받되, 실행은 HTML을 다 읽은 뒤에 하라”는 뜻입니다. 덕분에 스크립트를 head에 두면서도 요소를 안전하게 찾을 수 있습니다. 단, defer는 외부 파일을 불러오는 script에서만 동작하며 내부 스크립트에는 효과가 없습니다.

핵심 정리

자바스크립트의 역할 — 조건과 시간에 따라 화면과 값을 바꾸는, 웹페이지의 동작 담당입니다.
자바와의 관계 — 이름만 비슷할 뿐 문법도 실행 환경도 전혀 다른 별개의 언어입니다.
삽입 방법 — 인라인 속성, 내부 script, 외부 src 파일 세 가지이며 외부 파일 방식이 권장됩니다.
콘솔 — F12로 열어 코드를 즉시 실험하고 console.log()로 값을 확인하는 공간입니다.
실행 순서 — 위에서 아래로 실행되므로, 요소보다 스크립트가 먼저 돌면 null이 나옵니다. defer로 해결합니다.

다음 글 자바스크립트 변수 — var·let·const와 타입이 헷갈리는 이유에서는 값을 담는 그릇인 변수와 자료형을 다룹니다.