(46) [JavaScript] 2일 JavaScript 기본 내장 함수

기본 내장 함수

자바스크립트는 자체적으로 미리 정의된 내장함수를 제공한다.
표준 내장 객체의 함수 속성으로 제공한다.
객체에 붙지 않고 전역으로 호출하는 함수로, 반환 값을 호출자에게 바로 반환한다.

문자열 → 숫자로 변환 함수

parseInt()	문자열 인자의 구문을 분석해 특정 진수의 정수를 반환
parseFloat()	문자열을 분석해 부동소수점 실수로 반환한다.
Number()	인수를 ㅅ숫자로 변환할 수 없으면 NaN을 반환

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>숫자로 변환:parseInt(),parseFloat()</h3>

	<script type="text/javascript">
		var a, b;

		a = "123";
		console.log(a === 123); //false
		console.log(a + 10); //12310

		//문자열을 숫자로 변환
		b = parseInt(a);
		console.log(b === 123); //true
		console.log(b + 10);//133

		a = "1,234";
		b = parseInt(a); // 1
		console.log(a, b)//
		
		a = "123a";
		b = parseInt(a); // 123
		console.log(a, b)//
		
		a = "123.567";
		b = parseInt(a); // 123
		console.log(a, b)//
		
		a = "";
		b = parseInt(a); // NaN
		console.log(a, b)
		
		a = "   123";
		b = parseInt(a); // 123 공백은 신경쓰지 않는다. 
		console.log(a, b)
		
		a = "1 2 3";
		b = parseInt(a); // 1 가장 앞에 있는 공백은 제거 하나, 
						//중간에 있는 공백은 제거 하지 못한다.
		console.log(a, b)
		
		a = "a123";
		b = parseInt(a); // NaN
		console.log(a, b)
		
		a = "0x3F";
		b = parseInt(a); //63 
		console.log(a, b)
		
		a = "0x3F";
		b = parseInt(a,16); 
		console.log(a, b) // 63
		
		a = "0x3F";
		b = parseInt(a,10);  
		console.log(a, b) //0
		
		
		a = "123.456";
		b = parseInt(a); // 123.456
		console.log(a, b)
		
		
		
	</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>숫자로 변환 - Number()함수 </h3>

	<script type="text/javascript">
	var a,b;
	
	a="123";
	b=Number(a);
	console.log(b===123); // true 
	
	a="123.57";
	b=Number(a);//123.57
	console.log(a,b);
	
	a="1,234";
	b=Number(a);//NaN 
	console.log(a,b);
	
	a="123a";
	b=Number(a);//NaN 
	console.log(a,b);
	
	a=null;
	b=Number(a); //0
	console.log(a,b);
	
	a="kor";
	b=Number(a);//NaN 
	console.log(a,b);
	
	a="0x11";
	b=Number(a);//17
	console.log(a,b);
	
	
	
	</script>


</body>
</html>

숫자 확인 함수

isFinite()	number가 무한한 값인지 확인, 유한한 수이면 true를 리턴
isNaN	number가 숫자인지 확인, 숫자가 아니면 true를 리턴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>문자열이 숫자로 이루어져 있는지 확인 </h3>
	
	<script type="text/javascript">
	var a,b;
	
	a="123";
	b=isFinite(a); // true 숫자로 이루어져 있으면 참 
	console.log(a,b);
	
	a="123.57";
	b=isFinite(a); // true 
	console.log(a,b);
	
	a="1,234";
	b=isFinite(a); // false
	console.log(a,b);
	
	a="123a";
	b=isFinite(a); // false
	console.log(a,b);
	
	a="123";
	b=isNaN(a); // false.숫자로 이루어져 있으면 false 
	console.log(a,b);
	
	a="1,234";
	b=isNaN(a);	//true
	console.log(a,b);
	
	a="";
	b=isNaN(a);	//false
	console.log(a,b);
	
	
	
	
	</script>

</body>
</html>

인코딩 & 디코딩 관련 함수

인코딩 : 문자를 컴퓨터에 저장 또는 통신에 사용할 목적으로 부호화하는 방법

디코딩 : 부호화 된 문자를 원래대로 되돌리는 것

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>인코딩과 디코딩</h3>


	<script type="text/javascript">
		var s = 'seoul?자 바&123+4';
		var out;

		//영문자, 숫자, 일부특수문자(@ * - _ + . /)를 제외한 문자를 인코팅(주소형식으로 변환)
		out = escape(s);
		console.log('escape', out);

		//영문자,숫자,인터넷주소에서 사용되는 문자(:/?=+&...)를 제외한 문자를 인코팅
		out = encodeURI(s);
		console.log('escape', out);

		//영문자,숫자를 제외한 문자를 인코팅:★암기할것★
		out = encodeURIComponent(s);
		console.log('encodeURIComponent', out);

		//디코딩
		out = decodeURIComponent(out);
		console.log('decodeURIComponent', out);
		
	</script>


</body>
</html>

타이머 함수

특정한 시간에 특정한 함수를 실행하는 함수로 window 객체에 정의되어 있다.

setTimeout	일정 시간 후 함수를 한 번 실행
setInterval	일정 시간마다 함수를 반복 실행
clearTimeout	일정 시간 후 함수를 한 번 싱행하는 것을 중지
clearInterval	일정 시간마다 함수를 반복하는 것을 중단

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<script type="text/javascript">
	document.write('<h3>타이머 예제</h3>');
	
	function sub() {
		document.write('<p>자바 스크립트</p>');
	}
	
	//3초후에 한번 실행 
	setTimeout('alert("환영합니다.");',3000);
	
	//2초마다 한번씩 무한 반복 
	setInterval('sub();',2000);

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>타이머 종료</h3>
	
	<script type="text/javascript">
	var n = 0;
	
	function fun() {
		n++;
		document.write('<p>타이머 실행-'+n+'</p>');
	}
	
	//1초에 한번씩 무한반복 
	var timer = setInterval("fun();",1000); //타이머 객체 반환
	
	//10초후에 한번만 실행 
	setTimeout(function name() {
		clearTimeout(timer); // 타이머 종료 
	},10000);
	
	</script>

</body>
</html>

경고 창 및 입력 대화상자 메소드

alert()	확인 버튼과 선택적 메시지를 가진 경고 대화 상자를 출력
prompt()	사용자가 텍스를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자를 출력하며 사용자 가 입력한 문자열, 또는 null 을 반환한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
	<h3>prompt / confirm</h3>

	<p>
		<button type="button" onclick="sub1();">확인 1</button>
		<button type="button" onclick="sub2();">확인 3</button>
	</p>

	<script type="text/javascript">
		function sub1() {
			let s = prompt('수식입력해라', ''); // 두번째''는 기본값을 가르킴 
			let result = eval(s);
			alert(s + '=' + result);

		}
		function sub2() {
			if (sonfirm('삭제할래?')) {
				alert('삭제했다.');

			}
		}
	</script>

</body>
</html>

'💻 > Javascript' 카테고리의 다른 글

(47) [JavaScript] 3일 JavaScript 내장객체 (0)	2024.04.23
(47) [JavaScript] 3일 JavaScript 함수&예외처리 (0)	2024.04.22
(46) [JavaScript] 2일 JavaScript 기본 - 2 (0)	2024.04.19
(45) [JavaScript] 1일 JavaScript 기본 - 1 (1)	2024.04.19
(45) [JavaScript] 1일 JavaScript 기초 (0)	2024.04.18

Power Up!

(46) [JavaScript] 2일 JavaScript 기본 내장 함수

기본 내장 함수

문자열 → 숫자로 변환 함수

숫자 확인 함수

인코딩 & 디코딩 관련 함수

타이머 함수

경고 창 및 입력 대화상자 메소드

'💻 > Javascript' 카테고리의 다른 글

티스토리툴바

(46) [JavaScript] 2일 JavaScript 기본 내장 함수

기본 내장 함수

문자열 → 숫자로 변환 함수

숫자 확인 함수

인코딩 & 디코딩 관련 함수

타이머 함수

경고 창 및 입력 대화상자 메소드

'💻 > Javascript' 카테고리의 다른 글

관련글

티스토리툴바