[JavaScript] DOM과 이벤트 처리, 입력검증

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

댓글(5)

Designed by JB FACTORY