윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 55강 - 10장 조금 더 나아가기(2) > javascript

javascript

자바스크립트 강의 리스트

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 55강 - 10장 조금 더 나아가기(2)

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
15444120574723.jpg

 안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 임원 3판 55 강 돼

있고요
이번 강의에서는 347 페이지에 있는 13 10.3 절 문서 기체와 객체
지향 을 사용한 움직임 구현에 대해서 살펴보도록 하겠습니다 지난 강의에서
js 2 이 같은 사이트를 살펴 보라 그랬는데 용
사실 그 파이트 같은 경우를 보다 보면은 이런 것까지 알아야 되나 라는
생각을 조금 하실 수 있을 거라는 생각이 들어요
왜냐 암실 전적으로 그렇게 어려운 코드를 우리가 사용하는 경우는 드물
거든요
우리가 사용하는 정도라면 뭐 웹사이트에서 제가 아는 차가 뭐 아반떼
쏘나타 그랜저 밖에 없어 쏘나타를 뛰어 봤는데 뭐 이렇게 오른쪽으로
움직이며 는 요렇게 가고 왼쪽으로 움직이면 요렇게 가고 뭐 3차원을
어떻게 구현한 것 같은 요런 사이트 르르 를 구현하는 정도에요 근데 요거
를 코드를 확인을 해 보시게 되면 굉장히 쉽게 구현 되었다는 걸 아실 수
있을텐데요
현재 요녀석은 이미지 태그에 요 그래서 이미지의 소스 속성이 뭐 현재
쩜컴 kr 에 360 v2 아래 쏘나타 wc 0 0 0 0 0 0 0 0
라고 되어 있는데 요 녀석을 한번 붙여 넣으면 요렇게 되어 있는
이미지입니다 그래서 마우스를 잡고 오른쪽으로 움직이게 되면 특정한 거리
1 10 픽셀의 에서 20 픽셀 정도 움직였을 때 마다 지금 오른쪽에
번쩍번쩍 이면서 바뀌죠
이미지를 그냥 변경 하는 것뿐이에요 그래서
0000 4일 때는 요러한 하면 5일 때는 약간 더욱 움직인 화면 6 일
때는 조금 더 움직인 화면 그리고
7일 때는 조금 더 움직이는 화면을 해가지고 그냥 문서 객체 내부에 있는
이미지를 변하는 것 뿐이거든요
그래서 요러한 형태의 실제 사이트들을 한번 분석을 해 보시면서 이러한
녀석들은 어떻게 구현 되어 있지를 확인을 해 보시는 것도 좋은 경험이 될
것이라고 생각을 합니다 그럼 오늘 강의를 바로 진행해 보도록 할게요 일단
스크립트 태그를 3개로 나눴는데 요 세계로 나눈 이유는 딱히 없고 설명을
할 때 이걸 분할해서 설명하기 위함이라고 생각해주시면 되겠습니다
일단 보조 함수 하나 넣고
생성자 함수 넣고 그리고 실질적인 프로세스가 처리되는 프로세스의
부분이라고
입력 할게요 그래서 세 가지를 9분을 했는데요 뭐 실제 개발을 할 때는
이제 분리될 수도 있고 합쳐질 수 도 있고 기억을 해 주시면 좋겠습니다
어쨌거나 보조 함수는 쉽다 시 35 에 나오게 되는데요
현재 화면과 같은 코드입니다 넥스트 렌덤 인테 저라는 걸 입력을 하게
되면 ms 점
사실 풀로 라고 해야지 정확한데
해서 어떠한 값 이하의 어떤 값을 얻는 코드입니다 예를 들어서
ms 점 랜덤 을 사용을 하게 되면
0부터 1.0 사이의 값을 얻게 되거든요
이때 영은 포함 이고 1.0 은 포함되지 않습니다
그래서 이 값에 다가 어떠한 림이 c 라는 값을 곱해 성
0부터 리밋이 라는 값 사이의 값을 없게 되구요
여기에다가 매스 점 슬로 를 적용해서
요거를 정수 범위 해서
얻는다고 생각을 해 주시면 되겠습니다 굉장히 자주 사용되는 코드 있고
이게 함수로 제공되는 경우도 많기 때문에 기억을 해주시면 좋겠구요
이 여성 랜덤 알파벳을 리턴하는 함수 입니다 하고 나오는 녀석이 있는데
알파벳이 라는 변수를 선언 을 하고 여기에다가 a 부터 제티 의 값을
모두 때려 넣었습니다
그리고 넥스트 랜덤 인테 절을 사용해서 이 안에 있는 값에서 하나를
추출하는 코드입니다 그냥
알파벳 전문 랭스 로 하는게 가장 정확하게 점
참고적으로 아까 코드에서
0부터
리밋 까지 의 값을 얻는다 그랬어요 이때 마지막 값이 포함이 안 되는데요
마지막 값이 포함이 안 되는 데에 대해서 의문을 가지실 수 있는데
일반적으로 우리가 배열에서 는 0부터 랜스 - 1까지의 접근을 할 수
있습니다 그래서 대부분의 프로그래밍 언어가 랜덤 을 했을 때는 이와 같은
동작을 하긴 구현이 되어 있다고 함께 기억을 해 주시면 좋겠습니다
이어서 랜덤 스피드 라는 녀석을 만들게 되는데요
랜덤 스피드는 매스 점 렌덤 스피드 곱하기 맥스 스피드 - ms 점 랜덤
곱하기 mx 스피드를 했는데 그냥 랜덤한 값을 내는 코드 라고 생각을 해
주시면 되겠습니다 후 쪽으로 지금 코드를 보다가 저도 탈자 인지 알아
냈는데요
맥스 스피드 나누기 2를 한 걸 빼줘야 지 정확한 코드입니다 이렇게
작성을 하게 되면 매스 점
랜덤 을 했을 때 0에서 1 사이의 값이 만들어 지정
그래서 여기에다가 맥스 스피드 를 곱해서
뭐 예를 들어서 10을 곱한 다 고칠게 요 그러면 0부터 10까지 의
값이 나오게 되죠 그래서 여기에다가 다시
- 5를 해주게 되면 10 나누기 2를 한 값을 해주게 되면
10단 우기 해주게 되면 - 5 부터
옷까지 의 랜덤한 값을 얻을 수 있을 것입니다
요 코트도 자주 사용되는 코드 이기 때문에 기업을 해주시면 좋겠구요
뭐 요건 오탈자 로 제가 올려 두도록 하겠습니다 이어서 생성 잠수 부분을
살펴보도록 하겠는데요
일단 뭐 책에 있는 코드를 그대로 치는 거기 때문에 붙여 놓고 설명하도록
할게요 엄
설탕 캔버스에 너비는 700 빛을 그리고 높이는 400 픽셀 로 설정을
할 거기 때문에
요렇게 그 좌표를 낫다라고 생각을 해 주시면 되고요 x 값과 y 값
그리고 vx 와 부위와 이를 넣었습니다
사실 실질적인 무 어떠한 코드들
뭐 유니티 그 코코스 2d 라던지 를 보시게 되면 은
뭐 요렇게 ax 까지 에서 위치 속도 가속도 까지 나오시는 걸 볼 수
있어요 그래서 위쪽에 있는 녀석을 미분 해서 내려가면 아래쪽에 값이
되고요
아래쪽에 있는 값을 적분 해서 올라가게 되면 위쪽에 있는 값이 에 나오게
됩니다
사실 우리가 프로그래밍을 하게 되면 미분과 적분 이라던지 수학적 개념을
많이 사용하게 되는데요
그게 그거 인지 모를 정도로 쉽게 사용할 수 있습니다 그래서 수학적
관념의 조금 더 뭐 비중을 안 드셔도 될 거라고 생각을 해요
우리가 수학에서는 하나하나 재산을 해서 곧바로 답을 얻어 내야 되는데
프로그래밍 염소는 곧바로 답을 얻어 낼 필요없이 그냥 자연적 현상을
구현을 해서 그 현상이 어떠한 식으로 구현이 되는 지정도 구현하면 되기
때문에 그렇게 겁을 가지지 않으셔도 될 거라고 생각을 합니다
어쨌거나 x 에는 넥스트 랜텀 인듯 인테 저로 캔버스에 너비 그리고
캔버스에 높이를 넣어서 캔버스 안에서 랜덤한 위치를 얻게 만들었구요
vx 는 랜덤 스피드 십을 해서 - 5 에서 옷까지 의 랜덤한 값을 얻게
했습니다
마찬가지로 v5 아이돌 랜덤 스피드로 랜덤한 스피드를 어깨에 있구용
이어서 디스 점 바디 라는 녀석을 만들고 이 녀석 내부에는 도큐먼트 점
크리에이트 엘리멘트 를 사용해서 h1 태그를 얻습니다
이녀석 아내는 렌덤 알파벳을 넣어서 알파벳을 만들어 주었구요
내부에서 스타일의 포지션을 앱솔루트 로 변경을 해서 절대자 표기로 사용을
하게 했습니다
마지막으로 이 녀석을 도큐먼트 점 바디에 어펜드 차 일대로 붙여서 화면
내부의 출력을 하게 만듭니다
이어서 몹 인텍스 라는 생성자 함수 대문자로 시작하니까 이녀석은 생성자
함수로 사용할 녀석이고 요 요 녀석의 다간 앤 무브 라는 메써드 입력을
해줍니다
무 부 라는 것은 디스 점 x 에다가 디스 점 vx 를 더하고 디스 점
y 에다가 dc 점 v y 를 더하는 적분 코드를 입력을 했습니당
추가적으로 디스 점 v x 에다가 디스 점
x 그리고 하
디스 짬 보이 y 에다가
디스 점 a 와 e 까지 입력을 하시게 되면 이건 가 속도까지 추가를
해서 적분을 먹이게 되는 거거든요
+ 콜
그래서 요러한 코드까지 한번 추가를 해 보도록 하겠습니다
이어서 디스 전 밭 이 점 타일 점 레프트 에 넣고 디스 점 바지 점
스타일 점 탑 에다가 넣어서 x 와 y 를 실제 화면에 반영하게 만드는
코드 라고 생각을 해 주시면 되겠습니다
이어서 책을 보시면 이 위쪽에 범위 검사 라고 해서
디스 짜 맥스 가 0보다 작거나 캔버스에 너비보다 크며 는 vx 를 -
2를 곱해서
그 양수와 음수를 변경해주는 코드가 있습니다
이거 1 왼쪽으로 이렇게 이동을 하다가 끝일 만나게 되면 반사를 하게
만드는 코드 라고 생각해주시면 되겠습니다
뭐 이제 남은 코드는 굉장히 간단한데요 요 프로세스의 내부 부분에서
무빙 텍스트 라는 녀석을 만들어주시면 되겠고
그리고 무빙 텍스트 안에다가 뉴 무비 인텍스 를 사용해서 뭐 빈 텍스를
100개를 넣은뒤에 3 인터벌 함수를 사용해서 1초에 30번 씩 화면에
있는 녀석들을 무 부 함수를 사용해서 움직여 주면 되겠습니다
사실 코드가 처음 보시면 굉장히 복잡한 코드 인데요
실제로 살펴보면 그렇게까지 복잡한 코드가 아니기 때문에 차근차근 읽어
주시면 좋을 거라고 생각을 합니다 어쨌거나 코드를 실행을 하시게 되면
지금 화면에 나오는 것처럼 글자들이 랜덤한 크기를 가지고 랜덤한 속도로
움직이는 모습을 확인할 수 있습니다
그리고 0 0 그리고 캠버 스위스 캔버스 하이 쪽에 넘어가게 되면 n
속도를 반대로 돌리기 때문에 부딪쳐서 반대로 리플렉션 되는 모습도 확인할
수 있습니다
사실 시작 부분에서 언급했듯이 문서 객체를 이정도면 굉장히 많이 활용을
하는 거에요 그래서 이 정도 예제 만 기억을 해 주시면 굉장히 다양하게
활용할 수 있다 라고 생각을 해 주시면 되겠습니다
참고적으로 a x-ray 를 만약에 사용해 본다 그러면 녀석은 바람이
라던지 중력을 나타낼 수 있어요
예를 들어서 ax 를 0점 일로 입력을 하고 실행을 하게 되면 뭔가
이렇게 오른쪽으로 바람이 불어서 넘어가는 것과 같이 만들 수도 있고요
예를 들어서 0.2 정도로 형성을 하면 바람이 불어서 다시 챙겨도
다시 오른쪽으로 넘어가는 것과 같은 모습을 확인 할 수 있고
예를 들어서 axl 안주고 a5 아이를 0점
3 정도로 주게 되면 중력에 의해서 이렇게 충 지는 모습을 확인할 수
있습니다
뭐 0.5 정도 로저 보도록 할게요 하면 요렇게 퉁퉁 챙기지 0
그래서 요런 코드도 확인할 수 있고요 너무 값이 작게 되면은 이게
리플렉션 이 계속 일어나면서 위아래로 진동을 하게 되는데 이러한 코드는
속도가 어느정도 이하일 때 아예 0으로 만들어 버리고 무브 내부를 호출
하지 않게 해서 막을 수 있습니다
어쨌거나 오늘 강의는 여기까지 되겠구요
다음 강의에서는 이벤트에 대해서 살펴보도록 하겠습니다
그럼 감 강의 에서 뵙도록 하겠습니다 감사합니다.

댓글 0개

등록된 댓글이 없습니다.

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu