안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 숫자를 더하고 빼는 계산 마법을 배웠죠? 오늘은 상황에 따라 다른 마법을 부리는 아주 똑똑한 기술, ‘판단하는 마법(if 조건문)’을 배워보겠습니다. 이제 우리 웹사이트가 스스로 생각을 해서 결정을 내릴 수 있게 될 거예요!
1. 만약에(if) 마법이란 무엇인가요?
마법 학교 교문 앞에 서 있다고 상상해 보세요. “만약에 암호를 맞히면 문을 열어주고, 아니면 경고를 울려라!”처럼 어떤 조건이 맞을 때만 실행되는 마법이 바로 조건문입니다. 자바스크립트에서는 if라는 주문을 사용하죠.
2. 비밀번호 확인 마법 주문서
입력창에 적힌 숫자가 마법사의 나이(기준)보다 많은지 적은지 판단하는 프로그램을 만들어 봅시다. 컴퓨터가 어떻게 ‘판단’하는지 눈여겨보세요!
<!DOCTYPE html>
<html>
<body>
<h2>🚪 마법의 문 통과하기</h2>
<p>나이를 입력하면 입장이 가능한지 알려줄게요!</p>
<input type="number" id="age_input" placeholder="나이를 적어봐!">
<button onclick="check_gate()">판단 마법 발동!</button>
<div id="gate_msg" style="margin-top:20px; font-size:1.5em;"></div>
<script>
function check_gate() {
let age = Number(document.getElementById("age_input").value);
let message = document.getElementById("gate_msg");
// 1. 만약에(if) 나이가 10살 이상이라면?
if (age >= 10) {
message.innerHTML = "✅ 입장 성공! 위대한 마법사가 될 준비가 되었군요.";
message.style.color = "blue";
}
// 2. 그게 아니라면(else)?
else {
message.innerHTML = "❌ 입장 거부! 조금 더 형아, 언니가 되어서 오세요!";
message.style.color = "red";
}
}
</script>
</body>
</html>3. 비교 마법 기호 (비교 연산자)
컴퓨터가 판단할 때는 두 값을 비교하는 특별한 기호를 써요.
1. > (크다): 왼쪽이 더 마력이 강한가요?
2. < (작다): 오른쪽이 더 마력이 강한가요?
3. === (똑같다): 두 마력이 완전히 일치하나요?
4. !== (다르다): 서로 다른 마법인가요?
이 기호들을 if 옆에 있는 괄호 () 안에 넣어주면 판단 마법 준비 끝!
4. 아이들과 함께하는 ‘참/거짓’ 놀이
아이와 함께 ‘마법의 규칙’ 게임을 해보세요. “만약에(if) 아빠가 박수를 세 번 치면, 너는 만세를 불러! 아니면(else) 엉덩이 춤을 춰!”라고 규칙을 정하는 거죠. 아빠의 행동이 [조건]이 되고, 아이의 행동이 [결과]가 됩니다. 이를 통해 논리적인 흐름(Flow)을 몸소 체험하며 코딩의 ‘생각하는 방식’을 익힐 수 있습니다.
마치며: 웹사이트에 뇌를 달아주는 법
단순한 계산기를 넘어 이제는 상황을 판단하는 능력까지 갖추게 되었네요! 여러분의 웹사이트가 점점 살아있는 생물처럼 똑똑해지고 있어요. 다음 시간에는 여러 번 반복되는 귀찮은 일을 순식간에 처리하는 ‘무한 복제 마법 (for 반복문)’을 배워볼게요. 다음 시간에도 즐거운 연금술 수업에서 만나요!
