안녕하세요! 가족과 함께하는 스마트 라이프입니다. PHP 마법 학교 1기를 무사히 졸업한 꼬마 마법사 여러분, 환영합니다! 드디어 오늘부터 2기 수업이 시작됩니다. 이번 학기에는 웹사이트에 생동감을 불어넣는 액션 마법, ‘자바스크립트(JavaScript)’를 배워볼 거예요!
1. PHP와 자바스크립트는 어떻게 다른가요?
지난 학기에 배운 PHP가 창고(서버)에서 보물을 정리하는 ‘창고 지기 마법’이었다면, 자바스크립트는 우리 눈앞(브라우저)에서 물건을 움직이게 하는 ‘염력 마법’과 같아요. 버튼을 눌렀을 때 색깔이 변하거나, 캐릭터가 점프하는 마법은 모두 자바스크립트의 솜씨랍니다.
2. 첫 번째 염력 주문: alert()
자바스크립트 마법을 부리려면 HTML 문서 안에 <script>라는 특별한 마법 구역을 만들어야 해요. 화면에 메시지 창을 띄우는 가장 기초적인 주문을 외워볼까요?
<!DOCTYPE html>
<html>
<body>
<h1>연금술사의 실험실</h1>
<button onclick="magic_alert()">마법의 버튼 클릭!</button>
<script>
function magic_alert() {
alert("포로링~! 자바스크립트 마법이 시작되었습니다!");
}
</script>
</body>
</html>3. 왜 자바스크립트를 배워야 하나요?
자바스크립트는 현대 마법사들에게 가장 인기 있는 도구예요.
1. 즉각적인 반응: 새로고침 없이도 화면이 바로바로 바뀌어요.
2. 재미있는 게임: 웹브라우저에서 돌아가는 모든 게임은 자바스크립트로 만들 수 있어요.
3. 로봇 조종: 요즘은 드론이나 로봇을 움직이는 데도 이 마법이 쓰인답니다.
4. 아이들과 함께하는 ‘만약에(If)’ 놀이
자바스크립트의 핵심은 ‘상호작용’이에요. 아이와 함께 “만약에 내가 거실 불을 켜면, 너는 ‘눈부셔!’라고 말해줘”라는 규칙을 정해 놀이해보세요. [사건(Event)] + [반응(Action)]의 구조를 몸으로 익히면 코딩의 논리가 저절로 머릿속에 들어옵니다.
마치며: 정적인 웹사이트는 이제 안녕!
단순히 정보를 보여주기만 하던 홈페이지는 잊으세요. 이제 여러분의 손끝에서 웹사이트가 춤을 추고 대답하기 시작할 겁니다. 자바스크립트 연금술사가 될 준비 되셨나요? 다음 시간에는 글자 색깔을 마음대로 바꾸는 ‘스타일 변신 마법’을 배워볼게요!
