JS 1.1 · 1부. 기본 문법

JavaScript는 무엇을 하는 언어인가

웹 페이지에서 JavaScript가 맡는 일과 HTML·CSS와의 분담을 봅니다.

예상 학습 시간 10분 난이도 입문

개념 설명

웹 페이지를 이루는 세 가지

우리가 보는 웹 페이지는 세 가지가 겹쳐 만들어집니다. 각자 맡은 일이 다릅니다.

HTML 과 CSS 만으로 만든 페이지는 읽을 수는 있어도 반응하지 않습니다. 버튼을 눌러도 아무 일이 일어나지 않고, 입력한 값을 확인해 주지도 않습니다. 그 자리를 JavaScript 가 맡습니다.

상세 사용법

아래는 버튼 하나를 만드는 HTML 입니다. 눌러도 아무 일이 일어나지 않습니다.

index.html

<button>눌러 보세요</button>

여기에 JavaScript 를 더하면 누르는 순간 할 일이 생깁니다.

script.js

document.querySelector("button").addEventListener("click", () => {
	alert("눌렀습니다");
});

지금 이 코드를 이해하지 않아도 됩니다. 4부에서 한 줄씩 다룹니다. 여기서는 JavaScript 가 화면에 동작을 붙이는 언어라는 것만 알아 두면 됩니다.

상세 사용법

작성한 JavaScript 는 HTML 안에서 불러 씁니다. 보통은 파일로 나누어 두고 script 태그로 연결합니다.

index.html

<body>
	<button>눌러 보세요</button>
	<script src="script.js"></script>
</body>

이 트랙에서는 이 준비를 하지 않아도 됩니다. 다음 단원부터 나오는 예제는 브라우저 안에서 바로 실행됩니다. 파일을 만들거나 무언가를 설치할 필요가 없습니다.

상세 사용법

이 트랙을 마치면 아래를 직접 만들 수 있습니다. 모두 8부의 종합 프로젝트에 들어 있습니다.

흔한 실수

1. Java 와 JavaScript 를 같은 것으로 압니다

이름이 비슷할 뿐 다른 언어입니다. 문법도 쓰이는 자리도 다릅니다. 검색할 때 java 대신 javascript 로 적어야 원하는 결과가 나옵니다.

2. 브라우저에서만 동작한다고 생각합니다

JavaScript 는 서버에서도 동작합니다(Node.js). 다만 이 트랙은 브라우저에서 동작하는 부분만 다룹니다. 서버 쪽은 7.5 에서 다음 단계로 안내합니다.

3. HTML 과 CSS 를 먼저 다 배워야 한다고 생각합니다

그렇지 않습니다. 1부부터 3부까지는 HTML 을 전혀 사용하지 않습니다. 4부에서 필요한 만큼만 함께 배웁니다.

실습 문제

1. 누가 맡은 일인지 가려내기 난이도 하

아래 다섯 가지는 HTML · CSS · JavaScript 가운데 무엇이 맡는 일일까요.

무엇이 있는지는 HTML, 어떻게 보일지는 CSS, 무엇을 할지는 JavaScript 입니다.

CSS · HTML · JavaScript · CSS · JavaScript

2. 무엇이 빠졌는지 찾기 난이도 중

버튼을 눌러도 아무 일이 일어나지 않는 페이지가 있습니다. HTML 로 버튼은 놓았고 CSS 로 모양도 갖췄습니다. 무엇이 빠졌을까요.

JavaScript 가 빠졌습니다. 누를 때 무엇을 할지는 HTML 과 CSS 가 정하지 않습니다.

요약