단비의 코딩 공부 blog

[Vanilla JS]study 7일차 - 기본내장객체 로또생성하기 본문

javascript&jquery

[Vanilla JS]study 7일차 - 기본내장객체 로또생성하기

황굽달 2023. 1. 11. 12:41

-

객체 정리

** 객체 : JS가 명령을 주는 모든 대상
- 속성 : 객체가 갖고 있는 특징을 기술한 것
         값이 함수가 아닌 것
         객체명.속성
- 메서드 : 객체가 갖고 있는 동작과 명령을 기술한 것
          값이 함수인 것
          객체명.메서드명()

1. 기본내장객체 : 첫글자를 대문자로 작성 - 생성자함수로 선언되었기 때문
    1) String
    2) Number
    3) Nath
    4) Array
    5) Date
    6) Object(개발자가 만드는 객체)

2. BOM (Browser Object Model) : 소문자로 작성
    1) window : 창 객체
    2) location : 주소표시줄 객체
    3) history : 주소내역 객체
    4) navigator :브라우저 정보 객체
    5) screen : 운영체제 화면 객체
    6) document : 문서 객체

3. DOM (Document Object Model)

-

1. 기본내장객체 정리

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본내장객체</title>
    <script>
        //1. 문자열객체선언
        var srt01 = '안녕하세요';
        var srt02 = new String('안녕하세요');

        //2. 숫자객체선언
        var num01 = 100;
        var num02 = new Number(100);

        //3. Math : new 키워드로 새롭게 인스턴스를 생성하지않는 기본내장객체

        //4. Array : 베열 - 값을 여러 개 나열해서 저장하는 공간
        var array01 = [10,20,30];
        var array02 = new Array(10,20,30);
    </script>
</head>
<body>
    
</body>
</html>

2. Date 객체선언

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본내장객체</title>
    <script>
        //1. 오늘 날찌/지금 시간을 선언
        var today = new Date();
        
        alert(today);

        //2. 특정날짜 선언
        var xmas = new Date(2022,11,25); //월은 인덱스번호로 처리 - 12월은 11로 처리

        alert(xmas);
    </script>
</head>
<body>
    
</body>
</html>

3. Date객체의toXX메서드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본내장객체</title>
    <script>
        var today = new Date();

        var time = today.toLocaleTimeString();
        var date = today.toLocaleDateString();

        alert(time);
        alert(dete);
    </script>
</head>
<body>
    
</body>
</html>

4. Date객체의 게터

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본내장객체</title>
    <script>
        //모든객체는 속성과 메서드를 갖고 있다.
        //메서드 : 객체에 주는 명령/동작 - 메서드명()
        //게터(getXX) : 객체의 값을 얻어오는 메서드
        //세터(setXX) : 객체의 값을 변경하는 메서드
         
        var today = new Date();
        
        //출력 : 2022년 10월 30일

        var y = today.getFullYear();
        var m = today.getMonth() + 1; //월은 인덱스번호로 반환
        var d = today.getDate();
        
        alert(y + '년' + m + '월' + d + '일');

        //출력 : 00ㅅ; 00분 00초

        var h = today.getHours();
        var m2 = today.getMinutes();
        var s = today.getSeconds();

        alert(h + '시' + m2 + '분' + s + '초');

        //출력 - 오늘 요일 : X요일
        //getDay() : 요일을 반환하는 메서드 - 인덱스번호
        //           일요일이 0, 토요일이 6

        var week = ['일','월','화','수','목','금','토'];
        var day = today.getDay();
        alert('오늘 요일 : ' + week[day] + '요일');
    </script>
</head>
<body>
    
</body>
</html>

5. Date객체의 세터

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본내장객체</title>
    <script>
        //모든객체는 속성과 메서드를 갖고 있다.
        //메서드 : 객체에 주는 명령/동작 - 메서드명()
        //게터(getXX) : 객체의 값을 얻어오는 메서드
        //세터(setXX) : 객체의 값을 변경하는 메서드
         
        var today = new Date();

        //100일 뒤 변환
        today.setDate(today.getDate() + 99); //우리가 원하는 d-day는 오늘부터니까 100에서 -1해서 적어준다.

        alert(today.toLocaleDateString());
    </script>

</head>
<body>
    
</body>
</html>

6. 로또생성기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본내장객체</title>
    <script>
        //로또 : 6개의 번호를 맞춰야 당첨 - 1~45의 사이의 숫자가 랜덤하게 반환 - 같은 숫자는 나오지 않음

        //숫자 6개를 담는 변수를 선언
        var lotto = []; //값을 비워 놓은 상태

        //반복문 - 숫자를 6번 추가
        for(var i=0;i<6;i++){
            //1~45사이의 정수를 랜덤으로 반환
            //random() : 0~1사이의 실수를 반환
            //floor() : 정수로 내림
            var num = Math.floor(Math.random() * 44) + 1;
            
            //같은 숫자가 나오면 새로운 값으로 변경
            for(var j in lotto){
                while(num == lotto[j]){ //현재 num값이 기존 lotto값과 같다면
                    //새로운 랜덤한 숫자를 담기
                    num = Math.floor(Math.random() * 44) + 1;
                }
            }

            lotto.push(num); //num값을 lotto배열에 추가
        }

        //lotto 숫자를 오름차순으로 정렬
        lotto.sort(function(left, right){
            return left-right;
        }); 

        alert('이번주 로또 번호 : ' + lotto);
    </script>

</head>
<body>
    
</body>
</html>

 

저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 9일차 - DOM  (0) 2023.03.06
[Vanilla JS]study 8일차 - BOM  (1) 2023.01.27
[jquery]버튼 클릭 시 텍스트 크기 조절  (0) 2022.12.23
[Vanilla JS]study 6일차 - 객체와 기본내장객체  (0) 2022.12.09
[javascript]날짜 지정 event (로또 회차)  (0) 2022.12.07
'javascript&jquery' Related Articles more