10강 · 세 번째 언어

한눈에

HTML 과 CSS 로 아홉 편을 왔고, 페이지는 열리는 순간 이미 완성이었습니다. 오늘 세 번째 언어가 들어오면서 그것이 달라집니다.

오늘 다룰 내용은 세 가지입니다. 먼저 세 번째 파일이 무엇을 위한 것인지 봅니다. 그다음 파일이 돌고 있다는 것을 확인하는 한 줄을 씁니다. 마지막으로 코드에서 페이지에 손을 넣어 제목을 읽습니다. 언어가 세 개이고, 각각 다른 질문에 답합니다. HTML 은 페이지에 무엇이 있고 그것이 무슨 뜻인지 말합니다. CSS 는 그것이 어떻게 보이는지 말합니다. 자바스크립트는 무언가 일어났을 때 무엇을 할지 말합니다. 파일 세 개가 한 페이지를 만들고, 역할이 겹치지 않습니다. 앞의 아홉 편과 그 뒤를 가르는 선입니다. 지금까지 페이지는 열리는 순간 완성이었습니다. 이제부터는 열린 뒤에도 바뀔 수 있습니다. 무언가 일어났기 때문입니다. 클릭, 키 입력, 시간 같은 것들입니다. 폴더를 다시 열어보겠습니다. 파일 세 개가 있고, 오늘 네 번째가 들어옵니다. 페이지에 한 줄, 새 파일에 다섯 줄을 씁니다. 분량으로 치면 그게 이번 강의의 전부입니다. 처음 작성할 다섯 줄입니다. console.log 는 브라우저의 콘솔에 출력합니다. 페이지가 아닙니다. 이 부분에서 매번 막히게 됩니다. 그다음 querySelector 인데, CSS 선택자를 받습니다. 네 편 전에 쓰고 있던 그 문자열 그대로입니다. 그 두 줄을 뜯어보겠습니다. document 는 코드가 만질 수 있는 형태의 페이지 자체입니다. querySelector 는 선택자에 맞는 첫 요소를 찾아줍니다. const 는 그 요소에 다시 쓸 수 있는 이름을 붙여줍니다. textContent 는 그 안의 글자입니다. 오늘은 읽고, 다음 시간에는 씁니다.

script.js 라는 새 파일을 만듭니다. 이름은 마음대로 정해도 되고, 보통 이렇게들 씁니다. 여기에는 태그도, 중괄호를 쓰는 선택자도 없습니다. 세 번째 파일에 들어간 세 번째 언어이고, 자기 규칙이 있습니다. 저장해도 아직 아무 일이 없습니다. 불러오는 곳이 없기 때문입니다.

script.js

console.log("The script is running");

const heading = document.querySelector("h1");

console.log(heading.textContent);

태그 하나로 연결하는데, 위치가 중요합니다. body 가 닫히기 바로 앞, 아래쪽에 넣습니다. src 는 경로이고, 스타일시트 link 와 같은 생각입니다. 그리고 link 나 img 와 달리 닫는 태그가 있습니다. 위치가 왜 중요한지 말씀드립니다. 오래도록 사람들을 괴롭히는 부분입니다. 스크립트는 브라우저가 그 줄에 닿는 순간 실행됩니다. head 에 넣으면 그때는 h1 을 아직 읽지 않은 상태입니다. querySelector 가 아무것도 못 찾고, 다음 줄에서 오류가 납니다. 아래에 두면 그 위의 모든 것이 이미 존재합니다.

태그는 footer 다음, 여전히 body 안쪽에 들어갑니다. 한 줄에서 열고 닫고, 사이에는 아무것도 없습니다. 코드는 파일에 있고 태그 사이에 있는 것이 아닙니다. 두 파일을 저장하고 확인해보겠습니다.

index.html

  <script src="script.js"></script>

서버는 같은 방법으로 띄웁니다. 폴더를 통째로 넘기니까 새 파일도 같이 따라갑니다. 10강째인데 여전히 같은 한 줄입니다.

터미널

python -m http.server 5500

페이지는 전과 똑같아 보입니다. 자리가 바뀐 것도 색이 달라진 것도 없습니다. 스크립트가 한 일은 전부 다른 곳에서 일어났습니다. F12 를 누르고 Console 탭을 열면 보입니다. 그 안에 두 줄이 있습니다. 우리 메시지와 제목에서 읽은 이름입니다. 지금 이런 화면이 보이고 계셔야 합니다. 페이지는 그대로이고 콘솔에 두 줄이 있습니다. 두 번째 줄이 코드가 페이지에 손을 넣어 뭔가를 읽었다는 증거입니다. 콘솔이 비어 있으면 script 태그부터 확인해주시면 됩니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, script 태그를 head 에 넣는 경우입니다. 요소가 아직 없어서 querySelector 가 아무것도 못 찾습니다. 둘째, 태그 이름 앞에 샵을 붙이는 경우입니다. 샵은 6강에서와 똑같이 id 를 뜻합니다. 셋째, 콘솔 출력을 페이지에서 찾는 경우입니다. console.log 는 콘솔에만 씁니다. F12 를 누르세요. 앞으로 그 창에서 살게 됩니다. 마치기 전에 서버를 멈춰두겠습니다. 이제 파일이 네 개입니다. 페이지, 그림, 스타일, 스크립트입니다. 넷 다 평범한 텍스트이고, 글자 하나까지 직접 쳤습니다. 폴더는 그대로 두세요. 다음 시간부터 페이지가 대답하기 시작합니다. 오늘 기억하실 것 세 가지입니다. 세 번째 일을 맡은 세 번째 파일입니다. 페이지가 무엇을 하는지입니다. 스크립트는 아래에 둡니다. 그래야 요소가 이미 존재합니다. querySelector 는 6강에서 쓴 선택자를 그대로 받습니다. 다음 시간에는 버튼과, 누를 때 돌아가는 코드를 다룹니다.

---

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.