1. For non-developers!
Learn Javascript Programming!
!
Learning contents with!
Event handler Example!
“Photoshop v0.000000000000000000001 for Web”!
!
!
!
!
Kim min tae @ibare!
NCSOFT http://ibare.kr https://medium.com/@ibare
#7.1

2. 초 간단 포토샵을 만들겠습니다
요구사항은

3. 무엇인가요?
1. 마우스로

4. 화면에

5. 점을

6. 그릴

7. 수

8. 있다

9.
2. 마우스의

10. 위치가

11. 표시된다

12.
3. 점의

13. 크기와

14. 색을

15. 지정할

16. 수

17. 있다

18.
4. 점의

19. 투명도를

20. 조절할

21. 수

22. 있다

23.
5. 화면을

24. 지울

25. 수

26. 있다
버전은

27. 0.000000000000000000001에서

28. 시작합니다.

29.
우리

30. 애자일하게

31. 점진적으로

32. 발전시켜나가보죠!

34.
;-)

35. 초 간단 포토샵을 만들겠습니다
이

36. 강좌를

37. 다

38. 듣고

39. 나
면

40. 이런

41. 그림을

42. 브라
우저만으로

43. 그릴

44. 수

45.
있는

46. 웹앱을

47. 보게

48. 될

49.
것입니다.

50. CANVAS
HTML

51. 태그에는

52. 점과

53. 선을

54. 그릴

55. 수

56. 있는

57.
“CANVAS”라는

58. 태그가

59. 있다
캔버스의

60. 폭과

61. 높이

62. (픽셀)

63. CANVAS

64. 그림을 그릴 준비 #1 UI 만들기

65. 그림을 그릴 준비 #2 캔버스 붓 얻기
Canvas가

66. 제공하는

67. 붓(Context)를

68. 얻는다.

69. 이

70. 붓
으로

71. Canvas가

72. 제공하는

73. 기능을

74. 사용할

75. 수

76. 있다.

77. 그림을 그릴 준비 #3 UI와 연결지점 설정하기
사용자가

78. 소통하는

79. UI

80. 요소(컨트롤)의

81. 값을

82.
얻거나

83. 넣기

84. 위한

85. 코드를

86. 작성한다.

87. 그림을 그릴 준비 #4 이벤트 알아내기
캔버스는

88. 다양한

89. 사건에

90. 대하여

91. 이벤트를

92. 발생시킴.

93. 이벤트를

94.
소비하는

95. 소비자에게

96. 이벤트

97. 정보도

98. 제공.

99. 어떤

100. 사건에

101. 대하여

102.
어떤

103. 일을

104. 할지만

105. 결정하면

106. 됨

107. -

108. 이벤트

109. 기반

110. 프로그래밍

111. 그림을 그릴 준비 #4 이벤트 알아내기
요구사항은

112. 무엇인가요?
1. 마우스로

113. 화면에

114. 점을

115. 그릴

116. 수

117. 있다

118.
2. 마우스의

119. 위치가

120. 표시된다

121.
3. 점의

122. 크기와

123. 색을

124. 지정할

125. 수

126. 있다

127.
4. 점의

128. 투명도를

129. 조절할

130. 수

131. 있다

132.
5. 화면을

133. 지울

134. 수

135. 있다
mousemove mousedown mouseup
마우스

136. 커서가

137.
캔버스

138. 위를

139. 돌아다닐

140. 때

141.
발생
마우스

142. 커서가

143.
캔버스

144. 위에서

145. 버튼이

146. 눌렸을

147. 때

148.
발생
마우스

149. 커서가

150.
캔버스

151. 위에서

152. 버튼을

153. 땠을

154. 때

155.
발생

156. 그림을 그릴 준비 #5 이벤트 연결하기
*이벤트를

157. 소비할

158. 함수(이벤트

159. 핸들러)
를

160. 만들고

161. 이벤트에

162. 연결시킵니다.

163. 그림을 그릴 준비 #6 마우스 위치(좌표) 표시
이벤트

164. 발생의

165. 주체인

166. 캔버스가

167. 전달해준

168.
이벤트

169. 정보(event)에서

170. 마우스

171. 위치

172. 값
(offsetX,

173. offsetY)를

174. UI에

175. 넣으면

176. 끝!

177. 그림을 그릴 준비 #7 화면(캔버스)에 점 그리기
마우스가

178. 클릭되면

179. (mousedown)

180. 클릭된

181. 마우스

182. 좌표에

183. 캔버
스가

184. 제공해준

185. 붓(Context)의

186. 사각형

187. 박스

188. 그리기

189. 도구(fillRect)
를

190. 이용하여

191. 점을

192. 그린다
잘

193. 될까?
점은

194. 그려지지만

195. 클릭한번에

196. 하나의

197. 점

198. 만이

199. 그려진다.
왜

200. 그럴까?
실제

201. 동작은

202. 마우스

203. 버튼을

204. 누른

205. 후(mousedown)

206. 마우스

207. 버튼을

208.
땔

209. 때까지(mouseup)

210. 점을

211. 계속(mousemove)

212. 그려야

213. 한다.

214. 즉

215. 세
개의

216. 이벤트를

217. 사용해야한다.

219. 그림을 그릴 준비 #8 점 그리기 동작 보완
마우스

220. 버튼이

221. 눌린

222. 상태인지를

223. 공유(세가지

224. 이
벤트

225. 핸들러가)

226. 하기

227. 위해

228. 변수를

229. 준비
마우스

230. 버튼이

231. 눌리면

232. 참
으로

233. 버튼이

234. 떨어지면

235. 거
짓으로

236. 설정한다
mousedown

237. 에

238. 있던

239. 그리기

240. 코
드를

241. mousemove로

242. 이동시킴

243.
마우스

244. 버튼이

245. 눌렸을

246. 때만

247. 그린다

249. 그림을 그릴 준비 #9 39라인의 포토샵 앱 완성
}
}
}
1
3
2
UI와

250. 연결하고
이벤트를

251. 연결하고
그린다

252. 쓸만한가?

253. 도구를 탓하지 말고 직접 그려보시라!
http://codepen.io/ibare/full/uylrh
전체

254. 동작

255. 코드

256. 1 “다음시간에”;!
2 “잘자요~~;
Unclosed string.