본문 바로가기
JavaScript

JavaScript(주석, 예외처리, 모듈, 가위바위보/ 퀴즈 문제)

by code2772 2022. 11. 14.

[ 목차 ]

    728x90
    반응형
    ✔ 주석
        // 한줄짜리 주석
        /* */ 여러줄 주석
        /** */ JSDoc을 사용하면 좋음!

        ✔ 주석은 코드 자체를 설명하는 것이 아닌 왜(WHY)와 어떻게(HOW)를 설명하는 것이 좋음
    /**
     * JSDoc
     * 주어진 두 인자를 더한 값을 반환함
     * @param {*} num1 숫자1
     * @param {*} num2 숫자2
     * @returns num1과 num2를 더한값
     */

    function add (num1, num2){
        return num1+num2;
    }


    예외처리
try {
예외가 발생할 것으로 예상되는 문장;
...
}catch(error객체)
예외가 발생했을 떄 처리할 문장;
...
}finally{
예외와 광계없이 무조선 실행할 문장;
...
}
    ✔ 1
     
    function readFile(path){
        throw new Error('파일 경로를 찾을 수 없음')
        return '파일의 내용을 리턴함';
    }

    function processFile(path){
        let content;
        try{
            content = readFile(path);
        }catch(error){
            console.log(error);
            content = '기본내용';
        }finally{
            console.log('에러의 발생 여부와 관계없이 실행할 문징을 작성함')
        }
        const result = '결과 : ' + content;
        return result ;
    }

    const result = processFile('경로');
    console.log(result)

    ✔ 2

    // 책임전가 함수는 Stack 구조를 띄고있는 코드 func3 -> 2 -> 1 -> 2 -> 3 순으로 실행
    function func1(){
        console.log('func1이 호출되었어요!');
        throw new Error('에러발생!');
        // func1에서 에러발생 -> func2로 다시 돌아갔는데
        // try문이 있기 때문에 예외상황을 확인 후 처리
    }
    function func2(){
        try{
            func1();
        }catch(error){
        console.log('에러예외처리완료!')
        throw error; // =  throw new Error('에러발생!');
        }

    }
    function func3(){
        try{
            func2();
        }catch(error){
            console.log('여기에서 예외처리 또 완료!')
        }
    }
    func3();
    console.log('프로그램이 정상적으로 종료되었습니다!')

    // 결과!
    // func1이 호출되었어요!
    // 에러예외처리완료!
    // 여기에서 예외처리 또 완료!
    // 프로그램이 정상적으로 종료되었습니다!

     

    ❗❗모듈(module) - 중요

export default : 모듈에서 단 한개만 사용할 수 있는 함수 또는 변수, 다른 파일에서 접근불가
export : 모듈에서 여러개를 사용할 수 있는 함수 또는 변수

모듈로 작성된 파일을 추가하는 방법
<script type = "module" src = "경로"></script>
    <!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>모듈</title>
        <script type="module" src="./count.js"></script>
        <script type="module" src="./main.js"></script>
    </head>
    <body>
        <h2>모듈</h2>
    </body>
    </html>

     

     

    let  count = 0;
    export  function increase(){
        // default는 한개만 생성가능하며 추가로 export는 사용 불가하다.
        count++;
        console.log(count);
    }

    export function getCount(){
        return count;
    }

     

     

    // default가 있는 경우

    // import increase from './count.js';
    // //     --------       -----------
    // //    가저올 함수       파일 이름
    // increase();  


    // //default가 없는 경우

    // import {increase} from "./count.js";
    // increase();


    // default가 없고 여러 함수를 호출하는 경우

    // import {increase, getCount} from "./count.js";
    // increase();
    // increase();
    // increase();
    // increase();
    // increase();
    // console.log(getCount())

    // 이름이 동일한 병우 별명을 부여하여 중복배제
    // import { increase as add } from "./count.js";
    // add();

    // 모두 호출하는 방벙 as를 저체 별명으로 만들고 호출하기!
    import * as cnt from './count.js';
    cnt.increase();
    cnt.increase();
    console.log(cnt.getCount());
     
    ✔ 문제
아래 조건을 가진 프로그램을 작성해보자
1. 주어진 초가 지나면 콜백함수를 호출함
2. 콜백함수의 내용은 '타이머 완료' 라는 문자열을 출력
단, 초는 밀리세컨드가 아닌 초로 입력, 초는 0보다 작으면 에러를 발생, 콜백함수를 등록하지 않으면 에러가 발생
    function runInDelay(Callback,seconds){
      if(!Callback){
        throw new Error('Callback함수를 전달해야 합니다');
      }
      if(!seconds || seconds <0){
        throw new Error('seconds는 0보다 커야합니다.');
    }
    setTimeout(Callback, seconds*1000);
    }

    try{
        runInDelay(() => {
            console.log('타이머 완료')
        }, 2)
    }catch(error){
        console.log(error)
    }
    과제 1
1. 가위바위보 게임을 작성
(단, 유저가 이길때까지 반복해서 게임)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <script>
            var playerStateChar = "";
            var playerState = 0;
            var comStateChar = "";
            var comState = 0;

            function play(num) {
                if (num == 1) {
                    playerStateChar = "가위";
                    playerState = 1;
                }
                else if (num == 2) {
                    playerStateChar = "바위";
                    playerState = 2;
                }
                else {
                    playerStateChar = "보";
                    playerState = 3;
                }
       
                setComState();    
                setDistinct();
                showResult();
            }

            function setComState() {        
                var state = Math.floor(Math.random() * 3) + 1;
                comState = state;
                if (state == 1) {
                    comStateChar = "가위";
                }
                else if (state == 2) {
                    comStateChar = "바위";
                }
                else {
                    comStateChar = "보";
                }
            }

            function setDistinct() {
                if (playerState == comState) {
                    result = 0;
                }
                else {
                    if (playerState == 1) {
                        if (comState == 2) {
                            result = -1;
                        }
                        else if (comState == 3) {
                            result = 1;
                        }
                    }
                    else if (playerState == 2) {
                        if (comState == 1) {
                            result = 1;
                        }
                        else if (comState == 3) {
                            result = -1;
                        }
                    }
                    else {
                        if (comState == 1) {
                            result = -1;
                        }
                        else if (comState == 2) {
                            result = 1;
                        }
                    }
                }
            }
            function showResult() {
                if (result == 0) {
                 
                    alert("나 : " + playerStateChar + "\n컴퓨터 : " + comStateChar + "\n\n비겼습니다😬");
           
                }
                else if (result == 1) {
                 
                    alert("나 : " + playerStateChar + "\n컴퓨터 : " + comStateChar + "\n\n이겼습니다😁");
                   
                }
                else {
                   
                    alert("나 : " + playerStateChar + "\n컴퓨터 : " + comStateChar + "\n\n짐😡");
                }
            }

        </script>
        <style>
           
            button{
                border: solid 1px ;
                border-radius: 100%;            
        }
     
        </style>
    </head>

    <body>
        <div style="text-align: center;">
        <button id="b" onclick="play(1)">✌</button>
        <button id="b" onclick="play(2)">👊</button>
        <button id="b" onclick="play(3)">🖐</button>
    </div>
    </body>

    </html>

     

    과제 2
2. 퀴즈 문제 맞추기 게임을 작성
- 약 20개 이상의 문제를 미리 등록
- 미리 등록한 문제 중 3개를 출력하고 몇개 맞았는지 확인
- 3개 모두 맞추지 못할 경우 재시험
(단, 1문제씩 출력하며 답을 전송 후 3초 후에 다음 문제가 출력)
    반응형
    저작자표시 비영리 변경금지

    'JavaScript' 카테고리의 다른 글

    JavaScript JSON  (0) 2022.11.17
    JavaSript Promise Object  (0) 2022.11.15
    JavaScript(set, map, operator)  (0) 2022.11.10
    JavaScript(이벤트전파, iterable, generator, spread)  (0) 2022.11.10
    JavaScript(이벤트 타입/리스너/객체)  (0) 2022.11.10

    관련글

    티스토리툴바