● DOM(Document Object Model) 객체
- HTML 태그들을 하나씩 객체화한 것을 말한다.
- HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체이다.
- HTML 태그 당 DOM객체가 하나씩 생성된다.
- HTML 태그의 포함관계에 따라서 부모, 자식, 형제자매 관계로 구성된다.
실습(json_array)
1. 문제
// train.json을 가져와서 객체로 변환 후
// level 프로퍼티로 변경하여 forEach를 통해 출력한다.
// 다른 프로퍼티가 필요 없기 때문에 객체를 level로 변경해야 한다.
2. 코드
let file = require('fs');
let train = new Array();
let hong = {name: '홍길동', age: 20, level: 1};
let kim = {name: '김철수', age: 40, level: 2};
let jang = {name: '장보고', age: 19, level: 3};
train.push(hong);
train.push(kim);
train.push(jang);
console.log(train);
let trainJSON = JSON.stringify(train);
console.log(trainJSON);
file.writeFile('day05/train.json', trainJSON, "utf-8", function(e){
if(e){
console.log(e);
}else{
console.log("출력 성공");
}
});
file.readFile('day05/train.json', 'utf-8', function(e, content){
let trainAr = JSON.parse(content);
// trainAr.map(function(v){return v.level;}).forEach(function(v){console.log(v)});
for(let i in trainAr){
console.log(trainAr[i].level);
}
});
실습(array)
- 문제
// 상품명, 가격, 재고를 프로퍼티로 담고 있는 Object를 3개 선언한다.
// 3개의 Object를 1개의 Array객체에 모두 담는다.
// JSON으로 변경시킨다.
// day05/shop.json으로 출력한다.
// readFile을 사용해서 day05/shop.json을 읽어온다.
// 기존의 JSON 내용을 Array 객체로 변환한다.
// 총 가격과 총 재고 수를 Object에 담은 후 day05/sum.json으로 출력한다.
// 상품이 3개이기 때문에 프로토타입을 사용하는 것이 적합하다.
1. 코드
let file = require('fs');
// 프로토타입
function Product(name, price, stock) {
this.name = name;
this.price = price;
this.stock = stock;
this.json = JSON.stringify(this);
}
let products = new Array();
products.push(new Product('마우스', 15000, 3).json);
products.push(new Product('키보드', 60000, 8).json);
products.push(new Product('야구공', 3500, 50).json);
console.log(products);
file.writeFile('day06/shop.json', "[" + products.toString() + "]", 'utf-8', function(e){
if(e){
console.log(e);
}else{
console.log("출력 성공!");
}
});
// 콜백함수에서 연산한 결과는 해당 영역밖에서는 사용할 수 없다.
// 따라서 연산한 결과를 활용하는 코드도 해당 영역 안에서 작성해야 한다.
file.readFile('day06/shop.json', 'utf-8', getTotal);
function getTotal(e, datas){
let sumObject = new Object();
let totalPrice = 0;
let totalStock = 0;
products = JSON.parse(datas);
products.map(function(v){return v.price * v.stock;}).forEach(function(v){totalPrice += v;});
products.map(function(v){return v.stock;}).forEach(function(v){totalStock += v;});
sumObject.totalPrice = totalPrice;
sumObject.totalStock = totalStock;
sumObject = JSON.stringify(sumObject);
file.writeFile('day06/sum.json', sumObject, 'utf-8', function(e){
if(e){
console.log(e);
}else{
console.log("출력 성공!");
}
});
}
2. 결과
- shop.json
[{"name":"마우스","price":15000,"stock":3},{"name":"키보드","price":60000,"stock":8},{"name":"야구공","price":3500,"stock":50}]
- sum.json
{"totalPrice":700000,"totalStock":61}
- 콘솔 출력
실습(DOM)
※ 클래스 이름을 이용한 선택
- 공통
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클래스 이름을 이용한 선택</title>
</head>
<body>
<h1>클래스 이름을 이용한 선택</h1>
<ul>
<li class="odd">첫 번째 아이템이에요!</li>
<li class="even">두 번째 아이템이에요!</li>
<li class="odd">세 번째 아이템이에요!</li>
<li class="even">네 번째 아이템이에요!</li>
<li class="odd">다섯 번째 아이템이에요!</li>
</ul>
</body>
</html>
- 홀수는 빨간색으로 바꾸기
<!DOCTYPE html>
......
</body>
<script>
let listTags = document.getElementsByClassName("odd");
for(let i = 0; i < listTags.length; i++){
listTags[i].style.color = "red";
}
</script>
</html>
- 짝수는 초록색으로 바꾸기
<!DOCTYPE html>
......
</body>
<script>
let listTags = document.getElementsByClassName("even");
for (let i = 0; i < listTags.length; i++) {
listTags[i].style.color = "green";
}
</script>
</html>
- 결과
'웹 개발 > JavaScript' 카테고리의 다른 글
| [Web_JavaScript] 12 (0) | 2022.05.08 |
|---|---|
| [Web_JavaScript] 11 (0) | 2022.05.07 |
| [Web_JavaScript] 09 (0) | 2022.05.05 |
| [Web_JavaScript] 08 (0) | 2022.05.04 |
| [Web_JavaScript] 07 (0) | 2022.05.03 |
