javascript기초(Select 인풋을 통한 다양한 기능구현,forEach,for in 반복문)

 

 

select 와 option 태그를통해 다음과 같이 쇼핑몰에서 흔히 볼수있는 UI를 구현할수 있다.

<form class="container my-5 form-group">

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

 

여기서 셔츠,바지를 눌렀을때 또다른 사이즈를 선택할수 있는 select 태그를 추가하고 싶다면 어떻게 해야할까.

form 태그 안에 select 를 추가하여 이벤트가 발생할때 태그를 감춰주는 css를 탈부착 하는방법이 있는데 이건 많이 해봤으니 pass

 

그래도 해보기,

 

<select class="form-select mt-2 form-hide">
      <option>95</option>
      <option>100</option>
</select>

<script>
$('.form-select').eq(0).on('change',function(){
        var value = this.value; // this를 이용해 유저가 선택한것의 vlaue를 변수에 담음.
       
        if (value == '셔츠') {
    	$('.form-select').eq(1).removeClass('sizeSelec'); // 벨류값이 '셔츠'일때 class를 때줌
         } else {
         $('.form-select').eq(1).addClass('sizeSelec'); // '셔츠'를 제외한 다른것을 선택할때는 숨김
        }
</script>

 

if 문을 이용해 셔츠 option을 선택하면 사이즈를 선택할수 있는 select가 나타난다.

** function 안에서 value 값을 지정할때 this를 사용할수 있지만 arrow function '() =>' 에서는 this를 넣었을때 잘 동작하지 않는다.

 

이유는 

-그냥 함수는 함수 안에서 this를 알맞게 재정의해 주지만,arrow function은 함수 안에서 this를 재정의해주지 않고 바깥에 있던 this를 그대로 쓰기 때문이다. 따라서 이벤트리스너 콜백함수 안에서 this를 써야하는 경우 arrow function을 쓰면 의도와 다르게 동작할수 있다.

---

구현해볼 기능은 사이즈 데이터를 서버로 부터 전달받고, 해당 데이터를 option에 넣는 방식으로 코드를 작성해 보겠다.

 

var pants = [28, 30, 32, 34];
var shirts = [95, 100, 105];

 

다음과 같이 셔츠와 바지의 사이즈를 가지고있는 데이터가 있고 데이터를 받아온다 가정하자

 

$('.form-select').eq(0).on('change',function(){
        var value = this.value;
        
        if(value == '셔츠'){

          $('.form-select').eq(1).removeClass('sizeSelec');
          $('.form-select').eq(1).html('');
          shirts.forEach(function(item){
            $('.form-select').eq(1).append(`<option>${item}</option>`)
          });     

        } else if(value == '바지'){

          $('.form-select').eq(1).removeClass('sizeSelec');
          $('.form-select').eq(1).html('');
          pants.forEach(function(item){ // array자료에만 붙힐수 있는 반복문
            console.log(item);
            $('.form-select').eq(1).append(`<option>${item}</option>`)
          }); 
       
        } else {
          $('.form-select').eq(1).addClass('sizeSelec');
        }
   });

 

 

forEach를 사용하여 shirt array 안에 있는 데이터 값의 갯수만큼 반복실행 -> option태그 안에 데이터값을 순차적으로 넣는다

'forEach(funtion(a, i){})' 다음과 같이 콜백함수 안에 파라미터 2개까지 작명이 가능한데,

첫 파라미터는 반복문 돌 때 마다 array 안에 있던 하나하나의 데이터가 되고

둘 째 파라미터는 반복문 돌 때 마다 0부터 1씩 증가하는 정수가 된다.

---

 

object 자료 다룰 때 for in 반복문

 

var ojb = { name : 'hjin', age : 20 }

for (var key in obj){
	console.log('hello')
}

다음과 같이 코드를 작성하면 'hello'가 2회 출력된다.(오브젝트 데이터의 길이만큼)

 

//반복문이 돌 때 마다 object 자료 안에 있던 key값이 된다.

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

for (var key in obj){
  console.log(key) ==> name, age
}

//value를 출력해줌

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

for (var key in obj){
  console.log(obj[key]) ==> kim, 20
}

 

**key라고 작명하는 부분은 반복문이 돌 때 마다 object자료 안에 있던 key값이 된다.