전체 글 232

이벤트 객체

자바스크립트에서 이벤트 객체는 이벤트가 발생할 때 생성되는 객체로, 다양한 프로퍼티를 포함하고 있습니다. 주요 프로퍼티type: 이벤트의 종류 (예: 'click', 'keydown' 등).target: 이벤트가 발생한 요소.currentTarget: 이벤트 리스너가 부착된 요소.bubbles: 이벤트가 버블링되는지 여부.cancelable: 이벤트가 기본 동작을 취소할 수 있는지 여부.clientX, clientY: 마우스 이벤트의 경우, 클라이언트 영역 내의 좌표.예제 코드 클릭하세요 설명HTML: 버튼을 만들고, 버튼에 클릭 이벤트 리스너를 추가했습니다.JavaScript: 버튼 클릭 시 이벤트 객체의 주요 프로퍼티를 콘솔에 출력합니다.이 코드를 브라우저에서 실행하면 버튼을 클릭할 때마다..

JAVASCRIPT 2024.10.30

vscode - ftp 연결하기 & vscode 설치

f1 키 누르고 오류 발생시 기존 버전 삭제후 아래 사이트 들어가서 설치하기프로그램 추가 제거 들어가서 제거하고 설치아래사이트 들어가서 설치하기 https://code.visualstudio.com/updates/v1_90 Visual Studio Code May 2024Learn what is new in the Visual Studio Code May 2024 Release (1.90)code.visualstudio.com  다시f1 키 누르고 입력후 ctrl + s 저장 f1 누르고 다시 ftp 검색 - 원격 연결여러개 나오면 내꺼 잘 선택하기 디렉토리가 안나와서false 로 바꾸고 다시 시작

카테고리 없음 2024.10.30

자바스크립트 DOM요소 선택하는 방법 querySelector, getElement...

1. getElementById설명: 특정 ID를 가진 단일 요소를 선택합니다.형식: document.getElementById('elementId')반환값: 해당 ID를 가진 요소 (없으면 null).장점:매우 빠릅니다. ID는 문서 내에서 고유하기 때문에 효율적으로 요소를 찾습니다.단일 요소만 반환하므로 쉽게 사용할 수 있습니다.2. getElementsByClassName설명: 특정 클래스를 가진 요소를 모두 선택합니다.형식: document.getElementsByClassName('className')반환값: HTMLCollection (유사 배열).장점:클래스 이름으로 여러 요소를 선택할 수 있습니다.라이브 컬렉션이므로 DOM이 변경될 때 자동으로 업데이트됩니다.3. getElementsByT..

카테고리 없음 2024.10.29

객체 생성자 함수, 인스턴스

객체생성자함수, 인스턴스 자바스크립트에서 객체 생성자 함수는 새로운 객체를 생성하기 위한 템플릿 역할을 합니다. 이 함수는 new 키워드와 함께 호출되며, 호출될 때마다 새로운 객체 인스턴스를 생성합니다. 객체 생성자 함수는 일반적으로 대문자로 시작하는 이름으로 정의하는 관례가 있습니다.객체 생성자 함수 만드는 방법함수 정의: 생성자 함수를 정의할 때는 일반 함수처럼 정의합니다.this 키워드: this 키워드를 사용하여 새로 생성될 객체의 속성을 설정합니다.new 키워드 사용: 생성자 함수를 호출할 때는 new 키워드를 사용해야 합니다.예제 // 객체 생성자 함수 정의function Person(name, age) { this.name = name; // 객체의 name 속성 this.age..

카테고리 없음 2024.10.24

프로토타입 체인과 심볼

자바스크립트의 프로토타입 체인에서는 객체가 상속받은 속성과 메서드를 사용할 수 있습니다. 심볼은 객체의 고유한 속성 키로 사용되지만, 프로토타입 체인에서 심볼 속성을 다루는 방법에 대해 설명하겠습니다.프로토타입 체인과 심볼프로토타입 체인: 자바스크립트에서 객체는 다른 객체의 속성과 메서드를 상속받을 수 있습니다. 이러한 관계는 프로토타입 체인으로 표현됩니다.심볼 속성의 상속: 객체의 심볼 속성은 그 객체의 프로토타입에서 상속되지 않습니다. 즉, 자식 객체가 부모 객체의 심볼 속성을 자동으로 사용할 수는 없습니다. // 부모 객체const parent = { [Symbol('parentSymbol')]: 'I am from parent'};// 자식 객체const child = Object.creat..

카테고리 없음 2024.10.24

자바스크립트 데이터 타입 (primitive type, reference type)

자바스크립트는 여러 가지 데이터 타입을 가지고 있습니다. 크게 원시 타입(primitive types)과 참조 타입(reference types)으로 나눌 수 있습니다.1. 원시 타입자바스크립트에서 **원시 데이터 타입(Primitive Data Type)**은 더 이상 분해할 수 없는 데이터의 기본적인 유형입니다.원시 데이터 타입은 간단하고 불변(immutable)하며, 각 값이 고유한 메모리 공간을 차지합니다. 자바스크립트에는 다음과 같은 원시 데이터 타입이 있습니다:Number: 정수 및 부동 소수점 숫자를 포함합니다. 예: 42, 3.14String: 문자열을 나타냅니다. 예: "Hello, world!"Boolean: 참(true) 또는 거짓(false)을 나타냅니다. 예: true, false..

카테고리 없음 2024.10.24

Symbol

자바스크립트에서 **심볼(Symbol)**은 고유하고 변경 불가능한 원시 데이터 타입입니다. 심볼은 주로 객체의 속성 키를 만들 때 사용되며, 같은 이름을 가진 심볼이 여러 개 존재하더라도 서로 다른 것으로 취급됩니다. 이를 통해 이름 충돌을 방지하고 객체의 속성을 은닉하는 데 유용합니다.심볼 생성심볼은 Symbol() 함수를 사용하여 생성합니다 // 심볼 생성const id = Symbol('id');const name = Symbol('name');// 객체에 심볼을 속성 키로 사용const user = { [id]: 1, [name]: "Alice"};// 속성 접근console.log(user[id]); // 1console.log(user[name]); // Alice// 심볼 키로 ..

카테고리 없음 2024.10.24

객체란?

자바스크립트에서 객체는 키-값 쌍의 집합으로, 복잡한 데이터를 구조화하는 데 사용됩니다. 객체는 다양한 형태의 데이터(숫자, 문자열, 배열, 다른 객체 등)를 포함할 수 있습니다. 객체는 중괄호 {}로 정의하며, 각 키는 문자열 또는 심볼이며, 값은 다양한 데이터 타입이 될 수 있습니다. 객체 생성 예제 // 객체 생성const person = { name: "Alice", age: 30, isStudent: false, hobbies: ["reading", "travelling"], greet: function() { console.log(`Hello, my name is ${this.name}`); }};// 객체 속성 접근console.log(person..

JAVASCRIPT 2024.10.24