"사용자 정의 객체보다 내장객체 사용하는게 더중요하다"
내장 객체의 종류
-브라우저 객체 모델(BOM, Browser Object Model): 웹 브라우저의 각종 요소를 객체로 표현
-문서 객체 모델(DOM, Document Object Model): 웹 문서의 각종 요소를 객체로 표현
-전역 자바스크립트 객체(Global JavaScript Objects): 자바스크립트 프로그램 전체에서 사용하는 내장 객체
JS에서 중괄호를 열고 닫으면 객체다..
- name: ~~ 속성정의
- start: ~~~메소드정의(함수 형식)
▼ 리터럴로 생성한 배열객체요~
<body>
<p>[Car1]</p>
<p id="data10"></p>
<p id="data20"></p>
<p id="data30"></p>
<p>[Car2]</p>
<p id="data11"></p>
<p id="data21"></p>
<p id="data31"></p>
<p>[Car3]</p>
<p id="data12"></p>
<p id="data22"></p>
<p id="data32"></p>
<script>
// 1. 객체의 원소를 가지는 배열 리터럴 생성
var car=[
{ name:'Sonata', color:'blue', speed:100 },
{ name:'Jeep', color:'red', speed:70 },
{ name:'Passt', color:'white', speed:150 }
]
// 객체를 출력할 때에는 , 우리가 배운 template string(ES6, 소위`` 문자열)로
// 출력하시면 안됩니다. 객체 내부를 보시려면, 그냥 객체자체를 출력하셔야합니다.
console.log('car', car);
for(var i=0; i<3; i++) {
let cname=document.getElementById("data1"+i);
cname.textContent='자동차 이름 : ' + car[i].name;
let colname=document.getElementById("data2"+i);
colname.textContent='자동차 색상 : ' + car[i].color;
let cspeed=document.getElementById("data3"+i);
cspeed.textContent='자동차 속도 : ' + car[i].speed;
}
</script>
</body>
▼ new 생성자를 통해 생성한 배열객체요
<body>
<p id="car"></p>
<p>[Car1 속성]</p>
<p id="car0"></p>
<p>[Car2 속성]</p>
<p id="car1"></p>
<p>[Car3 속성]</p>
<p id="car2"></p>
<script>
// Array 생성자 함수의 매개변수는 가변인자! :(...items)
var car=new Array (
['Sonata','blue',100],
['Jeep','red',70],
['Passt', 'white', 150]
);// Array 생성자 함수로 배열을 만들면서, 동시에 원소(배열임)를 넣는다.
var cname=document.getElementById("car");
cname.textContent="car[2][1] : "+ car[2][1];
for(var i=0; i<3; i++) {
var cname=document.getElementById("car"+i);
cname.textContent=car[i];
}//for
</script>
</body>
▼ 객체에 함수 선언 방법
<body>
<p id="msg1"></p>
<p id="msg2"></p>
<p id="msg3"></p>
<script>
console.clear();
console.group("object_function");
var obj={
m1: function() {
return "Hello Sonata";
},
m2: function(a) {
var result=a;
return result;
},
m3: function(a, b) {
var result=a+b;
return result;
}
};
//Id 값을 선택해주는 것
document.getElementById("msg1").innerHTML=obj.m1();
document.getElementById("msg2").innerHTML=obj.m2(100);
document.getElementById("msg3").innerHTML=obj.m3(100, 200);
//요소로 선택해주는것
document.querySelector("#msg1").innerHTML="시러";
console.groupEnd();
</script>
▼ 객체에 속성 선언 방법
<body>
<p id="var1"></p>
<p id="var2"></p>
<p id="var3"></p>
<script>
console.clear(); console.group('User-defined Object');
// 객체의 리터럴 방식으로 1회성, 사용자 정의 객체 생성
var car ={
name: "sonata" ,
speed: 100 ,
color: "white",
door: 4,
// start: function(){
// return this.speed+10;
// }
};
console.log(car);
// 아래의 코드는 뭐하는 것일까
document.getElementById("var1").innerHTML="자동차 이름 : " + car['name'];
document.getElementById("var2").innerHTML="자동차 속도 : " + car.speed;
document.getElementById("var3").innerHTML="자동차 색상 : " + car.color;
// document.getElementById("var3").textContent="자동차 색상 : " + "파랑";
//똑같이 바뀌는데 뭔 차이일까?
//innerHTML: HTML 전체 내용을 가져오는 것을 확인 할 수 있습니다.
// nnerText는 'Element'의 속성으로, 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어옵니다.
// textContent는 'Node'의 속성으로, innetText와는 달리 <script>나 <style> 태그와 상관없이
// 해상 노드가 가지고 있는 텍스트 값을 그대로 읽습니다.
console.groupEnd();
</script>
</body>
▼ 사용자가 정의한 객체를 만드는 방법
<body>
<p id="carname"></p>
<p id="carcolor"></p>
<p id="carspeed"></p>
<script>
console.clear();
console.group("object_User");
var car={
name: 'Sonata',
speed: 50,
color: 'white',
start: function() {
return this.speed+10; //
}
};
var cname=document.getElementById("carname");
cname.innerHTML=`<p>${car.name}<p>`;
var colname=document.getElementById("carcolor");
cname.innerHTML=`<p>${car.color}<p>`;
var cspeed=document.getElementById("carspeed");
cname.innerHTML=`<p>${car.speed}<p>`;// textContent는 innerText와 대동소이하다
console.groupEnd();
</script>
</body>
생성자 함수를 이용하는 방법 (▲코드와 대동소이)
▼ 사용자가 정의한 객체를 만드는 방법2
<body>
<p id="carname"></p>
<p id="carcolor"></p>
<p id="carspeed"></p>
<script>
//사용자 정의 객체를 만드는 두번째 방법!
var car=new Object();
car.name='Sonata';
car.speed=100;
car.color='blue';
car.speedup=function() {
return this.speed+10;
};
var cname=document.getElementById("carname");
cname.textContent='자동차 이름 : ' + car.name;
var colname=document.getElementById("carcolor");
colname.textContent='자동차 색상 : ' + car.color;
var cspeed=document.getElementById("carspeed");
cspeed.textContent='자동차 속도 : ' + car.speedup();
</script>
</body>
▼ DATE객체 활용
<body>
<p id="d1"></p>
<p id="d2"></p>
<p id="d3"></p>
<p id="d4"></p>
<script>
// 1.기본 생성자
document.querySelector("#d1").innerHTML = new Date();
// 2.1970.01.01 UTC 이후의 흘러온 시간을 나타내는 밀리초로 날짜와 시간 생성
document.querySelector("#d2").innerHTML = new Date(1491803527400);
// 3. 날짜 형식의 문자열로 날짜 객체 생성
document.querySelector("#d3").innerHTML=new Date("October 15, 2018 06:18:07");
// 주의사항 : 월(month)은 0부터 시작 , 날짜 지정
document.querySelector("#d4").innerHTML=new Date(2018, 11, 25, 18, 30, 29);
</script>
</body>
▼ DATE객체 활용2
<body>
<div id="digClock"></div>
<script>
function digClock(){
let today = new Date();
// 날짜와 시간 조합
let day = today.getMonth() + 1 + "월" + today.getDate() + "일";
let time = today.getHours() + "시" + today.getMinutes() + "분" + today.getSeconds() + "초";
// Text Node 조작
document.querySelector("#digClock").innerHTML = day + time;
//지가 지를 부르는 알고리즘
// setTimeout('digClock()', 1000); // ***: 1회성 scheduler
// 작업사이의 간격을 일정하게 하는 것
}// digClock
// digClock();
// 주기적으로 함수를 호출하는 메서드
setInterval(digClock(),1000); // 영속적인 주기로 지정된 핸들러 호출
// 일정한 간격으로 작업을 실행
</script>
</body>
DOM
- DOM tree *
아래와 같은 유형의 노드(Node)로 구성:
(1) 요소 노드 => 태그
(2) 텍스트 노드 => 태그의 시작/끝 태그사이에 값
(3) 속성 노드 => 태그의 속성
(4) 주석 노드 => 주석문
- 웹 문서를 메모리로 읽어 들여 트리 구조로 변환
- 문서의 각종 요소는 요소 노드로, 텍스트는 텍스트 노드로 변환
- 변환된 트리 구조를 이용하면 자바스크립트로 웹 문서를 조작할 수 있음
▼ 요소노드로 접근해 텍스트 노드 생성
<script>
function add() {
console.clear(); console.group('add');
let header=document.createElement('h3'); // 요소 노드 생성
let textNode=document.createTextNode('내 이름은 홍길동입니다.'); // 텍스트 노드 생성
header.appendChild(textNode); // 요소 노드와 텍스트 노드 연결
console.log(header);
document.body.appendChild(header); // 생성한 문서 객체를 body에 추가
console.groupEnd();
};
</script>
</head>
<body>
<!--
(1) E.target : <a> 태그
(2) E.type: : 마우스 click
(3) E.listener: onclick 속성
(4) E.handler : add() 함수
-->
<a href="#" onclick="add()">당신의 이름은 무엇입니까?</a>
<!-- 새로운 요소노드가 여기에 추가된다. -->
</body>
▼ 요소노드로 접근해 style 요소 속성 추가
<body>
<script>
function add() {
var img=document.createElement('img');
img.src='html5.jpg';
img.width=100;
img.height=122;
document.body.appendChild(img);
};
</script>
<!--
(1) E.target : <a> 태그
(2) E.type: : 마우스 click
(3) E.listener: onclick 속성
(4) E.handler : add() 함수
-->
<a href="#" onclick="add()">[이미지 추가]</a>
<!-- 새로운 요소노드가 여기에 추가된다. -->
</body>
2번째 방법 setAttyibute로 요소 속성 추가
<body>
<script>
function add() {
var img=document.createElement('img');
img.setAttribute('src', 'html5.jpg');
img.setAttribute('width', 100);
img.setAttribute('height', 122);
document.body.appendChild(img);
};
</script>
<!--
(1) E.target : <a> 태그
(2) E.type: : 마우스 click
(3) E.listener: onclick 속성
(4) E.handler : add() 함수
-->
<a href="#" onclick="add()">[이미지 추가]</a>
<!-- 새로운 요소노드가 여기에 추가된다. -->
</body>▼ 요소에 style속성 추가하기 함수와/이벤트 속성을 통해
<script>
function textstyle() {
let p = document.querySelector("#msg");
p.style.color="blue"; // Element 문서객체는 style 속성을 가지고 있고
p.style.fontSize="30px"; // 이 style 속성의 멤버로, CSS3의 모든 속성을 역시
p.style.fontStyle="italic"; // 하위 속성으로 가지고 있기 때문에, 모든 CSS속성 변경가능
} // ▲ style 의 속성은 카넬기법을 사용해서 적는다 .
function texthidden() {
let p = document.querySelector("#msg");
p.style.visibility="hidden";
}
function textvisible(){
let p = document.querySelector("#msg");
p.style.visibility="visible";
}
document.querySelector("#msg").addEventListener("click", textstyle);// 왜안되냐 이거는..
</script>
</head>
<body>
<p id="msg">문서 객체 스타일 변경하기</p>
<input type="button" onclick="textstyle()" value="텍스트 스타일 변경">
<input type="button" onclick="texthidden()" value="텍스트 숨기기">
<input type="button" onclick="textvisible()" value="텍스트 보이기">
<!-- 이벤트속성은 on으로 시작한다. 그러나 addEventListener 를 사용합니다-->
</body>
JSON에 대해
JSON: JavaScript Object Notation(기호)
(JSON은 서버 대 브라우저 통신의 표준을 규약)
JSON표현의 6가지 요소
1.객체 {필드명:값,필드명:값}
2.배열 [값,값]
3.value
4.string
5.number
6.whitespace:
객체 => JSON으로 변환하는 과정을 객체의 직렬화라고 한다.
JSON => 객체로 환원하는 과정을 객체의 역직렬화라고 한다.
일단 흐자