객체 표기법의 종류 점 표기법 대괄호 표기법 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 = ..
프로퍼티 설명 prototype - 모든 함수는 prototype 프로퍼티를 갖는다. - 함수의 prototype은 constructor 프로퍼티 하나만 있는 객체를 가리킨다. - constructor은 함수 자신을 가리킨다. function Rabbit(){ // prototype = {constructor: Rabbit}; } 프로퍼티 설명 [[Prototype]] - 객체는 명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼티를 갖는다. - 생성자 함수로 만든 객체인 경우, 생성자 함수의 prototype 프로퍼티에 연결된 객체의 값을 [[Prototype]]에 연결한다. let animal = { eats: true }; function Rabbit(name) { this.name = n..
종류 설명 내장 객체 - 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다. - 이런 객체를 '내장 객체(Built-in Object)라고 한다. *window, Math, Date 등 DOM(문서 객체 모델) 객체를 사용해 웹 문서를 관리하는 방식 BOM(브라우저 객체 모델) 웹 브라우저의 주소 표시줄이나 창 크기 등 웹 브라우저 정보를 객체로 다루는 것 사용자 정의 객체 사용자가 필요할 때마다 자신의 객체를 정의해서 사용할 수 있다. [공부 좌표] 웹 프로그래밍을 위한 자바스크립트 기본편 P156~157
배열 앞에 무언가를 해주는 메서드 명령어 설명 shift 배열 앞 요소를 제거하고, 제거한 요소를 반환한다. unshift 배열 앞에 요소를 추가한다. let fruits = ['사과', '배', '딸기']; fruits.shift(); //'사과' fruits.unshift('사과'); //3 배열 끝에 무언가를 해주는 메서드 명령어 설명 pop 배열 끝 요소를 제거하고, 제거한 요소를 반환한다. push 배열 끝에 요소를 추가한다. let fruits = ['사과', '배', '딸기']; fruits.push('토마토'); //4 fruits.pop(); //'토마토' *push와 pop은 빠르지만 shift와 unshift는 느리다. [공부 좌표] 배열
Node 생성하기 메서드 설명 Document.createElement(tagName) 지정한 tagName의 HTML 요소를 만들어 반환한다. Document.createTextNode(data); - 새 텍스트 노드를 만든다. - 문자열은 이스케이프 처리된다. *생성한 Node를 다른 곳으로 옮길 때, 기존에 있던 Node를 지울 필요가 없다. 모든 Node 삽입 메서드는 자동으로 기존에 있던 Node를 삭제하고, 새로운 곳으로 Node를 옮기기 때문이다. *이스케이브 처리가 된다? 사용한 문자열이 HTML이 아닌 문자열로 처리 돼, 태그처리가 안되는 것 document.body.textContent = 'textContent'; // 문자열 그대로 출력 ---- 이스케이프 처리 됨 document...
var htmlImageElement = new Image(width, height); - Image() 생성자는 새 HTMLImageElement 인스턴스를 만든다. - document.createElement ('img')와 기능적으로 동일하다. - width, height 값은 생략 가능하다. - 값을 하나만 작성하면, width 값이 되고, height 값은 auto가 된다. See the Pen [JS] image() by mill (@millfeel) on CodePen. [공부 좌표] MDN
속성 공간 설명 translateX(x) 2차원(평면) 가로 좌표의 위치를 변경한다. translateY(y) 2차원(평면) 세로 좌표의 위치를 변경한다. translate(x) translate(x, y) 2차원(평면) [값이 단일인 경우] 가로 좌표의 위치를 변경한다. [값이 이중일 경우] 가로, 세로의 위치를 변경한다. translateZ(tz) 3차원(입체) *3D속성 필요 깊이의 좌표의 위치를 변경한다. 양수 값은 요소를 뷰어쪽으로 가깝게 이동하고, 음수 값은 더 멀리 이동한다. translate3d(tx, ty, tz) 3차원(입체) *3D속성 필요 가로, 세로, 깊이의 위치를 변경한다. *3D속성이 붙은 애들은 하드웨어 가속이 보장이 된다. (포퍼먼스가 좋다) *3D속성이란 transform..
차이 perspective perspective() 유형 속성 메서드 작성 위치 부모 자신 사용 방법 perspective: 값 transform: perspective(값) transform: perspective() - 3D 공간에서 요소와 관측 점과의 거리, 즉 원근감을 지정하는 속성이다. - 값이 작을수록 가깝게 보이고, 멀수록 멀게 보인다. perspective는 뷰어와 요소와의 거리를 나타내고, transform-style은 요소의 표현을 나타내고, perspective-origin는 뷰어가 보는 위치를 설정한다. perspective(d) d - 뷰어에서 z = 0 평면까지의 거리를 나타내는 이다. - 0 또는 음수 값은 원근 변환이 적용되지 않는다. [예제] See the Pen [CSS]..
- 2D 또는 3D 중 어떻게 표현할지를 설정한다. - 속성은 부모에게 사용하고, 적용 범위는 자식에게만 적용된다. (자손X) transform-style: flat; //기본값 transform-style: preserve-3d; transform-style flat (기본값) preserve-3d 공간 평면(=2D) 3D 작성 위치 부모 적용 대상 자식에게 적용 *도형에 마우스를 올려주세요. See the Pen preserve-3d의 적용의 차이 by mill (@millfeel) on CodePen. perspective와 transform-style은 상속X See the Pen perspective와 transform-style은 상속X by mill (@millfeel) on CodePen...
- Total
- Today
- Yesterday
- [[Prototype]]
- scrollHeight
- prototype 프로퍼티
- 객체의 프로퍼티
- outerHeight
- clinetTop
- 대괄포 표기법
- 링크막기 #a링크막기
- 동치 연산자
- innerHeight
- __proto__
- @font-face
- 점 표기법
- offsetTop
- 프로퍼티
- 부등 연산자
- clientHeight
- offsetHeight
- 일치 연산자
- constructor
- javascript class
- 동등 연산자
- scrollTop
- property
- 불일치 연산자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |