210328 JavaScriptオブジェクトの練習

8814 ワード
JavaScript JavaScript テキストリンク 
<!DOCTYPE html>
<html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
    </head>
    <boby>
        <div></div>
        <script>
            // 객체 (Object)
            // 데이터를 레이블로 관리하는 방법
            // 이름으로 데이터를 접근하기 위한 방법
            // 데이터 덩어리
            // 객체 안에 여러 가지 변수와 함수, 배열 사용 가능
            // 내장 객체, 내장 함수
            var intro = {
                name : "홍길동",
                age : 20,
                isHandsome : true,
                sayHello(nugu){
                    alert(nugu + "님 안녕하세요!");
                },
                food : ["사과", "바나나", "파인애플"]
            }

            console.log(intro.name); // log()는 console의 내장 함수

           // intro.sayHello("영희"); // 객체 안에 있는 함수 호출


            var boxSytles = {
                boxWidth : "250px",
                boxHeight : "250px",
                bgColor : ["red", "green", "blue"]
            }

            //var box = document.querySelector("div");

            var box = document.createElement("div");

            var body = document.querySelector("body");

            body.append(box);

            box.style.width = boxSytles.boxWidth;
            box.style.height = boxSytles.boxHeight;
            box.style.background = boxSytles.bgColor[2];

            box.addEventListener("click", function(){ // 이벤트 호출
                box.style.background = boxSytles.bgColor[1];
            });


        </script>
    </boby>
    </html>
pg_が見つかりませんconfig実行可能ファイル
Javaへの簡単な導入-リスト