본문 바로가기

JavaScript

(7)
JavaScript 라이브러리와 프레임워크 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 자바스크립트 라이브러리와 프레임워크는 웹 개발에서 사용되는 도구로, 코드를 더 효율적으로 작성하고 유지보수하기 쉽도록 도와준다. 둘 다 다양한 기능을 제공하지만, 그 목적과 사용 방식에는 몇 가지 차이가 있다. 라이브러리 : 작은 규모, 선택적 사용, 개발자가 통제. 프레임워크 : 큰 규모, 강제 사용, 프레임워크가 통제. 자바스크립트 라이브러리 (JavaScript Library) 정의: 라이브러리는 특정 기능을 수행하기 위한 함수, 객체, 클래스 등의 모음 일반적으로 작은 규모이며, 특정 기능을 수행하는 도구들을 모아둔 것 라이브러리는 개발자가 필요한 기능을 선택적으로 사용할 수 있도록 제공 사용..
JavaScript 객체 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 자바스크립트에서 객체(Object)는 다양한 데이터와 기능을 포함하는 복합적인 자료형이다. 객체는 속성(property)과 메서드(method)로 구성되어 있다. 속성은 객체의 특징이나 상태를 나타내는 값이며, 메서드는 객체가 수행하는 동작을 나타내는 함수이다. 1. 객체의 생성 - 객체는 중괄호 {}를 사용하여 만들 수 있다. // 빈 객체 생성 let myObject = {}; // 초기값을 갖는 객체 생성 let person = { name: "John", age: 30, isStudent: false, greet: function() { console.log("Hello!"); } }; 위의 ..
JavaScript 함수, 매개변수 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 자바스크립트에서 함수는 코드를 재사용하고 모듈화하기 위한 핵심적인 요소이다. 함수는 특정 작업을 수행하는 코드 블록을 정의하고, 필요할 때 호출하여 실행할 수 있다. 1. 함수 정의 function functionName(parameter1, parameter2, /* ... */) { // 함수가 수행할 작업 // return 문을 통해 값을 반환할 수 있음 } functionName : 함수의 이름을 지정한다. parameter1, parameter2 : 함수가 받을 매개변수를 정의한다. 함수 내에서 이러한 매개변수는 변수처럼 사용된다. 2. 함수 호출 정의한 함수를 사용하려면 해당 함수를 호출해..
JavaScript 배열, 반복문 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 자바스크립트에서 배열은 여러 개의 값을 담을 수 있는 데이터 구조다. 배열은 하나의 변수에 여러 값을 저장하고, 각 값은 배열 내에서 인덱스를 사용하여 접근할 수 있다. 순서가 있는 데이터를 효과적으로 다룰 때 사용되며, 각 항목은 0부터 시작하는 인덱스를 가지고 있다. 배열은 Array 객체를 사용하여 생성할 수 있다. 1. 배열을 선언하고 초기화하는 예제 // 빈 배열 생성 var fruits = []; // 값이 있는 배열 생성 var colors = ['red', 'green', 'blue']; 2. 배열 요소에 접근 var colors = ['red', 'green', 'blue']; // ..
JavaScript 조건문, 비교 연산자 정리 (this, target 포함) 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 자바스크립트에서 조건문은 프로그램의 흐름을 제어하는 데 사용된다. 주로 특정 조건이 참일 때 또는 거짓일 때 다른 코드 블록이 실행되도록 한다. 자바스크립트에서는 주로 if, else if, else 키워드를 사용하여 조건문을 작성한다. 1. if문 - if 문은 지정된 조건이 참이면 특정 코드 블록을 실행한다. let x = 10; if (x > 5) { console.log("x는 5보다 큽니다."); } 2. if-else문 - if-else 문은 조건이 참일 때와 거짓일 때 각각 다른 코드 블록을 실행한다. let y = 3; if (y > 5) { console.log("y는 5보다 큽니다...
JavaScript 데이터 타입(문자열과 숫자), 변수와 대입 연산자 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. JavaScript는 동적 타입 언어이므로 변수의 데이터 타입을 명시적으로 선언할 필요가 없다. 변수에 할당된 값에 따라 자동으로 데이터 타입이 결정된다. typeof 연산자를 사용하여 변수의 데이터 타입을 확인할 수 있다. 1. 문자열(String) 문자열은 텍스트 데이터를 나타내는 데 사용된다. 작은 따옴표(')나 큰 따옴표(")로 감싸져 있어야 한다. var myString1 = '안녕하세요'; var myString2 = "Hello, World!"; 2. 숫자(Number) 숫자 데이터를 나타낸다. 정수 및 부동 소수점 숫자를 모두 포함한다. var myNumber1 = 42; // 정수 v..
JavaScript <script>, 이벤트 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. JavaScript는 웹 페이지의 동적인 부분을 담당하는 스크립트 언어로, HTML 문서 내에서 사용된다. HTML에서 JavaScript를 사용하기 위해서는 JavaScript에서 이벤트(event)는 웹 페이지에서 발생하는 사용자의 행동이나 브라우저 자체의 상태 변화와 관련된 동작을 나타낸다. 주로 사용자와 상호작용하거나 웹 페이지의 상태 변화에 대응하는 데 사용된다. 2. 이벤트의 종류 마우스 이벤트 click : 요소를 클릭할 때 발생. mouseover : 요소 위로 마우스가 올라갈 때 발생. mouseout : 요소에서 마우스가 벗어날 때 발생. 키보드 이벤트 keydown : 키보드의 키..