본문 바로가기
WEB/JAVASCRIPT

자바스크립트 예제 - 객체 (1)

by 둥바 2022. 6. 27.
내장함수 (객체) : javascript 엔진이 구동되는 시점에서 바로 제공되며 어디에서든 사용 가능
Date, Math, Array, Number, String,Boolean 등

Date 객체 예제

구매날짜와 현재날짜의 차이를 통해 교환가능의 여부를 통지하는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구매날짜와 현재날짜의 차이따라 교환가능여부 통지</title>
<script type="text/javascript">
function checkDate(){
	var s = document.getElementById("pdate").value;
	document.write("구입날짜" + s + "<br>");
	var pdate = new Date(s);//특정 날짜와 시각
	var today = new Date();//시스템 현재의 날짜와 시각
	document.write("구입타임스탬프 : " + pdate.getTime() + "밀리세컨드 <br>");
	//getTime() :1970년 1월 1일 00시 00분 00초부터 시작해서 주어진 일시까지의 밀리초 단위의 간격(타임스탬프 값) 반환
	document.write("현재타임스탬프 : " + today.getTime() + "밀리세컨드 <br>");
	var diff = today.getTime() - pdate.getTime(); //차이시간
	document.write("차이시간 :" + diff + "밀리세컨드 <br>");
	//일수로 바꾸려면 
	//밀리세컨드 1000 -> 초 60 -> 분  60 -> 시간  24
	//diff를 24시간으로 나누기 
	document.write("일자로 환산 :" + diff/(1000*60*60*24) + "일<br>");
	var days = Math.floor(diff/(1000*60*60*24));//버림
	
	if(days > 30){
		alert("30일을 초과해서 교환,환불 불가합니다.")
	}else{
		confirm("교환 가능합니다. 하시겠습니까?")
	}
	
	
}


</script>
</head>
<body>
구입날짜 : <input type="date" id="pdate">
<button type="button" onclick="checkDate()">확인</button>
</body>
</html>

 

지금부터 내년까지 남은 시간 구하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내년까지 얼마나 남았는지 계산</title>
</head>
<body>
<div id="remain"></div>
<script type="text/javascript">
function datesUntilNewYear(){
	var now = new Date();//현재 시각과 날짜
	//내년(2023년 1월 1일 - 현재 년도+1,0(month시작),1)-매개변수
	var newYear = new Date(now.getFullYear()+1,0,1);
	var diff = newYear - now;
	//밀리세컨드 계산
	var milliseconds = Math.floor(diff % 1000);//밀리세컨드
	diff = diff/1000; //초
	
	var seconds = Math.floor(diff % 60);
	diff = diff/60; //분
	
	var minutes = Math.floor(diff % 60);
	diff = diff/60; //시간

	var hours = Math.floor(diff % 24);
	diff = diff/24; //일
	
	var days= Math.floor(diff);
	var out = "내년 신정까지" + days  +"일," + hours +"시간," +
	minutes + "분,"+seconds+"초,"+milliseconds+"밀리초 남았다.";
	
	document.getElementById("remain").innerHTML = out;
	
}

//함수호출
setTimeout(datesUntilNewYear(),1000);
//일정 시간이 지난 후 함수 실행




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

 

1초마다 증가하는 지금 현재 시간 구하기(시계 구현)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시계</title>
</head>
<body>
<div id="clock"></div>
<script type="text/javascript">
function setClock(){
	var now = new Date();
	var s = now.getFullYear() + "-" + (now.getMonth()+1) +"-" +
	now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" +
	now.getSeconds();
	document.getElementById("clock").innerHTML = s;
}

//함수호출
setInterval("setClock()", 1000);//1초마다 계속 호출

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

 

배열과 Date() 활용해서 이미지로 요일 나타내기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열과 Date()를 이용해 이미지로 요일 나타내기</title>
</head>
<body>
<script type="text/javascript">
now = new Date();
day = now.getDay(); //요일(일요일 : 0, 토요일 : 6)
document.write("오늘은" + day + "<br>");//숫자로 나타남
//배열로 처리
yoil = new Array("일","월","화","수","목","금","토");
document.write("오늘은" + yoil[day]+"요일입니다.<br>");

imgyoil = new Array("sun.gif","mon.gif","tue.gif","wed.gif","thu.gif","fri.gif","sat.gif");
for(var i=0;i<imgyoil.length;i++){
	document.write(yoil[i] + "요일 " + "<img src=../image/" + imgyoil[i] + ">");
	
}
</script>
</body>
</html>

 

 

Number, String, Boolean 데이터 타입 예제

숫자형 예제(1)

복소수와 문자열의 경우, Number()에 넣었을 경우 NaN으로 나타난다. (숫자로 표현 불가)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>숫자 데이터 타입</title>
<script type="text/javascript">
var a = false;
var b = '100';
var c = 'String';
var d = Math.sqrt(-3); //괄호 안에 마이너스 입력시 복소수됨
var e = Math.sqrt(3);

alert(Number(a));//0
alert(typeof(Number(b))+'\n'+Number(b));//Number, 100
alert(Number(c));//NaN(Not a Number)
alert(Number(d));//NaN(복소수,문자열 모두 숫자로 나타낼 수 없다.)
alert(Number(e));//1.731




</script>
</head>
<body>

</body>
</html>

 

문자열 테스트 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열 테스트</title>
<script type="text/javascript">
var a = true;
var b = 123;

//Boolean형이나 숫자를 String()함수로 사용해 문자열로 바꾸기
alert(typeof(String(a))+'\n'+String(a));//String,"true"
alert(typeof(String(b))+'\n'+String(b));//String,"123"



</script>
</head>
<body>

</body>
</html>

 

Boolean형 테스트 예제

' ', undefined, null, 0, NaN -> false

1, 실수 음수 포함 숫자, 문자열 -> true

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>불린형 테스트</title>
<script type="text/javascript">
document.write("Boolean(0) : " + Boolean(0)+ "<br>");
document.write("Boolean(1) : " + Boolean(1)+ "<br>");

//false) Boolean( ' 'or undefined or 'null' or 'NaN' )
document.write("Boolean('') : " + Boolean('')+ "<br>");//false
document.write("Boolean('undefined') : " + Boolean(undefined)+ "<br>");//false
document.write("Boolean('null') : " + Boolean(null) + "<br>");//false
document.write("Boolean('NaN') : " + Boolean(NaN) + "<br>");//false

document.write("================================================<br>");

//true) Boolean(숫자(실수나 음수),'String')
document.write("Boolean(3.1123) : " + Boolean(3.1123) + "<br>");//true
document.write("Boolean(-55) : " + Boolean(-55) + "<br>");//true
document.write("Boolean('0') : " + Boolean('0') + "<br>");//true
document.write("Boolean('String') : " + Boolean('String')+"<br>");//true
document.write("Boolean('false') : " + Boolean('false') + "<br>");//true
document.write("Boolean(10<20) : " + Boolean(10<20) + "<br>");//true


document.write("Boolean(20<10) : " + Boolean(20<10) + "<br>");//false
</script>
</head>
<body>

</body>
</html>

 

형 변환 예제

- 문자열과 숫자의 경우, 더하기 연산자 일 때 문자열 우선된다.

- 더하기를 제외한 나머지 사칙연산자(*,%,/)의 경우 숫자가 우선된다.

- 마이너스의 경우 문자열과 같이 있으면 NaN으로 결과 나옴

- 연산자 우선순위

세부지정 및 호출 > 단항 > 곱하기,나누기,나머지 > 더하기,빼기 > 비교 > 일치(==) > 논리곱 > 논리합

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형 변환(Convert)</title>
</head>
<body>
<script type="text/javascript">
document.write("12 + 34 : " + 12 + 34 + "<br>"); //1234
//문자열과 숫자를 같이 더하면 문자열로 변환된다.
//자바스크립트는 자동으로 자료형 변환시킨다.
//주의 : 더하기 연산자일 때 문자열 -> 숫자 변경 시 문자열 우선
//더하기 제외 나머지 사칙연산자(*,/)는 숫자 우선이다.

document.write(" '12' + 34 : " + '12' + 34 + "<br>");//1234
document.write("12 + '34' : " + 12 + '34' + "<br>");//1234
document.write("'12'/2 : " + '12'/2 + "<br>");//6(숫자우선)
document.write("12*'2' : " + 12 * '2' + "<br>");//24
document.write("'12'-'2' : " + '12' - '2' + "<br>");//-는 NaN 뜸
document.write("12*'5' : " + 12 % '5' + "<br>");//2

//연산자 우선순위 높은 순
//세부지정 및 호출 > 단항연산자 > 곱하기,나누기,나머지 > 더하기,빼기 > 비교 > 일치(==) > 논리곱 > 논리합

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

 

숫자형 예제(2) : 반올림 함수

- new Number(숫자)는 Object 데이터타입으로 Number 타입과 데이터타입은 달라도 내부적으로 같게 처리

- Math.round(실수) 외에도 반올림 할 수 있는 함수로,

- 실수.toFixed(소수이하자리수)가 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Number테스트2</title>
<script type="text/javascript">
var count1 = new Number(1.237);
var count2 = 1.233;
document.write(typeof(count1) + ":" + count1+"<br>");//object
document.write(typeof(count2) + ":" + count2+"<br>");//number
//자료형은 다르나 내부적으로 같이 처리

//반올림:Math.round
document.write(Math.round(count1)+"<br>");
document.write(Math.round(count2)+"<br>");

//반올림 함수 : 실수.toFixed(소수이하자리수)
document.write(count1.toFixed(2)+"<br>");//소수 둘째자리 반올림
document.write(count2.toFixed(2)+"<br>");
if(count1.toFixed(2) == count2.toFixed(2)){
	alert("소수 둘째 자리까지 같다.");
}else{
	alert("같지 않다.");
}

</script>
</head>
<body>

 

숫자형 예제(3) : 가장 큰 값, 가장 작은 값, isNaN(숫자가 아닌가? - 아니면 true, 맞으면 false )

숫자형 중에 가장 큰 값: Number.MAX_VALUE / 가장 작은 값 : Number.MIN_VALUE

Number.NaN : 숫자가 아닐 때 -> isNaN ( 숫자가 아니면 true, 맞으면 false )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NumberTest(3)</title>
<script type="text/javascript">
var num1 = "30.5px";//String
var num2 = 40;//Number

document.write("표현 가능한 가장 큰 수:" + Number.MAX_VALUE,"<br>");
//최대값, 연결연산자로 + 외에 ,사용 가능

document.write("표현 가능한 가장 작은 수:" + Number.MIN_VALUE,"<br>");

document.write("숫자가 아닌 경우 :" + Number.NaN, "<br>");
document.write(isNaN(num1)+"<br>");//isNaN(숫자 아니면 true반환)
document.write(isNaN(num2)+"<br>");//숫자면 false
document.write(num1+num2+"<br>");//문자열로 연결
document.write(parseInt(num1)+num2+"<br>");//정수로 변환
document.write(parseFloat(num1)+num2+"<br>");//실수로 변환
//자바스크립트에는 parseDouble없음.


</script>
</head>
<body>

</body>
</html>

 

숫자형 예제(4) : IsNaN을 이용해 입력한 숫자까지의 짝수합 구하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>isNan?</title>
</head>
<body>
<script type="text/javascript">
var num1 = prompt("숫자 입력하세요.", "");
document.write(isNaN(num1));//num1의 타입이 문자형이어도 isNaN은 숫자형태면 숫자로 인식
while(isNaN(num1)){//숫자가 아니면 true
	alert("숫자를 입력하세요.");
	var num1 = prompt("숫자 입력하세요.", "");
}//false(숫자면 자동종료)

sum();

function sum(){
	var num2 = Number(num1);
	var sum = 0;
	for(var i=1;i<=num2;i++){
		if(i%2 == 0){
			sum+= i;
		}
	}
	alert(num2 + "까지의 짝수 합 : " + sum);
}


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

 

Math 객체

Math 객체 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var num = 2.1234;
var maxNum = Math.max(10,50,8,30);//최대 Math.max
var minNum = Math.min(10,50,8,30);//최소 Math.min
var roundNum = Math.round(num);//반올림
var floorNum = Math.floor(num);//버림
var ceilNum = Math.ceil(num);//올림
var rndNum = Math.random();//0.0~1.0 사이 난 수
var piNum = Math.PI;//원주율

document.write("최대값 : ", maxNum, "<br>");
document.write("최소값 : ", minNum, "<br>");
document.write("반올림값 : ", roundNum, "<br>");
document.write("버림값 : ", floorNum, "<br>");
document.write("올림값 : ", ceilNum, "<br>");
document.write("난수값 : ", rndNum, "<br>");
document.write("파이값 : ", piNum, "<br>");



</script>
</head>
<body>

</body>
</html>

 

eval 함수 예제 : 문자열 기호 제거
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var x = 10;
var y = 20;
var result = x * y;
document.write(result +"<br>");//200

var text = "x+y";
var result = eval(text);//30
//eval()함수는 문자열 기호를 제거하면서 실제 계산할 수 있게 해주나,
//해커들의 공격대상이 되는 경우가 많아서 잘 사용되지 않음.
document.write(result);

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

 

 

'WEB > JAVASCRIPT' 카테고리의 다른 글

자바스크립트로 문서에 HTML요소 추가하기  (0) 2022.06.30
가위바위보 게임 및 간이 계산기 만들기  (0) 2022.06.27
자바스크립트 예제 및 함수  (0) 2022.06.23
자바스크립트 예제 - 제어문과 배열 알아보기  (0) 2022.06.22
자바스크립트의 역사 및 기초문법  (0) 2022.06.21

관련글

티스토리툴바