** 동영상으로 공부하고 싶은 분은 아래 주소를 클릭하세요!
https://www.youtube.com/watch?v=2M5s64NLa_A
* 기본내장객체
| 종류 | 설명 |
| String | 문자열 객체 |
| Number | 숫자 객체 |
| Math | 수학 객체 |
| Array | 배열 객체 |
| Date | 날짜시간객체 |
- 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙
1. Number 객체 선언
1) 변수식 선언
## 문법
var 변수명 = 수치;
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Number 객체</title>
<script>
//1. 변수식 선언
var num01 = 100;
document.write(num01 + '<br>');
//typeof(값) : 값(데이터)의 유형을 반환
document.write(typeof(str01));
</script>
</head>
<body>
</body>
</html>
## 코드 결과
2) 생성자 함수를 이용한 객체식 선언
- 기본내장객체는 미리 선언되어 있어 생성자 함수를 통해 호출해서 사용하면 됩니다.
## 문법
var 변수명 = new Number(수치);
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Number 객체</title>
<script>
//2. 객체식 선언
var num02 = new Number(100);
document.write(num02 + '<br>');
//typeof(값) : 값(데이터)의 유형을 반환
document.write(typeof(num02));
</script>
</head>
<body>
</body>
</html>
## 코드결과
3) Number를 이용한 문자열의 숫자변환
## 문법
Number(문자열);
## Number로 바꾸지 않은 더하기 연산
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Number 객체</title>
<script>
//더하기연산
var left = prompt('좌변입력','정수입력');
var right = prompt('우변입력','정수입력');
//prompt함수의 결과값은 문자열
//+ : 숫자가 아닌 것을 더하면 연결연산자로 변경
alert('결과 : ' + (left + right));
</script>
</head>
<body>
</body>
</html>
## Number로 바꾸지 않은 더하기 연산의 결과
## Number로 바꾼 더하기 연산
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Number 객체</title>
<script>
//더하기연산
var left = prompt('좌변입력','정수입력');
var right = prompt('우변입력','정수입력');
//prompt함수의 결과값은 문자열
//+ : 숫자가 아닌 것을 더하면 연결연산자로 변경
//데이터를 새롭게 생성하는 것은 아니므로 new라는 키워드를 붙이지 않음
alert('결과 : ' + (Number(left) + Number(right)));
</script>
</head>
<body>
</body>
</html>
## Number로 바꾼 더하기 연산의 결과
2. Number 객체 속성
- 모든 객체는 속성과 메서드를 갖고 있습니다.
- 물론 경우에 따라 속성만 갖고 있을수도, 메서드만 갖고 있을수도 있습니다.
1) Number객체의 속성의 종류
| 종류 | 설명 |
| MAX_VALUE | 자바스크립트의 숫자가 나타낼 수 있는 최대의 숫자 |
| MIN_VALUE | 자바스크립트의 숫자가 나타낼 수 있는 최소의 숫자 |
| NaN | 자바스크립트의 숫자로 나타낼 수 없는 숫자 |
| POSITIVE_INFINITY | 양의 무한대 숫자 |
| NEGATIVE_INFINITY | 음의 무한대 숫자 |
2) NaN 속성
- NaN(Not a Number)라는 뜻으로 수식의 결과가 숫자가 아니라는 뜻입니다.
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Number 객체</title>
<script>
document.write(10 * '안녕하세요');
</script>
</head>
<body>
</body>
</html>- 위의 코드를 보면 숫자와 문자열을 사칙연산자 중 하나인 곱하기연산자(*)로 계산했습니다.
## 결과
- 결과값이 [NaN]이라는 키워드로 나오는 것을 확인할 수 있습니다.
3. Number 객체 메서드
- 메서드는 많이 있습니다. 표를 통해 전체적으로 정리 후 아래 한개만 예제로 보도록 하겠습니다.
| 메서드 종류 | 설명 |
| toString() | 숫자를 문자열로 반환 |
| toExponential(number) | 숫자를 매개변수인 number를 통해 지수 표시로 바꿔서 문자열로 반환 |
| toFixed(number) | 숫자를 매개변수인 number인 소수자릿수로 변환하여 문자열로 반환 ex) (9.656).toFixed(2) => 9.65 |
| toPrecision(number) | 숫자를 매개변수에 써있는 number만큼만 숫자를 반환 ex) (9.656).toPrecision(2) => 9.6 |
1) toFixed()
- 소수로된 실수를 매개변수만큼 자릿수로 반환하는 함수
## 문법
Number객체.toFixed(소수자릿수);
## 문제
| 사용자에게 국어, 영어, 수학점수를 입력받아 평균을 구하시오. //단, 소수둘째자리까지만 표시 //평균 : XX.XX점 |
## 예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Number 객체</title>
<script>
var kor = prompt('국어점수입력','0~100');
var eng = prompt('영어점수입력','0~100');
var math = prompt('수학점수입력','0~100');
var avg = (Number(kor) + Number(eng) + Number(math)) / 3;
alert('평균 : ' + avg.toFixed(2) + '점');
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- 소수 둘째자리까지만 반환되는 것을 확인할 수 있습니다.
4. Math 객체
- Math객체는 수학객체로 기본내장객체 중 유일하게 new 키워드를 사용해 생성하지 않습니다.
- 실제 숫자를 갖고 있는 속성과 메서드를 통해서 수학적 처리를 하도록 도와줍니다.
1) Math객체의 속성
- 모든 객체는 속성과 메서드를 갖고 있습니다.
- 물론 경우에 따라 속성만 갖고 있을수도, 메서드만 갖고 있을수도 있습니다.
- Math객체 속성의 종류를 표로 확인해보도록 하겠습니다.
| 속성 종류 | 설명 |
| Math.E | 오일러의 수인 자연상수 e를 반환 |
| Math.PI | 원주율 반환 |
| Math.SQRT2 | 2의 제곱근을 반환 |
| Math.SQRT1_2 | 1/2의 제곱근을 반환 |
| Math.LN2 | 2의 자연 로그를 반환 |
| Math.LN10 | 10의 자연 로그를 반환 |
| Math.LOG2E | E의 밑이 2 인 로그를 반환 |
| Math.LOG10E | E의 밑이 10 인 로그를 반환 |
## 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Math 객체</title>
<script>
document.write(Math.PI);
</script>
</head>
<body>
</body>
</html>
## 코드 결과
2) Math객체의 메서드
- 메서드는 많이 있습니다. 표를 통해 전체적으로 정리 후 아래 몇개만 예제로 보도록 하겠습니다.
| 메서드 종류 | 설명 |
| Math.abs(x) | x의 절대값을 반환 |
| Math.ceil(x) | x보다 크거나 같은 가장 작은 정수를 반환(올림) |
| Math.cos(x) | x의 코사인 값을 반환 |
| Math.exp(x) | 자연 로그의 x제곱을 반환 |
| Math.floor(x) | x보다 작거나 같은 가장 큰 정수를 반환(내림) |
| Math.log(x) | x의 로그 값을 반환 |
| Math.max(x,y,z,...) | 매개변수 중 가장 큰 값을 반환 |
| Math.min(x,y,z,...) | 매개변수 중 가장 작은 값을 반환 |
| Math.pow(x,y) | x의 y제곱을 반환 |
| Math.random() | 0부터 1미만의 임의의 수를 반환 |
| Math.round(x) | x를 반올림하여 반환 |
| Math.sin(x) | x의 사인값을 반환 |
| Math.sqrt(x) | x의 제곱근을 반환 |
| Math.tan(x) | x의 탄젠트 값을 반환 |
## 실수를 정수로 반환하는 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Math 객체</title>
<script>
var num = 32.6;
document.write('반올림 : ' + Math.round(num) + '<br>');
document.write('내림 : ' + Math.floor(num) + '<br>');
document.write('올림 : ' + Math.ceil(num) + '<br>');
</script>
</head>
<body>
</body>
</html>
## 실수를 정수로 반환하는 결과
- 소수자리가 5이상이기 때문에 반올림도 숫자가 올라간 상태로 정수로 반환합니다.
## random()을 이용한 1~10사이의 랜덤한 숫자 반환 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Math 객체</title>
<script>
var num = Math.floor(Math.random() * 10) + 1;
alert(num);
</script>
</head>
<body>
</body>
</html>- random() 메서드는 0~1 미만사이의 숫자가 나오기때문에 어떤 숫자를 곱해도 0으로 처리됩니다.
- 그래서 마지막에 더하기 1을 해줘야 마지막 원하는 숫자가 나옵니다.
- 그리고 소수자리로 나올 것이므로 내림처리해서 정수로 반환하기 위해 floor()메서드를 사용했습니다.
## random()을 이용한 1~10사이의 랜덤한 숫자 반환 코드 결과
- 1~10사이 숫자만 반환되는 것을 확인할 수 있습니다.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 13강 자바스크립트 로또 자동만들기 - 오쌤의 니가스터디 (8) | 2021.06.04 |
|---|---|
| [JS강좌] 12강 자바스크립트 기본내장객체 - Array - 오쌤의 니가스터디 (2) | 2020.12.19 |
| [JS강좌] 10강 자바스크립트 기본내장객체 - String (0) | 2020.12.01 |
| [JS강좌] 9강 자바스크립트 객체와 생성자함수 - 오쌤의 니가스터디 (0) | 2020.11.30 |
| [JS강좌] 8강 자바스크립트 내장함수 - 오쌤의 니가스터디 (2) | 2020.11.29 |
