비표준 속성의 충돌을 방지하기 위한 data-* 속성 ’data-'로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약이 되고, dataset 프로퍼티를 사용하면 data 속성에 접근할 수 있다. [예제] 요소에 이름이 "data-about"인 속성이 있다면 elem.dataset.about을 사용해 값을 얻을 수 있다. data-order-state 같이 여러 단어로 구성된 속성은 카멜 표기법(dataset.orderState)으로 변환해서 사용할 수 있다. Q. 속성과 프로퍼티의 차이는? 속성 – HTML 안에 쓰임 프로퍼티 – DOM 객체 안에 쓰임 Q. 비표준 속성이란 무엇인가요? 비표준 속성은 사용자가 직접 지정한 데이터를 HTML에서 자바스크립트로 넘기고 싶은 경우나 자바스크립..
문법 Object.create(proto[, propertiesObject]) [proto] 새로 만든 객체의 prototype이어야 할 객체. [propertiesObject - 옵션] 값을 생략했을 경우 => 빈 객체를 생성한다. 값을 설정하되, 플래그 값을 생략했을 경우 => 생략한 플래그의 값은 false가 된다. 이러한 속성은 Object.defineProperties()의 두 번째 인수에 해당한다. (Object.defineProperties(): 한번에 여러 개의 프로퍼티를 정의/수정하는 기능) [예제] let user = { name : 'mill' } // 2번째 인수 값을 주지 않을 경우, 빈 객체가 생성된다. let empty = Object.create(user); empty; //..
# 02:40 super() => 부모 constructor를 호출하는데, 자식 constructor 내부에서만 사용 할 수 있다. # 03:56 super.method() => 부모 클래스에 정의된 method를 호출한다. 화살표 함수에는 super가 없다. class Rabbit extends Animal { stop() { setTimeout(() => super.stop(), 1000); // 1초 후에 부모 stop을 호출합니다. } } 화살표 함수의 super는 stop()의 super와 같아서 위 예시는 의도한 대로 동작한다. [의도한 대로 동작하는 이유] setTimeout메서드는 브라우저 환경에서 인수로 전달받은 함수를 호출할 때, this에 window를 할당한다. 이 문제를 해결하기 ..
var closestElement = targetElement.closest(selectors); 선택자와 일치하는 노드를 찾을 때까지 요소와 해당 부모 (문서 루트를 향하는 방향)를 탐색한다. 이 중 가장 가까운 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환한다. [예제] const child = document.querySelector('.child'); let parentSave = child.closest('.container'); let none = child.closest('.none'); 부모 요소가 있으면 요소를 반환하고, 없으면 null을 반환한다. [공부 좌표] Element.closest() 이벤트 위임
함수 표현식보다 단순하고, 간결한 문법으로 함수를 만들 수 있는 화살표 함수 본문이 한 줄인 함수를 작성할 때 유용하다. 문법 let func = (param1, param2, ...paramN) => expression 왼쪽에 있는 매개변수를 이용해 => 오른쪽에 있는 표현식을 평가하고 반환한다. 아래 함수의 축약버전이라고 할 수 있다. let func = function(param1, param2, ...paramN) { return expresstion; } 예 01) let sum = (a, b) => a + b; sum(3, 7) //10 예 02) 매개변수가 하나만 있을 경우 let double = n => n * 2; alert(double(3)); 예 03) 매개변수가 하나도 없을 경우: ..
문법 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) [start] - 배열의 변경을 시작할 인덱스이다. - 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. - 음수인 경우 배열의 끝에서부터 요소를 세어나간다. [deleteCount] - 배열에서 제거할 요소의 수 - 값을 생략하거나 배열의 갯수보다 많거나 같으면 모든 요소를 제거한다. - deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다. [item1, item2, ...] - 배열에 추가할 요소 - 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다. [반환 값] - 제거한 요소를..
className 속성 무언가를 대입하면 클래스 문자열 전체가 바뀐다. classList 메서드 add: class 추가 remove: class 제거 toggle: class가 존재할 경우 class를 제거하고, 그렇지 않으면 추가 contains: class 존재 여부에 따라 true / fasle를 반환 *메서드의 값은 "문자열"이다. * node.contains와 classList.contains는 다르다. 예제 div.className = 'test'; //className은 개별로 수정이 안됨. div.className = 'page menu'; div.classList.add('add'); div.classList.remove('add'); div.classList.toggle('toggle..
속성 설명 버블링(bubbling) - 기본값 - 이벤트가 발생하면, 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작한다. (안쪽 => 바깥쪽) 캡처링(capturing) - 버블링의 반대되는 개념 (바깥쪽 => 안쪽) // 버블링 elem.addEventListener('이벤트타입', handler) //false가 기본값이다. // 캡처링 elem.addEventListener('이벤트타입', handler, true) 캡처링 # 03:13 이벤트 1개 호출 document.getElementById('target').addEventListener('click', handler, true); # 03:42 이벤트 2개 호출 document.getElementById('targ..
- Total
- Today
- Yesterday
- constructor
- 동등 연산자
- @font-face
- 불일치 연산자
- innerHeight
- property
- 객체의 프로퍼티
- clientHeight
- 일치 연산자
- 동치 연산자
- 점 표기법
- clinetTop
- 대괄포 표기법
- 프로퍼티
- scrollHeight
- __proto__
- offsetTop
- prototype 프로퍼티
- [[Prototype]]
- scrollTop
- 링크막기 #a링크막기
- offsetHeight
- outerHeight
- javascript class
- 부등 연산자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |