17일차 - 유효성 검사(DOM)

• display block과 none으로 보였다 안보였다 할 수 있다.

• createElement ㅡ 요소 노드 생성 + 수정

• setAttribute('class', 'sports-list') < ex)
  id나 class 같은 요소에 속성 부여
  or
  classList.add로 추가

• append와 appendChild의 차이
  append는 여러 개 추가 가능.
  appendChilld는 인자를 한 개만 전달할 수 있다.

• setAttribute안에 문자열로 넣는 이유는 그냥 규칙

• onclick vs addEventListener
  addEventListener가 더 최신 방법이고 더 유용하다
  addEventListener (이벤트 동작, 함수 () ) >> 이벤트 동작에 on 붙이면 안된다
  addEventListener 뒤에 event 자동으로 생성

• 어떤 이벤트 발생 시 작동하는 함수를 할당하는 방법은 두 가지 방법이 있다.
  DOM 객체에 onclick을 직접 지정할 수도 있고 addEventListener라는 메서드를 사용해서 할당할 수도 있다.

• css 속성을 동적으로 변환하고 싶을 때 예시
  li.style.color = 'blue'; // >> 이벤트

DOM으로 <input type="text"> 또는 <textarea>와
같은 엘리먼트의 입력 값을 설정하거나,
또는 얻어내려면 어떤 속성을 사용해야 할까요?

ㅡ> 해당 엘리먼트를 querySelector 등을 이용해
가져온 후 value라는 속성으로 접근할 수 있습니다.

아이디가 "javascript"이고, 내용이 "awesome"인 a 요소를 생성하기 위해 옳은 방법

let aElement = document.createElement('a')
aElement.setAttibute('id', 'javascipt')
aElement.textContent = 'awesome'
ㅡ> setAttribute 메서드를 통해서 명확하게 어떤 값이 key이고
value인지 지정해 주었고, textContent를 사용

function isMoreThan4Length(value) {
  return value.length >= 4
}
ㅡ > return 안에 부등호 자체가 true false를 나타내기 때문에
value 길이 따라 알아서 true false로 return 된다.

elInputUsername.onkeyup = function () {
  if (isMoreThan4Length(elInputUsername.value)) {
    // console.log('충분함')
    elSuccessMessage.classList.remove('hide')
    elFailureMessage.classList.add('hide')
  }
  else {
    // console.log('짧음')
    elSuccessMessage.classList.add('hide')
    elFailureMessage.classList.remove('hide')
  }
}
ㅡ> if는 true 경우이고 else는 true가 아닐 경우이기 때문에
굳이 안에다가 true false 조건 추가할 필요 없다

유효성 검증 함수 필요할 경우 구글링 해서 참고