JavaScript : 웹사이트에 생명 불어넣기

JavaScript(JS)는 웹 브라우저에서 실행되는 프로그래밍 언어입니다. 정적인 웹페이지를 동적으로 만들어주며, 사용자와 상호작용(클릭, 입력 등)을 가능하게 합니다.

1. 자바스크립트 적용 방법

CSS와 마찬가지로 외부 파일로 분리하는 것이 가장 좋습니다. 보통 <body> 태그가 닫히기 직전에 넣습니다. (HTML을 다 읽고 나서 스크립트를 실행하기 위해)

<body>
    <script src="script.js"></script>
</body>

2. 변수 (Variables)

데이터를 담아두는 '그릇'입니다. 최신 자바스크립트(ES6+)에서는 var 대신 let과 const를 씁니다.

const: 상수(Constant). 한번 값을 넣으면 바꿀 수 없습니다. (기본적으로 이걸 쓰세요)
let: 변수. 나중에 값을 바꿀 수 있습니다.

const myName = "철수"; // 문자열(String)
let age = 20;          // 숫자(Number)

console.log(myName);   // 콘솔창에 출력 (개발자 도구 Console 탭에서 확인)
age = 21;              // 값 변경 가능
// myName = "영희";    // 에러 발생! (const는 변경 불가)

3. 함수 (Functions)

특정 작업을 수행하는 코드의 묶음입니다. "이 동작을 해!"라고 명령을 내리는 것과 같습니다.

// 함수 정의 (만들기)
function sayHello(name) {
    alert(name + "님, 안녕하세요!");
}

// 함수 실행 (부르기)
sayHello("지민");

4. 조건문 (Conditionals)

상황에 따라 다른 코드를 실행합니다.

let score = 90;

if (score >= 80) {
    console.log("합격입니다!");
} else {
    console.log("불합격입니다.");
}

5. DOM 조작과 이벤트 (핵심!)

자바스크립트로 HTML 요소를 찾아내고(querySelector), 사용자의 행동(Event)을 감지하는 방법입니다.

5.1 HTML 요소 가져오기

// HTML에 <h1 id="title">제목</h1> 이 있다고 가정
const titleElement = document.querySelector("#title");

5.2 이벤트 리스너 (Event Listener)

"클릭했을 때" 어떤 행동을 할지 정합니다.

// 버튼을 클릭하면 제목 색깔이 바뀌는 코드
const myButton = document.querySelector("button");

myButton.addEventListener("click", function() {
    titleElement.style.color = "blue";
    console.log("버튼이 클릭되었습니다!");
});

6. 실습 예제: 클릭 카운터

간단한 버튼 클릭 카운터를 만들어봅시다.

HTML

<h1 id="number">0</h1>
<button id="increase-btn">클릭!</button>

JavaScript

// 1. HTML 요소 찾아오기
const numberDisplay = document.querySelector("#number");
const button = document.querySelector("#increase-btn");

// 2. 변수 만들기
let count = 0;

// 3. 버튼에 클릭 이벤트 달기
button.addEventListener("click", function() {
    count = count + 1;              // 숫자 증가
    numberDisplay.innerText = count; // 화면 업데이트
});

마무리

자바스크립트는 처음엔 조금 낯설 수 있지만, "변수에 값을 담고 → 함수로 로직을 짜서 → 이벤트로 HTML을 조작한다"는 큰 흐름만 이해하면 됩니다.