JavaScript 숫자와 날짜: 완벽 가이드

01. JavaScript 숫자

1) 숫자 리터럴의 종류

십진수: 일반적으로 사용하는 숫자 형태입니다.
```
let decimal = 42;
console.log(decimal);  // 출력: 42
```

이진수: 0b 또는 0B로 시작합니다.

let binary = 0b1010;
console.log(binary);  // 출력: 10

8진수: 0o 또는 0O로 시작합니다.

let octal = 0o755;
console.log(octal);  // 출력: 493

16진수: 0x 또는 0X로 시작합니다.

let hex = 0xFF;
console.log(hex);  // 출력: 255

2) 숫자 객체 (Number)의 주요 속성 및 메서드

Number.MAX_VALUE: 표현 가능한 가장 큰 양수

console.log(Number.MAX_VALUE);  // 출력: 1.7976931348623157e+308

Number.MIN_VALUE: 표현 가능한 가장 작은 양수
```
console.log(Number.MIN_VALUE);  // 출력: 5e-324
```

Number.NaN: "숫자가 아님" 값

console.log(Number.NaN);  // 출력: NaN

Number.POSITIVE_INFINITY: 양의 무한대

console.log(Number.POSITIVE_INFINITY);  // 출력: Infinity

Number.NEGATIVE_INFINITY: 음의 무한대

console.log(Number.NEGATIVE_INFINITY);  // 출력: -Infinity

주요 메서드

Number.parseFloat(): 문자열을 부동 소수점 숫자로 변환

let floatNum = Number.parseFloat("3.14");
console.log(floatNum);  // 출력: 3.14

Number.parseInt(): 문자열을 정수로 변환

let intNum = Number.parseInt("42");
console.log(intNum);  // 출력: 42

3) Math 객체와 수학적 연산

Math.PI: 원주율 상수

console.log(Math.PI);  // 출력: 3.141592653589793

Math.abs(): 절대값을 반환

let absolute = Math.abs(-5);
console.log(absolute);  // 출력: 5

Math.sin(): 사인 값을 반환

let sine = Math.sin(Math.PI / 2);
console.log(sine);  // 출력: 1

기타 유용한 메서드

Math.cos(): 코사인 값을 반환

let cosine = Math.cos(0);
console.log(cosine);  // 출력: 1

Math.tan(): 탄젠트 값을 반환

let tangent = Math.tan(Math.PI / 4);
console.log(tangent);  // 출력: 1

Math.sqrt(): 제곱근을 반환

let sqrt = Math.sqrt(16);
console.log(sqrt);  // 출력: 4

Math.pow(): 제곱 값을 반환

let power = Math.pow(2, 3);
console.log(power);  // 출력: 8

02. JavaScript 날짜

1) Date 객체 생성 및 사용법

현재 날짜와 시간 가져오기

const now = new Date();
console.log(now);  // 현재 날짜와 시간이 출력됩니다.

특정 날짜와 시간 설정

const specificDate = new Date('2024-07-01');
console.log(specificDate);  // 출력: Mon Jul 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

년, 월, 일, 시, 분, 초 설정

const customDate = new Date(2024, 6, 1, 10, 30, 0);
console.log(customDate);  // 출력: Mon Jul 01 2024 10:30:00 GMT+0000 (Coordinated Universal Time)

2) Date 객체의 주요 메서드

get 메서드: 특정한 날짜와 시간 정보를 가져올 때 사용됩니다.

getFullYear(): 연도를 반환합니다.

const year = now.getFullYear();
console.log(year);  // 출력: 현재 연도

getMonth(): 월을 반환합니다(0부터 11까지, 0이 1월).

const month = now.getMonth();
console.log(month);  // 출력: 현재 월 (0부터 시작)

getDate(): 일을 반환합니다.

const date = now.getDate();
console.log(date);  // 출력: 현재 날짜

set 메서드: Date 객체의 특정 날짜와 시간을 설정할 때 사용됩니다.
- setFullYear(): 연도를 설정합니다.
```
now.setFullYear(2025);
console.log(now);  // 연도가 2025로 설정됩니다.
```
- setMonth(): 월을 설정합니다(0부터 11까지).
```
now.setMonth(11);  // 12월로 설정
console.log(now);
```
- setDate(): 일을 설정합니다.
```
now.setDate(25);  // 일을 25로 설정
console.log(now);
```

to 메서드: Date 객체를 문자열로 변환합니다.

toDateString(): 날짜 부분만 문자열로 반환합니다.

const dateString = now.toDateString();
console.log(dateString);  // 출력: 'Mon Jul 01 2024'

toTimeString(): 시간 부분만 문자열로 반환합니다.

const timeString = now.toTimeString();
console.log(timeString);  // 출력: '10:30:00 GMT+0000 (Coordinated Universal Time)'

3) 날짜와 시간 계산 예제

두 날짜 간의 차이 계산

const startDate = new Date('2024-01-01');
const endDate = new Date('2024-12-31');
const diffTime = Math.abs(endDate - startDate);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
console.log(diffDays);  // 출력: 365

특정 날짜 설정 및 비교

const birthday = new Date('1995-12-25');
const today = new Date();

if (today > birthday) {
  console.log('오늘은 생일이 지났습니다.');
} else if (today < birthday) {
  console.log('오늘은 생일이 아닙니다.');
} else {
  console.log('오늘은 생일입니다!');
}

03. 숫자와 날짜를 다루는 실용적인 예제

1) 디지털 시계 구현

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>디지털 시계</title>
  <style>
    .clock {
      font-size: 2em;
      font-family: 'Courier New', Courier, monospace;
      text-align: center;
      margin-top: 20%;
    }
  </style>
</head>
<body>
  <div class="clock" id="clock"></div>
  <script>
    function updateClock() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
    }

    setInterval(updateClock, 1000);
    updateClock(); // 페이지 로드 시 즉시 시계를 업데이트
  </script>
</body>
</html>

2) 날짜 형식 변환

function formatDate(dateStr) {
  const date = new Date(dateStr);
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 1을 더합니다.
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
}

const formattedDate = formatDate('2024-07-01');
console.log(formattedDate); // 출력: 01/07/2024

3) Math 객체를 사용한 계산 예제

삼각 함수 계산

const angle = Math.PI / 4; // 45도
const sinValue = Math.sin(angle);
const cosValue = Math.cos(angle);
console.log(`sin(45°) = ${sinValue}`); // 출력: sin(45°) = 0.7071067811865475
console.log(`cos(45°) = ${cosValue}`); // 출력: cos(45°) = 0.7071067811865475

제곱근 계산

const number = 16;
const sqrtValue = Math.sqrt(number);
console.log(`sqrt(${number}) = ${sqrtValue}`); // 출력: sqrt(16) = 4

최대값과 최소값 계산

const values = [3, 7, 2, 8, 5];
const maxValue = Math.max(...values);
const minValue = Math.min(...values);
console.log(`max = ${maxValue}`); // 출력: max = 8
console.log(`min = ${minValue}`); // 출력: min = 2

랜덤 숫자 생성

const randomValue = Math.random(); // 0과 1 사이의 난수 생성
console.log(`random value = ${randomValue}`);

관련된 다른 글도 읽어보시길 추천합니다

2024.07.10 - [Study] - 11. JavaScript 반복문 완벽 가이드 | 웹 개발 기초

11. JavaScript 반복문 완벽 가이드 | 웹 개발 기초

JavaScript 반복문: for, while, do...while, for...in, for...of 문과 break, continue 사용법 1. 서론1.1 JavaScript에서 반복문의 중요성반복문은 JavaScript에서 필수적인 기능으로, 동일한 작업을 여러 번 수행할 때 사

guguuu.com

2024.07.05 - [Study] - 10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

JavaScript 연산자와 조건문 이해하기 01. 서론1) JavaScript의 중요성JavaScript는 웹 개발에서 핵심적인 역할을 하는 프로그래밍 언어입니다. 클라이언트 측 스크립트로 작동하며, HTML과 CSS와 함께 웹

guguuu.com

2024.07.05 - [Study] - 09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

JavaScript 변수 선언 및 데이터 타입 이해하기 01. 변수 선언: var, let, const1) var: 함수 스코프를 가지며 재선언과 재할당이 가능합니다.var greeting = "Hello";var greeting = "Hi"; // 재선언 가능greeting = "Hey"; /

guguuu.com

읽어주셔서 감사합니다

공감은 힘이 됩니다

저작자표시 비영리 변경금지

'Study' 카테고리의 다른 글

16. JavaScript 정규 표현식 완벽 가이드 \| 웹 개발 기초 (0)	2024.07.16
15. JavaScript 텍스트 포맷팅 \| 웹 개발 기초 (0)	2024.07.15
13. JavaScript 표현식과 연산자 \| 웹 개발 기초 (0)	2024.07.13
12. JavaScript 함수의 모든 것 \| 웹 개발 기초 (0)	2024.07.12
11. JavaScript 반복문 완벽 가이드 \| 웹 개발 기초 (0)	2024.07.11

구구 구구

14. JavaScript 숫자와 날짜 | 웹 개발 기초

JavaScript 숫자와 날짜: 완벽 가이드

01. JavaScript 숫자

1) 숫자 리터럴의 종류

2) 숫자 객체 (Number)의 주요 속성 및 메서드

주요 메서드

3) Math 객체와 수학적 연산

기타 유용한 메서드

02. JavaScript 날짜

1) Date 객체 생성 및 사용법

2) Date 객체의 주요 메서드

3) 날짜와 시간 계산 예제

03. 숫자와 날짜를 다루는 실용적인 예제

1) 디지털 시계 구현

2) 날짜 형식 변환

3) Math 객체를 사용한 계산 예제

'Study' 카테고리의 다른 글

티스토리툴바

14. JavaScript 숫자와 날짜 | 웹 개발 기초

JavaScript 숫자와 날짜: 완벽 가이드

01. JavaScript 숫자

1) 숫자 리터럴의 종류

2) 숫자 객체 (Number)의 주요 속성 및 메서드

주요 메서드

3) Math 객체와 수학적 연산

기타 유용한 메서드

02. JavaScript 날짜

1) Date 객체 생성 및 사용법

2) Date 객체의 주요 메서드

3) 날짜와 시간 계산 예제

03. 숫자와 날짜를 다루는 실용적인 예제

1) 디지털 시계 구현

2) 날짜 형식 변환

3) Math 객체를 사용한 계산 예제

'Study' 카테고리의 다른 글

관련글

티스토리툴바