[FrontEnd2] JS 연습하기 (변수, prompt)

    SMALL

    안녕하세요~ 보라해바라기입니다.

     

    JS를 배우기 시작하며 연습문제를 푸는 것이 복습에 많은 도움이 되더군요!

     

    그래서 제가 직접 푼 연습문제를 공유하고자 합니다 :)

     

    변수와 prompt에 대한 연습문제를 각각 5개씩 풀어보았습니다^_^

     


    1. 변수

    (1) "Hello JavaScript" 출력하기

    <!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>Document</title>
        <script>
            document.write("Hello JavaScript!", "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

     

    (2) "My New JS file! (줄바꿈) Hello JavaScript!" 출력하기

    <!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>Document</title>
        <script>
            document.write("My New JS file!", "<br>")
            document.write("Hello JavaScript!", "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

     

    (3) 이름, 나이, 키 출력하기

    <!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>Document</title>
        <script>
            var name = "보라해바라기"
            var age = 23
            var height = 164.5
    
            document.write("이름: " + name , "<br>")
            document.write("나이: " + age , "<br>")
            document.write("키: " + height , "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

     

    (4) 사칙연산과 나머지 연산 출력하기

    <!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>Document</title>
        <script>
            var num1 = 9
            var num2 = 2
    
            document.write(num1 + "+" + num2 + "=" + (num1 + num2), "<br>")
            document.write(num1 + "-" + num2 + "=" + (num1 - num2), "<br>")
            document.write(num1 + "x" + num2 + "=" + (num1 * num2), "<br>")
            document.write(num1 + "/" + num2 + "=" + (num1 / num2), "<br>")
            document.write(num1 + "%" + num2 + "=" + (num1 % num2), "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

     

    (5) 비교연산자 출력하기

    <!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>Document</title>
        <script>
            var num1 = 20
            var num2 = 10
    
            document.write(num1 + ">=" + num2 + "의 결과?: " + (num1 >= num2), "<br>")
            document.write(num1 + "==" + num2 + "의 결과?: " + (num1 == num2), "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

     


    2. prompt

    (1) 정수 입력하여 출력하기

    <!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>Document</title>
        <script>
            var num = prompt("정수 입력")
            document.write("num: " + num, "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

     

    (2) 두 정수를 입력하여 더한 값을 출력하기

    <!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>Document</title>
        <script>
            var num1 = prompt("정수1 입력")
            num1 = parseInt(num1)
    
            var num2 = prompt("정수2 입력")
            num2 = parseInt(num2)
    
            var result = (num1+num2)
    
            document.write("덧셈결과: " + result, "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

     

    (3) 정수를 입력하여 그 절댓값을 출력하기

    <!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>Document</title>
        <script>
            var num = prompt("정수 입력")
            num = parseInt(num)
    
            var result = ( num>=0 ? num : -num)
    
            document.write("num의 절댓값: " + result, "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

     

    (4) 나이를 입력하여 조건에 따라 성인, 미성년자 구분하여 출력하기

    <!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>Document</title>
        <script>
            var age = prompt("나이 입력")
    
            if (age>=20) {
                document.write("당신은 성인", "<br>")
            }
            else{
                document.write("당신은 미성년자", "<br>")
            }
        </script>
    </head>
    <body>
        
    </body>
    </html>

     

    (5) 키를 입력하여 표준체중 출력하기

    <!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>Document</title>
        <script>
            var height = prompt("키 입력")
            height = parseFloat(height)
    
            var result = (height - 100) * 0.9
    
            document.write("표준 체중: " + result + "kg", "<br>")
        </script>
    </head>
    <body>
        
    </body>
    </html>

    728x90

    댓글