zoaseo
To Infinity And Beyond
zoaseo
전체 방문자
오늘
어제
  • 분류 전체보기 (763)
    • 개발이 좋아서 (381)
      • SAP가 좋아서 (3)
      • Java가 좋아서 (42)
      • Spring이 좋아서 (50)
      • JPA가 좋아서 (0)
      • QueryDSL이 좋아서 (26)
      • Docker가 좋아서 (7)
      • Redis가 좋아서 (7)
      • AWS가 좋아서 (5)
      • CI/CD가 좋아서 (6)
      • Troubleshooting이 좋아서 (4)
      • Kotlin이 좋아서 (7)
      • SQL이 좋아서 (6)
      • HTTP가 좋아서 (21)
      • JavaScript가 좋아서 (30)
      • TypeScript가 좋아서 (6)
      • Vue가 좋아서 (21)
      • Flutter가 좋아서 (61)
      • React가 좋아서 (20)
      • Redux(React)가 좋아서 (2)
      • Angular가 좋아서 (22)
      • HTML이 좋아서 (9)
      • CSS가 좋아서 (15)
      • PHP가 좋아서 (9)
      • Illustrator가 좋아서 (2)
    • 노력이 좋아서 (169)
    • 결과물이 좋아서 (14)
    • 코딩연습이 좋아서 (168)
      • 이론이 좋아서 (62)
      • SQL이 좋아서 (90)
    • 유용한 사이트가 좋아서 (28)
    • Github (2)

인기 글

티스토리

hELLO · Designed By 정상우.
zoaseo
노력이 좋아서

<step33>'js_객체 응용'

노력이 좋아서

<step33>'js_객체 응용'

2022. 5. 4. 12:48

1) ex02.html(윤년찾기)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //윤년인지 아닌지를 구하는 함수 만들기
        //4로 나누어 떨어진다  %4 = 0
        //이 중에서 100으로 나누어 떨어지면 평년  %100 = 0
        //그 중에서 400으로 나누어 떨어지면 윤년  %400 = 0
        let check = prompt('년도를 입력하시오');
        if (check % 4 === 0 && check % 100 !== 0){
            console.log(true);
        }else if(check % 100 === 0 && check % 400 === 0){
            console.log(true);
        }else {
            console.log(false);
        }
    </script>
</body>
</html>

2) ex02_teach.html(윤년찾기)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let year = Number(prompt('년도를 입력하세요'));
        console.log(chYear(year));
        function chYear(year) {
            if (year % 4 === 0){
                if (year % 100 === 0){
                    return year % 400 === 0? true : false;
                }else {
                    return true;
                }
            }else {
                return false;
            }
        }
    </script>
</body>
</html>

3) ex03.html(소수찾기)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //소수(prime number)찾기
        function primeNumber(num){
            let arr = [];
            for(let i=2; i<=num; i++){
                for(let j=2; j<=i; j++){
                    if(i % j == 0 && i > j){
                        break;
                    }else if(i==j){
                        arr.push(j);
                    }
                }
            }
            return arr;
        }
        let result = primeNumber(100);
        console.log(result);
    </script>
</body>
</html>

4) 07student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //name, age, score1, score2
        //생성자 함수
        function Student(name, age, score1, score2){
            this.name = name;
            this.age = age;
            this.score1 = score1;
            this.score2 = score2;
        }
        const students = [
            new Student('A',29,45,50),
            new Student('B',30,60,70),
            new Student('C',28,90,80),
            new Student('D',27,85,65),
            new Student('E',32,80,90),
        ];
        console.log(students);
        //01. score1이 80점 이상인 학생의 이름을 출력
        //find는 하나만 찾음
        //filter는 해당하는 조건 다 찾음
        let result = students.filter(student => student.score1 >= 80);
        result = result.map(student => {
            return student.name;
        })
        console.log(result);
        //02. score2만 배열로 출력
        let result2 = students.map(student => student.score2);
        console.log(result2);
        //03. score1의 점수가 90점인 학생객체 출력
        let result3 = students.find(student => student.score1 === 90);
        console.log(result3);
        //04. 학생들의 score2를 문자열로 만들어서 출력 
        let result4 = students.map(student => student.score2).join(','); //체이닝
        // result4 = result4.join(',');
        console.log(result4);
        //05. some() true/ false 반환
        //학생배열에서 score1의 점수가 60점 이하가 있는지 확인
        let result5 = students.some(student => student.score1 === 100);
        console.log(result5);
    </script>
</body>
</html>

5) ex04.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // burger객체 생성해서 burgers배열에 넣기
        // 1. 생성자 함수 burger 만들기

        // 2. 객체 만들기
        // '새우버거'/5000/'big'
        // '불고기버거'/4500/'regular'
        // '쥬니어불고기버거'/3500/'small'
        // '치즈버거'/5500/'regular'
        // '스테이크버거'/7000/'big'
        // '치킨버거'/5500/'regular'
        // '야채버거'/4500/'regular'
        // '쥬니어새우버거'/3000/'small'

        // 3. 햄버거 이름만 문자열로 출력
        // 4. 가격이 5000원 이하인 햄버거들만 출력
        // 5. 크기가 big인 햄버거들만 출력
        // 6. 햄버거 가격이 4000원 이하도 있는지 출력
        function burger (name, price, size){
            this.name = name;
            this.price = price;
            this.size = size;
        }
        const burgers = [
            new burger ('새우버거',5000,'big'),
            new burger ('불고기버거',4500,'regular'),
            new burger ('쥬니어불고기버거',3500,'small'),
            new burger ('치즈버거',5500,'regular'),
            new burger ('스테이크버거',7000,'big'),
            new burger ('치킨버거',5500,'regular'),
            new burger ('야채버거',4500,'regular'),
            new burger ('쥬니어새우버거',3000,'small'),
        ];
        let result = burgers.map(burger => burger.name).join(',');
        console.log(result);
        let result1 = burgers.filter(burger => burger.price <= 5000);
        console.log(result1);
        let result2 = burgers.filter(burger => burger.size === 'big');
        console.log(result2);
        let result3 = burgers.some(burger => burger.price <= 4000);
        console.log(result3);
    </script>
</body>
</html>

6) ex05.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //가위바위보 하기 
        let my = prompt('가위, 바위, 보 중 하나를 입력하세요');
        console.log(`나: ${my}`);
        let com = Math.floor(Math.random()*3);
        // console.log(com);
        if(my === '가위'){
            if(com === 0){
                console.log('com: 가위 당신은 비겼습니다');
            }else if(com === 1){
                console.log('com: 바위 당신은 졌습니다');
            }else if(com === 2){
                console.log('com: 보 당신은 이겼습니다');
            }
        }else if(my === '바위'){
            if(com === 0){
                console.log('com: 가위 당신은 이겼습니다');
            }else if(com === 1){
                console.log('com: 바위 당신은 비겼습니다');
            }else if(com === 2){
                console.log('com: 보 당신은 졌습니다');
            }
        }else if(my === '보'){
            if(com === 0){
                console.log('com: 가위 당신은 졌습니다');
            }else if(com === 1){
                console.log('com: 바위 당신은 이겼습니다');
            }else if(com === 2){
                console.log('com: 보 당신은 비겼습니다');
            }
        }
    </script>
</body>
</html>

7) ex05_teach.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1. 입력창에 가위, 바위, 보 중 하나를 입력받는다.
        //2. 컴퓨터도 랜덤하게 가위, 바위, 보 중 하나를 지정해준다.
        //3. 입력받은 값과 컴퓨터의 값을 비교하여 결과를 콘솔에 출력
        let rps = prompt('가위, 바위, 보 중 하나를 입력해주세요');
        rpsGame(rps);
        //컴퓨터의 값을 랜덤하게 반환해주는 함수
        function rpsRandom(){
            let num = Math.floor(Math.random() * 3); //0, 1, 2
            // let com_rps = num === 0 ? '가위' : com_rps === 1 ? '바위' : '보';
            if(num === 0) return '가위';
            else if(num === 1) return '바위';
            else return '보';
        }
        function rpsGame(rps){
            //사용자가 가위 또는 바위 또는 보를 입력하지 않았을때
            if(rps !== '가위' && rps !== '바위' && rps !== '보'){
                console.log('잘못입력하셨습니다.');
                return; //함수 종료
            }else {
                let com_rps = rpsRandom();
                console.log(`당신: ${rps} , 컴퓨터: ${com_rps}`);
                if(rps === com_rps) console.log('비겼습니다.');
                else if(rps === '가위' && com_rps === '보' || rps === '바위' && com_rps === '가위' || rps === '보' && com_rps === '바위'){
                    console.log('당신이 이겼습니다.');
                }else console.log('컴퓨터가 이겼습니다.');
            }
        }
    </script>
</body>
</html>

'노력이 좋아서' 카테고리의 다른 글

<step34>'js_복습'  (0) 2022.05.06
<step33>'울산관광 웹시안 및 구현'  (1) 2022.05.04
<step32>'js_객체object'  (0) 2022.05.03
<step31>'js_메소드, 객체'  (0) 2022.05.02
<step30>'js_while'  (0) 2022.04.29

    티스토리툴바

    개인정보

    • 티스토리 홈
    • 포럼
    • 로그인

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.