⏰ 2024.12.04 (D+40)
1. MouseEvent 이벤트 예제
📢 개요 ]
마우스 이벤트(mousedown, mouseup, mouseover, mouseout)를 활용하여 HTML 요소들의 상태나 동작을 변경하는 예제📂 구성 ]
✅ 첫 번째 필드셋 (mousedown/mouseup 이벤트):
- mousedown: 마우스를 누를 때 색상과 크기를 변경
- mouseup: 마우스를 떼면 원래 크기와 색으로 돌아간다
✅ 두 번째 필드셋 (mousedown 이벤트로 위치 이동):
- mousedown: 마우스를 누른 상태에서 요소가 일정 간격으로 오른쪽으로 이동
- 5번 이동 후 멈춘다
✅ 세 번째 필드셋 (mouseover/mouseout 이벤트):
- mouseover: 이미지를 다른 이미지로 바꾼다
- mouseout: 이미지를 다시 원래 이미지로 되돌린다
- mousedown: 이미지를 클릭하면 크기를 2배로 확대하고, mouseup 시 원래 크기로 되돌린다
2. InnerHTML, InnerText, TextContent 속성 예제
📢 개요 ]
HTML 요소의 내용을 읽거나 수정하는 방법에 대한 예제📂 구성 ]
✅ 컨텐츠 읽기:
- innerHTML, innerText, textContent 속성을 사용하여 요소의 내용을 읽어온다
- 차이점:
- innerHTML: 태그를 포함한 HTML 콘텐츠를 읽음.
- innerText: 화면에 표시된 텍스트만 읽음 (공백을 제외한 텍스트).
- textContent: 텍스트를 그대로 읽음, 공백 포함.✅ 컨텐츠 설정:
- innerHTML, innerText, textContent를 사용하여 요소의 내용을 설정
- innerHTML은 HTML 태그를 포함하여 설정할 수 있지만, textContent와 innerText는 텍스트만 처리
3. Form 객체와 유효성 검사 예제
📢 개요 ]
폼 객체의 다양한 접근 방법과, 폼 입력에 대한 유효성 검사 및 제출 기능을 다루는 예제📂 구성 ]
✅ 폼 객체 접근:
- 방법 1: document.forms[0]을 사용하여 폼 객체에 접근
- 방법 2: document.querySelector()로 특정 폼에 접근
- 방법 3: this.form 키워드로 폼 객체에 접근
- 방법 4: 폼에 name 속성을 사용하여 폼 객체에 직접 접근
✅ 유효성 검사:
- 아이디, 비밀번호, 성별, 관심사항 등 입력값을 검증
- 각 입력값이 유효하지 않으면 alert로 경고를 띄우고, 폼 제출을 방지
✅ 폼 제출:
- 기본 제출 버튼 또는 onclick 이벤트를 사용하여 폼을 제출
- submit() 메서드를 사용해 직접 폼을 제출할 수 있으며, 이 경우 submit 이벤트는 발생하지 않는다
✅ 폼 제출 예시:
- 버튼: type="submit"과 type="button"을 사용하여 제출
- 이미지 버튼: type="image"를 사용하여 이미지를 클릭해 제출 가능
