프로그래밍/JavaScript7 DOM(Document Object Model) DOM(Document Object Model) DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있다면, DOM을 이용하여 HTML을 조작할 수 있는 것이다. DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있으며, 소셜미디어 등에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있다. CRUD(Create, Read, Update and Delete) 앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우더라도, 당장 모든 속성과 메서드를 바로 외울 수는 없다. 그러므로 가장 중요한 CRUD를 먼저 이해하는 것이 새로운 언어.. 2023. 4. 26. JavaScript - 다양한 메서드들 Math 내장 객체 메서드 Math.floor( ) : 괄호 안의 숫자를 내림하여 반환 Math.ceil( ) : 괄호 안의 숫자를 올림하여 반환 Math.round( ) : 괄호 안의 숫자를 반올림하여 반환 Math.abs( ) : 괄호 안의 숫자의 절대값을 반환 Math.sqrt( ) : 괄호 안의 숫자의 루트값을 반환 Math.pow(2, 5) : 2의 5승인 32를 반환 문자열 주요 메서드 .toLowerCase( ) : 문자열을 소문자로 변경 .toUpperCase( ) : 문자열을 대문자로 변경 .concat( ) : 문자열 연결 연산자 +처럼 문자열을 이어 붙임 .indexOf( ) : 문자열 내에 특정 문자가 몇 번째에 위치하는지 확인. 찾는 문자가 2개 이상일 경우 가장 앞에 있는 문자의.. 2023. 4. 18. JavaScript - 프로토타입 체인 프로토타입 체인 prototype 객체는 기본적인 속성으로 cunstructor와 __proto__를 가지고 있다. 이 중 __proto__에는 자식의 부모 prototype을 가리키는 링크를 담고 있다. 프로토타입 체인은 __proto__의 특징을 이용하여, 부모 객체의 프로퍼티나 메서드를 차례로 검색하는 것을 의미한다. 즉, 특정 객체의 프로퍼티나 메서드 접근 시 자신의 것은 물론 부모 객체의 것도 접근하여 사용가능하다는 것이다. 모든 프로토타입 체이닝의 종점은 Object.protortype이다. 즉, Object는 가장 상위 객체이다. 레퍼런스 https://velog.io/@bining/javascript-prototype%EA%B3%BC-prototype-chain 2023. 3. 16. JavaScript - 프로토타입과 클래스 프로토타입(Prototype) 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. .prototype 객체를 생성하는 생성자 함수의 프로토타입 객체를 가리킨다. 해당 함수로 생성된 객체의 부모객체인 프로토타입 객체를 가리킨다. __proto__ 모든 객체가 가지는 내부 프로퍼티로, 객체의 프로토타입 객체를 가리킨다. 모든 객체는 자신을 생성한 생성자 함수의 프로토타입 객체를 상속받고, __proto__프로퍼티를 사용하면 해당 객체의 프로토타입 객체에 직접 접근.. 2023. 3. 15. JavaScript - 클래스와 인스턴스 클래스(Class) 객체를 만들어 내기 위한 설계도 혹은 청사진이다. 일반적인 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만든다. 참고로 일반적인 함수는 적절한 동사를 포함하며, 소문자로 시작한다. 인스턴스(Instance) 클래스를 바탕으로 한 객체를 인스턴스 객체, 줄여서 인스턴스라고 한다. New 키워드 new키워드를 사용하여 클래스의 인스턴스를 만들어낸다. 생성자(Constructor) 함수 객체를 만들고 기존 객체의 속성에 대한 값을 설정하는 특수함수. 인스턴스가 초기화될 때 실행된다. 실습 ES5) 클래스는 함수로 정의할 수 있다. function Car(brand, name, color){ // 인스턴스가 만들어질 때 실행되는 코드 } ES6) class라는 키워드를 이.. 2023. 3. 15. JavaScript - 배열 , 객체 배열 다량의 데이터를 다룰 수 있는 배열 배열을 잘 다루기 위해서는 배열의 요소를 추가하거나 변경, 삭제하는 방법을 확실하게 학습해야한다. 배열의 기초 let myNumber = [73, 98, 86, 61, 96] 인덱스(index) [0] [1] [2] [3] [4] 요소(element) [73] [98] [86] [61] [96] myNumber[3]; // 61 myNumber[3] = 200; // 3번째 요소를 200으로 변경 배열의 반복 for(let n = 0; n < myNumber.length; n++) 배열의 메서드 console.table(myNumber) // 배열의 표로 보여줌 Array.isArray(myNumber) // true, 어떠한 데이터가 배열인지 아닌지 판별 myN.. 2023. 3. 4. 이전 1 2 다음
