JavaScript로 내 홈페이지에 동작 넣기

console.log("안녕, 자바스크립트!");

1 + 1
"안녕" + "하세요"
2026 - 1995

alert("환영합니다!");

    <script>
        console.log("페이지가 열렸습니다!");
        alert("어서 오세요");
    </script>
</body>

let name = "김지훈";
let age = 25;
let isStudent = true;

console.log(name);      // "김지훈"
console.log(age + 5);   // 30

let count = 0;
count = count + 1;     // count는 이제 1
count = count + 1;     // count는 이제 2

const PI = 3.14;
const myName = "지훈";

PI = 4;  // ❌ 에러! const는 못 바꿈

// 산술
10 + 3      // 13
10 - 3      // 7
10 * 3      // 30
10 / 3      // 3.333...
10 % 3      // 1 (나머지)

// 문자열 연결
"안녕" + " " + "지훈"   // "안녕 지훈"

// 비교 (true / false 반환)
5 > 3       // true
5 === 5     // true (엄격하게 같음)
5 !== 3     // true (다름)

// 논리
true && false   // false (AND)
true || false   // true (OR)
!true           // false (NOT)

let fruits = ["사과", "배", "딸기"];

console.log(fruits[0]);         // "사과" (0부터 시작!)
console.log(fruits.length);     // 3
fruits.push("포도");             // 끝에 추가
console.log(fruits);             // ["사과", "배", "딸기", "포도"]

let person = {
    name: "김지훈",
    age: 25,
    hobby: "코딩"
};

console.log(person.name);       // "김지훈"
console.log(person.age);        // 25
person.age = 26;                // 수정
person.email = "j@a.com";        // 새 속성 추가

<h1 id="title">안녕</h1>

const title = document.getElementById("title");
title.textContent = "반갑습니다";  // 글자 바뀜!
title.style.color = "red";        // 색깔도 바뀜!

// id로 찾기 (가장 흔함)
document.getElementById("title")

// 클래스로 찾기 (여러 개)
document.querySelectorAll(".card")

// CSS 선택자로 첫 번째만 찾기
document.querySelector("h1")
document.querySelector(".card p")

const el = document.getElementById("title");

el.textContent = "새 글자";      // 글자 변경
el.innerHTML = "<b>굵게</b>";    // HTML 자체 변경
el.style.color = "blue";        // 인라인 스타일
el.classList.add("active");     // CSS 클래스 추가
el.classList.remove("hidden");
el.classList.toggle("dark");    // 있으면 빼고 없으면 넣기

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
    alert("버튼이 눌렸어요!");
});

<div class="card">
    <h2>클릭 카운터</h2>
    <p>버튼을 누른 횟수: <span id="count">0</span></p>
    <button id="clickBtn">눌러보세요</button>
</div>

<script>
    let count = 0;
    const btn = document.getElementById("clickBtn");
    const display = document.getElementById("count");

    btn.addEventListener("click", function() {
        count = count + 1;
        display.textContent = count;
    });
</script>

const age = 20;

if (age >= 18) {
    console.log("성인입니다");
} else {
    console.log("미성년자입니다");
}

const 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("F");
}

for (let i = 0; i < 5; i++) {
    console.log("반복 " + i);
}
// 반복 0
// 반복 1
// 반복 2
// 반복 3
// 반복 4

const fruits = ["사과", "배", "딸기"];

for (const fruit of fruits) {
    console.log(fruit);
}

function greet(name) {
    return "안녕, " + name + "!";
}

console.log(greet("지훈"));      // "안녕, 지훈!"
console.log(greet("민수"));      // "안녕, 민수!"

const greet = (name) => {
    return "안녕, " + name + "!";
};

function calculateGrade(score) {
    if (score >= 90) return "A";
    if (score >= 80) return "B";
    if (score >= 70) return "C";
    return "F";
}

const scores = [95, 82, 71, 60];
for (const s of scores) {
    console.log(s + "점 → " + calculateGrade(s));
}

<button id="darkBtn">🌙 다크모드</button>

body.dark {
    background: #1a1a1a;
    color: #f3f4f6;
}
body.dark .card {
    background: #2a2a2a;
}
body.dark h1 {
    color: #93c5fd;
}

const darkBtn = document.getElementById("darkBtn");

darkBtn.addEventListener("click", function() {
    document.body.classList.toggle("dark");

    if (document.body.classList.contains("dark")) {
        darkBtn.textContent = "☀️ 라이트모드";
    } else {
        darkBtn.textContent = "🌙 다크모드";
    }
});

git add .
git commit -m "다크모드 토글 추가"
git push

변수 (let, const)
   ↓
타입 (숫자, 문자열, 배열, 객체)
   ↓
DOM 조작 (getElementById, textContent, classList)
   ↓
이벤트 (addEventListener)
   ↓
조건문 / 반복문 / 함수
   ↓
미니 프로젝트 (다크모드 토글)

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