달리는 자동차
JavaScript 정리 3 본문
형변환
| parseInt - 데이터를 숫자로 변환하기 : parseInt(변수) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>형변환</title>
<script>
var str = "string";
document.write(str+'of type is' typeof(str)+'<br>');
str = parseInt(str); //date type conversion
document.write(str+'of type is' + typeof(str));
</script>
</head>
<body>
</body>
</html>| 결과 string of type is string NaN of type is number |
결과를 보면 형변환 후 변수 str의 값이 NaN인 것을 알 수 있다.
이것은 Not a Number의 뜻으로 숫자가 아니라는 뜻이다. 즉 string이라는 문자열을 숫자로 형변환 했으니 NaN이라는 값이 대입 된 것이고 문자열이 숫자로 구성된 경우는 다르다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>형변환</title>
<script>
var str="55";
document.write(str+'of type is'+typeof(str)+'<br>');
str=parseInt(str);
document.write(str+'of type is'+typeof(str));
</script>
</head>
<body>
</body>
</html>| 결과 55 of type is string 55 of type is number |
| Number -데이터를 숫자로 변환하기 : Number(변수) |
<!--parseInt() 와 Number()의 차이-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>parseInt</title>
<script>
var str = "12숫자";
document.write(str + 'of type is' + typeof(str) + '<br>');
//결과 : 12숫자 of type is string
str = parseInt(str); //date type conversion
document.write(str + 'of type is' + typeof(str));
//결과 : 12 of type is number
</script>
</head>
<body>
</body>
</html>| parseInt는 데이터가 숫자로 시작하는 경우 뒤에 문자열이 있더라도 해당 숫자만 인지했다. Number는 숫자로 시작하더라도 문자열이 들어가 있다면 NaN으로 값이 변경 된다. 이런 차이를 구분해서 알맞게 쓰면 된다. parseInt가 Number보다 좀 더 표용적이다..^ㅅ^ |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Number()</title>
<script>
var str = "55숫자";
document.write(str+'of type is'+typeof(str)+"<br>");//결과 : 55숫자 of type is string
str=Number(str);//date type conversion
document.write(str + 'of type is' + typeof(str)); //결과 : NaN of type is number
</script>
</head>
<body>
<body>
</html>| String - 데이터를 문자열로 변경하기 : String(변수) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>String(변수)</title>
<script>
var num = 440;
document.write(num+'of type is'+ typeof(num)+'<br>');
str=String(num);//문자로 형변환
document.write(str+'of type is'+typeof(str));
</script>
</head>
<body>
</body>
</html>| 440 of type is number 440 of type is string |
| Boolean -데이터를 논리형으로 변환하기 : Boolean(변수) |
<!-- 숫자를 boolean에 넣어보기 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>boolean</title>
<script>
var num = 440;
document.write(num+' of type is '+typeof(num)+'<br>');
var bool= Boolean(num); //boolean 타입으로 형변환
document.write(bool+' of type is '+typeof(bool));
<!--결과값은 true-->
</script>
</head>
<body>
</body>
</html>
<!--문자열을 boolean으로 변환-->
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8"/>
<title>문자열 형변환</title>
<script>
var str="440";
document.write(str+' of type is '+ typeof(str)+'<br>');
val bool = Boolean(str); //문자열을 boolean타입으로 형변환
document.write(bool+' of type is' + typeof(bool));
<!--결과값은 true-->
</script>
</head>
<body>
</body>
</html><!--boolean으로 false반환-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>false 반환</title>
<script>
var num = 0;
document.write(num+' of type is'+ typeof(num)+'<br>');
var bool = Boolean(num); <!--불타입 형변환-->
document.write(bool+' of type is ' +typeof(bool));
<!--결과 : false of type is boolean-->
</script>
</head>
<body>
</body>
</html>| 숫자 0은 false를 반환 한다. 숫자 0 / null형 null / undefined형 undefined / 문자열 공백은 boolean형으로 변환하면 false를 반환한다. |
| 현재의 날짜 데이터를 가져오는 방법 : new Date(); |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>날짜를 가져오자</title>
<script>
const Now_DATE = new Date();
document.write(Now_DATE);
</script>
</head>
<body>
</body>
</html>
<!--결과 : Mon Aug 24 2020 14:42:54 GMT+0900(대한민국 표준시) -->요일/월/일자/년도/시간/대한민국 표준시로 출력된다.
| 년도 값 가져오기 : getFullYear(); |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>년도만표시</title>
<script>
const Now_Date = new Date();
document.write(Now_Date.getFullYear());
<!--결과값 : 2020 -->
</script>
</head>
<body>
</body>
</html>| 현재 월 값 가져오기 : getMonth(); |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>이달은 몇월?</title>
<script>
const NOW_DATE = new Date();
document.write(NOW_DATE.getMonth());
<!--현재는 8월인데 결과 값은 7이 나온다.-->
</script>
</head>
<body>
</body>
</html>
<!--결과는 아마 현재 코드를 실행한 월에서 1이 모자란 값이 나온다.
이유는 월은 0부터 숫자를 반환한다. 즉, 1월은 0, 2월은 1, 3월은 2이런식으로 보여준다.
그러므로 월 값을 사용할 때는 +1을 한 값을 사용한다.
-->
<!--현재 달 보여주기-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>몇월?</title>
<script>
const NOW_DATE = new Date();
const NOW_MONTH = NOW_DATE.getMonth()+1;
document.write(NOW_MONTH);
</script>
</head>
<body>
</body>
</html>| 현재 일 값 가져오기 : getDate( ); |
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8"/>
<title>오늘몇일?</title>
<script>
const NOW_DATE=new Date();
document.write(NOW_DATE.getDate());
</script>
</head>
<body>
</body>
</html>| 현재 요일 가져오기 : getDay( ); getDay는 숫자를 반환한다. 일요일부터 토요일 순으로 숫자를 나타낸다. 0부터 시작이며 0 일요일 1 월요일 2 화요일 3 수요일 4 목요일 5 금요일 6 토요일 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>요일을 숫자로 반환</title>
<script>
const NOW_DATE = new Date();
document.write(NOW_DATE.getDay());
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>요일로 직접변환</title>
<script>
const NOW_DATE=new Date();
var nowDay=" ";
switch(NOW_DATE.getDay()){
case 0:
nowDay="일요일";
break;
case 1:
nowDay="월요일";
break;
case 2:
nowDay="화요일";
break;
case 3:
nowDay="수요일";
break;
case 4:
nowDay="목요일";
break;
case 5:
nowDay="금요일";
break;
case 6:
nowDay="토요일";
break;
default :
nowDay="알수 없는 요일";
break;
}
document.write("오늘은" + nowDay);
</script>
</head>
<body>
</body>
</html>| 현재 시 : getHours(); 현재 분 : getMinutes(); 현재 초 : getSeconds(); |
출처 : 에버디벨님의 소중한 지식을 참고하였습니다. 에버디벨 사이트 : https://www.everdevel.com/JavaScript
'JavaScript,JQUERY > JavaScript' 카테고리의 다른 글
| JavaScript 정리5 (0) | 2020.08.25 |
|---|---|
| JavaScript 정리4 (0) | 2020.08.24 |
| JavaScript 정리2 (0) | 2020.08.22 |
| JavaScript 정리1 (0) | 2020.08.22 |
| 자바스크립트 함수 (0) | 2020.08.18 |
Comments