이벤트 속성 사용하기(비디오 버전)

이 강의는 말하면서 보여주는 것의 녹화입니다.
칸 아카데미의 인터랙티브 보여주기를 사용하면 멈추고 코드를 수정하는 것이 가능합니다. 그리고 더 나은 해상도에서 볼 수 있습니다.

윈스턴 그림이 있는
페이지를 가져와봤어요

이제 슬슬 추워지고
윈스턴은 나이가 들어가니까

윈스턴은 수염이
있으면 좋겠대요

제가 수염을
그려줄 수도 있죠

하지만 이게
더 멋질 거에요

사용자가 원하는 대로 수염을
윈스턴에게 그려줄 수 있다면요

긴 수염과 까칠한 부분도
약간 있고 어떤 걸 원하든지요

그럼 이걸 어떻게 할 수 있을까요?

한 가지 방법은 이미지 위에서의
마우스 움직임(mouseMove) 이벤트를 넣는 거에요

사용자가 마우스를 얼굴 위로
움직이면 함수가 호출되게요

방금 배운 것으로
한번 해볼게요

첫 번째는
요소를 찾는거에요

이미지 말이죠

var face = document.getElementById()

id는 face라고 하죠
괜찮은 ID네요

두 번째는 콜백함수를
만드는 거에요

일단 적용되는 걸 봐야하니까
간단한 걸로 해볼게요

나중에 더 많은 걸
만들어 볼게요

좋아요

마지막 단계는
이걸 이것과 연결하는 거에요

마우스 이벤트가 발생했을 때
이 함수가 호출되어야 하니까요

face.addEventListener("mousemove",
라고 쓰고

함수 이름을 쓰세요
'onMouseMove'

이제 이걸 멈추고 얼굴 위로
마우스를 움직여봐요

문구가 보이세요?

이 효과가 적용되는 걸
여러분도 봤을 거에요

하지만 이게 우리가
원하는 효과는 아니에요

우린 문구를 쓰는게 아니라
그림을 그리고 싶어요

웹페이지에 어떻게
그림을 그릴 수 있을까요?

canvas 태그를 사용해서
픽셀을 그릴 수 있어요

여기 ProcessingJS에서
하는 것 처럼요

우리가 그리는 건 수염이지만
실제로는 수많은 검은 점일 거에요

그냥 각 점에
div를 생성해서

절대 위치로 div에게
위치를 줄 수 있죠

여기 수염 하나로
해볼게요

beard 클래스를 가진
div를 만들고

이 수염에게 CSS를 주고요
여기 넣을게요

이건 이렇게 고칠게요

이 수염의 배경색은
검정색이고 5x5 픽셀이에요

둥글게 만들려면
여기 2픽셀의 테두리를 줘요

그리고 절대 위치 값을 쓰고 있어요

지금은 div가 얼굴 밑에 있네요

얼굴 위로 올리려면
어떻게 해야할까요?

절대 위치를 사용한다는 것은

'top'과 'left' 속성을 사용해서

실제 위치를 표시해줘야해요
절대 위치니까요

여기 'top:80px'와
'left:15px'를 줄게요

좋아요

이제 HTML으로는 되니까
자바스크립트로 해볼게요

사용자가 마우스를 움직일 때마다
이 div가 생길 수 있게요

자바스크립트 콜백 함수로
돌아가 볼게요

첫 번째는 div를 만드는 거에요

document.createElement()
함수로 할 수 있어요

여긴 div가 되겠죠

두 번째로는 클래스를 추가해요
'beard.className = "beard";'

이제 div가 생겼는데 어딘가에 떠 있어요

마지막으로는 바디에 넣어주세요

이제 HTML에서 한 걸
자바스크립트로 해봤어요

HTML에서는 지울게요

이제 윈스턴을 클릭해 보세요

어떤 일이 일어나는지 보세요

수염이 생기는 거 봤어요?

이걸 여러번 하면요?

그러면 두 번째 클릭에서는
아무것도 안 되는게 보일 거에요

또는 아무것도
안 되는 것처럼 보이죠

왜냐하면 모든 div가
top과 left 값이 같아서

새 div가 예전 것 위에
겹쳐지고 있어요

우리는 div가 사용자의 마우스가
있는 곳에 생기길 원해요

마우스의 위치를
어떻게 알 수 있을까요?

브라우저는 많은 정보들을
기록하고 있어요

사용자 이벤트가 발생할 때마다
어디서 일어나는 지 같은 것들요

브라우저는 여러분들에게
매번 그 정보를 제공해요

이벤트 리스너 함수가
호출될 때마다 불러와요

그럼 어디서 어떻게 놀라운
정보를 얻을 수 있을까요?

힌트로 한 글자만 보여줄게요

이 e는 이벤트 정보 객체에요

브라우저는 이 객체를
첫 번째 인자로 전송해요

이벤트 리스너 콜백 함수가
호출되어질 때마다 말이죠

전에는 필요없었으니까
이 인자를 쓰지 않았어요

하지만 이제 사용할 거니까
객체에 이름을 줄거에요

이름은 함수에서 참조하기
쉽게 해줄거에요

자바스크립트에서는 함수에 여러 개의
인자를 줘도 호출할 수 있어요

함수가 그 인자를 사용하지 않고
참조하지 않아도 말이죠

이 정보는 항상 받고있었어요
우리가 몰랐을 뿐이죠

이제 이 e의 로그를 보기 위해
'console.log(e)'를 쓸게요

이제 잠깐 윈스턴을 클릭하고
콘솔을 관찰해보세요

이 이벤트 객체의
로그가 출력되는게 보일 거에요

그리고 이 객체의
속성을 볼 수 있어요

우리가 관심있는 속성은
두 개가 있어요

'clientX'와
'clientY'에요

이벤트의 x와 y 위치가 기록되는데
이걸 사용하게 될 거에요

수염의 위치를
지정하기 위해서요

수염의 top을 e.clientY로 하고
단위로는 px를 추가하세요

left는 e.clientX로 하고
단위로는 px를 추가하세요

이제 잠시 멈추고
마우스를 올려보세요

윈스턴에게 수염을 그려주세요

꽤 멋지죠?

여러분이 각종 색칠 프로그램을
상상할 수 있을거에요

clientX와 clientY를 이용해서요

콘솔에서 본 것 처럼
여러 속성들이 있어요

여러분이 이벤트 객체에서
사용할 수 있는 것들이요

제 생각에 가장 유용한 것은
키보드와 관련된 거에요

여러분은 사용자가 누르고
있던 키를 알 수 있어요

이벤트가 일어날 때 말이죠

이걸로 키보드를 사용하는 인터페이스나
아주 재밌는 게임을 만들 수 있어요

한 가지 더 있어요

이 인자를 e라고
부르지 않아도 돼요

일반적이지만 어떤 개발자들은
evt나 evert라고 불러요

뭐라고 부르든지 상관없어요

그게 브라우저가 여러분의 함수에
전달하는 첫번째 인자라면요

그리고 그 객체를 이런 방식으로
참조할 것이라면요

만약 문제가 생긴다면
console.log를 사용하도록 해요

어떤 일이 일어나는지
디버깅을 도와줄거에요

여러분이 웹 개발자가 되면

콘솔은 아마 여러분의
가장 친한 친구가 될거에요

쓰세요!