<step34>'js_복습'

1) varletconst.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>
        // console.log(num); //let - 변수 선언 전에 출력하면 reference error 발생
        console.log(num3); //var - 호이스팅 때문에 reference error 발생x 하지만 선언만 해당 - undefined로 받아짐
        var num3 = 3;
        let num;
        num = 10;
        const num2 = 20;
        console.log(num);
        for(i=0; i<3; i++){
            var varNum = i;
            console.log(varNum);
        }
        console.log(varNum); //var는 let, const와 다르게 블록 밖에서도 사용 가능
        function myFunc(){
            var varnum = 20;
            console.log(varnum);
        }
        myFunc();
        console.log(varnum); //var는 함수 스코프이기 때문에 함수 밖에서 사용 불가능
    </script>
</body>
</html>

2) ex01.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>
        //주사위 게임
        gameset();
        function gameset(){
            let me = Math.floor(Math.random() * 6 + 1);
            let com = Math.floor(Math.random() * 6 + 1);
            console.log(`컴퓨터의 주사위는 ${com}입니다.`);
            console.log(`당신의 주사위는 ${me}입니다.`);    
            if(me > com){
                console.log('당신의 승리입니다.');
            }else if(me < com){
                console.log('컴퓨터의 승리입니다.');
            }else console.log('비겼습니다.');
        }
    </script>
</body>
</html>

3) function.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>
        //인수, 매개변수, 함수, 반환, 리턴, 매개변수 기본값 설정
        function 빵만들기(재료1, 재료2='밀가루'){
            let 완성빵 = 재료1 + 재료2 + '빵';
            return 완성빵;
        }
        let 재료1 = '밀가루';
        let 재료2 = '옥수수';
        let 빵 = 빵만들기(재료1,재료2);
        console.log(빵);
        let 빵2 = 빵만들기('찹쌀','팥');
        console.log(빵2);
        let 빵3 = 빵만들기('딸기'); //재료2는 default값인 '밀가루'가 출력
        console.log(빵3);
        
        function myFunc(){
            console.log(1);
            console.log(2);
            return; //return 까지만 출력된다!
            console.log(3);
            console.log(4);
            console.log(5);
        }
        myFunc();

        //함수 표현식
        let 안녕 = function(){
            console.log('안녕');
            return '함수 표현식';
        }
        안녕();
        console.log(안녕); //()없으면 함수자체가 출력
        console.log(안녕());

        //콜백 함수
        //함수를 값처럼 전달하는 함수
        //빵만들기('옥수수','밀가루')

        function 대답(질문, 예스, 노){
            if(confirm(질문)) 예스();
            else 노();
        }
        function 동의(){
            alert('동의하셨습니다.');
        }
        function 비동의(){
            alert('동의하지 않았습니다.')
        }
        대답('동의하십니까?', 동의, 비동의);
    </script>
</body>
</html>

4) array.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 foods = ['🍖','🍗','🥩','🍔','🍕'];
        console.log(foods[foods.length - 1]); //마지막 배열의 값 출력
        //배열의 순환 for문
        for(i=0; i<foods.length; i++){
            console.log(foods[i]);
        }
        //배열 메소드 forEach문
        foods.forEach((val,index,arr)=>{
            console.log(val);
            console.log(index);
            console.log(arr);
        })
        //for...of문
        for(let val of foods){
            console.log(val);
        }
    </script>
</body>
</html>

5) object.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 fruit = prompt('어떤 과일을 좋아하세요?');
        //계산된 프로퍼티
        let fruitBag = {
            [fruit]: 10,  //문자열이 아닌 변수값을 key 값으로 주기 위해  [] 해준다
        }
        console.log(fruitBag);
        //단축 프로퍼티
        function makeUser(name, age){
            return {
                name,
                age,
            }
        }
        let user = makeUser('green',20);
        console.log(user);

        //in 연산자
        // "key" in object
        let user2 = {
            name: 'blue',
            age: 30,
        }
        console.log('name' in user2); //있으면 true 없으면 false

        //객체 반복
        //for...in문
        for(let key in user2){
            console.log(user2[key]);
        }
    </script>
</body>
</html>

6) 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>
    <style>
        li {list-style: none;}
        #wrap {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #fff;
            text-align: center;
            color: #fff;
            background: tomato;
        }
        ul {
            display: flex;
            justify-content: center;
            padding-right: 40px;
        }
        li {
            line-height: 50px;
            width: 100px;
            height: 100px;
            padding: 20px 40px;
            padding-top: 10px;
            margin: 0 20px;
            border: 1px solid #fff;
            font-weight: bold;
        }
        #con1 {
            border: 1px solid #fff;
        }
        #con2 {
            border: 1px solid #fff;
            display: flex;
            justify-content: center;
        }
        .con3 {
            margin: 0 40px;
            padding: 30px;
        }
        .check1 {
            border: 3px solid #111;
            width: 30px;
            height: 30px;
            display: inline-block;
            background: #fff;
            padding: 10px;
            line-height: 30px;
            color: #111;
            border-radius: 10%;
            font-weight: bold;
        }
        .check2 {
            border: 3px solid #111;
            width: 30px;
            height: 30px;
            background: #fff;
            padding: 10px;
            line-height: 30px;
            color: #111;
            margin-left: 15px;
            border-radius: 10%;
        }
        button {
            padding: 10px;
            border-radius: 10%;
            border: 3px solid #111;
        } 
        p {
            font-size: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="con1">
            <p>남은 슛 횟수<div class="check1" id="count">15</div></p>
            <ul>
                <li>컴퓨터<div class="check2" id="com_p">0</div></li>
                <li>사람<div class="check2" id="me_p">0</div></li>
            </ul>
            <p id="telling"></p>
        </div>
        <div id="con2">
            <div class="con3">
                <p>컴퓨터</p>
                <button id="com_sh" >슛하기</button>
            </div>
            <div class="con3">
                <p>사용자</p>
                <button id="me_sh2">2점슛</button>
                <button id="me_sh3">3점슛</button>
            </div>
        </div>
    </div>
    <script>
        //농구게임 규칙
        //1. 화면구성
        // 슛횟수 나타내기
        //컴퓨터 점수/ 사용자 점수
        // 알림글
        // 컴퓨터는 : 슛하기 버튼
        // 사용자는 : 2점슛, 3점슛 버튼

        // 2. 게임규칙
        // 1) 슛횟수는 15번입니다.
        // 2) 컴퓨터가 먼저 시작합니다.
        // 3) 컴퓨터는 슛하기를 클릭하면
        // 2점슛, 3점슛 50%확률로 선택하며,
        // 2점슛은 50% 성공률/ 3점슛은 30% 성공률로 
        // 성공과 실패를 결정한다.
        // 4) 결과는 알림글 화면에 출력된다.
        // 5) 성공하면 컴퓨터의 점수가 올라간다. 
        // 6) 컴퓨터 턴이 끝나면 사용자 버튼이 나타난다.(disabled)
        // 7) 사용자는 2점슛과 3점슛 버튼을 클릭할 수 있다.
        // 8) 2점슛은 50%확률 3점슛은 30%확률로 성공
        // 9) 성공하면 사용자 점수가 올라간다.
        // 10) 사용자 턴이 종료되면 남은 슛횟수가 1씩 줄어든다.
        // 11) 슛횟수가 0이 되면 게임이 종료
        // 12) 게임결과가 화면에 알림글 화면에 출력
       
        let count = 15;
        let com_p = 0;
        let me_p = 0;
        let temp = 0;

        document.querySelector('#com_sh').addEventListener('click',function(){
            let percent = Math.floor(Math.random() * 10 + 1);
            if(percent < 6) {
                console.log('2점슛 성공');
                com_p += 2;
                document.querySelector('#telling').innerHTML = '컴퓨터가 2점슛을 성공시켰습니다.'
            }else if(percent > 7) {
                console.log('3점슛 성공');
                com_p += 3;
                document.querySelector('#telling').innerHTML = '컴퓨터가 3점슛을 성공시켰습니다.'
            }else {
                document.querySelector('#telling').innerHTML = '컴퓨터가 슛을 실패했습니다.'
            }
            document.querySelector('#com_p').innerHTML = com_p;
            viewButton();
        });
        document.querySelector('#me_sh2').addEventListener('click',function(){
            let percent = Math.floor(Math.random() * 10 + 1);
            if(percent < 6) {
                console.log('2점슛 성공');
                me_p += 2;
                document.querySelector('#telling').innerHTML = '내가 2점슛을 성공했습니다.'
            }else {
                document.querySelector('#telling').innerHTML = '내가 2점슛을 실패했습니다.'
            }
            document.querySelector('#me_p').innerHTML = me_p;
            count -= 1;
            document.querySelector('#count').innerHTML = count;
            viewButton();
            if(count === 0 && com_p > me_p){
                document.querySelector('#telling').innerHTML = '경기가 종료되었습니다!!! 컴퓨터를 이길 순 없다!!'
            }else if(count === 0 && com_p < me_p){
                document.querySelector('#telling').innerHTML = '경기가 종료되었습니다!!! 왼손은 거들뿐... 쉽다'
            }else if(count === 0 && com_p === me_p){
                document.querySelector('#telling').innerHTML = '경기가 종료되었습니다!!! 비겼떠용'
            }
        });
        document.querySelector('#me_sh3').addEventListener('click',function(){
            let percent = Math.floor(Math.random() * 10 + 1);
            if(percent < 4) {
                console.log('3점슛 성공');
                me_p += 3;
                document.querySelector('#telling').innerHTML = '내가 3점슛을 성공했습니다.'
            }else {
                document.querySelector('#telling').innerHTML = '내가 3점슛을 실패했습니다.'
            }
            document.querySelector('#me_p').innerHTML = me_p;
            count -= 1;
            document.querySelector('#count').innerHTML = count;
            viewButton();
            if(count === 0 && com_p > me_p){
                document.querySelector('#telling').innerHTML = '경기가 종료되었습니다!!! 컴퓨터를 이길 순 없다!!'
            }else if(count === 0 && com_p < me_p){
                document.querySelector('#telling').innerHTML = '경기가 종료되었습니다!!! 왼손은 거들뿐... 쉽다'
            }else if(count === 0 && com_p === me_p){
                document.querySelector('#telling').innerHTML = '경기가 종료되었습니다!!! 비겼떠용'
            }
        });
        function viewButton(){
            if(temp == 0){
                document.querySelector("#com_sh").disabled=true;
                document.querySelector("#me_sh2").disabled=false;
                document.querySelector("#me_sh3").disabled=false;
                temp = 1;
            }
            else{
                document.querySelector("#com_sh").disabled=false;
                document.querySelector("#me_sh2").disabled=true;
                document.querySelector("#me_sh3").disabled=true;
                temp = 0;
            }
            if(count === 0){
                document.querySelector("#com_sh").disabled=true;
                document.querySelector("#me_sh2").disabled=true;
                document.querySelector("#me_sh3").disabled=true;
            }
        }
    </script>
</body>
</html>

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

<step36>'js_메소드, 동기 비동기' (0)	2022.05.10
<step35>'농구게임복습' (0)	2022.05.09
<step33>'울산관광 웹시안 및 구현' (1)	2022.05.04
<step33>'js_객체 응용' (0)	2022.05.04
<step32>'js_객체object' (0)	2022.05.03

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

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

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

<step34>'js_복습'

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

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역