KH/JavaScript

JS_ Java와 비슷한 문법들

오늘의 진 2022. 9. 20. 12:21

if_else문

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if~else 문</title>
</head>
<body>

<h3>if- else 문을 이용하여 학점매기기</h3>
<hr>
<script>
    var grade;
    var score = prompt("수선화 님 점수를 입력하세요",100);
    score =parseInt(score);// 문자열을 숫자로 바꿈 

    if(score >90)
    grade ="A";
    else if(score >=80)
    grade ="B";
    else if(score >=70)
    grade ="C";
    else if(score >=60)
    grade ="D";
    else
    grade = "F";

    document.write(score+"는"+grade+"입니다.<br>");
</script>

</body>
</html>

 

 

prompt( ) 함수

: 사용자에게 입력을 요청하는 프롬프트 상자를 화면에 표시하기 위해 사용된다. 

프롬프트 상자에서 계속 진행하려면 "확인" 또는 "취소" 버튼을 클릭해야 한다.

첫번째 인수는 프롬프트상자에 표시되는 레이블이며,

두번째 인수는 프롬프트 상자의 텍스트 박스에 표시되는 문자열이다.

"확인"  버튼을 클릭하면 사용자가 입력한 값을 문자열로 반환

"취소" 버튼을 클릭하면 null을 반환

function prompt(message?: string, _default?: string): string

(상단 메시지, 기본입력 메세지)  : string타입 리턴

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>if_else를 이용한 학점 매기기</title>
</head>

<body>
    <h3> 학점 매기기</h3>
    <hr>
    <script>
        var grade;
        var score3;
        var score1 = prompt("국어 점수를 입력하세요", 100);
        var score2 = prompt("수학 점수를 입력하세요", 100);
        score1 = parseInt(score1);
        score2 = parseInt(score2);
        score3 = score1 + score2;
        if (score3 >= 180)
            grade = "A";
        else if (score3 >= 160)
            grade = "B";
        else if (score3 >= 140)
            grade = "C";
        else if (score3 >= 120)
            grade = "D";
        else
            grade = "F";
        document.write(score3 + "는 " + grade + "입니다.<br>")
    </script>
</body>

</html>

2개를 더하는 경우에는 무조건 int형으로 변경해 주어야 한다. 왜냐하면 string + string 형으로 연산이 되기 때문이다. 

 

 

 

switch 문 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>switch case 문</title>
</head>

<body>
    <h3>switch 문으로 커피 주문</h3>
    <hr>
    <script>
        var price = 0;
        var coffe = prompt("무슨 커피 드릴까요?", "");
        //coffe에 prompt로 받은 단어를 대입한다. 
        switch (coffe) {
            case "espresso":
            case "에스프레소": price = 2000;
                break;
            case "카푸치노": price = 3000;
                break;
            case "카페라떼": price = 3500;
                break;
            default:
                document.write(coffe + "(은)는 없습니다.");
        }
        if (price != 0)
            document.write(coffe + "는 " + price + "원 입니다.");
    </script>

</body>

</html>

 

 

for문 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for문</title>
</head>
<body>
<h3> for문으로 10px ~ 35px 크기 출력</h3>
<hr>
<script>
    for(var size=10 ; size<=35 ; size+=5){
        document.write("<span ");
        document.write("style='font-size:"+size+"px'>");
        document.write(size+"px");
        document.write("</span><br>")
    }

    for(var size=40 ; size>=10 ; size-=5){
        document.write("<span ");
        document.write("style='font-size:"+size+"px'>");
        document.write("abcd");
        document.write("</span><br>")
    }
</script>
</body>
</html>
한줄이 어떻게 완성되는지 확인해 보자 
<span style='font-size:35px'>35px</span><br>
<span style='font-size:40px '>abc</span><br>

 

 

while문 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>while문</title>
</head>

<body>

    <h3> while문으로 0에서 n까지 합</h3>
    <hr>

    <script>

        var n = prompt("0보다 큰 정수를 입력하세요", 0);
        n = parseInt(n);
        var i = 0; sum = 0; even = 0; odd = 0;
        while (i <= n) {
            sum += i;
            if (i % 2 == 0) {
                even += i;
            } else {
                odd += i;
            }
            i++;
        }
        document.write("0에서 " + n + "까지 합은 " + sum + "<br>");
        document.write("0에서 " + n + "까지 짝수 합은 " + even + "<br>");
        document.write("0에서 " + n + "까지 홀수 합은 " + odd + "<br>");
    </script>
</body>

</html>

 

 

do-while 문

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>do-while문</title>
</head>

<body>
    <h3>do-while문으로 0에서 n까지 합</h3>
    <hr>
    <script>
        var n = prompt("0보다 큰 정수를 입력하세요", 0);
        n = parseInt(n);
        var i = 0; sum = 0;
        var sum37 = 0;
        do {
            sum += i;
            if (i % 21 == 0 ) {
                sum37 += i;
            }
            i++;
        } while (i <= n);

        document.write("0에서 " + n + "까지 합은" + sum + "<br>");
        document.write("0에서 " + n + "까지 3과 7의 공배수 합은 " + sum37);
    </script>
</body>
</html>

 

 

stript와 for문을 이용하여 테이블 만들기 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>docyment를 이용해서 table만들기</title>
</head>

<body>
    <script>
        document.write("<h3>document.write()로 표 만들기<h3>");
        document.write("<hr>");
        document.write("<table border='1'>");
        document.write("<tr>");
        document.write("<th>");
        document.write(" n "); // 자연수 0 ~ 9
        document.write("</th>");

        for (j = 0; j < 10; j++) {
            document.write("<td>");
            document.write(j);
            document.write("</td>");
        }
        document.write("</tr><tr>");
        document.write("<th>");
        document.write("n <sup> 2</sup>");
        document.write("</th>");

        for (j = 0; j < 10; j++) {
            document.write("<td width='20'>");
            document.write(j * j);
            document.write("</td>");

        }
        document.write("</tr>");
       
        document.write("<tr>");
        document.write("<th>");
        document.write("n <sup> 3</sup>");
        document.write("</th>");

        for (j = 0; j < 10; j++) {
            document.write("<td width='30'>");
            document.write(j*j*j);
            document.write("</td>");
        }
        document.write("</tr>");
        document.write("</table>");
    </script>
</body>

</html>

 

 

break 문 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>break 문</title>
</head>

<body>

    <h3>1에서 얼마까지 더해야 3000을 넘기는가?</h3>
    <hr>
    <script>
        var i = 0, sum = 0;
        while (true) {
            sum += i;
            if (sum > 3000)
                break;
            i++;
        }
        document.write(i + " 까지 더하면 3000을 넘음 : " + sum);
    </script>
</body>

</html>

 

 

 

Q ) 13미터 우물속 달팽이는 낮에는 3m 오르고 밤에는 1m 떨어진다. 

      이달팽이는 몇일만에 우물에서 벗어날까요?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <script>
        var end=0 ,day=0;

        while(true){
            day++;
            end+=3;
            if(end==13){
                break;
            }else{
                end-=1;
            }
        }
        document.write("걸린날짜는 : "+day+"일");
    </script>
</body>
</html>

 

 

continue 문 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>continue문</title>
</head>

<body>
    <h3>3으로 나눈 나머지가 1인 수만 더하기</h3>
    <hr>
    <script>
        var sum = 0;
        for (i = 1; i <= 10; i++) {
            if (i % 3 != 1)
                continue;

            document.write(i + " +");//더하는 수 출력
            sum += i;
      }
        document.write(" = 합 : " + sum);
    </script>
</body>

</html>

 

 

(예)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>do-while과 break 사용</title>
</head>

<body>
    <h3>암호를 입력하라 !</h3>
    <hr>
    <script>
        var password = "";
        var str = "";
        var count = 0;
        do {
            count++;
            if (count > 5) {
                str = "암호 시도 횟수가 5번을 초과하였습니다.<br>"
                    + "나중에 다시 시도하세요";
                console.log(str);
                break;
            }
            password = prompt("암호를 입력하세요", "암호");
            if (password == "korea") {
                str = "반값습니다. <br> 통과!";
                break;
            }
        } while (true);
        document.write(str);
    </script>
</body>
</html>

 

consol.log(str) 을 이용해서 콘솔창에도 입력해준 모습

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>console.log</title>
</head>

<body>
    <script>
        var a = 7;
        var b = 'hello';
        var c = true;

        console.log(a); // 하나만 로그 
        console.log(a, b, c);//여러개를 동시에 로그 
        console.log('%d는 숫자%s는 문자열', a, b);
        console.log('기본');
        console.log('정보');
        console.warn('경고');
        console.error('에러');
    </script>
</body>

</html>

 

 

다중 for문

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>for star</title>
</head>

<body>
    <script>
        for (i = 1; i <= 7; i++) {
            for (j = 0; j < i; j++) {
                document.write("*");
            }
            document.write("<br>");
        }
        for (i = 6; i >= 0; i--) {
            for (j = 0; j < i; j++) {
                document.write("*");
            }
            document.write("<br>");
        }

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

'KH > JavaScript' 카테고리의 다른 글

JS_ Javascript의 객체와 배열  (1) 2022.09.21
JS_숫자 맞추기 게임  (0) 2022.09.21
JS_내장함수  (0) 2022.09.20
JS_ 이미지 리스너 & 연산자  (1) 2022.09.19
JS _기본 내용들  (2) 2022.09.19

'KH/JavaScript'의 다른글

  • 현재글JS_ Java와 비슷한 문법들

관련글

티스토리툴바