JavaScript_STUDY/JavaScript04.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html lang="ko">

<head>
    <title>변수와 자료형</title>
    <script>
        // 전역변수의 선언
        str = '전역변수'; // 자동으로 window 객체의 필드(속성)가됨.

        // 함수 외부에서 선언한 변수는 var를 붙여도 전역변수이다.
        var str = "var 전역변수";

        /*
        Javascript에서 페이지가 로드되면 자동으로 실행되는 함수를 구현할 때엔
        전역 콜백함수인 window.onload 함수를 사용합니다.
        */

        // 익명함수
        window.onload = function () {
            // alert("자동 실행되나?");

            // 지역 변수 선언
            var str = '지역변수'; // !!!! 지역변수는 앞에 var를 붙인다.(함수 내부에서)

            var str2 = "지역변수2";

            console.log(str); // 지역변수
            console.log(this.str); // 전역변수
            console.log(window.str); // 전역변수

            console.log(this.str2);

            // 함수 내부에서 전역변수 선언
            // (var를 사용하지 않으면 된다.)
            what = '나는 뭘 까요?';
            showWhat();
        }

        function showWhat() {
            console.log(what);
            console.log(this.what);
            console.log(window.what);

        }


    </script>
</head>

<body>
    <h1>변수와 자료형</h1>
    <h3>변수 선언</h3>
    <p>함수 내부에서 var 변수명;으로 선언하면 지역 변수가 된다.<br>
        함수 내부에서 변수명;으로 선언하거나 함수 밖에서 변수명; 혹은
        var 변수 명으로 선언하면 전역변수가 된다.<br>
        전역변수와 지역변수가 동일한 이름인 경우 함수 내부에서 변수명을
        호출하면 지역변수가 우선권을 가지기 때문에, <br>
        전역변수 사용시 window.변수명 혹은 this.변수명으로 표현하여
        지역변수와 구분한다.<br>
        지역 변수는 해당 window 내에서 어드든 사용할 수 있으며,
        지역변수는 해당 함수 내에서만 사용 가능하다.</p>


        <hr>
        <h3>자료형</h3>
        <p>자바스크립트에서는 자료형별로 변수 타입이 지정되지 않고
        리터럴에 의해 자료형이 결정된다.
        </p>
        <button onclick="typeTest();">자료형 테스트</button>
        <br><br>
        <div id="area1" class="area1"></div>

        <script>
            function typeTest(){
                var name  = "김용승";
                var age   = 19;
                var check = true;
                var hobby = ['축구','농구','야구'];
                var user  = {
                    name : '김용승2', // user.name
                    age  : 19,
                    id   : 'dlagon'
                };
                var testFunction = function testFunction(num1,num2){
                                                var sum = num1 + num2;
                                                alert(sum);
                }
                var area1 = document.getElementById("area1");
                area1.innerHTML += "문자열 변수 : " + name + "<br>";
                area1.innerHTML += "숫자 변수 : " + age + "<br>";
                area1.innerHTML += "논리 변수 : " + check + "<br>";
                area1.innerHTML += "배열 변수 : " + hobby + "<br>";
                area1.innerHTML += "객체 변수 : " + user.name + "<br>";
                area1.innerHTML += "함수 변수 : " + testFunction + "<br>"; // 함수를 보여주는거지 실행되는것은 아니다.
                // area1.innerHTML += "함수 변수 : " + testFunction() + "<br>"; // NAN = Not A Number
                area1.innerHTML += "함수 변수 : " + testFunction(1,2) + "<br>";
                area1.innerHTML += "tsetfunction함수 결과값 : " + sum + "<br>";
            }
        </script>
</body>


</html>