안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 사용자의 글자를 낚아채는 마법을 배웠죠? 오늘은 그 글자 속에 숨어있는 숫자를 찾아내어 자동으로 더하기를 해주는 ‘수학 연금술’을 배워보겠습니다. 이제 우리 웹사이트가 스스로 계산까지 하는 똑똑한 인형이 될 거예요!
1. 숫자인 척하는 글자? 변신 마법 Number()
자바스크립트 지팡이는 입력창에서 가져온 데이터를 처음에는 무조건 ‘글자’로 생각해요. 예를 들어 ‘1’과 ‘2’를 더하라고 하면 ‘3’이 아니라 ’12’라고 대답해버리죠. 그래서 우리는 “이건 글자가 아니라 진짜 숫자야!”라고 알려주는 Number() 변신 마법을 써야 한답니다.
2. 뚝딱뚝딱 덧셈 계산기 주문서
두 개의 숫자를 입력받아 합쳐주는 주문서를 작성해 봅시다. 이번에는 변수(let)를 사용해서 숫자 데이터를 깔끔하게 관리해 볼 거예요.
[Image showing a cute robot chef putting two numbers into a mixing bowl and a larger summed number popping out as a result]
<!DOCTYPE html>
<html>
<body>
<h2>🧮 꼬마 마법사 계산기</h2>
<input type="number" id="num1" placeholder="첫 번째 숫자"> +
<input type="number" id="num2" placeholder="두 번째 숫자">
<button onclick="calculate()">계산 마법 발동!</button>
<div id="result" style="margin-top:20px; font-weight:bold; color:green;">
정답은 여기에 나타나요!
</div>
<script>
function calculate() {
// 1. 입력창에 적힌 내용을 가져와서 진짜 숫자로 바꿔요
let n1 = Number(document.getElementById("num1").value);
let n2 = Number(document.getElementById("num2").value);
// 2. 두 숫자를 더하는 연산(Operation) 마법
let sum = n1 + n2;
// 3. 결과를 화면에 보여주기
document.getElementById("result").innerHTML = "정답은 바로 " + sum + " 입니다! ✨";
}
</script>
</body>
</html>3. 산술 연산자: 마법의 기호들
더하기 말고도 다양한 수학 마법 기호들이 있어요!
1. + (더하기): 두 마력을 합쳐요.
2. – (빼기): 마력을 깎아요.
3. * (곱하기): 마력을 여러 배로 키워요.
4. / (나누기): 마력을 공평하게 나눠요.
이 기호들만 알면 여러분은 어떤 복잡한 계산 문제도 순식간에 해결하는 수학 마법사가 될 수 있습니다.
4. 아이들과 함께하는 ‘인간 계산기’ 놀이
아빠가 양손에 사탕을 들고 “왼손에 3개, 오른손에 2개, 합치면 몇 개?”라고 물어보세요. 아이가 정답을 말하면 그게 바로 [함수 호출]입니다. 이때 숫자를 사탕(진짜 숫자)이 아닌 종이에 쓴 숫자(글자 데이터)로 바꿔보며, 컴퓨터가 왜 변신 마법(Number)을 필요로 하는지 대화해보세요. 코딩의 논리가 생활 속에 스며듭니다.
마치며: 생각하는 웹사이트로의 진화
이제 우리 홈페이지는 단순히 글자를 보여주는 단계를 넘어, 데이터를 가공하고 결과를 만들어내는 능력을 갖게 되었습니다. 정말 대단한 발전이에요! 다음 시간에는 특정 조건에만 마법이 발동하도록 하는 ‘판단하는 마법 (if 조건문)’을 배워볼게요. 점점 더 흥미진진해지는 자바스크립트 연금술, 기대해 주세요!
