3. DOM과 이벤트 처리, 입력검증
3.1 문서 객체 모델(DOM, Document Object Model)
3.1.1 document 객체 : 웹 문서의 최상위 객체
- id로 요소 찾기 : getElementById("태그의 id");
- 태그.innerHTML : 태그 내부의 사용
- 태그.value : 태그의 입력 값
- 태그의 속성 변경 : 태그.src = "값"
document.getElementById("img2").src = "poodle.png";
- 태그의 스타일 변경 : 태그.style.속성이름 = "속성 값";
document.getElementById("img2").style.color = "blue";
3.1.2 window 객체
- 팝업창 열기 : window.open(url, 윈도우의 name, 옵션);
- 타이머 설정 : setTimeout(), setInterval()
setTimeout(코드, 밀리세컨드) 한번만 호출됨
setInterval(코드, 밀리세컨드) 반복적으로 호출됨
- 윈도우 이동 :
절대좌표로 이동 - moveTo(x축 길이, y축 길이)
상대좌표로 이동 - moveBy(x축 길이, y축 길이)
- 윈도우의 크기 변경 : resizeTo(), resizeBy()
- 포커스 이동 : focus()
- 스크롤 위치 이동 : scrollTo(), scrollBy()
3.1.3 location 객체
- 페이지 이동 :
location.href = "이동할 주소";
location.replace("이동할 주소");
3.1.4 이벤트 처리
- onclick : 클릭 이벤트
- onload : 웹 페이지에 진입했을 때
- onchange : 값이 바뀔 때
- onmouseover : 마우스 커서가 올라갈 때
- onmouseout : 마우스 커서가 나갈 때
- onfocus : 포커스를 얻을 때
- onblur : 포커스를 잃을 때
- onkeydown : 키 입력을 할 때
3.1.5 정규 표현식(Regular Expression)
1. 확장문자 (: backslash)
- s : 공백 문자(스페이스, 탭, 폼 피드, 라인 피드)
- d : 숫자
- D : 숫자가 아닌 문자 [^0-9] 와 동일
- w : 알파벳, 숫자, 밑줄 기호(_) [A-Za-z0-9]
- W : w의 반대 문자 [^A-Za-z0-9]
- 특수문자 : 특수문자 자체를 의미 ex. + (+ 기호 자체)
2. 특수문자
- * : 0회 이상 반복
- + : 1회 이상 반복
- ? : 0 또는 1개의 문자 매칭
- . : 정확히 1개 문자 매칭
3. 플래그
- g : 전역 매칭(매칭되는 모든 값을 찾음)
- i : 대 소문자 무시
- m : 여러 줄 매칭
4. 기타
- () : 괄호로 묶인 패턴은 매칭된 다음, 그 부분을 기억한다.
- | : ~또는~
- {} : 반복 횟수
# 간단한 정규 표현식
var re = /a/ var re = /a/i var re = /apple/ var re = /[a-z]/ var re = /[a-zA-Z0-9]/ var re = /[a-z]|[0-9]/ var re = /a|b|c/ var re = /[^a-z]/ var re = /[a-z]$/ |
a가 있는 문자열 a가 있는 문자열, 대소문자 구분 안함 apple이 있는 문자열 a~z 사이의 모든 문자 a~z, A~Z 0~9 사이의 모든 문자 a~z, 혹은 0~9 사이의 문자 a 혹은 b 혹은 c인 문자 a~z까지의 문자가 아닌 문자("^" 부정) 문자가 a~z로 끝남 |
1) element.html
2) change.html
```note.
블록요소 : 한 라인에 하나의 요소만 배치 가능
ex. <div>, <p>, <h1>~<h6>, <hr>
인라인요소 : 한 라인에 여러 개의 요소 배치 가능
ex. <span>, <img>, <a>
3) append.html
4) popup1.html 5) notice.html
6) popup2.html 7) gugu.jsp
8) timer.html 3.3910
9) move.html
10) location.html
11) navigator.html