23. 자바스크립트 기본 정리4

1. 정규 표현식

문자열에서 특정 문자 조합을 찾기 위한 패턴

    <input type='text' type='userid' type='userid'
    - 4자이상 20자이하로 체크
    - 특수문자 입력 불가
    - 한글 입력 불가

 

정규 표현식 표기

•     /정규 표현식 패턴/

아이디 패턴 만들기

• 영문 대문자 또는 소문자만 입력
• 길이는 4자이상 20자이하로 입력 가능
• /^[A-Za-z]{4, 20}$/

이름 패턴만들기

• 한글만 사용
•     /^[가-힣]+$/

휴대폰번호 패턴 만들기

• 정수 3자리 - 정수 3자리 또는 4자리 - 정수 4자리
• 예) 010-1111-1111 또는 010-111-1111
• /^\d{3}-\d{3, 4}-\d{4}$/

이메일 패턴 만들기

• 영문 대문자 또는 소문자 입력
• 이메일 패턴에 의한 @, .이 포함
• 예) aaa@aaa.com, der.ryu@aaa.com
• /^[A-za-z0-9\-\.\_]+@[A-za-z0-9\-]+\.[A-za-z]+$/

검증하기

• test(): 정규표현식의 대입한 문자열이 패턴과 적합하면 true, 아니면 false를 리턴
• 아이디: <input type='text' name='userid' id='userid'>

    <script>
    const userid - document.getElementById('userid');

    const expIdText = /^[A-Za-z]{4, 20}$/;

    expIdText.test(userid.value); // 적합하면 true, 아니면 false를 리턴

 

 

2. 이벤트(Event)

• 웹브라우저가 알려주는 HTML 요소에 대한 사건이 발생
• 웹페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음
• 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델

이벤트 타겟(Event Target)

• 이벤트가 일어날 객체를 의미

이벤트 타입(Event Type)

• 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 부름
• 키보드, 마우스, HTML, DOM, window 객체 .. 등을 철리하는 이벤트를 제공

이벤트 리스너(Event Listener)

• 이벤트가 발생했을 때 그 처리를 하는 함수
• 이벤트 핸들러라고도 부름
• 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹브라우저는 그 요소에 등록된 이벤트리스너를 실행

    이벤트 등록
    객체.addEventListener(이벤트타입, 이벤트리스너);

    이벤트 제거
    객체.removeEventListener(이벤트타입, 이벤트리스너);