▪️ 인풋 다루기
▪️ 자바스크립트로html생성
▪️forEach,for in반복문
📌 인풋 다루기
우선 select input을 만든다
<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 form-hide">
<option>95</option>
<option>100</option>
</select>
</form>
셔츠 고르면 밑에 < select > 더 보여주기
form-hide클래스를 만들어서 자바스크립트로 탈부착하기
우선 화면에서 숨기기 위한 클래스를 만든다
.form-hide{
display:none;
}그리고 change or input 이벤트를 발생시켜 선택값이 변경될 때마다 확인한 후 조건에 따라 클래스 탈부착
$('.form-select').eq(0).on('change', function (e) {
if (e.target.value == '셔츠') {
$('.form-select').eq(1).removeClass('form-hide')
} else {
$('.form-select').eq(1).addClass('form-hide')
}
})🤔 혹은
조건문을 아래처럼 작성해도 동일한 결과이다
$('.form-select').eq(0).on('change', function ( ) {
if (this.value == '셔츠')$('.form-select').eq(0).on('change', function (e) {
if (e.currentTarget.value == '셔츠')e . currentTarget . value
this
➡️ 둘 다 이벤트 발생한 요소 값을 가리킴
📌 자바스크립트로 html 생성
◾ 생성법 1 - createElement()
태그 생성하여 안에 p 추가
let p = document.createElement('p'); // 태그 생성
p.innerHTML = '안녕' // html 생성
document.querySelector('#test').append(p)
append,appendChild둘 다 가능
◾ 생성법 2 - insertAdjacentHTML() / append()
템플릿을 담은 변수 생성 후 p 추가
let p = '<p>안녕하세요</p>'
document.querySelector('#test').insertAdjacentHTML('beforeend', p)추가가 아닌 교체를 하려면
document.querySelector('#test').innerHTML('beforeend', p)
jQuery로는 ?
$('#test').append(p)
📢 바지를 고르면 < option > 값을 변경하기
위에서 셔츠를 고르면 사이즈 선택할 수 있는 두번째 select input이 나타나도록 구현 완료하였다
이번에는 바지 옵션도 추가해서 바지를 클릭했을 때는 옵션 값이 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">
<option>95</option>
<option>100</option>
</select>
</form>바지 옵션 추가는 간단하게 완료하였다
- 바지를 클릭했을 때 옵션값의 변경 사항을 자바스크립트로 구현하기
여러 시행착오를 거치며... 아래처럼 html 내부를 교체해주는 코드로 바꿀 수 있었다
하지만 바지를 선택했다가 셔츠로 선택을 다시 하면 옵션값이 바뀐 28, 30 에서 기존의 95,100으로 바뀌지 않는 문제가 생겼다
$('.form-select').on('input', function (e) {
if (e.target.value == '바지') {
$('.form-select').eq(1).html('<option>28</option><option>30</option>')
}
})
- 조건문 수정
ver 1. html 갈아끼우기
$('.form-select').eq(0).on('change', function () {
if (this.value == '셔츠') {
$('.form-select').eq(1).removeClass('form-hide')
$('.form-select').eq(1).html('<option>95</option><option>100</option>')
} else if (this.value == '바지') {
$('.form-select').eq(1).html('<option>28</option><option>30</option>')
} else {
$('.form-select').eq(1).addClass('form-hide')
}
})이번에는 this를 사용해서 조건문을 작성해보았다
이 방법은 html 내부를 변경해주는 방식인데
이번에는 삭제 후 추가해주는 방식으로 해보겠다
ver 2. 삭제 후 추가
$('.form-select').eq(0).on('change', function () {
let pantsOption = `<option>28</option><option>30</option>`
let shirtOption = `<option>95</option><option>100</option>`
if (this.value == '셔츠') {
$('.form-select').eq(1).removeClass('form-hide')
$('.form-select').eq(1).html('')
$('.form-select').eq(1).append(shirtOption)
} else if (this.value == '바지') {
$('.form-select').eq(1).html('')
$('.form-select').eq(1).append(pantsOption)
} else {
$('.form-select').eq(1).addClass('form-hide')
}
})html 내부를 비워준 다음 append로 각자의 옵션을 추가하였다
📌 forEach, for in 반복문
위에서 만든 코드는 확장성이 부족하다
수정 사항이 생길 때마다 하나하나 수정하기는 번거로움이 발생하기 때문이다
➡️ 그래서 옵션값에 따라 알아서 생성되도록 하기 위해 반복문을 사용 해보려 한다
📑 반복문
기본 반복문
for (let i; i<data.length; i+++)
🔅 배열(array) 반복문
콜백함수가 필요하다
data.forEach(function(){})ex)
var pants = [28, 30, 32]; pants.forEach(function(a, i){ console.log(a) });
🔅 객체(object) 반복문
for (let i in data){}ex)
var obj = { name : 'kim', age : 20 } for (var key in obj){ console.log(key) }
shirts와 pants 배열 데이터를 각각 만든 후 forEach를 사용해 반복하였다
let shirts = [90, 95, 100, 105];
let pants = [28, 30, 32, 34];
$('.form-select').eq(0).on('change', function () {
if (this.value == '셔츠') {
$('.form-select').eq(1).removeClass('form-hide')
$('.form-select').eq(1).html('')
shirts.forEach((data) => {
$('.form-select').eq(1).append(`<option>${data}</option>`)
})
} else if (this.value == '바지') {
$('.form-select').eq(1).html('')
pants.forEach((data) => {
$('.form-select').eq(1).removeClass('form-hide')
$('.form-select').eq(1).append(`<option>${data}</option>`)
})
} else {
$('.form-select').eq(1).addClass('form-hide')
}
})=> 잘 동작한다 !😎
arrow function
콜백함수를 만들 때 자주 사용되는 함수 만드는 문법
function키워드 대신=>화살표를( )우측에 부착
- 파라미터가 하나면 () 소괄호 생략 가능
- 함수 중괄호 안에
return한 줄 밖에 없으면{ }중괄호와return동시에 생략 가능
pants.forEach(function(a){
console.log(a)
pants.forEach((a) => {
console.log(a)
});그냥 함수도 만들 수 있다
let 함수 = function(){ console.log('안녕') } let 함수 = () => { console.log('안녕') }
🤔 그냥 함수와 arrow function의 기능차이
함수 안에서 this를 써야할 경우
- 그냥 함수는 함수 안에서 this를 알맞게 재정의
- arrow function은 함수 안에서 this를 재정의해주지 않고 바깥에 있던 this를 그대로 사용
➡️ 그래서 이벤트리스너 콜백함수안에서 this를 써야하면 arrow function 대신 그냥 함수 사용
