반응형
이벤트와 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
반응형

'프로그램 코딩 > JS : 기초편 (초급)' 카테고리의 다른 글

함수 기초 (함수 선언, 호출, 매개변수)  (0) 2025.02.10
제어문 (조건문과 반복문)  (0) 2025.02.10
기본 문법 (변수, 자료형, 연산자)  (0) 2025.02.06
자바스크립트 소개 및 역사  (0) 2025.02.06
반응형
<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
반응형

'프로그램 코딩 > JS : 기초편 (초급)' 카테고리의 다른 글

이벤트와 DOM 조작  (0) 2025.02.10
제어문 (조건문과 반복문)  (0) 2025.02.10
기본 문법 (변수, 자료형, 연산자)  (0) 2025.02.06
자바스크립트 소개 및 역사  (0) 2025.02.06
반응형

 

 

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

프로그래밍에서 "제어문"은 코드의 실행 흐름을 조작하는 문법입니다. 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
반응형

'프로그램 코딩 > JS : 기초편 (초급)' 카테고리의 다른 글

이벤트와 DOM 조작  (0) 2025.02.10
함수 기초 (함수 선언, 호출, 매개변수)  (0) 2025.02.10
기본 문법 (변수, 자료형, 연산자)  (0) 2025.02.06
자바스크립트 소개 및 역사  (0) 2025.02.06
반응형

🔹 기본 문법 (변수, 자료형, 연산자)

📌 변수 선언

자바스크립트에서는 변수를 선언할 때 var, let, const 키워드를 사용할 수 있습니다.

var oldVar = "이전 방식";  // 함수 스코프를 가짐
let newVar = "최신 방식"; // 블록 스코프를 가짐
const fixedVar = "변경 불가"; // 상수 선언

📌 자료형 (Data Types)

자바스크립트는 동적 타입 언어이며, 주요 자료형은 다음과 같습니다.

  • 기본형(Primitive Type): string, number, boolean, null, undefined, symbol, bigint
  • 객체(Object Type): Object, Array, Function
let str = "Hello"; // 문자열
let num = 42; // 숫자
let bool = true; // 불리언
let empty = null; // 널 값
let notDefined; // undefined
let uniqueID = Symbol("id"); // 심볼
let bigNumber = 9007199254740991n; // 빅인트

📌 연산자 (Operators)

자바스크립트에서 사용할 수 있는 주요 연산자는 다음과 같습니다.

1️⃣ 산술 연산자 (Arithmetic Operators)

let a = 10;
let b = 3;
console.log(a + b);  // 덧셈
console.log(a - b);  // 뺄셈
console.log(a * b);  // 곱셈
console.log(a / b);  // 나눗셈
console.log(a % b);  // 나머지
console.log(a ** b); // 거듭제곱 (ES6 도입)

2️⃣ 비교 연산자 (Comparison Operators)

console.log(10 > 5);  // true
console.log(10 < 5);  // false
console.log(10 == "10");  // true (자동 형변환 발생)
console.log(10 === "10"); // false (자료형까지 비교)

3️⃣ 논리 연산자 (Logical Operators)

let x = true;
let y = false;
console.log(x && y);  // 논리 AND (false)
console.log(x || y);  // 논리 OR (true)
console.log(!x);      // 논리 NOT (false)

4️⃣ 할당 연산자 (Assignment Operators)

let num1 = 10;
num1 += 5; // num1 = num1 + 5;
num1 *= 2; // num1 = num1 * 2;

 

다음 글 바로 가기 : 제어문 (조건문과 반복문)

728x90
반응형

'프로그램 코딩 > JS : 기초편 (초급)' 카테고리의 다른 글

이벤트와 DOM 조작  (0) 2025.02.10
함수 기초 (함수 선언, 호출, 매개변수)  (0) 2025.02.10
제어문 (조건문과 반복문)  (0) 2025.02.10
자바스크립트 소개 및 역사  (0) 2025.02.06
반응형

자바스크립트 소개 및 역사

🔹 자바스크립트란?

자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 주로 웹 브라우저에서 실행되는 동적 기능을 구현하는 데 사용됩니다. HTML과 CSS가 웹 페이지의 구조와 스타일을 담당하는 반면, 자바스크립트는 웹 페이지에 상호작용을 추가하는 역할을 합니다.

자바스크립트는 다음과 같은 특징을 가지고 있습니다:

  • 동적 프로그래밍 언어: 변수의 타입이 동적으로 결정됨
  • 인터프리터 언어: 코드가 한 줄씩 실행됨
  • 이벤트 기반 프로그래밍: 사용자의 입력(클릭, 키 입력 등)에 반응하는 기능 구현 가능
  • 객체 지향 및 함수형 프로그래밍 지원

이제 자바스크립트의 역사를 간단히 살펴보겠습니다.

🔹 자바스크립트의 역사

📌 1995년 – 탄생

자바스크립트는 1995년 넷스케이프(Netscape)의 **브렌던 아이크(Brendan Eich)**가 웹 브라우저에서 동적인 기능을 추가하기 위해 개발한 언어입니다. 당시 이름은 Mocha였으며, 이후 LiveScript로 변경되었다가 결국 JavaScript라는 이름으로 확정되었습니다.

📌 1996년 – 표준화의 시작

1996년, 마이크로소프트가 JScript라는 이름으로 자바스크립트를 Internet Explorer에 도입하면서 브라우저 간 호환성 문제가 발생했습니다. 이를 해결하기 위해 1997년, 유럽 컴퓨터 제조업 협회(ECMA)에서 **ECMAScript(ECMA-262)**라는 표준을 만들었습니다. 현재 자바스크립트는 ECMAScript 표준을 따르고 있습니다.

📌 2009년 – Node.js 등장

2009년, **라이언 달(Ryan Dahl)**이 자바스크립트를 서버에서도 실행할 수 있도록 하는 Node.js를 개발했습니다. 이를 통해 자바스크립트는 프론트엔드뿐만 아니라 백엔드 개발에도 사용될 수 있는 강력한 언어로 발전했습니다.

📌 2015년 – ES6 (ECMAScript 2015) 혁신적 변화

자바스크립트의 가장 큰 변화 중 하나는 2015년에 발표된 **ES6(ECMAScript 2015)**입니다. ES6는 let, const, 화살표 함수, 클래스, 모듈 등 현대적인 자바스크립트의 기반이 되는 기능들을 추가하며 큰 변화를 가져왔습니다.

📌 현재 – 지속적인 발전

현재 자바스크립트는 웹 개발뿐만 아니라 모바일 앱, 데스크톱 애플리케이션, 게임 개발 등 다양한 분야에서 사용되고 있습니다. 또한, React, Vue, Angular 등 다양한 프레임워크와 라이브러리가 등장하며 더욱 강력한 생태계를 형성하고 있습니다.

🔹 결론

자바스크립트는 웹 개발의 핵심 기술로, 단순한 웹 페이지의 인터랙션을 넘어서 다양한 환경에서 사용되는 강력한 언어로 발전해 왔습니다. 자바스크립트의 발전 과정과 현재의 중요성을 이해하면, 앞으로의 개발 트렌드를 파악하는 데 큰 도움이 될 것입니다.

 

다음글 바로가기 : 기본 문법 (변수, 자료형, 연산자)

728x90
반응형

'프로그램 코딩 > JS : 기초편 (초급)' 카테고리의 다른 글

이벤트와 DOM 조작  (0) 2025.02.10
함수 기초 (함수 선언, 호출, 매개변수)  (0) 2025.02.10
제어문 (조건문과 반복문)  (0) 2025.02.10
기본 문법 (변수, 자료형, 연산자)  (0) 2025.02.06
1

+ Recent posts

티스토리툴바