자바스크립트 DOM과 이벤트 처리, 입력 검증

* 문서 객체 모델(DOM : Document Object Model)

웹문서의 최상위 객체 : document

* id로 요소 찾기 : getElementById("태그의 id")

* 태그.innerHTML() : 태그 내부의 내용

* 태그.value : 태그의 입력값

* 태그의 속성 변경 : 태그.src = "값" 

document.getElementById("img2").src = "poodle.png";

* 태그의 스타일 변경 : 태그.style.속성이름 = "속성값";

document.getElementById("img2").style.color = "blue";

* window 객체

- 팝업창 열기 : window.open( url, 윈도우의 name, 옵션);

- 타이머 설정 : setTimeout(), setInterval()

setTimeout( 코드, 밀리세컨드 ) 한번만 호출됨

setInterval( 코드, 밀리세컨드 ) 반복적으로 호출됨

- 윈도우 이동 :

절대좌표로 이동 - moveTo(x축길이, y축길이),

상대좌표로 이동 - moveBy(x축길이, y축길이)

- 윈도우의 크기 변경 : resizeTo(), resizeBy()

- 포커스 이동 : focus()

- 스크롤 위치 이동 : scrollTo(), scrollBy()

* location 객체

- 페이지 이동 :

location.href = "이동할 주소";   

location.replace("이동할 주소");

* 이벤트 처리

- onclick : 클릭이벤트

- onload : 웹페이지에 진입했을 때

- onunload : 웹페이지를 떠났을 때

- onchange : 값이 바뀔 때

- onmouseover : 마우스 커서가 올라갈 때

- onmouseout : 마우스 커서가 나갈 때

- onfoucs : 포커스를 얻을 때

- onblur : 포커스를 잃을 때

- onkeydown : 키입력을 할 때

* 정규표현식(Regular Expression)

1. 확장문자 (: backslash)
    - s : 공백 문자(스페이스, 탭, 폼 피드, 라인 피드)
    - d : 숫자
    - D : 숫자가 아닌 문자 [^0-9] 와 동일
 
    - w : 알파벳, 숫자, 밑줄 기호(_) [A-Za-z0-9]
    - W : w의 반대 문자 [^A-Za-z0-9]
 
    - 특수문자 : 특수문자 자체를 의미 예) + (+ 기호 자체)
 
2. 특수문자
    - * : 0회 이상 반복
    - + : 1회 이상 반복
    - ? : 0 또는 1개의 문자 매칭
    - . : 정확히 1개 문자 매칭
 
3. 플래그
    - g : 전역매칭(매칭되는 모든 값을 찾음)
    - i : 대소문자 무시
    - m : 여러 줄 매칭
 
4. 기타
    - () : 괄호로 묶인 패턴은 매칭된 다음, 그 부분을 기억한다.
    - | : ~또는~
    - {} : 반복 횟수

##############  간단한 정규 표현식
var re = /a/                         a 가 있는 문자열
var re = /a/i                        a  가 있는 문자열, 대소문자 구분 안함
var re = /apple/                    apple이 있는 문자열
var re = /[a-z]/                    a~z 사이의 모든 문자
var re = /[a-zA-Z0-9]/    a~z, A~Z 0~9 사이의 모든 문자
var re = /[a-z]|[0-9]/          a~z 혹은 0~9사이의 문자
var re = /a|b|c/                       a 혹은 b 혹은 c인 문자
var re = /[^a-z]/                  a~z까지의 문자가 아닌 문자("^" 부정)
var re = /[a-z]$/                  문자가 a~z로 끝남