반응형 Programming/JavaScript14 HTML data-* 속성 사용하기 HTML data-* 속성 화면에 보이지는 않지만 데이터를 심어놓을 때 data-set 속성을 사용할 수 있습니다. data-set을 속성값에 입력해준 div 태그를 만들었습니다. 사용자에게 데이터를 보여주지 않으면서 속성에 데이터를 심어두고 필요할 때 마다 사용할 수 있습니다. HTML 문법 Bill Gates Javascript 문법 이제 속성에 추가된 data 속성들을 출력합니다. javascript에서 data-set 속성값들을 가져와 출력합니다. dataset 뒤의 속성들은 camelCase로 변경합니다. 예를 들어 data-user-id의 경우 userId로 변수 타입을 지정해서 javascript에서 가져올 수 있습니다. const user_name = document.querySelecto.. 2022. 5. 4. DOM 이란? (feat javascript CRUD) DOM 이란? Document Object Model의 약자입니다. 변수를 저장할 수도, For문을 실행할 수도 없는 HTML 요소들을 javascript로 조작하기 위해 필요한 모델입니다. HTML을 부모노드와 자식노드로 구성된 하나의 트리로 모델화 하는 것입니다. 웹 브라우저는 서버로 부터 HTML 파일을 받아 DOM tree를 구성합니다. 동일한 원리로 CSS 파일을 받아 CSSDOM tree를 구성한 후 사용자에게 적합한 화면을 디스플레이 하게 됩니다. HTML과 CSS를 조작하는 언어는 javascript입니다. js를 이용해 DOM CRUD를 조작할 수 있습니다. HTML 요소들을 조작하기 위해 사용되는 javascript는 HTML의 태그로 삽입이 됩니다. 웹 브라우저가 HTML 파일을 파싱.. 2022. 5. 2. Javascript String to Arrray 자바스크립트 문자열 배열 변환 방법 How to change string data to list data in Javascript? 자바스크립트에서 문자열 데이터를 리스트로 변경하는 방법은 다음과 같다. split() 함수를 사용해서 문자열을 파싱해주면 Array형태의 데이터가 출력된다. const stringValue = 'data in javascript' const stringToArray = stringValue.split(' ') console.log(stringToArray) -> ['data','in','javascript'] 2022. 1. 28. JavaScipt 오버로딩 vs 오버라이딩 객체지향 언어에서 상속은 핵심 개념이다. 상위 클래스의 메서드와 변수를 상속받아서 하위 클래스에서 사용하는 방식에는 오버로딩과 오버라이딩이 있다. 오버라이딩 overriding 상위 클래스가 가지고 있는 메서드를 하위 클래스에서 재정의하여 사용하는 방식을 말한다. 오버로딩 overloading 함수의 이름은 동일하지만 매개변수의 타입 또는 갯수가 다른 메서드를 구현한다. 매개변수에 의해 메서드를 구별하여 호출하는 방식을 말한다. 자바스크립트에서는 오버로딩을 지원하지 않는다. 아만 arguments객체를 사용하여 구현할 수는 있다. 2021. 10. 29. JavaScript 프로토타임 체인이란? 프로토타입 체인 자바스크립트는 객체의 프로퍼티(메서드 포함)에 접근할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하게 된다. 이를 프로토타입 체인이라 한다. 자바스크립트는 프로토타입체인을 통해 객체지향 프로그램의 구조를 가지고 있고, 상속 기능을 구현한다. 프로토타입의 최상단에 있는 객체는 Object.prototype이다. 모든 객체들이 Object.prototype을 상속받고 있다는 뜻이다. Object.prototype은 체인의 종점이다. 스코프 체인 VS 프로토타입 체인 프로토타입은 상속과 프로퍼티 검색을 위한 메커니즘이다. 자바스크립트 엔진은 객체 간 상속관계로 이루어진 프로토타입 .. 2021. 10. 29. JavaScript 객체 생성방식의 종류? OrdinaryObjectCreate 객체를 생성하는 방법은 여려가지가 있다. 하지만 공통점은 모든 객체 생성방식은 OrdinaryObjectCreate 추상연산을 통해 만들어진다는 것이다. 먼저, OrdinaryObjectCreate은 자신이 생성할 객체의 프로토타입을 인수로 전달 받는다. 자신이 생성할 객체에 추가할 프로퍼티 목록을 옵션으로 전달한다. OrdinaryObjectCreate는 빈 객체를 생성한 후, 객체에 추가할 프로퍼티 목록을 객체에 추가한다. 인수로 전달받은 프로토타입을 자신이 생성한 객체의 [[Prototype]] 내부 슬롯에 할당한 후 생성한 객체를 반환한다. 객체 생성의 종류 객체 리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 객체.. 2021. 10. 29. 이전 1 2 3 다음 반응형
