변수 및 조건 · 마틴과 코딩하기

페이지에 내용을 기억하고 결정을 내리도록 가르치세요. 이것이 프로그래밍의 핵심이다.

보여줄게: 변수 – 프로그램의 메모리

변수는 프로그램이 값을 저장하는 레이블이 지정된 상자야.

let clickCount = 0;        // number
let name = "Jake";         // string (text)
let isWeekend = true;      // true/false

let 변경할 수 있는 변수를 생성해.
const (이전에 알고 있듯이) 절대 변경되지 않는 변수를 생성해.

변수를 사용하여 수학을 수행하고 변경할 수 있어.

clickCount = clickCount + 1;   // increase by 1
clickCount++;                  // same thing, shorter

보여줄게: 클릭 카운터

지난 강의의 버튼과 변수를 결합해 보겠어.

<button id="counter">Clicked: 0×</button>

const counter = document.getElementById("counter");
let count = 0;

counter.addEventListener("click", () => {
  count++;
  counter.textContent = "Clicked: " + count + "×";
});

처음으로 페이지가 무언가를 기억해. 클릭할 때마다 상자의 숫자가 증가하여 표시돼.

보여줄게: 조건 – 결정하기

조건은 다음과 같이 말해. “이것이 참이면 A를 수행하고, 그렇지 않으면 B를 수행하해.”

if (count >= 10) {
  counter.textContent = "Ten clicks! You've got some serious stamina 🏆";
} else {
  counter.textContent = "Clicked: " + count + "×";
}

-if (condition) { ... }– “이게 사실이라면…” -else { ... }– ”…그렇지 않으면”

비교:>보다 큼,<미만,>=보다 크거나 같음,===같음,!==같지 않어.

네 차례 💪

깜짝 놀랄 만한 카운터를 만드세요. 특정 횟수의 클릭이 끝나면 추가 작업이 발생해.

🏫 학교 웹사이트 – 최고의 구내식당 음식에 투표해

<h2>Vote for pizza day!</h2>
<button id="vote">Vote 🍕 (0 votes)</button>
<p id="result"></p>

const vote = document.getElementById("vote");
const result = document.getElementById("result");
let votes = 0;

vote.addEventListener("click", () => {
  votes++;
  vote.textContent = "Vote 🍕 (" + votes + " votes)";

  if (votes >= 5) {
    result.textContent = "Decided! Pizza day wins the election. 🏆";
  }
});

🙋 개인 웹사이트 - 저글링 카운터

<h2>How many times can I juggle the ball?</h2>
<button id="kick">Kick! (0)</button>
<p id="record"></p>

const kick = document.getElementById("kick");
const record = document.getElementById("record");
let kicks = 0;

kick.addEventListener("click", () => {
  kicks++;
  kick.textContent = "Kick! (" + kicks + ")";

  if (kicks === 20) {
    record.textContent = "20 kicks – new personal record! 🎉";
  }
});

🌍 여행 일기 – 방문한 국가 카운터

<h2>Country counter</h2>
<button id="country">Add a country (0)</button>
<p id="rating"></p>

const country = document.getElementById("country");
const rating = document.getElementById("rating");
let countryCount = 0;

country.addEventListener("click", () => {
  countryCount++;
  country.textContent = "Add a country (" + countryCount + ")";

  if (countryCount >= 10) {
    rating.textContent = "Ten countries – you're a globetrotter! 🌍";
  } else if (countryCount >= 5) {
    rating.textContent = "Five countries – beginner traveler. 🎒";
  }
});

주목해else if– 여러 조건을 함께 연결하는 방법야.

⚽ 클럽 웹사이트 – 점수 추적기

<h2>Shooting practice</h2>
<button id="goal">GOAL! ⚽</button>
<p id="score">Score: 0</p>

const goal = document.getElementById("goal");
const score = document.getElementById("score");
let goals = 0;

goal.addEventListener("click", () => {
  goals++;

  if (goals >= 10) {
    score.textContent = "Score: " + goals + " – hat trick and more! Player of the match 🏆";
  } else {
    score.textContent = "Score: " + goals;
  }
});

💡

**실제 프로그래밍을 배웠어.** 변수와 조건은 단순한 "웹 관련"이 아닙니다. Python, 게임, 앱에서 정확히 동일한 방식으로 작동해. 변수와 조건을 아는 사람이라면 누구나 세상의 어떤 프로그래밍 언어와도 대화할 수 있어.

✅

**직접 확인해:** 카운터가 중요하며 한도에 도달하면 추가 작업이 발생해. 코드가 수행하는 작업을 한 줄씩 큰 소리로 설명해보세요. 그렇게 할 수 있다면 기본 사항을 숙지한 것야.

이번 수업에서 배울 점

변수는 값이 포함된 상자야.let(변하기 쉬운),const(변경불가).count++1씩 증가해.
조건if / else if / else프로그램이 결정을 내리는 방법야.
비교 용도>,<,>=,===,!==.