[js] 6. 자바스크립트 표준내장객체 (클래스함수) Number|String|Date|Math|JSON

자바스크립트 표준 내장 객체

• 자바스크립트에서 기본으로 내장된 객체
• 스코프의 위치 따지지 않고 모든 영역에서 공통으로 사용 가능
• JavaScript 사전 - 생활코딩

JavaScript 사전 - 생활코딩

 

 

 

1. Number클래스 함수

25_Number.html

• 숫자값이 저장된 객체를 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공
• 자바의 Integer클래스 Double 클래스와 비슷

1) 사용방법1. Number 객체생성 후 요소 사용

Number 객체 생성

//매개변수에 전달된 숫자값이 저장된 Number 객체를 생성하여 변수에 저장
var num = new Number(100);
//전달된 문자값을 숫자값으로 변환하여 Number 객체에 저장
var num = new Number("100");
alert("변수의 자료형 = "+typeof(num)); //변수의 자료형 = object
//Number라는 클래스함수로 만들어진 객체(object)의 자료형이 저장되어있어요~

 

Number객체의 요소(프로퍼티와 메소드) 사용

//1.
//🖤Number.toString() : Number 객체에 저장된 숫자값을 문자값으로 변환하여 반환하는 메소드
alert("num.toString() = " + num.toString());
//num.toString() = 100
//Number 객체가 저장된 객체변수를 출력할 경우 자동으로 toStrin() 메소드 호출
alert("num = " + num);//num = 100


//2.
//🖤Number.toString(radix) : Number 객체에 저장된 숫자값을
//원하는 진수형태의 문자값으로 변환하여 반환하는 메소드
alert("num.toString(2) = " + num.toString(2));
//num.toString(2) = 1100100
alert("num.toString(8) = " + num.toString(8));
//num.toString(8) = 144
alert("num.toString(16) = " + num.toString(16));
//num.toString(16) = 64


//3.
//🖤Number.valueOf() : Number 객체에 저장된 "숫자값"을 반환하는 메소드
var su=num.valueOf();
alert("변수의 자료형 = "+typeof(su));
//변수의 자료형 = number
alert("su = "+su);
//su = 100

//su의 자료형은 number이기 때문에 원래는 Number객체(object 자료형)가 제공해주는 메소드를 사용 못함
//하지만 내부적으로 number자료형은 Number객체처럼 처리함
//=>Number객체의 메소드 사용 가능
//=>하지만 확실히 객체는 아니기 때문에 요소 추가,삭제,변경 불가능

//자바스크립트는 모든 값을 객체로 처리
//=> number 자료형의 변수에 저장된 값은 내부적으로 Number 객체로 처리
//=> number 자료형의 변수는 Number 클래스 함수의 프로퍼티와 메소드 사용 가능
alert("su.toString(2) = "+su.toString(2));
//su.toString(2) = 1100100


//4.
//🖤Number.toFixed(digits) : Number 객체에 저장된 숫자값에서 매개변수로 전달받은 소숫점 자릿수(0~20)까지
//"잘라내어" 문자값으로 변환하여 반환하는 메소드 - 자릿수 위의 값을 이용하여 반올림 처리
var num = 12.3456789;
alert("num = "+num); //num = 12.3456789
alert("num.toFixed(0) = "+num.toFixed(0));
//num.toFixed(0) = 12 : 소숫점 0번째 자리까지 끊어주세요.
alert("num.toFixed(1) = "+num.toFixed(1));
//num.toFixed(1) = 12.3 : 소숫점 1번째 자리까지 끊어주세요.
alert("num.toFixed(2) = "+num.toFixed(2));
//num.toFixed(2) = 12.35 : 소숫점 2번째 자리까지 끊어주세요.


//5.
//🖤Number.MAX_VALUE
alert("자바스크립트에서 표현 가능한 최대 숫자값 = "+Number.MAX_VALUE);
//자바스크립트에서 표현 가능한 최대 숫자값 = 1.7976931348623157e+308

//6.
//🖤Number.MIN_VALUE
alert("자바스크립트에서 표현 가능한 최소 숫자값 = "+Number.MIN_VALUE);
//자바스크립트에서 표현 가능한 최소 숫자값 = 5e-324

 

Number 객체와 number자료형의 차이

//🖤Number객체 
//1. 객체를 생성하면 Number객체의 요소 추가,삭제,변경 가능
//2.
var num = new Number(100);
//Number 객체에 요소 추가
num.display = function() {
	alert("Number 객체의 display 메소드 호출");
}
num.display();
//Number 객체의 display 메소드 호출


//🖤number자료형
//1. 객체를 생성하면 Number객체의 요소 추가,삭제,변경 불가능
//2.
//number 자료형의 변수에는 객체의 요소 추가 불가능 - 에러 발생
var num = 100;
num.display = function() {
	alert("Number 객체의 display 메소드 호출");
}
num.display(); //error

2) 사용방법2. 강제형변환 함수

//🖤Number(string) : 문자값을 전달받아 숫자값으로 변환하여 반환하는 함수 - NaN 발생 가능
var num = "100";
alert("변수의 자료형 = "+typeof(num)); //변수의 자료형 = string
alert("결과 = "+(num+200)); //결과 = 100200
alert("결과 = "+(Number(num)+200)); //결과 = 300

 

 

 

 

 

2. String클래스 함수

26_String.html

• 문자값이 저장된 객체를 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공
• 반환값이 없는 객체 메서드는 연속 호출이 가능함
• str.trim().toUpperCase();
• 자바의 String클래스와 비슷

String 객체 생성

//매개변수에 전달된 문자값이 저장된 String 객체를 생성하여 변수에 저장
var text = new String("Hello, JavaScript!!!");

alert("변수의 자료형 = "+typeof(text)); //변수의 자료형 = object
//String이라는 클래스함수로 만들어진 객체(object)의 자료형이 저장되어있어요~

 

String객체의 요소(프로퍼티와 메소드) 사용

//1.
//🖤String.toString() : String 객체에 저장된 문자값을 반환하는 메소드
alert("text.toString() = "+ text.toString());
//text.toString() = Hello, JavaScript!!!
alert("text = "+ text);
//text = Hello, JavaScript!!!


//2.
//🖤String.length : String 객체에 저장된 문자값의 문자 갯수를 저장한 프로퍼티
alert("text.length = "+ text.length);
//text.length = 20


//3.
//🖤String.charAt(index) : String객체에 
//저장된 문자값에서 첨자(Index) 위치의 하나의 문자값을 반환하는 메소드
alert("text.charAt(7) = "+ text.charAt(7));
//text.charAt(7) = J
//문자값은 내부적으로 배열(Array객체)로 처리되므로[]연산자에
//첨자를 사용하여 하나의 문자값을 요소로 표현 가능
alert("text[7] = "+ text[7]);
//text[7] = J


//4.
//🖤String.indexOf(String) : String객체에 저장된 문자값에서 매개변수에 전달된 문자값을 
//검색하여 시작첨자(Index)를 반환하는 메소드 , 검색 문자값이 없는 경우 : -1반환
alert("text.indexOf('Script') = "+ text.indexOf('Script'));
//text.indexOf('Script') = 11
alert("text.indexOf('script') = "+ text.indexOf('script'));
//text.indexOf('script') = -1


//5.
//🖤String.replace(search, replace) : String객체에 저장된 
//문자값에서 매개변수에 전달된 첫번째 문자값을 검색하여 두번째 문자값으로 변환하여 반환하는 메소드
alert("text.replace('Hello', 'Hi') = "+ text.replace('Hello', 'Hi'));
//text.replace('Hello', 'Hi') = Hi, JavaScript!!!


//6.
//🖤String.toUpperCase() : String객체에 저장된 문자값을 대문자로 변환하여 반환하는 메소드
alert("text.toUpperCase() = "+ text.toUpperCase());
//text.toUpperCase() = HELLO, JAVASCRIPT!!!


//7.
//🖤String.toLowerCase() : String객체에 저장된 문자값을 소문자로 변환하여 반환하는 메소드
alert("text.toLowerCase() = "+ text.toLowerCase());
//text.toLowerCase() = hello, javascript!!!


//8.
//🖤String.substring(from, to) : String객체에 저장된 문자값에서
//시작첨자(from - 포함)부터 종료첨자(to - 미포함) 범위의 문자값을 잘라내어 반환하는 메소드
alert("text.substring(7, 11) = "+ text.substring(7, 11));
//text.substring(7, 11) = Java


//9.
//🖤String.substr(from, length) : String객체에 저장된 문자값에서 
//시작첨자(from)부터 원하는 갯수(length) 범위의 문자값을 잘라내어 반환하는 메소드
alert("text.substr(7,4) = "+ text.substr(7,4));
//text.substr(7,4) = Java


//10.
//🖤String.split(pattern) : String 객체에 저장된 문자값을 패턴문자(정규표현식)로 
//분리하여 분리된 문자값들이 요소로 저장된 Array 객체로 반환하는 메소드
var [string1, string2] = text.split(" ");
//Array 객체의 요소를 구조 분해 할당하여 저장
alert(string1 + " >> " + string2);
//Hello, >> JavaScript!!!

 

string자료형도 String객체의 메소드 사용 가능

var text="ABCDEFG";
alert("변수의 자료형 = "+typeof(text));
//변수의 자료형 = string

//string 자료형의 변수에 저장된 값은 내부적으로 String 객체로 처리
// => String 자료형의 변수로 String 클래스 함수의 프로퍼티와 메소드 사용 가능
alert("text.length = "+text.length);
//text.length = 7

 

 

 

 

 

3. Date클래스 함수

27_Date.html

• 날짜와 시간이 저장된 객체를 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공
• 자바의 Date & Calendar 클래스와 비슷
• 자바스크립트는 클래스 개념이 없음
• 대신 다양한 라이브러리 사용함 (자바스크립트를 제공해주는 라이브러리 매우많음)
• 예를들어, Calendar 라이브러리로 달력 만들 수 있음

Date 객체 생성 - 매개변수없는

//클라이언트 플랫폼(실행환경) : 운영체제OS
//클라이언트 플랫폼(OS)의 현재 날짜와 시간이 저장된 Date 객체를 생성하여 변수에 저장
var now = new Date();

 

Date객체의 요소(프로퍼티와 메소드) 사용

//1.
//🖤Date.toString() : Date 객체에 저장된 날짜와 시간을 문자값으로 변환하여 반환하는 메소드
alert("now.toString() = " +now.toString());
//now.toString() = Fri Nov 18 2022 16:09:57 GMT+0900 (한국 표준시)

alert("now = " +now);
//now = Fri Nov 18 2022 16:10:43 GMT+0900 (한국 표준시)


//2.
//🖤Date.toLocaleString() : Date 객체에 저장된 
//날짜와 시간을 클라이언트 플랫폼에 맞는 패턴의 문자값으로 변환하여 반환하는 메소드
alert("now.toLocaleString() = " +now.toLocaleString());
//now.toLocaleString() = 2022. 11. 18. 오후 4:12:33
alert("now.toLocaleTimeString() = " +now.toLocaleTimeString());
//now.toLocaleTimeString() = 오후 4:13:40

//3.
//🖤Date.getXXX( ) : Date 객체에 저장된 날짜와 시간 중 원하는 값을 반환하는 메소드
var day = ["일","월","화","수","목","금","토"];
var today = now.getFullYear()+"년 "
		+(now.getMonth()+1)+"월 "
		+now.getDate()+"일 "
		+day[now.getDay()]+"요일";
alert("today = "+today);
//today = 2022년 11월 18일 금요일

 

Date 객체 생성 - 매개변수있는

//매개변수에 특정 날짜와 시간정보를 전달하여 Date 객체 생성 가능
var birthday = new Date(2000,0,1);
//=> "2000년 01월 01일 00시 00분 00초"가 저장

 

Date객체의 요소(프로퍼티와 메소드) 사용

//4.
//🖤Date.getTime() : Date 객체에 저장된
//날짜와 시간에 대한 초단위시간(ms - TimeStamp 타임스탬프)을 반환하는 메소드
var interval = (now.getTime() - birthday.getTime()) / (1000*24*60*60);
alert("당신이 오늘까지 살아온 날짜는 "+interval+"일 입니다.");
//당신이 오늘까지 살아온 날짜는 8357.682274872685일 입니다.
alert("당신이 오늘까지 살아온 날짜는 "+Math.ceil(interval)+"일 입니다.");
//당신이 오늘까지 살아온 날짜는 8358일 입니다.

 

 

 

 

 

 

4. Math클래스 함수

28_Math.html

• 수학에 관련된 프로퍼티와 메소드를 제공하는 클래스 함수
• 자바의 Math 클래스와 비슷
• 객체를 생성하지 않고 사용 - 즉, static 키워드를 통해 만들어진 정적프로퍼티와 메소드 가짐

class A {
	static NUM = 10;
}
A.NUM = 30;
alert("A.NUM = "+A.NUM);
//A.NUM = 30

 

Math클래스의 요소(프로퍼티와 메소드) 사용 - 객체 생성 없이 사용 가능

//1.
//🖤Math.PI : 원주율을 저장한 프로퍼티
alert("Math.PI = "+Math.PI); //Math.PI = 3.141592653589793


//2.
//🖤Math.ceil(number) : 매개변수로 전달받은
//숫자값의 소숫점 자리에 값이 있는 경우 올림 처리된 정수값으로 반환하는 메소드
alert("Math.ceil(12.1) = "+ Math.ceil(12.1));
//Math.ceil(12.1) = 13


//3.
//🖤Math.floor(number) : 매개변수로 전달받은 
//숫자값의 소숫점 자리에 값이 있는 경우 버림 처리된 정수값으로 반환하는 메소드
//parseInt() 함수와 비슷함 : 문자값도 숫자값으로 변환되어 무조건 정수값으로 처리(버림처리)
alert("Math.floor(12.1) = "+ Math.floor(12.1));
//Math.floor(12.1) = 12


//4.
//🖤Math.round(number) : 매개변수로 전달받은
//숫자값의 소숫점 자리에 값이 있는 경우 반올림 처리된 정수값으로 반환하는 메소드
alert("Math.round(12.4) = "+ Math.round(12.4));
//Math.round(12.4) = 12
alert("Math.round(12.5) = "+ Math.round(12.5));
//Math.round(12.5) = 13


//5.
//🖤Math.pow(number,number) : 매개변수로 전달받은 숫자값에 대한 제곱근을 계산하여 반환하는 메소드
alert("Math.pow(3,5) = "+ Math.pow(3,5));
//Math.pow(3,5) = 243 : 3의 5승


//6.
//🖤Math.random() : 난수값(0.0<= X < 1.0)을 반환하는 메소드
alert("Math.random() = "+ Math.random());
//Math.random() = 0.11135659874615023
//정수값의 난수를 반환받기 위해 parseInt() 함수 사용 권장
// 0 ~ 99 범위의 난수 발생
alert("난수값 = "+ parseInt(Math.random() * 100));
// 0 ~ 49 범위의 난수 발생
alert("난수값 = "+ parseInt(Math.random()* 50));

 

 

 

 

 

 

 

5. JSON클래스 함수

29_JSON.html

• JSON에 관련된 프로퍼티와 메소드를 제공하는 클래스 함수
• JSON 형식으로 응답받기!
• REST : 요즘에는 처리결과를 웹문서로 만드는 것이 아닌, XML이나 JSON 형식으로 만들어서 응답함

Object 객체 생성 : student

//JSON 기능을 사용하여 Object 객체를 생성하여 변수에 저장
var student = {num:1000, name:"홍길동"};

alert("student 변수의 자료형 = "+typeof(student));
//student 변수의 자료형 = object
//JSON 기능을 사용한 객체(object)의 자료형이 저장되어있어요~

//Object.toString() : 객체를 생성한 클래스를 문자값으로 반환하는 메소드
//=>Object 객체가 저장된 객체변수를 출력할 경우 toString() 메소드 자동 호출
alert("student = "+student.toString());
//student = [object Object] >>Object 객체
//student는 Object클래스로 만들어진 객체에요~

alert("student = "+student);
//student = [object Object] >>Object 객체

alert("학번 = "+ student.num+", 이름 = "+student.name);
//학번 = 1000, 이름 = 홍길동

 

Object객체 → 문자값

//🖤JSON.stringify(Object) : 매개변수로 자바스크립트 객체를 전달받아 
//JSON 형식의 문자값으로 변환하여 반환하는 메소드
//왜 사용? 
//(AJAX 기능으로) 웹 프로그램을 요청할 때 자바스크립트 객체를 JSON 형식의 문자값으로 변환하여 
//전달함 ex) num=1000&name=홍길동 쿼리스트링형식으로 전달됨



var text= JSON.stringify(student);
alert("text 변수의 자료형 = "+typeof(text)); //text 변수의 자료형 = string
alert("text = "+ text); //text = {"num":1000,"name":"홍길동"}
//=> 주의) {}는 객체가 아닌 JSON 형식으로 표현된 문자값이라는 것!!!

 

문자값 → Object객체

//🖤JSON.parse(json) : 매개변수로 JSON 형식의 문자값을 전달받아 
//자바스크립트 객체로 변환하여 반환하는 메소드
// => JSON.parse(json) 대신 eval 함수 사용 가능
//왜 사용? 
//웹 프로그램을 요청하여 JSON 형식의 문자값으로 응답받은 경우 
//응답결과를 자바스크립트 객체로 변환하여 사용하기 때문



var stu = JSON.parse(text);
//or
//JSON형식의 문자값을 자바스크립트 명령으로 변환하여 Object 객체 생성
//=> ()처리하여 선언문이 실행될 수 있도록하는 것이 중요
var stu = eval("("+text+")");

alert("stu 변수의 자료형 = "+typeof(stu));
//stu 변수의 자료형 = object
alert("stu = "+ stu);
//stu = [object Object] >> Object 객체
alert("학번 = "+ stu.num+", 이름 = "+stu.name);
//학번 = 1000, 이름 = 홍길동