1. 이벤트
- 사용자가 웹 브라우저를 사용하는 중에 발생시키는 키보드, 마우스 등의 입력
이벤트 처리 : 이벤트가 입력되었을 때 미리 구현된 자바스크립트 코드를 수행
이벤트 핸들러 : 이벤트 발생 시 실행하고자 하는 자바스크립트 함수나 코드
이벤트 등록 : 이벤트의 종류와 이를 처리할 이벤트 핸들러를 연결시키는 작업
- 등록 방법
1) 태그 속성에 직접 이벤트 핸들러 기술 or 이벤트 함수 호출
2) 객체의 이벤트 속성 값에 이벤트 핸들러 함수 이름 기술
2. 이벤트 종류
1) 마우스 이벤트
2) 키보드 이벤트
3) 프레임/객체 이벤트
4) 폼 이벤트
3. 폼 다루기
- JS를 이용해 폼의 값을 읽어내거나 계산하여 수정하는 것이 가능
- <input> 요소를 DOM 인터페이스로 접근하여 value 속성값을 읽거나 저장할 수 있음
4. 동적 문서
- 웹 문서가 브라우저에 처음 표시된 후에 콘텐츠나 스타일 변경
- 웹 문서의 콘텐츠나 스타일을 JS를 이용해 변경
ㄴ 태그 요소, 태그 속성, 태그 콘텐츠, 요소의 CSS 스타일 등 변경
1) 구현 방식
- 웹 문서의 콘텐츠를 변경시키는 방법
- CSS 스타일을 변경시키는 방법
2) 보이기 / 감추기 스타일 속성
- 스타일 속성 : visibility
ㄴ 속성 값 : visible 또는 hidden
- hidden으로 설정되어도 화면에 표시만 안 될 뿐, 웹 문서 내에 요소로는 존재.
3) 배경색 스타일 속성
- 스타일 속성 : background
4) 위치 스타일 속성
- 스타일 속성 : left, top
5) 문서의 콘텐츠 변경
- 폼 위젯 요소의 value 값을 변경
- 태그 요소의 콘텐츠 변경
- 요소의 콘텐츠에 접근하는 속성 : innerHTML, innerText
ⓐ innerHTML : 속성에 저장된 값을 HTML 태그로 해석
ⓑ innerText : 속성에 저장된 값을 단순히 문자열로 해석
5. 폼 접근하기
document.getElementById() 메소드 외의 다른 방법으로 폼에 접근하는 방법
1) document.폼이름.위젯ID.value;
2) document.forms[index].위젯ID.value;
3) document.forms[index].elements[index].value;
[예시 코드]
[실행 화면]
6. 폼 제어하기
JS로 폼 위젯을 제어할 수 있는 방법
1) select() 메소드
2) submit() 메소드
3) reset() 메소드
4) checked 속성 설정
댓글