배우면서 그동아 몰랐거나 헷갈렸던 내용을 위주로 정리합니다.
유효성 검사
- 유효성 검사(validation)란, 사용자가 폼에서 입력한 데이터가 알맞은 형식으로 입력되었는지 검사하는 것입니다. 즉 입력받은 데이터가 유효한지 검사하는 기능을 말합니다.
<filedset>
- 양식 속에 그룹을 만들 수 있는 요소입니다. 내부에
<legend>요소를 쓰면 양식의 내용을 설명할 수 있습니다. (양식을 만드는 요소는<form>만 있는 줄 알았는데 새롭게 알게 되어 기록해봤습니다.😊)
<label>
- 주로
<input>요소와 함께 쓰여<input>요소를 설명합니다.
DOM 클래스 조작하기
Element.classList
- DOM 요소에 정의되어 있는 클래스 목록에 접근하고, 조건에 따라 클래스를 추가하거나 제거할 수 있습니다. 또는 토글(toggle)로 간편하게 구현할 수 있습니다.
Element.classList.add('클래스명'): 요소에 클래스를 추가합니다.Element.classList.remove('클래스명'): 요소에서 클래스를 제거합니다.Element.classList.toggle('클래스명')
클래스가 있으면remove하고 false를 리턴
클래스가 없으면 add하고 true 리턴
🙋♀️ 언제 쓰나요?
👉 특정 조건을 만족할 때/만족하지 않을 때 요소를 숨기거나 보여줄 수 있습니다. 예를 들어 아이디 입력 양식의 유효성을 검사할 때, 아이디가 5글자 미만이라면 '아이디는 5글자 이상입니다'는 텍스트를 보여주는 요소에display: none이 적용되어 있는hide클래스를 remove하고, 5글자 이상이라면 hide 클래스를 add하여 숨길 수 있습니다. toggle을 사용해 구현할 수도 있습니다.
- DOM 조작에서 중요한 것은 이벤트와 이벤트 핸들러를 잘 작성하는 것이라고 생각합니다. 그래서 기억을 되살릴 겸 이벤트와 이벤트 핸들러에 대한 자료를 읽으면서 복습했습니다.
이벤트와 이벤트 핸들러
-
이벤트란 어떤 사건이 발생하는 것으로, 특히 웹에서는 사용자와 웹브라우저와 상호 작용하는 것을 의미합니다. 마우스로 버튼을 클릭하는 것이 대표적인 이벤트입니다. -
이벤트가 발생하면 웹브라우저는 사용자의 상호작용에 맞추어 원하는 페이지를 보여주거나 데이터를 보여줍니다. 즉 이벤트가 발생하면 이벤트에 반응하여 실행할 동작을 함수로 작성하게 됩니다.
-
다시 말해, 어떤 요소에 대해 이벤트가 발생했을 때 이에 대한 반응으로 실행할 동작을 수행하는 함수를
이벤트 핸들러라고 합니다.
이벤트 핸들러 등록
-
이벤트 핸들러를 즉 호출하는 주체는
브라우저입니다. -
따라서 이벤트 핸들러는
브라우저에 호출을 위임한 함수라고 할 수 있고, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을이벤트 핸들러 등록이라고 합니다. (출처: <모던 자바스크립트 Deep Dive> - 758p)
🙋♀️ 위임이 뭔가요?
👉 영어로는delegation이라고 하는데, 사전에 검색해 보면 '어떤 일을 책임 지워 맡김 또는 그 책임'이라고 나옵니다. 즉 다른 이에게 특정 일이나 책임을 맡기는 것입니다. 따라서 '브라우저에게 이벤트 핸들러의 호출을 위임한다'는 말은 '브라우저에게 함수 호출을 맡긴다'라고 표현할 수 있습니다.
🙋♀️ 왜 함수 호출을 위임하는건가요?
👉 함수를'언제'호출해야 되는지를 브라우저가 알 수 있기 때문입니다. 일반적으로 개발자가 짜놓은 코드는 순차적으로 실행되는데, 이벤트 핸들러 함수는 특정 이벤트가 발생한 다음에 실행되어야 합니다. 브라우저는 사용자의 동작을 감지하여 이벤트를 발생시키므로, 이벤트가 발생하는지를 감지하고 있는 브라우저가 대신 함수를 호출할 수 있도록 하는 것입니다.
이벤트 핸들러 등록 방법 3가지
(1) 프로퍼티 방식
- DOM 노드 객체들이 이벤트를 처리하는 프로퍼티에 이벤트 핸들러 함수를 할당하는 방법입니다.
...
<body>
<button>클릭</button>
<script>
//이벤트 핸들러를 연결할 요소를 변수에 저장
const btn = document.querySelector('button');
//이벤트 핸들러 프로퍼티에 이벤트 핸들러 함수를 등록
button.onclick = function() {
alert('클릭되었습니다');
};
</script>
</body>(2) 어트리뷰트 방식
-
HTML 요소들이 가지는 어트리뷰트 즉 속성 값으로 할당하는 방법입니다.
-
특이한 점은 앞에서 본 프로퍼티 방식과는 다르게, 속성 값으로 전달되는 문자열 안에 함수를 호출문으로 작성된다는 것입니다. 이는 속성에 전달되는 값은 암묵적으로 생성되는 이벤트의 몸체이고, 이는 argument를 전달하기 위해서라고 합니다.(argumentsms 전달인자, 인수 등 한국어로 번역했을 때 혼재되는 경우가 많아 원어 그대로 썼습니다.)
<body>
<button onclick="handleClick()">클릭<button>
<script>
function handleClick(){
console.log('클릭되었습니다.')
};
</script>
</body>(3) addEventListner 방식
- 이벤트가 발생한 요소, 즉 EventTarget(이벤트 타깃)에 메서드를 적용하는 방식입니다.
<body>
<button>클릭<button>
<script>
const btn = document.querySelector('button');
button.addEventListner('click', function(){
console.log('클릭되었습니다.')
})
</script>
</body>📚 참고자료
