본문 바로가기
3. HTML | CSS | Javascript

4/7(금) IT K-DT(27일차) / 16-5.Location객체~18.정규표현식

yj.cho 2023. 4. 7. 17:20

16. 객체(Object)의 종류

    16-5. Location 객체

    16-6. History 객체

    16-7. Navigator 객체

    16-8. Document 객체

 

17. 노드(node)

    17-1. 노드의 종류

    17-2. 노드의 관계

    17-3. 노드의 추가

    17-4. 노드의 생성

    17-5. 노드의 제거

    17-6. 노드의 복제

 

18. 정규 표현식

 

TIP

 

과제

16. 객체(Object)의 종류

16-5. Location 객체

브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용.

(현재 웹 페이지의 URL을 나타냄.)

protocol: 콜론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환.
    예) http:
hostname: 호스트의 이름과 포트번호를 반환.
    예) koreaisacademy.co.kr
pathname: URL 경로부분의 정보를 반환.
    예) hostname의 뒷부분
href: 페이지 URL 전체 정보를 반환 또는 URL을 지정하여 페이지를 이동.
reload(): 새로고침.


    <script>

        console.log(`현재 문서의 URL 주소: ${location.href}`); // 현재 문서의 URL 주소: http://127.0.0.1:5500/1.Location.html
        console.log(`현재 문서의 protocol: ${location.protocol}`); // 현재 문서의 protocol: http:
        console.log(`현재 문서의 hostname: ${location.hostname}`); // 현재 문서의 hostname: 127.0.0.1
        console.log(`현재 문서의 pathname: ${location.pathname}`); // 현재 문서의 pathname: /1.Location.html

        function sendit() {
            location.href = "https://python.org"; // sendit() 함수 : '파이썬 홈페이지'로 이동하는 기능.
        }
    </script>

    <p><button onclick="sendit()">이동</button></p> // 버튼을 클릭할 시 sendit() 함수가 실행되어 '파이썬 홈페이지' 이동.

6-6. History 객체

브라우저와 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체.
웹 브라우저의 세션 기록을 나타내는 객체. 

이 객체를 사용하여 사용자의 브라우저 세션의 방문 기록을 조작할 수 있음.
사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 기능의 접근을 제한함.
보안상의 이유로 일부 기능에 대해서는 제한이 있을 수 있음. 

예를 들어, 브라우저 창의 새로 고침, JavaScript 코드에서 생성된 창은 방문 기록을 조작할 수 없음.

back(): 페이지 뒤로 이동.
forward(): 페이지 앞으로 이동.
go(0): 새로고침. (Location.reload()와 같은 기능.)


<body>

    <h2>History객체</h2>
    <button onclick="history.back()"> 뒤로 </button>
    <button onclick="history.forward()"> 앞으로 </button>
    <button onclick="history.go(0)"> 새로고침 </button>

</body>

16-7. Navigator 객체

웹브라우저의 정보를 제공하는 객체.
geolocation: GPS정보를 수신하는 Property


 <script>

        const success = function(loc) {
            console.log(loc.coords.latitude); // latitude : 위도.  37.4954841
            console.log(loc.coords.longitude); // longitude : 경도. 127.0333574
        }

        const fail = function(msg) {
            console.log(msg.code);

        }

        navigator.geolocation.getCurrentPosition(success,fail); 
        // 사용자의 현재 위치를 얻을 수 있음. 위치 정보를 가져오는 데 성공하면 success 콜백 함수가 실행, 
          위치 정보를 가져오는 데 실패하면 fail 콜백 함수가 실행.

 </script>

 


 문서 객체 모델(Document Object Model. DOM)
 HTML, XML문서에 접근하기 위해 객체로 나타냄. 일종의 인터페이스 역할.
 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공.
 즉, 웹페이지나 XML 문서의 구조와 콘텐츠를 객체화하여 스크립트 언어로 조작할 수 있도록 해줌.

16-8. Document 객체

웹페이지 자체(body)를 의미하는 객체.
웹페이지에 존재하는 HTML요소에 접근하고자 할 때 반드시 document객체로부터 시작.

getElementById(): 해당 id의 요소를 선택.
getElementsByTagName(): 해당 tag name의 요소를 모두 선택.
getElementsByClassName(): 해당 class의 요소를 모두 선택.
getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택.
querySelectorAll(): 선택자로 선택되는 요소를 '모두' 선택.
querySelector: 선택자로 선택되는 요소를 선택.

예)


    <ul>
        <li name="markup">HTML</li>
        <li>CSS</li>
        <li id="javascript" class="js">JavaScript</li>
        <li class="js">jQuery</li>
        <li class="backend">Apache</li>
        <li class="backend">Nginex</li>
        <li id="nodejs" class="js">Node.js</li>
        <li id="react" class="js">React</li>
    </ul>


 <script>  // tag name이 li인 요소의 색깔을 금색으로 함.

        const tagName = document.getElementsByTagName('li'); // 'li'의 요소를 모두 선택
        for (let i=0; i<tagName.length; i++) { // tagName의 인덱스가 0부터 '갯수-1'일때까지 (=tagName 모든 요소)
            console.log(tagName[i]);
            tagName[i].style.color = 'gold';
        }

 </script>

       
 <script> // class name이 js인 요소의 색깔을 진분홍색으로 함.

     const className = document.getElementsByClassName('js');  // 'js'의 class를 모두 선택
     for (let i=0; i<className.length; i++) { // className의 인덱스가 0부터 '갯수-1'일때까지 (=className 모든 요소)
            console.log(className[i]);
            className[i].style.color = 'deeppink';
     }

 </script>

        
 <script> // id가 javascript인 요소의 색깔을 황록색으로

        const id = document.getElementById('javascript');  // 'javascript'의 id를 모두 선택
        console.log(id);
        id.style.color = "greenyellow";

 </script>


 <script> // name이 markup인 요소의 색깔을 진하늘색으로

        const name = document.getElementsByName('markup'); 
        for(let i=0; i<name.length; i++){
            console.log(name[i]);
            name[i].style.color = "deepskyblue";
        }

 </script>


 <script> // li에 backend가 있는 요소의 색깔을 남색으로

        const qs = document.querySelectorAll('li.backend'); 
        for(let i=0; i<qs.length; i++) {
            console.log(qs[i]);
            qs[i].style.color = "navy";
        }

</script>

17. 노드(node)

HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장.
Node.js랑 관계 없음.

17-1. 노드의 종류

문서노드: HTML 문서에서 최상위 노드. HTML 문서의 루트(root) 노드. 예)  <html> 태그
요소노드: HTML 문서에서 계층 구조를 이루고, 태그(tag)를 나타내는 노드. 예) <div>, <p> 태그
속성노드: HTML 문서에서 태그의 속성(attribute)을 나타내는 노드.

                 예) <div class="container">에서 "class"는 속성이고, 이에 해당하는 노드.
                 요소노드와 속성노드는 HTML DOM에서 가장 일반적으로 사용되는 노드.
텍스트노드: HTML 문서에서 텍스트를 나타내는 노드. 예) <p>태그 안에 있는 "Hello, world!"와 같은 문자열.
주석노드: HTML 문서에서 주석(comment)을 나타내는 노드. 예) <!-- This is a comment -->

17-2. 노드의 관계

HTML DOM(Document Object Model)에서 사용되는 속성 또는 메서드.

 

예)


    <h2 id="cl">노드</h2>
    <div id="list">
        <p id="backend">node.js</p>
        <p>HTML</p>
        <p>CSS</p>
    </div>
    <p id="item2">React</p>
    <h3 id="item1">JavaScript</h3>



parentNode: 노드의 부모 노드를 나타내는 읽기 전용 속성.
children: 노드의 모든 자식 요소노드를 나타내는 읽기 전용 속성.
childNodes: 노드의 모든 자식 노드를 나타내는 읽기 전용 속성.

                    이 속성은 자식 요소노드 뿐만 아니라, 텍스트노드나 주석노드까지 모두 포함.
firstChild: 노드의 첫 번째 자식 노드를 나타내는 읽기 전용 속성.
firstElementChild: 노드의 첫 번째 자식 요소노드를 나타내는 읽기 전용 속성.
lastChild: 노드의 마지막 자식 노드를 나타내는 읽기 전용 속성.
lastElementChild: 노드의 마지막 자식 요소노드를 나타내는 읽기 전용 속성.
nextSibling: 노드의 다음 형제 노드를 나타내는 읽기 전용 속성.
previousSibling: 노드의 이전 형제 노드를 나타내는 읽기 전용 속성.

17-3. 노드의 추가

appendChild(): 부모 노드의 마지막 자식 노드 뒤에 새 자식 노드를 추가.

예) '노드추가1'버튼을 누르면 Javascript가 List 바로 뒤로 감.


        function appendNode() { 
            const parent = document.getElementById('list');
            console.log(parent);
            const newItem = document.getElementById('item1');
            console.log(newItem);
            parent.appendChild(newItem);
        }

    <button onClick="appendNode()">노드추가1</button> 


insertBefore(): 새로운 자식 노드를 목록의 특정 위치에 삽입하고, 

                          이전에 해당 위치에 있던 자식 노드는 그 다음 위치로 이동.

예) '노드추가2' 버튼을 누르면 React가 list 앞으로 감.


function insertNode() { 
            const parent = document.getElementById('list');
            const backend = document.getElementById('backend');
            const newItem = document.getElementById('item2')
            parent.insertBefore(newItem, backend);
        }

<button onClick="insertNode()">노드추가2</button>

 

insertData(): 텍스트 노드의 기존 데이터 내에 새로운 데이터를 삽입.

예) '텍스트노드추가' 버튼을 클릭할수록 7번째 위치에  '아주 피곤한' 이라는 문구가 추가됨.


      function appendText() {
            const text = document.getElementById('text').firstChild;
            console.log(text);
            text.insertData(7, '아주 피곤한'); // 문장의 7번째 위치에서 '아주 피곤한'이라는 문구를 추가
        }

    <p id="text">현재 시간은 오후 1시 30분입니다.</p>
    <button onClick="appendText()">텍스트노드추가</button>

17-4. 노드의 생성

createElement(): 새로운 엘리먼트 노드를 만듦.

예) '노드생성' 버튼을 클릭하면 Javascript와 React 사이에 '🍕새로운 요소가 나타났다' 를 추가해줌.


 
 function createNode() { 
            const newItem = document.getElementById('item1');
            const newNode = document.createElement('p'); // p 태그를 생성하라는 의미.
            newNode.innerHTML = '<b>🍕새로운 요소가 나타났다</b>'; 
            // innerHTML : HTML 태그를 작성할 수 있도록 도와줌.
            // newNode = p 태그의 사이에 작성이 가능하도록 함.

            document.body.insertBefore(newNode, newItem);
            // body 자식요소 중 newNode를 newItem 앞에 두겠다는 의미.
        }

   <button onClick="createNode()">노드생성</button>

 


createAttribute(): 새로운 속성 노드를 만듦.

예) '속성노드생성' 버튼을 클릭하면 React의 속성을 바꿈(글꼴색을 진분홍 + 배경을 금색).



        function createAttr() { 
            const newItem = document.getElementById('item2');
            const newAttr = document.createAttribute('style');
            newAttr.value = 'color:deeppink; background-color:gold;'; // 속성의 내용(글꼴색을 진분홍 + 배경을 금색).
            newItem.setAttributeNode(newAttr); // newItem에 newAttr을 적용
        }

    <button onClick="createAttr()">속성노드생성</button>


createTextNode(): 새로운 텍스트 노드를 만듦.

예)  '텍스트노드생성' 버튼을 클릭하면 텍스트 '🍔🍔🍔🍔🍔' 를 삽입.


        function createText() { 
            const textNode = document.getElementById('ct');
            const newText = document.createTextNode('🍔🍔🍔🍔🍔')
            textNode.appendChild(newText); // newText를 textNode에 새로 추가
        }

   <button onClick="createText()">텍스트노드생성</button>

17-5. 노드의 제거

removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당 노드를 반환.

                          노드가 제거될 때 노드의 자식들도 다같이 제거됨.

예) '노드삭제' 버튼을 클릭하면 node.js 텍스트를 삭제.

        
 function removeNode(){
            const parent = document.getElementById('list'); // parent는 list의 요소
            const removeItem = document.getElementById('backend'); // removeItem은 id가 backend인 요소
            const result = parent.removeChild(removeItem); // result는 parent에서 removeItem을 지운 결과.
            console.log(result);
        }

    <button onClick="removeNode()">노드삭제</button>

removeAttribute(): 특정 속성 노드를 제거.

예)  '속성노드삭제' 버튼을 클릭하면 생성된 속성노드를 삭제.


     function removeAttr(){
            const newItem = document.getElementById('item2');
            newItem.removeAttribute('style');
        }

    <button onClick="removeAttr()">속성노드삭제</button>

17-6. 노드의 복제

clonenode(): 기존에 존재하는 노드와 동일한 새로운 노드를 생성하여 반환.

예) '노드복제' 버튼을 누르면 <h2> 탭의 텍스트가 <div>탭의 'list' 아래로 복제됨. 

       
 function cloneElement(){ 
            const parent = document.getElementById('list'); // parent는 list의 요소이다.
            const originItem = document.getElementById('cl'); // originitem은 cl이다.
            parent.appendChild(originItem.cloneNode(true)); // originItem을 parent에 복제해서 그 아래에 추가한다.
        }

    <button onClick="cloneElement()">노드복제</button>

18. 정규 표현식

문자열에서 특정 패턴을 찾거나 대체하거나 추출하는 등의 문자열 처리를 위한 패턴을 정의하는 방법.

/ ~ / : 시작과 끝.
^ : 패턴의 시작.
[ ] : 안의 문자를 찾음.
[x-z] : x~z사이의 문자를 하나 찾음.

         [a-z] : 영문 소문자를 사용

         [A-Z] : 영문 대문자를 사용

         [가-힣] : 한글을 사용
x+ : x가 1번 이상 반복.
x$ : x로 끝남.
^x : x로 시작.
/d : 숫자.
x{n} : x를 n번 반복한 문자를 찾음.
x{n,m} : x를 n번이상 m번이하 반복한 문자를 찾음.
\x : 예외처리('x를 포함하겠다'는 의미.) (예: 이메일에 -, . 을 포함하고 싶을 때: \-\.)

 

예)


 아이디: [       ]
 * 영문 대문자 또는 소문자로 길이는 4~20자까지 
 : / ^ [A-Z a-z] {4,20} /

 이름: [         ]
 * 한글만 사용 (1글자 이상)
 : / ^ [가-힣] + $ /

 휴대폰번호: [       ]
 * 앞번호는 3글자, -, 중간번호는 3글자 또는 4글자, -, 마지막번호는 4글자.
 : / ^ \d{3} - \d{3,4} - \{4} $ /

 이메일: [           ]
 * 영문 대문자, 소문자, 숫자로 시작하고 적절한 위치에 '@' , '.' 포함.
 : / ^ [A-Z a-z 0-9 \- \. ] + @ [A-Z a-z 0-9 \- \. ] + \. [A-Z a-z 0-9 \- \. ] + $ /


test(): 정규표현식에 대입한 문자열이 적합하면 true, 아니라면 false를 return해주는 함수.

 

예)


 <script>

        function senditId() {
            const userid = document.getElementById('userid');
            // 아이디
            const expIdText = /^[A-Za-z]{4,20}$/; // 단지 변수 expIdText에만 담은 상황. 적용하는 함수가 별도로 있음.
            // 아이디 체크
            if (expIdText.test(userid.value)){ // test 메서드를 사용하여 if문과 else문으로 나누어 출력.
                alert('정규표현식 통과');
            }else {
                alert('정규표현식 통과 실패');
            }
        }

        function senditName() {
            const name = document.getElementById('name');
            // 이름
            const expNameText = /^[가-힣]+$/;
            // 이름 체크
            if (expNameText.test(name.value)) {
                alert('정규표현식 통과');
            } else {
                alert('정규표현식 통과 실패');
            }
        }
        
 </script>

 <body>
    <h2>정규표현식</h2>

    <p>아이디: <input type="text" id="userid"></p>
    <p><button onClick="senditId()">아이디 확인</button></p>

    <p>이름: <input type="text" id="name"></p>
    <p><button onClick="senditName()">이름 확인</button></p>
 </body>

TIP

Daum 우편번호 API :(https://postcode.map.daum.net/guide)

 

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

'회원가입' 페이지를 만들 때 '우편번호' 와 '주소' 에 해당하는 내용을 더욱 쉽게 적용할 수 있게 해주는 API.

과제

홈페이지 '회원가입' 페이지에서

  1) 비밀번호 정규표현식 작성 (const extPwText)
  2) 이름 정규표현식 작성 (const extNameText)
  3) 휴대폰 정규표현식 작성 (const extHpText)
  4) 이메일 정규표현식 작성 (const extEmailText)

저작자표시 비영리 변경금지

'3. HTML | CSS | Javascript' Related Articles

티스토리툴바