index.html - Examples

  1<!DOCTYPE html>
  2<html lang="ko">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>JavaScript 기초 예제</title>
  7    <style>
  8        body {
  9            font-family: 'Segoe UI', Tahoma, sans-serif;
 10            max-width: 800px;
 11            margin: 0 auto;
 12            padding: 20px;
 13            background-color: #f5f5f5;
 14        }
 15        h1 { text-align: center; color: #333; }
 16        h2 { color: #2c3e50; border-bottom: 2px solid #f39c12; padding-bottom: 10px; }
 17        .section {
 18            background: white;
 19            padding: 20px;
 20            margin: 20px 0;
 21            border-radius: 8px;
 22            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 23        }
 24        .output {
 25            background: #2c3e50;
 26            color: #2ecc71;
 27            padding: 15px;
 28            border-radius: 4px;
 29            font-family: monospace;
 30            white-space: pre-wrap;
 31            max-height: 300px;
 32            overflow-y: auto;
 33        }
 34        button {
 35            background: #3498db;
 36            color: white;
 37            border: none;
 38            padding: 10px 20px;
 39            border-radius: 4px;
 40            cursor: pointer;
 41            margin: 5px;
 42        }
 43        button:hover { background: #2980b9; }
 44        code {
 45            background: #ecf0f1;
 46            padding: 2px 6px;
 47            border-radius: 3px;
 48        }
 49        pre {
 50            background: #ecf0f1;
 51            padding: 15px;
 52            border-radius: 4px;
 53            overflow-x: auto;
 54        }
 55    </style>
 56</head>
 57<body>
 58    <h1>JavaScript 기초 예제</h1>
 59    <p style="text-align: center;">F12를 눌러 개발자 도구의 콘솔을 확인하세요.</p>
 60
 61    <!-- 결과 출력 영역 -->
 62    <div class="section">
 63        <h2>출력 결과</h2>
 64        <div class="output" id="output">결과가 여기에 표시됩니다.</div>
 65        <button onclick="clearOutput()">초기화</button>
 66    </div>
 67
 68    <!-- 1. 변수 -->
 69    <div class="section">
 70        <h2>1. 변수 (var, let, const)</h2>
 71        <button onclick="runVariables()">실행</button>
 72        <pre>
 73// var - 함수 스코프 (비권장)
 74var oldVar = "I'm var";
 75
 76// let - 블록 스코프, 재할당 가능
 77let count = 0;
 78count = 1;
 79
 80// const - 블록 스코프, 재할당 불가
 81const PI = 3.14159;
 82const person = { name: "홍길동" };
 83person.name = "김철수"; // 객체 속성은 변경 가능
 84        </pre>
 85    </div>
 86
 87    <!-- 2. 데이터 타입 -->
 88    <div class="section">
 89        <h2>2. 데이터 타입</h2>
 90        <button onclick="runDataTypes()">실행</button>
 91        <pre>
 92// 기본 타입 (Primitive)
 93let str = "문자열";      // String
 94let num = 42;            // Number
 95let float = 3.14;        // Number (정수와 구분 없음)
 96let bool = true;         // Boolean
 97let empty = null;        // Null
 98let notDefined;          // Undefined
 99let sym = Symbol("id");  // Symbol
100let big = 9007199254740991n; // BigInt
101
102// 참조 타입 (Reference)
103let obj = { key: "value" };  // Object
104let arr = [1, 2, 3];         // Array
105let func = function() {};    // Function
106        </pre>
107    </div>
108
109    <!-- 3. 연산자 -->
110    <div class="section">
111        <h2>3. 연산자</h2>
112        <button onclick="runOperators()">실행</button>
113        <pre>
114// 산술 연산자
115let a = 10, b = 3;
116// +, -, *, /, %, **
117
118// 비교 연산자
119// ==, ===, !=, !==, <, >, <=, >=
120// == vs === (타입 비교 차이)
121
122// 논리 연산자
123// && (AND), || (OR), ! (NOT)
124
125// 삼항 연산자
126let result = a > b ? "크다" : "작다";
127
128// Nullish coalescing (??)
129let value = null ?? "기본값";
130
131// Optional chaining (?.)
132let obj = { nested: { value: 42 } };
133let safe = obj?.nested?.value;
134        </pre>
135    </div>
136
137    <!-- 4. 조건문 -->
138    <div class="section">
139        <h2>4. 조건문</h2>
140        <button onclick="runConditions()">실행</button>
141        <pre>
142// if-else
143if (조건1) {
144    // 실행
145} else if (조건2) {
146    // 실행
147} else {
148    // 실행
149}
150
151// switch
152switch (값) {
153    case 'A':
154        break;
155    case 'B':
156        break;
157    default:
158        break;
159}
160        </pre>
161    </div>
162
163    <!-- 5. 반복문 -->
164    <div class="section">
165        <h2>5. 반복문</h2>
166        <button onclick="runLoops()">실행</button>
167        <pre>
168// for
169for (let i = 0; i < 5; i++) { }
170
171// while
172while (조건) { }
173
174// do-while
175do { } while (조건);
176
177// for...of (배열 순회)
178for (const item of array) { }
179
180// for...in (객체 키 순회)
181for (const key in object) { }
182
183// forEach, map, filter, reduce
184        </pre>
185    </div>
186
187    <!-- 6. 함수 -->
188    <div class="section">
189        <h2>6. 함수</h2>
190        <button onclick="runFunctions()">실행</button>
191        <pre>
192// 함수 선언식
193function greet(name) {
194    return `Hello, ${name}!`;
195}
196
197// 함수 표현식
198const greet = function(name) {
199    return `Hello, ${name}!`;
200};
201
202// 화살표 함수
203const greet = (name) => `Hello, ${name}!`;
204
205// 기본 매개변수
206const greet = (name = "Guest") => `Hello, ${name}!`;
207
208// Rest 파라미터
209const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);
210
211// 콜백 함수
212setTimeout(() => console.log("1초 후"), 1000);
213        </pre>
214    </div>
215
216    <!-- 7. 배열 -->
217    <div class="section">
218        <h2>7. 배열</h2>
219        <button onclick="runArrays()">실행</button>
220        <pre>
221const fruits = ["사과", "바나나", "오렌지"];
222
223// 기본 메서드
224fruits.push("포도");     // 끝에 추가
225fruits.pop();            // 끝에서 제거
226fruits.unshift("딸기");  // 앞에 추가
227fruits.shift();          // 앞에서 제거
228
229// 고차 함수
230const numbers = [1, 2, 3, 4, 5];
231numbers.map(n => n * 2);           // [2, 4, 6, 8, 10]
232numbers.filter(n => n > 2);        // [3, 4, 5]
233numbers.find(n => n > 2);          // 3
234numbers.reduce((acc, n) => acc + n, 0); // 15
235numbers.every(n => n > 0);         // true
236numbers.some(n => n > 4);          // true
237        </pre>
238    </div>
239
240    <!-- 8. 객체 -->
241    <div class="section">
242        <h2>8. 객체</h2>
243        <button onclick="runObjects()">실행</button>
244        <pre>
245// 객체 리터럴
246const person = {
247    name: "홍길동",
248    age: 25,
249    greet() {
250        return `안녕하세요, ${this.name}입니다.`;
251    }
252};
253
254// 속성 접근
255person.name;      // 점 표기법
256person["age"];    // 대괄호 표기법
257
258// 구조 분해 할당
259const { name, age } = person;
260
261// 스프레드 연산자
262const newPerson = { ...person, city: "서울" };
263
264// Object 메서드
265Object.keys(person);    // ["name", "age", "greet"]
266Object.values(person);  // ["홍길동", 25, ...]
267Object.entries(person); // [["name", "홍길동"], ...]
268        </pre>
269    </div>
270
271    <!-- 9. 클래스 -->
272    <div class="section">
273        <h2>9. 클래스 (ES6)</h2>
274        <button onclick="runClasses()">실행</button>
275        <pre>
276class Animal {
277    constructor(name) {
278        this.name = name;
279    }
280
281    speak() {
282        return `${this.name} makes a sound.`;
283    }
284}
285
286class Dog extends Animal {
287    constructor(name, breed) {
288        super(name);
289        this.breed = breed;
290    }
291
292    speak() {
293        return `${this.name} barks!`;
294    }
295}
296
297const dog = new Dog("멍멍이", "진돗개");
298        </pre>
299    </div>
300
301    <!-- 10. 모듈 -->
302    <div class="section">
303        <h2>10. 모듈 (ES6)</h2>
304        <pre>
305// math.js
306export const PI = 3.14159;
307export function add(a, b) { return a + b; }
308export default class Calculator { }
309
310// main.js
311import Calculator, { PI, add } from './math.js';
312import * as math from './math.js';
313        </pre>
314        <p><em>모듈은 서버 환경에서만 동작합니다.</em></p>
315    </div>
316
317    <script src="script.js"></script>
318</body>
319</html>