7. 객체

객체는 다양한 속성이 묶여있는 것이라 생각하면 된다. 자바스크립트에도 객체를 선언할 수 있도록 만들어져 있다.

객체를 선언하는 방법은 다음과 같다.

var d=new Date();
var s=new String("자바스크립트 공부하기");

이 때, 오른쪽에는 객체의 타입을 선언하고, 왼쪽에 객체의 레퍼런스 변수를 선언한다.

첫번째는 시간을 나타내는 객체를, 두번째는 "자바스크립트 공부하기"라는 문자열을 담은 객체를 생성했다.

객체에 접근하는 방법은, 다음과 같이

var d1=d.toLocaleString();
document.writeln(s.length);

객체변수.프로퍼티 <<의 형태로 접근하게 된다.

예시를 들어보면,

        var d=new Date();
        var d1=d.toLocaleString();
        document.writeln(d1);
        document.writeln("<br>");
        var s=new String("자바스크립트 공부하기");
        document.writeln(s.length)

다음과 같이 객체에 메소드(LocaleString())를 결합해 d1으로 호출했다. 이 때, 여러개의 단어가 결합한 경우 두번째 단어부터 대문자로 작성한다.

또한 s.length를 통해 s객체 내부에 있던 문자열의 길이(속성값)을 읽어냈다.

-Date 객체 사용

Date 객체를 이용하면 다양한 시간, 날짜 정보를 호출할 수 있다.

        var now=new Date();
        document.writeln(now.toUTCString()+"<br>");
        document.writeln(now.getFullYear()+"<br>");
        document.writeln(now.getMonth()+1+"<br>");
        document.writeln(now.getDate()+"<br>");
        document.writeln(now.getHours()+"<br>");
        document.writeln(now.getMinutes()+"<br>");
        document.writeln(now.getSeconds()+"<br>");
        document.writeln(now.getMilliseconds()+"<br>");

다음과 같이 시간에 대한 메소드를 호출할 수 있다.

toUTCString()은 국제 표준 시간을 호출한다.

getFullYear()은 해,

getMonth는 달을 출력하는데, 이 때 사람과 다르게 컴퓨터는 0~11월로 인식하므로 +1을 붙여주어야 한다.

getDate는 날짜를, getMinute는 분, getSecond는 초를 호출한다.

getMilliseconds()는 초를 1/1000한 값을 소환한다.

이 데이터 정보를 이용하여 다음과 같은 응용을 할 수 있다.

페이지 방문 시 현재 초시간이 짝수일 때와 홀수일 때의 색이 다르게 호출할 수도 있다.

        if(now.getSeconds()%2==0){

            document.body.style.backgroundColor="violet"

        }else{

            document.body.style.backgroundColor="lightskyblue"

        }

if문에서 상수의 홀짝수를 비교하는 것처럼 초를 출력하는 메소드 역시 홀짝 수를 비교하는 방식은 동일하다.

따라서,

다음과 같이 초가 짝수일 경우 violet이, 홀수면 lightskyblue 배경색이 도출된다.

-string 객체 활용

string 객체 역시 다양한 메소드가 있다. 다음의 메소드는 문자열에 작용한다.

var a=new String("Boys and Girls");
        var b="!!";
        document.writeln(a.charAt(0),"<br>");
        document.writeln(a.concat(b,"입니다.")+"<br>");
        document.writeln(a.concat(b));
        document.writeln(a.concat(b,"a","bb","cc"));
        document.writeln(a.indexOf('s')+"<br>");
        document.writeln(a.lastIndexOf('s')+"<br>");
        document.writeln(a.slice(5,8)+"<br>");
        document.writeln(a.indexOf('and')+"<br>");
        document.writeln(a.indexOf('And')+"<br>");
document.writeln(a.toUpperCase+"<br>");
document.writeln(a.replace("and","or")+"<br>");
        document.writeln("   apple        ".trim()+"<br>");
        var sub=a.split(" ");
        for(i=0;i<sub.length;i++){
            document.writeln(sub[i]+"<br>");
        }

결과는 다음과 같으며, 메소드를 살펴보면

CharAt = 매개변수 값 위에 있는 문자열을 반환

concat = 주어진 문자열에 매개변수로 주어진 문자열을 합함

indexOf = 매개변수에 주어진 문자열이 나타나는 첫번째 자리를 반환. 매개변수가 단어일 경우, 시작되는 위치를 반환. 만약 없을 경우 -1을 반환함

lastIndexOf = 매개변수로 주어진 문자열이 나타나는 두번째 자리를 반환

slice = 매개변수로 주어진 범위 내의 문자열을 반환

toUpperCase = 문자열을 대문자로 반환(toLowerCase : 소문자로 반환)

replace(a, b) = a를 문자열에서 찾아 b로 변환 후 반환

trim = 문자열에 있는 공백을 삭제

split = 매개변수 내에 있는 문자열을 기준으로 문자열을 분리

이것을 바탕으로 url을 잘라내는 것도 가능하다

예시)

        var s="https://news.naver.com/main/read.nhn?mode=LSD&mid=shm&sid1=102&oid=421&aid=0004515570"
        var s1=s.slice(s.indexOf('?')+1);
        var s2=s1.split('&');
        for(i=0;i<s2.length;i++){
            var s3=s2[i].split("=");
            document.writeln(s3[0]+"<br>");
        }
        document.writeln("<hr>");
        for(i=0;i<s2.length;i++){
            document.writeln(s2[i].split('=')[1]+"<br>");
        }

s1은 ?을 기준으로, s2는 &을 기준으로 잘라낸다. 잘라진 s2(mode=LSD, mid=shm....)를 바탕으로 s3에서는 =를 기준으로 잘라내되, 첫번째는 =의 앞[0]을 반환하고, 두번째는 =의 뒤[1]를 반환했다.

-Math 객체

Math 객체는 수학적인 계산을 할때 쓰이는 프로퍼티와 메소드를 제공한다.

자주 쓰이는 메소드는 다음과 같다

abs(x)	절대값 리턴
sin(x)	sin값 리턴
exp(x)	e의 x제곱 값 리턴
pow(x,y)	x의 y제곱 값 리턴
random()	0~1사이의 난수 값 리턴
floor(x)	소수점 버림
round(x)	x를 반올림한 정수 리턴
sqrt(x)	x의 제곱근 리턴
E	Euler 상수 리턴
PI	원주율 리턴

난수를 이용해 구구단 게임을 만들 수 있다.

<head>
    <script>
        function randomInt(){
            var r=Math.random()*9; //0~0.999999999사이의 난수
            return Math.floor(r)+1; //floor = 버림
        }
    </script>
</head>
<body>
    <h3>Math 객체 만들기</h3><hr>
    <script>
        var q=randomInt()+"*"+randomInt();
        var u=prompt(q+"값은 얼마입니까?","");
        if(u==null){
            document.writeln("구구단 연습을 종료합니다.");
        }else{
            var ans=eval(q);
            if(u==ans){
                document.writeln("정답입니다!");
            }else{
                document.writeln("오답입니다.");
            }
            document.writeln(q+"="+"<strong>"+ans+"</strong>");
        }
    </script>
</body>

다음처럼 두 가지 메소드를 사용했다. floor에 1을 붙인 이유는 소수값을 버리게 되면 0이 되는 구간이 생기기 때문이다. 따라서 계산에 혼선이 생기지 않게 하기 위해서 +1을 하여 0이 나오는 상황을 방지했다.

- object 객체

이 객체를 이용하면 사용자 객체를 쉽게 만들 수 있다. 여기에 프로퍼티를 추가해서 새로운 객체를 사용할 수 있다.

메소드 역시 없기 때문에 직접 만들 수 있는데, 메소드 이름과 동일한 이름의 함수를 만들고, 객체의 메소드 이름을 함수 이름으로 초기화 하면 된다. 다음이 object 객체의 예시이다.

<head>
    <title>Document</title>
    <script>
        function inquiry(){
            return this.balance;
        }
        function deposit(money){
            this.balance+=money;
        }
        function withdraw(money){
            this.balance-=money;
            return money;
        }
        var account=new Object();
        account.owner="홍길동";
        account.code="1234";
        account.balance=35000;
        account.inquiry=inquiry;
        account.deposit=deposit;
        account.withdraw=withdraw;
    </script>
</head>
<body>
    <h3>Object 객체 사용하기</h3><hr>
    <script>
        document.writeln("account : ");
        document.writeln(account.owner);
        document.writeln(account.code);
        document.writeln(account.balance+"<br>");
        account.deposit(10000);
        document.writeln("10000원 저축 후 잔액 : "+account.inquiry()+"<br>");
        account.withdraw(5000);
document.writeln("5000원 저축 후 잔액 : "+account.inquiry()+"<br>");
    </script>
</body>