국비 43

냐아암·2023년 6월 21일

JavaScript

국비

목록 보기

56/114

정규표현식

특정힌 규칙을 가진 문자열 집합을 표현하는데 사용하는 언어

📍 정규 표현식 참고 사이트

📍 정규 표현식 객체 생성 방법

1) const regExp = new RegExp("정규표현식");
2) const regExp = /정규표현식/;
-> 양쪽 '/' 기호 정규 표현식의 리터럴 표기법

📍 문자열 패턴 확인 메소드(함수)

1) regExp.test(문자열)
-> 문자열에 정규표현식과 일치하는 패턴이 있을 경우 true. 없으면 false

2) regExp.exec(문자열)
-> 문자열에 정규표현식과 일치하는 패턴이 있을 경우
처음에 매칭되는 문자열 반환, 없으면 null 반환

📍 정규 표현식 메타 문자

a (일반 문자열) : 문자열 내에 a라는 문자열이 존재하는지 검색
[abcd] : 문자열 내에 a,b,c,d 중에 하나라도 일치하는 문자가 있는지 검색
^(캐럿) : 문자열의 시작을 의미
$(달러) : 문자열의 끝을 의미
\w(word, 단어) : 아무 글자(단, 띄어쓰기, 특수문자, 한글X)
\d (digit, 숫자) : 아무 숫자(0~9 중 하나)
\s (space, 공간) : 아무 공백 문자(띄어쓰기, 엔터, 탭 등)
[0-9] : 0부터 9까지 모든 숫자
[ㄱ-힣] : ㄱ부터 힣까지 모든 한글
[a-z] : 모든 영어 소문자
[A-Z] : 모든 영어 대문자
a{5} : a 문자가 5개 존재 == aaaaa
a{2,5} : a가 2개 이상 5개 이하 == aa, aaa, aaaa, aaaaa
a{2,} : a가 2개 이상
- : 0개 이상 == 0번 이상 반복 == 있어도 되고, 없어도 되고
- : 1개 이상 == 1번 이상 반복
? : 0개 또는 1개
. : 1칸 (개행문자를 제외한 문자 하나)

문자열, 숫자, 형변환, 연산자

📍 문자열(String) 내장 객체
자바스크립트에는 문자열을 나타내는 객체(String)이 존재하며 문자열과 관련된 기본적인 함수를 제공해준다.

문자열.indexOf("str") : 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환 (없으면 -1 반환)
문자열.substring(시작인덱스, 종료 인덱스(미포함)) : 문자열 일부 잘라내기 (시작 인덱스 이상, 종료 인덱스 미만)
문자열.split("구분자") : 문자열을 구분자로 잘라서 배열로 반환

📍 숫자(Math 내장 객체)
숫자(number) 타입 리터럴 표기법 : 12(정수), 3.14(실수), Infinity(무한), NaN(Not a Number)

parseInt(문자열) : 정수로만 변환 가능
parseFloat(문자열) : "정수" -> 정수 , "실수" -> 실수
Number(문자열) : "정수" -> 정수, "실수" -> 실수

📍 비교 연산자

동등 비교 연산자 ( ==, != ): 값이 같으면 true (자료형과 관계가 없음)
동일 비교 연산자 ( ===, !==): 값과 자료형이 모두 같아야 true

🔑 CF.

isNan(값): 값이 NaN이면 true, 아니면 false 반환
소수점 관련 함수 : round(), cell(), floor(), trunc()
숫자.toFixed(자릿수) : 지정된 자릿수까지 반올림해서 표현

배열

변수를 묶음으로 다루는 것(변수가 연속적으로 나열됨)
JS 변수 : 값이 저장되기 전까지 자료형 지정되지 않음

JS 배열의 특징
1. 자료형 제한이 없다.
2. 길이 제한이 없다.

📍 배열 관련 함수

push(): 배열의 마지막 요소로 추가
pop(): 배열의 마지막 요소 꺼내옴
배열.indexOf("값") : 일치하는 값을 가진 요소의 index를 반환(없으면 -1 반환)
배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순 정렬(문자열 기준)
단, [정렬기준 함수]가 작성되면 정렬결과가 달라진다.
배열.toString() : 배열 요소를 하나의 문자열로 출력-> 요소 사이에 "," 추가
배열.join("구분자") : 배열 요소를 하나의 문자열로 출력 -> 요소 사이에 "구분자" 추가

📍 배열 선언 방법

const arr1 = new Array(n); : n이 빈자리면 비어있는 배열
const arr = [];

📍 for문으로 반복 접근

일반 for문
향상된 for문
for( 변수 of 배열 )

🔑 CF.

숫자 오름차순 정렬
그냥 sort()를 쓰게 되면, 숫자를 문자열로 인식하기 때문에 제대로 정렬되지 않는다.
--> function(a,b) { return a-b } 사용

07_정규표현식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07_정규표현식</title>

    <style>
        .area{
            width: 500px;
            min-height: 300px; /* 최소 300px, 내용이 높이를 초과하면 자동으로 늘어남 */
            border: 1px solid black;
        }

        .confirm{ color: green;}
        .error{ color: red;}
    </style>
</head>
<body>

    <h1>정규 표현식(Regular Expression)</h1>

    <pre>
        특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식 언어

        정규 표현식을 이용하면 
        입력된 문자열에 대한 특정 조건 검색, 일치 여부 판단, 치환에 대한
        조건문을 간단히 처리할 수 있다.
    </pre>

    <h3>정규 표현식 참고 사이트</h3>
    <ul>
      <li><a href="https://regexper.com/" target="_blank">작성한 정규표현식을 그림으로 나타내주는 사이트</a></li>
      <li><a href="https://regexr.com/" target="_blank">정규표현식 테스트 사이트</a></li>
      <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D"
            target="_blank">
            MDN - 정규표현식 설명
         </a></li>
   </ul>

   <hr>

   <h1>정규 표현식 객체 생성 및 확인하기</h1>

   <pre>
        1. 정규 표현식 객체 생성 방법

            1) const regExp = new RegExp("정규표현식");
            2) const regExp = /정규표현식/;
                -> 양쪽 '/' 기호 정규 표현식의 리터럴 표기법

        2. 문자열 패턴 확인 메소드(함수)

            1) regExp.test(문자열)
                -> 문자열에 정규표현식과 일치하는 패턴이 있을 경우 true. 없으면 false
            
            2) regExp.exec(문자열)
                -> 문자열에 정규표현식과 일치하는 패턴이 있을 경우
                   처음에 매칭되는 문자열 반환
                   없으면 null 반환

   </pre>

   <button id="check1">확인하기</button>

   <hr>

   <h1>정규 표현식의 메타 문자</h1>
   <pre>
        문자열의 패턴을 나타내는 문자열
        문자마다 지정된 특별한 뜻이 담겨있다.

        a (일반 문자열) : 문자열 내에  a라는 문자열이 존재하는지 검색
        [abcd] : 문자열 내에 a,b,c,d 중에 하나라도 일치하는 문자가 있는지 검색
        ^(캐럿) : 문자열의 시작을 의미
        $(달러) : 문자열의 끝을 의미

        \w(word,  단어) : 아무 글자(단, 띄어쓰기, 특수문자, 한글X)
        \d (digit, 숫자) : 아무 숫자(0~9 중 하나)
        \s (space, 공간) : 아무 공백 문자(띄어쓰기, 엔터, 탭 등)

        [0-9] : 0부터 9까지 모든 숫자
        [ㄱ-힣] : ㄱ부터 힣까지 모든 한글
        [a-z] : 모든 영어 소문자
        [A-Z] : 모든 영어 대문자

        * 특수문자의 경우 각각을 입력하는 방법밖엔 없음
          단, 메타문자와 중복되는 특수문자는 
          앞에 \(백슬래시)를 추가하여 탈출 문자(Escape)로 만들어 사용

        * 수량 관련 메타 문자
          a{5} : a 문자가 5개 존재 == aaaaa
          a{2,5} : a가 2개 이상 5개 이하 == aa, aaa, aaaa, aaaaa
          a{2,} : a가 2개 이상
          
          * : 0개 이상 == 0번 이상 반복 == 있어도 되고, 없어도 되고

          + : 1개 이상 == 1번 이상 반복

          ? : 0개 또는 1개

          . : 1칸 (개행문자를 제외한 문자 하나)
          
   </pre>

   <button id="btn1">확인하기</button>

   <div id="div1" class="area"></div>

   <hr>

   <h3>이름 유효성 검사</h3>

   <h5>한글 2~5글자</h5>
   이름: <input type="text" id="inputName"> <br>
   <span id="inputNameResult"></span>

   <hr>

   <h3>주민등록번호 유효성 검사</h3>
   주민등록번호 : <input type="text" id="inputPno"> <br>

   <span id="inputPnoResult">주민등록번호를 작성해주세요.</span>
    

   <script src="JS/07_정규표현식.js"></script>
</body>
</html>

07_정규표현식.js

// 정규 표현식 객체 생성 + 확인하기

document.getElementById("check1").addEventListener("click", function(){

    // 정규 표현식 객체 생성
    const regExp1 = new RegExp("script");
                    // script와 일치하는 문자열이 있는지 검사하는 정규 표현식
    
    const regExp2 = /java/;
                    // 문자열 'java'와 일치하는 문자열이 있는지 검사하는 정규 표현식

    // 확인하기
    const str1 = "저희는 지금 javascript를 공부하고 있습니다.";

    const str2 = "servlet/jsp(java server page)도 조만간 합니다.";

    const str3 = "java, java, java";

    console.log("regExp1.test(str1): " + regExp1.test(str1)); // true (str1 안에 script라는 문자가 있음)
    console.log(regExp1.exec(str1));


    console.log("regExp2.test(str2): " + regExp2.test(str2));
    console.log(regExp2.exec(str2));


    // 일치하는 게 없는 경우
    console.log("regExp1.test(str2): " + regExp1.test(str2));
    console.log(regExp1.exec(str2));

    // 일치하는 게 여러 개 있을 경우
    console.log("regExp2.test(str3): " + regExp2.test(str3));
    console.log(regExp2.exec(str3));

})

document.getElementById("btn1").addEventListener("click", function(){
    const div1 = document.getElementById("div1");

    div1.innerHTML=""; //문자 삭제 (div 초기화)

    // a(일반문자열) : 문자열 내에 a라는 문자열이 존재하는지 검색
    const regExp1 = /a/;
    div1.innerHTML += "/a/ , apple : " + regExp1.test("apple") + "<hr>"; // true
    div1.innerHTML += "/a/ , price : " + regExp1.test("price") + "<hr>"; // false
    
    // [abcd] : 문자열 내에 a,b,c,d 중 하나라도 일치하는 문자가 있는지 검색
    const regExp2 = /[abcd]/;

    div1.innerHTML += "/[abcd]/ , price : " + regExp2.test("apple") + "<hr>"; // true
    div1.innerHTML += "/[abcd]/ , sub : " + regExp2.test("sub") + "<hr>"; // true
    div1.innerHTML += "/[abcd]/ , qwert : " + regExp2.test("qwert") + "<hr>"; // false
    
    // ^(캐럿) : 문자열의 시작 의미
    const regExp3 = /^group/; // 문자열의 시작이 "group"인지 확인

    div1.innerHTML += "/^group/ , group100 : " + regExp3.test("group100") + "<hr>"; // true
    div1.innerHTML += "/^group/ , 100group : " + regExp3.test("100group") + "<hr>"; // false

    // $(달러) : 문자열의 끝을 의미
    const regExp4 = /group$/; // 문자열의 끝이 group 인자 확인

    div1.innerHTML += "/group$/, group100 : " + regExp4.test("group100") + "<hr>"; // false
    div1.innerHTML += "/group$/, 100group : " + regExp4.test("100group") + "<hr>"; // true

})

// 이름 유효성 검사
document.getElementById("inputName").addEventListener("keyup", function(){
    
    // 결과 출력용 span
    const span = document.getElementById('inputNameResult');

    // 한글 2~5글자 정규 표현식(정규식)
    // [가-힣] : 한글(단일 자음, 모음 제외)
    const regExp = /^[가-힣]{2,5}$/;

    // 유효성 검사
    if(regExp.test(this.value)){
        // #inputName에 작성된 값이 유효한 경우
        span.innerHTML="유효한 이름 형식입니다.";
        span.style.color="green";
        span.style.fontWeight="bold";
    } else {
        span.innerHTML="이름 형식이 유효하지 않습니다.";
        span.style.color="red";
        span.style.fontWeight="bold";

        
        
    }
    // 빈칸인지 검사
    // 빈칸이라면 span에 작성된 내용 초기화(삭제)
    // (-> 이름을 쓰고 지웠을 때처럼 보여야 함)

    /* if(this.value == ""){
        span.innerHTML="";
    } */

    if(this.value.length == 0){
        span.innerHTML="";
    }

    // 주민등록번호 유효성 검사

    // 주민등록번호 정규식 검사
    // 생년월일(6)-고유번호(7)
})

/* 이메일 유효성 검사, 비번 유휴성 검사 해보기 */

document.getElementById("inputPno").addEventListener("keyup", function(){
    const span = document.getElementById("inputPnoResult");

    /* const regExp = /^\d{6}\-[0-9]{7}$/; */
                    // 연도(2) 월(2) 일(2)
    
    // 업그레이드
    const regExp = /^\d{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])\-[1-4]\d{6}$/;
    /* 띄어쓰기 하지 마세요 */

    // () : 포획 괄호, 괄호 내부에서 대응되는 부분을 찾아 기억함
    // | : 또는

    // 월
    // 01 ~ 09 -> /0[1-9]/
    // 10 ~ 12 -> /1[0-2]/

    // (0[1-9]|1[0-2]) : 괄호 내 | 기호를 기준으로 구분되며
    // 0이 먼저 입력된 경우 다음 자리는 1~9
    // 1이 먼저 입력된 경우 다음 자리는 0~2

    // 일
    // 01~09 -> 0[1-9]
    // 10~19 -> 1[0-9]
    // 20~29 -> 2[0-9]
    // 30~31 -> 3[0-1]

    // (0[1-9]|1[0-9]|2[0-9]|3[0-1])

    // 요소.classList : 요소가 가지고 있는 클래스를 배열로 반환
    // 요소.classList.remove("클래스명") : 요소의 특정 클래스 제거
    // 요소.classList.add("클래스명") : 요소의 특정 클래스 추가

    // 요소.classList.toggle("클래스명") : 클래스가 있으면 제거, 없으면 추가


    // 유효성 검사
    if(regExp.test(this.value)){
        span.innerText="유효한 주민등록번호 형식입니다.";
        span.classList.remove("error"); // error 클래스 제거
        span.classList.add("confirm"); // confirm 클래스 추가

    } else {
        span.innerText="유효하지 않은 형식입니다.";
        span.classList.remove("confirm"); // confirm 클래스 제거
        span.classList.toggle("error"); // error 클래스 추가
    }
})

08_문자열, 숫자, 형변환, 연산자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08_문자열, 숫자, 형변환, 연산자</title>
</head>
<body>

    <h2>문자열(String 내장 객체)</h2>

    <pre>
        자바스크립트에는 문자열을 나타내는 객체(String)이 존재하며
        문자열과 관련된 기본적인 함수를 제공해준다.
    </pre>

    <button id="btn1">문자열 관련 함수(콘솔 확인)</button>

    <hr>

    <h2>숫자(Math 내장 객체)</h2>
    <pre>
        숫자(number) 타입 리터럴 표기법 : 
        12(정수), 3.14(실수), Infinity(무한), NaN(Not a Number)

        Math : 숫자 관련 함수를 제공하는 JS 내장 객체
        ex) Math.random() : 난수
    </pre>

    <button id="btn2">숫자 관련 함수(콘솔 확인)</button>

    <hr>

    <h2>문자열 -> 숫자 형변환</h2>
    <pre>
        paseInt(문자열) : 정수로만 변환 가능

        parseFloat(문자열) : "정수" -> 정수 , "실수" -> 실수

        Number(문자열) : "정수" -> 정수, "실수" -> 실수
    </pre>
    
    <button id="btn3">형변환 확인(콘솔 확인)</button>

    <hr>

    <h2>동등/동일 비교 연산자</h2>

    <pre>
        동등 비교 연산자 ( ==, != )
        -> 값이 같으면 true (자료형과 관계가 없음)

        ex) "1" == 1 == true(1)

        동일 비교 연산자 ( ===, !==)
        -> 값과 자료형이 모두 같아야 true
    </pre>

    <script src="JS/08_문자열, 숫자, 형변환, 연산자.js"></script>
</body>
</html>

08_문자열, 숫자, 형변환, 연산자

// 문자열 관련 함수
document.getElementById("btn1").addEventListener("click", function(){

    // 문자열.indexOf("str") : 
    // 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환
    // 없으면 -1 반환

    const str1 = "Hello world";

    console.log(str1.indexOf("e")); // 1
    console.log(str1.indexOf("l")); // 2 (가장 먼저 검색된 인덱스 반환)
    console.log(str1.indexOf("가")); // -1

    // 문자열.substring(시작인덱스, 종료 인덱스(미포함)) : 문자열 일부 잘라내기
    // 시작 인덱스 이상, 종료 인덱스 미만
    const str2 = "abcdefg";

    console.log(str2.substring(0,3)); // abc

    console.log(str2.substring(2,6)); // cdef

    // 문자열.split("구분자") : 문자열을 구분자로 잘라서 배열로 반환

    const str3 = "햄버거, 비빔밥, 김밥, 라면, 파스타, 스테이크";

    const arr = str3.split(", ");

    // console.log(arr);

    for(let i =0; i<arr.length; i++){
        console.log(arr[i]);
    }

})

// 숫자 관련 함수
document.getElementById("btn2").addEventListener("click", function(){

    // Infinity 리터럴 확인
    console.log(5/0);

    if(5/0 == Infinity){
        console.log("무한입니다.");
    }

    // NaN 리터럴 확인
    console.log("aaa"*100);

    // "aaa"*100 == Nan (X)

    // isNan(값): 값이 NaN이면 true, 아니면 false 반환

    if(isNaN("aaa"*100)) {
        console.log("숫자가 아닙니다.");
    }

    // Math.random(): 0이상 1미만의 난수 발생 (0<=random<1)
    // this.innerText=Math.random();

    // 소수점 관련 함수
    // round(), cell(), floor(), trunc()
    // 반올림    올림     내림     절삭(버림)

    // -> 소수점 자리를 지정할 수 없다.

    console.log(Math.round(10.5)); //11
    console.log(Math.ceil(10.5)); //11
    console.log(Math.floor(-10.5)); //-11
    console.log(Math.trunc(-10.5)); //-10

    // 버튼 배경색 랜덤으로 바꾸기
    const r = Math.floor(Math.random()*256); // 0~255
    const g = Math.floor(Math.random()*256); // 0~255
    const b = Math.floor(Math.random()*256); // 0~255

    this.style.backgroundColor="rgb("+r+","+g+","+b+")";

    // 숫자.toFixed(자릿수) : 지정된 자릿수까지 반올림해서 표현

    console.log((1.45).toFixed(1));
})

// 형변환 확인
document.getElementById("btn3").addEventListener("click", function(){
    console.log( parseInt("1.234") );
    console.log( (parseFloat("1.234") )); // 숫자는 콘솔에 파란색
    console.log(Number("1.234")); // 문자는 콘솔에 까만 색
})

09_배열

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08_배열</title>
</head>
<body>
    <h1>배열(Array)</h1>
    <pre>
        배열 : 변수를 묶음으로 다루는 것(변수가 연속적으로 나열됨)

        * JS 변수 : 값이 저장되기 전까지 자료형 지정되지 않음

        JS 배열의 특징
        1. 자료형 제한이 없다.
        2. 길이 제한이 없다.
    </pre>

    <button id="btn1">배열확인1(콘솔)</button>

    <hr>

    <h3>배열 관련된 함수</h3>
    <pre>
        (Stack 구조 관련 함수)
        push(): 배열의 마지막 요소로 추가
        pop(): 배열의 마지막 요소 꺼내옴

        배열.indexOf("값") : 일치하는 값을 가진 요소의 index를 반환
                             없으면 -1 반환
                
        배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순 정렬(문자열 기준)
                                    단, [정렬기준 함수]가 작성되면 정렬결과가 달라진다.

        배열.toString() : 배열 요소를 하나의 문자열로 출력
                        -> 요소 사이에 "," 추가

        배열.join("구분자") : 배열 요소를 하나의 문자열로 출력
                        -> 요소 사이에 "구분자" 추가
    </pre>

    <button id="btn2">배열확인2 (콘솔 확인)</button>
    


    <script src="js/09_배열.js"></script>
</body>
</html>

09_배열.js

// 배열 확인 1
document.getElementById("btn1").addEventListener("click", function(){

    // 배열 선언 방법
    const arr1 = new Array(3); // 3칸짜리 배열 생성
    const arr2 = new Array(); // 0칸짜리 배열(비어있는 배열)

    // console.log(arr1);
    // console.log(arr2);

    // 다른 자료형 대입
    arr1[0] = "김밥";
    arr1[1] = 123;
    arr1[2] = true;
    console.log(arr1);
    
    // 0칸 배열에 대입 -> 자동으로 길이 증가
    arr2[0] = "김밥";
    arr2[1] = 123;
    arr2[2] = true;
    console.log(arr2);

    // 배열 선언 방법
    const arr3 = []; // 비어있는 배열(0칸)
    const arr4 = ["사과", "딸기", "바나나"]; // 선언 및 초기화

    // for문으로 배열 요소 반복 접근하기
    // 1. 일반 for문
    
    // 2. 향상된 for문 (for ... of) : 배열용 향상된 for문 for(변수 of 배열)
    for(let item of arr4){ // arr4 배열에서 요소를 하나씩 얻어와 아이템에 대입
        console.log(item);
    }

})

// 배열 확인 2
document.getElementById("btn2").addEventListener("click", function() {

    // 비어있는 배열 생성
    const arr = [];

    // push() : 배열 마지막 요소로 추가
    arr.push("삼겹살");
    arr.push("곱창");
    arr.push("초밥");
    arr.push("치킨");

    console.log(arr);

    // pop() : 배열 마지막 요소 꺼내오기
    console.log("꺼내온 요소 : " + arr.pop());
    console.log(arr);

    // 배열.indexOf("값") : 일치하는 값을 가진 요소의 index를 반환
    console.log("초밥 인덱스 : " + arr.indexOf("초밥"));
    console.log("갈비 인덱스 : " + arr.indexOf("갈비")); //-1

    // 배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순 정렬(문자열)
    const arr2 = [5,3,2,10,1];
    console.log(arr.sort()); // 문자열

    console.log(arr2.sort()); // 숫자 -> 정상 정렬X
                              // 왜? -> 문자열로 변환되어서 정렬되기 때문
                              // 문자열 정렬 기준이 기본값이다.
    // 숫자 오름차순 정렬
    console.log(arr2.sort(function(a,b){ return a-b; }))

    // 문자열로 출력
    console.log(arr.toString());
    console.log(arr.join("/"));


})

냐아암

개발 일지

이전 포스트

국비 43

국비

07_정규표현식

07_정규표현식.js

08_문자열, 숫자, 형변환, 연산자

08_문자열, 숫자, 형변환, 연산자

09_배열

09_배열.js

국비 42-3

0개의 댓글