3_javascript_(DOM,이벤트,정규표현식)

17. DOM

 

HTML에 있는 태그들을 구조화(트리) 하였을 때 각각의 태그 요소들을 노드(Node)라고 한다

@ 텍스트 노드가 있는 노드 생성

<h3>안녕하세요?</h3> 생성하기
1. 요소(element)생성
var title = document.createElement("h3");
2. textNode 생성
var textNode = document.createTextNode("안녕하세요?");
3. 노드연결
title.appendChild(textNode);
4. area1에 출력
document.getElementById("area1").appendChild(title);

@ 텍스트 노드가 없는 노드 생성

1. img태그 생성
var imgTest = document.createElement("img");
2. 속성지정
imgTest.src = "경로";
imgTest.height = "100"; // 크기
imgTest.width = "200"; // 크기
3. area2에 출력
document.getElementById("area2").appendChild(imgTest);

@ 노드 제거

document.getElementById("area2").lastChild.remove();

@ 스타일 지정

var area4 = document.getElementById("area4");

area4.style.스타일 = "스타일속성";

18. 이벤트

@고전 이벤트 모델

-요소 객체가 갖고 있는 이벤트 속성에 이벤트 핸들러를 연결하는 방법

-이벤트를 제거 할때는 이벤트 속성에 null 값을 대입하면됨

@이벤트 발생 객체

-이벤트 발생 객체는 이벤트 핸들러의 매개변수에 e 또는 window.event의 형태로 이벤트 발생 정보를 전달함

-이벤트 핸들러 내부에서 e.target 또는 this를 이용하여 이벤트가 발생된 요소를 선택할 수 있음

#this는 익명함수안에서 사용

@인라인 이벤트 모델

요소 내부에 이벤트를 작성하는 방식

script 태그에 정의된 함수(이벤트 핸들러)를 호출하는 방식(제일 선호하는 방식)

@기본이벤트 제거

특정 태그에는 기본적으로 설정되어 있는  이벤트가 있는 경우가 있음

기본 이벤트가 있는 태그 ex)

- a태그 : 페이지 이동

- form태그 내부에 작성된 submit

: 입력 양식을 제출 후 페이지 갱신 또는 이동

기본이벤트 제거 방법

-이벤트에서 이벤트 핸들러 호출 시 이벤트 핸들러의 수행 결과로 false를 return받고

이벤트에서도 return false 하게되면 기본 이벤트가 제거됨

@ 이벤트 정의

이벤트 : 특정 행동

이벤트 핸들러 : 특정 행동에 따라서 수행되는 기능

이벤트 리스너 : 이벤트를 감지

@ 표준 이벤트 모델(addEventListener)

W3C에서 공식적으로 지정한 이벤트 모델

하나의 요소에 여러 개의 이벤트 핸들러 설정 가능 

IE는 9버전 부터 지원

변수명.addEventListener("이벤트명", 기능);

19. 정규표현식(Regular Expressions) 

특정한 규칙을 가진 문자열의 집합을 표현하는데
사용하는 언어로 정규표현식을 이용하면 특정 문자열에
대하여 특정 조건 검색, 추출, 치환 등
복잡한 조건문을 사용하지 않고 간단하게 처리 가능

@정규표현식 객체 생성 및 조건 메소드 종류
- 정규표현식 객체 생성 방법
1) new RegExp("정규식);
2) /정규식/   -> 정규표현식 : 양쪽 /

- 정규표현식 메소드
1) RegExp (정규표현식 객체) 메소드
-- test() : 문자열에서 정규식 객체의 값과
일치하는 값이 있으면 true 반환
-- exec() : 문자열에서 정규식 객체의 값과 일치하는
 값이 있으면 제일 처음 매칭된 문자열을 반환
* 정규식객체.정규식메소드(문자열);

2) string 메소드
-- match() : 문자열에서 정규식 객체의 값과 일치하는
모든값을 반환
-- replace() : 문자열에서 정규식 객체의 값과
일치하는 부분을 새로운 값으로 변경
-- search() : 일치하는 부분의 시작 인덱스 반환
-- split() : 정규식 객체의 값을 구분자로 하여 배열생성


@메타 문자를 이용한 문자 검색
특정 메타문자를 사용하여 문자열에 정규식 내용이
존재하는지 검색할 수 있다.

- 메타문자가 없는 경우 : 완전히 일치하는 값(문재열)매칭
- [] : [] 내의 문자중 하나라도 존재하는 값에 대해 매칭
- ^ : 시작을 의미
- $ : 끝을 의미
- + : 한번 이상 연속 반복을 의미(aaaaaaaaaaa)
- . : 개행문자을 제외한 모든 단일 문자 매칭(글자개수제한)

# 한글로만 이루어진 문자열 검사
regExp = /^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/;

# 영어 대문자/소문자/숫자로만 이루어진 문자열 검사
regExp = /^[a-zA-Z0-9]+&/;

@추가 메타 문자
\d : 숫자 == [0-9]
\w : 아무 단어(숫자 포함)
\s : 공백 문자(띄어쓰기, 줄바꿈, 탭)
\D : 숫자 아님
\W : 아무단어 아님
\S : 공백 문자 아님

@수량 문자
a+ : a가 적어도 1개 이상
a* : a가 0개 또는 여러개
a? : a가 0개 또는 1개
a{5} : a가 5개 == aaaaa
a{2,5} : a가 2~5개
a{2, } : a가 2개이상
a{ ,5} : a가 5개이하

@주민번호 
regExp = /^\d{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[01])-[1-4]\d{6}$/;