index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <h1 id="hh"></h1>
    <img src="" alt="sample" id="photo" onclick="show(this.src)">
    <p id="title"></p>
    <button onclick="change(this.innerHTML)">nature</button>
    <button onclick="change(this.innerHTML)">city</button>
    <button onclick="change(this.innerHTML)">people</button>
    <script>
        var obj = document.getElementById("hh");
        obj.innerHTML = new Date();
        var photo = document.getElementById("photo");
        photo.src = "images/sports.jpg";
        photo.style.borderRadius = "50%";
        var p = document.getElementById("title");
        p.innerHTML = photo.src;
        //photo.src = photo.src + "/food";
        obj.addEventListener("click",function(){
            obj.innerHTML = new Date();
        });

        function show(s){
            alert(s);
        }

        var change = function(cat){
            var src = "images/" + cat + ".jpg";
            //  src += cat; //src = src + cat
            photo.src = src;
        };

        //변수, 변수의 유효 범위
        a = 2; //전역(Global)변수
        var b = "2"; //전역(Global)변수
        var c = a + b;
        var d = a * b;
        var e = a + Number(b);

        function num(){
            var a = 100; //지역(Local)변수
            aa = 300; //전역변수
        }
        num();
        console.log(aa);

        var arr = [1,2,3,4,5]; //배열
        var arr2 = new Array(5,4,3,2,1);
        console.log( arr2[0] );
        var sum = 0;
        for(var i=0;i<arr.length;i++ ){
            sum += arr[i];
        }
        console.log(sum);

        //객체(Object)
        var obj2 = {
            name:"홍길동", //Property
            age:30,
            email:"[email protected]",
            info: function(){ //Method
                var person = this.name;
                person += this.age;
                person += this.email;
                console.log(person);
            }
        };
        obj2.info();


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