[js] 3. 자바스크립트 내장 함수

• object클래스 함수

 

1. 시간 관련 함수

setTimeOut(callBack, ms)

• 시간(ms) 경과 후 콜백함수가 한번만 호출하여 콜백함수에 작성된 명령을 실행하는 함수
• "몇초(ms) 뒤에 함수의 명령을 실행해주세요!" - 명령실행예약
• 매개변수 : callBack - 이 함수를 전달하면 이 함수가 호출될 거에요~
• 매개변수 : ms - 1000ms = 1초
• 반환값 : timeoutId - setTimeOut 함수 호출에 대한 식별자

clearTimeOut(timeoutId)

• timeoutId 식별자를 이용하여 setTimeOut 함수 실행을 취소하는 함수
• "setTimeOut 함수 실행을 취소시켜주세요!" - 예약취소
• 스레드는 계속 돌아감

setInterval(callBack, ms)

• 시간(ms) 경과 마다 콜백함수가 반복적으로 호출하여 콜백함수에 작성된 명령을 실행하는 함수
• 동적인 페이지 만들 때 많이 사용 : 이벤트 발생 없이 시간경과마다 반복적으로 다른 정보 제공받을 때
• ex) 다음 페이지에서 시간경과마다 전국의 날씨를 제공해주는 것 ( 서울 -> 부산 -> ... )
• "몇초(ms) 마다 함수의 명령을 반복적으로 실행해주세요!"- 명령실행예약
• 반환값 : intervalId (setInterval 함수 호출에 대한 식별자)

clearInterval(intervalId)

• intervalId 식별자를 이용하여 setInterval 함수 실행을 취소하는 함수
• "setInterval 함수 실행을 취소시켜주세요!" - 예약취소

14_timer.html

//익명함수의 콜백함수
//⏱ 1초(1000ms)마다 콜백함수(익명함수 or 화살표함수) 실행 - 반복적 실행
var id = setInterval(function() {
	alert("setInterval 함수에 의해 반복 실행되는 명령")
}, 1000);

//혹은

/*
//화살표함수의 콜백함수 - 함수호출 시 매개변수에 화살표 함수 전달 가능
var id = setInterval(() => {
	alert("setInterval 함수에 의해 반복 실행되는 명령")
}, 1000);
*/

//⏱ 5초(5000ms) 뒤에 콜백함수(setInterval 취소함수)가 호출되어 실행 - 딱 1번만 실행
setTimeout(function() {
	clearInterval(id);
}, 5000)

2. 부호화(복호화) 관련 함수 - encode & decode

encodeURI(string)

• 일반 문자값을 전달받아 부호화 처리하여 반환하는 함수
• 일부특수문자부호화처리못함

encodeURIComponent(string)

• 일반 문자값을 전달받아 부호화 처리하여 반환하는 함수
• 일부특수문자포함해모든문자들을부호화처리함

decodeURI(string)

• 부호화 처리된 문자값을 전달받아 복호화 처리하여 반환하는 함수
• 일부특수문자복호화처리못함

decodeURIComponent(string)

• 부호화 처리된 문자값을 전달받아 복호화 처리하여 반환하는 함수
• 일부특수문자포함해모든문자들을복호화처리함

URI로 값 전달 시 encode & decode 예시 - ex) 인터넷 익스플로러

URI로 값 전달 시 encode & decode 예시 - ex) 사용자중심의 크롬, 엣지

• URL 주소는 영문자, 숫자, 일부 특수문자 로만 표현 가능
• URI(자원의 식별자) = URL(자원의 위치) + QueryString(전달값)
• 웹(Web)은 URI 주소의 질의문자열(QueryString)로 요청 웹프로그램에 값 전달 가능
• 문제점 : 질의문자열에는 URI 주소로 표현 불가능한 문자가 포함될 수 있음 - 값이 비정상적으로 전달
• 해결법
  • 질의문자열에 URI 주소로 표현 불가능한 문자가 포함되어 있는 경우
  • 표현 가능한 문자(유니코드 - Unicode)로 변환하여 전달 - 부호화 처리
  • 부호화 처리된 문자를 원래 문자로 변환하여 사용 - 복호화 처리

15_encode.html

var name="홍길동";
alert("name = " + name); //name = 홍길동

var encodeName = encodeURIComponent(name);
alert("encodeName = " + encodeName); //encodeName = %ED%99%8D%EA%B8%B8%EB%8F%99

var decodeName = decodeURIComponent(encodeName);
alert("decodeName = " + decodeName); //decodeName = 홍길동

 

3. eval 함수 ( "문자값" -> JS명령 )

eval(string)

• 문자값을 전달받아 자바스크립트 명령으로 변환하여 반환하는 함수

16_eval.html

//예시1
var text ="20 + 10";
alert(text); //20+10
//문자값이 명령으로 변환되어 실행
alert(eval(text)); //30

//예시2
var operation = prompt("연산식을 입력해 주세요.");
//20+20
alert("연산결과 = "+eval(operation));
//연산결과 = 40
alert("연산결과 = "+ operation);
//연산결과 = 20+20

//예시3
var display = "function(){alert('함수의 명령 실행');}";
alert("변수의 자료형 = " + typeof(display));
//변수의 자료형 = string
display(); //error , 변수에 저장된 값이 함수가 아니므로 함수 호출 불가능 - 에러 발생

//예시4
//eval 함수를 사용하여 문자값을 명령으로 변환하여 실행
alert("변수의 자료형 = " + typeof(eval(display))); //error, 단순히 선언문이지 실행명령이 아님ㅜ
// => 함수를 선언하는 문자값은 자바스크립트 명령처럼 실행되어 함수가 생성되도록
// () 연산자를 이용하여 우선 처리
alert("변수의 자료형 = " + typeof(eval("("+display+")")));  //ok
//변수의 자료형 = function
eval("("+display+")")(); //익명함수를 생성하여 함수 호출
//함수의 명령 실행

4. isNaN함수

isNaN(value)

• 전달값이 숫자로만 구성된 경우 false를 반환하고, 숫자로만 구성되지 않은 경우 true를 반환하는 함수
• 너 Not a Number지? (너 숫자로만 구성되지 않았지?) → 네 숫자만 있지는 않아요 true
• 입력값이 숫자로만 되어있는지 아닌지 검증할 때 사용 ex. 한국의 전화번호
• 실제로는 정규표현식을 더 많이 사용함

17_isNaN.html

var value = "123";
if(isNaN(value)){
	alert("숫자로만 구성된 값이 아닙니다.")
} else {
	alert("숫자로만 구성된 값입니다.")
}
//숫자로만 구성된 값입니다.


var value = "123abc";
if(isNaN(value)){
	alert("숫자로만 구성된 값이 아닙니다.")
} else {
	alert("숫자로만 구성된 값입니다.")
}
//숫자로만 구성된 값이 아닙니다.

5. isFinite함수

isFinite(value)

• 전달값이 무한수인 경우 false를 반환하고, 유한수인 경우 true를 반환하는 함수
• 너 유한수지? → 네 유한수에요 true
• 무한수 : 나누어서 떨어지지 않는 값들

18_isFinite.html

alert(10/4); //2.5
alert(10/3); //3.3333333333333335 - 자바스크립트는 유한수로만 표현
//자바스크립트에서 무한수가 나오는 딱 하나의 경우!!!!
alert(10/0); //Infinity : 무한수를 표현하기 위한 상수


var num1=10 , num2=0;
alert("결과 = "+ num1/num2); //결과 = Infinity
if(isFinite(num1/num2)){
 	alert("결과 = "+ num1/num2);
} else{
 	alert("0으로 나눌 수 없습니다.");
}
//0으로 나눌 수 없습니다.

6. 숫자변환 관련 함수 - parse

parseInt(value)

• 전달값을 정수값으로 변환하여 반환하는 함수

parseInt(value,radix)

• 원하는 진수의 값(일반적으로 문자값으로 권장)을 전달받아 10진수의 정수값으로 변환하여 반환하는 함수
• 매개변수에 값만 전달할 경우 자동으로 10진수로 처리

parseFloat(value)

• 전달값을 실수값으로 변환하여 반환하는 함수

19_parse.html

//parseInt(value)
var result=50/3;
alert("결과 = "+result); //결과 = 16.666666666666668
alert("결과 = "+parseInt(result)); //결과 = 16

//parseInt(value,radix)
alert("16진수 : 123 = 10진수 : "+parseInt(123, 16)); //16진수 : 123 = 10진수 : 291
alert("16진수 : 123 = 10진수 : "+parseInt("123", 16)); //16진수 : 123 = 10진수 : 291
alert("8진수 : 123 = 10진수 : "+parseInt(123, 8)); //8진수 : 123 = 10진수 : 83
alert("8진수 : 123 = 10진수 : "+parseInt("123", 8)); //8진수 : 123 = 10진수 : 83
alert("16진수 : abc = 10진수 : "+parseInt(abc, 16)); //error
alert("16진수 : abc = 10진수 : "+parseInt("abc", 16)); //16진수 : abc = 10진수 : 2748

//parseInt(value) & Number(value)
var num="100";
alert(num+200); //100200 >> 문자값 결합
//문자값을 parseInt 함수를 이용하여 숫자값으로 변환하여 반환
alert(parseInt(num)+200); //300
//Number 함수를 사용하여 매개변수로 전달받은 문자값을 숫자값으로 변환하여 반환
alert(Number(num)+200); //300

//parseFloat(value) & Number(value)
var su="10.5";
alert(su+20); //10.520 >> 문자값 결합
alert(parseInt(su)+20); //30
alert(parseFloat(su)+20); //30.5
alert(Number(su)+20); //30.5

//Number(value) VS parseInt(value)
var num="100";
alert(Number(num)+200); //300
alert(parseInt(num)+200); //300

var num="100abc";
//Number(value) : 전달받은 문자값에 숫자가 아닌 문자가 있는 경우 "NaN 반환"
alert(Number(num)+200); //NaN
//parseInt(value) 또는 parseFloat(value) : 전달받은 문자값의 "앞부분의 숫자값만 잘라내어 숫자값으로 변환하여 반환"
alert(parseInt(num)+200); //300
//parseInt(value) 또는 parseFloat(value) : 숫자가 아닌 문자로 시작될 경우 NaN 반환
var num="abc100";
alert(parseInt(num)+200); //NaN