[JavaScript] NumberObject

728x90

이번에는 Script영역이 body영역 아래쪽에 있어도 작동이 된다는 것을 보여드리기 위해 일부로 body안에 script를 작성하였습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>자바스크립트에서 기본적으로 제공하는 객체 중 하나</h1>
	
	<p>1. Number 객체<br>
		- 정수와 실수를 다루는 객체
		<button onclick="numberObj();">클릭!</button><br>
		- 속성 : NaN (숫자가 아닌 값), Infinity (범위를 벗어난 숫자)<br>
		- 그 밖의 속성<br>
		undefined(정의되지 않은 값) <br>
		null(비어있는 값) <br>
		<button onclick="isNum();">클릭!</button>
	</p>
	
	<p id="txt"></p>
	
<script type="text/javascript">

	function isNum(){
		var out = document.getElementById("txt");
		
		var num = prompt("숫자만 입력해 주세요");
		
		// isNaN : NaN 일 때 true
		if(isNaN(num)) {
			out.innerHTML = "숫자가 아닙니다...";
		} else {
			out.innerHTML = "숫자입니다!!!!";
		}
	}

	function numberObj(){
		
		var out = document.getElementById("txt");

		// 1. 작성방법
		var num01 = new Number(7);		// 객체
		var num02 = 7;					// 값
		console.log(num01);
		console.log(num02);
		
		// 2. NaN (Not a Number)
		out.innerHTML = "NaN : " + parseInt("a") + "<br>";
		out.innerHTML += "parseInt(10) : " + parseInt("10") + "<br>";
		// parseInt는 문자를 숫자로 변환해줌 but ()안에 숫자형 문자만 들어가야하고 숫자가 아니면 Not a Number라는 뜻의 NaN이 나옴
		
		// 3. infinity
		out.innerHTML += "infinity : " + (Infinity/10) + "<br>";
		out.innerHTML += "infinity : " + (Number.Max_VALUE + 0.00001e+308) + "<br>";
		
		// 4. Number 객체의 함수
		// 1) toFixed() : 실수형의 소수점 자리수를 지정하고, 문자열로 반환 -> 반올림
		var number01 = 333.34567;
		out.innerHTML += "toFixed : " + number01.toFixed(2) + "<br>";
		
		// 2) toString() : 문자열로 반환 (진수 변환 가능)
		var number02 = 123;
		out.innerHTML += "toString : " +number02.toString(16);
	}

</script>
	
</body>
</html>

기본 실행 결과입니다.

위에 버튼을 누르면 해당 텍스트가 나옵니다.

첫번째 버튼은

	function numberObj(){
		
		var out = document.getElementById("txt");

		// 1. 작성방법
		var num01 = new Number(7);		// 객체
		var num02 = 7;					// 값
		console.log(num01);
		console.log(num02);
		
		// 2. NaN (Not a Number)
		out.innerHTML = "NaN : " + parseInt("a") + "<br>";
		out.innerHTML += "parseInt(10) : " + parseInt("10") + "<br>";
		// parseInt는 문자를 숫자로 변환해줌 but ()안에 숫자형 문자만 들어가야하고 숫자가 아니면 Not a Number라는 뜻의 NaN이 나옴
		
		// 3. infinity
		out.innerHTML += "infinity : " + (Infinity/10) + "<br>";
		out.innerHTML += "infinity : " + (Number.Max_VALUE + 0.00001e+308) + "<br>";
		
		// 4. Number 객체의 함수
		// 1) toFixed() : 실수형의 소수점 자리수를 지정하고, 문자열로 반환 -> 반올림
		var number01 = 333.34567;
		out.innerHTML += "toFixed : " + number01.toFixed(2) + "<br>";
		
		// 2) toString() : 문자열로 반환 (진수 변환 가능)
		var number02 = 123;
		out.innerHTML += "toString : " +number02.toString(16);
	}

해당 함수를 호출합니다.

콘솔 창에서 보면 객체로 선언된 7과 숫자7이 대입된 변수의 출력과 다른 값이 나옵니다.

두번째 버튼을 누르게 되면

	function isNum(){
		var out = document.getElementById("txt");
		
		var num = prompt("숫자만 입력해 주세요");
		
		// isNaN : NaN 일 때 true
		if(isNaN(num)) {
			out.innerHTML = "숫자가 아닙니다...";
		} else {
			out.innerHTML = "숫자입니다!!!!";
		}
	}

isNum함수가 호출되어 숫자를 입력받게 됩니다.

입력된 값이 숫자인지 아닌지를 구분해줍니다.

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] date(날짜) (0)	2022.01.17
[JavaScript] TransObject(형변환) (0)	2022.01.16
[JavaScript] Object(오브젝트 / 객체) (0)	2022.01.14
[JavaScript] DOM(돔) 구조 (0)	2022.01.13
[JavaScript] rolling(롤링)을 이용한 그림 바꾸기 (0)	2022.01.12

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바