본문 바로가기
개발/자바스크립트

JavaScript 기본 2

by ^..^v 2023. 1. 26.
728x90
반응형

실습 방법

1. 작업 디렉터리에서 code HTML_FILE_NAME 명령어로 파일을 생성합니다.

2. 작업 디렉터리에서 http-server 명령어로 웹 서버를 실행합니다. 

C:\javascript> http-server 
Starting up http-server, serving ./

http-server version: 14.1.1    

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible    
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://192.168.0.2:8080
  http://127.0.0.1:8080				<== 접속주소
Hit CTRL-C to stop the server

3. 웹 브라우저로 http://localhost:8080/HTML_FILE_NAME 으로 접속해서 실행을 확인합니다. 

 

 

if 조건문

 

if-statement.html

number 변수에 설정된 값을 2로 나누어 나머지가 0인 경우 짝수를, 1인 경우 홀수를 콘솔에 출력

<!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>
    <script>
        let number = 40;

        if (number % 2 === 0) {
            console.log(`${number}는 짝수입니다.`);
        }
        if (number % 2 === 1) {
            console.log(`${number}는 홀수입니다.`);
        }
    </script>
</head>
<body>
   
</body>
</html>

 

if-statement-loop.html

입력창에 입력한 숫자를 2로 나누어 나머지가 0인 경우 짝수를, 1인 경우 홀수를 콘솔에 출력

<!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>
    <script>
        let input = '';

        while(true) {
            input = prompt(`숫자 또는 'Q' 'q'를 입력하세요.`);

            if (input === 'Q' || input === 'q') {
                console.log('프로그램을 종료합니다.');
                break;
            }

            let number = Number(input);
            if (isNaN(number)) {
                console.log(`${input}은/는 숫자가 아닙니다.`);
                continue;
            }

            if (number % 2 === 0) {
                console.log(`${number}는 짝수입니다.`);
            }
            if (number % 2 === 1) {
                console.log(`${number}는 홀수입니다.`);
            }
        }
    </script>
</head>
<body>
   
</body>
</html>

 

if-statement-ampm.html

현재 시간이 12시 이전인 경우 오전을, 12시 이후인 경우 오후를 콘솔에 출력

<!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>
    <script>
        let now = new Date();

        console.log(now);
        console.log(now.getFullYear());
        console.log(now.getMonth()+1);
        console.log(now.getDate());
        console.log(now.getDay());
        console.log(now.getHours());
        console.log(now.getMinutes());
        console.log(now.getSeconds());

        if (now.getHours() < 12) {
            console.log("오전");
        }
        if (now.getHours() >= 12) {        
            console.log("오후");
        }
    </script>
</head>
<body>
   
</body>
</html>

 

 

if-else 조건문

 

if-else-statement.html

number 변수에 설정된 값을 2로 나눴을 때 나머지가 0이면 짝수, 아닌 경우 홀수를 콘솔에 출력

<!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>
    <script>
        let number = 40;

        if (number % 2 === 0) {
            console.log(`${number}는 짝수입니다.`);
        } else {
            console.log(`${number}는 홀수입니다.`);
        }
    </script>
</head>
<body>
   
</body>
</html>

 

if-else-statement-loop.html

입력창에 입력한 숫자를 2로 나누어 나머지가 0인 경우 짝수를, 아닌 경우 홀수를 콘솔에 출력

<!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>
    <script>
        let input = '';

        while(true) {
            input = prompt(`숫자 또는 'Q' 'q'를 입력하세요.`);

            if (input === 'Q' || input === 'q') {
                console.log('프로그램을 종료합니다.');
                break;
            }

            let number = Number(input);
            if (isNaN(number)) {
                console.log(`${input}은/는 숫자가 아닙니다.`);
                continue;
            }

            if (number % 2 === 0) {
                console.log(`${number}는 짝수입니다.`);
            } else {
                console.log(`${number}는 홀수입니다.`);
            }
        }
    </script>
</head>
<body>
   
</body>
</html>

 

if-else-statement-ampm.html

현재 시간이 12시 이전인 경우 오전을, 아닌 경우 오후를 콘솔에 출력

<!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>
    <script>
        let now = new Date();

        console.log(now);
        console.log(now.getFullYear());
        console.log(now.getMonth()+1);
        console.log(now.getDate());
        console.log(now.getDay());
        console.log(now.getHours());
        console.log(now.getMinutes());
        console.log(now.getSeconds());

        if (now.getHours() < 12) {
            console.log("오전");
        } else {
            console.log("오후");
        }
    </script>
</head>
<body>
   
</body>
</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>
    <script>
        let now = new Date();
        let hour = now.getHours();
        if (hour < 11) {
            console.log("아침 먹을 시간 입니다.");
        } else {
            if (hour < 15) {
                console.log("점심 먹을 시간 입니다.");
            } else {
                console.log("저녁 먹을 시간 입니다.");
            }
        }
    </script>
</head>
<body>
   
</body>
</html>

 

 

if - else if 조건문

<!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>
    <script>
        let now = new Date();
        let hour = now.getHours();
        if (hour < 11) {
            console.log("아침 먹을 시간 입니다.");
        } else if (hour < 15) {
            console.log("점심 먹을 시간 입니다.");
        } else {
            console.log("저녁 먹을 시간 입니다.");
        }
    </script>
</head>
<body>
   
</body>
</html>

 

 

switch 조건문

<!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>
    <script>
        let input = 32;
        switch(input % 2) {
            case 0:
                console.log('짝수');
                break;
            case 1:
                console.log('홀수');
                break;
        }
    </script>
</head>
<body>
   
</body>
</html>

 

switch without break

<!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>
    <script>
        let now = new Date();


        switch(now.getMonth() + 1) {
            case 12:
            case 1:
            case 2:
                console.log("겨울");
                break;
            case 3:
            case 4:
            case 5:
                console.log("봄");
                break;
            case 6:
            case 7:
            case 8:
                console.log("가을");
                break;
            case 9:
            case 10:
            case 11:
                console.log("겨울");
                break;          
            default:
                console.log("없는 계절입니다.");
                break;
        }
    </script>
</head>
<body>
   
</body>
</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>
    <script>
        {
            let test;


            test = typeof(test) != 'undefined' ? test : "초기값1";
            console.log(test);


            test = typeof(test) != 'undefined' ? test : "초기값2";
            console.log(test);        
        }        
        {
            let test;


            if (typeof(test) == 'undefined') {
                test = "초기값1";
            }
            console.log(test);


            if (typeof(test) == 'undefined') {
                test = "초기값2";
            }
            console.log(test);
        }
    </script>
</head>
<body>
   
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지

'개발 > 자바스크립트' 카테고리의 다른 글

JavaScript 기본 3  (0) 2023.01.27
JavaScript 기본 1  (0) 2023.01.25
별점 표시 및 입력  (0) 2023.01.20

관련글

댓글

티스토리툴바