[JavaScript] 문서 객체 모델(DOM, Document Object Model)과 이벤트 처리, 입력 검증

✏️ document  객체 : 웹문서의 최상위 객체

DOM 트리 구조

• 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 = "이동할 주소";
//.href라는 프로퍼티 사용, 뒤로 가기 할시 이전 페이지 주소 기록 O

location.replace("이동할 주소");
//replace()라는 함수를 사용, 뒤로 가기 할시 이전 페이지 주소 기록 X

---

✏️이벤트 처리

• onclick : 클릭이벤트
• onload : 웹페이지에 진입했을 때
• onchange : 값이 바뀔 때 ex)select태그에서 값이 바뀔때
• onmouseover : 마우스 커서가 올라갈 때 
• onmouseout : 마우스 커서가 나갈 때
• onfocus : 포커스를 얻을 때 
• onblur : 포커스를 잃을 때
• onkeydown : 키입력을 할 때

---

✏️정규표현식(Regular Expression)

정규식은 test, match, search, replace, exec, RegExp,split, String등의 내장된 메소드와 함께 쓰이는데, 특히 문자열 내부의 패턴과 대응되는 부분이 있는지 확인하려한다면, test나 search메소드를 사용한다.

•  test(검사할 문자열)는 대응되는 문자열이 있는지 검사하는 메소드로 true/false를 반환한다.
•  search(검사할 문자열)는 대응되는 문자열이 있는지 검사하는 String 메소드인데, 대응되는 문자열을 찾지 못하면 -1을 반환한다.
• match(정규표현식)는 대응되는 문자열을 찾는 메소드로, 정보를 가지고 있는 배열을 반환하며,대응되는 문자열을 찾지 못했다면 null을 반환한다.