안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 상자의 색깔을 바꾸는 변신 마법을 배웠죠? 오늘은 사용자가 입력창에 적은 글자를 자바스크립트 지팡이로 휙 낚아채서 화면에 크게 보여주는 ‘글자 낚시 마법’을 배워보겠습니다. 이제 우리 웹사이트가 사용자의 말을 듣기 시작할 거예요!
1. 글자를 담는 바구니: value 속성
사용자가 입력창(input)에 글자를 적으면, 그 글자는 해당 상자의 .value라는 아주 작은 주머니 속에 쏙 들어가게 됩니다. 우리는 자바스크립트 지팡이로 이 주머니를 열어서 그 안에 무엇이 들어있는지 확인만 하면 돼요!
2. 글자 낚시와 출력 주문
입력창에서 글자를 가져와서(낚시), 화면의 특정 구역에 보여주는(방출) 마법을 부려봅시다. innerHTML 마법을 다시 한번 사용할 거예요.
<!DOCTYPE html>
<html>
<body>
<h2>🗨️ 마법의 메아리</h2>
<!-- 글자를 입력하는 상자 -->
<input type="text" id="user_input" placeholder="마법 주문을 적어봐!">
<button onclick="fishing_words()">글자 낚시!</button>
<!-- 낚은 글자가 나타날 장소 -->
<div id="result_area" style="margin-top:20px; font-size:2em; color:blue;">
(여기에 나타나요)
</div>
<script>
function fishing_words() {
// 1. 입력창 상자 지목하기
var input_box = document.getElementById("user_input");
// 2. 상자 안의 'value(주머니)'에서 글자 꺼내기
var fished_text = input_box.value;
// 3. 결과 구역을 찾아서 꺼낸 글자 넣어주기
var display = document.getElementById("result_area");
display.innerHTML = "✨ " + fished_text + "! (마법 발동!)";
// 4. 입력창 비워주기 (마법사의 매너!)
input_box.value = "";
}
</script>
</body>
</html>3. 왜 ‘.value’와 ‘.innerHTML’은 다른가요?
마법사 지망생들이 가장 헷갈려 하는 부분이에요!
1. .value: 입력창처럼 사용자가 직접 글자를 쓰는 상자 안에 들어있는 내용이에요.
2. .innerHTML: 일반적인 글자 구역(div, h1 등)의 ‘안쪽 내용’을 바꿀 때 사용해요.
입력창은 주머니(.value)에서 꺼내고, 일반 화면은 벽지(.innerHTML)를 새로 바른다고 생각하면 쉽답니다!
4. 아이들과 함께하는 ‘메아리’ 놀이
아이와 함께 ‘말 따라하기’ 게임을 해보세요. 아이가 종이에 단어를 적어 아빠에게 주면(input.value), 아빠가 그 단어를 아주 크게 외치는 거예요(innerHTML). “방금 우리가 한 게 바로 글자 낚시 마법이야!”라고 말해주세요. 데이터가 한 곳에서 다른 곳으로 이동하는 과정을 아이들은 ‘배달’이나 ‘낚시’처럼 느낄 수 있습니다.
마치며: 소통하는 웹사이트의 기초
사용자가 무엇을 원하는지 알아내는 법을 배웠으니, 이제 우리는 훨씬 더 똑똑한 마법을 부릴 수 있습니다. 예를 들어, 사용자의 이름을 받아서 “반가워요, [이름] 마법사님!”이라고 인사할 수도 있겠죠? 다음 시간에는 숫자를 넣으면 자동으로 계산해주는 ‘수학 연금술’을 배워볼게요!
