• Like
  • Save
비개발자를 위한 Javascript 알아가기 #7.1
Upcoming SlideShare
Loading in...5
×

비개발자를 위한 Javascript 알아가기 #7.1

  • 830 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Good day,

    I am Barrister Hans Luke, Please kindly contact me there is an important issue i need to discuss with you concerning my late client,(Usd$10.5 Million) unclaimed Estate.I will give you more clarification on the transaction as soon as I hear from you.Reply me through my private e-mailaddress: - ------ chamberhansluketogo@hotmail.com


    Very truly yours,
    Barrister Hans luke (Esq)
    +22899780143
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
830
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
1
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.   발전시켜나가보죠!
  • 33.   
  • 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.   사용해야한다.
  • 218.   
  • 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.   그린다
  • 248.   
  • 249. 그림을 그릴 준비 #9 39라인의 포토샵 앱 완성 } } } 1 3 2 UI와
  • 250.   연결하고 이벤트를
  • 251.   연결하고 그린다
  • 252. 쓸만한가?
  • 253. 도구를 탓하지 말고 직접 그려보시라! http://codepen.io/ibare/full/uylrh 전체
  • 254.   동작
  • 255.   코드
  • 256. 1 “다음시간에”;! 2 “잘자요~~; Unclosed string.