JavaScript 입문과 웹 UI개발(21)-약간 복잡한 Array & Object 데이터바인딩
2022. 10. 8. 19:14ㆍ애플코딩 javascript 강의
반응형
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<div class="card-group container">
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p class="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
</div>
<script>
//밑에 있는 데이터를 위에 있는 상품정보에 바인딩을 해볼거다
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
for(let i=0; i<3; i++){
//제이쿼리를 이용하는 경우
//$('.title').eq(i).html(products[i].title);
//$('.price').eq(i).html(products[i].price);
//자바스크립트를 이용하는 경우
// 띄어쓰기를 통해 자식 태그를 선택할 수 있다.
document.querySelectorAll('.card-body h5')[i].innerHTML=products[i].title
document.querySelectorAll('.card-body p')[i].innerHTML=`가격: ${products[i].price}`
}
//문자 중간에 쉽게 변수 넣는 방법 ``안에다 ${}를 이용
//보통 문자열을 넣을때 ''아니면 ""를 사용했는데 ~밑에 있는 ``를 사용하면 ${변수}가 변수 값으로 출력된다
//+가 너무 많은 경우 저렇게 출력을 하면 좋다
var hi='안녕하다';
console.log(`안녕하냐? ${hi}`)
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>Card title
가격 : 70000
Card title
가격 : 70000
Card title
가격 : 70000
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(23)-자바스크립트로 html 생성하는 법 (1) | 2022.10.08 |
|---|---|
| JavaScript 입문과 웹 UI개발(22)- Select 인풋 다루기 (0) | 2022.10.08 |
| JavaScript 입문과 웹 UI개발(20)-dataset을 이용한 tab 기능 (0) | 2022.10.07 |
| JavaScript 입문과 웹 UI개발(19)-이벤트 버블링과 이벤트관련 함수들 (0) | 2022.10.07 |
| JavaScript 입문과 웹 UI개발(18)-탭기능 만들며 배우는 for 반복문 (0) | 2022.10.07 |