페이지가
살아 움직이다

10일 만에 태어난 언어

1995년 넷스케이프는 페이지에 움직임을 넣고 싶어 했다. 그 일을 브렌던 아이크가 맡았고, 주어진 시간은 단 10일이었다.

급하게 만든 티가 나고 이상한 규칙도 많다. 그래도 브라우저에서 돌 수 있는 유일한 언어 자리를 차지했다.

그 자리 덕에 30년이 지난 지금도 가장 많이 쓰이는 언어다. 웹페이지가 있는 곳엔 늘 자바스크립트가 있다.

가만히 있는 페이지 vs 반응하는 페이지

HTML은 글과 이미지의 뼈대, CSS는 그 모양과 색이다. 둘 다 한 번 그리면 끝이라, HTML·CSS만 있는 페이지는 종이 같다. 버튼을 눌러도 아무 일도 일어나지 않는다.

자바스크립트가 끼면 클릭, 입력, 스크롤 같은 사용자 행동을 듣고, 그 행동에 맞춰 페이지를 즉석에서 바꾼다.

장바구니 숫자가 늘고, 좋아요가 빨개지고, 검색어를 치면 목록이 추려진다. 전부 자바스크립트가 정적인 종이를 살아 있는 화면으로 바꾸는 일이다.

직접 눌러보기

오른쪽에서 직접 해본다. 한 동작이 곧 코드 한 줄이다.

+1 버튼을 누르면 숫자가 올라간다. 자바스크립트가 count = count + 1 한 줄을 실행한 결과다.

이름 칸에 글자를 칠 때마다 아래 인사말이 실시간으로 바뀐다. 이렇게 화면의 글자와 요소를 바꾸는 것을 DOM 조작이라 한다. 페이지를 만질 수 있는 손인 셈이다.

화면 변화 뒤엔 늘 코드 한 줄이 있다.

// 버튼을 누르면 숫자 1 올리기
let count = 0;
button.onclick = function () {
  count = count + 1;          // 값 바꾸기
  screen.textContent = count; // 화면에 반영
};

// 입력하면 인사말 바꾸기
input.oninput = function () {
  hello.textContent = input.value + "님 안녕!";
};

웹페이지의 세 겹

웹페이지 하나는 보통 세 가지가 겹쳐 만들어지고, 역할이 딱 나뉜다.

HTML은 뼈대로 제목·문단·버튼이 뭐가 있는지 정한다.
CSS는 옷으로 색·크기·배치를 꾸민다.
JS는 움직임으로 누르거나 입력하면 무슨 일이 일어날지 정한다.

사람으로 치면 뼈대와 옷, 근육이다. 셋이 다 있어야 우리가 매일 쓰는 웹이 된다.

자바와 자바스크립트는 남남

자바와 자바스크립트는 이름만 닮은 완전히 다른 언어다.

이름이 비슷한 건 그냥 마케팅이었다. 1995년 당시 자바가 제일 뜨거웠고, 넷스케이프가 그 인기에 묻어가려고 비슷한 이름을 붙였을 뿐이다.

흔한 비유로 "자바와 자바스크립트는 햄과 햄스터만큼 다르다"고 한다. 만든 사람도, 쓰는 곳도, 문법도 다 다르다.