윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 31강 - 기본 내장 함수 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 31강 - 기본 내장 함수

페이지 정보

조회: 690

본문

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

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

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

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

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 몬 31강 되겠구요

이번 강의에서는 14페이지에 있는 5점 11절
자바스크립트 내장 함수 에 대해서 살펴보도록 하겠습니다
일단 내장함수 라는 용어가 약간 특이하게 들릴 수 있는데요
자바스크립트의 기본적으로 안에 탑재되어 있는 내장되어 있는 함수 라는
뜻입니다
어쨌거나 우리가 지금까지 사용해 보았던
얼얼 탐 수 라던지 하는 녀석들이 우리가 만든 적도 없는데 사용할 수
있게 되어 있죠 그래서 이러한 녀석들을 내장 함수 라고 부르게 됩니다
일단 책의 표 5 다시 이에 있는 타이머 암 쏘 에 대해서 살펴보도록
하겠는데요
타임 엄 주에는 크게 4종류가 있습니다 일단 세타 2 40 탐 수가 있고
이어서 3 인터벌 함수가 있고 클리어 타임 아웃 탐 수가 있고 클리어
인터벌 함수가 있습니다
일단 요 두녀석은 타이머를 설정 하는 함수 되겠구요
2 아래 두 녀석은 타이머를 제거하는 함수 되겠습니다
그리고 이름처럼 클리어 타임 아웃 같은 경우에는 3 타임 아웃으로 설정한
타이머를 제거 하는 거구요
클리어 인터벌 같은 경우에는 3 인터벌 로 설정한 타이머를 제거하는 것
되겠습니다
자 그러면 한번 간단하게 살펴보도록 할게요 엄
일단 3 타임아웃 함수 부터 살펴보도록 하겠습니다
세이타임 와 탐스 같은 경우에는 첫 번째 매개변수로 함수를 넣게 되어
있구요
두 번째 매개 변수 도는 시간을 이렇게 되어 있습니다
이 시간은 밀리 세컨드 단위 인데요
1 밀리 세컨드 는 1000분의 1초 입니다 그래서 천초 가 아 첫
밀리초 가 1초가 되겠습니다
그래서 이와 같이 실행을 하게 되면
u 함수를 1초 후에 실행을 하게 됩니다
3 타임아웃 함수 같은 경우에는 특정 시간 후에
함수를 한번만 실행 하는 녀석이라고 기억을 해 주시면 되겠구요
예를 들어서
얼얼 잠수 로 1초가 지났습니다 라고 출력을 하고 이 앞에서
얼얼 뚜루
시작되었습니다 고출력을 해고
한번 실행해 보도록 하겠습니다 저장을 하고
실행을 하게 되면 시작되었습니다 라는 녀석이 뜨고
1초 이따가 1초가 지났습니다 라는 경고창이 뜨는 모습을 확인할 수
있습니다
자 그래서 3 타임아웃 함수는 한번만 5천 라는 녀석인데요 클리어 타임
아웃도 사용하는 방법을 살펴보도록 하겠습니다
절단 쎄다 타임아웃 함수를 호출할때 보면은 어떤 숫자를 리턴하게 되어
있습니다
한번 이 숫자를 가져와서 출력해 보도록 할게요
저장을 하고 요 id 출력하는 코드만 실행을 하게 되면
파리 라는 값을 출력을 하는데요
이파리 이 타이머의 고유 id 가 됩니다
물론 이 타이머 id 같은 경우에는 실행할때 마다 지금 보이시는 것처럼
값이 조금씩 바뀌기 때문에 우리가 직접적으로 지정하는 것은 힘들다고 할
수 있습니다
다시 코드로 돌아와서 용
이렇게 만들어진 못하 이 마우스의 id 를 클리어 타임 아웃의 매개변수의
넣게 되면 타이머가 정지됩니다 따라 섬 지금 화면처럼 코드를 작성을 하게
되면 시작되었습니다 고
1초가 지났습니다 를 1초에 출력해 주세요 라고 설정을 해놓고 는 곧바로
요 타이머를 제거를 하게 됩니다
어쨌거나 간단한 형태라고 할 수 있겠는데요 이번에는 3 인터벌 함수에
대해서 살펴보도록 하겠습니다
셀 인터벌 암소 또 기본적인 형태는 같은데요
첫 번째 매개 변수에 함수를 넣게 되어 있고 두 번째 매개 변수에 밀리
초로 시간 단위를 입력하게 되어있습니다
그래서 지금 화면과 같이 입력을 하게 되면 앞쪽에 있는 함수 에 설정된
걸 1초마다 실행을 하게 됩니다
아까 3 타임아웃 함수와 다르게 셀 인터벌 함수는
계속해서 반복을 하게 됩니다 그래서 한번 실행을 해보도록 하겠습니다
얼얼 트루
1 조 마다
실행 합니다 라는 글자를 출력해 보게 저장을 하고 수행을 해 보도록
하겠습니다
실행을 하면 시작되었습니다 라는 경고창이 뜨게 되구요
확인을 누르면 이제 이때부터 1초마다 경고창이 출력되는 모습을 볼 수
있게 됩니다
방금 세계가 연달아서 나왔는데요 시작되었습니다 를 하고 제가 조금
기다렸다가 확인을 눌러서 그때 동안 모였던 경고창 들이 뜨는 것입니다
방금도 그래 점 어쨌거나 이러한 식으로 되구요
끄고 싶을 때는 재빨리 그냥 꺼주시면 됩니다
어쨌거나 다시 코드를 살펴보도록 하겠는데요 클리어 인터벌 함수도 아까
클리어 타임 아웃 함수와 같은 방법으로 쓰게 되어 있습니다
3 인터벌 함수도 매개변수로 id 가 나오게 됐고 이 id 를 클리어
인터벌 함수의 매개변수에 넣게 되면 타이머를 중지 할 수 있습니다
어쨌거나 예를 들어서 3 타임아웃 함수를 한번 더 사용해서
3초 후에 저 타 타이머를 제거해 달라고 부탁을 하게 되면
경고창이 뭐 몇 번 호출될 지 한번 예상을 해 보시기 바랍니다
저장을 하고 실행을 하면
1초마다 실행합니다 라는게 경고창이 두 번 뜨고 사라지는 모습을 확인할
수 있습니다 옷집 이라고 좋아한다.면 2002 라고 적혀 있거나 3000
이라고 그냥 적혀있으면 이게 뭘 의미하는지 처음에는 잘 알기가 힘들거든요
그래서 이럴 때는 세컨드 라는 이름의 변수를 만들고 뭐 예를 들어서
여기다가 천을 넣어 주신 다음에
1 곱하기 세컨드 를 쓰신 다거나 3 곱하기 세컨드 를 쓰셔서 1초 3초
라고 읽으시면 좋겠습니다
어쨌거나 자바스크립트를 공부를 하시다보면 이처럼 뭔가 대문자로 잔뜩 적혀
있는 녀석이 있거나 내용
이녀석은 그냥 자바스크립트 개발자 끼임 대문자로 만든 녀석은 너가 이렇게
따로 값을 변경하는 등의
이런 변경 활동을 하지 말라 달라고 부탁을 해 주는 겁니다
뭐 현재 자바스크립트의 경우는 이전에 배웠던 것처럼 콘서트 를 활용할
수도 있겠지만 콘서트 를 활용하는 순간 모든 버전의 인터넷 익스플로러에서
동작하지 않기 때문에 아직도 요러한 방법을 사용하고 사실 컨트롤을
사용하는 경우에도 그 이게 컨트롤 선언 된 녀석이라는 것을 확실하게 해
주기 위해서
이처럼 대문자로 변수를 만드는 경우가 있으니까
요러한 곳도 한번 기억을 해 주시면 좋겠습니다 개발을 하시다가 변수 이름
규칙이 내가 지금까지 알던 것과 뭔가 다르다 그러면 거기에는 분명한
이유가 있는 거거든요
예를 들어서 앞에 밑줄이 걸리고 세컨즈 처럼 사용하는 경우도 있고
그러니까 이러한 경우에는 왜 그럴까 한번 조금씩 생각을 해보시면
좋겠습니다
그럼 이어서 5점 11.2 절의 인코딩 가지고 징 함수에 대해서
살펴보도록 하겠는데요
인코딩과 디코딩 이라는 용어가 중요하기 때문에 인코딩과 디코딩을
설명하고 넘어가도록 하겠습니다 뭐 인코딩은 영어로
인코딩이 되겠고 용 디코딩 은
디코딩 되겠습니다 일단 인코딩과 디코딩 이 뭔지 한번 함수를 실행해서
결과를 보고 살펴보도록 하겠습니다
일단
가장 기본적인 인코딩 함수는 이스케이프 함수 라고 할수 있겠구요
이녀석의 매개변수로 초콜릿 같은 한국어나 아니면 뭐 일본어나 중국어를
넣어 보시면 결과를 확인할 수 있습니다
저장을 하고 수행에 보면 지금 화면과 같이 뜨게 되는데요
퍼센트 ucd 0 8% uc foc 퍼센트 유 비 9
bs 라고 뜨게 됩니다 뭐 닦으면 초콜릿이 라고 써있는 것을 당연히 할
수 없고요
인코딩 이라는 것은 우리가 웹 이라는 것은 아시아 쪽에서 개발된 게
아니죠
미국에서 개발이 됐기 때문에 영어 만을 사용해서 통신을 할 수 있게
됩니다
따라서 이러한 환경에서 한국어나 중국어나 일본어 같은 뭐 그런 형태의
언어를 전달하려면
이걸 영어로 변환을 해서 전달하는 과정이 필요해요
그래서 한국어나 중국어나 영어 같은 것을 지금 화면에 보이는 것과 같은
형태로 변환을 하는 것을 우리가 인코딩 이라고 부르게 됩니다
다시 코드로 돌아오게 되면 반대로 이걸 해지하는 것을 디코딩 이라고
부르는데요
var a 에다가 이스케이프 를 넣고 ver 피해 다가 낸 언 이스케이프
라는 함수로 a 를 넣고 이 두개를 호출 해보도록 하겠습니다
저장을 하고 쓸 행을 하게 되면 초콜릿이 라고 인코딩된 문제가 나오게
되고 확인을 누르면 방금 인코딩 등 걸 다시 언 이스케이프 로 돌려서
초콜릿이 라는 한국어를 출력을 하게 됩니다
이제 요건 언제 쓰이는지 의문이 드실 수 있는데요
방금 언급했던 것처럼 웹에서 데이터가 오고갈 때 사용을 하게 됩니다
따라서 현재도 이러한 것이 있다는 것만 알아 만 누구
나중에 파트 쓰리 정도까지 가서 그때 다시 살펴보도록 하겠는데요
현재 책에 있는 표 오고 다시 3을 보시게 되면 이스케이프 원 이스케이프
잉 코드 uri 디코드 uri 링 코드 uri 컴포넌트 디코드 유아라 1
컴포넌트 같은 3개의 쌍에 조합이 나오는 것을 확인할 수 있는데요
세계 보도 일단 인코딩 암수 고딕 코딩 함수입니다
근데 뭐 플러스를 인코딩 한다.던지 뭐 인코딩을 어떤 것까지 하는지가
약간씩 다른데요
일반적으로 가장 마지막에 있는 잉 코드 uri 컴포넌트 g 코드 유라의
컴포넌트를 가장 많이 사용한다.고 기억을 해 주시면 되겠습니다 그럼 이어서
5점 11.3 절의 코드 실행 함수 를 살펴보도록 하겠는데요
뭐 이 바람 쏘는 해킹의 위협이 있기 때문에 사용하지 말라는 경우도
있지만 뭐 필요할 때 사용을 해주시면 나름 편리한 함수 라고 생각을
합니다
어쨌거나 이 발이라고 입력하고 여기에다 문자열로 코드를 입력을 하게 되면
이 문자열을 분석을 해서 코드로 실행을 하게 됩니다
한번 저장을 하고 살펴보도록 할게요 저장을 하고 실행을 해 보게 되면
문자열의 얼얼 주 안녕하세요 라고 적힌 게 실제로 실행되는 모습을 확인할
수 있습니다 그럼 이어서 5점 11 점자 절에 숫자 확인 함수를
살펴보도록 하겠는데요
이찌 파이 나이트 메서드와 이제 난 메써드 되겠습니다
이즈 파인 라이트 처럼 앞에 잊으라고 붙는 것들이 있는데요
모든 프로그래밍 언어에서 앞에 이즈 라는 글자가 붙게 되면 은 얘는
결과로 투로 또는 펄스를 리턴하는 함수 라고 기억을 해 주시면 되겠습니다
예를 들어서 오늘이 월요일인 야 할 때는 이제 먼데이 라는 함수를
사용하는 경우가 많구요
뭐 지금 보이는 것처럼 이즈 파인 라이즌 아이즈 난 2 보도 비슷한
형태라고 할 수 있겠습니다 사실 이게 위배 되는게 룩이라는 프로그래밍
언어가 있는데요
얘는 뒤에다 물음표를 써가지고 이 함수는 트루아 펄스를 리턴하는 함수 다
라는 식으로 개발자들 끼리 약속을 해서 사용을 합니다
뭐 처음 보고 되게 신기해서 그냥 완급을 해봤는데요
어쨌건 은 이처럼 2g 로 시작하는 녀석들은 트론 아 펄스를 리턴을
한다.고 생각을 해 주시면 되겠고
이름 그대로 이 녀석은 쉘 수 있는 수 라면 트롤을 출력을 하고 셀 수
없는 2 라면 펄스를 출력을 합니다
아래쪽에 있는 녀석은 난 이라면 초를 출력을 하고 나니 아니라면 펄스를
출력을 하게 됩니다
그럼 일단 이즈 파인 라이트 애써도 부터 살펴보도록 하겠는데요
이녀석 같은 경우에는 자바스크립트에서 인기 니 티 라는 값을 검출을 하게
됩니다
우리가 심 나누기 0 을 하게되면 무한한 값이 나오게 되는데요
뭐 대부분의 프로그래밍 언어는 저기에서 뻗는데 자바스크립트는 0으로
나누면 무한한 값이 된다 라고 판단을 합니다
그리고 - 10 나누기 영을 한다.던가 아니면
넘버 점 맥스 밸류 보다 큰 값이 라던가 넘버 점
민 밸류 보다 작은 값이 되면 자바스크립트는 이 숫자를 무한한 수 라고
인식을 하게 됩니다
그래서 예를 들어서 10 나누기 0 을 해보고
그냥 십을 입력을 해서 녀석을
출력해 보도록 하겠습니다
저장을 하고 실행을 하게 되면 첫 번째 것은 심 나누기 0이니까 무
아니라서 셀 수 없는 수정
그래서 벌수 를 출력을 하게 되고 두 번째 같은 경우에는 12 니까 셀
수 있어서 트롤을 출력을 하게 됩니다
그럼 요 위에 메소드는 살펴보았다 고 생각을 하고 이제 이 지난 함수에
대해서 살펴보도록 하겠습니다
이즈 난 같은 경우에는 나뉜 값을 확인하는 내용
우리가 이전에 나라 넘버 라고
이러한 식으로 입력을 하게 되면 숫자로 변환할 수 없는 녀석인데 숫자로
변화는 하게 되면서
난 이라는 값이 된다 라고 했습니다 이러한 값을 확인을 할 때 우리가 이
지나니 라는 함수를 사용하게 됩니다
이렇게 코드를 작성할 한번 해보도록 하겠구요 또 하나는 그냥 십 이라는
값을 입력을 해서 만닌 값을 입력해 보도록 하겠습니다
따라서 첫번째 출력 같은 경우에는 나뉘기 때문에
추를 출력을 할 거고 두 번째 녀석 같은 경우에는 펄스를 출력을 할
것입니다
저장을 하고
수행을 해 보면 첫번째는 추를 출력을 하고 두 번째는 펄스를
출력하지 않고 제가 오타를 냈는데요 2째 나니 대문 짜야 되는데
어쨌거나 다시 실행을 해보면 첫 번째는 트롤을 출력을 하게 되고 두
번째는 펄스를 출력하는 모습을 확인할 수 있습니다
뭐 책을 보시게 되면 나는 낭 끼리 비교할 수 없다 라던지 하는 그러한
추가적인 설명이 나오기 때문에 한번 확인해보시면 좋겠고요
이어서 5점 11 자모 절에 숫자 변환 함수에 대해서 살펴보도록
하겠습니다
우리가 이전에 문자를 숫자로 변환을 할 때
넘버 라는 함수를 사용한다. 그랬는데요 이게 제일 많이 사용되는 함수 에요
그리고 5점 11.5 절에 나오는 것은 추가적인 함수라고 볼 수
있겠는데요 1 난 파진 트고 하나는 파즈 풀로 되겠습니다
우리가 현재 자바스크립트에서 는 개발을 할 때 몰라도 되지만
인 트 라는 것은 인테 저의 약자 구영 정수입니다 따라서 뭐 - 52
라던지 아니면 0 이라던지 273 처럼 소수점이 없는 녀석을 우리가 인테
저라고 부르게 되고요
솔로 시라는 것은 우리가 부동소수점 이라고 부르게 되는데
52.2 12 173 이라던지 요점이 둥둥 떠서 움직일 수 있는
요러한 값을 우리가 부동소수점 이라고 부르게 됩니다
그냥 간단하게 인테 저는 소숫점 없는 값이라고 생각을 해 주시면 되겠고
슬롯은 소수점이 있는 값이라고 생각을 해 주시면 되겠습니다
그래서 이러한 녀석들의 매개변수의 문자열로 인 트 값이 들어 있는 녀석을
뭐 요런식으로 적어주시고 플롯 값이 들어 있는 녀석을 적어 주시게 되면
그냥 이 값이 숫자로 변환 되게 됩니다
어쨌거나 이 녀석들을 차이는 넘버 함수와 다르게 맨
일단 파즈 힌트는 소수점을 넣게 되면 이 소숫점 이하는 다 뛰어 버리고
200만 추측을 하게 되구요 뒤에 가나다라 라던지 하는 문자가 있어도
앞쪽부터 읽으면서 변환할 수 있는 범위를 모두 변환을 하게 됩니다
따라서 이 코드를 실행하게 되면 200 이라는 숫자가 나오게 됩니다
파즈 플로터 마찬가지인데요 뒤에 한 글이 라던지 하는 글이 포함이 되어
있어도 부동소수점 으로 추출할 수 있는 부분을 앞쪽부터 읽어가면서 추천을
하게 됩니다
물론 뒤 오면 의미가 없어요 뒤 오면은
예를 들어서 이러한 식으로 오게 되면 그냥 나러 넘버를 출력을 하게
됩니다
어쨌거나 오늘 강의는 여기까지 되겠고 용 다음 강의에서 뵙도록 하겠습니다
감사합니다.