JavaScript(Event Handling)

Presentation on theme: "JavaScript(Event Handling)"— Presentation transcript:

1 JavaScript(Event Handling)
인터넷응용프로그래밍 JavaScript(Event Handling)

2 Ex0) DOM 이벤트

3 Ex1) Reviewing the load Event
html JS update함수, 인터벌

4 Ex2-1) Event mousemove and the event Object
html tbody를 통해 컨텐츠 표시 css 캔버스의 색 효과를 주기 위한 CSS 설정

5 Ex2-2) Event mousemove and the event Object
JS 100x100의 캔버스 생성 Document.createElement()를 통해 tr, td 태그를 생성 후 *.appendChild()를 통해 하위 엘리멘트로 추가 1) 이벤트가 일어날 시에 해당 영역의 태그 이름이 td일 때 2) ctrl 또는 shift 키가 눌러질 때 클래스의 명을 바꾸어 백그라운드의 색이 변경되도록 설정

6 Ex3-1) Rollovers with mouseover and mouseout
html css

7 Ex3-2) Rollovers with mouseover and mouseout
JS 마우스커서가 올라왔을 때의 이벤트 그림이 변환 id를 받아서 글자 색 변환 마우스커서가 벗어났을 때의 이벤트 그림을 원상태로 다시 되돌림 id를 받아서 내용으로 변환

8 Ex4-1) Form Processing with focus and blur
html css

9 Ex4-2) Form Processing with focus and blur
JS 각각 0 ~ 5번까지의 객체에 이벤트를 할당 포커스를 얻는 이벤트와 잃는 이벤트를 추가

10 Ex5) Form Processing with focus and blur

11 Ex6) Event Bubbling(이벤트 중복실행 방지)
JS html

12 인터넷응용프로그래밍 JavaScript(canvas)

13 Ex1) Rectangles 2d를 전달하여 2차원 그래픽을 표시하도록 함
좌표0,0을 중심으로 x, y의 거리 및 사각형의 가로 세로를 결정 좌표0,0을 중심으로 x, y의 거리 및 사각형의 가로 세로를 결정 stroke의 크기 결정

14 Ex2) Lines moveTo 시작점의 좌표 lineTo 라인을 이어서 그리는 좌표 linewidth 라인의 두깨
lineJoin 라인이 연결되는 부분의 처리 lineCap 라인이 끝나는 부분 처리 strokeStyle 색

15 Ex3) Circles arc(x, y, radius, start, end) 30반지름의 360도 전부를 채운 원을 그림
50반지름의 180도의 stroke를 그림(반시계방향으로) 50반지름의 180도를 채운 원 그림(시계방향)

16 Ex4) Shadows y x

17 Ex5) Beziercurves

18 Homework1) 공 튀기기 애니메이션 공이 튀는 애니메이션을 완성하세요.
왼쪽 빈 네모 박스에 코드를 추가하여 완성 합니다. 완벽하지는 않아도 공이 벽을 튀면서 움직이는 것과 같이 보이게 만들어도 상관없습니다. 랜덤으로 튀기지 않고 반복적인 동작이라도 무관합니다.

19 Homework2) 공 던지기 게임 제작 속도와 각도를 맞춘 후 발사버튼을 눌러 네트 안에 공을 넣는 방식의 게임입니다.
calculate()함수에서 공이 목표물에 맞았을 때와 경계를 벗어 났을 때의 조건 문을 채워서 완성해보세요. 다음장의 코드를 참조하세요.

20 Homework2) 코드

21 Homework2) 코드