첫 번째 주문: 어떤 일을 하는 버튼

보여줄게: 모든 주문의 세 단계

JavaScript가 페이지에서 수행하는 거의 모든 작업은 다음 세 단계를 따릅니다.

1. 페이지에서 요소 찾기(버튼, 제목, 이미지…)
2. 이벤트 듣기(클릭, 마우스 오버, 텍스트 입력…)
3. 뭔가를 해보세요(텍스트, 색상 변경, 숨기기, 표시…).

코드에서는 다음과 같어. HTML에서 버튼과 단락을 추가해.

<button id="my-button">Click me</button>
<p id="greeting">Nothing has happened yet.</p>

그리고script.js:

// 1. Find the elements by their id
const myButton = document.getElementById("my-button");
const greeting = document.getElementById("greeting");

// 2. Listen for a click on the button
myButton.addEventListener("click", () => {
  // 3. Do something: change the paragraph's text
  greeting.textContent = "The spell works! 🎉";
});

새로운 내용을 분석해 보겠어.

• id="my-button" – 요소의 이름 태그로, 클래스와 유사하지만id페이지에 한 번만 나타나야 해. JavaScript는 이를 사용하여 요소를 찾어.
• const – 우리가 찾은 요소를 저장하는 이름(변수)이 있는 상자야. 변수에 대해서는 다음 시간에 자세히 알아보세요.
• document.getElementById("...") – “페이지에서 이 ID를 가진 요소를 찾아주세요.”
• addEventListener("click", () => { ... }) – “클릭이 발생하면 중괄호 안에 있는 내용을 실행해.” 저 웃기는 화살() => {}나중에 실행되는 코드 패키지인 함수라고 해.
• textContent – 요소 내부의 텍스트야. 새 텍스트를 할당하면 페이지에서 즉시 변경돼.

네 차례 💪

웹사이트에 첫 번째 주문을 추가해. 프로젝트에 따라 하나를 선택하해(또는 직접 구성하해).

<button id="lunch-button">What's for lunch today?</button>
<p id="lunch"></p>

const lunchButton = document.getElementById("lunch-button");
const lunch = document.getElementById("lunch");

lunchButton.addEventListener("click", () => {
  lunch.textContent = "Today: pizza and salad! 🍕";
});

<button id="joke-button">Tell me a joke</button>
<p id="joke"></p>

const jokeButton = document.getElementById("joke-button");
const joke = document.getElementById("joke");

jokeButton.addEventListener("click", () => {
  joke.textContent = "Why do programmers prefer dark mode? Because light attracts bugs! 😄";
});

<button id="where-button">Where are we going next?</button>
<p id="where"></p>

const whereButton = document.getElementById("where-button");
const where = document.getElementById("where");

whereButton.addEventListener("click", () => {
  where.textContent = "Packing our bags: we're headed to the beach in Greece! 🌊";
});

<button id="match-button">When's the next match?</button>
<p id="match"></p>

const matchButton = document.getElementById("match-button");
const match = document.getElementById("match");

matchButton.addEventListener("click", () => {
  match.textContent = "Saturday at 10:00, home game vs. Riverside. Come cheer us on! 📣";
});

button {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background-color: #1d4ed8;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #1e40af;
}

© 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관