본문 바로가기
JavaScript

JavaScript (대화상자, 연산자, 제어문, 반복문)

by code2772 2022. 11. 4.

[ 목차 ]

    728x90
    반응형

    ✔ 자바스크립트 대화상자

    - alert()
//비표준은 내 화면에서만 보이고 다른 사용자에게 안보이는 경우도 있다
사용자에게 메시지를 보여주고, 확인을 기다림
BOM(Browser Object Model)
window.alert()
alert();

- confirm()
사용자에게 메시지를 보여주고, 확인이나 취소를 누르면 그 결과를 불린값으로 반환(선택창이 2개로 보이는 - 반응형)
const result = confirm('확인이나 취소를 누르세요)

- prompt()
사용자에게 메시지를 보여주고, 사용자가 입력한 문자열을 반환
// 자바에서의 scanner 역할과 유사하다
❗ 입력받은 값은 문자형으로 저장된다
const result = prompt('문자를 입력하세요');

    ✔ 대화상자

    <!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>
            // alert('안녕하세요. 자바스크립트!');
            // const result = confirm("확인 또는 취소를 눌러주세요"); // 나오기는 하지만
            //T,F를 모일려면 출력을 해야겠지?
            // console.log(result);
            const name = prompt("당신의 이름을 입력하세요");
            console.log(name);
            console.log(typeof(name));


            const age = prompt("당신의 나이을 입력하세요");
            console.log(age);
            console.log(typeof(age));
            </script>
    </head>
    <body>
        <h2>대화상자</h2>
    </body>
    </html>

     

    ✔ 문제.

    이름과 국어점수, 수학점수, 영어점수를 입력받아 총점과 평균을 구하는 문서를 작성
(단,prompt를 사용해서 console에 결과를 출력)
    <!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>
         
    //  문제.
    // 이름과 국어점수, 수학점수, 영어점수를 입력받아 총점과 평균을 구하는 문서를 작성
    // (단,prompt를 사용해서 console에 결과를 출력)
            const name =prompt("이름을 입력하세요")
            console.log(`${name}님`);

            const kor = Number(prompt("국어점수 : "));
           
            console.log(`국어점수 : ${kor}점`);
            const math = Number(prompt("수학점수 : "));
            console.log(`수학점수 : ${math}점`);
           
            const eng = Number(prompt("영어점수 : "));
            console.log(`영어점수 : ${eng}점`);

            const tot = kor+eng+math;
            const avg = tot/3;

            console.log(`총점 : ${tot}점`);
            console.log(`평균 : ${avg}점`);
           
            // console.log(` 총점 : ${parseInt(kor)+parseInt(math)+parseInt(eng)}`)
            // console.log(` 평균 : ${(parseInt(kor)+parseInt(math)+parseInt(eng))/3}`)
           
            </script>
    </head>
    <body>
        <h2>학생성적</h2>
    </body>
    </html>

     

    ✔ 연산자(Operate)

    1. 산술 연산자
+, -, *, /, %, **(제곱)
2 ** 2

2. 비교 연산자
>, < >=, <=, ==, != , ===(두 식 값이 같고, 타입까지 같으면 참),
!== (두 식의 값이 다르고, 타입까지 다르면 참)
'3' * '3' = 9
'3' == 3 -> true (자바스크립트)
'3' === 3 -> false (형이 다르기 때문 - 자바스크립트)

3. 대입 연산자
=, +=, -=, *=, /=, %=, **=

4. 증감 연산자
++변수, --변수, 변수++, 변수--

5. 논리 연산자
&&, ||, !

6. 비트 연산자
&, |, ^, <<, >>

7. 삼항 연산자
변수 = 조건식 ? 반환값1 : 반환값2

     

    ✔ 제어문

      1. 조건문

        if 문
        if(조건식){
        조건식의 결과가 true일 때 실행할 문장;
        ...
        }

        if~else 문
        if(조건식){
        조건식의 결과가 true일 때 실행할 문장;
        ...
        }else{
        조건식의 결과가 false일 때 실행할 문장;
        }

        if~else if~else문
        if(조건식1){
        조건식의 결과가 true일 때 실행할 문장;
        ...
        }else if(조건식2){
        조건식2 결과가 true일 때 실행할 문장;
        }
        ...
        }else{
        모든 조건식의 결과가 false일 때 실행할 문장;
        }


        switch 문
        switch(변수){
        case 값1:
        변수롸 값1이 같을 경우 실행할 문장;
        ...
        break;
        case 값2:
        변수롸 값2이 같을 경우 실행할 문장;
        ...
        break;
        ...
default:
        변수와 모든 값이 다를 경우 실행할 문장;
        ...
        }

    ✔ if문

    const age = Number(prompt('나이를 입력하세요'))

    // if(age>19){
    //     console.log(`성인입니다.`)
    // }else if(age > 14){
    //     console.log(`청소년입니다.`)
    // }else if(age>6){
    //     console.log(`어린이입니다.`)
    // }else{
    //     console.log(`유아입니다.`)
    // }

    if(age>19)console.log(`성인입니다.`)
    else if(age > 14)onsole.log(`청소년입니다.`)
    else if(age>6)console.log(`어린이입니다.`)
    else console.log(`유아입니다.`)
    // 한줄 표기 이상 무
     
    ✔ switch 문
     
    let input = prompt('아동, 청소년, 성인 중 하나를 고르세요')
    switch(input){
        case '아동':
            input +=': 입장료 무료' // '아동 : 입장료 무료'
            break;
        case '청소년' :
            input += ': 입장료 15000원'
            break
        case '성인' :
            input += ': 입장료 25000원'
            break
        default :
            alert("입력값을 확인하게요")
            input= '입력값 확인!'
    }
    console.log(input)
     
    2. 반복문

while 문

while(조건식){
조건식의 결과가 true인 동안 반복할 문장;
...
}

do ~ while 문

do{
조건식의 결과가 true인 동안 반복할 문장;
...
}while(조건식);


for 문

for(초기값; 조건식; 증감식){
조건식의 결과가 true인 동안 반복할 문장;
...
}


continue 문
- 반복중인 루트 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고 다음 조건식의 판단으로 넘어감

break 문
- switch문 또는 반복중인 루프 내에서 사용하여 해당 문장을 완전히 종료시키고 다음에 위치한 실행문으로 이동

    ✔ while, for 문

    // const dan = Number(prompt('원하는 단을 입력하세요'))
    // console.log(`${dan}단`)

    // let i =1;// const인 경우에는 i가 변화하기 때문에 한번 반복 후 오류발생!!!
    // while(i<=9){
    //     console.log(`${dan} * ${i} = ${dan*i}`);
    //     i++
    // }

    const dan = Number(prompt('원하는 단을 입력하세요'))
    console.log(`${dan}단`)

    for(let i =1; i <= 9; i++){
        console.log(`${dan} * ${i} = ${dan*i}`);
    }
    반응형
    저작자표시 비영리 변경금지

    'JavaScript' 카테고리의 다른 글

    JavaScript(history, navigator, node, 문서객체모델/노드)  (0) 2022.11.09
    JavaScript(date, window, setTimeout, setInterval, 시계만들기, location, form)  (0) 2022.11.07
    JavaScript(화살표 함수, 객체, 프로토타입, Math/String함수)  (0) 2022.11.07
    JavaScript(배열, 사용자정의함수, 호이스팅, 주민등록번호 문제)  (0) 2022.11.04
    JavaScript (기본, 변수, 데이터타입)  (2) 2022.11.04

    관련글

    티스토리툴바