반응형
자주 사용하는 내장 객체 (Array, Object, String 등)

이벤트와 DOM 조작 및 자주 사용하는 내장 객체

1. 자바스크립트 내장 객체란?

자바스크립트에는 기본적으로 제공되는 여러 개의 내장 객체(Built-in Object)가 있습니다. 내장 객체를 활용하면 데이터를 효율적으로 관리하고 조작할 수 있습니다.

2. 주요 내장 객체

2.1 Array (배열)

배열은 여러 개의 데이터를 저장할 수 있는 객체입니다.

let fruits = ["사과", "바나나", "오렌지"];
fruits.push("포도"); // 배열에 요소 추가
console.log(fruits[0]); // '사과' 출력

2.2 Object (객체)

객체는 키-값(key-value) 쌍으로 데이터를 저장하는 구조입니다.

let person = {
	name: "홍길동",
	age: 25,
	job: "개발자"
};
console.log(person.name); // '홍길동' 출력

2.3 String (문자열)

문자열을 다룰 수 있는 객체로 다양한 메서드를 제공합니다.

let message = "Hello, JavaScript!";
console.log(message.length); // 문자열 길이 출력
console.log(message.toUpperCase()); // 대문자로 변환
console.log(message.replace("JavaScript", "World")); // 문자열 치환
728x90
반응형
반응형
이벤트와 DOM 조작

이벤트와 DOM 조작

1. 이벤트란?

이벤트(Event)는 사용자의 행동(클릭, 키 입력, 마우스 이동 등)에 반응하는 기능입니다.

2. DOM(Document Object Model)이란?

DOM은 HTML 문서를 트리 구조로 표현한 모델로, JavaScript를 통해 HTML 요소를 조작할 수 있습니다.

3. 이벤트 리스너(Event Listener)

이벤트를 감지하고 특정 동작을 실행하는 코드로, addEventListener()를 이용해 구현할 수 있습니다.

4. 예제: 이벤트를 활용한 DOM 조작

document.getElementById("changeColor").addEventListener("click", function() {
    let box = document.getElementById("box");
    let colors = ["lightblue", "lightcoral", "lightgreen", "lightgoldenrodyellow"];
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    box.style.backgroundColor = randomColor;
});

document.getElementById("changeText").addEventListener("click", function() {
    let box = document.getElementById("box");
    let messages = ["안녕하세요!", "DOM 조작 중!", "이벤트 발생!", "JavaScript 재미있어요!"];
    let randomMessage = messages[Math.floor(Math.random() * messages.length)];
    box.textContent = randomMessage;
});

아래 버튼을 클릭하면 박스의 색상과 내용이 변경됩니다.

클릭하세요!

다음 글 바로 가기 : 자주 사용하는 내장 객체 (Array, Object, String 등)

728x90
반응형
반응형
<h2>1. 함수 선언</h2>
<p>함수를 선언하는 방법은 여러 가지가 있지만, 대표적으로 <strong>함수 선언문</strong>과 <strong>함수 표현식</strong>이 있습니다.</p>

<h3>1.1 함수 선언문</h3>
<pre><code>function greet() {
console.log("안녕하세요!");

}

greet(); // 함수 호출 위 코드는 greet이라는 이름의 함수를 선언하고, greet();을 통해 호출하여 실행합니다.

<h3>1.2 함수 표현식</h3>
<pre><code>const greet = function() {
console.log("안녕하세요!");

};

greet(); // 함수 호출 함수 표현식에서는 함수를 변수에 저장할 수 있으며, 선언 후에 호출해야 합니다.

<h2>2. 매개변수와 반환값</h2>
<p>함수는 외부에서 값을 받아 처리할 수 있으며, 결과값을 반환할 수도 있습니다.</p>

<h3>2.1 매개변수가 있는 함수</h3>
<pre><code>function greet(name) {
console.log("안녕하세요, " + name + "!");

}

greet("철수"); 위 함수는 name이라는 매개변수를 받아 호출 시 원하는 이름을 입력할 수 있습니다.

<h3>2.2 반환값이 있는 함수</h3>
<pre><code>function add(a, b) {
return a + b;

}

let result = add(3, 5); console.log("결과: " + result); add 함수는 두 개의 값을 받아 더한 후 결과를 반환합니다.

<h2>3. 화살표 함수 (Arrow Function)</h2>
<p>ES6에서 도입된 <strong>화살표 함수</strong>는 더 간결한 문법을 제공합니다.</p>

<pre><code>const greet = (name) => {
console.log("안녕하세요, " + name + "!");

};

greet("영희"); 화살표 함수는 function 키워드를 생략하고 =>를 사용하여 선언할 수 있습니다.

<h2>4. 함수 활용 예제</h2>

<h3>4.1 두 수의 곱 구하기</h3>
<pre><code>function multiply(a, b) {
return a * b;

}

console.log("3 * 4 = " + multiply(3, 4));

<h3>4.2 배열 요소 출력</h3>
<pre><code>const numbers = [10, 20, 30];

numbers.forEach(function(num) { console.log("배열 요소: " + num); });

<h2>마무리</h2>
<p>함수는 JavaScript에서 핵심적인 개념으로, 다양한 기능을 모듈화하고 코드의 재사용성을 높이는 데 중요합니다.</p>
<p>직접 다양한 함수를 만들어 보며 연습해보세요! 🚀</p>

 

 

다음 글 바로 가기 : 이벤트와 DOM 조작

 

이벤트와 DOM 조작

이벤트와 DOM 조작 1. 이벤트란? 이벤트(Event)는 사용자의 행동(클릭, 키 입력, 마우스 이동 등)에 반응하는 기능입니다. 2. DOM(Document Object Model)이란? DOM은 HTML 문서를 트리 구조로 표현한 모델로, Jav

kookgame.tistory.com

 

728x90
반응형
반응형

 

 

제어문 (조건문과 반복문)

프로그래밍에서 "제어문"은 코드의 실행 흐름을 조작하는 문법입니다. JavaScript에서 중요한 제어문에는 조건문반복문이 있습니다.

1. 조건문 (Conditional Statements)

1.1 if 문

let age = 18;

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

1.2 if-else 문

let age = 16;

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

1.3 else-if 문

let 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 학점");
}

1.4 switch 문

let day = "월요일";

switch (day) {
    case "월요일":
        console.log("한 주의 시작입니다!");
        break;
    case "금요일":
        console.log("주말이 다가옵니다!");
        break;
    case "일요일":
        console.log("내일은 다시 월요일...");
        break;
    default:
        console.log("평범한 하루입니다.");
}

2. 반복문 (Loops)

2.1 for 문

for (let i = 0; i < 5; i++) {
    console.log("현재 i 값: " + i);
}

2.2 while 문

let count = 0;

while (count < 3) {
    console.log("count 값: " + count);
    count++;
}

2.3 do-while 문

let num = 0;

do {
    console.log("num 값: " + num);
    num++;
} while (num < 3);

2.4 for...in 문 (객체 반복)

let person = { name: "John", age: 25, city: "Seoul" };

for (let key in person) {
    console.log(key + ": " + person[key]);
}

2.5 for...of 문 (배열 반복)

let numbers = [10, 20, 30, 40];

for (let num of numbers) {
    console.log(num);
}

3. 제어문 활용 예제

3.1 짝수/홀수 판별하기

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        console.log(i + "는 짝수입니다.");
    } else {
        console.log(i + "는 홀수입니다.");
    }
}

3.2 1부터 100까지의 합 구하기

let sum = 0;

for (let i = 1; i <= 100; i++) {
    sum += i;
}

console.log("1부터 100까지의 합: " + sum);

마무리

조건문과 반복문은 JavaScript에서 필수적인 기능입니다. 조건문을 사용하여 실행할 코드의 흐름을 결정하고, 반복문을 활용하여 효율적으로 작업을 수행할 수 있습니다.

이제 직접 다양한 예제를 만들어 보면서 연습해보세요! 🚀

 

다음 글 바로 가기 : 함수 기초 (함수 선언, 호출, 매개변수)

728x90
반응형
1

+ Recent posts