함수 표현식보다 단순하고, 간결한 문법으로 함수를 만들 수 있는 화살표 함수 본문이 한 줄인 함수를 작성할 때 유용하다. 문법 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..
01. 클래스 생성자는 new와 함께 호출하지 않으면 에러가 발생한다. // class 생성 class ClassName{ constructor(){} } // 생성자 함수 생성 function ConsName(){} // 호출 ClassName(); // VM20:1 Uncaught TypeError: Class constructor ClassName cannot be invoked without 'new' at :1:1 ConsName(); 02. 클래스 메서드는 열거할 수 없다. 클래스의 prototype 프로퍼티에 추가된 메서드 전체의 enumerable 플래그는 false이다. - enumerable플래그는 for...in으로 객체 순환을 할 때, key의 값의 반환 유무를 뜻한다. - for...
문법 class ClassName{ constructor(){ ... } method1(){ ... } method2(){ ... } method3(){ ... } } let test = new ClassName(); - class 선언을 통해서 class를 만든다. - new와 함께 className()을 호출하지 않으면 에러가 발생한다. - class는 함수다. - 객체의 기본 상태를 설정해주는 constructor()는 new에 의해 자동으로 호출되므로, 특별한 절차 없이 객체를 초기화 할 수 있다. - class가 호출되면, 내부에서 정의한 메서드가 들어 있는 객체가 생성된다. - method 사이에 쉼표를 사용하지 않는다. [예시] class User { constructor(name) { th..
# 02:27 좌측 코드 리뷰 시작 # 03:03 생성자 함수가 하는 일 객체를 만든다. 객체의 초기 설정을 한다. # 03:22 class 설명 시작 class는 객체를 만드는 공장이다. class Person{ } let kim = new Person(); # 04:17 생성자 함수는 객체가 만들어지는 깔끔한 객체가 아니라, 그 객체가 기본적으로 가지고 있어야할 기능들을 셋팅해주는 기능도 생성자 함수가 해야하는 일이었다. function Person(){ this.name= name; this.first= first; this.second= second; } # 00:22 class에서 메서드를 만들 때, function을 사용하지 않는다. class Person{ function sum(){} //..
property name(=key) 제약사항 이름의 첫 문자는 숫자로 시작할 수 없다. $와 _를 제외한 특수 문자가 없어야 한다. 이름에 공백이 있을 경우, 따옴표를 사용한다. 예약어를 사용할 수 없다. 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동형 변환한다. let fruits = { apple: 'ok', 1banana: '첫번째 문자에는 숫자가 있으면 안돼요', // -------------------------- 에러 water_melon: 'ok', orange$: 'ok', korean-melon: '특수문자는 _, $ 외에는 쓸 수 없어요.', // --------------------- 에러 sweet grape: '공백이 있을 경우, 따옴표를 사용해야 한다.', // ------..
객체 표기법의 종류 점 표기법 대괄호 표기법 1. 점 표기법 - property name에 공백이 있으면 사용할 수 없다. - property name에 표현식을 사용할 수 없다. [점 표기법 property value 읽는 방법] let fruits = { apple: 'ok', water_melon: 'ok', orange$: 'ok', 'sweet grape': 'ok' }; fruits.apple; // "ok" fruits.water_melon; // "ok" fruits.orange$; // "ok" fruits.sweet grape; // 에러 fruits.'sweet grape'; // 에러 [점 표기법 property 추가, 수정하는 방법] // 추가 fruits.strawberry = ..
- Total
- Today
- Yesterday
- 부등 연산자
- offsetHeight
- __proto__
- javascript class
- 링크막기 #a링크막기
- [[Prototype]]
- clientHeight
- clinetTop
- constructor
- offsetTop
- 일치 연산자
- 점 표기법
- prototype 프로퍼티
- property
- 객체의 프로퍼티
- 동등 연산자
- @font-face
- outerHeight
- 불일치 연산자
- innerHeight
- 대괄포 표기법
- scrollHeight
- 동치 연산자
- scrollTop
- 프로퍼티
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |