윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 19강 - 3장 연습문제 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 19강 - 3장 연습문제

페이지 정보

조회: 822

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 입만 3탄

19강 되겠구요 이번 강의에서는 3장의 연습 문제를 풀어보도록 하겠습니다
일단 조건이라는 것은 굉장히 많이 사용이 되어 그래서 그 조건을 구할 때
어떠한 계산을 사용할지 가 굉장히 중요한 요소가 되는 데요
일단 책에서는 기본적으로 제공되는 인덱스 오브 라는 메서드를 가지고
조건을 만드는 방법을 연습 문제로 풀게 됩니다
인덱스 오브 라는 것은 안녕하세요 라는 글자가 있을 때 이 문자열 뒤에
점을 찍고 인덱스 5부 라는 메서드를 사용할 수 있게 되는데요
괄호를 열고 내부의 다른 문자에 를 입력을 하게 되면
예를 들어서 안녕 이라고 입력을 하게 되면
여기에서 몇 번째 위치에 안녕이 있는지 찾아 주는 메소드입니다
0부터 새끼 때문에 안녕히 지금 0번째 위치에 이점
그래서 요걸 실행하게 되면 영이 나오게 됩니다
만약에 안녕하세요 곰 인덱스 오브로
안녕히가세요 라고 적게 되면 안녕히 가세요 라는 문자를 자체가 예보다
길고 2대 부의 전혀 없기 때문에 없다라고 편 정의 되는데요 없다라는
것은 - 일이라는 값으로 나오게 됩니다
따라서 a 문자의 리 있고
점 인덱스 오브로 c 문자열이 있다고 할때 a 문자열 내부의 b 문자열이
존재하면
값 센 0보다
큰 값이 나오게 됩니다 뭐 정확하게 말하면 이상이 되겠죠
그래서 요거를 활용을 해서 연습 문제를 풀어보도록 하겠습니다
자 그러면 연습문제 1번 부터 살펴보도록 하겠는데요 프롬프트 함수로
문자열을 능력 빠다 안녕 이라는 글자가 들어 있으면 안녕 하지요
잘자 라는 글자가 들어 있으면 안녕히주무세요 를 출력하는 코드를
작성하세요 라고 되어 있습니다
일단 입력을 받아야 겠죠 var 임프 센
프롬프트 로 받아주시면 되겠구요
입력해 주세요 라고 간단하게 넣도록 하겠습니다
이어서 조건문을 걸어서 인 푸 새
인덱스 오브로 안녕이 들어있으면
얼얼 주로 안녕하세요 라고 출력하게 만들게 있고요
벨스 를 사용해서 잘 자 또는 잘 자가 들어 있으면 안녕히주무세요 를
출력하지 하겠습니다
잎을 다시 걸고
인포 3
인덱스 오브 가 0보다 클 애니죠
잘자 강
0보다 크거나 논리 연산자를 사용해서 5 를 만들어 주시고
잉크 짬 인덱스 오브
잘 뛰고 자 가 0보다 크면
얼얼 뚜루 안녕히주무세요 를 출력하게 만들도록 하겠습니다
여기에서 중요한 건 일단 조건을 이런식으로 안 된다 라는 것이 가장
중요하게 고용 두번째로는 논리 연산자를 사용해서 요렇게 두가지 조건을
한번에 표현할 수 있다 도 짚고 넘어가 주시면 좋겠습니다
저장을 하고 실행해 보도록 할게요 실행을 하면 명령프롬프트 에서 입력을
밖에 나오는데요
여기에 예를 들어 안녕 이라고 입력을 해서 엔터 를 입력하게 되면
안녕하세요 를 출력을 하게 되구요
잘 자를 입력을 하게 되면 안녕히주무세요 를 출력하게 됩니다
마찬가지로 잘 띄고 자를 입력을 해도
안녕히주무세요 를 출력하게 되겠죠
어쨌거나 그럼 이제 두 번째 문제를 풀어 보도록 하겠는데요
안녕 이라는 글자가 들어 있지 않으면 인사를 안 하다니 라고 출력하는
코드를 작성하세요 라고 되어 있습니다
일단 가장 간단하게 는 요 위에서
6.25 를 반대로 바꾸고
인사를 안 하다니 라고 출력하면 됩니다
마찬가지로 기존의 코드에서 그냥 일수를 입력을 하고
얼얼 트루 인사를 안 하다니 라고 출력하는 방법도 있을 것입니다
어쨌건 인덱스 오무라 는 것 하나를 배우게 되면 문자의 내부의 뭐가
들어있는지 를 판단을 하고 이러한 코드를 작성할 수 있게 됩니다
따라서 다양하게 활용이 보실 것을 추천드립니다
자 그럼 3번을 보겠는데 요 숫자를 입력받아 로 나눌 수 있는 숫자
라면 로 나눌수 숲 즉 산사로 나눌 수 있는 숫자입니다 를 출력하는
코드를 작성하라 고 되어 있습니다
일단 입력을 받는 부분이 있고 요 위쪽에
넘버를 c 와서
숫자로 변환해 주도록 하겠습니다 어쨌건 이 상태에서 로 나눌 수 있는
숫자 라는 조건 인데요
몸으로 나눌 수 있는 숫자 라면 이라는 조건은 프로그래밍에서 굉장히 많이
사용되는 조건 중에 하나에요
그래서 잘 예상을 못하겠다면 외워 주시는 것도 하나의 방법입니다
인풋 나머지 연산자가
0 이라면 이라는 간단한 조건 인데요 루나는 나머지가 0이 라는
조건입니다 안 오른 않은 나머지가 0이 라면 오르 바꾸면 되겠고 6으로
나눈 나머지가 0이 라면 6 으로 바꾸면 됩니다
어쨌거나 나눠서 나머지가 0이 라면 나눌 수 있는 숫자 라는 것을 의미
를 하게 됩니다
우리가 초등학교 때 배우게 되면 로 나눌 수 있는 숫자는
뒤에 두 자리가 로 나눌 수 있는 숫자 라면 전체가 나눌 수 있다라고
배우거나
뭐 요런식으로 배우게 되는데요 컴퓨터 내부에서는 우리가 기존에 생각하던
조건 정의 방식과 약간 다른 부분이 있을 수도 있다는 것을 기억을 해
주시면 좋겠습니다
그래서 이 경우에 로 나눌 수 있는
숫자 입니다 라고 출력을 해 주면 되겠습니다
뭐 l 3의 경우에는 로 나눌수 없는 숫자입니다 라고 출력을 하면
되겠구요
추가적으로 아무것도 입력하지 않아서 빈 문자열을 정리 넣을 경우 이 값이
0이 된다는 사실을 잡음에 배웠어요 그래서 요 예외도 따로 처리를
해주셔야 됩니다
사실 아무것도 안 나오면 0이 된다는 걸 기억하는 게 그렇게 쉽지는
않거든요 그래서 버그가 가끔 될 수 있는 부분이기 때문에
뭐 가끔 가끔 기억을 해주시는게 좋겠습니다
어쨌거나 저번과 마찬가지의 방법으로
로우 임프 c
빈 문자 일이라면
로우 임프 슬 뭐 아무 글자나 줘서 난 으로 만들어 벌이도록 하겠습니다
저장을 하고 실행을 해 보게 되면 뭐 팔을 입력을 하게 되면 자로 나눌
수 있는 숫자가 뜨고 아무것도 입력을 안해도 로 나눌 수 없는 숫자
라고 뜨고
뭐 12 라고 입력을 하면 로 나눌 수 없는 숫자라고 뜨게 되기
때문에 3번의 조건도 완전히 부합하게 됩니다
어쨌거나 이제 사장 부터 우리가 반복문을 배우게 되는데 반복문 은 조건을
여러 번 적용하기 위해서 사용하는 거라고 보시면 되요 그래서 조건 문까지
를 정말 확실하게 할 수 있어야지 프로그램을 완벽하게 만들 수 있게
됩니다
어쨌거나 지난번에 잠시 내 위치에서 상대방이 위치에 거리를 집안으로
1km 안에 있으면 이런 경우를 만들어 본다 고 했는데요
그러한 경우를 만들 때도 중요한 것은 사실 그 조건은 일단 생각해내는
것이 가장 먼저 겠고 용 두 번째는 그 조건의 어떤 계산이 필요 한가요
그래서 그 조건의 어떤 계산이 필요한 가는 검색을 사용해 주시면 됩니다
사실 이런 검색을 할 때 m
그냥 검색을 안하고 거리를 계산하려면 내가 수학적 지식이 있어야 된다고
생각하시는 분들이 굉장히 많은데 m
수학적 지식보다 도 일단 그런 조건을 빠르게 검색해 낼 수 있는 능력이
조금 더 필요하다고 생각을 합니다
이제는 너무 개발할 때 조건이 많이 걸리기 때문에
제인이 그걸 모두 외우기 에는 너무 힘든 시대 거든요 그래서 검색을
해보도록 할게요
구글에서 위도 경도 거리 계산 이라고 치시면 되겠고
조금 더 명확하게 할 때는 앞에다가 프로그래밍 언어의 이름을 붙여 주시면
됩니다
그래서 자바스크립트 위도 경도 거리 재산 이라고 입력을 하고 엔터를 쳐서
검색을 해보도록 하겠습니다
사실 미리 한번 찾아 봤었는데요 여러개가 나오는데 다 유혜영 그래서 가장
첫번째 나오는게 쉬우니까 가장 첫번째 나오는걸 클릭해서 살펴보도록
하겠습니다
물론 거리 예산을 할 때는 수학을 사용하기 때문에 이 책의 8장에서
배우는 매스 라는 객체를 약간 알아야 되는데요 사실 매스 기체를 제대로
활용할 수 있는 사람은 되게 드물어요
그래도 인터넷을 보면 사용방법이 대충 나오게 되거든요
코드는 아래와 같다
lat 1l on 도 1 lh 토
에로 n2 는 2 위치에 위도와 경도를 의미한다. 라고 써있습니다 그래서
그냥 코드가 나오면 그 코드를 복사 를 해주시면 됩니다
그리고 사용 예도 나오게 되는데요 사용 예 를 보시게 되면 은 우리가
조금 알아야지 볼 수는 있겠지만 대충 위치를 넣고 칼 틀 에이트 디스턴스
라는 것을 계산을 하게 되면 그 위치가 나오게 됩니다
그래 섬 한번 사용만 해볼게요 나중에 자세한건 다시 설명을 해보도록
할게요 일단 요런거 를 사용을 하면 되고
칼 클레이 디스턴스 로 위도 원투 위도 경도 완
위도 경도 툴을 넣어주시면 됩니다 그럼 일단 구글 맵에서 간단하게
저희집 근처에 위치와 강남역을 한번 잡아 보도록 하겠는데요
구글 지도의 들어가서
저는 대충 마구 역 쪽에 살고 있거든요
지도의 아무것도 안나오는데 m
엄 현재 구글 지도가 업데이트가 안되서 그렇구요
마 공략에 마우스 오른쪽을 클릭 을 하고 이곳이 궁금한 과 예 를 눌러
보시게 되면 위도 경도가 표시가 됩니다
요거를 복사를 해서 위도 경도로 사용하도록 하겠구요
강남역 같은 경우에도 강남역 쪽으로 한번 이동을 해 보도록 할게요
강남역 2
자 히키코모리 라서
어디있는지 잘 버렸는데 여기 있는데
강남역에서 마우스 오른쪽 클릭을 하고 있고 시군구 방과 를 눌러서
강남역에 위도와 경도 등을 찾아 주시면 되겠습니다
그래서 이를 또 데이터화 시킴 되겠죠 데이터 막 5개
레 티 치 드 마 공략의 롱 긷지 득
강남의 th 등
막 5개 롱 기 치더라 고 잡아 주시게 되면 이 데이터가 되는 거죠
데이터를 모으는 방법과 그 수집하는 방법도 사실 중요한데
수집을 했다고 가정을 하고
입력해 보도록 하겠습니다 칼 플레이트 디스턴스 라는 함수에 마고 글리치
마곡 롱 기치 등 8
강남 이정
강남의 위도와 경도를 입력해 주도록 하겠습니다
특허는 이렇게 입력을 하면 디스턴스 가구 해주겠죠
그래서 2d 스턴트를 집 안으로 한번 7 역이나 해보도록 하겠습니다
그래서 실행을 해 보게 되면
19.1 0 파로 7평 병이 나오게 됩니다
그래서 이런 디스턴스 까지 구할 수 있게 되면 이제 조건을 볼 수 있겠죠
디스턴스 로 쉽게 km 보다 멀게 되어 있다면
쉽 km 보다 뭔지 여깁니다 라고 출력을 하면 되겠구요
10 km 보다 작으면 칩 km 보다 가까운 지역 입니다 라고 출력을
하면 될 것입니다
어쨌거나 우리가 이 위의 코드를 분석을 하지 못하고 명확하게 무엇을 하는
코디 인지 몰라두
그걸 사용해서 프로그램을 만들 때는 큰 문제가 없어요 물론 완전 처음
보신다면 이걸 대체 어떻게 사용하라는 거지 라고 고민을 할 수 있는데요
그러한 것도 여러번 보다보면 사실 그 내부 구조를 몰라도 사용하라는 된
전혀 문제가 없어 지게 됩니다
따라서 일단 데이터를 많이 생각을 해보셨으면 그 데이터를 기반으로 어떤
조건을 만들 수 있는지 많이 생각을 해보시기 바라고요
그 조건들이 생각이 나면 이 조건을 어떻게 계산할 수 있는지를 틈틈이
찾아보고 정리하는 걸 추천드립니다
조건을 생각해 볼 수 있으면 굉장히 다양한 것을 생각을 할 수 있어요
예를 들어서 내 위치와 우리 주변 치킨집의 위치를 모두 알고 있다면
이라는 전제를 우리가 생각을 하게 되면 그걸 기반으로 1km 내 이브에
있는 치킨집을 검색을 하는 그런 코드도 작성을 할 수 있고 치킨 집이
아니라 공연 문화 예술
이벤트 하면 그러한 이벤트에서 가까운 곳을 추천해 줄 수도 있고 가까운
날짜에 가까운 지역을 추천해 주는 조금 더 세부적인 방법도 생각해 보실
수 있을 겁니다
그래서 그런 것을 응용을 해서 다양하게 생각해 보시는게 나중에 프로그램을
만드는 지름길이라고 생각을 합니다
사실 이 책을 끝내도 그래서 나 이걸로 뭘 할 수 있지 라고 생각하는
분들이 굉장히 많아요 대부분의 책들이 그래요 그러니까 틈틈이 생각을
해보시고 틈틈이 어떻게 활용할 수 있을 지를 고민해 보시는 게 뭐
개인적으로 살펴볼 때 가장 중요한 요소 라고 생각을 합니다
어쨌거나 오늘 강의는 여기까지 되겠구요 다음 강의 부터는 반복문 에
대해서 살펴보도록 하겠습니다 감사합니다.