03. 동화로 이해하는 Javascript

# 신비한 마법사의 비밀노트: 자바스크립트 이야기 �

웹 세상에 마법을 불어넣은 JavaScript 이야기

옛날 옛적, 웹 세상에는 HTML과 CSS라는 친구들이 살고 있었어. HTML은 웹 페이지의 구조를 만들고, CSS는 그 구조에 아름다운 색과 디자인을 입혔지. 하지만 사람들은 점점 더 많은 것을 기대하기 시작했어.

“HTML과 CSS 덕분에 예쁜 페이지가 되었지만, 뭔가 움직이고 반응하는 마법이 있으면 더 좋겠어!”

그때, 멀리서 JavaScript라는 새로운 마법사가 나타났어. JavaScript는 행동과 상호작용을 담당하는 마법사로, HTML과 CSS가 만들지 못하는 생동감 넘치는 마법을 사용할 수 있었지. JavaScript는 HTML과 CSS에게 자신을 소개하며 말했어.

“안녕, 친구들! 나는 JavaScript야. 내 마법으로 버튼을 클릭하면 반짝반짝 빛나게 하거나, 페이지를 이동하거나, 숫자를 계산하는 것도 가능하지. 내가 가진 다양한 마법을 너희에게 보여줄게!”

---

첫 번째 마법 수업: 기억의 상자, 변수

JavaScript는 HTML과 CSS에게 기억의 상자를 보여주었어. “이건 변수라는 상자야. 여기에는 우리가 기억하고 싶은 정보를 넣을 수 있지. 마치 물건을 담아두는 상자처럼!”

JavaScript는 날씨를 담을 상자를 만들었어.

JavaScript는 날씨가 변하면 상자 속 내용도 바꿀 수 있다고 설명했어. “변수는 이렇게 상황에 맞게 바꿀 수 있어. 마치 마법처럼!”

---

두 번째 마법 수업: 신비한 정보의 종류

JavaScript는 다양한 정보의 종류도 설명해주었어. “세상에는 다양한 정보가 있어. 각각을 다르게 다룰 줄 알아야 해!”

 • JavaScript는 주문을 외우듯이 글자를 기억하는 상자를 만들었어. "윙가르디움 레비오사" 같은 주문은 문자열(String)이라는 형태였지.

 • 다음은 숫자였어. “마법의 힘은 숫자로 표현할 수 있어. 예를 들어, 마법력이라는 상자를 만들 수 있지.”

 • JavaScript는 불리언(Boolean)이라는 참과 거짓만 있는 마법도 보여주었어. “이것은 마법사가 진짜 마법사인지 확인하는 데 쓰일 수 있어!”

이렇게 JavaScript는 정보를 다루는 다양한 마법을 HTML과 CSS에게 보여주었어.

---

세 번째 마법 수업: 상황에 따라 다른 마법을 쓰는 조건문

JavaScript는 상황에 따라 다른 마법을 쓰는 방법도 알려주었어. “조건문을 사용하면 상황에 따라 적절한 마법을 쓸 수 있지. 예를 들어, 마법력을 기준으로 평가할 수 있어.”

이 조건문 덕분에 마법사들은 자신의 실력에 따라 다르게 평가될 수 있었어. HTML과 CSS는 JavaScript의 조건문 마법 덕분에 다양한 반응을 보여줄 수 있게 되었지.

---

네 번째 마법 수업: 반복해서 마법을 쓰는 반복문

JavaScript는 반복해서 마법을 쓰는 법도 알려주었어. “같은 마법을 여러 번 써야 할 때 반복문을 사용하면 아주 간편하지!”

예를 들어, 마법사가 주문을 여러 번 외워야 할 때를 상상해보자.

이 마법을 통해 반복해서 주문을 외울 수 있었어. HTML과 CSS는 이 마법을 보고 무척 신기해했지. “정말로 반복해서 마법을 쓰는 게 이렇게 간단하다니!”

---

다섯 번째 마법 수업: 하나로 묶는 마법, 함수

JavaScript는 자주 쓰는 마법을 하나로 묶어두는 법도 알려주었어. “우리는 자주 쓰는 마법을 함수로 묶어 이름을 붙여줄 수 있어. 그러면 필요할 때마다 이름만 불러주면 되지!”

JavaScript는 간단한 인사 마법을 만들어 보여주었어.

이제 마법사들은 “인사하기”라는 이름을 부르기만 하면 매번 같은 인사 마법을 사용할 수 있게 되었어. HTML과 CSS는 함수 덕분에 마법을 간편하게 사용할 수 있게 되어 감탄했어.

---

여섯 번째 마법 수업: 행동에 반응하는 이벤트

JavaScript는 마지막으로 행동에 반응하는 이벤트 마법을 알려주었어. “페이지에서 버튼을 클릭하거나 마우스를 움직일 때마다 특정 마법이 발동되도록 만들 수 있어.”

JavaScript는 마법의 버튼을 하나 만들고, 버튼을 클릭하면 빛나는 마법을 보여주었어.

이제 사람들이 버튼을 클릭할 때마다 마법이 시전되었어. HTML과 CSS는 JavaScript 덕분에 사람들이 페이지와 상호작용할 때마다 다양한 마법을 보여줄 수 있게 되었어.

---

마지막 요약: JavaScript의 마법 책

JavaScript는 HTML과 CSS에게 모든 마법을 요약한 책을 건네주었어.

 1. 변수: 정보를 기억하는 마법의 상자.

 2. 데이터 타입: 문자열, 숫자, 불리언 등 다양한 정보 종류.

 3. 조건문: 상황에 따라 다르게 반응하는 마법.

 4. 반복문: 같은 마법을 여러 번 시전하는 법.

 5. 함수: 여러 마법을 하나로 묶어 쉽게 사용하기.

 6. 이벤트: 행동에 따라 반응하는 마법.

Javascript는 html, css 보다는 난이도가 있으니 상세 설명을 보며 다시 개념을 정리해보자.

1. 변수 (Variable)

 • 변수는 정보를 기억하는 상자야. 우리가 다루고 싶은 데이터를 저장하고 필요할 때 꺼내 쓰는 역할을 해.

 • 변수를 선언할 때는 let, const, var 키워드를 사용할 수 있어.

 • let: 일반적인 변수로, 값이 변경될 수 있어.

 • const: 상수로, 한 번 지정한 값은 변경되지 않아.

 • var: 예전부터 사용된 변수 선언 방식이지만, 지금은 주로 let과 const를 사용해.

 • 예시:

2. 데이터 타입 (Data Types)

 • JavaScript는 다양한 데이터 타입을 다룰 수 있어.

 • 문자열 (String): 글자 정보를 다루며, 큰따옴표(” “)나 작은따옴표(’ ’)로 감싸서 작성해.

 • 숫자 (Number): 정수나 소수를 포함한 숫자 데이터.

 • 불리언 (Boolean): 참(true) 또는 거짓(false) 값을 가짐.

 • 배열 (Array): 여러 데이터를 한꺼번에 담는 리스트로, 대괄호 [ ]로 감싸서 표현해.

 • 예시:

3. 연산자 (Operators)

 • JavaScript는 데이터를 조작하거나 비교할 수 있는 도구를 제공해.

 • 산술 연산자: +, -, *, /와 같이 숫자를 계산할 때 사용.

 • 비교 연산자: 값의 크기나 동일 여부를 비교할 때 사용 (===, !==, >, < 등).

 • 예시:

4. 조건문 (Conditional Statements)

 • 조건에 따라 다른 행동을 할 수 있게 하는 구문이야.

 • if, else if, else 키워드를 사용하여 조건에 맞는 코드만 실행하도록 할 수 있어.

 • 예시:

5. 반복문 (Loops)

 • 반복문은 같은 코드를 여러 번 실행하고 싶을 때 사용해.

 • for 반복문: 지정한 횟수만큼 코드를 반복할 때 유용해.

 • forEach 반복문: 배열에 들어 있는 모든 요소를 순서대로 처리할 때 사용.

 • 예시:

6. 함수 (Function)

 • 함수는 자주 사용하는 코드 묶음을 하나의 이름으로 정의하는 거야.

 • 함수를 호출할 때마다 함수 내부의 코드가 실행돼.

 • 예시:

 • 함수에 매개변수를 추가해, 여러 값을 함수에 전달하고 사용할 수 있어.

7. 이벤트 (Events)

 • 이벤트는 사용자가 웹 페이지와 상호작용할 때 발생하는 사건이야.

 • 예를 들어, 버튼을 클릭하거나 키보드를 누를 때마다 특정 행동을 실행할 수 있어.

 • 이벤트를 감지하고, 그에 반응하여 코드를 실행하는 방식으로 사용해.

 • 예시:

코드 스크린샷 Carbon

https://carbon.now.sh/