개념 가끔 웹 사이트를 돌아다니다보면, 스크롤을 할 때마다 한 섹션씩 휙-휙 넘어가는 웹을 경험한 적이 있을 것이다. 마치 PPT처럼 여러 번 스크롤을 해도 한 섹션씩 넘어가는 이벤트는 어떻게 만들어야 할까? 원리는 먼저 스크롤을 통제한 채 스크롤의 움직임을 인지하고, 그 움직임의 값에 따라 window의 scrollTop 값을 바꿔주기만 하면 된다. 나 같은 경우 페이지(섹션)마다 변수값으로 하나의 페이지 번호를 달아주고, 그 페이지 번호에 따라서 스크롤을 통제하는 식의 이벤트를 사용했다. 해결 let pageNumber = 0; // 섹션 넘버 지정 먼저, 초깃값(가장 처음에 나오는 섹션의 번호)은 0으로 주었다. 그리고 총 5페이지의 섹션이 있다고 가정하겠다. 그럼 pageNumber는 0부터 4까..

정의 화살표 함수란, ES6 버전에서 새롭게 생긴 함수의 새로운 형태로 화살표(=>)를 통해 간단하게 함수를 선언할 수 있는 문법을 말한다. (함수 표현식에 해당한다. 호이스팅X) 쓰임 기본형 // 기존의 함수 표현식 const sum = function (){ return a + b; } // 화살표 함수 // 바로 return 값이 나오는 경우 return과 중괄호는 생략 가능하다. const sum = (a, b) => a + b // 파라미터가 1개인 경우 소괄호를 생략해도 된다. const myFunc = x => x * x 기존의 함수 표현식에서는 함수의 식별자 이름(sum)과 소괄호 안에 매개변수, 중괄호 안에 return 값을 넣는 게 일반적이었다. 하지만 화살표 함수에서는 'functio..

문제 높이가 2000px인 document가 있다고 가정하자. 그 document에는 y좌표가 1200px인 div 요소가 있다. 스크롤을 하면서 window 화면의 밑 끝에 div 요소가 닿았을 때, 이벤트를 주려고 하는데 'window 화면의 끝에 div 요소가 닿았을 때' 라는 조건식은 어떻게 세워야 하는걸까? 해결 해당 요소(div)의 y좌표 구하기 우선 화면에 닿는 기준이 되는 요소의 y좌표를 구해야 한다. div라고 하면, div.offset().bottom의 값을 구해야 하는 것이다. 하지만, offset().top은 있어도 offset().bottom은 없는 식이므로 우리가 직접 구해야 한다. $('div').offset().top + $('div').height(); offset().to..

개념 setTimeout() function hello(){ alert("Hello!"); }; let timeOut; start.onclick = function(){ timeOut = setTimeout(hello, 2000); }; setTimeout(실행할 함수, 딜레이 시간)은 특정 함수를 일정 시간 이후 딱 1번 실행시켜주는 함수이다. 위의 코드에서 setTimeout(hello, 2000)은 hello() 함수를 2초 뒤 실행하라는 뜻이다. 시간 지연 함수를 사용할 때는 몇 가지 주의해야 할 점이 있다. 먼저, 변수 선언을 해야 한다. 위의 코드인 경우 timeOut으로 값 없이 먼저 변수 이름만 선언을 해주었고, 클릭했을 때 setTimeout()을 할당해주었다. 이렇게 한 점은 시간 지연..

개념 해당 글은 자바스크립트 엔진의 입장에서 함수를 호출했을 때 준비-초기화-실행 단계 중 준비 과정에서의 실행문 생성과 실행 과정을 글쓴이 한 사람의 입장에서 보기 쉽게 정리한 글이다. 따라서 다른 자바스크립트 교재나 실제 자바스크립트 엔진의 논리 구조와 비슷할 지는 몰라도 내용의 깊이 정도는 다를 수 있다. 그저 이해하기 쉽게 정리한 글임을 다시 한 번 더 강조하는 바이다. 함수가 작동하는 데에는 총 3가지의 단계를 거친다. 준비 단계 - 초기화 단계 - 실행 단계로 준비 단계에서는 실행 컨텍스트를 생성하고 스코프, 변수와 함수, this 바인딩 등 함수를 실행하는 데 필요한 기본의 것들을 실행 컨텍스트에 저장(참조)하는 단계이다. 초기화 단계는 준비 단계에서 정리된 변수와 함수 값에 undefine..