Language/JavaScript (47) 썸네일형 리스트형 <자바스크립트 기초> 17. 마우스 이벤트 * 마우스 이동 이벤트 - CSS로 3D 처리된 공간을 좀 더 인터랙티브하게 보이기위해 마우스의 이동에 따라 각도가 조금씩 변하게 만들어보자. 즉 다음 그림과 같이 만들어볼 것이다. - 위와 같은 처리를 위해 다음과 같이 생각할 수 있다. ① 이벤트 리스너에 mousemove 를 사용한다. ② 이벤트 리스너에 함수를 넣고 거기에 객체를 통해 .clientX 와 .clientY 로 마우스의 좌표 값을 가져온다. ③ 마우스의 좌표를 적당하게 사용하기 위해 끝에서 끝까지를 -1에서 +1까지 숫자로 나타내어 사용할 것이다. 이는 창의 전체에서 좌표의 비율을 사용하면 가능할 것이다. ④ 3D가 적용된 공간의 스타일객체에 transform 속성에 rotateX와 rotateY를 입력한다. - 위를 코드로 나타내어 .. <자바스크립트 기초> 16. 타이밍 다루기 1. setTimeout * 지연 - setTimeout 은 타이밍을 원하는 만큼 지연시키는 역할을 수행한다. setTimeout(F, 1000); - setTimeout(function, ms); 과 같이 사용한다. 이 때 함수자리에는 미리 선언해둔 함수가 들어갈 수 있고, 두번째 매개변수는 지연시킬 시간을 ms단위로 기재한다. * 취소 - 앞서 봤던 지연을 변수에 넣을 수도 있다. let timeId; timeId = setTimeout(F, 1000); clearTimeout(timeId); - 변수 = setTimeout(function, ms); 이라고 선언하여 작동시킬 수 있으며, 이 때 clearTimeout(변수) 를 이용하면 셋타임을 완전히 클리어시켜서 함수자체가 실행이 안되도록 할 수 .. <자바스크립트 기초> 15. 애니메이션 다루기 * 트랜지션 - CSS의 트랜지션을 자바스크립트에서 좀 더 세밀하게 다뤄보자. - 먼저 HTML과 CSS를 이용하여 공모양의 ball클래스를 만들었다고 가정하자. - 이를 왼쪽 위에 붙여두기위해 앱솔루트 포지션을 주었고, 웹 문서에서 클릭을 하는 곳에 공이 따라오도록 하는 스크립트를 작성할 것이다. const ballElem = document.querySelector('.ball'); window.addEventListener('click', function (e) { ballElem.style.transform = 'translate('+(e.clientX-15)+'px, ' + (e.clientY-15)+ 'px)'; }) ballElem.addEventListener('transitionend',.. <자바스크립트 기초> 14. 스크롤 이벤트 (1) * 위치값 가져오기 - 스크롤 이벤트를 이용하려면 스크롤에 따라 변하는 위치값을 가져올 수 있어야 한다. - 먼저 전체 다큐먼트의 스크롤에 따른 위치값을 받아보자. (function() { const outputElem = document.querySelector('.output'); window.addEventListener('scroll', function() { outputElem.innerHTML = window.pageYOffset; }); })(); : 이벤트 리스너에 'scroll'을 입력함으로써 스크롤 이벤트를 받아올 수 있다. .pageYOffset 속성은 현재의 세로 위치 값을 픽셀단위로 표현한다. 위의 코드를 실행시키면 output이라는 클래스에 스크롤에 따라 변하는 위치값을 보이도록.. <자바스크립트 기초> 13. 이벤트 (2) * 이벤트 위임 - 우리는 지난 장에서 for문을 통해 각각의 리스트에 리스너를 달아주고 클릭시 함수가 실행되도록 하는 이벤트를 만들었다. 그러나 이는 양이 많아지면 많아질수록 리스트가 많아진다. DOM 스크립트가 많아질수록 웹이 무거워지므로 우리는 리스너를 줄일 수 있는 방법을 알아보자. - 이벤트 위임이란 리스너를 부모태그에게만 줌으로써 리스너의 사용을 최소화 하는 것이다. var currentMenu; var menu = document.querySelector('.menu'); function clickHandler(e) { if (currentMenu) { currentMenu.classList.remove('menu-active') } e.target.classList.add('menu-act.. <자바스크립트 기초> 12. 이벤트 (1) * 이벤트란 - 이벤트란 정적인 상태의 웹에서 특정한 동작을 시행하는 것을 의미한다. - 예를 들어 웹문서가 로드가 다 되었을 때, 창 크기가 바뀔 때, 마우스가 클릭되었을 때, 마우스 휠이 움직일 때, 화면에 터치가 이루어 졌을 때 등등이 있다. - 우리는 이러한 이벤트에 반응하여 동작을 시행하는 함수를 만들 것이다. * 이벤트 함수 // 클릭 // - 먼저 간단하게 버튼을 만들었다. 우리의 목표는 버튼을 클릭하였을 때 main-title이라는 id를 가진 h1태그의 배경색을 바꾸는 것이다. - btn이라는 변수에 클래스명을 이용하여 버튼을 담아주었다. - 다음으로 변경이 이루어지는 h1태그도 id를 이용하여 mainTitle 변수에 담아주었다. - 이제 클릭되었을 때 시행될 함수를 만들어야한다. 이 .. <자바스크립트 기초> 11. DOM 스크립트 (2) 우리는 저번 장에서 변수에 HTML의 태그를 불러오는 방법에 대해 배웠다. 이제 불러온 태그를 그 변수를 이용하여 다뤄보자. * 속성 다루기 var link = document.querySelector('.list a'); console.log(link.getAttribute('href')); link.setAttribute('href', 'google.com'); console.log(link.getAttribute('href')); : 먼저 link라는 변수에 list라는 클래스의 a 태그를 삽입하였다. 이 때 변수.getAttribute('속성명') 으로 그 속성의 값을 불러올 수 있다. : setAttribute('속성명', '변경 값') 을 이용하면 속성의 값을 다른 값으로 변경시킬 수 있다. .. <자바스크립트 기초> 10. DOM 스크립트 (1) * DOM 스크립트란 - DOM 스크립트는 Document Object Model 스크립트의 약자로써 HTML문서의 태그나 클래스, 텍스트, 속성 등을 모두 객체로 취급한다는 의미이다. - DOM 스크립트는 위의 객체들을 조정하기 위해 만들어졌다. * 스크립트의 위치 - DOM스크립트에 들어가기전에 스크립트의 위치에 대해 짚고 넘어갈 필요가 있다. 스크립트 태그는 헤드에 넣어야할 것 같지만 단순히 그렇게만하면 DOM스크립트와 같이 body를 읽어야 변수를 받아들이는 스크립트는 수행이 불가능하다. 그러면 어떻게 해야할까. 이를 알아보기위해 id가 main-title인 h1태그를 title이라는 변수에 넣는 돔스크립트를 작성한다고 치자. var title = document.getElementById('ma.. <자바스크립트 기초> 09. 변수의 유효범위 * 유효범위 - 변수는 각각 유효범위(Scope)를 가진다. 이 때 스크립트 전체에 영향을 미치는 변수를 전역변수라 하고, 특정 부분에서만 작동하는 변수를 지역변수라 한다. 아래에서 더 자세히 알아보자. * 전역변수 var a = 100; 위는 전역변수이다. a를 100이라 선언했으므로, 어디에서든 a를 다른 값으로 주지 않는 한 100이다. 즉 어디에서나 쓸 수 있다. 그러나 이러한 점 때문에 최대한 안쓰는 것이 좋다. 겹칠우려가 있으며, 이 때는 뒤에서 선언된 것만 인식된다. * 지역변수 function sample() { var b = 200; } 위와 같이 함수 내에서 생성된 변수를 지역변수라 한다. 이는 변수가 선언된 함수 내에서만 작동한다. 이 함수 밖에서 b를 호출하면 정의되지 않았다고 뜬다.. <자바스크립트 기초> 08. 객체 * 객체란 - 객체는 배열과 비슷하게 여러가지 데이터를 저장할 수 있는 기능을 갖고 있다. 그러나 배열과 달리 인덱스를 직접 원하는 형태로 지정이 가능하다. - 위와 같이 객체는 인덱스가 아닌 키를 지정하여 각 값과 대응시킨다. - 참고로 위의 사진과는 달리 객체에는 순서가 없다. 우리는 순서와는 별개로 키를 이용하여 값을 대응시킨다. * 객체 만들기 - 객체는 배열과 달리 {} 중괄호를 이용하여 만들 수 있다. var grades = {'harry': 80, 'iu': 98, 'suzy': 95}; : 위와 같이 중괄호 안에 키와 값을 각각 대응시켜 만든다. - 또다른 방법으로 빈 객체를 만들고 키와 값을 추가시켜갈 수 있다. var grades = {}; grades['harry'] = 80; gra.. 이전 1 2 3 4 5 다음
