업무의 말에서,
첫 코드까지

이 교재로 공부하는 방법

각 단원은 55분입니다. ‘목표 읽기 → 업무 문장으로 이해 → 실행 전 예상 → 한 곳 수정 → 워크시트 A·B → 종료 질문’의 순서로 공부합니다. 두 단원 사이에 10분 휴식이 있습니다. 모르는 영문 용어는 마지막 용어 사전에서 찾아도 됩니다.

준비물: PC와 최신 Chrome/Edge. 편집기 설치·별도 학생 계정 가입은 필요하지 않습니다. 온라인 실습·제출에는 인터넷 연결이 필요합니다. 오프라인 HTML은 읽기와 JavaScript 기초 실행에 사용합니다. 코드에 표시된 금액은 모두 가상의 만원 단위입니다. 실행이 차단되면 예상 출력과 워크시트로 학습합니다.

01. 코딩은 ‘업무 절차를 빠짐없이 쓰는 일’입니다

동료에게 “이번 달 예산 좀 정리해 주세요”라고 말하면 동료는 문맥을 짐작합니다. 컴퓨터는 ‘이번 달’의 범위, 어떤 자료를 읽을지, 어떻게 계산할지, 무엇을 보여 줄지 스스로 정하지 못합니다. 프로그램은 이 결정을 작은 명령으로 적은 것입니다. 코드는 그 명령을 프로그래밍 언어의 문법으로 쓴 글이고, 실행은 컴퓨터가 그 글의 지시를 수행하는 일입니다.

JavaScript(자바스크립트)는 브라우저가 실행할 수 있는 프로그래밍 언어입니다. 버튼을 눌렀을 때 계산하고 화면을 바꾸는 데 사용할 수 있습니다. Java와는 별개의 언어입니다. 이 수업은 브라우저에서 작은 계산과 화면 연결을 익힙니다. 서버를 만들거나 회사 시스템을 연결하는 과정은 후속 학습으로 남깁니다.

02. 설치 없이 첫 결과를 봅니다

1. 아래 실행창에서 코드를 먼저 읽습니다. 결과가 무엇일지 종이에 적습니다.
2. 실행을 누릅니다. 아래 짙은 색 영역이 이 교재의 출력창입니다.
3. 문장의 ‘기획팀’을 본인의 가상 부서로 바꾸고 다시 실행합니다.
4. 100을 200으로 바꿔 숫자 결과도 달라지는지 확인합니다.

console.log("안녕하세요, 기획팀입니다.");
console.log(100 + 20);

안녕하세요, 기획팀입니다.
120

console.log(값);는 값을 확인하도록 출력하는 명령입니다. 여기서 console.log는 도구의 이름, 소괄호 ( ) 안은 확인할 값입니다. 따옴표 안의 글자는 문자열이고, 100 + 20은 숫자 계산입니다. 세미콜론 ;은 문장 끝을 표시합니다. // 뒤는 같은 줄의 주석으로, 사람이 읽는 설명이며 계산하지 않습니다.

// 단위: 만원
console.log((80 / 100) * 100);
console.log("위 숫자의 단위는 %입니다.");

80
위 숫자의 단위는 %입니다.

03. 브라우저의 실제 콘솔도 알아 둡니다

교재의 실행창은 연습용 출력 도구입니다. 실제 브라우저에도 개발자 도구의 Console 탭이 있습니다. Chrome에서 Windows는 Ctrl + Shift + J, Mac은 ⌘ + ⌥ + J로 엽니다. Edge에서는 메뉴의 ‘개발자 도구’를 열어 Console을 선택할 수 있습니다. 회사 설정에 따라 도구가 제한되면 교재 실행창을 사용합니다.

이번 단계에서는 1 + 2처럼 직접 이해한 짧은 식만 손으로 입력하고 Enter를 눌러 봅니다. 브라우저가 붙여넣기 경고를 표시하면 해제하지 말고 교재 실행창에서 연습합니다. 실제 콘솔에서 console.log(1 + 2)를 실행하면 3 외에 undefined가 보일 수 있습니다. 3은 출력한 값이고 undefined는 그 출력 명령 자체의 반환값이어서, 오류가 아닙니다.

04. 오늘부터 사용할 표기 약속

예제의 금액은 모두 가상의 만원 단위입니다. 100은 100만원을 뜻하며 숫자 자체에 ‘만원’이나 쉼표를 넣지 않습니다. 영문 코드 기호는 반각 문자로 입력합니다. “ ”처럼 문서 편집기가 바꾼 굽은 따옴표 대신 " " 또는 ' '를 사용합니다. 코드의 영문 이름은 대소문자를 구별합니다.

01. 변수는 값을 다시 부르기 위한 이름입니다

계산할 때 200이 예산인지 지출인지 기억하기는 어렵습니다. const budget = 200;이라고 쓰면 200이라는 값을 budget이라는 이름으로 사용할 수 있습니다. 이때 =는 ‘양쪽이 같다’는 수학 기호가 아니라 오른쪽 값을 왼쪽 이름에 저장한다는 대입 기호입니다. let count = 1; 다음에 count = count + 1;이라고 쓰면 오른쪽의 현재 값 1에 1을 더해 2를 다시 저장합니다.

우선 const로 시작하고, 재할당이 필요한 경우 let을 씁니다. const budget = 100; 뒤에 budget = 200;을 실행하면 오류입니다. const가 ‘세상의 모든 값이 영원히 변하지 않는다’는 뜻은 아닙니다. 6단원의 객체와 4단원의 배열은 const로 선언해도 내부 내용을 바꿀 수 있습니다. 이 수업에서는 읽기 중심으로 사용합니다.

const budget = 200;
const spent = 50;
const rate = (spent / budget) * 100;
console.log(rate);
let count = 1;
count = count + 1;
console.log(count);

25
2

02. 숫자와 문자열은 다릅니다

100은 숫자, "100"은 숫자 모양의 글자입니다. 문자열은 부서명, 보고서 제목, 입력창에서 읽은 원문에 사용합니다. +는 숫자끼리 더할 때 덧셈이지만 문자열이 끼면 글자를 연결할 수 있습니다. Number("100")은 숫자로 바꾸는 명령이고, typeof는 값의 자료형을 확인하는 연산자입니다.

console.log("100" + 20);
console.log(Number("100") + 20);
console.log(typeof "100");
console.log(typeof 100);

10020
120
string
number

03. 계산식을 업무 문장으로 설명합니다

집행률은 (spent / budget) * 100입니다. /는 나눗셈, *는 곱셈, -는 뺄셈입니다. 괄호는 먼저 계산할 부분을 드러냅니다. 예산 200, 지출 50이면 50÷200×100=25입니다. 숫자 25를 출력한 것이므로 ‘%’라는 단위는 설명이나 화면 문구로 붙여야 합니다. console.log(rate + "%");로 써 봅니다.

변수 이름은 의미를 드러내면 좋습니다. budget은 예산, spent는 지출, rate는 비율입니다. 띄어쓰기 없이 budgetTotal처럼 단어 경계에서 대문자를 쓸 수 있습니다. 숫자로 시작하는 이름은 사용할 수 없고, budget과 Budget은 다른 이름입니다. 한글 이름도 가능하지만 수업에서는 자료와 맞추기 쉽게 이 세 이름을 사용합니다.

선택 · 숫자에 이름표를 붙이는 TypeScript

JavaScript는 값을 실행하며 처리합니다. TypeScript는 실행 전에 ‘이 값은 숫자여야 한다’ 같은 약속을 검사합니다. : number는 숫자라는 타입 표시입니다. 실행할 때에는 이 표시가 없는 JavaScript로 바뀝니다.

const budget: number = 400;
const spent: number = 100;
console.log((spent / budget) * 100);

실습창에서 TypeScript 모드로 실행한 뒤 spent의 값을 "100"으로 바꿔 보세요. 숫자 자리에 문자를 넣으면 실행 전에 오류를 보여 줍니다. 타입 표기를 생략해도 값에서 타입을 추론할 수 있습니다.

01. ‘맞다/아니다’로 답할 수 있는 질문을 만듭니다

“지출이 많은가?”는 기준이 없습니다. “집행률이 80% 이상인가?”는 참 또는 거짓으로 답할 수 있습니다. 코드에서는 참을 true, 거짓을 false라고 씁니다. 이런 값을 불리언이라고 합니다. rate >= 80은 rate가 80 이상인지 묻는 조건식입니다.

console.log(80 >= 80);
console.log(80 > 80);
console.log(80 === "80");
console.log(85 >= 80 && 85 < 100);

true
false
false
true

02. 규칙을 겹치지 않는 구간으로 만듭니다

이 교재의 업무 규칙은 80% 미만 정상 / 80% 이상 100% 미만 주의 / 100% 이상 초과입니다. ‘초과’는 이 워크숍에서 붙인 상태 이름으로, 정확히 100%도 포함합니다. 실무에서는 조직의 실제 정책에 맞춰 이름과 기준을 합의해야 합니다.

if (조건) { 할 일 }은 조건이 맞으면 중괄호 안을 실행합니다. else if는 앞 조건이 틀렸을 때 다음 조건을 묻고, else는 앞 조건이 모두 틀린 나머지를 처리합니다. 한 연결 구조에서는 처음 참인 갈래 하나만 실행합니다.

const rate = 100;
if (rate >= 100) {
  console.log("초과");
} else if (rate >= 80) {
  console.log("주의");
} else {
  console.log("정상");
}

초과

먼저 100 이상인지 묻습니다. 아니라면 이미 100 미만입니다. 그다음 80 이상인지 물으면 80 이상 100 미만 구간만 남습니다. 두 조건 모두 아니면 80 미만입니다. 반대로 80 이상부터 물으면 100도 첫 조건에 걸려 ‘주의’가 됩니다. 코드를 읽을 때는 순서도 함께 읽어야 합니다.

03. 정상값만 확인하면 규칙 오류를 놓칩니다

50과 120만 시험하면 80을 잘못 처리하는 코드가 드러나지 않을 수 있습니다. 79, 80, 99, 100처럼 경계의 바로 전과 경계 자체를 확인합니다. 실무 요구사항에도 “80%일 때 주의인지 정상인지”를 문장으로 써 두면 개발자와의 해석 차이를 줄일 수 있습니다.

04. 자주 생기는 오류

=는 대입이고 ===는 비교입니다. 비교하려다 값을 대입하지 않도록 합니다. 80 <= rate < 100처럼 수학식 그대로 연결하지 않습니다. 두 비교를 rate >= 80 && rate < 100으로 연결합니다. 단순히 코드가 실행된다고 업무 규칙까지 맞는 것은 아닙니다.

01. 배열은 순서가 있는 목록입니다

월별 실적이나 부서명처럼 여러 값을 한 이름으로 묶는 자료를 배열이라고 합니다. 대괄호 [ ] 안에 쉼표로 구분해 씁니다. const costs = [20, 30, 50];은 세 지출을 가진 목록입니다. 위치 번호인 인덱스는 0부터 시작하므로 첫 값은 costs[0], 마지막 값은 costs[2]입니다. 값의 개수는 costs.length로 읽습니다.

const teams = ["기획", "전략", "관리"];
console.log(teams[0]);
console.log(teams.length);
for (const team of teams) {
  console.log(team);
}

기획
3
기획
전략
관리

배열을 const로 선언했다는 것은 costs라는 변수에 다른 배열을 다시 대입하지 않겠다는 뜻입니다. 배열 안의 값을 바꾸는 것은 별도 동작입니다. 예를 들어 costs[0] = 25;는 가능합니다. 지금은 자료를 바꾸기보다 하나씩 읽어 계산하는 데 집중합니다.

02. for...of는 목록에서 하나씩 꺼내는 반복입니다

for (const cost of costs) { ... }를 “costs 안의 각 값을 cost라고 부르면서, 중괄호 안을 한 번씩 실행한다”라고 읽습니다. 첫 반복에서 cost는 20, 다음에는 30, 마지막에는 50입니다. cost는 목록 전체가 아니라 그때 읽은 값 하나입니다. 각 반복마다 새로 묶이는 값이므로 const를 써도 됩니다.

const costs = [20, 30, 50];
let total = 0;
for (const cost of costs) {
  total = total + cost;
  console.log(total);
}
console.log("최종 합계:", total);

20
50
100
최종 합계: 100

03. 누적 변수는 반복 밖에서 시작합니다

합계 total은 읽을 때마다 바뀌므로 let을 사용합니다. 처음 값을 0으로 정하는 줄은 반복문 바깥에 둡니다. 안에 두면 이전 합계를 매번 잊게 됩니다. total = total + cost에서 오른쪽은 이전 합계와 이번 값을 더하고 왼쪽은 새 합계를 저장합니다. 이 한 줄이 스프레드시트의 여러 행을 합산하는 일을 맡습니다.

빈 배열 []이라면 반복은 한 번도 실행되지 않고 total은 0입니다. 합계에는 자연스럽지만 평균을 구한다면 개수가 0인지 먼저 확인해야 합니다. “자료 없음”과 “실적이 실제로 0”도 업무에서는 다를 수 있으므로 표시 규칙을 정합니다.

04. 합계와 개수는 서로 다른 질문입니다

“80 이상인 실적의 합계”는 해당 값을 더합니다. “80 이상인 달의 개수”는 해당할 때마다 1을 더합니다. 조건문을 반복 안에 넣으면 기준에 맞는 항목만 처리할 수 있습니다. 8시간 수업에서는 합계까지 필수이고, 조건을 결합해 개수를 세는 활동은 선택 문제입니다.

01. 함수는 이름이 붙은 처리 절차입니다

부서마다 집행률 공식을 다시 쓰면 한 곳만 잘못 고칠 수 있습니다. 함수는 입력을 받아 정해진 일을 하고 결과를 돌려주는 절차입니다. function getRate(budget, spent) { ... }로 만들고 getRate(200, 50)으로 사용합니다. 만드는 쪽의 budget·spent는 입력값을 받을 이름인 매개변수이고, 호출할 때 넣는 200·50은 인수입니다.

function getRate(budget, spent) {
  return (spent / budget) * 100;
}
console.log(getRate(200, 50));
console.log(getRate(100, 80));

25
80

return은 결과를 호출한 쪽에 돌려주고 그 함수 실행을 끝냅니다. console.log는 확인용 출력이라서 역할이 다릅니다. 함수가 숫자 25를 반환하면 그 값을 다른 계산이나 화면 표시에 쓸 수 있습니다. return 없이 끝난 호출의 결과는 undefined입니다. 함수 안에서 만든 변수는 보통 함수 밖에서 바로 사용할 수 없으므로 필요한 결과를 반환합니다.

02. 계산보다 입력 검사가 먼저입니다

지출을 예산으로 나눌 때 예산 0은 의미 있는 집행률을 만들지 못합니다. JavaScript에서는 10÷0이 Infinity가 될 수 있으므로 실행 오류가 자동으로 날 것이라고 기대하면 안 됩니다. 입력 조건을 우리가 명시해야 합니다. 최종 계산기의 규칙은 만원 단위의 안전하게 표현되는 정수, 예산은 0 초과, 지출은 0 이상입니다. 이 정수 규칙은 교육용 단순화입니다.

1. 입력 원문을 읽습니다. 입력창의 value는 문자열입니다.
2. trim()으로 앞뒤 공백을 지우고 빈칸인지 먼저 확인합니다. 빈칸이면 입력을 요청합니다.
3. Number(raw)로 변환합니다. Number("abc")는 숫자가 아님을 나타내는 NaN이 됩니다.
4. Number.isFinite(value)로 NaN·Infinity를 거르고, Number.isSafeInteger(value)로 안전한 정수인지 확인합니다.
5. 예산과 지출의 허용 범위를 확인합니다. 통과한 뒤에만 계산합니다.

function readAmount(raw) {
  if (raw.trim() === "") {
    return "입력해 주세요";
  }
  const value = Number(raw);
  if (!Number.isFinite(value) || !Number.isSafeInteger(value) || value < 0) {
    return "0 이상의 정수를 입력해 주세요";
  }
  return value;
}
console.log(readAmount(""));
console.log(readAmount("abc"));
console.log(readAmount("0"));

입력해 주세요
0 이상의 정수를 입력해 주세요
0

위 연습 함수는 설명을 단순하게 하려고 성공하면 숫자, 실패하면 안내 문자열을 반환합니다. 최종 화면 예제는 오류 안내 후 처리를 멈추는 방식으로 작성합니다. 규모가 커지면 성공 여부·값·오류를 객체로 일관되게 반환하는 방식도 배울 수 있습니다.

03. 작게 나누면 확인하기 쉬워집니다

입력 확인, 비율 계산, 상태 판단, 화면 표시는 서로 다른 일입니다. 계산이 틀렸다면 화면 디자인을 바꾸기보다 getRate(200, 50)이 25인지 먼저 확인합니다. 함수의 입력과 출력을 적어 두면 프로그램을 읽는 사람도 같은 기준으로 시험할 수 있습니다.

04. 오류를 읽는 기본 순서

에러가 나오면 첫 메시지에서 이름과 위치를 봅니다. ReferenceError는 이름을 찾지 못했는지, SyntaxError는 괄호·따옴표가 닫혔는지, TypeError는 값의 종류나 사용 방법이 맞는지 확인합니다. 화면이 열리는 것과 계산이 옳은 것은 다르므로 메시지가 없더라도 예상 결과와 비교합니다.

선택 · TypeScript 함수의 입력과 출력 타입

function getRate(budget: number, spent: number): number {
  return (spent / budget) * 100;
}
console.log(getRate(200, 50));

괄호 안의 : number는 입력, 괄호 뒤의 : number는 반환값의 약속입니다. getRate("200", 50)을 시험하면 오류가 납니다. 타입 검사는 예산이 양수인지까지 보장하지 않습니다. 0·빈칸·음수 같은 업무 규칙은 계속 직접 검사해야 합니다.

W05-B처럼 숫자 또는 안내 문장을 반환한다면 반환 타입을 number | string으로 씁니다. 세로줄은 ‘숫자 또는 문자열 중 하나’라는 뜻이며, 예산0 검사 같은 업무 규칙은 그대로 유지합니다.

01. 객체는 이름 붙은 정보를 한 건으로 묶습니다

표에서 부서 한 행은 부서명, 예산, 지출을 함께 가집니다. 객체는 이런 관련 정보를 속성 이름과 값으로 묶습니다. { name: "기획", budget: 100, spent: 80 }에서 name·budget·spent는 속성 이름입니다. team.spent는 team 자료에서 spent 속성의 값을 읽습니다. 점 앞은 자료 이름, 점 뒤는 읽을 항목 이름입니다.

const team = { name: "기획", budget: 100, spent: 80 };
console.log(team.name);
console.log(team.spent);
console.log((team.spent / team.budget) * 100);

기획
80
80

중괄호가 조건문 뒤에서는 실행할 블록이었고, 여기서는 객체를 만드는 표기입니다. 앞뒤 문맥으로 역할을 구별합니다. 배열은 순서가 있는 여러 건, 객체는 이름이 붙은 한 건의 정보로 생각하면 시작하기 쉽습니다. teams[0].name은 ‘첫 자료의 부서명’입니다.

02. 객체를 배열에 넣으면 작은 표가 됩니다

const teams = [
  { name: "기획", budget: 100, spent: 80 },
  { name: "전략", budget: 300, spent: 160 }
];
let budgetTotal = 0;
let spentTotal = 0;
for (const team of teams) {
  budgetTotal = budgetTotal + team.budget;
  spentTotal = spentTotal + team.spent;
}
console.log(budgetTotal);
console.log(spentTotal);
console.log((spentTotal / budgetTotal) * 100);

400
240
60

반복문은 team에 한 부서씩 넣고 예산 합계와 지출 합계를 각각 갱신합니다. 전체 집행률은 240÷400×100=60%입니다. 개별 집행률의 단순평균 약 66.67%와 다릅니다. 전략 부서의 예산이 기획 부서의 세 배이기 때문입니다. 두 값은 서로 다른 질문에 답하므로 보고서 제목과 계산 정의에 맞게 사용합니다.

03. 값과 단위를 확인하면서 집계합니다

위 예제는 모든 행이 이미 검증되었다고 가정합니다. 실제 자료에 쉼표, ‘만원’ 문자열, 누락된 spent, 중복 부서가 있다면 먼저 처리 규칙을 정해야 합니다. 소수나 음수가 허용되는 업무도 별도 정의가 필요합니다. 프로그램은 애매한 자료를 자동으로 올바르게 해석하지 않습니다.

합계가 예상과 다르면 반복 안에 console.log(team.name, budgetTotal, spentTotal);을 넣어 어느 행에서 값이 달라지는지 봅니다. 이처럼 원인을 좁히는 작업을 디버깅이라고 합니다. 자료형 확인 → 첫 행 확인 → 중간 합계 확인 → 최종 수식 확인의 순서가 유용합니다. 오타인 team.spend는 정의되지 않은 속성이므로 undefined가 되고 계산 결과가 NaN으로 번질 수 있습니다.

{ "name": "기획", "budget": 100, "spent": 80 }

선택 · TypeScript로 표의 한 행에 모양 정하기

interface Team {
  name: string;
  budget: number;
  spent: number;
}
const team: Team = { name: "전략", budget: 300, spent: 160 };
console.log(team.spent);

interface는 객체가 가져야 할 속성 이름과 타입을 정합니다. spent를 빼거나 문자열로 바꿔 오류를 확인하세요. TypeScript는 외부 자료의 실제 내용을 자동 검증하지 않으므로 입력 검사를 대신하지 않습니다.

Team[]는 Team 객체가 여러 개 들어 있는 배열입니다. W06-B에서 const teams: Team[] = [...]로 작성하면 각 행의 속성과 타입을 함께 검사할 수 있습니다.

01. 웹 화면의 세 역할을 구별합니다

HTML은 제목·입력창·버튼 같은 화면의 구조, CSS는 크기·색·배치, JavaScript는 입력을 읽고 계산하고 결과를 바꾸는 동작을 담당합니다. HTML의 <button>확인</button>에서 꺾쇠 안의 이름을 태그라고 합니다. id="result"는 요소를 찾을 수 있도록 붙이는 고유 이름입니다.

브라우저는 HTML을 요소들의 연결 구조로 읽어 둡니다. JavaScript가 이 구조를 찾아 바꿀 수 있게 제공하는 방식을 DOM이라고 합니다. ‘문서 객체 모델’이라는 이름을 외우기보다, 지금은 “화면의 입력창과 결과 영역을 코드에서 찾는 통로”로 이해합니다. DOM은 브라우저가 제공하는 기능이며 JavaScript 문법 자체와 구별됩니다.

<label for="name">이름</label>
<input id="name" type="text">
<button id="hello" type="button">인사하기</button>
<p id="result" aria-live="polite"></p>

02. 찾기 → 읽기 → 실행 등록 → 쓰기

1. document.querySelector("#name"): id가 name인 요소를 찾습니다. #은 id를 찾는 표기입니다.
2. input.value: 입력창에 적힌 원문을 읽습니다. 숫자처럼 보여도 문자열입니다.
3. button.addEventListener("click", 함수): 클릭했을 때 할 일을 등록합니다. 지금 바로 실행하는 것은 아닙니다.
4. result.textContent = 문장;: 결과 요소의 텍스트를 바꿉니다.

const input = document.querySelector("#name");
const button = document.querySelector("#hello");
const result = document.querySelector("#result");

function sayHello() {
  const name = input.value.trim();
  if (name === "") {
    result.textContent = "이름을 입력해 주세요";
    return;
  }
  result.textContent = name + "님, 반갑습니다.";
}
button.addEventListener("click", sayHello);

sayHello는 함수를 전달하는 이름이고 sayHello()는 그 함수를 지금 호출하는 표현입니다. 이벤트에는 나중에 호출할 함수 자체를 전달합니다. 위 코드가 요소를 찾으려면 입력창과 버튼이 먼저 만들어져 있어야 합니다. 한 HTML 파일로 만들 때는 본문 요소 뒤, </body> 앞에 스크립트를 놓으면 이해하기 쉽습니다.

03. 실제 화면에서 눌러 봅니다

이 작은 화면은 위 코드와 같은 순서로 작동합니다. ‘전략팀’을 넣은 뒤 버튼을 누르고, 내용을 지운 뒤 다시 눌러 보세요. 입력할 때 결과가 즉시 바뀌지 않는 이유는 click 이벤트에만 함수를 연결했기 때문입니다.

const raw = "80"; // 실제 입력창에서도 문자열을 읽습니다.
const amount = Number(raw);
const message = "지출은 " + amount + "만원입니다.";
console.log(message);

지출은 80만원입니다.

04. 못 찾은 요소와 안전한 텍스트 출력

id 철자가 다르거나 요소가 생기기 전에 찾으면 querySelector 결과가 null입니다. 이어서 value나 textContent를 사용하면 오류가 납니다. HTML의 id와 코드의 #이 붙은 이름을 나란히 비교합니다. 사용자가 입력한 글자는 textContent로 표시합니다. innerHTML은 글자를 HTML로 해석하므로 이 수업의 단순 결과 출력에는 사용하지 않습니다.

const showMessage = function () {
  console.log("버튼을 누르면 실행할 일");
};
showMessage();

버튼을 누르면 실행할 일

01. 만들기 전에 인수 기준을 적습니다

이번 결과물은 한 부서의 예산 집행률을 확인하는 작은 화면입니다. 가상의 숫자를 넣어 수식과 조건을 익히는 교육용 도구입니다. 만원 단위의 안전한 정수를 입력하며, 예산은 0보다 크고 지출은 0 이상입니다. 누락·비숫자·음수·소수는 계산하지 않고 이유를 안내합니다. 집행률은 지출÷예산×100, 상태는 80% 미만 정상·80% 이상 100% 미만 주의·100% 이상 초과입니다.

화면에는 소수점 한 자리 비율과 상태를 함께 표시합니다. 판정에는 반올림 전 원래 값을 씁니다. 표시 때문에 상태가 헷갈리는 경우 원래 비율도 함께 안내합니다. 예산10000·지출7996은 실제79.96%여서 ‘정상’이지만 한 자리 표시가80.0%가 될 수 있습니다. 경계 근처의 표시 규칙도 요구사항입니다.

02. 제공된 틀에서 세 줄을 완성합니다

1. 학생용 시작 파일을 엽니다. 입력 검증과 화면 구조는 이미 준비되어 있습니다.
2. 첫 입력칸의 0을 (spent / budget) * 100으로 바꿉니다.
3. 초과 조건과 주의 조건의 false를 알맞은 비교식으로 바꿉니다.
4. ‘작성한 규칙 시험하기’를 누르고 예산100·지출80을 시험합니다.
5. 수정 내용을 ‘적용한 계산기 HTML 내려받기’로 저장합니다. 소스 편집이 가능한 환경에서는 HTML의 TODO 세 줄을 직접 수정해 다시 열어도 됩니다.

이 활동은 모든 HTML을 처음부터 타이핑하는 시험이 아닙니다. 수식·조건·검증을 설명하고 실제 결과로 확인하는 것이 목표입니다. 회사에서 다운로드가 제한되면 입력칸에서 동작을 확인하고 워크시트에 세 줄과 검증 결과를 적습니다.

function getStatus(rate) {
  if (rate >= 100) return "초과";
  if (rate >= 80) return "주의";
  return "정상";
}
console.log(getStatus(79));
console.log(getStatus(80));
console.log(getStatus(100));

정상
주의
초과

const budget = 10000;
const spent = 7996;
const rate = (spent / budget) * 100;
console.log(rate);
console.log(rate.toFixed(1));
console.log(rate >= 80);

79.96
80.0
false

03. 검증표로 확인합니다

먼저 예상 결과를 쓰고, 그다음 화면에 입력해 실제 결과를 비교합니다. W08-B에서는 일반50%, 경계80%, 경계100%, 예산0, 지출빈칸, 지출abc의 여섯 사례가 필수입니다. 나머지는 시간이 되면 추가합니다. 검증표에서 ‘소수’는 최종 계산기가 정수 입력만 허용한다는 업무 규칙을 확인하는 사례입니다.

04. 차이를 발견하면 재현 가능한 설명을 남깁니다

“안 돼요” 대신 “starter.html에서 예산100, 지출100을 넣고 계산을 누르면 ‘주의’가 나옵니다. 예상은 ‘초과’입니다. 100 이상 조건이 먼저인지 확인해 주세요”라고 적습니다. 파일 이름, 실행 단계, 입력값, 예상, 실제 결과가 있으면 강사나 개발자가 같은 문제를 확인할 수 있습니다. 고친 뒤에는 이전에 통과한 사례도 다시 시험합니다.

05. AI와 협업할 때도 같은 기준을 씁니다

AI에게 도움을 받을 때는 업무 규칙, 입력 범위, 원하는 출력, 검증 사례를 함께 줍니다. “집행률 계산기를 만들어 줘”보다 “만원 정수, 예산>0·지출≥0, 80·100 경계를 포함, 누락은 오류 안내, 100/80은 주의여야 한다”가 더 검토하기 쉽습니다. 회사 데이터 대신 이 교재의 가상 자료를 씁니다. 생성된 코드를 실행하기 전에 어느 입력을 읽고 어떤 자료를 보내는지 확인하고, 테스트 표로 결과를 검증합니다.

빠르게 찾아보는 문법

막혔을 때 확인표

에러 이름만으로 원인이 하나로 결정되지는 않습니다. 아래는 이 수업에서 자주 확인할 출발점입니다. 입력값과 실행한 코드를 함께 확인하세요.

처음 만나는 용어 사전

참고 문서

설명·실습·가상 업무 시나리오는 이 교육을 위해 작성했습니다. 문법과 브라우저 동작은 아래의 공식 기술 문서를 확인했습니다. 외부 링크는 추가 학습용입니다. 온라인 실습과 제출에는 인터넷 연결이 필요합니다. 확인일:2026-10-17.

• MDN · 문법과 자료형 / 조건과 오류 처리
• MDN · 반복 / 함수 / 객체
• MDN · Number.isFinite / Number.isSafeInteger / toFixed
• MDN · querySelector / addEventListener / textContent
• Chrome · 콘솔에서 JavaScript 실행 / 콘솔 열기와 기능
• MDN · JSON