728x90
반응형
1. 내장 객체 Date
◎ Date 객체 인스턴스 만들기
// Date 객체로 현재 날짜 나타내기
new Date();
// Date 객체로 특정 날짜 나타내기
new Date("2020-02-25")
// Date 객체로 특정 날짜와 시간 나타내기
new Date("2020-02-25T18:00:00")
//날짜와 시간 입력 방식
// 1) YYYY-MM-DD 형식
new Date("2020-02-25")
// 2) YYYY-MM-DDTHH 형식
new Date("2020-02-25T18:00:00")
// 3) MM/DD/YYYY 형식
new Date("02/25/2020")
// 4) 이름 형식
new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)")
◎ Date 객체의 메서드
| No | 구분 | 설명 | |
| 1 | 날짜, 시간 정보 가져오기 |
getFullYear() | 연도를 4자리 숫자로 표시합니다. |
| 2 | getMonth() | 0~11의 숫자로 월을 표시합니다. 0부터 1월이고 11은 12월 입니다. | |
| 3 | getDate() | 1~31 사이의 숫자로 일을 표시합니다. | |
| 4 | getDay() | 0~6의 숫자로 요일을 표시합니다. 0부터 일요일, 6은 토요일 입니다. | |
| 5 | getTime() | 1970년 1월 1일 자정 이후 시간을 밀리 초(1/1000초)로 표시합니다. | |
| 6 | getHours() | 0~23 사이의 숫자로 시를 표시합니다. | |
| 7 | getMinutes() | 0~59 사이의 숫자로 분을 표시합니다. | |
| 8 | getSeconds() | 0~59 사이의 숫자로 초를 표시합니다. | |
| 9 | getMilliseconds() | 0~999 사이의 숫자로 밀리초를 표시합니다. | |
| 10 | 날짜, 시간 설정하기 |
setFullYear() | 연도를 4자리 숫자로 설정합니다. |
| 11 | setMonth() | 0~11의 숫자로 월을 설정합니다. 0부터 1월이고 11은 12월 입니다. | |
| 12 | setDate() | 1~31 사이의 숫자로 일을 표시합니다. | |
| 13 | setTime() | 1970년 1월 1일 자정 이후 시간을 밀리 초(1/1000초)로 표시합니다. | |
| 14 | setHours() | 0~23 사이의 숫자로 시를 설정합니다. | |
| 15 | setMinutes() | 0~59 사이의 숫자로 분을 설정합니다. | |
| 16 | setSeconds() | 0~59 사이의 숫자로 초를 설정합니다. | |
| 17 | setMilliseconds() | 0~999 사이의 숫자로 밀리초를 설정합니다. | |
| 18 | 날짜, 시간 형식 바꾸기 |
toLocaleString() | 현재 날짜와 시간을 현지 시간(local time)으로 표시합니다. |
| 19 | toString() | Date 객체 타입을 문자열로 표시합니다. | |
◎ 날짜 계산 프로그램 만들기 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독서 챌린지</title>
<style>
#container{
margin:50px auto;
width:300px;
height:300px;
border-radius:50%;
border:2px double #222;
background-color:#d8f0fc;
text-align: center;
}
h1 {
margin-top:80px;
}
.accent {
font-size:1.8em;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<div id="container">
<h1>책 읽기</h1>
<p><span class="accent" id="result"></span>일 연속으로 <br> 책 읽기를 달성했군요.</p>
<p>축하합니다!</p>
</div>
<script>
var now = new Date("2022-12-16"); // 오늘 날짜
var firstDay = new Date("2022-12-01"); // 책을 읽기 시작한 날짜
// getTime() : 1970년 1월 1일 부터 특정한 날짜까지 시간을 밀리초 단위로 표시
var toNow = now.getTime(); // 오늘까지 지난시간(밀리초)
var toFirst = firstDay.getTime(); // 책을 읽기 시작한 날짜까지 지난 시간(밀리초)
var passedTime = toNow - toFirst; // 첫날부터 오늘까지의 지난 시간(밀리초)
passedTime = Math.round(passedTime/(1000*60*60*24));
//밀리초 초 분 시 : 하루에 대한 밀리초
document.querySelector('#result').innerText = passedTime;
</script>
</body>
</html>
아래와 같은 결과가 출력됩니다.
2. 내장 객체 Math
◎ Math 객체 특징
▷ 수학 관련 메서드가 많이 포함되어 있습니다. 하지만 수학식에서만 사용하는 것은 아닙니다.
▷ 무작위 수, 반올림 등이 필요한 프로그램에서 사용합니다.
▷ 인스턴스를 만들지 않고 프로퍼티와 메서드를 사용합니다.
◎ Math 객체의 프로퍼티
| No | 종류 | 설명 |
| 1 | E | 오일러 상수 |
| 2 | PI | 원주율(n) (약 3.14159) |
| 3 | SQRT2 | 루트 2 (약 1.41421) |
| 4 | SQRT1_2 | 1/루트2 (약 0.707107) |
| 5 | LN2 | ln2(로그 e의 2) (약 0.693147) |
| 6 | LN10 | ln10(로그 e의 10) (약 2.302585) |
| 7 | LOG2E | 로그2의 e (약 1.442695) |
| 8 | LOG10E | 로그10의 e (약 0.434294) |
◎ Math 객체의 메서드
| No | 종류 | 설명 |
| 1 | abs() ＊ | 절댓값을 반환합니다. |
| 2 | acos() | 아크 코사인(arc cos) 값을 반환합니다. |
| 3 | asin() | 아크 사인(arc sin) 값을 반환합니다. |
| 4 | atan() | 아크 탄젠트(arc tan) 값을 반환합니다. |
| 5 | atan2() | 아크 탄젠트(arc tan) 값을 반환합니다. |
| 6 | ceil()＊ | 매개변수의 소수점 이하 부분을 올립니다. |
| 7 | cos() | 코사인(cos) 값을 반환합니다. |
| 8 | exp() | 지수 함수를 나타냅니다. |
| 9 | floor()＊ | 매개변수의 소수점 이하 부분을 버립니다. |
| 10 | log() | 매개변수에 대한 로그(log) 값을 반환합니다. |
| 11 | max()＊ | 매개변수 중 최댓값을 반환합니다. |
| 12 | min()＊ | 매개변수 중 최솟값을 반환합니다. |
| 13 | pow() | 매개변수의 지수 값을 반환합니다. |
| 14 | random()＊ | 0과 1 사이의 무작위 수를 반환합니다. |
| 15 | round()＊ | 매개변수의 소수점 이하 부분을 반올림합니다. |
| 16 | sin() | 사인(sin) 값을 반환합니다. |
| 17 | sqrt() | 매개변수에 대한 제곱근을 반환합니다. |
| 18 | tan() | 탄젠트(tan) 값을 반환합니다. |
＊는 자주 사용하는 함수들을 따로 표기해두었습니다.
◎ Math 메서드를 이용한 당첨자 추첨 프로그램 만들기 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>당첨자 발표</title>
<style>
h1 {
border:1px solid black;
padding:10px;
text-align:center;
background:#eee;
}
</style>
</head>
<body>
<h1>당첨자 발표</h1>
<script>
var seed = prompt("전체 응모자 수 : "); // 응모자 수 입력
var picked = Math.floor((Math.random() * seed) + 1); // 무작위 당첨자 뽑기
document.write("전체 응모자 수 : " + seed + "명");
document.write("<br>");
document.write("당첨자 : " + picked + "번");
</script>
</body>
</html>전체 응모자 수 : 15명
당첨자 : 14번
결과 예시는 위와 같습니다. 전체 응모자수를 제가 입력하면 당첨자 번호가 랜덤으로 지정됩니다.
자바 스크립트를 공부하면서 느낀점은 내장 객체들을 잘 이용해 원하는 결과를 도출하는 것이 핵심이라고 생각했습니다. 여러 예제들은 다음 시간에 다뤄보도록 하겠습니다!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] 문서 객체 모델(DOM) (0) | 2022.12.19 |
|---|---|
| [java script] 브라우저 관련 객체(window, navigator, location) (0) | 2022.12.17 |
| [java script] 객체 1(object, 내장 객체 Array) (0) | 2022.12.16 |
| [java script] 자바 스크립트 함수 2(function) (0) | 2022.12.16 |
| [java script] 자바 스크립트 함수 1(function) (0) | 2022.12.15 |
