# 웹 개발 소설: 6단계
"이제 마지막 마법인 JavaScript를 추가해서 우리의 웹페이지에 생명을 불어넣을 차례예요," 선생님이 말했습니다. "HTML이 성의 구조이고, CSS가 장식이라면, JavaScript는 성 안에서 움직이는 모든 것들 - 문이 열리고 닫히고, 촛불이 깜빡이고, 그림이 바뀌는 등의 동작을 담당하는 거죠."
선생님은 HTML 코드의 `</body>` 태그 바로 앞에 `<script>` 태그를 추가했습니다:
```html
<body>
<!-- 기존의 HTML 내용 -->
<script>
// 여기에 JavaScript 코드가 들어갈 거예요
</script>
</body>
```
"JavaScript에서 `//`는 한 줄 주석이에요. 이제 실제 JavaScript 주문을 작성해볼게요!"
선생님은 주석 부분을 지우고 다음과 같은 코드를 입력했습니다:
```javascript
// 페이지가 완전히 로드되면 이 함수를 실행해요
document.addEventListener('DOMContentLoaded', function() {
// 폼 제출 처리하기
const contactForm = document.querySelector('form');
contactForm.addEventListener('submit', function(event) {
event.preventDefault(); // 폼의 기본 제출 동작을 막아요
// 폼에서 입력값 가져오기
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// 입력값 검증하기
if (name === '' || email === '' || message === '') {
alert('모든 필드를 채워주세요!');
return;
}
// 감사 메시지 표시하기
alert(`${name}님, 메시지를 보내주셔서 감사합니다!`);
contactForm.reset(); // 폼 초기화
});
// 마법 주문 목록에 효과 추가하기
const spellItems = document.querySelectorAll('#마법주문 li');
spellItems.forEach(function(item, index) {
item.addEventListener('mouseover', function() {
item.style.color = '#50b3a2';
item.style.fontWeight = 'bold';
});
item.addEventListener('mouseout', function() {
item.style.color = '';
item.style.fontWeight = '';
});
item.addEventListener('click', function() {
const spellNames = ['HTML', 'CSS', 'JavaScript'];
alert(`${spellNames[index]} 마법을 선택하셨군요! 이 마법은 웹 개발에 매우 중요합니다.`);
});
});
// 현재 날짜 표시하기
const footer = document.querySelector('footer p');
const currentYear = new Date().getFullYear();
footer.textContent = `© ${currentYear} 웹 마법 학교. 모든 권리 보유.`;
});
```
"이 코드를 한 부분씩 살펴볼게요," 선생님이 설명했습니다.
"document.addEventListener('DOMContentLoaded', function() { ... }); (문서가 완전히 로드되면 괄호 안의 함수를 실행하라는 의미)
첫 번째 부분에서는 폼 제출을 처리해요:
- const contactForm = document.querySelector('form'); (HTML에서 form 요소를 찾아 contactForm 변수에 저장)
- contactForm.addEventListener('submit', function(event) { ... }); (폼이 제출될 때 괄호 안의 함수를 실행)
- event.preventDefault(); (폼의 기본 제출 동작을 막음)
- 그 다음 코드는 사용자가 입력한 이름, 이메일, 메시지를 가져와서 모든 필드가 채워졌는지 확인해요.
- 모든 필드가 채워졌다면, 감사 메시지를 표시하고 폼을 초기화해요.
두 번째 부분에서는 마법 주문 목록에 효과를 추가해요:
- const spellItems = document.querySelectorAll('#마법주문 li'); ('마법주문' 아이디를 가진 요소 안의 모든 li 요소를 찾아 spellItems 변수에 저장)
- spellItems.forEach(function(item, index) { ... }); (각 항목에 대해 괄호 안의 함수를 실행)
- 마우스를 항목 위에 올렸을 때(mouseover), 글자색을 청록색으로 바꾸고 굵게 표시해요.
- 마우스가 항목에서 벗어났을 때(mouseout), 원래 스타일로 되돌려요.
- 항목을 클릭했을 때(click), 해당 마법에 대한 알림 메시지를 표시해요.
마지막 부분에서는 현재 연도를 표시해요:
- const footer = document.querySelector('footer p'); (footer 안의 p 요소를 찾아 footer 변수에 저장)
- const currentYear = new Date().getFullYear(); (현재 연도를 가져와 currentYear 변수에 저장)
- footer.textContent = ...; (footer의 텍스트 내용을 현재 연도를 포함한 문자열로 설정)"
선생님은 양피지를 들고 웹페이지를 보여주었습니다. 그리고 연락처 폼에 이름과 이메일을 입력하고 제출 버튼을 눌렀습니다. 즉시 "홍길동님, 메시지를 보내주셔서 감사합니다!"라는 알림창이 나타났습니다.
"보세요! 이제 우리의 웹페이지는 단순히 보기만 하는 것이 아니라, 사용자와 상호작용할 수 있는 살아있는 페이지가 되었어요. 마법 주문 목록에 마우스를 올려보세요, 그리고 클릭도 해보세요!"
선생님은 흐뭇한 미소를 지었습니다.
"축하해요, 초보 마법사님! 이제 여러분은 HTML, CSS, JavaScript의 기본을 배웠어요. 이 세 가지 마법을 함께 사용하면 놀라운 웹 세계를 창조할 수 있답니다."
"다음 시간에는 이런 웹페이지가 어떻게 인터넷을 통해 다른 사람들과 공유될 수 있는지 알아볼 거예요. 질문 있으신가요?"
