# 12. JavaScript 12일차(231010) [국비교육]

brand_mins·2023년 10월 10일

목록 보기

11/11

1. DOM 조작

- HTML과 자바스크립트 코드는 DOM을 조작하는 예제

window.onload 이벤트핸들러
웹페이지가 로드되면 실행되는 이벤트 핸들러

document.body.children
body 요소의 자식 요소 목록을 반환하고 콘솔에 출력

document.getElementByTagName('ul')[0]
문서 내에서 ul태그 요소를 선택 후 출력

myUl.children
선택된 ul요소의 자식 요소 목록 반환하고 콘솔에 출력
반복문을 사용하여 li요소 내용 출력

myUl.firstChild
ul요소의 첫번째 자식노드요소 접근
다양한속성(텍스트, 데이터, HTML 내용 등) 콘솔출력

getElementByTagName("li")[1]
두번째 요소인 li 요소 오렌지 선택 내용을 출력
또한 previousSibling 및 nextSibling 사용하여
해당 요소의 이전과 다음 형제노드 접근하고 내용 출력

새로운 li요소 생성하고 텍스트 내용 설정한 다음
appendChild 및 insertBefore메소드를 사용하여 DOM추가

removeChild()
특정노드 삭제

innerHTML 속성을 사용하여 HTML을 포함한 새로운 li 요소 생성하고 DOM 추가

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /*
      dom? document object model 문서를 객체로 만들어 놓은 것
      dom을 이용해서 노드에 접근하여 변경가능. 다른 노드를 찾을 수 있다.
      */

      window.onload = function () {
        var body = document.body.children;
        console.log(body);
        var myUl = document.getElementsByTagName("ul")[0];
        console.log(myUl);
        var myLi = myUl.children;
        console.log(myLi);
        for (var i = 0; i < myLi.length; i++) {
          console.log(myLi[i].innerHTML);
        }
        // data text 노드에 text 출력
        // console.log(myUl.firstChild.data);
        console.log(myUl.firstChild.innerText);
        console.log(myUl.firstChild.innerHTML);
        console.log(myUl.firstChild.parentNode);

        var orange = document.getElementsByTagName("li")[1];
        console.log(orange.innerHTML);
        console.log(orange.previousSibling.innerHTML);
        console.log(orange.nextSibling.innerHTML);

        // console.log(myUl.firstChild);
        // alert(myUl.firstChild.data);
        // alert(myUl.firstChild.innerHTML);
        // alert(myUl.firstChild.innerText);

        // 노드를 만들어 추가
        // li태그를 만들어서 기준 ul 추가
        // 화면상에 존재하지 않은 li태그 만들기
        var newNode = document.createElement("li");
        var newText = document.createTextNode("수박");
        // appendChild라는 메소드를 사용하여 선택된 엘리먼트의 마지막 자식으로 추가 가능
        newNode.appendChild(newText);
        console.log(newNode);
        myUl.appendChild(newNode);

        // insertBefore 선택된 엘리먼트의 앞쪽 형제 추가
        // 오렌지 앞쪽의 수박 추가
        myUl.insertBefore(newNode, orange);
        // 기존 노드를 사용하려면 이동. 새롭게 추가하려면 새로 만들어서 추가
        // 삭제
        myUl.removeChild(newNode);

        var newNode = document.createElement("li");
        newNode.innerHTML = "<b>수박</b>";
        myUl.appendChild(newNode);
      };
    </script>
  </head>
  <body>
    <div>
      <p>과일리스트</p>
      <ul>
        <li>사과</li>
        <li>오렌지</li>
        <li>바나나</li>
      </ul>
    </div>
  </body>
</html>

2. 정규식

HTML5에서 제공하는 pattern 속성을 사용하면 사용자 입력 필드의 내용을 정규표현식을 통해 유효성 검사
사용자가 입력한 내용이 특정 패턴에 맞는지 브라우저에서 자동확인 가능

예시) pattern 속성을 사용하여 4자~10자 사이의 알파벳과 숫자만 허용하는 입력 필드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input
        type="text"
        placeholder="4~10자 입력"
        pattern="[A-Za-z0-9]{4,10}"
        maxlength="10"
        required
      />
      <button type="submit">확인</button>
    </form>
  </body>
</html>

- 주요부분: input의 pattern속성
- [A-Za-z0-9]: 알파벳 대문자, 소문자, 숫자 중 하나의 문자를 의미함.
- {4,10}: 4자에서 10자 사이의 문자열
- 해당 패턴이 맞지 않으면 브라우저가 자동으로 경고메시지 표시

(1) 비밀번호 검증

<input id="reg2">

비밀번호 검증을 위해 사용된 정규 표현식
/^[A-Za-z0-9]{6,12}$/: 알파벳과 숫자만 포함, 비밀번호 6~12자 사이 문자열
버튼이 클릭될때 JavaScript는 test()를 사용하여 입력이 정규표현식과 일치하는지 확인

(2) 이메일 검증을 위한 정규표현식

/^0-9a-zA-Z@0-9a-zA-Z.[a-zA-Z]{2,3}
$/i
버튼이 클릭되면 JavaScript는 test() 사용하여 정규표현식이 일치하는지 확인

(3) 전화번호 검증

<input id="reg4">

전화번호 검증을 위해 사용된 정규 표현식은 다음과 같다.
/^\d{3}-\d{3,4}-\d{4}$/

(4) 예시코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      // 정규표현식
      // 문자열 패턴을 검색해서 일치하는 문자를 찾는데 사용
      // 예) 사이트가입시 이메일, 주민번호, 전화번호, 입력에 대해서 정말 맞는 데이터인지
      // 입력하였는지 확인하는 작업이 필요할때 사용함.

      // 정규식문자열은 사선 안에 문자열 패턴과 기술해서 표시함.
      // / 문자열패턴 기술 / 추가정보
      // i 문자열 패턴으로 찾을 시 대소문자 구분x
      // g 전체에서 여러개 찾기
      // m 줄당 시작하는 문자열이 같은 경우
      // 추가정보는 조합되어 사용할 수 있다. igm

      // search 같은 문자열을 찾아서 찾은 문자의 인덱스를 생성함.
      // replace같은 문자열을 찾아서 변경함
      // test 같은 문자열이 있으면 true, 없으면 false리턴
      // match 찾은 문자열들을 배열로 리턴

      var str = "visit Human";
      var index = str.search("Human");
      console.log(index);

      var str = "visit Human";
      var index = str.search(/Human/);
      console.log(index);

      var str = "visit Human";
      // 찾지 못하면 -1 리턴
      var index = str.search(/human/);
      console.log(index);

      var str = "visit Human";
      var index = str.search(/human/i);
      console.log(index);

      // replace
      var str = "visit Human ";
      var result = str.replace(/human/i, "Microsoft");
      console.log(str);
      console.log(result);

      var str = "visit Human Human ";
      var result = str.replace(/human/gi, "Microsoft");
      console.log(str);
      console.log(result);

      // test
      var str = "visit Human Human ";
      var pattern = /e/;
      console.log(pattern.test(str)); // e가 없으므로 false 생성
      console.log(/i/.test(str)); // i가 있으므로 true 생성

      // 정규표현식 패턴 /i/에서 i부분에 올 수 있는 패턴
      // [abc] abc문자중 하나의 문자 검색
      var str = "visit Human Human ";
      var result = str.match(/[i]/g);
      console.log(result);
      var result = str.match(/[im]/g);
      console.log(result);
      var result = str.match(/[ims]/g);
      console.log(result);

      // [0~9] 0부터 9사이의 문자를 선택
      // [0123456789] 와 같은 의미
      var str = "v0123456789";
      var result = str.match(/[3-6]/g);
      console.log(result);

      // (xx | yy)일때 선택
      var str = "visit Human Human ";
      var result = str.match(/(visit|Human)/g);
      console.log(result);

      // d 숫자만 찾기
      var str = "visit1 Human10 Human100 ";
      var result = str.match(/\d/g);
      console.log(result);

      // s 공백찾기
      var str = "visit1 Human10 Human10 ";
      var result = str.match(/\s/g);
      console.log(result);

      // \bHu, Hu로 시작하는 문자열
      var result = str.match(/\bHu/g);
      console.log(result);

      // 0\b 0으로 끝나는 문자열
      var result = str.match(/0\b/g);
      console.log(result);

      //  \uxxxx 해당 유니코드

      // n+ 적어도 하나이상의 n으로 이루어진 n문자열찾기
      var str = "visit0001 Human10 Human100";
      var result = str.match(/0+/g);
      console.log(result);

      // n* n이 없어도 되고 여러개여도 되는 문자열
      var str = "visit0001 Human10 Human100 ";
      var result = str.match(/10+/g);
      console.log(result);

      // n? n이 없어도 되고 한개여도 되는 문자열
      var str = "visit0001 Human10 Human100 ";
      var result = str.match(/10?/g);
      console.log(result);

      // 사용자 입력을 받아서 다음 문자열이 맞는지 확인하는 정규식을 만들어보자
      // 2. 숫자와 문자 포함 형태의 6~12자리 이내의 암호 정규식
      // 3. 이메일 정규식
      // 4. 핸드폰번호 정규식

      var regExp = /^[A-Za-z0-9]{6,12}$/;
      var regExp =
        /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
      var regExp = /^\d{3}-\d{3,4}-\d{4}$/;

      window.onload = function () {
        document.getElementById("b2").addEventListener("click", function () {
          var regExp = /^[A-Za-z0-9]{6,12}$/;
          if (regExp.test(document.getElementById("reg2").value)) {
            alert("사용할 수 있는 아이디");
          } else {
            alert("사용할 수 없는 아이디");
          }
        });

        document.getElementById("b3").addEventListener("click", function () {
          var regExp =
            /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
          if (regExp.test(document.getElementById("reg3").value)) {
            alert("사용할 수 있는 이메일");
          } else {
            alert("사용할 수 없는 이메일");
          }
        });

        document.getElementById("b4").addEventListener("click", function () {
          var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
          if (regExp.test(document.getElementById("reg4").value)) {
            alert("사용할 수 있는 전화번호");
          } else {
            alert("사용할 수 없는 전화번호");
          }
        });
      };
    </script>
  </head>
  <body>
    숫자와 문자 포함 형태의 6~12자리 이내 암호 정규식
    <input type="text" id="reg2" /><button id="b2">버튼</button><br />
    이메일 정규식
    <input type="text" id="reg3" /><button id="b3">버튼</button><br />
    핸드폰번호 정규식
    <input type="text" id="reg4" /><button id="b4">버튼</button><br />
    <br /><br />
    html5 정규식
    <form>
      <input
        type="text"
        placeholder="4~10자리 입력"
        pattern="[A-Za-z0-9]{4,10}"
        maxlength="10"
        required
      />
      <button type="submit">check</button>
    </form>
    <!-- 
      placeholder: 사용자 입력전 입력 가이드
      maxlength: 사용자 입력 최대 크기
      required: 사용자가 입력을 반드시 해야한다
    -->
  </body>
</html>

brand_mins

IT 개발자가 되기 위한 기록

이전 포스트

# 12. JavaScript 12일차(231010) [국비교육]

JavaScript

1. DOM 조작

2. 정규식

(1) 비밀번호 검증

(2) 이메일 검증을 위한 정규표현식

(3) 전화번호 검증

(4) 예시코드

# 11. JavaScript 11일차(231009) [국비교육]

0개의 댓글