1. Date 객체

 

- 시간 정보를 담는 객체

- 현재 시간 정보

- 학기 시작일 2017년 3월 1일의 날짜 기억

- Date 객체 활용

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date 객체 사용</title>
</head>
<body>
    <h3>Date 객체 사용하기</h3><hr>
    <script>
        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>");//초를 1000으로 나눈 값
        window.setTimeout('window.location.reload()',1000);//1초 단위로 새로고침된다.
        //페이지 방문시 초시간이 짝수이면 violet, 홀수이면 lightskyblue 배경으로 변경
        if (now.getSeconds()%2==0){
            document.body.style.backgroundColor="#E8D9FF"
        }else{
            document.body.style.backgroundColor="#D9E5FF"
        }
    </script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

 

2. String 객체

 

- 문자열을 담기 위한 객체

- String  객체는 일단 생성되면 수정 불가능

- String 객체의 특징

① 문자열 길이 :String 객체의 length 프로퍼티 > 읽기 전용

② 문자열을 배열처럼 사용 : [] 연산자를 사용하여 각 문자 접근

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String 객체</title>
</head>
<body>
    <h3>String 객체 사용하기</h3><hr>
    <script>
        var a = new String("Boys and Girls");
        var b = "!!";
        //문자열 - 문자(한개의 단어)
        document.writeln(a.charAt(0)+"<br>");
        //concat메소드는 가변인수 선언 
        document.writeln(a.concat(b,"입니다.")+"<br>");
        document.writeln(a.concat(b)+"<br>");
        document.writeln(a.concat(b,"a","bb","cc")+"<br>");
        document.writeln(a.indexOf('s')+"<br>");
        document.writeln(a.lastIndexOf('s')+"<br>");
        document.writeln(a.indexOf('and')+"<br>");
        document.writeln(a.indexOf('And')+"<br>");
        document.writeln(a.slice(5,8)+"<br>");
        document.writeln(a.toUpperCase()+"<br>");
        document.writeln(a.replace("and","or")+"<br>");
        document.writeln("   aryeong   ".trim()+"<br>");
        var sub = a.split(" ");//빈칸을 구분자로 분리
        for(i=0;i<sub.length;i++){
            document.writeln(sub[i]+"<br>");
        }
        document.writeln("<hr>")
        
        /*
            mode
            mid
            sid1
            oid...
            -----------------------
            LSD
            shm
            102
            102......
        */
        document.writeln(s);
        document.writeln("<hr>")
        //var len = s.indexOf('?');
        var s1 = s.slice(s.indexOf('?')+1);
        //document.writeln(s1);
        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++){
            //var s3 = s2[i].split('=')
            document.writeln(s2[i].split('=')[1]+"<br>");
        }
    </script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

3. Math 객체

 

- Math :수학 계산을 위한 프로퍼티와 메소드 제공 / new Math()로 객체 생성하지 않고 사용

- 난수 발생

  Math.random() : 0~1보다 작은 랜덤한 실수 리턴

  Math.floor(m)은 m의 소수점 이하를 제거한 정수 리턴

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math 객체</title>
    <script>
        function randomInt(){
            return Math.floor(Math.random()*9)+1;
        }
    </script>
</head>
<body>
    <h3>Math 객체 만들기</h3><hr>
    <script>
        var r = Math.random(); //0~0.99999999 사이의 난수
        document.writeln(r);
        document.writeln("<br>")
 
        var r = Math.random()*9;
        var r2 = Math.floor(r)+1;//버림1~9사이의 난수
        document.writeln(r2);
        document.writeln("<hr>")
 
        //구구단 맞추기 게임
        var q =randomInt() + "*" + randomInt();
        var u = prompt(q + "값은 얼마입니까?","0");
        //취소 클릭시  u값은 null(지정되지 않은 값)이 된다.
        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>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

4. 사용자 객체 - object 객체 

 

- 사용자가 새로운 타입의 객체 작성 가능 : 3 가지 방법

 1. 직접 객체 만들기

- new Object() 이용

- 리터럴 표기법 이용

 2. 객체의 틀(프로토타입)을 만들고 객체 생성하기

 

샘플

- 은행 계좌를 표현하는 account 객체

 

- 과정

  1. new Object()로 빈 객체 생성

  2. 빈 객체에 프로퍼티 추가

     -새로운 프로퍼티 추가(프로퍼티 이름과 초기값 지정)

  3. 빈 객체에 메소드 추가

     - 메소드로 사용할 함수 미리 작성

     - 새 메소드 추가(메소드 이름에 함수 지정)

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>object 객체</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>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

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

'화면구현' 카테고리의 다른 글

this, document, DOM 객체 찾기  (0) 2020.03.12
HTML DOM(Document Object Model)  (0) 2020.03.11
(Javascript) 배열  (0) 2020.03.11
(Javascript)객체  (0) 2020.03.11
(Javascript) 함수  (0) 2020.03.11
(Javascript) Date 객체, String 객체, Math객체, object 객체 :: 2020. 3. 11. 21:49 화면구현
openclose

티스토리툴바