Introduction
js의 문법을 추가적으로 알아보자.
정리
getComputedStyle
Computed = "계산된 값"
해당 객체에 적용된 CSS 스타일 요소 값 전체를 가져온다.
중요한 점은 시트 내 객체들을 가져오는 것이 아닌 j시트의 값을 가져온다.
따라서 아래와 같이 객체의 CSS 스타일에 대한 직접적인 접근(값 할당)은 하지 못한다.
var box1_css = getComputedStyle(box1);
box1_css.left = 100 + "px";
read-only라고 나오는 것을 확인할 수 있다. 즉, 단순히 값을 가져오는 것만 가능
그럼 해당 함수는 뭐에 쓰는걸까?
GetPropertyValue
값을 가져왔으니, 값을 확인하는 용도로 사용된다.
getPropertyValue로 특정 스타일의 값 (left, top..etc)을 가져올 수 있다.
var box1_css = getComputedStyle(box1);
// 뒤에 "px"이 붙어서 나오는 String 타입이므로 Int값으로 변경해줬다.
box1_X = parseInt(box1_css.getPropertyValue("left"))
box1_Y = parseInt(box1_css.getPropertyValue("top"))EventListener
이벤트 리스너를 추가하는 방법은 다음 두가지가 있다.
방법 1 - onclick
box.onclick = function(){
console.log("1111 click!");
}
box.onclick = function(){
console.log("2222 click!");
}방법 2 - addEventListener
box.addEventListener("click", ()=>{
console.log("1111 click!");
})
box.addEventListener("click", ()=>{
console.log("2222 click!");
})다음 두가지 방법은 기본적으로 동일하게 동작한다.
차이점
그럼 차이점은 뭘까?
그럴일은 잘 없겠다만, 동일한 상황(onclick)에 대하여 2개의 이벤트를 따로 추가하는 경우 차이가 발생한다.
결론적으로 1번은 두번째 로그만 출력되고 2번은 둘 다 출력된다.
이유
방법1의 box.onclik과 같은 경우 box 객체에 onclick에 해당하는 함수를 "할당"하는 것이므로, function을 다시 할당하게 되면 기존에 있던 function은 덮어 씌워지게 된다.
반대로 방법2의 경우, box에 이벤트 리스너를 "추가"하는 개념이므로 몇가지든 추가할 수 있다.
removeEventListener
이벤트 리스너를 삭제해야하는 즉, 동작하지 않도록 해야하는 상황이 있을 수 있다.
이 떄, removeEventListener 를 사용하면 된다.
이를 사용하기 위해서는 리스너 함수를 리스너를 추가하면서 바로 만드는 것이 아닌, 외부에 미리 만들어 놓아야한다.
예제
박스 내에서 마우스를 움직일 때 "안녕"을 출력하는 이벤트가 있다고 가정하자.
이 이벤트를 삭제하려면 어떻게 할까?
아래와 같은 기존 코드를
box.addEventListener("mousemove", ()=>{
console.log("안녕!")
};다음과 같이 리스너 함수를 밖으로 빼낸다.
var mousemoveListener = function(){
console.log("안녕!")
}
box.addEventListener("mousemove", mousemoveListener);이후 이러한 마우스의 움직임에 따라 안녕을 출력하는 이벤트 리스너를 removeEventListener를 통해 제거한다.
box.addEventListener("mouseup", ()=>{
box.removeEventListener("mousemove", mousemoveListener);
})만약 바로 removeEventListener을 하게 된다면 이벤트 리스너가 추가된 뒤즉시 제거될 것이다. 따라서 마우스가 눌렀다가 떼질 때 해당 이벤트 리스너를 제거하도록 했다.
자바스크립트 배열 컬렉션
기본적으로 Array에 포함된 다양한 method를 제공한다.
- forEach - 기본 interation
- map - 요소에 새 매핑
- filter - 검색 후 조건에 맞는 값으로 새 배열 생성
- reduce - 배열을 돌면서 한 값을 계산 (총합, 평균 등)
- push / pop - 맨뒤
- splice - 위치, 삭제, 추가
- slice - 잘라서 새 배열 생성
- findIndex - 위치 찾기
- every - 모든 요소가 조건 만족을 하는지
- some - 조건 만족하는 요소가 있는지
Github
The Souce Code is now...Here!
