도로랜드 정보국 웹 특수작전팀

📜 임무 지령서

허허, 반가워 신입 요원! ⚡
나는 정적인 웹페이지에 생명을 불어넣는 마법사, JS(자바스크립트) 요원 아저씨란다.
HTML과 CSS 요원들이 예쁜 뼈대와 디자인을 만들어 주었구만! 하지만 아직 움직이지 않는 그림일 뿐이지.
이제 내 차례야! 버튼을 누르면 알림이 뜨고, 글자가 변하는 등 움직이고 반응하는 진짜 웹페이지를 만들어 볼 거란다.
어렵지 않으니까 아저씨의 마법 주문을 잘 따라 해보렴! 우측 편집기에서 미션 시작!

📘 정보국 1급 기밀 (JS 마법 백과사전)

미션 1

마법 지팡이로 제목 찾기

HTML에 있는 큰 제목(main-title)을 찾아서 'title'이라는 상자에 담아보자꾸나!

힌트: document.getElementById 사용
const title = document.getElementById('main-title');

미션 2

글자 바꾸기 마법

찾아낸 제목의 글자를 "자바스크립트 마법 성공!"으로 확 바꿔볼까?

힌트: innerText 사용
title.innerText = "자바스크립트 마법 성공!";

미션 3

글자색 바꾸기 마법

제목이 눈에 확 띄도록 파란색(blue)으로 색을 입혀주렴!

힌트: style.color 사용
title.style.color = "blue";

미션 4

콕 집어서 마법 걸기 (부분 변경)

허허, 제목 전체를 바꾸는 건 너무 쉽지? 이번엔 더 정교한 마법을 보여주마!
문장 전체가 아니라 <span>이라는 투명 망토를 입고 있는 특정한 단어(아이디: park-status)만 찾아서 '정상 운영'으로 싹 바꿔보렴!

힌트: document.getElementById 와 innerText 사용

const statusSpan = document.getElementById('park-status');
statusSpan.innerText = "정상 운영";
statusSpan.style.color = "blue";

미션 5

알림 마법 주문(함수) 만들기

화면에 환영 인사 알림창을 띄우는 'showMagic' 이라는 마법 주문을 만들어볼까?

힌트: function과 alert 사용

function showMagic() {
  alert("환영합니다!");
}

미션 6

버튼에 클릭 마법 걸기

마법 버튼을 찾아내서, 클릭할 때 방금 만든 'showMagic' 주문이 발동되게 해보자!

힌트: onclick 사용

const btn = document.getElementById('magic-btn');
btn.onclick = showMagic;

미션 7 (보너스)

외부 세계와 통신하기 (API 예습)

힌트: fetch, if, src 속성 사용

fetch('https://dog.ceo/api/breeds/image/random')
  .then(res => res.json())
  .then(data => {
    if (data.status === "success") {
      alert("강아지 사진 발견!");
      document.getElementById('main-img').src = data.message;
    }
  });