본문 바로가기

Web/Javascript

(14)
[Javascript Promise 한빛미디어] - 무료 ebook 2015년 책이라 좀 오래되긴 했지만, 내용도 짧고 ES6 기반 설명이라 읽어보면 좋을 것 같다. https://www.hanbit.co.kr/realtime/books/book_view.html?p_code=E5027975256 JavaScript Promise 최근 몇 년, 웹에서는 다양한 변화가 일어나고 있다. HTML5나 ECMAScript6 등 새로운 표준 기술이 잇달아 고안되는 등 웹의 세계는 빠르게 변화하고 있다. 브라우저는 그 변화에 대응하기 위해 릴리즈 www.hanbit.co.kr
scroll 이벤트를 위해 미리 알아둘 것들 window.pageYOffset (혹은 X도 있음) 스크롤을 얼마나 움직였는가. (스크롤 이동 거리) 타겟.offsetTop (스크롤 움직여도 값 변하지 않음) 타겟이 document 상단에서 얼마나 떨어졌는가 스크롤에 영향받지 않음. 타겟.getBoundingClientRect() 타겟의 크기와 위치 값을 가지고 있어서 타겟이 브라우저 창의 top,left,right,bottom에서 얼마나 떨어졌는 지의 값을 알 수 있다. 스크롤 변화할 때마다 값이 바뀌고, 스크롤의 속도에 영향 받는다. window.innerHeight 브라우저 내부 높이 (가로 스크롤바 포함) window.outerHeight 브라우저 창 자체의 전체 높이 window.innerWidth 브라우저 내부 너비(세로 스크롤바 포함) ..
비구조화 할당 (이터레이터 공부 후 마무리하기) 배열, 객체, 반복 가능한 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장. 배열 1) 배열 요소들을 한 번에 각 변수에 초기화 할 수 있다. let [a,b] = [1,2]; // let a = 1, let b = 2와 같은 의미이다.(이를 분할 할당이라고도 함) [a,b] = [a*3, b*5]; //a = a*3, b = b*5 와 같다. let array, first, second; array = [first, second] = [100,200]; console.log('array:', array, 'first:',first, 'second:', second); //결과 array:[100,200], first: 100, second: 200 2) 좌변의 변수와 우변 값 갯수가 같을 필..
비슷해 보이는- setTimeout , setInterval, requestAnimationFrame setTimeout - 설정한 시간이 지나면 특정 기능을 수행한다. let counter = 0; setTimeout(() => { console.log('setTimeout',counter++); },3000); //3초 뒤에 콜백함수를 '한 번' 실행한다. setInterval과 같은 방식으로 실행을 취소 시킬 수 있다. setInterval - 설정한 시간을 기준으로 특정 기능을 반복한다. let counter = 0; let repeater = setInterval(() => { console.log('setInterval',counter++); },500); //0.5초 간격으로 콜백함수를 반복 실행한다. setTimeout(() => { console.log('Clear'); clearInte..
canvas 시작해보기 (내용 다듬기!!) canvas로 그림을 그리려면 canvas객체의 getContext('2d')를 사용해야 함. +) canvas는 태그에 직접 width, height를 해주는 것과 css에 width, height 값을 주는 것이 다른 태그와는 다르게 작동한다. 예를들어, canvas태그에 w=1000을 주고 css에 w=500을 준 경우와 canvas태그와 css 모두 w=500을 준 경우 전자에 그림이 더 작게 표현된다. 너비가 1000픽셀인 그림의 너비를 500px인 해상도에 기존의 비율을 유지해서 그리기 때문임 이 방법을 사용하면 고해상도의 디바이스에 그림을 뿌려줘야하는 경우 선명하게 그림을 뿌릴 수 있다. (예시 - 디바이스 크기의 2배로 캔버스의 크기를 주고, css에는 너비와 높이를 100%로 줌)
생성자와 클래스 - p682~ 학교에서 JAVA 수업시간에 클래스, 객체지향 처음 배울 때 자동차 예시 다음으로 가장 많이 들었던, 붕어빵 예시가 생각났다. 클래스는 만들고자 하는 객체의 설계도인데, 만들려는 객체가 가져야할 속성과 기능을 명시한다. 자바스크립트엔 class가 없었기 때문에 생성자 함수로 인스턴스를 만들었다고 한다. 생성자 함수를 정의 할 때는 '이건 생성자 함수야' 라는걸 표시하기 위해 함수 이름 첫글자를 대문자로 쓴다. 그리고 클래스 즉, 생성자 함수(붕어빵 틀)는 인스턴스 생성 시 전달 받은 인자로 속성을 초기화 한다. 1.생성자 함수 function 붕어빵( 앙꼬 , 반죽 ){ this.앙꼬 = 앙꼬; this.반죽 = 반죽; this.붕어빵굽기 = function(){ console.log(`${this.앙꼬..
날짜 정보가 필요할 땐 new Date() 달력을 직접 짜면서 징그랍게 써본 Date객체 //오늘(요일 월 일 년 시간)포멧으로 반환 결과: Tue Mar 17 2020 14:55:00 GMT+0900 (대한민국 표준시) const today = new Date(); //today라는 이름의 Date 객체 생성 //특정 날짜 정보를 담은 객체를 만들고 싶다면 //인자로 날짜 정보 넘겨줄 때 형식을 잘 지켜줘야 한다 안그럼 값 이상하게 나옴 const anniversary = new Date('1993-08-26'); const day = today.getDay(); //요일을 숫자로 반환 일요일:0 ~ 토요일:6 결과:2( 현재 화요일) const month = today.getMonth(); // 현재달-1 반환 결과: 2 (현재 3월) con..
이벤트 전파 이벤트의 전파 단계 위의 그림처럼 HTML요소는 자식이 부모 위에 겹쳐진 형태로 표시된다. 따라서 자식에서 이벤트가 발생해도 컴퓨터는 자식요소를 클릭한 건지 부모를 클릭한 건지 구분하지 못하기 때문에 전체 요소를 검사하며 발생한 이벤트에 반응하는 리스너가 있는지 찾는다. 윈도우 객체 -> document -> Html -> body -> #outer -> #inner1 -> #inner2 순서로 검사가 진행된다. 1) 캡쳐링 단계 윈도우 객체에서 #inner2 즉, 타겟요소에 도달하기까지 이밴트 리스너를 찾는 단계를 캡쳐링 단계라고 한다. 이 과정에서 타겟요소에 도달하기 전에 해당 이벤트에 반응하도록 등록된 리스너가 있다면, 그 리스너가 해당 이벤트를 빼돌린다.(캡처한다) 이렇게 되면 타겟 요소는 이벤트..