코딩스쿨

▶ JavaScript Examples

JavaScript Examples

JavaScript Examples: 기본적인 자바스크립트 예제

JavaScript는 웹 페이지에서 동적인 기능을 구현하는 데 널리 사용되는 프로그래밍 언어입니다. 이 가이드는 기본적인 자바스크립트 예제를 통해 자바스크립트의 주요 개념과 문법을 소개합니다.

1. Hello World 출력

가장 기본적인 자바스크립트 프로그램은 "Hello, World!"를 출력하는 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script>
        // 자바스크립트 코드
        console.log("Hello, World!");
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

설명:
- console.log(): 브라우저의 개발자 도구 콘솔에 메시지를 출력하는 함수입니다.

2. 변수와 데이터 타입

자바스크립트에서 변수는 데이터를 저장하기 위한 기본적인 방법입니다. let, const, var 키워드를 사용하여 변수를 선언할 수 있습니다.

let number = 10;       // 숫자형 변수
const pi = 3.14159;    // 상수
let name = "Alice";    // 문자열 변수
let isJavaScriptFun = true;  // 논리형 변수

console.log(number);       // 10
console.log(pi);           // 3.14159
console.log(name);         // Alice
console.log(isJavaScriptFun);  // true

설명:
- let: 재할당이 가능한 변수를 선언합니다.
- const: 상수를 선언하며, 한 번 값을 할당하면 변경할 수 없습니다.
- true, false: 논리형 값.

3. 조건문 (if-else)

조건문을 사용하여 특정 조건이 참인 경우에만 코드를 실행할 수 있습니다.

let age = 20;

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

설명:
- if: 조건이 참일 때 코드를 실행합니다.
- else: 조건이 거짓일 때 실행됩니다.

4. 반복문 (for loop)

반복문은 특정 코드 블록을 반복적으로 실행하는 데 사용됩니다.

for (let i = 1; i <= 5; i++) {
    console.log("카운트: " + i);
}

설명:
- for: 초기값, 조건, 증감값을 사용하여 반복 실행하는 반복문입니다.

5. 배열

배열은 여러 데이터를 저장할 수 있는 자료 구조입니다.

let numbers = [1, 2, 3, 4, 5];  // 배열 선언

// 배열의 각 요소 출력
for (let i = 0; i < numbers.length; i++) {
    console.log("Element at index " + i + ": " + numbers[i]);
}

설명:
- numbers.length: 배열의 길이를 반환합니다.

6. 함수 (Function)

함수는 자주 사용하는 코드를 재사용할 수 있게 해줍니다.

function addNumbers(a, b) {
    return a + b;
}

let result = addNumbers(5, 10);  // 함수 호출
console.log(result);  // 15

설명:
- function: 함수를 정의하는 키워드입니다.
- return: 함수의 결과를 반환합니다.

7. 객체 (Object)

객체는 자바스크립트에서 중요한 데이터 구조로, 키-값 쌍으로 데이터를 저장합니다.

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("안녕하세요, " + this.name + "입니다.");
    }
};

// 객체의 프로퍼티에 접근
console.log(person.name);  // Alice
console.log(person.age);   // 25

// 객체의 메서드 호출
person.greet();  // 안녕하세요, Alice입니다.

설명:
- 객체는 중괄호 {} 안에 키-값 쌍으로 데이터를 저장합니다.
- this: 객체 내부에서 자신을 가리키는 키워드입니다.

8. 이벤트 처리

JavaScript는 HTML 요소에 이벤트를 연결하여 사용자가 상호작용할 수 있도록 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling</title>
    <script>
        function showAlert() {
            alert("버튼이 클릭되었습니다!");
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">클릭하세요</button>
</body>
</html>

설명:
- onclick: 버튼이 클릭될 때 showAlert() 함수가 호출됩니다.

9. 배열 메서드

자바스크립트 배열은 다양한 메서드를 제공하여 배열을 조작할 수 있습니다.

let fruits = ["apple", "banana", "cherry"];

// 배열에 요소 추가
fruits.push("orange");  // 배열 끝에 추가
console.log(fruits);  // ["apple", "banana", "cherry", "orange"]

// 배열에서 요소 제거
fruits.pop();  // 배열 끝에서 제거
console.log(fruits);  // ["apple", "banana", "cherry"]

// 배열 요소 반복
fruits.forEach(function(fruit) {
    console.log(fruit);
});

설명:
- push(): 배열 끝에 요소를 추가합니다.
- pop(): 배열 끝에서 요소를 제거합니다.
- forEach(): 배열의 각 요소에 대해 함수를 실행합니다.

10. DOM 조작

DOM(Document Object Model)은 웹 페이지의 HTML 요소를 자바스크립트로 조작할 수 있게 해줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
    <script>
        function changeText() {
            let heading = document.getElementById("myHeading");
            heading.innerHTML = "텍스트가 변경되었습니다!";
        }
    </script>
</head>
<body>
    <h1 id="myHeading">기본 텍스트</h1>
    <button onclick="changeText()">텍스트 변경</button>
</body>
</html>

설명:
- document.getElementById(): ID를 사용하여 HTML 요소를 선택합니다.
- innerHTML: 선택한 요소의 내용을 변경합니다.

11. 비동기 처리 (Async/Await)

비동기 작업은 네트워크 요청이나 타이머와 같은 시간이 걸리는 작업을 처리할 때 사용됩니다.

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("데이터 가져오기 완료");
        }, 2000);
    });
}

async function getData() {
    console.log("데이터를 가져오는 중...");
    let data = await fetchData();
    console.log(data);
}

getData();

설명:
- Promise: 비동기 작업을 처리하는 객체.
- async/await: 비동기 작업을 동기식 코드처럼 처리할 수 있게 해주는 구문.

12. 예외 처리 (try-catch)

자바스크립트는 오류가 발생했을 때 예외를 처리할 수 있는 방법을 제공합니다.

try {
    let result = 10 / 0;
    console.log(result);
} catch (error) {
    console.log("오류 발생: " + error.message);
} finally {
    console.log("예외 처리 완료.");
}

설명:
- try: 오류가 발생할 수 있는 코드를 실행합니다.
- catch: 오류가 발생했을 때 실행할 코드를 작성합니다.
- finally: 오류 발생 여부와 상관없이 항상 실행됩니다.

요약

이 가이드는 자바스크립트의 기본 문법과 주요 개념을 소개하는 예제들을 다룹니다. 자바스크립트의 변수, 조건문, 반복문, 함수, 객체, DOM 조작 등은 웹 개발의 핵심 개념입니다. 이 예제들을 통해 자바스크립트를 이해하고 활용하는 데 필요한 기초를 다질 수 있습니다.

코딩 스쿨 JavaScript