[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기

"클릭하면 반응하는 진짜 웹사이트! 지금까지 배운 모든 기술을 하나로 합쳐봅시다."

안녕하세요! 드디어 자바스크립트 기초 시리즈의 마지막 시간입니다. 지난 4강에서 HTML 요소를 선택하고 바꾸는 법을 배웠다면, 오늘은 사용자가 클릭하거나 글을 입력할 때 그 동작을 감지하는 이벤트 리스너(Event Listener)를 배우고, 직접 작동하는 미니 계산기를 만들어보겠습니다.

1. 사용자의 동작을 감시하라: 이벤트 리스너

웹사이트에서 일어나는 모든 동작(클릭, 스크롤, 키보드 입력 등)을 '이벤트'라고 합니다. 자바스크립트는 이 이벤트를 기다리고 있다가 발생하면 특정 함수를 실행합니다.

✅ click: 요소를 클릭했을 때

✅ submit: 폼(Form) 데이터를 전송할 때

✅ keyup: 키보드에서 손을 뗐을 때

2. 이벤트 리스너 사용법 (addEventListener)

HTML 태그에 직접 onclick을 쓰는 것보다 자바스크립트 파일에서 연결하는 방식이 훨씬 깔끔하고 강력합니다.

const btn = document.querySelector('#myBtn'); // 버튼을 클릭했을 때 실행할 동작 등록 btn.addEventListener('click', function() { alert("버튼이 클릭되었습니다!"); });

3. [실습] 미니 더하기 계산기 만들기

두 개의 숫자를 입력받아 더한 결과를 보여주는 프로그램을 완성해봅시다.

<!-- HTML 구조 --> <input type="number" id="num1" placeholder="숫자 1"> <span> + </span> <input type="number" id="num2" placeholder="숫자 2"> <button id="calcBtn">계산하기</button> <p>결과: <span id="result">0</span></p> <script> const button = document.querySelector('#calcBtn'); button.addEventListener('click', () => { // 1. 입력창의 값 가져오기 const v1 = document.querySelector('#num1').value; const v2 = document.querySelector('#num2').value; // 2. 숫자로 변환하여 더하기 (입력값은 기본적으로 문자열임) const sum = Number(v1) + Number(v2); // 3. 결과 화면에 뿌려주기 document.querySelector('#result').innerText = sum; }); </script>

🎉 자바스크립트 기초 연재 완강!

HTML로 뼈대를 세우고, CSS로 옷을 입히고, JS로 생동감을 불어넣는 법까지 모두 배우셨습니다.

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 4강] HTML을 내 마음대로! DOM 조작 기초 (0)	2026.02.10
[JS 3강] 코드를 재사용하자! 함수(Function)의 마법 (0)	2026.02.10
[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기 (0)	2026.02.10
[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기 (0)	2026.02.10

[JS 4강] HTML을 내 마음대로! DOM 조작 기초

"자바스크립트로 웹페이지의 글자, 색상, 구조를 실시간으로 바꿔봅시다."

안녕하세요! 지난 3강에서는 함수를 통해 코드를 효율적으로 묶는 법을 배웠습니다. 오늘은 자바스크립트의 진정한 힘, 바로 웹페이지의 구성 요소들을 마음대로 주무르는 DOM(Document Object Model) 조작에 대해 알아보겠습니다.

1. DOM이란 무엇인가요?

DOM은 브라우저가 HTML 문서를 자바스크립트가 이해할 수 있는 객체(Object) 형태로 만든 지도와 같습니다. 이 지도를 통해 우리는 특정 태그를 찾고, 내용을 바꾸고, 스타일을 수정할 수 있습니다.

✅ 선택: "id가 'title'인 태그를 가져와줘"

✅ 수정: "그 태그의 글자를 '반가워요'로 바꿔줘"

✅ 스타일: "그 태그의 배경색을 노란색으로 해줘"

2. 요소를 선택하고 바꾸는 핵심 명령어

가장 자주 쓰이는 두 가지 방식만 기억해도 충분합니다.

🔍 document.getElementById('아이디'): 특정 ID를 가진 요소를 하나 선택합니다.
🔍 document.querySelector('.클래스'): CSS 선택자 방식으로 요소를 선택합니다.

3. DOM 조작 실습 예제

HTML에 있는 요소를 자바스크립트로 직접 제어하는 과정을 살펴보세요.

<!-- HTML 구조 -->
<h1 id="main-title">원래 제목입니다</h1>
<button onclick="changeText()">제목 바꾸기</button>

<script>
function changeText() {
    // 1. 요소를 찾아서 변수에 담기
    const title = document.getElementById('main-title');

    // 2. 내용 바꾸기 (innerText)
    title.innerText = "자바스크립트로 바뀐 제목!";

    // 3. 스타일 바꾸기 (style)
    title.style.color = "#f1c40f";
    title.style.backgroundColor = "#222";
    title.style.padding = "10px";
}
</script>

4. 클래스 제어하기 (classList)

스타일을 하나씩 바꾸는 것보다, 미리 만들어둔 CSS 클래스를 꼈다 뺐다 하는 것이 더 효율적입니다.

요소.classList.add('active'); - 클래스 추가
요소.classList.remove('active'); - 클래스 제거
요소.classList.toggle('active'); - 클래스가 있으면 제거, 없으면 추가

화면을 움직이게 하는 첫 단추!

DOM 조작을 할 줄 안다는 것은 이제 진짜 '웹 앱'을 만들 준비가 되었다는 뜻입니다.

마지막 5강에서는 클릭과 같은 사용자의 동작에 반응하는 '이벤트 리스너'를 배워볼게요!

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기 (0)	2026.02.10
[JS 3강] 코드를 재사용하자! 함수(Function)의 마법 (0)	2026.02.10
[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기 (0)	2026.02.10
[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기 (0)	2026.02.10

[JS 3강] 코드를 재사용하자! 함수(Function)의 마법

"반복되는 코드를 하나로 묶어 효율적으로 관리하는 방법을 배워봅시다."

안녕하세요! 지난 2강에서는 조건문과 반복문을 통해 프로그램의 흐름을 제어하는 법을 배웠습니다. 오늘은 똑같은 코드를 여러 번 복사해서 붙여넣지 않고, 필요할 때마다 꺼내 쓸 수 있게 만드는 함수(Function)에 대해 알아보겠습니다.

1. 함수란 무엇인가요?

함수는 특정한 작업을 수행하도록 설계된 코드의 묶음입니다. 한 번 만들어두면 원할 때마다 이름을 불러 실행할 수 있습니다.

✅ 재사용성: 똑같은 코드를 반복해서 쓸 필요가 없습니다.

✅ 유지보수: 함수 내용만 수정하면 사용된 모든 곳에 적용됩니다.

✅ 구조화: 코드가 읽기 쉽고 깔끔해집니다.

2. 함수의 구조 (매개변수와 반환값)

함수는 값을 받아서(Input) 처리한 뒤 결과(Output)를 돌려줍니다.

📥 매개변수(Parameter): 함수 외부에서 전달받는 값
📤 반환값(Return): 함수 실행 결과를 외부로 내보내는 값

3. 함수 정의와 활용 실습

전통적인 함수 방식과 최신 자바스크립트에서 많이 쓰이는 화살표 함수 방식을 모두 익혀보세요.

// 1. 기본 함수 선언식
function sayHello(name) {
    return "안녕하세요, " + name + "님!";
}

// 함수 호출하기
console.log(sayHello("철수")); // "안녕하세요, 철수님!"
console.log(sayHello("영희")); // "안녕하세요, 영희님!"

// 2. 값을 계산해서 돌려주는 함수
function add(a, b) {
    return a + b;
}

let result = add(10, 20);
console.log("더하기 결과:", result); // 30

// 3. 화살표 함수 (최신 문법)
const multiply = (x, y) => {
    return x * y;
};

console.log("곱하기 결과:", multiply(5, 4)); // 20

코딩의 효율성이 올라갔습니다!

함수를 잘 만드는 것이 진정한 프로그래머로 가는 지름길입니다. 작은 기능부터 함수로 만들어보세요.

다음 4강에서는 자바스크립트로 웹페이지를 직접 제어하는 'DOM 조작 기초'를 배워볼게요!

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기 (0)	2026.02.10
[JS 4강] HTML을 내 마음대로! DOM 조작 기초 (0)	2026.02.10
[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기 (0)	2026.02.10
[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기 (0)	2026.02.10

[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기

"상황에 따라 판단하고, 복잡한 일을 대신 반복해주는 로직을 배워봅시다."

안녕하세요! 지난 1강에서는 변수를 통해 데이터를 저장하는 법을 배웠습니다. 오늘은 그 데이터를 활용해 웹사이트가 스스로 판단(조건문)하게 만들고, 귀찮은 일을 반복(반복문)시키는 방법을 알아보겠습니다.

1. 상황에 따라 다르게 실행하기: 조건문(if)

조건문은 "만약 ~라면 A를 하고, 아니면 B를 해라"라고 컴퓨터에게 명령하는 것입니다.

✅ if: 조건이 참(true)일 때 실행

✅ else if: 앞의 조건이 아닐 때 새로운 조건 확인

✅ else: 모든 조건에 해당하지 않을 때 실행

2. 여러 번 대신 일해주는: 반복문(for)

같은 동작을 10번, 100번 반복해야 할 때 반복문을 사용하면 코드가 아주 간결해집니다.

🔁 for문: 가장 대표적인 반복문으로, 반복 횟수가 정해져 있을 때 주로 사용합니다.
🔁 while문: 특정 조건이 참인 동안 계속해서 반복합니다.

3. 조건문과 반복문 실습

브라우저 콘솔(F12)에서 아래 로직을 연습해 보세요. 숫자만 바꿔도 결과가 달라지는 것을 확인할 수 있습니다.

// 1. 조건문 실습: 성적 계산기
let score = 85;

if (score >= 90) {
    console.log("등급: A");
} else if (score >= 80) {
    console.log("등급: B"); // 출력됨!
} else {
    console.log("등급: C");
}

// 2. 반복문 실습: 1부터 5까지 출력하기
console.log("--- 숫자를 세어보자 ---");
for (let i = 1; i <= 5; i++) {
    console.log("현재 숫자:", i);
}

// 3. 반복문으로 구구단 2단 만들기
console.log("--- 구구단 2단 ---");
for (let j = 1; j <= 9; j++) {
    console.log("2 x", j, "=", 2 * j);
}

로직의 기초를 다지셨습니다!

조건문과 반복문은 모든 프로그래밍 언어의 심장과 같습니다. 꼭 눈으로만 보지 말고 직접 코드를 쳐보세요.

다음 3강에서는 코드를 재사용할 수 있게 만드는 '함수(Function)'를 배워볼게요!

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기 (0)	2026.02.10
[JS 4강] HTML을 내 마음대로! DOM 조작 기초 (0)	2026.02.10
[JS 3강] 코드를 재사용하자! 함수(Function)의 마법 (0)	2026.02.10
[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기 (0)	2026.02.10

[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기

"정적인 페이지에 생명력을 불어넣는 마법, 자바스크립트를 시작합니다."

안녕하세요! 드디어 웹 개발의 꽃이라 불리는 자바스크립트(JavaScript) 연재를 시작합니다. HTML이 뼈대이고 CSS가 옷이라면, 자바스크립트는 웹사이트의 '두뇌' 역할을 합니다.

1. 자바스크립트란 무엇인가요?

자바스크립트는 사용자와 상호작용하고, 데이터를 처리하며, 화면을 동적으로 바꾸는 프로그래밍 언어입니다.

✅ 클릭하면 색이 변하는 버튼

✅ 입력한 값에 따라 결과가 나오는 계산기

✅ 서버에서 데이터를 받아와 화면에 뿌려주는 기능

2. 데이터를 담는 바구니: 변수(Variable)

컴퓨터에게 정보를 기억시키려면 '이름이 붙은 바구니'가 필요합니다. 이것을 변수라고 부릅니다.

📌 const: 한 번 담으면 바꿀 수 없는 상자 (상수)
📌 let: 언제든 내용을 바꿀 수 있는 상자 (변수)
* 예전에는 'var'를 썼지만, 요즘은 'let'과 'const'를 권장합니다.

3. 브라우저 콘솔과 실습

브라우저(크롬 등)에서 F12를 누르고 Console 탭을 열어보세요. 아래 코드를 입력하고 엔터를 치면 결과를 확인할 수 있습니다.

// 1. 변수 선언하기
const name = "코딩천재"; // 문자형 (String)
let age = 20;           // 숫자형 (Number)
const isHappy = true;   // 불리언 (Boolean: 참/거짓)

// 2. 콘솔에 출력하기
console.log("이름:", name);
console.log("나이:", age);

// 3. 변수 값 바꿔보기
age = 21; // let으로 선언해서 변경 가능!
console.log("내년 나이:", age);

// 4. 간단한 연산
const a = 10;
const b = 5;
console.log("더하기:", a + b);

첫 걸음을 떼셨습니다!

프로그래밍의 시작은 데이터를 정의하는 것부터입니다. 변수의 개념을 꼭 기억하세요.

다음 2강에서는 상황에 따라 판단하는 '조건문과 반복문'을 배워볼게요!

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기 (0)	2026.02.10
[JS 4강] HTML을 내 마음대로! DOM 조작 기초 (0)	2026.02.10
[JS 3강] 코드를 재사용하자! 함수(Function)의 마법 (0)	2026.02.10
[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기 (0)	2026.02.10

MinStudio

Frontend/JAVASCRIPT