자바스크립트> 데이터 바인딩 실습

첫째 상품명을 뽑는 법을 알아봅시다. 

 

설명하다

 

var products = [
  { id : 0, price : 70000, title : 'Blossom Dress' },
  { id : 1, price : 50000, title : 'Springfield Shirt' },
  { id : 2, price : 60000, title : 'Black Monastery' }
]; 

▲ 어렵게 생긴 자료도 console.log 해보면 쉽게 출력할 수 있다고 했습니다. 

console.log(products) 해보면 [{ }, { }, { }] 이렇게 나옵니다.  

그냥 array 안에 object 3개가 들어있을 뿐입니다.

그래서 저기서 내가 원하는 자료를 뽑고 싶으면 시작 기호만 잘 보면 됩니다.

[ 이거는 array라서 인덱싱하면 됩니다.

 

 

이번엔 console.log(products[0]) 해보면 { id : 0, price : 70000, title : 'Blossom Dress' } 이런게 나옵니다.

{ 이거는 object라서 이름불러주면 됩니다.

여기서 Blossom Dress 뽑으려면 

console.log(products[0].title)

이렇게 쓰면 잘나올듯요 

 

제이쿼리와 id를 써서 만듬 , jq 문법 다시 보기

  $('#0 h5') .html(products[0].title);

        // document.querySelectorAll('.card-body h5')[0].innerHTML = title

        // jQuery는 $()eq(0).html() =는 필요가없다

        $('#0 p').html('가격 : ' + products[0].price);

        // document.querySelectorAll('.card-body p')[0].innerHTML =

        // '가격 : ' + products[0].price;

 

 

설명하다

 

(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; 

이렇게 코드를 작성했더니 카드에 상품명, 가격이 잘 들어가는군요

반복문 이런거 쓰고싶으면 쓰면 됩니다. 

답안 그대로 따라적으면 영어 타이핑 실력만 늘 뿐 조금이라도 직접 해봐야합니다. 

 

 

 

 

 

문자 중간에 변수 쉽게넣기

 

console.log(1 + '2');  // '12'출력됨

자바스크립트에서 덧셈기호 쓰면 문자이어붙이기가 쉽게 가능합니다.

숫자 + 숫자는 숫자 덧셈해주는데

문자 + 숫자처럼 적어도 1개가 문자면 문자 덧셈을 해줍니다.

문자덧셈은 그냥 문자2개 이어붙여줌 

 

 

 

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

그래서 문자중간에 변수넣고 싶으면 덧셈기호 저렇게 활용하면 됩니다. 

 

 

 

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

귀찮으면 여러분 키보드 물결기호 밑에 있는 백틱기호 쓰면 됩니다. 

백틱기호도 문자만들어주는데

1. 문자 중간에 엔터키 칠 수 있음

2. 중간에 ${ 변수명 } 문법을 이용가능함

 

${ } 이건 문자안에 변수넣어주는 간단한 문법입니다.

일반 따옴표안에선 사용불가능합니다. 

필요하면 씁시다.