윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 54강 - 10장 조금 더 나아가기(1)
페이지 정보
- 조회
- 603
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 임원 3탄 54강
되겠구요이번 강의에서는 10장 10절에 있는 조금 더 나아가지 부분 부터
살펴보도록 하겠습니다
10단 10탄 10장 1절을 보면 문서 객체를 사용한 시계가 나오는데요
광 갱 장이 간단한 이제 이 때문에 빠르게 함께 진행해 보도록 하겠습니다
일단 h1 태그를 하나만 들어주시면 되겠구요 이녀석이 게 id 속성을
클락 이라고 부여를 합니다 여성 스크립트 태그 안에서 뭐 책에서는 윈도우
점 온로드 않았었지만 뒤에다가 써서 간단하게 쓰도록 하겠습니다
이 안에다가 var 클럽이 콜 투 킬 먼트 점
갠 엘레멘트 바이디를 사용해 저 클락 이란 녀석을 가져와 주시면
되겠구요
이어서 책에서는 3 인터벌 을 사용해서
처음에 다가와 성 션을 넣어주시면 되겠고
두번째 에다가 1000 이라는 값을 넣어서 1초 를 나타냈습니다 그리고
1초마다 진행해 주는 것은 클럭 점 인어 html 에다가
뉴 데이트를 먹인 다음에 이 녀석의
투 스트링 메서드를 적용을 해서 시간을
매 1초마다 인어 html 에 넣어주고 있습니다
저장을 하고 실행해 보도록 하겠습니다 5 코드를 실행을 하면 시간이
출력되는 모습을 볼 수 있는데요
조금 자세히 보시게 되면 f5 를 눌렀을 때 1초 동안 화면에 아무것도
안 뜨다가 1초 후 부터 무언가가 뜨는 모습을 볼 수 있습니다
이는 셀 인터 머리 라는 함수가 곧바로 실행되는 게 아니라 1초 후 부터
실행 되기 때문인데요
이 때문에 u 내부에 있는 코드를 요렇게 안에다가 한번 적어 두는 것이
일반적입니다
이렇게 되면 코드를 저장을 하고 실행을 했을 때 시작부터 시간이 나오는
모습을 확인할 수 있습니다
물론 이 내부의 코드가 굉장히 길어 지는 경우가 있는데요 그럴 때는
요녀석을 함수로 빼서 만들어 주시면 그 내부적으로 곧바로 실행되게 할 수
있습니다
추가적으로 아마 생각을 해 보시는 분들 중에는 1초가 딱 떨어지지 않게
되면 시계가 정확하게 구현이 되지 않을 수도 있다 라고 생각하실 수
있는데요
그럴 때는 1 숫자를 모 100 정도로 줄여 가지고 실행을 해주시면 사실
굉장히 쓸 게 없을 수 있어요 같은 문자열을 계속 구해 가지고 넣기
때문에 뭐 내부적으로 뭐가 안 나올 수 있는데 계속 100 밀리 세컨드
마다 시간을 계속 구하기 때문에 거의 정확한 값을 구할 수 있습니다
참고적으로 요 값을 적게 넣는 것을 굉장히 싫어 하시는 분들이 많은데요
사실 저도 싫어 하긴 한데 대부분 내부적으로 10 정도 까지는 아무
문제없이 사용하실 수 있어요 그래서 이 숫자가 너무 작다고 컴퓨터에
무리가 가거나 하지 않기 때문에 그 무리를 걱정하지는 않으셔도 됩니다
간단한 예제 였으니까 넘어 오도록 하고요 이제 10점 10점 2절에 문서
객체를 사용한 움직임으로 태양과 지구와 달의 움직임을 구해보도록
하겠습니다
뭐 이름은 굉장히 폼 인 하지만 간단한 예제 이므로 뭐 바로 진행할 게
일단 h1 태그를 사용해서
아이디를 썬 으로 하나 만들도록 하겠습니다
이녀석은 골뱅이 를 넣도록 하겠구요 뭐 지금은 글자를 움직이게 하지만
나중에는 실제 이미지 등을 움직이지 하거나 아니면 svg 태그 등으로
움직이게 하면 굉장히 다양한 움직임이 가능합니다
어쨌거나 지구는
알파벳 o 로 그리고 다른 별로 구현하도록 하겠습니다
이어서 위에 있는 녀석들을 하나하나 가져오도록 합니다
썬은 썬 으로 가져오시면 되겠고
버스는 어스 로 가져오시면 되겠고 문은 문으로 가져와 주시면 될 겁니다
뭐 대부분의 코드 뭐 html 뿐만니라 뭐 안드로이드 개발을
하시거나 할 때도
요 코드가 대부분 첫주에 했어요 그래서 이러한 형태가 있다는 것을 기억을
해 주시면 다른 개발을 할 때도 도움이 될 것이라고 생각을 합니다
어쨌거나 그러면 굉장히 초기 값을 설정하도록 하겠는데요
선의 스타일을 주도록 하겠고 꽂이 저는
앱솔루트 로 주도록 하겠습니다 마찬가지로 다른 녀석들도 모두 좌표계를
절대자 표기로 설정을 해서 값을 절대자 표를 얻도록 하겠습니다
여성 아까처럼 3 인터벌 함수를 사용해서 성
1초에 1 첫 나누기 3 10월에서 1초에 30번 정도 화면을 리프레쉬
하도록 하겠습니다
참고적으로 이렇게 1초에 몇 번씩 화면에 있는걸 움직인 야를 fps 라고
표현을 하는데요
프라임 싶어 3 컨트 라고 해가지고 뭐 30에 부피 했으며 는 화면에
있는 요소를 1초에 30번 씩 움직인다 60f 피했으면 화면에 있는
조소를 60 번씩 움직인다고 기억을 해 주시면 되겠습니다
이 다음에 우리가 사용할 녀석은 바로 그림 싶다 시 10의 있는 사인과
코사인 이라는 생각하는 대용 사실 수학을 조금 두려워 하시는 분들은
요런걸 사용했을때 굉장히 당황하시는 데 뭐 게임 개발이나 이런데서
사용하는 쌓인 코사인 이라던지 삼각함수 는 대부분 고정적인 형태로
사용하게 됩니다
따라서 그런 고정적인 형태를 아이의 외로워 버리시면 은 이후에 사용할 때
굉장히 편리한데요
뭐 그림을 자세히 보시면 사인 이라는 녀석은 각도를 기반으로 y 좌표를
구할 때 코사인 이라는 녀석은 각도를 기반으로 x 좌표를 구할 때
사용한다. 정도만 아시면 은 삼각함수를 사용한 2d 개발이 대부분
가능해지게 됩니다 그러면 코드를 조금 더 입력해 보도록 하겠는데요
일단 태양의 좌표를 설정하도록 하겠습니다
var 썰 x 는 250 이라고 주셨구요
var 싼 와인은 250 이라고 쓰도록 하겠습니다
이어 성 썬의 스타일을 설정할 때 썬 점 스타 2 점
레프트 를 x 로 주시면 되겠구요 저번에 언급했던 것처럼 쥐에 픽셀이
라는 값을 꼭 붙여 주셔야 합니다
이어서 썬 점 스타일 점 탑을 쏜 y 로 조성 픽셀로 사용하도록
하겠습니다
참고적으로 요건 좌표계에 관련된 설명 인데요 우리가 중고 등은 그때
수업시간을 보게 되면은
방금 요러한 좌표를 사용을 했을 거예요 왼쪽 아래가 0이고 오른쪽과 위로
갈수록 x 와 y 가 커지는 값을 여 근데 우리가 컴퓨터에서는 화면 자
표기 라는걸 쓰게 되거든요
화면 잡혀 게는 왼쪽 위가 0 콤마 영이 되고요
오른쪽으로 갈수록 x 가 플러스가 되고 아래쪽으로 갈수록 y 가 플러스
된다 그래서 좌표계 는 화면 자 표기와 데카르트 좌표 기가 있고 그러한
것 차이가 있다는 것을 기억 을 해주시면 이후에 공부를 하실 때 도움이
될 거라고 생각합니다
그러면 이어서 코드 쉽다 시 32 에 있는 내용을 입력해 보도록 할텐데요
일단 어스 레프트 와
뭐 세스 랍 x 라고 입력을 하도록 할게요 osx 를 변수로 만들고
var
oxy 크릭 5 var 문 x
그리고 var 문화 2 를 입력하도록 하겠습니다
참고적으로 변수 부터 만들어 두게 되면 자동완성 기능으로 곧바로 칠 수
있기 때문에
못할 자 를 줄이는데 크게 기여를 할 수 있습니다
어쨌거나 요렇게 os x 와 ios 와 이 문 x 와 문화 이를 설정한
이후에 우리가 할 꺼낸
어스 에 스타일의 레스트 를
어서 x 플러스 픽셀로 변경하도록 할 거고요
마찬가지로
탑은 버스와 1호 그리고
문의 타일 에스트 는
문 x 그리고 문의 스타일 탑은
문화 2 로 설정하도록 하겠습니다 어쨌거나 일단 현재 코드를 살펴 보게
되면 수완과 어 수와 문이라는 문서 객체를 얻고 그 좌표를 설정하는
예입니다 따라서 이제 어서 섹스 easy 그렇고 문 x 문화 이를 설정만
하기만 하면 제대로 실행이 될 텐데요
현재 코드에 오류가 없는지 한번 저장을 하고 실행한 다음에 콘솔을
확인해보도록 하겠습니다 저장을 하고 실행을 해 보시게 되면 지금 그림처럼
나오게 되고요
여기에서 fcb 를 눌러서 개발자 도구를 눌러 보게 되면 뭐 오류가
엄청나게 증가하고 있는데 현재 오려는 문이 지은아 t 파인드 엣 어쩌고
저쩌고 근데
moon n 이라고 제가 오탈자를 냈네요 그래서 요러한 오탈자를 중간중간
계속해서 확인을 해주시면 좋겠습니다
사실 개발을 할 때는 굉장히 다양한 무언가를 접하 시계 될겁니다 못 예를
들어서 전부 다 제대로 실행되는지 나중에 유니테스트 라던지 통합 테스트
라던지 등의 테스트도 배우 시계 될 거고요
뭐 여러가지 매트릭스 계측 이라던지 등도 배워서 내 코드가 제대로
되었는지 확인할 수 있을 텐데
일단 가장 중요한 것은 실행해 보면서 오류가 있는지 없는지 지속적으로
확인을 해보는 겁니다
뭐 나중에 이 습관을 안드시면 요걸 무시하게 되는 경향이 있는데요
중간중간 실행을 계속해 보시면서 내가 지금까지 입력한 코드에 문제가
없는지 또 조금 입력해 보고 내가 지금까지 입력한 코드에 문제가 없는지
계속해서 확인해 보시면 좋겠습니다
어쨌거나 이제 요 녀석들을 설정을 해주면 됩니다
일단 5 코드는 책의 있으니까 같이 요녀석을 쳐보도록 할텐데요 삼각함수를
사용하도록 하겠습니다
일단
어스 앵그리 라는 값을 0으로 초기화를 하도록 하겠고요
var 문 앵그리 라는 값을 0으로 초기화를 하도록 하겠습니다
그리고 매초 마당
어셈블 은 0.1 씩 더 하도록 하겠구요 문 앵글은
0.3 씩 더 하도록 하겠습니다 다 앵글 문 앵그리 조금 더 빠른 이유는
우리가 지구가 태양을 자전하는 속도보다 달이 지구를 자 즉 그 공전하는
속도가 훨씬 더 빠르기 때문입니다
뭐 방금 자전 이라고 잘못 말을 했는데요 공전 으로 바꿔서 생각을 해
주시면 되겠고
이어서 이를 사용해 삼각함수를 구현을 합니다 일단 썬 x 를 기반으로
그 태양을 중심으로 지구가 돌아야 하니까 그리고
어스 와인은 써놔 이를 기반으로 9 해주시면 되게 꿈
문 x 같은 경우에는
어서 섹스 를 기반으로 그리고 문화 이는
어스 와 이를 집안으로 9 해주시면 되겠습니다
이어서 액스 잡혀 는 아까 언급했던 것처럼 ms 점 코사인 을 써주시면
되겠구요
여기에다가 어 스 & 를 넣어주시면 됩니다
일단 복사를 쭉 하도록 하고
y 좌표를 구할 때는 사인을 써주시면 되구요
마찬가지로 문 앵글을 뿅뿅 넣도록 하겠습니다
이어서 사인과 코사인 은 - 1부터 1까지 의 값 밖에 내지 못해요
그래서 여기에다가 우리가 원하는 반지름을 넣어줘야 g
우리가 원하는 값을 얻을 수 있습니다 일단 지구 같은 경우에는 요 값을
150으로 주도록 하겠구요 달 같은 경우에는 모 52 라고 주도록
하겠습니다
52 너무 클 수도 있으니까 31 주도록 할게요 그래서 요러한 코드를
입력을 하게 되면 코드를 실행 했을때
요러한 형태로 가운데 태양이 있고 주변에 지구와 달이 공존하는 모습을
확인할 수 있습니다
현재 코드에 사용된 수학적 개념이라면 각속도 라는 개념을 활용했고 용모
각속도 와 각 을 기반으로 거리를 구하는 방법을 활용했는데 사실 이러한
녀석들을 어떻게 공부해야 하는지 의문이 드실 분이 있을 거에요 왜냐하면
여기에서 실질적으로 사용된 자바스크립트 코드는 문서 객체 가져오기 와
4일 조작 밖에 없었으니까요 그래서 사실 추천드리는 책이 있다면 제가
추천하는 책이 딱 두 번 밖에 없는데 살면서 왜 념
원래 세 권을 추천해 했는데 딱 한 권이 지금 단종이 되어서 한참 전에
그래서 3권을 추천을 하게 되는데 이러한 책이 있어요
이름은 액션스크립트 3.0 애니메이션이라고 되어 있는데요
위키북스 에서 번역이 된 책입니다 어쨌거나 이 책을 보시게 되면 은 자바
스크립트는 아니고 액션스크립트 라는 책인데 m
내부에 있는 내용을 충분히 활용하실 수 있을 거라고 생각을 합니다
추가적으로 인터넷에서 js 2 이점이란 js 점 2 2시 라는 사이트를
보시게 되면 이 안은 굉장히 특이한 코드들이 많아요 예를 들어서 현재의
1등 하고 있는 코드를 보게 되면 자바스크립트 코드 83 주 를 사용했고
용 모 굉장히 엔터 더 많이 쳐져 있기 때문에 실질적으로 많지는 않고
html 로는 요러한 코드가 사용되었다고 보게 되고 한번 실행을 해 보게
되면 요란 코드의 요 고양이들이
지금 마우스를 따라 가지고 원형으로 움직이고 있고 화면에 모서리에
부딪치면 달리는 모션으로 바뀌는 요런 형태의 예제를 볼 수 있는데요
요런건 대체 어떻게 구현 하는지 등을 뭐 여기 코드로 살펴볼 수 있기
때문에 물론 주석이 일본어로 달려 있거나 하는 경우도 있지만 현재 예제는
영어로 달려있구요
뭐 굉장히 요러한 다양한 코드를 확인하실 수 있으니까
요러한 사이트 들도 중간중간 확인하면서 공부를 해 보시면 좋은 경험이 될
것이라고 생각을 합니다
어쨌건 오늘 가니 는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니다.
댓글 0개
등록된 댓글이 없습니다.