JavaScript_STUDY/JavaScript02.html at master · CreativePersonDW/JavaScript_STUDY · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<html lang='ko'>
    <head>
        <title>데이터 입/출력</title>
        <style>
            p{
                color: red;
            }

        </style>
    </head>
    <body>
        <h1>자바스크립트의 데이터 입/출력</h1>

        <h3>innerHTML로 요소의 내용 변경하기</h3>
        <div id="area1">
            자바스크립트에서 태그 엘리먼트의 값을 읽어가거나,
            값을 변경할 때 innerHTML 속성을 사용함.
        </div>

        <button onclick="checkValue();">innerHTML확인</button>
        <script>
            function checkValue(){
                var divE1 = document.getElementById("area1");
                window.alert(divE1.innerHTML);
                divE1.innerHTML = "innerHTML 속성으로 값 변경함";
            }
        </script>

        <hr>

        <h3>console.log()로 개발자 도구 콘솔 화면에 출력하기</h3>
        <p>개발자 도구 콘솔 화면에 출력을 하고자 할 때 사용하며, 디버깅 할 때 주로 사용된다.</p>
        <button onclick="printConsole();">콘솔에 내용 출력</button>
        <script>
            function printConsole(){
                console.log("콘솔 화면에 출력하기");
            }
        </script>

        <hr>

        <h3>window.confirm()을 이용한 데이터 입력</h3>
        <p>어떤 질문에 대해 "예/아니오"의 결과를 얻을 때 사용한다.</p>
        <p>확인 버튼과 취소 버튼이 나타나며, 확인 버튼을 클릭시 true, 취소 버튼을 클릭시 false를 리턴한다.</p>
        <button onclick="checkGender();">성별 확인하기</button>
        <div id = "area2" class = "area"></div>
        <script>
            function checkGender(){
                var result = confirm("남자면 확인, 여자면 취소 버튼을 눌러주세요");
                console.log(result);

                var gender = "";
                if(result == true){
                    gender = "남자";
                }else{
                    gender = "여자";
                }
                var area2 = document.getElementById("area2");
                area2.innerHTML += "<p>당신은" + gender + "입니다.<br></p>";


            }
        </script>


        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
    </body>
</html>