티스토리 뷰

Programming/JavaScript, jQuery

[javascript 12강] 내장객체

국브 2019. 2. 17. 23:26

 [javascript 12강] 내장객체



이번글에서는 자바스크립트 내장객체에 대해서 알아보겠습니다.

내장객체는 이미 만들어져있는 객체를 의미합니다.

이미 만들어져있는 객체를 그냥 생성만 해서 사용하면 되는것이죠..

이전글에서도 Array 이를 만들기위해서 new Array 를 할당해주는것을 보았을것입니다.

이렇게 만들지도 않은 객체를 사용할수 있는것입니다.

내장객체도 종류가 많이 있습니다...

(내장객체를 전부다 확인하시고 싶으시다면 javascript api 문서를 참고하세요!)

저는 많이 사용하는 내장객체만 알아보겠습니다.

글에 들어가기전 이전글들을 링크해두었습니다.

혹시라도 부족한 부분이 있으시다면 확인해보세요 ㅎ


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 3강] 변수와 자료형

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 5강] 배열

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 4강] 연산자

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 7강] 반복문(제어문)

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 6강] 조건문(제어문)

2019/02/12 - [Programming/JavaScript, jQuery] - [javascript 8강] 함수

2019/02/12 - [Programming/JavaScript, jQuery] - [javascript 9강] 함수 심화

2019/02/13 - [Programming/JavaScript, jQuery] - [javascript 10강] 객체

2019/02/13 - [Programming/JavaScript, jQuery] - [javascript 11강] 객체 심화




 String 객체


string 객체는 문자열을 관리해주는 객체입니다.

string 객체는 모든언어에서와 같이 new 키워드를 사용하지 않아도 자동적으로 생성해줍니다.

(평소에 문자열을 그냥 할당해주는것)


 사용방법 및 문법 


1. String 객체 그냥 사용


 var 변수 = "문자열";


2. String 객체 생성자로 생성


var 변수 = new String("문자열");


3. String 객체 기타 사용법 (속성, 함수)


스트링객체.length;

(문자열의 길이값)


스트링객체.constructor;

(생성자를 확인)


스트링객체.charAt(인덱스);

(인덱스의 값의 문자를 반환)


스트링객체.indexOf(문자);

(처음나오는 문자가 있는 인덱스값을 반환)


스트링객체.lastIndexOf(문자);

(마지막에 나오는 문자가 있는 인덱스값을 반환)


스트링객체.concat(문자);

(문자를 붙일수 있음)


스트링객체.replace(변환문자,변환값);

(변환)


스트링객체.split(기준문자);

(기준 문자로 앞, 뒤로 값이 나뉨)


스트링객체.slice(시작 인덱스,종료 인덱스);

(시작인덱스 부터 종료 인덱스 앞자리 까지 값만 반환해줌)


스트링객체.substring(시작 인덱스,종료 인덱스);

(시작 인덱스 부터 종료인덱스 앞자리까지 값을 반환해줌)


스트링객체.toLowerCase();

(소문자로 변환)


스트링객체.toUpperCase();

(대문자로 변환)



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            //1. String 객체 그냥 사용
            var str = "abcd";
 
            //2. String 객체 생성자로 생성
            var str2 = new String("ABCD");
 
            //속설 사용
            console.log(str.length);
 
            console.log(str.constructor);
 
            console.log(str.charAt(1));
 
            console.log(str.indexOf("b"));
 
            console.log(str.lastIndexOf("c"));
 
            console.log(str.concat("e"));
 
            console.log(str.replace("a","A"));
 
            console.log(str.split("b"));
 
            console.log(str.slice(1,3));
 
            console.log(str.substring(1,3));
 
            //함수사용
            console.log(str.toLowerCase());
 
            console.log(str.toUpperCase());
            
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


"사용방법 및 문법" 에 이미 내용을 설명하여..

설명은 생략합니다.




 Math 객체


수학 및 계산을 위한 객체 입니다.

계산식이 필요없이 Math 객체를 활용하여 계산을 할수있고..

Math 객체는 static 객체이므로 생성없이 바로 사용할수 있습니다.


 사용방법 및 문법 


1. 기타 사용 방법 (속성, 함수)


Math.PI;

(원주율 pi의 값을 사용할수 있음)


Math.abs(숫자);

(절대값을 얻을수 있음)


Math.max(숫자,숫자);

(큰값을 얻을수 있음)


Math.min(숫자,숫자);

(작은수를 얻을수 있음)


Math.pow(숫자, 제곱횟수);

(제곱값을 얻을수 있음)


Math.random();

(랜덤값을 얻을수 있음)


Math.ceil(숫자);

(소수점 올림)


Math.floor(숫자);

(소수점 버림)


Math.round(숫자);

(소수점 반올림)


Math.sqrt(숫자);

(제곱근을 구함)



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            var num1 = 123.4;
            var num2 = -123.4;
            var num3 = 5;
 
            //원주율 pi의 값을 사용할수 있음
            console.log(Math.PI);
            //절대값을 얻을수 있음
            console.log(Math.abs(num1));
            //큰값을 얻을수 있음
            console.log(Math.max(num1,num2));
            //작은수를 얻을수 있음
            console.log(Math.min(num1,num2));
            //제곱값을 얻을수 있음
            console.log(Math.pow(num3, 2));
            //랜덤값을 얻을수 있음
            console.log(Math.random());
            //소수점 올림
            console.log(Math.ceil(num1));
            //소수점 버림 
            console.log(Math.floor(num1));
            //소수점 반올림
            console.log(Math.round(num1));
            //제곱근을 구함
            console.log(Math.sqrt(num3));
            
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


"사용방법 및 문법" 에 이미 내용을 설명하여..

설명은 생략합니다.




 Date 객체


날짜 및 시간 관련 객체입니다.

프로그래밍을 하다보면 날짜관련 객체는 정말 많이 사용됩니다.


 사용방법 및 문법 


1. Date 객체생성


var 변수명 = new Date();

(시스템 날짜를 이용한 객체 생성)


또는


var 변수명 = new Date(년,월,일);

(월입력란에 -1 한 값을 넣어주면 됩니다. ex: 7월로 정하고 싶다면 6 을 넣어주면 됩니다.)


또는

var 변수명 = new Date(년,월,일,시,분,초,밀리언세컨드);

(월입력란에 -1 한 값을 넣어주면 됩니다. ex: 7월로 정하고 싶다면 6 을 넣어주면 됩니다.)


2. Date 객체 함수사용


Date객체.getYear();

(1900 년이 빠진 값)


Date객체.getFullYear();

(현재년도 값)


Date객체.getMonth();

(현재 월 값)


Date객체.getDate();

(현재 날짜 값)


Date객체.getDay();

(현재 요일 값)


Date객체.getHours();

(현재 시간의 시 값)


Date객체.getMinutes();

(현재 시간의 분 값)


Date객체.getSeconds();

(현재 시간의 초 값)


Date객체.getTime();

(기준시(1970년1월1일00:00:00)을 기준으로 경과된 시간을 밀리세컨드로 표시 및 설정)


Date객체.setYear();

(1900 년이 빠진 값 변경)


Date객체.setFullYear();

(현재년도 값 변경)


Date객체.setMonth();

(현재 월 값 변경)


Date객체.setDate();

(현재 날짜 값 변경)


Date객체.setDay();

(현재 요일 값 변경)


Date객체.setHours();

(현재 시간의 시 값 변경)


Date객체.setMinutes();

(현재 시간의 분 값 변경)


Date객체.setSeconds();

(현재 시간의 초 값 변경 변경)


Date객체.setTime();

(기준시(1970년1월1일00:00:00)을 기준으로 경과된 시간을 밀리세컨드로 표시 및 설정 변경)


Date객체.toString();

(날짜와 시간을 문자열로 변환)


Date객체.toLocaleString();

(날짜와 시간을 지역시간 문자열로 변환)


Date객체.toGMTString();

(날짜와 시간을 GMT 문자열로 변환)



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            var dt1 = new Date();
            var dt2 = new Date("2019","2","20");
            var dt3 = new Date("2019","2","20","1","30","30","100");
    
            console.log(dt1);
            console.log(dt2);
            console.log(dt3);
            
            //1900 년이 빠진 값
            console.log(dt3.getYear());
    
            //현재년도 값
            console.log(dt3.getFullYear());
            
            //현재 월 값
            console.log(dt3.getMonth());
    
            //현재 날짜 값
            console.log(dt3.getDate());
    
            //현재 요일 값
            console.log(dt3.getDay());
    
            //현재 시간의 시 값
            console.log(dt3.getHours());
    
            //현재 시간의 분 값
            console.log(dt3.getMinutes());
    
            //현재 시간의 초 값
            console.log(dt3.getSeconds());
    
            //기준시(1970년1월1일00:00:00)을 기준으로 경과된 시간을 밀리세컨드로 표시 및 설정
            console.log(dt3.getTime());
            
            //날짜와 시간을 문자열로 변환
            console.log(dt3.toString());
    
            //날짜와 시간을 지역시간 문자열로 변환
            console.log(dt3.toLocaleString());
    
            //날짜와 시간을 GMT 문자열로 변환
            console.log(dt3.toGMTString());
    
 
            //set 관련함수는 값을 대입하는것이기에 생략했습니다..
 
            //1900 년이 빠진 값 변경
            //dt3.setYear();
    
            //현재년도 값 변경
            //dt3.setFullYear();
    
            //현재 월 값 변경
            //dt3.setMonth();
    
            //현재 날짜 값 변경
            //dt3.setDate();
    
            //현재 요일 값 변경
            //dt3.setDay();
    
            //현재 시간의 시 값 변경
            //dt3.setHours();
    
            //현재 시간의 분 값 변경
            //dt3.setMinutes();
    
            //현재 시간의 초 값 변경 변경
            //dt3.setSeconds();
    
            //기준시(1970년1월1일00:00:00)을 기준으로 경과된 시간을 밀리세컨드로 표시 및 설정 변경
            //dt3.setTime();
    
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 


 

"사용방법 및 문법" 에 이미 내용을 설명하여..

설명은 생략합니다.




 Array 객체


배열객체인 Array 객체는 많이 사용됩니다.

개발을 하다보면 데이터를 주고 받을때 많은양의 데이터를 한번에 주고 받기위해서..

Array 형식으로 데이터를 많이 주고받습니다.

꼭 알아두세요!


 사용방법 및 문법 


1. Array객체 생성 방법


var varArray = new Array();


또는


var varArray = new Array(값1,값2,...);



2. Array객체 기타 사용방법


varArray.length;

(Array길이 값을 확인할수 있습니다.)



varArray.join();

(문자열로 합침.)


varArray.reverse();

(값을 반대로 전환)


varArray3.sort();

(값을 정렬함)


varArray3.sort(function(a,b){return a-b));

(값을 오름차순 정렬)


varArray3.sort(function(a,b){return b-a});

(값을 내림차순 정렬)


varArray.slice(1,4);

(인덱스 값으로 잘라냄)


varArray.concat(varArray2);

(값을 연결(배열 + 배열))



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            var varArray = new Array("바나나","사과","딸기","귤");
            var varArray2 = new Array("키위");
            var varArray3 = new Array(4,7,2,9);
    
            //Array길이 값을 확인할수 있습니다.
            console.log(varArray.length);
            
            //문자열로 합침.
            console.log(varArray.join());
            
            //값을 반대로 전환
            console.log(varArray.reverse());
            
            //값을 정렬함
            console.log(varArray3.sort());
            //값을 오름차순 정렬
            console.log(varArray3.sort(function(a,b){return a-b}));
            //값을 내림차순 정렬
            console.log(varArray3.sort(function(a,b){return b-a}));
            
            //인덱스 값으로 잘라냄
            console.log(varArray.slice(1,4));
            
            //값을 연결(배열 + 배열)
            console.log(varArray.concat(varArray2));
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 

"사용방법 및 문법" 에 이미 내용을 설명하여..

설명은 생략합니다.




 글을 마치며..




도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 




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

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 14강] DOM (문서 객체)  (0) 2019.02.19
[javascript 13강] BOM (브라우저 객체)  (0) 2019.02.18
[javascript 11강] 객체 심화  (0) 2019.02.13
[javascript 10강] 객체  (0) 2019.02.13
[javascript 9강] 함수 심화  (0) 2019.02.12
댓글