13. JavaScript - 내장 객체

67047 단어 JavaScript내장 객체Javascript 기초JavaScript
  • 혼자서 JavaScript를 공부하고 실습하면서 작성한 글입니다.
  • 처음 공부하고 있어서 부족하거나 잘못된 정보가 있을 수 있습니다. (2021.06.25 금)
  • 조금 더 자세히 알게 되거나 수정할 부분이 있으면 바로바로 수정하겠습니다.

자바스크립트는 객체 기반 언어이다. 객체는 기능(Method) 또는 속성(Properties)을 가지고 있다.

자바스크립트의 객체는 크게 내장객체, 브라우저 객체 모델(BOM : Browser Object Model), 문서 객체 모델(DOM : Document Object Model)로 나눌 수 있다.

내장 객체

  • 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미.

  • 내장 객체를 생성하는 기본형은 다음과 같다

    var myObject = new Object();
myObject.name = "Hello"

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <script>

      var number1 = 123;

      var number2 = new Number(123);

      document.write(number1 + " number1의 타입은? " + typeof number1,"<br>");   // 123 number1의 타입은? number

      document.write(number2 + " number2의 타입은? " + typeof number2,"<br>");   // 123 number2의 타입은? object
    </script>
  </body>
</html>

1. Date Object (날짜 정보 객체)

  • 현재 날짜나 시간관련 정보를 제공 받거나 특정 날짜에 대한 정보를 받고 싶을 때 사용
날짜 정보를 가져올 때(GET)날짜 정보를 수정할 때 (SET)
getFullYear()연도정보를 가져옴setFullYear()연도 정보만 수정
getMonth()월 정보를 가져옴 (현재 월 -1)setMonth()월 정보만 수정(월 -1)
getDate()일 정보를 가져옴setDate()일 정보만 수정
getDay()요일 정보를 가져옴(일:0~토:6)요일은 날짜를 바꾸면 자동으로 바뀌므로 setDay()는 없음
getHours()시 정보를 가져옴setHours()시 정보만 수정
getMinutes()분 정보를 가져옴setMinutes()분 정보만 수정
getSeconds()초 정보를 가져옴setSeconds()초 정보만 수정
getMilliseconds()밀리초 정보를 가져옴(1/1000초)setMilliseconds()밀리초 정보만 수정
getTime()1970년부터 경과된 시간을 밀리초로 표기함setTime()1970년부터 경과된 시간을 밀리초로 수정
toGMTString()GMT 표준 표기방식으로 문자형 데이터로 반환toLocalString()운영 시스템 표기 방식으로 문자형 데이터로 반환

밀리초(msc) 로 1일 계산법 1초 = 1000(밀리초)

1000(밀리초) X 60 X 60 X 24 = 86,400,000(msc)

1초 =1000(msc)

1분(60초)= 1000 * 60 // 60,000(msc)

1시간(60분) = 1000 * 60 *60 //3,6000,000(msc)

1일(60분 * 24)= 1000 * 60 * 60 * 24 //86,400,000(msc)

<!DOCTYPE html>
<html>
  <head>
    <title>예제1</title>
  </head>
  <body>

    <script>
      var t = new Date();
      var nowMonth = t.getMonth();
      var nowDate = t.getDate();
      var nowDay = t.getDay();

      document.write("현재 월 : " + (nowMonth + 1) + "<br>"); 
      document.write("현재 일 : " + nowDate + "<br>");
      document.write("현재 요일 : " + nowDay + "<br>");

        
      var m = new Date(2002,4,31); // 2002(5.31)월드컵 날짜객체 생성

      var theMonth = m.getMonth(); // 날짜 객체에서 월
      var theDate = m.getDate();   // 날짜 객체에서 일
      var theDay = m.getDay();     // 날짜 객체에서 요일

      document.write("2002 월드컵 몇 월 : " + theMonth + "<br>");
      document.write("2002 월드컵 몇 일 : " + theDate + "<br>");
      document.write("2002 월드컵 무슨 요일 : " + theDay + "<br>");
    </script>

  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>예제2</title>
  </head>
  <body>
    <script >
      var t = new Date(); // 오늘 날짜 개체를 생성
      var nowYear = t.getFullYear(); // 오늘 날짜의 연도 정보
      var theDate = new Date(nowYear,11,31); //현재 연도에 12월 31 날짜 객체를 생성

      var diffDate = theDate - t; // 연말까지 남은 기간 = 연말 날짜 - 현재 날짜

      // 밀리초를 일로 계산
      var result = Math.ceil( diffDate / (1000 * 60 * 60 * 24) );

      // 남은 일수를 출력
      document.write("현재일로 부터 올해 말일까진 " + result + " 일 남았습니다.");
    </script>
  </body>
</html>

2. Number Object (숫자 객체)

  • 자바스크립트를 이용하여 숫자를 표기할 때, 표현 가능한 수의 속성과 숫자 표기법에 대한 메서드를 제공한다.

  • Number 객체의 속성

속성설명
MAX_VALUE표현 가능한 가장 큰 수
MIN_VALUE표현 가능한 가장 작은 수
POSITIVE_INFINITY무한대 수 표기
NEGATIVE_INFINITY음의 무한대 수 표기
NaN숫자가 아닌 경우 표기
  • Number 객체의 메소드
메소드설명
toExponential(n)지수 표기법으로 소수점 n자리만큼 문자형 데이터로 반환
toFixed(n)소수점 n자리만큼 반올림하여 문자형 데이터로 반환
toPrecision(n)유효 숫자 n의 개수만큼 반올림하여 문자형 데이터로 반환
toString()숫자형 데이터를 문자형 데이터로 반환
valueOf()객체의 원래 값을 반환
parseInt(n)데이터를 정수로 변환하여 반환
parseFloat(n)데이터를 실수로 변환하여 반환
<!DOCTYPE html>
<html>
  <head>
    <title>예제</title>
  </head>
  <body>

    <script>
      document.write("표현 가능한 가장 큰 수 : " + Number.MAX_VALUE, "<br>");
      // 표현 가능한 가장 큰 수 : 1.7976931348623157e+308
      
      document.write("표현 가능한 가장 작은 수 : " + Number.MIN_VALUE, "<br>");
      // 표현 가능한 가장 작은 수 : 5e-324
      
      document.write("숫자가 아닌경우의 표기 : " + Number.NaN, "<br>");
      // 숫자가 아닌경우의 표기 : NaN
      
      document.write("무한대 수 표기 : " + Number.POSITIVE_INFINITY, "<br>");
      // 무한대 수 표기 : Infinity
      
      document.write("음의 무한대 수 표기 : " + Number.NEGATIVE_INFINITY, "<br>");
      // 음의 무한대 수 표기 : -Infinity

      var num1=3.456789;
      var num2=700000;
      var num3="30.5px";
      var num4=40;

      document.write(num2.toExponential(1), "<br>");     // 7.0e+5
      document.write(num1.toFixed(2), "<br>");           // 3.46
      document.write(num1. toPrecision(2), "<br>");      // 3.5
      document.write(num1.toString(), "<br>");           // 3.456789
      document.write(num4.valueOf(), "<br>");            // 40
      document.write(parseInt(num3) + num4, "<br>");     // 70
      document.write(parseFloat(num3) + num4, "<br>");   // 70.5
    </script>

  </body>
</html>

3. Math Object (수학 객체)

  • 수학과 관련한 기능과 속성을 제공
종류설명
Math.abs(숫자)숫자의 절댓값을 반환
Math.max(숫자1,숫자2,숫자3)숫자들 중 가장 큰 값 반환
Math.min(숫자1,숫자2,숫자3)숫자들 중 가장 작은 값 반환
Math.pow(숫자,제곱값)숫자의 거듭 제곱한 값을 반환
Math.random()0 ~ 1 사이의 난수를 반환
Math.round(숫자)소수점 첫째 자리에서 반올림하여 정수 반환
Math.ceil(숫자)소수점 첫째 자리에서 올림을 해서 정수를 반환
Math.floor(숫자)소수점 첫째 자리에서 버림을 해서 정수를 반환
Math.sqrt(숫자)숫자의 제곱근 값을 반환
Math.PI원주율 상수를 반환
<!DOCTYPE html>
<html>
  <head>
    <title>예제</title>
  </head>
  <body>
    <script>

      var num = 2.1234;
      var maxNum = Math.max(10, 5, 8, 30); // 최댓값 반환
      var minNum = Math.min(10, 5, 8, 30); // 최솟값 반환
      var roundNum = Math.round(num); // 반올림 값을 반환
      var floorNum = Math.floor(num); // 소수점 내림 후 반환
      var ceilNum = Math.ceil(num); // 소수점 올림 후 반환
      var rndNum = Math.random(); // 0~1 사이 난수를 발생
      var piNum = Math.PI; // Math.PI는 원주율 상수를 반환

      document.write(maxNum,"<br>");    // 30

      document.write(minNum,"<br>");    // 5

      document.write(roundNum,"<br>");  // 2

      document.write(floorNum,"<br>");  // 2

      document.write(ceilNum,"<br>");   // 3

      document.write(rndNum,"<br>");    // 0.17840117319839943

      document.write(piNum,"<br>");     // 3.141592653589793

    </script>

  </body>
</html>

4. Array Object (배열 객체)

  • 배열은 나눌 배와 열거할 열을 사용하여 뜻 그대로 하나의 저장소를 나눠서 데이터를 열거하라는 의미를 담고 있다.
// 배열 생성 방식1
var d = new Array();
d[0] = 30;
d[1] = “홍길동”;
d[2] = true;
 
// 배열 생성 방식2
var d = new Array(30, “홍길동”, true);

// 배열 생성 방식3
var d = [30, “홍길동”, true];

종류설명
join(연결문자)배열 객체에 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환
reverse()배열 객체에 데이터의 순서를 거꾸로 바꾼 후 반환
sort()배열 객체에 데이터를 오름차순으로 정렬
slice(index1, index2)배열 객체에 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져온다
splice()배열 객체에 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있다
concat()2개의 배열 객체를 하나로 결합
pop()배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제
push(new data)배열 객체에 마지막 인덱스에 새 데이터를 삽입
shift()배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제
unshift(new data)배열 객체의 첫 번째 인덱스에 새 데이터를 삽입
length배열에 저장된 총 데이터의 갯수를 반환

5. String Object (문자 객체)

  • 문자형 데이터를 객체로 취급한다.
종류설명
charAt(index)문자열에서 인덱스 번호에 해당하는 문자를 반환 예) var str ="web he she"; str.charAt(2); "b"를 반환함
indexOf(“찾을 문자”)문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 문자의 인덱스 번호를 반환. 만일 찾는 문자가 없으면 –1을 반환 예) var str="web he she he"; str.indexOf("he"); 4를 반환함
lastIndexOf(“찾을 문자”)문자열에서 오른쪽에서부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 인덱스 번호를 반환. 만일 찾는 문자가 없으면 –1을 반환.예) var str ="web he she he"; str.lastIndexOf("he"); 11을 반환함
match(“찾을 문자”)문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 찾은 문자를 반환 만일 찾는 문자가 없으면 null을 반환 예) var str="web he she he"; str.match("body"); null을 반환함
replace(“바꿀문자”,“새문자”)문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 최초로 찾은 문자를 새 문자로 치환 예) var str="web he she"; str.replace("web","html"); "html he she"를 반환함
search(“찾을 문자”)문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 인덱스 번호를 반환예) var str="web he she"; str.search("he"); 4를 반환함
slice(a,b)a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환합니다.예) var str ="hello javascript"str.slice(3,7); “lo j”를 반환함str.slice(3,7);은 문자열에서 3글자 “hel”까지 자르고 7번째 이후 “j” 이후부터 “avascript”를 자른 후 나머지 “lo j”를 반환합니다.예) var str ="hello javascript" str.slice(3,-3); “llo javascr”를 반환함. 여기에서 –1은 뒤에서부터 1글자를 가리킵니다.
substring(a,b)a인덱스부터 b인덱스 이전 구간의 문자를 반환합니다.예) var str = "hello javascript" str.substring(3, 7); "lo j"를 반환함 var str = "hello javascript" str.substring(3,-3); "hel"0 반환함여기에서 –3은 인덱스 0을 가리킵니다. 그러므로 0부터 인덱스 3이전 구간의 문자를 구해옵니다.
substr(a, 문자 개수)문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환합니다.예) var str ="hello javascript" str.substring(3,2); "lo" 를 반환함 str.str(3,2); 은 문자열에서 인덱스 3인 "l"부터 2글자를 가져와서 "lo"가 반환됩니다.
split(“문자”)지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환합니다. 예) var str ="webkmobilek2002"; var arr=str.split("k"); arr;
toLowerCase()문자열에서 영문 대문자를 모두 소문자로 변환.예) var str ="ABC"; str.toLowerCase(); "abc"를 반환함
toUpperCase()문자열에서 영문 소문자를 모두 대문자로 변환.예) var str ="abc"; str.toUpperCase(); "ABC"를 반환함
length문자열에서 문자의 개수를 반환합니다.예) var str ="hello welcome"; str.length13을 반환함
concat(“새로운 문자”)문자열에서 새로운 문자열을 결합.예) var str ="hello"; str.concat("web");"hello web"을 반환함
charCodeAt(“찾을 문자”)찾을 문자의 아스키 코드 값을 반환 str="A";예) str.charCodeAt("A"); // 6565를 반환함
fromCharCode(아스키 코드 값)아스키 코드 값에 해당하는 문자를 반환예)String.fromCharCode(65);"A"를 반환함
trim()문자의 앞 또는 뒤에 공백 문자열을 삭제.(" hello " -> "hello")예) str ="hello "; str.trim();공백이 제거된 “hello”를 반환함
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>연습</title>
  </head>
  <body>

    <script>

      /*변수 t에 문자형 데이터를 저장했다는 것은 t에 문자 객체를 참조시킨 것과 같다.*/

      var t="Hello Thank you good luck to you";

      document.write(t.charAt(16),"<br>");   // g

      document.write(t.indexOf("you"),"<br>");  // 12

      document.write(t.indexOf("you",16),"<br>");  // 29

      document.write(t.lastIndexOf("you"),"<br>");  //29

      document.write(t.lastIndexOf("you",25),"<br>");  //12

      document.write(t.match("luck"),"<br>");   // luck

      document.write(t.search("you"),"<br>");   // 12 

      document.write(t.substr(21,4),"<br>");    // luck

      document.write(t.substring(6,12),"<br>");  // Thank

      document.write(t.replace("you","me"),"<br>");  // Hello Thank me good luck to you

      document.write(t.toLowerCase(),"<br>");  // hello thank you good luck to you  

      document.write(t.toUpperCase(),"<br>");  // HELLO THANK YOU GOOD LUCK TO YOU

      document.write(t.length,"<br>");   //  32



      var s=t.split(" ");

      document.write(s[0],"<br>");    //  Hello
      document.write(s[4],"<br>");    // luck

    </script>
  </body>
</html>

6. 정규 표현 객체 (RegExp)

  • 입력 요소에 데이터를 규칙에 맞게 작성했는지 판단해서 알려주는 객체

var myRegExp = new RegExp(패턴, 검색옵션)

  • 정규 표현 검색 옵션
종류설명
*0회 이상 일치하는 문자를 검사할 때 사용합니다.
+1회 이상 일치하는 문자를 검사할 때 사용합니다.
i찾는 문자가 영문일 경우 대 소문자를 구분하지 않습니다.
?0회 또는 1회, 규칙에 맞는 문자가 있는지 검사합니다.
g옵션에 g가 없으면 데이터의 왼쪽부터 규칙에 일치하는 문자 한 개만 찾지만, g를 넣으면 규칙에 맞는 모든 문자를 찾습니다.
m데이터의 행이 바뀌어도 규칙에 맞는 문자를 찾습니다.
$문자열 끝부분에 규칙에 맞는 문자를 찾습니다.
^문자열 앞에서부터 규칙에 일치하는 문제를 찾습니다.또는 부정을 나타냅니다.
\d숫자 하나를 찾습니다.
\D숫자가 아닌 문자 하나를 찾습니다.
\s공백 문자(스페이스)를 찾습니다.
[0-9][A-Z][a=z]숫자, 대문자 영문, 소문자 영문을 찾습니다.
\w알파벳, 숫자, 밑줄(_)기호를 찾습니다.
\W알파벳, 숫자, 밑줄(_)기호를 제외한 문자를 찾습니다.
a|ba또는 b인지 검사할 때 사용합니다.
  • 정규 표현 객체 메서드
종류설명
test()지정한 규칙에 맞는 단어가 있으면 true 값을 반환
exec()지정된 규칙에 맞는 단어가 있으면 해당 단어를 반환
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>연습</title>
  </head>
  <body>
    <script>

      var str = "Html Css Jquery ";
      var reg1 = /css/; // var reg1 = new RegExp("css")

      /*변수 str에 데이터가 reg1에 정규표현 형식을 잘지켰으면 true를 반환하고 안지켰을 경우엔 false를 반환*/

      var result_1 = reg1.test(str);
      document.write(result_1,"<br>");  // false

      /*옵션에 'i'를 입력하면 영문 대소문자를 구분하지 않습니다*/

      var reg2 = /css/i; // var reg2 = new RegExp("css","i")

      var result_2 = reg2.test(str);

      document.write(result_2,"<br>");  // true

    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>예제2</title>
  </head>
  <body>
    <script>
      var userName = prompt("당신의 이름은?");
      reg1=/^[가-힣]{2,5}$/;

      while(true){
        if(reg1.test(userName)) break;
        alert("이름 입력 형식이 잘못되었습니다!");
        userName=prompt("당신의 이름은?");
      }


      var userCell=prompt("당신의 핸드폰 번호는?");
      reg2=/^(010|016|011)\d{3,4}\d{4}$/;

      while(true){
        if(reg2.test(userCell)) break;
        alert("핸드폰 입력 형식이 잘못되었습니다!");
        userCell=prompt("당신의 핸드폰 번호는?");
      }


      var userEmail=prompt("당신의 이메일은?");
      reg3=/^\w{5,12}@[a-z]{2,10}[\.][a-z]{2,3}[\.]?[a-z]{0,2}$/;

      while(true){
        if(reg3.test(userEmail)) break;
        alert("이메일 입력 형식이 잘못되었습니다!");
        userEmail=prompt("당신의 이메일은?");
      }

      document.write(userName,"<br>");
      document.write(userCell,"<br>");
      document.write(userEmail,"<br>");
      
    </script>

  </body>
</html>

7. Object

8. Function

9. Boolean

  • Boolean 객체는 불리언 값을 감싸고 있는 객체이다
[백준] ATM(자바)
빠른 A+B (15552)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage