자바스크립트 연산자, 조건문, 반복문 (JavaScript Operator, Conditional Statements, Loop)

자바스크립트 연산자, 조건문, 반복문 (JavaScript Operator, Conditional Statements, Loop)

1. 연산자

※ 자바와 다른 연산자

/ (실제 나누기 연산 결과)
== (타입이 달라도 값만 같으면 true, 숫자를 문자로 강제 형 변환해서 비교)
=== (타입과 값이 모두 일치해야 true)

<body>
    <script>
        
        console.log(100/3)
        console.log(100%3)

        console.log(3=='3')
        console.log(3==='3')

        let dinner = confirm('저녁 먹었어?')
        let question = dinner === true ? '카페 갈래?' : '저녁 먹을래?'
        console.log(question)
        
    </script>
</body>

2. 조건문

※ 자바와 다른 조건문 구문

구문 자체 형식은 똑같음
변수 타입은 자바의 int,str 등이 아닌 var, let, const 사용
문자열 비교 조건 시 자바의 .equals()가 아닌 비교연산자 사용

▶ 연습

<body>
    <script>
        // 사용자에게 색깔을 입력받기 '색상을 입력해주세요 (빨강, 초록, 파랑)'
        // consle창에 선택한 색상은 빨강색 입니다.

        let choice = prompt('색상을 입력해주세요 (빨강, 초록, 파랑)')

        if (choice==='빨강'){
            console.log('선택한 색상은 '+choice+'색 입니다.')
            document.getElementsByTagName('body')[0].style.backgroundColor = 'red'
        } else if (choice==='초록') {
            console.log('선택한 색상은 '+choice+'색 입니다.')
            document.getElementsByTagName('body')[0].style.backgroundColor = 'green'
        } else if (choice==='파랑') {
            console.log('선택한 색상은 '+choice+'색 입니다.')
            document.getElementsByTagName('body')[0].style.backgroundColor = 'blue'
        } else {
            console.log('잘못 입력하셨습니다.')
        }
        
    </script>
</body>

▶ 예제

코로나 검사 프로그램

① 사용자에게 코로나 검사 여부 확인하기 (confirm, '코로나 검사 하셨나요?')

② 검사를 했을 때 : 사용자에게 양성 음성 여부 확인

양성 : 팝업창으로 집에서 5일간 격리하세요!

음성 : 안녕히가세요~

③ 검사를 안했을 때 : 팝업창으로 검사 하고 오세요!

<body>
    <script>
 
        let check = confirm('코로나 검사 하셨나요?')

        if (check===true) {
            let check2 = prompt('양성인가요? 음성인가요?')
            if (check2==='양성') {
                alert('집에서 5일간 격리하세요!')
            } else {
                alert('안녕히가세요~')
            }
        } else {
            alert('검사 하고 오세요!')
        }

    </script>
</body>

3. 반복문

※ 자바와 형식이 같음

▶ 연습

<body>
    <script>
        // for문
        for (let i = 0; i<10; i++) {
            console.log(i+1)
        }

        // while문

        let num = 0

        while (num < 10) {
            console.log(num)
            num++
        }

    </script>
    
</body>

▶ 실습

랜덤 게임

① 랜덤한 수(1~100)를 하나 뽑아주기 Math.random()

② 사용자에게 숫자를 정답 전까지 계속 입력 받기

③ 숫자를 비교 판정

사용자 숫자 > 랜덤 숫자 ' 입력한 숫자보다 작은 수 입니다.'

사용자 숫자 < 랜덤 숫자 ' 입력한 숫자보다 큰 수 입니다.'

사용자 숫자 = 랜덤 숫자 ' 정답입니다. 축하합니다!'

<body>
    <script>
        
        let ranNum = parseInt(Math.random()*100+1)

        while (true) {
            let choice = parseInt(prompt('숫자를 입력하세요.'))
            
            if (ranNum === choice ) {
                alert('정답입니다. 축하합니다!')
                break;
            }

            result = ''
            ranNum > choice ? result='입력한 숫자보다 큰 수 입니다.' : result='입력한 숫자보다 작은 수 입니다.' 
            alert(result)
        }

    </script>
</body>

저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

자바스크립트 함수 (JavaScript Function) (0)	2023.01.14
자바스크립트 배열 (JavaScript Array) (1)	2023.01.14
자바스크립트 자료형, 형 변환 (JavaScript type, type casting) (0)	2023.01.11
자바스크립트 입출력, 변수 (JavaScript input, output, variable) (0)	2023.01.11
CSS 선언 방식 (0)	2023.01.10