[개발일지] JavaScript & JQuery 기초 수업 Level 3-1

<코딩애플 온라인강의 수강일지>

Level 3-1 JavaScript: Array & Object, 반복문 forEach/for in, Ajax, sort/map/filter

 

1. array

// array 함수

array.sort() // 가나다순 정렬
array.slice(x, y) // x번 부터 y전까지 자륾
array.push(x) // x를 맨 뒤에 입력

 

 

2. object

// { key : value }
var car = { name : '소나타', price : 50000, year : 2030 };

car.name // 소나타
car['price'] // 50000

 

3. 데이터 바인딩

        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 < products.length; i++) {
            $('.card-body h5').eq(i).html(products[i].title)
            $('.card-body p').eq(i).html(`가격: ${products[i].price}`)
        }

 

4. <select> input

<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">
            <option>95</option>
            <option>100</option>
        </select>
    </form>

    <script>

        var pants = [28, 30, 32]


        $('.form-select').eq(0).on('input', () => {
            var value = $('.form-select').eq(0).val()
            if (value == '셔츠') {
                $('.form-select').eq(1).removeClass('form-hide')
                var temp_html = `            <option>95</option>
            <option>100</option>`
                $('.form-select').eq(1).html(temp_html)
            } else if (value == '바지') {
                $('.form-select').eq(1).removeClass('form-hide')
                $('.form-select').eq(1).html('')
                pants.forEach((a) => {
                    var temp_html = `<option>${a}</option>`
                    $('.form-select').eq(1).append(temp_html)
                })
            }
        })

 

5. forEach / for in 반복문

// forEach 반복문

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

// a -> 반복문 돌 때 마다 array 안에 있던 하나하나의 데이터
// i -> 반복문 돌 때 마다 0부터 1씩 증가하는 정수

// for in 반복문

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

for (var key in obj){
  console.log(obj[key])
}

 

6. arrow function ()=>{}

pants.forEach((a) => {
  console.log(a)
});


// 파라미터 1개일 때 소괄호 생략 가능
pants.forEach( a => {
  console.log(this)
});

<function() vs arrow function>

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

- 그냥 함수는 함수 안에서 this를 알맞게 재정의

- arrow function은 함수 안에서 this를 재정의해주지 않고 바깥에 있던 this를 그대로 사용

*이벤트리스너 콜백함수안에서 this를 써야할 때, arrow function 쓰면 의도와 다르게 동작하므로 사용 금지

 

 

7. Ajax "GET" 요청

$.get('https://codingapple1.github.io/hello.txt')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패함')
  });

// get 요청한 자료, 카드로 생성하기

$('#more').click(function(){
    $.get('https://codingapple1.github.io/js/more1.json')
      .done((data)=>{
        
        data.forEach((a, i)=>{
          var 템플릿 = 
          `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${data[i].title}</h5>
            <p>가격 : ${data[i].price}</p>
          </div>`;
          $('.row').append(템플릿)
        })
        
      });
  });

 

8. array 함수 sort / map / filter

// sort 함수
var array = [7,3,5,2,40];
array.sort(function(a, b){
  return a - b
});



// sort 함수: 다나가순 정렬
var array = ['가', '다', '나'];
array.sort(function(a, b){
  if (a < b) {
    return 1 
  } else {
    return -1
  }
});


// sort 함수: array 내의 object 정렬
var products = [
	{ id: 0, price: 70000, title: 'Blossom Dress' },
	{ id: 1, price: 50000, title: 'Springfield Shirt' },
	{ id: 2, price: 60000, title: 'Black Monastery' }
	];

$('#sort1').click(function(){
  
  products.sort(function(a, b){
    if (a.title < b.title) {
      return 1
    } else {
      return -1
    }
  });
  
  console.log(products)
});

// filter 함수: 조건에 부합하는 자료들만 필터링

var products = 생략;

$('#sort1').click(function(){
  
  products.sort(function(a, b){
    if (a.title < b.title) {
      return 1
    } else {
      return -1
    }
  });
  
  console.log(products)
});

// map 함수: array 안의 자료들을 전부 변형

var array = [7,3,5,2,40];

var newArray = array.map(function(a){
  return a * 1000
});