[JS] array 와 object 자료형 & 데이터바인딩 (2)

준비물

데이터바인딩.zip

0.00MB

---

데이터 바인딩
- 데이터와 화면을 연결
- ex) 가격표 실시간 변경

첫째 상품명(Blossom Dress)을 뽑기 - console.log 로 먼저 찍음

console.log(products);

다음과 같이 나온다

시작기호 보기

[ 시작 - array

그 다음 { - object 3개

HTML에 클래스 부여

    <h5 class="card-title">Card title</h5>

이렇게 셀렉터가 html 요소를 찾기 쉽게 하기위해 클래스를 부여.

 

또는 

document.querySelectorAll(".card-body h5")[0]

이렇게도 쓸 수 있다.

 

 

document.querySelector(".card-title").innerHTML = products[0]["title"];

인덱스 (array) 먼저 써주고

순차적으로 이름 (object) 써준다.

 

또는

document.querySelectorAll(".card-body h5")[0].innerHTML = products[0]["title"];

products[0].title

---

(products 변수 하단)

document.querySelectorAll('.card-body h5')[0].innerHTML = products[0].title;
document.querySelectorAll('.card-body p')[0].innerHTML = '가격 : ' + products[0].price

document.querySelectorAll('.card-body h5')[1].innerHTML = products[1].title;
document.querySelectorAll('.card-body p')[1].innerHTML = '가격 : ' + products[1].price;

document.querySelectorAll('.card-body h5')[2].innerHTML = products[2].title;
document.querySelectorAll('.card-body p')[2].innerHTML = '가격 : ' + products[2].price;

---

문자 중간에 변수 쉽게 넣기

var a = '안녕';
console.log('문자' + a + '문자');  // '문자안녕문자'출력됨

 

백틱기호
- ${ 변수명 } 문법
- ${ } 이건 문자안에 변수넣어줌

var a = '안녕';
console.log(`문자 ${a} 문자`);  // '문자안녕문자'출력됨

---

let name ='예시';
let age = 5;
// 일반적인 따옴표 사용
let greeting1 = '안녕, ' + name + '! 너는 ' + age +'살이야!' ;

// 백틱 기호 사용
let greeting2 = `안녕, ${name}! 너는 ${age}살이야!`;