javascript/ex01.html at master · sangmin0816/javascript · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트의 기본01 - 변수의 선언과 사용</title>
</head>
<body>
    <div id="result"></div>
    <ul class="lst">
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
    </ul>
    <hr>
    <nav>
        <a href="">메뉴</a>
        <a href="">메뉴</a>
        <a href="">메뉴</a>
    </nav>
    <hr>
    <ul class="lst">
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
    </ul>
    <div id="res2"></div>
    <button type="button" onclick="fnc3()" id="btn1">인라인 이벤트 발생</button>
    <button type="button" id="btn2">DOM 탐색 이벤트 발생</button>

    <script>
    //변수, 객체, 함수, 메소드, 이벤트, DOM 컨트롤

    //자바 언어처럼 타입지시자를 사용하지 않으며, 값을 대입하면, 형(Type)이 자동으로 정의 또는 변환됨
    //int a = 100;
    var data1 = "김기태";   //var는 재선언이 가능하고, 값도 언제나 변경할 수 있음.
    let data2 = "구예진";   //let은 재선언이 불가능하나, 값은 언제나 변경할 수 있음.
    const data3 = "백준철"; //const(constant) 는 재선언X, 값 변경X => 상수
    console.log(data1);

    var data1 = 1004;
    data2 = 7979;

    //함수 정의 문법
    function fnc1() {  //함수는 호출하여야만 실행됨.
        document.write("출력");
    }
    var fnc2 = function() { alert("알림"); }

    //간단한 객체 정의 문법
    var obj = {
        name:"김기태",  //필드
        age:29,
        height:173.8,
        method1:function(num1){
            document.getElementById("res2").innerHTML = "<h2>김기태천재</h2>";
        }
    };

    document.getElementById("res2").innerText = obj.name + obj.age + obj.height;
    //메소드 호출 방법
    obj.method1();

    function fnc3() {
        var result = document.getElementById("result"); //태그의 아이디에 의한 접근
        var el = document.getElementsByClassName("lst");  //태그의 클래스에 의한 접근 - 배열 el[0], el[1]
        var a = document.getElementsByTagName("a"); //태그의 태그명에 의한 접근 : 배열 a[0], a[1], a[2]
        var res2 = document.querySelector("#result");
        var item = document.querySelectorAll(".lst li"); //배열 item[0] ~ item[7]

        result.innerText = data2;
        for(var i=0;i<item.length;i++){ //item의 요소 수 만큼 반복 수행
            item[i].innerHTML = "<strong>"+data3+"</strong>";
        }
    }

    var btn2 = document.getElementById("btn2");
    btn2.addEventListener("click", function(){
        fnc3();
    });
    /*
    fnc1();
    fnc2();
    */
    </script>
</body>
</html>