[6/8 일반] JavaScript 기초/ 실습 - 제어문(조건문과 반복문) / 채석환 강사님

박재준·2022년 6월 8일
0
  1. 학습한 내용

1) 필기내용

  • 문자열과 식별자(변수, 상수, 메소드, 클래스)
  • boolean형 : 참/거짓의 두가지 유형→ 조건문에서 사용
    boolean에서 논리합과 논리곱이 있음(or과 and)
    → || : or
    → && : and
    ex)
    x는 3초과 5이하이다. 3 < x && x <= 5
    x는 3초과이거나 5이하이다. 3 < x || x <=5

  • 상수를 선언하고 중간에 바꾸는 것이 안됨

  • const name = “값”
    const : 상수를 선언하기 위한 키워드
    name : 식별자
    위와 같이 값을 주어줘야 에러가 안생김
    예시) const pi = 3.1415
    const r = 5
    pi → 3.1415
    r → 5
    2 pi r → 31.4150000000003

  • Identifier has already declared : 같은 것은 반복선언해서 나타나는 문구

  • Missing initializer in cons declaration : 상수는 값을 할당해줘야 하는데 있어서 초기화 시키지 않았다.

  • var 변수 : 변수선언이 덮어씌워짐

  • let 변수 : 변수를 위에서 사용해서 아래에서 또 사용했을 경우, 저장된 값을 다른 값으로 바뀌는 것을 방지하기 위한 명령문 → 따라서 같은 변수를 또 사용하면 에러뜸

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

04_v.html 관련

- a++ : 후위방식 / ++a : 전이방식 / a-- : 후위방식  / --a : 전위방식
alert(num++) : alert(num) → num=num+1
alert(++num) : num=num+1 → alert(num)

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
    <script>
        let num = 0
        alert(num++)
        alert(num++)
        alert(num++)
        alert(num)
    </script>
</body>
</html>

<!-- alert(num++) : alert(num) → num=num+1
alert(++num) : num=num+1 → alert(num) -->

→ 아무튼 증감식에서 중요한 부분은
alert(num++) : alert(num) → num=num+1 / 후위방식이면 alert선언 후 덧셈!!!
alert(++num) : num=num+1 → alert(num) / 전위방식이면 덧셈 이후 alert선언!!!

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

05_if.html 관련

  • if(조건식) {
    실행문
    실행문
    }

    if(조건문) {
    실행문1
    실행문2
    }
    실행문3

    거짓인 경우 : 실행문 3
    참인 경우 : 실행문 1, 2, 3 다 실행됨

  • if(조건문1){
    if(조건문2){
    실행문1
    }else{
    실행문2
    }
    }else{
    if(조건문3){
    실행문3
    }else{
    실행문4
    }
    }

  • if(조건문){ if(조건문){
    실행문
    }else {
    실행문
    }
  • if(조건문){
    실행문
    }else if(조건문){
    실행문
    }else {
    실행문
    }
    }
<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>
        //조건문 if
        // if(200<100){
        //     alert("200>100은 참")
        // }
        // else(200<100){
        //     alert("200>100은 거짓")
        // }
        
        // const date = new Date()
        // const hours = date.getHours()
        // if(hours < 12) {
        //     alert('현재시간은 $(hours)시입니다. 그래서 오전입니다.')
        // }
        // if(hours >= 12 ){
        //     alert("오후입니다.")
        // }

        // const date = new Date()
        // const hours = date.getHours()
        // if(hours < 11) {
        //     alert('아침식시시간입니다.')
        // }else
        //     if(hours <= 17 ){
        //         alert("점심식사 시간입니다.")
        //     }else{
        //         alert("저녁식사 시간입니다.")
        //     }


        const date = new Date()
        const hours = date.getHours()
        // if(hours < 11) {
        //     alert('아침식시시간입니다.')
        // }else if(hours <= 17 ){
        //         alert("점심식사 시간입니다.")
        // }else{
        //     alert("저녁식사 시간입니다.")
        // }

        switch(true){
            case hours<11:
                alert("아침식사")
                break;
            case hours<15:
                alert("점심식사")
                break;
            default:
                alert("저녁식사")
                break;
        }
    </script>
</body>
</html>

→ 뭐 흔히 쓰던 if, ifelse, else 구문이므로^~^
→ switch 명령문은 파악해놓기!

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

06_SwitchCase.html 관련

switch (값) {
case 조건
실행문
case 조건
실행문
case 조건

<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 a = prompt("숫자입력하세요")
        // switch (a) {
        //     case 1
        //     실행문1
        //     break;
        //     case 2
        //     실행문2
        //     break;
        //     case 3
        //     실행문3
        //     break;
        //     default:
        //     실행문4
        //     break;
        //     }

        const ivalue = Number(prompt("숫자를 입력하세요","0~100"))
        switch(ivalue%2){
        case 0:
            alert("짝수입니다")
            break;
        case 1:
            alert("홀수입니다")
            break;
        default:
            alert("숫자가 아닙니다. 확인해보세요")
            break;
        }
    </script>
</body>
</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

07_thang.html

  • let a = prompt
    조건문?실행문1:실행문2
    (a>10)?alert(“a는 10보다 크다”):alert(“a는 10보다 작다”)
<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>
        const ivalue = prompt("숫자입력")
        const num = Number(ivalue)
        const result = (num >= 0)?'0이상의숫자':'0보다작은숫자'
        alert(result)
    </script>
</body>
</html>

→ 이것도 알아놓기...

  1. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

1) switch, thang 부분을 새로 알게 되었으니까, 알아놓기! 딱히 어려웠던 점은 없음

  1. 해결방법 작성

1) 자주 사용해보면서 친숙해지기^~^

  1. 학습 소감

1) 음... 예전에 알고 있던 내용들이 대부분이여서,,, 오늘 많은 과제를 주신다고 하셨는데, 아직도 과제 공지가 없으시다... 이게 무슨 일인가 싶다...

profile
초급 개발자

0개의 댓글