JavaScript
2026.02.07
📖 22분 분량
JavaScript 기초: 변수, 함수, 이벤트 다루기
정적인 웹페이지에 생명을 불어넣는 마법
JavaScript가 뭐죠?
HTML이 뼈대, CSS가 디자인이라면, JavaScript는 웹페이지의 뇌입니다. 버튼을 클릭하면 무언가 일어나게 하고, 사용자의 입력에 반응하게 만듭니다.
JavaScript로 할 수 있는 것들:
- 버튼 클릭 시 알림 표시
- 입력값 검증 (이메일 형식 확인 등)
- 애니메이션 실행
- 데이터 가져오기 (API 호출)
- 계산기, 게임, 챗봇 등 만들기
JavaScript 파일 연결하기
<!-- HTML 파일의 body 태그 끝 부분에 -->
<body>
<h1>내 웹사이트</h1>
<button id="myButton">클릭하세요</button>
<script src="script.js"></script> ← 여기!
</body>왜 body 끝에 넣을까요? HTML이 먼저 로드된 후 JavaScript가 실행되어야 하기 때문입니다.
변수: 데이터를 담는 상자
변수 선언하기
// let: 값을 변경할 수 있는 변수
let name = "홍길동";
let age = 25;
let isStudent = true;
console.log(name); // "홍길동" 출력
console.log(age); // 25 출력
// 값 변경 가능
age = 26;
console.log(age); // 26 출력
// const: 값을 변경할 수 없는 상수
const PI = 3.14159;
// PI = 3.14; ← 에러 발생!
// var: 옛날 방식 (사용 비추천)
var oldStyle = "사용하지 마세요";언제 let, 언제 const?
const: 기본적으로 사용 (값이 안 바뀌면)let: 값이 변경될 때만 사용
데이터 타입
// 숫자 (Number)
let count = 100;
let price = 19.99;
// 문자열 (String)
let message = "안녕하세요";
let greeting = '반갑습니다'; // 작은따옴표도 가능
let template = `이름: ${name}`; // 백틱: 변수 삽입 가능
// 불리언 (Boolean)
let isLoggedIn = true;
let hasPermission = false;
// 배열 (Array)
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits.length); // 3
// 객체 (Object)
let person = {
name: "홍길동",
age: 25,
job: "개발자"
};
console.log(person.name); // "홍길동"
console.log(person.age); // 25함수: 코드를 재사용하는 방법
함수 선언하기
// 방법 1: 함수 선언식
function greet(name) {
console.log("안녕하세요, " + name + "님!");
}
greet("철수"); // "안녕하세요, 철수님!"
greet("영희"); // "안녕하세요, 영희님!"
// 방법 2: 함수 표현식
const add = function(a, b) {
return a + b;
};
let result = add(5, 3);
console.log(result); // 8
// 방법 3: 화살표 함수 (모던한 방식)
const multiply = (a, b) => {
return a * b;
};
// 한 줄이면 더 간단하게
const square = x => x * x;
console.log(square(5)); // 25return 값
// return이 있는 함수
function calculateTotal(price, quantity) {
return price * quantity;
}
let total = calculateTotal(1000, 3);
console.log(total); // 3000
// return이 없는 함수
function sayHello() {
console.log("Hello!");
// return이 없으면 undefined 반환
}DOM 조작: HTML 요소 다루기
요소 선택하기
// ID로 선택
const button = document.getElementById('myButton');
// 클래스로 선택
const cards = document.getElementsByClassName('card');
// CSS 선택자로 선택 (권장)
const title = document.querySelector('h1');
const allButtons = document.querySelectorAll('button');
// 첫 번째만 선택
const firstCard = document.querySelector('.card');
// 모두 선택 (배열 형태)
const allCards = document.querySelectorAll('.card');내용 변경하기
// 텍스트 변경
const heading = document.querySelector('h1');
heading.textContent = "새로운 제목";
// HTML 변경
const container = document.querySelector('#container');
container.innerHTML = '<p>새로운 내용</p>';
// 스타일 변경
heading.style.color = 'red';
heading.style.fontSize = '30px';클래스 추가/제거
const box = document.querySelector('.box');
// 클래스 추가
box.classList.add('active');
// 클래스 제거
box.classList.remove('hidden');
// 클래스 토글 (있으면 제거, 없으면 추가)
box.classList.toggle('highlighted');이벤트: 사용자 액션에 반응하기
기본 이벤트 처리
// HTML
// <button id="myButton">클릭하세요</button>
// JavaScript
const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
// 화살표 함수로 간결하게
button.addEventListener('click', () => {
console.log('클릭됨!');
});다양한 이벤트 종류
// 클릭 이벤트
button.addEventListener('click', () => {
console.log('클릭');
});
// 마우스 오버
button.addEventListener('mouseover', () => {
button.style.backgroundColor = 'blue';
});
// 마우스 아웃
button.addEventListener('mouseout', () => {
button.style.backgroundColor = 'gray';
});
// 입력 이벤트
const input = document.querySelector('#nameInput');
input.addEventListener('input', (e) => {
console.log('현재 입력값:', e.target.value);
});실전 예제: 카운터 만들기
HTML
<div class="counter">
<h1 id="count">0</h1>
<button id="decrease">-</button>
<button id="reset">초기화</button>
<button id="increase">+</button>
</div>JavaScript
// 1. 요소 선택
const countDisplay = document.querySelector('#count');
const decreaseBtn = document.querySelector('#decrease');
const resetBtn = document.querySelector('#reset');
const increaseBtn = document.querySelector('#increase');
// 2. 초기 값
let count = 0;
// 3. 함수 정의
function updateDisplay() {
countDisplay.textContent = count;
// 음수면 빨간색, 양수면 초록색
if (count < 0) {
countDisplay.style.color = 'red';
} else if (count > 0) {
countDisplay.style.color = 'green';
} else {
countDisplay.style.color = 'black';
}
}
// 4. 이벤트 리스너
decreaseBtn.addEventListener('click', () => {
count--;
updateDisplay();
});
resetBtn.addEventListener('click', () => {
count = 0;
updateDisplay();
});
increaseBtn.addEventListener('click', () => {
count++;
updateDisplay();
});조건문: 상황에 따라 다르게 동작하기
let age = 20;
if (age >= 18) {
console.log("성인입니다");
} else {
console.log("미성년자입니다");
}
// else if로 여러 조건
let score = 85;
if (score >= 90) {
console.log("A학점");
} else if (score >= 80) {
console.log("B학점");
} else if (score >= 70) {
console.log("C학점");
} else {
console.log("재수강");
}
// 삼항 연산자 (간단한 조건)
let result = age >= 18 ? "성인" : "미성년자";
console.log(result);반복문: 같은 작업을 반복하기
// for 루프
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// 배열 반복
const fruits = ["사과", "바나나", "오렌지"];
// 방법 1: 전통적인 for 루프
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// 방법 2: forEach (더 간결)
fruits.forEach(fruit => {
console.log(fruit);
});
// 방법 3: for...of (가장 모던)
for (const fruit of fruits) {
console.log(fruit);
}실전 예제: To-Do 리스트
<!-- HTML -->
<div class="todo-app">
<input type="text" id="todoInput" placeholder="할 일을 입력하세요">
<button id="addBtn">추가</button>
<ul id="todoList"></ul>
</div>
// JavaScript
const todoInput = document.querySelector('#todoInput');
const addBtn = document.querySelector('#addBtn');
const todoList = document.querySelector('#todoList');
addBtn.addEventListener('click', () => {
const text = todoInput.value;
// 빈 값 체크
if (text.trim() === '') {
alert('할 일을 입력하세요!');
return;
}
// 새 항목 생성
const li = document.createElement('li');
li.textContent = text;
// 삭제 버튼 추가
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '삭제';
deleteBtn.addEventListener('click', () => {
li.remove();
});
li.appendChild(deleteBtn);
todoList.appendChild(li);
// 입력창 초기화
todoInput.value = '';
});
// Enter 키로도 추가 가능하게
todoInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addBtn.click();
}
});디버깅 팁
console.log 활용
// 변수 확인
console.log('name:', name);
// 객체 확인
console.log('person:', person);
// 여러 값 확인
console.log('count:', count, 'total:', total);
// 에러 표시
console.error('에러 발생!');
// 경고 표시
console.warn('주의: 값이 비어있습니다');자주 하는 실수
1. 세미콜론 빠뜨림
// 나쁜 예
let name = "홍길동" ← 세미콜론 없음
console.log(name)
// 좋은 예
let name = "홍길동";
console.log(name);2. == vs ===
// == : 값만 비교
"5" == 5 // true
// === : 값과 타입 모두 비교 (권장)
"5" === 5 // false
// 항상 ===를 사용하세요!3. undefined와 null
let a; // undefined (선언만 하고 값 안 줌)
let b = null; // null (의도적으로 빈 값)
console.log(a); // undefined
console.log(b); // null🎯 연습 과제
다음 기능을 가진 프로그램을 만들어보세요:
- □ 계산기 (덧셈, 뺄셈, 곱셈, 나눗셈)
- □ 비밀번호 강도 체커
- □ 간단한 퀴즈 앱
- □ 색상 랜덤 생성기
"JavaScript를 마스터하는 비결은 매일 조금씩 코드를 작성하는 것입니다. 완벽하지 않아도 괜찮아요. 일단 만들어보세요!"
JavaScript 기초를 익혔습니다! 다음 글에서는 에러를 찾고 해결하는 디버깅 방법을 배워보겠습니다.