<!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>
Engineering is the closest thing to magic that exists in the world.