✔Array & Object 1 (1강)

Array 자료형

• 대괄호 안에 콤마로 구분해서
  var car = ['소나타', 50000, ''white]
• 순서대로 저장
• 자료 간 정렬.sort() 및 데이터 자르기.slice(x, y), 데이터 삽입 .push(x), 데이터 검색 .include()등 가능

// Array 자료형 
        var car = ['소나타', 5000, 'white'];
        car[0] =  '토레스'; 		// 수정
        car[3] = '오토'; 			// 추가
        console.log(car); 		 // ['토레스', 5000, 'white', '오토']
        console.log(car[1]);	 // 5000
        console.log(car.sort()); // 정렬, [5000, 'white', '오토', '토레스']
        console.log(car.slice(1,3)); // 1부터 3 전번째 까지 데이터 자르기, ['white', '오토']

Object 자료형

• key : value 형태로 자료를 저장
• var car2 = { name : '소나타', price : 50000 };
• 순서 개념 없음, 인덱싱 불가
• 자료의 위치를 기억할 필요 없이 key 값으로 데이터를 찾을 수 있음

// Object 자료형
        var car2 = {name : '소나타', price : 50000};
        car2.price = '80000';
        car2.name = '토레스';

        console.log(car2); 				// {name: '토레스', price: '80000'}
        console.log(car2['price']); 	// 80000
        console.log(car2.price); 		// 8000

✔ Array & Object 2 (2강)

복잡한 Array & Object 자료형

• object 안에 array/object 자료형 삽입 가능
• array 안에 array/object 자료형 삽입 가능

웹서비스 개발 방식

1. server-side rendering

• 서버에서 완성된 html 파일을 클라이언트에 보냄

2. client-side rendering

• 서버가 비어있는 html과 데이터를 보내주면
• javascript를 이요해 고객 브라우저 안에서 html 완성
• 즉, 데이터 바인딩

client-side rendering 예시

<div class="container mt-3">
        <div class="card p-3">
            <span class="car-title">상품명</span>
            <span class="car-price">가격</span>
            <span class="car-color">색</span>
        </div>
    </div>

    <script>
        var car = ['소나타', 5000, 'white'];
        var car2 = {name : '소나타', price : 50000, color:['white', 'black', 'yellow']};
        console.log(car2);
        document.querySelector('.car-title').innerHTML = car[0];
        document.querySelector('.car-price').innerHTML = `${car2.price}원`;
        document.querySelector('.car-color').innerHTML = car2.color[1];
    </script>

✔ Array & Object 데이터바인딩 (3강)

데이터 바인딩

    <div class="card-group container">
        <div class="card">
          <img src="https://via.placeholder.com/600">
          <div class="card-body">
            <h5>Card title</h5>
            <p>가격 : 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>Card title</h5>
            <p>가격 : 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>Card title</h5>
            <p>가격 : 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<$('.card-body').length; i++){
            $('.card-body h5').eq(i).html(products[i].title)
            document.querySelectorAll('.card-body p')[i].innerHTML = `가격 : ${products[i].price}`;
        }
      </script>

✔ Select Input (4강)

select

-<select>
: 사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 <input>

• 선택지는 <option>으로 넣으면 됨
• <select> 태그도 선택시 input, change 이벤트가 발생
• <select> 태그도 .value로 유저가 입력한 값을 가져올 수 있음

select에 따라 다른 select 추가

• 유저가 셔츠를 선택하면 하단에 95, 100 을 선택할 수 있는 <select> 박스가 등장
• 유저가 선택한 옵션은 <input>과 똑같이 .value 사용하면 알 수 있음
  jQuery의 경우 .val()

	no-shirt{
	display : none
}

    <form class="container my-5 form-group">
        <p>상품선택</p>
        <select class="form-select mt-2">
            <option>모자</option>
            <option>셔츠</option>
        </select>
        <select class="form-select mt-2 no-shirt">
            <option>95</option>
            <option>100</option>
        </select>
    </form>

    <script>
        $('.form-select').eq(0).on('input', function(){
            if($('.form-select').eq(0).val() == '셔츠'){
                $('.form-select').eq(1).removeClass('no-shirt');
            } else {
                $('.form-select').eq(1).addClass('no-shirt');
            }
        });        
    </script>

응용

<script>
$('.form-select').eq(0).on('input', function(e){
            var value = e.currentTarget.value;
            $('.form-select').eq(1).toggleClass('no-shirt', value !== '셔츠');
        });
</script>

또는

<script>
$('.form-select').eq(0).on('input', function(e){
            var value = this.value;
            $('.form-select').eq(1).toggleClass('no-shirt', value !== '셔츠');
        });
</script>

✔ Select 2 & 자바스크립트로 html 생성 (5강)

JavaScript로 html 생성

• 기존 코드는 셔츠 사이즈를 95, 100이라고 하드코딩 해 두었기 때문에 확장성이 부족함

1. createElement

• document.createElement() 사용하면 html 자료를 하나 생성
• appendChild()fmf 사용해서 넣으면 html 생성됨

<div id="test">
        <h4>안뇽 안뇽</h4>
    </div>

<script>
  var a = document.createElement('p'); // p태그 생성
          a.innerHTML = '안녕';		 // p태그 안에 '안녕' 넣기
          document.querySelector('#test').appendChild(a); // 아이디가 test인것 안에 <p>안녕<p> 추가
</script>

2. insertAdjacentHTML

• 문자자료로 html을 만든 다음 insertAdjacentHTML() 안에 넣고
• 삽입할 곳을 찾아 beforeend로 맨 밑에 추가 가능
• createElement 보다 코드가 짧음

<script>
	var pTag = '<p class="hello">안녕</p>'
        document.querySelector('#test').insertAdjacentHTML('beforeend', pTag);
</script>

3. append

• 안쪽 맨 밑에 추가하라는 의미

<script>
        var pTag = '<p class="hello">안녕</p>'
        $('#test').append(pTag);
</script>

JS로 html 생성 예시

• 셔츠 선택 시 옵션 95, 100
• 바지 선택 시 옵션 28, 30이 보이도록

<form class="container my-5 form-group">
        <p>상품선택</p>
        <select class="form-select mt-2">
            <option>모자</option>
            <option>셔츠</option>
            <option>바지</option>
        </select>
        <select class="form-select mt-2 form-hide">

        </select>
</form>

<script>
	$('.form-select').eq(0).on('input', function(e){
            var value = this.value;
            if(value == '셔츠'){
                $('.form-select').eq(1).removeClass('form-hide');
                $('.form-select').eq(1).html(''); // 비우기
                var detailOption = `<option>95</option><option>100</option>`;
                $('.form-select').eq(1).append(detailOption);
            } else if(value == '바지'){
                $('.form-select').eq(1).removeClass('form-hide');
                $('.form-select').eq(1).html('');
                var detailOption = `<option>28</option><option>30</option>`;
                $('.form-select').eq(1).append(detailOption);
            }
        });
</script>

축약

<script>
	var detailOption = $('.form-select').eq(1)

        function updateDetailOptions(options){
            detailOption.removeClass('form-hide').html(options); // 보이게 + option 추가
        }

        $('.form-select').eq(0).on('input', function(e){
            var value = this.value;
            if(value == '셔츠') {
                updateDetailOptions(`<option>95</option><option>100</option>`);
            } else if(value == '바지'){
                updateDetailOptions(`<option>28</option><option>30</option>`);
            } else{
                detailOption.addClass('form-hide');
            }
        });
</script>

✔ Select 3 & forEach, for in 반복문 (6강)

• 서버에서 사이즈 데이터를 가져와서 그 갯수만큼 <option> 생성

반복문

forEach

• 콜백 함수 안에 파라미터 3개까지 작명 가능함
• 첫 파라미터는 반복문 돌 때마다 array 안에 있던 하나하나의 데이터
• 두번째 파라미터는 반복문 돌 때마다 0부터 1씩 증가하는 정수

var pants = [28, 30, 32];
pants.forEach(function(size, i){
  console.log(size);
});

arrow function

• arrow function으로 사용할 수 있음
• arrow function은 파라미터가 하나면 () 소괄호 생략해도 됨
• 함수 중괄호 안에 return 한 줄 밖에 없으면 { } 중괄호와 return 동시에 생략 가능

var pants = [28, 30, 32];
pants.forEach((size) => {
  console.log(size);
});

// 또는
pants.forEach(size => { // 소괄호 생략 가능
  console.log(size);
});

for in 반복문

var obj = {name : 'kim', age : 20}

for (var key in obj){
  console.log(key);		// key 이름
  console.log(obj[key]);// key에 해댱하는 value
}  

function과 arrow function의 차이

let 함수 = function(){ console.log('안녕') }
let 함수 = () => { console.log('안녕') }

함수 안에서 this를 써야할 경우

• 일반 함수는 함수 안에서 this를 알맞게 재정의함
• but) arrow function은 함수 안에서 this를 재정의해주지 않고 바깥에 있던 this를 그대로 사용
  → 이벤트리스너 콜백함수안에서 this를 써야하면 arrow function 쓰면 의도와 다르게 동작할 수도 있음

반복문 사용해 option 표시

    <form class="container my-5 form-group">
        <p>상품선택</p>
        <select class="form-select mt-2">
            <option>모자</option>
            <option>셔츠</option>
            <option>바지</option>
        </select>
        <select class="form-select mt-2 form-hide">

        </select>
    </form>


    <script>
        var shirts = [95, 100, 105];
        var pants = [28, 30, 32, 40];

        $('.form-select').eq(0).on('input', function(e){
            var value = this.value;
            if(value == '셔츠'){
                $('.form-select').eq(1).removeClass('form-hide');
                $('.form-select').eq(1).html('');
                // 1. forEach
                shirts.forEach(function(size){ // forEach 사용시 콜백함수
                    $('.form-select').eq(1).append(`<option>${size}</option>`);
                });
            } else if (value == '바지') {
                $('.form-select').eq(1).removeClass('form-hide');
                $('.form-select').eq(1).html('');
                // 2. for문
                for (let i = 0; i < pants.length; i++) {
                    var detailOption = `<option>${pants[i]}</option>`;
                    $('.form-select').eq(1).append(detailOption);
                } 
                // 3. forEach arrow function
                pants.forEach((size) => { // arrow function
                    $('.form-select').eq(1).append(`<option>${size}</option>`)
                });   

            } else {
                $('.form-select').eq(1).addClass('form-hide');
                $('.form-select').eq(1).html('');
            }
        });
    </script>

더 간결하게

        var detailOption = $('.form-select').eq(1)

        function detailOptions(options){
            detailOption.removeClass('form-hide').html(options);
        }  

        $('.form-select').eq(0).on('input', function(e){
            var value = this.value;
            var html = "";

            if(value == '셔츠') {
                shirts.forEach(function(size){
                    html += `<option>${size}</option>`;
                });
                detailOptions(html);
            } else if(value == '바지'){
                pants.forEach(function(size){
                    html += `<option>${size}</option>`;
                });
                detailOptions(html);
            } else{
                detailOption.addClass('form-hide');
            }
        });