자바스크립트기초 (20) 썸네일형 리스트형 <자바스크립트> ? 연산자와 ?? 연산자 * 조건부 연산자 '?' - 조건에 따라 다른 값을 변수에 할당해줄 때, if문 대신 조건부 연산자 '?'를 사용할 수 있다. let sojuAllowed; let age = prompt('나이는? : '); if (age > 18) { sojuAllowed = true; } else { sojuAllowed = false; } - 나이가 19세 이상이어야 소주를 허용하는 코드를 작성했다. 위를 조건부 연산자를 사용하여 표현하면 다음과 같다. let sojuAllowed = (age > 18) ? true : false; - 코드가 매우 간결해 졌음을 알 수 있다. 물음표 연산자의 사용법은 다음과 같다. 변수 = 조건 ? 값1 : 값2; - 사실 위는 비교 연산자 자체가 true와 false를 반환하므로.. <자바스크립트> 화살표 함수와 콜백 함수 * 함수 표현식 - 함수를 표현하는 방식에 대해서는 이미 예전에 다뤘다. 다시 살펴보자면 다음과 같다. function showHi() { alert("Hello"); } - 위는 함수 선언문 방식이다. let showHi = function() { alert("Hello"); }; - 위는 함수 표현식 방법이다. 변수에 함수를 할당하는 것처럼 사용하였다. - 함수 선언문 방식은 if {...}, for {...} 과 같이 중괄호로 만든 방식이므로 ;(세미콜론)이 없더라도 구문의 끝임이 내장되어 있다. 이와 달리 함수 표현식 방식은 변수를 사용했으므로 구문의 끝을 나타내야한다. 따라서 ; 를 사용하였다. - 함수 선언문과 함수 표현식의 가장 큰 차이는 호출이다. 선언문은 어디에 작성하더라도, 심지어 호출.. <자바스크립트 기초> 18. 스크롤 이벤트 (2) * 지속적인 스크롤 이벤트 - 스크롤이 움직일 때마다 캐릭터가 움직이고 스크롤이 멈추면 캐릭터도 멈추는 이벤트를 만든다고 가정하자. - 이 때 스크롤 때마다 빈번히 일어나는 작업은 자칫하면 메모리를 엄청나게 잡아먹을 수 있다. 즉 스크롤이 움직일때마다 if문이 실행되고 멈추면 다른 if문이 실행되고, 계속 스크롤의 움직임을 확인한다든지 여러 경우가 있다. - 우리는 효율적인 작업을 위해 Timeout을 사용할 것이다. - 상태를 나타내기위해 scrollState라는 변수에 미리 false값을 담아두었다. 멈춘 것을 false로 표현하기 위함이다. - 캐릭터가 움직이는 것은 'moving'이라는 클래스를 추가하여 실행할 것이고, 스크롤이 멈추면 'moving'클래스를 제거하여 캐릭터를 멈출 것이다. Cha.. <자바스크립트 기초> 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('속성명', '변경 값') 을 이용하면 속성의 값을 다른 값으로 변경시킬 수 있다. .. 이전 1 2 다음
