memo

• dom 할 때 js파일 안에서 코드작성하는 걸 html파일에서 해가지고 그냥 스트링 값이 output된것 같다. in opensandbox.

• classList.remove('hide')를 사용해서 설정된 hide를 지워주면 값이 나오게 된다.

수도코드 먼저 작성한다.

• 아이디 입력창(elInputUsername)에 글자를 키보드로 입력할 때
• "글자 수가 4개 이상"이면 ,
• "사용할 수 있는 아이디입니다" 메시지 출력

let elSuccessMessage = document.querySelector('#username')

let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')

elInputUsername.onkeyup = function() { 
	console.log(elInputUsername.value) // elInputUsername의 값
	
  if(isMoreThan4Length(elInputUsername.value)) {
	console.log('4글자보다 크다') // 성공메시지가 보여져야함
    elSuccessMessage.classList.remove('hide')
    
    // 실패메시지가 가려져야함 
    elFailureMessage.classList.add('hide')
	}
  else{
  	console.log('짧다') // 성공메시지가 가려져야함 
    elSuccessMessage.classList.add('hide')
    
    // 실패메시지가 보여야 함 
    elFailureMessage.classList.remove('hide')
  }
}

function inMoreThan4Length(value) {
	return value.length >= 4
  // isMoreThan4Length('hello') => true
}

이벤트와 관련된 설명

• DOM에서 이벤트는 마우스 클릭, 또는 키보드 입력등의 의해 발생한다.
• 브라우저 창 크기를 조절하거나, 스크롤 하는 것도 DOM 이벤트의 일종이다.
• 이벤트가 발생할때 실행되는 함수를 이벤트 핸들러라고 부른다
• 이벤트와 관련된 속성은 on 이라는 접두어가 붙는다. (onclick, onkeyup)등

실수하는 것들

• 이벤트 속성 (onclick 에 이벤트 핸들러를 등록할 때 , 함수실행이 아닌, 함수이름을 등록해야한다.) 그라고 onClick이 아니라 , 모두 lowercase로 적는다.

과제 유효성검사