코딩애플 JavaScript 입문과 웹 UI개발 Lv3(a)

Array와 Object 자료형

- select 태그도 선택시 input, change 이벤트 발생한다. (?) 이게 무슨 말이더라
- select 태그도 .value로 유저가 입력한 값을 가져올 수 있다.

폼 > select > 옵션

form-hide 클래스에 display: none; 을 주고
애초에 준 상태에서 시작한 다음
.removeClass() 한다. 얘는 jquery ! 
$('.form-select').eq(1).removeClass('form-hide'); 가리는 걸 없앴으니까 보이겠지! 
select의 value가 셔츠면 보여주는 것이다. option 들을

jquery : var value = $('.form0select').eq(0).val(); 
자바스크립트는 .value = 

<script> 안에 적은 코드는 페이지 로드시 1회 실행됨 ! 되새기기 그래서 감시 해줘야함. ( 조작할 때마다 실행 )

(응용) 1. '모자' 선택했을 때 select 다시 숨기는 기능 ( else : addClass ) / append 는 html 추가할 때 써줬었다.
2. 비슷한 셀렉터 변수화해서 성능개선!
3. 이벤트리스너 안에서 e.currentTarget 아니면 this 써보기

목표 : 이전은 하드코딩이었기 때문에 확장성이 부족하다. 따라서 서버에서 보낸 데이터 갯수에 맞게 option 태그 생성
>> html 생성하는 법 알아보기

< 자바스크립트로 html 생성법 >
var a = document.createElement('p');

a.innerHTML='안녕';
a.classList.add()

특정 태그 안에 태그 만들고 싶을 때
document.querySelector('#test').appendChild(a);

하지만 위의 것들은 너무 길고 복잡해지기 때문에 간단한 문법

< 자바스크립트 html 생성법 2 > // 1번과 다르게 document.querySelector(' ').appendChild >> insertAdjacentHTML (append in jquery)
** adjacent : 인접한
-> 얘는 태그 안쪽에 추가해주는 코드고, 아예 바꾸고 싶다면, querySelector.innerHTML='<><>' or $().html()

var 템플릿 = '<p>안녕</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend',템플릿);
문자형 HTML 넣어주는 함수 (앞에거 안에 ) beforeend: 안쪽 맨밑, 넣을 것 , 조금 더 간편 !

$('#TEST').append('템플릿'); //jquery 더 간단! insertAdjacentHTML, append 등 모두 밑에 추가
아예 없애고하고싶으면 innerHTML로 넣어주면 됨. jquery 는 .html

생성법1. createElement() 성능 더 높지만 별로 차이 없음,  길고 복잡해서 생성법2 더 많이 쓴다.
생성법 2. insertAdjacenetHTML, append

innerHTML = 28 , 29 넣으면되겠지 모

html 코딩에서 엔터는 백틱 `

<script>
 $('.form-select').eq(0).on('input', function(){
  var value = $('.form-select').eq(0).val();
  if (value == '셔츠') {
  $('.form-select').eq(1).removeClass('form-hide');
} else if (value=='바지'){
  $('.form-select').eq(1).removeClass('form-hide');
   $('from-select').eq(1).html(' '); // 우선 안에거 날려주고?? ok
  var a = `<option>27</option>
 <option>28</option>`
 
  $('.form-select').eq(1).append(a);

유저가 바지를 선택하면
1. 둘 째 <select> 보여주고
2. 둘 째 <select> 안에 비워주고
3. html 만들어서 둘 째 <select> 안에 append 

(응용) 바지 눌렀다가 다시 셔츠 누르면 이상해지는 문제도 해결해보기
셔츠 눌렀을 때 둘 째 select 안에 있는 html 조정 필요 !

+ 추가 : nav 바에 가려지는 거 content padding으로 줬는데, 이렇게 주는 게 맞는지 찾아보자