JavaScript - 5

---

 

 

 

 

 

 

1 . 정규식

 

 

 

 

 

 

• 문자열에서 특정한 패턴을 찾거나 검사하거나, 치환하기 위해 사용하는 표현식
• 문자열 처리를 간결하고 정교하게 하기 위해 사용

 

 

• /패턴/옵션

or

• new RegExp("패턴", "옵션")

 

 

 

 

 

 

 

패턴

 

 

 

• a :문자 a를 찾음
• abc(문자열 abc)
• . : 아무 문자 1개
• [abc] : a또는 b또는 c
• [a -z] :a부터 z까지(영어)
• [가-힣] : 가부터 힣까지 (한글)
• [0-9] : 0부터 9까지 (숫자)
• [^0-9] : 숫자가 아닌 문자들만(반대의 뜻)
• * : 0번 이상(여러 개), 안 들어가도 됨
• + : 1번 이상
• ? : 0 또는 1
• {n} : 정확히 n번(ex) {3} : 3자리)
• {n,} : n번 이상
• {n,m} : n~m번
• ^ : 여기서부터 문자열 시작
• $ : 문자열 끝
• \d : 숫자가 들어가야 함
• \D : 숫자가 아닌 것만 들어가야 함
• \w : 문자 또는 숫자 또는 언더스코어_만 들어갈 수 있음
• \W : 문자 또는 숫자 또는 언더스코어_ 외 문자만 들어갈 수 있음
• \s : 공백만 들어갈 수 있음
• \S : 공백 아닌 문자만 들어갈 수 있음
• g : 전체 검색
• i : 대소문자 무시
• m : 여러 줄 처리

 

 

 

 

 

정규식 메서드

 

 

 

 

• test() : 패턴 존재 여부

                   const reg = /^[0-9]+$/

                   => 1개 이상의 숫자 0~9로 시작해야 하고 끝내야 함

                   reg.test("a123") => false

                   reg.test("1234") => true

 

• match() : 일치 결과 반환

                    "abc123".match(/\d+/) =>["123"]

                     => 숫자가 1개 이상 들어가야 함

 

• replace() : 치환

                     "010-1234-5678".replace(/-/g, "") => 01012345678

                     => 하이픈 -을 전체 검색해 찾고 없앰

• search() : 위치 반환

                      "hello".search(/e/) => 1

                       => e의 위치 반환 

 

 

 

 

 

• ex)

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

2 . 회원 가입 페이지

 

 

 

 

 

 

html에서 사용

 

 

 

 

• maxlength : 글자 수 정함
• placeholder : 입력창에 기본적으로 적혀있고 입력창에 텍스트 입력 시 사라짐
• name: action을 통해 다른 서버로 보내면 해당 서버에서 name의 이름으로 알아봄(서버에서 필요한 이름)
• value : 글자 속성
• type = "submit" : 폼 데이터를 서버로 전송 (action이 지정한 곳)
• action : 어느 서버로 보낼지 
• method = "post" : 데이터를 숨겨서 전송
• input = "text" : 일반 텍스트
• input = "password" : 비밀번호 (값 입력시 화면에 값이 보이지 않음)
• input ="email" : 이메일  
•  

 

 

 

 

java에서 사용

 

 

 

 

• html에서 작성한 아이디를 document.getElementByID로 정의 해줌
• 정규식 메서드 작성
• 조건식 등을 사용해 조건 추가
• onload : 페이지의 html, css 등 모든 리소스가 로드된 후 실행

 

 

 

 

 

 

• 주민번호 유효성 검사
  • 2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5를 본인의 주민번호 마지막 자리만 빼고 각각 곱한 후 나온 값들을 모두 더함
  • 나온 전체 값을 11로 나눈 나머지 값을 11에서 뺌
  • 나머지 값이 11을 넘는다면 한 번 더 10으로 나누고 나온 나머지 값을 11에서 뺌
  • => 본인의 주민번호 마지막 숫자와 동일함
  • (11 - (전체 더한 값 % 11)) % 10

 

 

 

 

• 글자수를 만족한 input박스를 자동으로 다음으로 커서를 넘기는 방법
  • 주민등록번호1, 주민등록번호2로 나뉘어져있을 때 addEventListener을 사용함
  • keyup을 했을 때 주민등록번호1의 값의 글자수가 6이거나 6보다 많으면 자동으로 ssn2(주민등록번호2)로 포커스가 넘어감

 

 

 

 

 

 

 

 

 

 

 

완성본

 

 

=> 이후 Head에 src="자바스크립트파일명"을 적어 html 파일과 연결해줌

 

 

 

 

 

 

=> 주소 검색은 제일 많이 사용하는 카카오에서 제공하는 주소 검색을 사용했음

https://postcode.map.kakao.com/guide

Kakao 우편번호 서비스

=> 해당 사이트를 스크롤하면 사용자가 검색한 값 이용하기가 나오는데 해당 코드를 사용했음

 

 

 

 

 

 

 

 

 

---