JavaScript 기초 입문 – 웹페이지에 생명을 불어넣는 언어

by

HTML이 웹의 뼈대, CSS가 옷이라면, JavaScript는 움직임과 기능을 담당합니다. 버튼 클릭 시 메뉴가 열리고, 폼을 제출하면 유효성을 검사하고, 실시간으로 데이터를 불러오는 것 — 이 모든 것이 JavaScript입니다. 2026년 현재 전 세계 웹사이트의 98%가 JavaScript를 사용하고 있으며, 프론트엔드와 백엔드 모두를 다루는 유일한 언어입니다.

JavaScript로 할 수 있는 것

분야설명기술/프레임워크
프론트엔드 웹사용자 인터페이스, 상호작용React, Vue, Angular
백엔드 서버API, 데이터베이스 연동Node.js, Express
모바일 앱iOS/Android 앱 개발React Native, Flutter(Dart)
데스크톱 앱윈도우/맥 앱 개발Electron (VS Code가 이것으로 만들어짐)
게임웹 기반 게임Phaser, Three.js

기본 문법 빠르게 배우기

변수 선언

// let: 값이 변할 수 있는 변수
let age = 25;
age = 26; // 변경 가능

// const: 값이 변하지 않는 상수
const name = "홍길동";
// name = "김철수"; // 에러! const는 변경 불가

// var는 옛날 방식 → let/const만 사용하세요

자료형

자료형예시설명
String (문자열)“안녕하세요”텍스트
Number (숫자)42, 3.14정수와 소수 모두
Boolean (참/거짓)true, false조건 판단용
Array (배열)[1, 2, 3]여러 값을 순서대로 저장
Object (객체){name: “홍길동”, age: 25}키-값 쌍으로 데이터 저장
null / undefinednull, undefined값이 없음

조건문

const score = 85;

if (score >= 90) {
    console.log("A학점");
} else if (score >= 80) {
    console.log("B학점"); // 이것이 실행됨
} else {
    console.log("C학점 이하");
}

반복문

// 배열의 각 요소를 출력
const fruits = ["사과", "바나나", "오렌지"];

// for문
for (let i = 0; i  {
    console.log(fruit);
});

함수

// 함수 선언
function greet(name) {
    return `안녕하세요, ${name}님!`;
}

console.log(greet("홍길동")); // "안녕하세요, 홍길동님!"

// 화살표 함수 (최신 문법, 더 간결)
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8

실전: 웹페이지에 JavaScript 적용하기

다음 코드를 index.html로 저장하고 브라우저에서 열어보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 실습</title>
    <style>
        body { font-family: sans-serif; max-width: 500px; margin: 50px auto; }
        button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
        #result { margin-top: 20px; padding: 15px; background: #f0f0f0; border-radius: 8px; }
    </style>
</head>
<body>
    <h1>나의 첫 JavaScript</h1>
    <button onclick="changeText()">클릭하세요!</button>
    <div id="result">여기에 결과가 표시됩니다</div>

    <h2>간단한 계산기</h2>
    <input type="number" id="num1" placeholder="숫자 1">
    <input type="number" id="num2" placeholder="숫자 2">
    <button onclick="calculate()">더하기</button>
    <div id="calcResult"></div>

    <script>
        // 버튼 클릭 시 텍스트 변경
        let clickCount = 0;
        function changeText() {
            clickCount++;
            document.getElementById('result').textContent =
                `버튼을 ${clickCount}번 클릭했습니다!`;
        }

        // 간단한 덧셈 계산기
        function calculate() {
            const a = Number(document.getElementById('num1').value);
            const b = Number(document.getElementById('num2').value);
            document.getElementById('calcResult').textContent =
                `결과: ${a} + ${b} = ${a + b}`;
        }
    </script>
</body>
</html>

이 코드를 실행하면 버튼 클릭 시 텍스트가 바뀌고, 두 숫자를 입력하면 합계를 계산하는 간단한 웹페이지가 완성됩니다.

다음 단계: 학습 로드맵

단계기간배울 것추천 자료
1. 기초 문법2~3주변수, 조건문, 반복문, 함수, 배열, 객체MDN Web Docs (무료)
2. DOM 조작2주HTML 요소 선택/변경, 이벤트 처리JavaScript.info (무료)
3. 비동기2주Promise, async/await, fetch API인프런 강의
4. 프레임워크4~8주React 또는 Vue.js공식 문서 + 인프런

자주 묻는 질문

Q. JavaScript와 Java는 같은 건가요?

전혀 다른 언어입니다. 이름이 비슷한 건 마케팅 이유일 뿐입니다. “자동차(car)”와 “카펫(carpet)”처럼 이름만 비슷합니다.

Q. 어떤 에디터를 써야 하나요?

Visual Studio Code(VS Code)를 추천합니다. 무료이고, 전 세계 개발자 73%가 사용하는 가장 인기 있는 에디터입니다. code.visualstudio.com에서 다운로드하세요.

마무리

JavaScript는 웹 개발의 필수 언어이며, 배울수록 할 수 있는 것이 기하급수적으로 늘어납니다. 위의 실습 코드를 직접 타이핑해보고, 숫자나 텍스트를 바꿔가며 실험해보세요. 코딩은 읽는 것만으로는 배울 수 없습니다 — 직접 타이핑하고 에러를 만나는 것이 진짜 학습입니다.

Leave a Comment