Js 기초(if, for)- AWS 풀스택 과정 18일차

Front-end/Js

Js 기초(if, for)- AWS 풀스택 과정 18일차

awspspgh 2024. 8. 7. 18:08

오늘은 if, switch, for에 대해서 배워보도록 하겠습니다

목차
1.	date
2.	if
3.	switch
4.	for
5.	예제 문제
6.	느낀 점

1. date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>날짜 관련 함수</h1>
    <ul>
        <li>
            new Date(); => 오늘 날짜 반환
            new Date(string); => string 날짜 형식으로 변환
        </li>
        <li>getFullYear(); 연도만 리턴</li>
        <li>getMonth()+1; => 0월부터 11월까지 +1</li>
        <li>getDate(); => 1~31 리턴</li>
        <li>getDay(); => 요일을 리턴 0(일)~6(토)</li>
        <li>getHours(), getMinutes(), getSeconds() : 시분초 추출</li>
        <li>
            toLocaleDateString() : 2024.08.07
            toLocaleTimeString()
            toLocaleString()
        </li>
    </ul>

    <script>
        let today = new Date();
        console.log(today);
        console.log(today.getFullYear());
        console.log(today.getMonth()+1);
        console.log(today.getDate());
        console.log(today.getDay());
        console.log(today.getHours());
        console.log(today.getMinutes());
        console.log(today.getSeconds());
        console.log(today.toLocaleDateString());
        console.log(today.toLocaleTimeString());
        console.log(today.toLocaleString());
    </script>
</body>
</html>

▷ 출력

▣ 주민등록번호

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        이름 : <input type="text" id="name"><br>
        주민번호 : <input type="text" id="num"><br>
        <button type="button" id="btn">확인</button>
    </form>

    <h3 id="h3"></h3>

    <script>
        document.getElementById('btn').addEventListener('click', ()=>{
            let name = document.getElementById('name').value;        // 이름
            let num = document.getElementById('num').value;
            let birth = num.substring(0, num.indexOf('-'));        // 생년월일
            let age = num.substring(0, 2);
            let year = num.charAt(num.indexOf('-')+1);
            let gender = (year == 1 || year == 3) ? '남' : '여';     // 성별
            let Year = (year == 1 || year == 2) ? 1900 : 2000;
            let today = new Date();

            let result = Number(today.getFullYear()) - Year + Number(age);  // 나이 error

            let h3 = document.getElementById('h3');

            let str = `이름: ${name}, `;
            str += `생년월일: ${birth}, `;
            str += `나이: ${result}, `;
            str += `성별: ${gender}`;

            h3.innerText = str;

        })
    </script>
</body>
</html>

▷ 출력

2. if

◈ Math

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>수학 관련 함수</h1>
    <ul>
        <li>Math 클래스 : 반올림, 올림, 버림, 최대값, 최솟값, 난수발생...</li>
        <li>
            Math.round(), Math.ceil(), Math,floor(),
            Math.max(), Math.min(), Math.random()
        </li>
        <li>Math.random : 0(포함) ~ 1(미포함) 사이의 난수를 리턴</li>
        <li>Math.floor(Math.random()*개수)+시작값</li>
        <li></li>
    </ul>
    <script>
        console.log(Math.floor(Math.random()*10)+1); // 1 ~ 10까지의 난수
        console.log(Math.max(10, 20, 5 , 90, 60));
        console.log(Math.min(40, 20, 1, 5, 6, 7));
    </script>
</body>
</html>

◈ type_convert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>타입 변환 casting(형변환)</h1>
    <ul>
        <li>문자 -> 숫자 : Number("string"), parseINt("1"), parseFloat("0.5")</li>
        <li>숫자 -> 문자 : 123.toString()</li>
        <li>문자 -> 불리언 : Boolean("true")</li>
        <li>불리언 -> 문자 : String(true)</li>
        <li>숫자 -> 불리언 : Boolean(1) = true / Boolean(0) = false</li>
        <li>불리언 -> 숫자 : Number(true) = 1 / Number(false) = 0</li>
    </ul>
    <script>
        console.log(String(true), typeof String(true));
        console.log(Boolean(0), typeof Boolean(1));
        console.log(Number(false), typeof Number(true));
    </script>
</body>
</html>

◈ if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>조건문</h1>
    <ul>
        <li>if / switch() : 조건문</li>
        <li>
            if(조건식) { 실행문; } : 조건식은 반드시 true / false 이어야만 한다.
        </li>
        <li>
            if(조건식){
                true 실행문;
            }else{
                false 실행문;
            }
        </li>
        <li>
            if(조건식){
                true 실행문;
            } else if(조건식2){
                true 실행문
            }else{
                모든 조건이 false일 경우 실행문;
            }
        </li>
    </ul>
    <h3 id="h3"></h3>
    <script>
        let num = 21;
        // num 홀짝 여부를 출력
        if(num % 2 == 0){
            console.log("짝수입니다.");
        }else{
            console.log("홀수입니다.");
        }

        let kor = 78;
        let eng = 89;
        let math = 80;

        // 합계와 평균을 콘솔에 출력
        // 평균이 70점 이상이면 합격이라고 출력
        


        let sum = kor + eng + math;
        let avg = sum / 3;
        let h3 = document.getElementById('h3');
        let str = '';
        if(avg >= 70){
            str = '합격';
        }else{
            str = '불합격';
        }
        h3.innerText = str;
    </script>
</body>
</html>

▷ 출력

▣ 성적 계산

        // 이름, 국어, 영어, 수학 점수를 입력받아 합계, 평균, 합격 여부를 출력
        // 합격 여부는 평균이 60이상이면 pass / fail

        // 입력값의 범위가 0 ~ 100 사이의 점수가 아니면 alert 창을 띄어 안내

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>성적 확인</legend>
            이름 : <input type="text" id="name"><br>
            국어 : <input type="text" id="kor"><br>
            영어 : <input type="text" id="eng"><br>
            수학 : <input type="text" id="math"><br>
            <button type="button" id="btn">성적 계산</button>
        </fieldset>
    </form>
    <h3 id="result"></h3>
    <script>
        document.getElementById('btn').addEventListener('click', ()=>{
            let name = document.getElementById('name').value;
            let kor = Number(document.getElementById('kor').value);
            let eng = Number(document.getElementById('eng').value);
            let math = Number(document.getElementById('math').value);

            // 점수 범위 제한
            if((kor >= 0 && kor <= 100) && (eng >= 0 && eng <= 100) && (math >= 0 && math <= 100)){
                let sum = kor + eng + math;
                let avg = sum / 3;

                // 합격, 불합격
                let pass = ' ';
                if(avg >= 60){
                    pass = 'pass';
                } else{
                    pass = 'fail';
                }

                // 출력
                const result = document.getElementById('result');
                let str = `이름 : ${name}, `;
                str += `국어 : ${kor}, `;
                str += `영어 : ${eng}, `;
                str += `수학 : ${math}, `;
                str += `합계 : ${sum}, `;
                str += `평균 : ${avg}, `;
                str += `합격여부 : ${pass}`;

                result.innerHTML = str;

            }else{
                alert('점수를 잘못 입력하셨습니다(범위: 0 ~ 100)');
            }
        })
    </script>
</body>
</html>

▷ 출력

3. switch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>switch 조건문</h1>
    <ul>
        <li>
            switch(식/값){
                case 1:
                    처리문;
                    break;
                case 2:
                    처리문;
                    break;
                case 3:
                    처리문;
                    break;
                default: 처리문;
            }
        </li>
        <li>
            switch(식/값){
                case1: case2: case3:
                    처리문;
                    break;
                case4: case5: case6:
                    처리문;
                    break;
                default: 처리문;
            }
        </li>
    </ul>
    <script>
        let num = 20;
        switch(num % 2){
            case 0:
                console.log('짝수');
                break;
            case 1:
                console.log('홀수');
            default:
                console.log('오류');
        }
    </script>
</body>
</html>

▣ 오늘 날짜 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>오늘은...</h1>
    <button type="button" id="btn">Today</button>
    <h3 id="result">
        <!-- 오늘 날짜와 요일 출력 -->
         <!-- 2024. 8. 7.(수) -->
    </h3>

    <script>
        document.getElementById('btn').addEventListener('click', ()=>{
            let today = new Date();
            let date = today.toLocaleDateString();
            let day = '';
            switch(today.getDay()){
                case 0:
                day = '(일)';
                break;
                case 1:
                day = '(월)';
                break;
                case 2:
                day = '(화)';
                break;
                case 3:
                day = '(수)';
                break;
                case 4:
                day = '(목)';
                break;
                case 5:
                day = '(금)';
                break;
                case 6:
                day = '(토)';
                break;
                default:
                console.log('오류');
                break;
            }
            let result = document.getElementById('result');
            result.innerText = `${date} ${day}`;
        })

    </script>
</body>
</html>

▷ 출력

4. for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>반복문 : for, while, do~while</h1>
    <ul>
        <li>
            for : 반복 횟수가 명확할 때
            for(초기값; 조건식; 증감식){ => 조건식이 true이면 반복실행
                실행코드;
            }
        </li>
        <li>
            while : 반복 횟수가 명확하지 않을 때
            while(조건식){
                실행코드;
                (조건식이 false가 될 수 있도록 조건식의 변경값을 포함.)
            }
        </li>
        <li>
            조건식이 계속 true를 유지하면 무한루프
            실행문 안에 조건식이 false가 될 수 있는 구문이 반드시 있어야 함.
        </li>
        <li>break; 구문을 통해 반복문을 빠져나갈 수 있음.</li>
    </ul>
    <script>
        // 1 ~ 10까지 콘솔에 출력

        for(let i = 1; i <= 10; i++){
            console.log(i);
        }

        // 반복문을 모두 실행한 후 i = 11
        console.log('--------------');
        let i = 1;
        while(i<=10){
            console.log(i);
            i ++;
        }
    </script>
</body>
</html>

▷ 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1 ~ 10까지의 합계 -->
     <script>
        let sum = 0;
        let i = 0;
        for(i = 1; i <= 10; i++){
            sum += i;
        }
        console.log(sum);
        
        sum = 0;
        i = 1;
        while(i<=10){
            sum += i;
            i++; 
        }
        console.log(sum);

        console.log("-----------------");

        // 구구단 3단 출력 3 * 1 = 3
        let dan = 3; // 3단
        let incre = 1; // 1 ~ 9증가

        while(incre <= 9){
            console.log(`${dan} * ${incre} = ${dan * incre}`);
            incre ++;
        }
     </script>
</body>
</html>

▷ 출력

▣ 구구단 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        table tr, td{
            border: 1px solid black;
            text-align:  center;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <!-- 
        테이블 추가
        2 * 1 = 2  3 * 1 = 3  4 * 1 = 4 ... 9 * 1 = 9
        2 * 2 = 4  3 * 2 = 6  4 * 2 = 8 ... 9 * 2 = 18
        ...
        incre = 1 => tr 하나 생성
        for dan = 2 ~ 9 반복 td 생성
        incre = 2 => tr 하나 생성
        for dan = 2 ~ 9 반복 td 생성
        
    -->
    <button type="button" id="btn">구구단 출력</button>
    <table id="gugu"></table>
    <script>
        let incre = 1;
        let str = '';
        let dan = 2;
        document.getElementById('btn').addEventListener('click', ()=>{
            const gugu = document.getElementById('gugu');
            while(incre <= 9){            // 뒤에 꺼
                str += `<tr><td>${dan} * ${incre} = ${dan * incre}</td>`;
                for(i = 3; i <= 9; i++){                 // 앞에 꺼
                    str += `<td>${i} * ${incre} = ${i * incre}</td>`;
                }
                str += '</tr>'
                incre ++;
            }
            gugu.innerHTML = str;
        })
    </script>
</body>
</html>

▷ 출력

◈ 향상된 for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>향상된 for</h1>
    <ul>
        <li>
            for of : 배열 안의 내용을 탐색할 때 사용 []
            for(let value of Array){
                code...;
            }
        </li>
        <li>
            for in : 객체 안의 내용을 탐색할 때 사용 { }
            for(let value in Object){
                <!-- key:value -->
                code...;
            }
        </li>
    </ul>
</body>
</html>

▣ 약수 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>약수 출력하기</h3>
    <input type="text" id="num">
    <button type="button" id="btn">약수 출력</button>
    <h3 id ="result">
        약수 출력 / 개수<br>
    </h3>
    <script>
        // 약수는 1 ~ 자기자신의 수(num)까지 나눈 나머지가 0인 수
        // 6%1 6%2 6%3 6%4 6%5 6%6
        
        document.getElementById('btn').addEventListener('click', ()=>{
            let num = Number(document.getElementById('num').value);
            console.log(num);
            let result = document.getElementById('result');
            let check = 0;
            let str = '약수 출력 / 개수<br>';
            for(let i = 1; i <= num; i++){
                if(num % i == 0){
                    str += `${i} `
                    check ++;
                }
            }
            str += `/ 총 ${check}개`;
            result.innerHTML = str;
        })
    </script>
</body>
</html>

▷ 출력

5. 예제 문제

◎ 문제

▶ 1번

        // 가위 = 1, 바위 = 2, 보 = 3
        // com = random / player = random
        // 승률 (승 / (10 - 무)*100 소수점 2자리까지 표현)
        // 콘솔 com / player 출력
        // 콘솔에 승: 무: 패:

▷ 출력

◎ 정답

▶ 1번

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>가위바위보 10번을 하여 승률 출력</h1>
    <button type="button" id="btn">결과 출력</button>
    <h3>게임의 승률은 <span id="result"></span>% 입니다.</h3>

    <script>
        // 가위 = 1, 바위 = 2, 보 = 3
        // com = random / player = random
        // 승률 (승 / (10 - 무)*100 소수점 2자리까지 표현)
        // 콘솔 com / player 출력
        // 콘솔에 승: 무: 패:

        document.getElementById('btn').addEventListener('click', ()=>{
            let result = document.getElementById('result');
            let count = 1;
            let win = 0;
            let drow = 0;
            let lose = 0;
            while(count <= 10){
                let com = Math.floor(Math.random()*3)+1;
                let player = Math.floor(Math.random()*3)+1;
                console.log(`${com} / ${player}`);
                if((player == 1 && com == 3) || (player == 2 && com == 1) || (player == 3 && com == 2)){
                    win ++;
                }else if(player == com){
                    drow ++;
                }else{
                    lose ++;
                }
                count ++;
            }

            console.log(`승: ${win} 무:${drow} 패: ${lose}`);
            let str = (win / (count - drow) * 100).toFixed(2);
            result.innerText = str
        })
    </script>
</body>
</html>

6. 느낀 점

오랫만에 for, if 등을 적극적으로 활용하며 수학적 사고를 할 수 있어서 재미있었다.

'Front-end > Js' 카테고리의 다른 글

Js 기초(class)- AWS 풀스택 과정 21일차 (0)	2024.08.12
Js 기초(set, map)- AWS 풀스택 과정 20일차 (0)	2024.08.09
Js 기초(array)- AWS 풀스택 과정 19일차 (0)	2024.08.08
Js 기초(input, string)- AWS 풀스택 과정 17일차 (0)	2024.08.06
Js 설정 및 기초(function, event) - AWS 풀스택 과정 16일차 (0)	2024.08.05

현재글Js 기초(if, for)- AWS 풀스택 과정 18일차

awspspgh 님의 블로그

awspspgh 님의 블로그 입니다.

MySQL, spring boot, AWS, DB, html_css_js, sqld, JSP, jpa, Spring, java, final, 자격증, Python, CSS, 티스토리챌린지, react, 오블완, JS, Project, 풀스택,

Today :
Yesterday :

awspspgh 님의 블로그

Js 기초(if, for)- AWS 풀스택 과정 18일차

1. date

▷ 출력

▣ 주민등록번호

▷ 출력

2. if

◈ Math

◈ type_convert

◈ if

▷ 출력

▣ 성적 계산

▷ 출력

3. switch

▣ 오늘 날짜 출력

▷ 출력

4. for

▷ 출력

▷ 출력

▣ 구구단 출력

▷ 출력

◈ 향상된 for

▣ 약수 출력

▷ 출력

5. 예제 문제

◎ 문제

▶ 1번

▷ 출력

◎ 정답

▶ 1번

6. 느낀 점

'Front-end > Js' 카테고리의 다른 글

'Front-end/Js'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Js 기초(if, for)- AWS 풀스택 과정 18일차

1. date

▷ 출력

▣ 주민등록번호

▷ 출력

2. if

◈ Math

◈ type_convert

◈ if

▷ 출력

▣ 성적 계산

▷ 출력

3. switch

▣ 오늘 날짜 출력

▷ 출력

4. for

▷ 출력

▷ 출력

▣ 구구단 출력

▷ 출력

◈ 향상된 for

▣ 약수 출력

▷ 출력

5. 예제 문제

◎ 문제

▶ 1번

▷ 출력

◎ 정답

▶ 1번

6. 느낀 점

'Front-end > Js' 카테고리의 다른 글

'Front-end/Js'의 다른글

관련글

티스토리툴바