유정잉

29일차 JavaScript [ 문서 객체 모델, Node ] 본문

네이버 클라우드 부트캠프/복습 정리

29일차 JavaScript [ 문서 객체 모델, Node ]

유정♡ 2024. 4. 1. 17:42

[ JavaScript DOM 함수 순서 - onload ]

    - 문서가 준비되었다.

<head>
    <script>
        window.onload=function() {        
            let n=document.getElementsByTagName("h1");
            n[0].style.color='red';  
        }
    </script>
</head>
<body>
        <h1>자바스크립트</h1>    
</body>

 

[ JavaScript DOM 접근 함수 - 1 ]

    - getElementById(); getElementsByClassName(); getElementsByTagName(); => 배열로 접근 가능

<body>
        <h1 class="a">자바스크립트1</h1>
        <h1 class="a">자바스크립트2</h1>
        <h1 class="a">자바스크립트3</h1>
</body>
<script>
        let m=document.getElementsByClassName('a');
        m[0].style.color='red'; // 배열 형태로 접근 해야지 오류 X / 배열이 길때는 반복문 사용
        m[1].style.color='pink';
        m[2].style.color='violet';

        /*let v = document.getElementsByTagName("hi");
        v[0].style.color='red'; // 배열 형태로 접근 해야지 오류 X
        v[1].style.color='red';
        v[2].style.color='red';*/

        /* let h1=document.getElementById("j1");
        let h2=document.getElementById("j2");
        let h3=document.getElementById("j3");
        h1.style.color="orange";
        h2.style.color="blue";
        h3.style.color="red";
        h3.style.background="black"; */
</script>
 
<head>
    <script>
        function ch() {
            let n=document.getElementsByTagName('span');
            for(let i=0;i<n.length;i++) {
                let s=n[i];
                s.style.color='orchid';
                s.style.fontSize='30px';
            }
        }
    </script>
</head>
<body>            
    <button onclick="ch()">버튼 눌러줘!!!</button><br>

    시력이 나쁘지 않아도 미용상 이유로 <span>서클렌즈</span>를 끼는 사람들이 늘면서 눈 건강 관리에 대한 관심도 높아지고 있다.
    시력보정용 뿐만 아니라 색상이 들어간 <span>콘택트렌즈</span>도 포함된다.
    재질에 따라 <span>‘하드콘택트렌즈’</span>와 <span>‘소프트콘택트렌즈’</span>로 나눌 수 있다.
</body>

 

[ JavaScript DOM 접근 함수 - 2 querySelector() ]

   - querySelector()  => 배열로 접근 불가능

   -  querySelectorAll()  => 배열로 접근 가능

<body>
    <div class="f">
        <h1>자바스크립트1</h1>
        <h1>자바스크립트2</h1>
        <h1>자바스크립트3</h1>
    </div>
    <h1>자바스크립트4</h1>
    <h1>자바스크립트5</h1>
</body>
<script>
        //쿼리 셀렉터
        let n=document.querySelector(".f h1"); // 한꺼번에 부모 자식 넣을 수 있음
        n.style.color='green'; // h1중에서도 첫번째 요소만 선택 가능
        // 쿼리셀렉터는 배열로 사용할 수 없다. (TagName, ClassName은 배열 접근 가능)
        // n[0].style.colo="green"; 배열 접근 불가능
 
        let n=document.querySelectorAll(".f h1"); // querySelectorAll 배열로 접근 가능
        n[0].style.color='green'; 
</script>

 

 

[ JavaScript DOM 웹 요소의 내용을 수정하는 innerText, innerHTML ]

<body>
    <h1 id="j1"></h1> <!-- 태그와 태그 사이에 아무런 문자도 없음 -->
    <h1 id="j2"></h1>    
    <h1 id="j3"></h1>    
</body>
<script>
    let j1=document.getElementById("j1");
    let j2=document.getElementById("j2");
    let j3=document.getElementById("j3");

    // 태그는 태그로 인식, 텍스트는 텍스트로 인식
    j1.innerHTML='a태그 <a href="#">링크1</a>';

    // 태그는 태그로 인식하지 않고 그냥 문자로 인식
    j2.innerText='a태그 <a href="#">링크1</a>';

    // 태그는 태그로 인식하지 않고 그냥 문자로 인식
    j3.textContent='a태그 <a href="#">링크1</a>';
</script>

<head>
    <style>
        #h{
            color: blueviolet;
        }
        span.user{
            color: aqua;
        }
    </style>
</head>
<body>
    <h2 id="h">
        안녕하세요 <span class="user">길동</span>님
    </h2>  
</body>
<script>
    let n=document.getElementById('h');
    console.log(n);
    console.log(n.innerHTML);
    console.log(n.innerText);
    console.log(n.textContent);
</script>

 

[ JavaScript DOM 텍스트 노드를 사용하는 새로운 요소 추가하기 ]

    - 버튼 클릭시 함수 작용 하는 코드 연습 !!! , 이벤트 처리 함수

<body>
    <!-- <h2>동적으로 h2 생성 됨 -->
</body>
<script>
    var n=document.createElement('h2'); // h2라는 엘레먼트 생성함 => <h2>
    document.body.appendChild(n);  // body속성에 자식요소로 h2라는 변수 추가
    n.innerHTML="동적으로 h2 생성됨";
</script>

 

<head>
    <script>
        function addr() { // 일반함수
            result=document.getElementById("addr"); // 저장을 누르면 내가 쓴 이름과 전화번호가 <ul id="addr">에 삽입되게 즉, ul 영역

            // 내가 text에 넣은 값 (이름, 전화번호)
            // ~~~.value : input 태그 안에 넣은 값을 가져올 때
            add=document.getElementsByName("aa")[0].value+','+
            document.getElementsByName('tel')[0].value; // input type에 name 준거, 배열이 들어가야 함

            a=document.createElement("li");
            b=document.createTextNode(add);

            // <li>길동 010-1111-1111 </li>
            a.appendChild(b); // li에 내가 입력한 이름, 전화번호 들어간다
            result.appendChild(a); // ul에 li 들어간다.
        }
          function re() {
            document.getElementById("addr").innerHTML=""; //초기화
         }
    </script>    
</head>
<body>
    이름: <input type="text" name="aa"><br>
    전화번호: <input type="tel" name="tel"><br>
    <input type="submit" value="저장" onclick="addr()">
    <input type="reset" value="리셋" onclick="re()">
    <ul id="addr">

    </ul>
</body>

<head>
    <script>
        function ch() {
            let n=document.getElementById("java"); // span태그 영역
            n.style.color="black";
            n.style.fontSize="30px";
            n.style.display="block";
            n.style.border="3px dotted deeppink";
        }
    </script>    
</head>
<body>
    <!-- 인라인블록 안에 블록태그가 들어갈 순 없음 !!! -->
    <p style="color: aqua;">자바
        <span id="java" style="color: green;">스크립트</span>
    </p>
    <input type="button" value="버튼" onclick="ch()"> <!-- 버튼을 눌렀을 때에 대한 이벤트 처리 연습 -->
</body>

<head>
    <script>
        function on() {
            let m=null;
            let n=document.getElementsByName("city"); // n[0], n[1], n[2]
            for(let i=0;i<n.length;i++) {
                if(n[i].checked==true)   // 선택이 됐는지 안 됐는지 확인하는 checked
                m=n[i];
            }
            if(m!=null)
                alert(m.value+"선택했다");
            else
                alert('아무것도 선택 안함');
            }
       
    </script>    
</head>
<body>
    <form>
        <input type="radio" name="city" value="seoul">서울
        <input type="radio" name="city" value="busan">부산
        <input type="radio" name="city" value="chunchon">춘천
        <input type="button" value="체크" onclick="on()">
    </form>
</body>

<head>
    <script>
        function score(n) {
            let sum=0;
            if(n.checked) {
                sum+=parseInt(n.value);  // 체크박스의 value 값
            }
            document.getElementById("tot").value=sum;
        }
    </script>    
</head>
<body>
    <form>
        <input type="checkbox" name="ch" value="80" onclick="score(this)">자바
        <input type="checkbox" name="ch" value="100" onclick="score(this)">DB
        <input type="checkbox" name="ch" value="90" onclick="score(this)">html
        총합 <input type="text" id="tot" value="0">
    </form>
</body>

    <script>
        function ch(obj, size, color) {
            obj.style.color=color;
            obj.style.size=size;
        }
    </script>
</head>
<body>               <!-- button 태그의 주소 값 -->
    <button onclick="ch(this, '30px', 'red')">버튼1</button>
    <button onclick="ch(this, '40px', 'blue')">버튼2</button>
    <div onclick="ch(this, '40px', 'orange')">클릭해줘</div>
</body>

 

 

[ JavaScript DOM 속성값이 있는 새로운 요소 추가하기 ]

<body>
    <!-- <img src='마이멜로디.jpg' width=400> -->
</body>
<script>
    let n=document.createElement("img"); //img 태그 생성됨
    document.body.appendChild(n); // body에 img 태그가 생성된 상태 !!!

    // 동적으로 생성한 엘러멘트에 속성 값을 세팅
    n.setAttribute('src','마이멜로디.jpg');
    n.setAttribute('width','400');

    alert(n.getAttribute('width'));
    alert(n.getAttribute('src'));
</script>

 

 

[ JavaScript DOM 노드 삭제하기 ]

     - appenChild, removeChild, replaceChild

<head>
    <script>
        function ch() {
            let n=document.getElementById("p");
            let m=document.createElement("div"); //<div>새로 생성함</div>
            m.innerHTML="새로 생성함";
            m.setAttribute("id","me"); //<div  id='me'>새로 생성함</div>
            m.style.backgroundColor='orange'
            m.onclick=function() {
                let p=this.parentElement; // 부모 html태그 요소
                p.removeChild(this);
            };
            n.appendChild(m);
        }
    </script>
</head>
<body id="p">            
    <p>시력이 나쁘지 않아도 미용상 이유로 서클렌즈를 끼는 사람들이 늘면서 눈 건강 관리에 대한 관심도 높아지고 있다.
    시력보정용 뿐만 아니라 색상이 들어간 콘택트렌즈도 포함된다.
    재질에 따라‘하드콘택트렌즈’와 ‘소프트콘택트렌즈’로 나눌 수 있다. </p>
    <a href="javascript:ch()">생성</a>
</body>

생성 링크 누를때 마다 새로 생성함이 계속 생김 / 새로 생성함을 누를 때 마다 생섬함이 사라짐

<body>            
    <div class="p">
        <h1 class="head">제목</h1>
        <p class="article">
            시력이 나쁘지 않아도 미용상 이유로 서클렌즈를 끼는 사람들이 늘면서 눈 건강 관리에 대한 관심도 높아지고 있다.
            시력보정용 뿐만 아니라 색상이 들어간 콘택트렌즈도 포함된다.
            재질에 따라‘하드콘택트렌즈’와 ‘소프트콘택트렌즈’로 나눌 수 있다.</p>
    </div>
</body>
<script>
    let n=document.querySelector(".p"); //div영역  p.608
    let m=document.querySelector(".head"); //h1영역
    let z=document.querySelector(".article"); //p영역

    //div 영역에서 p태그 제거 // <div>가 부모고 그 안에 자식 <h1><p> 두개 존재 @@
    n.removeChild(z); // 그래서 결과적으로 <p class="article"> 부분 출력이 되지 않음

    let a=document.createElement('hr');
    n.appendChild(a); //hr태그 추가

    let b=document.createElement("b"); //<b>h1 태그를 b태그로 변경할거임</b>
    b.innerText="h1태그를 b태그로 변경할거임"; //태그와 태그 사이에 Text (태그인식이 되지 않음)
    n.replaceChild(b,m); //h1태그를 b태그로 변경함
</script>

replaceChild 사용 방법 !!!

 

[ JavaScript DOM에서 이벤트 처리하기 ]

  1) 문서객체.on이벤트타입명 = 이벤트핸들러;

       ex) n.onclick=function();

             n.onclick=ch;

  2) 문서객체.addEventListener("이벤트타입",콜백함수);

       ex) n.addEventListener('click',function(){});

 

  3) 문서객체.removeEventListener('이벤트타입',콜백함수);

 

[ JavaScript 이벤트 종류 ]

1) 마우스 이벤트 (click, dbclick, mouseover, mouseout, mousemove...)

2) 키 이벤트 (keydown, keyup, keypress...)

3) 로드 이벤트 (load, resize, scroll...)

4) 폼 이벤트 (focus, blur, change, submit, reset, select)

    change : 요소에 값이 변경 되었을 때

    submit ; submit 버튼을 눌렀을 때 이벤트 발생

    select : input, textarea 요소 안의 텍스트를 선택했을 때 발생

<body>            
    <h1 id="p">자바스크립트</h1>
</body>
<script>
    // 위 아래 모두 똑같은 결과 다른 사용 방식
    let n=document.getElementById('p');
    n.addEventListener('click',function() { //콜백함수
        n.style.color='yellow';
        n.style.background='black';
    })

    n.onclick=function() { //직접 함수 짜기
        n.style.color='yellow';
        n.style.backgroundColor='black';
    }
</script>

마우스 이벤트

<body>            
    <button id="bt">클릭해줘</button>
</body>
<script>
    // 위 아래 같은 결과 다른 방식
    let n=document.getElementById('bt');
    n.onclick=function(e) {
        console.log(e.type);
    }

    let n=document.getElementById('bt');
    n.addEventListener('mouseover',function(e){
        console.log(e.type);
    })
</script>

<body>            
    <div class="f">
        <input type="text" id="in">
        <p>키코드: <span id=re></span></p>
    </div>
</body>
<script>
    let n=document.getElementById('in');
    let m=document.getElementById('re');

    n.onkeyup=function(e) {
        let z=e.keyCode;
        m.innerText=z;
    }
</script>

키 이벤트

<body>
    <form name="test" calss="t">                      <!-- disabled 값 활성화 안 되어 있음 수정할 수 없다는 뜻 -->
        <input type="text" name="first" maxlength="6" value="001111" disabled> <!-- form 태그 안에 input 타입에 여러 속성들 셋팅 -->

        <input type="text" name="gender" maxlength="1">

        <input type="radio" name="g1" id="male">
            <label for="male">남</label>

        <input type="radio" name="g1" id="female">
            <label for="female">여</label>
    </form>

</body>
    <script>
        let n=document.test.gender; // 1 하나의 숫자 입력
        let male=document.getElementById('male');
        let female=document.getElementById('female');

        n.onkeyup=function() {
            let num=this.value; //여기서 this는 하나의 숫자
            if(num>=1 && num<=4) {
                if(num==1 || num==3) {
                    male.checked=true; // checked=true 체크가 되어짐
                    female.checked=false;
                }
                else {
                    male.checked=false;
                    female.checked=true;
                }
            }
        }
    </script>

onkeyup을 활용한 이벤트 처리

 

 

[ JavaScript Node -parentNode ]

<head>
    <style>
        .f{
            border: 1px solid gray;
            padding: 20px;
            border-radius: 10px;
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="f">
        <h1>java script</h1>
        <p>
            여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공한다.<br>
            각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. <br>
            각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.<br>
        </p>
        <button id="bu" onclick="">클릭</button>
    </div>

    <script>
        let f=document.querySelector(".f"); //class이기 때문에 .f
        let b=document.getElementById("bu"); //getElemetById이기 떄문에 # 필여없음

        // 버튼 클릭시 이벤트 발생
        b.addEventListener('click',function() {
            this.parentNode.style.backgroundColor='yellow';
            this.parentNode.style.boxShadow='0 0 20px blue';
            //this는 자기자신.부모노드선택
        })
    </script>
</body>

 

 

[ JavaScript Node - childNode ]

<body>
    <div class="f">
        <h1>java script</h1>
        <p>
            여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공한다.<br>
            각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. <br>
            각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.<br>
        </p>
    </div>

    <script>
        let f=document.querySelector(".f");

        let n=f.childNodes.length;
        f.childNodes[1].style.color='red';
    </script>
</body>

<body>
    <div class="f">
        <h1>java script</h1>
        <p>
            여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공한다.<br>
            각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. <br>
            각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.<br>
        </p>
    </div>

    <script>
        let f=document.querySelector(".f");

        // div에서 첫번째 텍스트 = 첫번째 자손
        f.firstChild.textContent='첫번째 텍스트';
        // 마지막 자손
        f.lastChild.textContent='마지막 텍스트';
    </script>
</body>

<body>
    <div class="f">
        <h1>java script</h1>
        <p>
            여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공한다.<br>
            각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. <br>
            각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.<br>
        </p>
    </div>

    <script>
        let f=document.querySelector(".f");

        // 공백을 뺀 첫번째 자손
        f.firstElementChild.style.color='red';
        // 공백을 뺀 마지막 자손
        f.lastElementChild.style.color='blue';
    </script>
</body>

 

 

[ JavaScript Node - nextElementSibling, previousElementSibling ]

<body>
    <div class="f">
        <h1>java script</h1>
            <div class="c">
                <h2>css</h2>
        <p>
            여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공한다.<br>
            각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. <br>
            각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.<br>
        </p>
            </div>
    </div> <!-- div 2개 끝나는 작업 -->

    <script>
        let f=document.querySelector(".f");
        let c=document.querySelector('.c');
        let z=document.querySelector('.c h2'); // div태그class=c안에  h2태그(자식)

        // z 다음요소 선택 = p 태그 선택
        z.nextElementSibling.style.border='2px solid red';

        // c 이전요소 선택 = h1 태그 선택
        c.previousElementSibling.style.border='2px dotted blue';
    </script>
</body>

 

[ JavaScript Node 폼 접근 - document.폼요소.요소네임 ]

     ※폼에 접근하는 3가지 방법 
         - document.폼네임.요소네임  =>  주로 많이 이용
         - document.forms['폼네임'].elements['요소네임']
         - document.forms['폼네임']['요소네임']

<body>
    <form name="test">
        <input type="text" name="test2">
    </form>
</body>
    <script>
        //폼에 접근하는 3가지 방법
        // document.폼네임.요소네임  =>  주로 많이 이용
        // document.forms['폼네임'].elements['요소네임']
        // document.forms['폼네임']['요소네임']
        let n=document.test.test2;
        n.style.border='2px solid red';

        let n2=document.forms['test'].elments['test2']
        n2.style.backgroundColor='yellow';

        let n3=document.forms['test']['test2'];
        n3.style.padding='20px';
    </script>
<body>
    <form name="test">
        <input type="text" name="test2">
    </form>
    <div id="pr"></div>
</body>
    <script>
        let n=document.test.test2;
        let n2=document.getElementById('pr');

        n.onkeyup=function() {
            let n3=this.value; //text에 입력한 값이 n3에 저장=대입
            //입력한 값을 n2에 띄운다
            n2.textContent=n3;
        }
    </script>

폼 접근 + 키이벤트

 

[ JavaScript className ]

<head>
    <style>
    </style>
       
</head>
<body>
    <h1>javascript</h1>
    <h2 class="active">css</h2>
</body>
    <script>
       let n=document.querySelector('h1');
       let n2=document .querySelector('h2');

        // h2태그의 클래스 이름을 active라고 추가
        n2.className='active';
        //
        n2.className='active';
    </script>
</html>
<head>
<style>
</style>
</head>
<body>
    <h1 class="style1 style2">H1</h1>
    <h2 class="style1 style2 style3">H2</h2>
    <script>
        let n=document.querySelector('h1');
        console.log(n.classList.length); //h1클래스의 개수

        n.addEventListener('mouseenter', function(){
            this.classList.add('active'); //클래스 추가
        })
        n.addEventListener('mouseleave', function(){
            this.classList.remove('active'); //클래스 삭제
        })

        let n2=document.querySelector('h2');
        console.log(n2.classList.length); //h2클래스의 개수
</script>
</body>

 

 

[ JavaScript dataset ]

<head>
<style>
</style>
</head>
<body>
    <div class="di">
        <h2>커피 주문</h2>
        <div class="di2">
        <h1 data-cafe="아이스아메리카노">아이스아메리카노</h1>
        <h1 data-cafe="카푸치노">카푸치노</h1>
        <h1 data-cafe="스무디">스무디</h1>
        </div>
    </div>
<script>
    let n=document.querySelectorAll(".di h1"); //h1 3개

    for(let i=0;i<n.length;i++){
        n[i].addEventListener('click',function(){
            let n2=this.getAttribute('data-cafe');
            console.log(n2+" 나왔습니다");
        });
    }
</script>
</body>

<head>
<style>
</style>
</head>
<body>
    <div class="di">
        <h2>커피 주문</h2>
        <div class="di2">
        <h1 data-price='4500' data-cafe="아이스아메리카노">아이스아메리카노</h1>
        <h1 data-price='5000' data-cafe="카푸치노">카푸치노</h1>
        <h1 data-price='7000' data-cafe="스무디">스무디</h1>
        </div>
        <p> <span id="order">메뉴 없음</span>
            <span id="price">0</span>원
        </p>
    </div>
<script>
    let n=document.querySelectorAll(".di2 h1"); //h1 3개
    let n2=document.getElementById('order');
    let n3=document.getElementById('price');

    for(let i=0;i<n.length;i++) {
        n[i].addEventListener('click',function() {
            let menu=this.dataset.cafe;    // 선택한 카페메뉴
            let price=this.dataset.price;  // 선택한 카페가격

            n2.textContent=menu;
            n3.textContent=price;
        })
    }
</script>
</body>

 

 

<body>
<script>
    //String().padStart(자릿수, 문자열);
    let n=String(1).padStart(3,'0');
    document.write(n+"<br>");

    let m=String(1).padStart(2,'0');
    document.write(m);
</script>
</body>

[ 복습 ]

<!DOCTYPE html>
<head>
	<style>
        .incorrect{
            text-decoration: line-through;
        }
	</style>
</head>
<body>
    <form name="math">
		<label for="1">5*3</label><input type="text" id="1"><br>
        <label for="2">1+2*3</label><input type="text" id="2"><br>
        <label for="3">12*2</label><input type="text" id="3"><br>
		<button type="button" id="ch">결과</button>
	</form>
</body>
    <!-- 실제 답과 내가 입력한 답이 맞는 지 확인해서 틀리면 수식에 취소선, 맞은 답의 개수 출력 -->
	<script>
       document.getElementById('ch').addEventListener('click', function() {
            let answers = [15, 7, 24]; // 각 문제의 실제 답

            let input1 = parseInt(document.getElementById('1').value); // 첫 번째 입력값
            let input2 = parseInt(document.getElementById('2').value); // 두 번째 입력값
            let input3 = parseInt(document.getElementById('3').value); // 세 번째 입력값

            let correctCount = 0; // 맞은 답의 개수

            // 첫 번째 문제의 입력값과 실제 답을 비교하여 결과 출력
            if (input1 === answers[0]) {
                document.getElementById('1').style.textDecoration = '';
                correctCount++;
            } else {
                document.getElementById('1').style.textDecoration = 'line-through';
            }

            // 두 번째 문제의 입력값과 실제 답을 비교하여 결과 출력
            if (input2 === answers[1]) {
                document.getElementById('2').style.textDecoration = '';
                correctCount++;
            } else {
                document.getElementById('2').style.textDecoration = 'line-through';
            }

            // 세 번째 문제의 입력값과 실제 답을 비교하여 결과 출력
            if (input3 === answers[2]) {
                document.getElementById('3').style.textDecoration = '';
                correctCount++;
            } else {
                document.getElementById('3').style.textDecoration = 'line-through';
            }

            // 맞은 답의 개수 출력
            alert("맞은 답의 개수: " + correctCount);
        });
	</script>

</html>

<!DOCTYPE html>
<head>
	<style>
        .di{
            border-radius: 10px;
            width: 300px;
            box-shadow: 0 0 20px palevioletred;
            padding: 20px;
        }
        #me .di2{
            display: flex;
            margin: 10px 0;
        }
        #me .di2 label {
            flex: 1; /* flex-grow:1 채우는작업, flex-shrink:1 줄어드는작업, flex-basis:0 기본에맞추는작업 */
        }
        #me .di2 input {
            border: 1px solid gainsboro;
            border-radius: 5px;
            padding: 5px;
            flex: 3; /* input text 너비 넓어짐 */
        }
        #me button{
            width: 100%;
            border: none;
            cursor: pointer;
        }
	</style>
</head>
<body>
	<div class="di">
		<h2>정보입력</h2>
	<form id="me" name="test" class="t">
		<div class="di2">
			<label for="username">이름</label>
			<input type="text" id="username" name="username">
		</div>	
		<div class="di2">
			<label for="addr">주소</label>
			<input type="text" id="addr" name="addr">
		</div>	
		<input type="submit" value="정보입력">
	</form>
    </div>
</body>
	<script>
        let n=document.getElementById('me');
        n.onsubmit=function() {
            let n2=document.createElement('p');
            n2.textContent=this.username.value + ' , ' + this.addr.value;
            // p태그에 입력한 이름, 주소 들어감

            n.appendChild(n2);

            this.username.value='';
            this.addr.value='';
            return false;
        }
	</script>

</html>

<!DOCTYPE html>
<head>
	<style>

	</style>
</head>
<body>
    <form name="f">
		<p>수 입력</p>
		<input type="number" name="num" id="num" min="1" max="100" required>
		<button type="button" id="ch">확인</button>
	</form>
	<div id="di"></div>
</body>
    <!-- 유효성 검사 -->
	<script>
        let n=document.getElementById('num');
        let n2=document.getElementById('ch');
        let n3=document.getElementById('di');

        n2.addEventListener('click', function() {
            if(n.checkValidity()) { // 입력요소에 유효한 데이터면 true, 아니면 false
                n3.innerHTML='유효한 데이터임';
            }
            else{ // 유효성이 거짓일 경우 메시지 띄우기 
                n3.innerHTML=n.validationMessage;
            }
        });
	</script>

</html>

<!DOCTYPE html>
<head>
    <script>
        function addr() { // 일반함수
            result=document.getElementById("addr"); // 저장을 누르면 내가 쓴 이름과 전화번호가 <ul id="addr">에 삽입되게 즉, ul 영역

            // 내가 text에 넣은 값 (이름, 전화번호)
            // ~~~.value : input 태그 안에 넣은 값을 가져올 때
            add=document.getElementsByName("aa")[0].value+','+
            document.getElementsByName('tel')[0].value; // input type에 name 준거, 배열이 들어가야 함

            a=document.createElement("li");
            b=document.createTextNode(add);

            // <li>길동 010-1111-1111 </li>
            a.appendChild(b); // li에 내가 입력한 이름, 전화번호 들어간다
            result.appendChild(a); // ul에 li 들어간다.
        }
         function re() {
            document.getElementById("addr").innerHTML=""; //초기화
         }
    </script>    
</head>
<body> 
    이름: <input type="text" name="aa"><br>
    전화번호: <input type="tel" name="tel"><br>
    <input type="submit" value="저장" onclick="addr()">
    <input type="reset" value="리셋" onclick="re()">
    <ul id="addr">

    </ul>
</body>

</html>
<!DOCTYPE html>
<head>
    <script>
        function ch() {
            let n=document.getElementById("java"); // span태그 영역
            n.style.color="black";
            n.style.fontSize="30px";
            n.style.display="block";
            n.style.border="3px dotted deeppink";
        }
    </script>    
</head>
<body> 
    <!-- 인라인블록 안에 블록태그가 들어갈 순 없음 !!! -->
    <p style="color: aqua;">자바
        <span id="java" style="color: green;">스크립트</span>
    </p>
    <input type="button" value="버튼" onclick="ch()"> <!-- 버튼을 눌렀을 때에 대한 이벤트 처리 연습 -->
</body>

</html>
<!DOCTYPE html>
<head>
    <script>
        function on() {
            let m=null;
            let n=document.getElementsByName("city"); // n[0], n[1], n[2]
            for(let i=0;i<n.length;i++) {
                if(n[i].checked==true)
                m=n[i];
            }
            if(m!=null) 
                alert(m.value+"선택했다");
            else 
                alert('아무것도 선택 안함');
            }
        
    </script>    
</head>
<body> 
    <form>
        <input type="radio" name="city" value="seoul">서울
        <input type="radio" name="city" value="busan">부산
        <input type="radio" name="city" value="chunchon">춘천
        <input type="button" value="체크" onclick="on()">
    </form>
</body>

</html>
<!DOCTYPE html>
<head>
    <script>
        function score(n) {
            let sum=0;
            if(n.checked) {
                sum+=parseInt(n.value);  // 체크박스의 value 값
            }
            document.getElementById("tot").value=sum;
        }
    </script>    
</head>
<body> 
    <form>
        <input type="checkbox" name="ch" value="80" onclick="score(this)">자바
        <input type="checkbox" name="ch" value="100" onclick="score(this)">DB
        <input type="checkbox" name="ch" value="90" onclick="score(this)">html
        총합 <input type="text" id="tot" value="0">
    </form>
</body>

</html>
구구단을 출력하는 gugu()함수를 만들어 1~9 사이의 수를 입력받아 구구단을 출력하는 웹 페이지를 작성해라.

<!DOCTYPE html>
<head>
    
</head>
<body> 
    <!--구구단을 출력하는 gugu()함수를 만들어 1~9 사이의 수를 입력받아 구구단을 출력하는 웹 페이지를 작성해라. -->
</body>
<script>
    let n=prompt('1~9사이의 숫자를 입력하시오')
    function gugu() {
    for(let i=1;i<=n;i++) {
        for(let j=1;j<=9;j++) {
        if(n==1) {
            document.write(i + '*' + j + '=' + (i*j)+'<br>1');
        }
    }
}
    }
</script>    
</html>

[ 이론 ]

[ 문서 객체 모델(DOM : Document Object Model) ]

   HTML 문서를 조작하고 접근하는 표준화된 방법을 정의함,

   자바스크립트를 이용하여 웬 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

   DOM 객체는 랜더링 문제 때문에 <body>태그 제일 끝에 마지막 부분에 위치해야함 ! 아니면 출력 안 될 수도 있음 !!

DOM을 구성하는 기본 원칙
1. 모든 HTML 태그는 요소(element) 노드이다.
2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드이다.
3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다.
4. 주석은 주석(commit) 노드이다.

 

[ DOM 요소에 접근하고 속성 가져오기 ]

웹 문서에서 사용한 여러 이미지 가운데 하나만 골라서 크기를 바꾸려면 콕 집어 지정할 수 있어야 한다. 이렇게 웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다'고 한다. 

 

[ DOM에 접근하기 ]

※ id 선택자로 접근하는 getElementById() 메서드 : HTML 태그의 id 속성은 HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자이다.  / 요소명.getElementById("id명"); 

※ class 선택자로 DOM 요소에 접근하기 : getElementByClassName() 메서드는 지정한 class 선택자 이름이 들어있는 DOM 요소에 접근한다.  / 요소명.getElementsByClassName("class명");

※ 태그 이름으로 접근하는 getElementsByTagName() : class나 id를 지정하지 않은 DOM요소에 접근하려면 태그를 이용해야한다.  / 요소명.getElementsByTagName("태그명"); 

※ 다양한 방법으로 접근 하는 querySelector(), querySelectorAll() 메서드 : 위에서 살펴본 getElementById("id명"); getElementsByClassName("class명"); getElementsByTagName("태그명"); 메서드의 반환값은 HTMLElement 객체이다.

DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하려면  querySelector(), querySelectorAll() 메서드를 사용해야 한다.

또한 쿼리셀렉터는 배열로 사용할 수 없다. (위에 세개 + querySelectorAll()은 배열로 접근 가능 쿼리만 불가능 !! )

 

[ 웹 요소의 내용을 수정하는 innerText, innerHTML ]

자바스크립트에서는 웹 요소의 내용도 수정할 수 있다. 가장 쉬운 방법은 innerText 프로퍼티나 innerHTML 프로퍼티를 이용한다. innerText 프로퍼피는 텍스트 내용을 표시하고, innerHTML 프로퍼티는 HTML 태그까지 반영하요 표시한다.

요소명.innerText = 내용;

요소명.innerHTML = 내용;

 

[ 속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드 ]

웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다. 이때 속성에 접근하려면 getAttribute() 메서드를 사용하고, 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용한다.

 

[ DOM에서 노드 추가&삭제하기 ]

웹 문서에서 처음 화면에는 내용이 보이지 않다가 클릭이나 이벤트가 발생하면 내용이 나타나는 경우가 있다. 이러한 동작은 SCC display 속성을 사용해서 만들 수도 있지만 DOM 트리에 새로운 노드를 추가하는 방법도 있다. 이때 주의할 점은, 노드를 추가하면 단순히 노드뿐 아니라 텍스트와 속성 노드도 함께 추가해야 한다는 것이다.

 

[ 노드 리스트란 ]

DOM에서 새로운 노드를 만들어 추가하러가 삭제하려면 노드리스트(node list)를 사용해야 한다.

 

[ 텍스트 노드를 사용하는 새로운 요소 추가하기 ]

1. 요소 노드 만들기 - createElement() 메서드 : document.createElement(노드명);

2. 텍스트 노드 만들기 - createTextNode() 메서드 : document.createTextNode(텍스);

3. 자식 노드 연결하기 - appendChild() 메서드 : 부모노드.appendChild(자식노드)

4. 전체 소스 코드 완성하기 

 

[ 속성값이 있는 새로운 요소 추가하기 ]

1. 요소 노드 만들기 - createElement() 메서드

2. 속성 노드 만들기 - createAttribute() 메서드

3. 속성 노드 연결하기 - setAttributeNode() 메서드

4. 자식 노드 연결하기 - appendChild() 메서드

5. 전체 소스 코드 완성하기 

 

[ 노드 삭제하기 ]

DOM 트리에서 특정 노드를 삭제하는 방법

※ parentNode 프로퍼티 : DOM트리의 노드는 바로 삭제할 수 없으므로 먼저 부모 노드에 접근해야 한다.

                                          그러려면 삭제할 노드의 부모 노드를 찾아가는 방법을 알아야 한다. 노드.parentNode;

※ removeChild() 메서드 : 자식 노드를 삭제하는 역할 부모노드.removeChile(자식노드);

 

[ DOM에서 이벤트 처리하기 ]

웹 문서에서 이벤트가 발생하면 이벤트 처리기(event handler)를 연결해야 한다. HTML 태그에서 이벤트 처리기를 연결할 수도 있지만 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에는 적합하지 않다. 이럴때 DOM에서 이벤트 처리기와 연결하면 HTML 태그와 스크립트 소스를 분리할 수 있다. 

 

[ DOM 요소에 함수 직접 연결하기 ]

이벤트 처리기 함수가 간단하면 DOM 요소에 직접 연결할 수 있다.

 

[ 함수 이름을 사용해 연결하기 ]

이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있다. 이 경우에는 함수 이름 다음에 괄호(())를 추가하지 않는다.

 

[ DOM의 event 객체 알아보기 ]

DOM에는 이벤트 정보를 저장하는 event 객체가 있다. 이 객체에는 웹 문서에서 이븐테가 발샹한 요소가 무었인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다. 

 

[ addEventListener() 메서드 사용하기 ]

event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있다. addEventListener() 메서드는 끝에 세미콜론(;)을 꼭 붙여야 한다. 요소.addEventListener(에벤트, 함수, 캡쳐 여부);

 

 

[ DOM 문서 객체 이벤트 ]

1) 문서객체.on이벤트타입명 = 이벤트핸들러;

     ex) n.onclick=function();

           n.onclick=ch;

2) 문서객체.addEventListener("이벤트타입",콜백함수);

     ex) n.addEventListener('click',function(){});

 

3) 문서객체.removeEventListener('이벤트타입',콜백함수);

 

[ JavaScript 이벤트 종류 ]

1) 마우스 이벤트 (click, dbclick, mouseover, mouseout, mousemove...)

2) 키 이벤트 (keydown, keyup, keypress...)

3) 로드 이벤트 (load, resize, scroll...)

4) 폼 이벤트 (focus, blur, change, submit, reset, select)

    change : 요소에 값이 변경 되었을 때

    submit ; submit 버튼을 눌렀을 때 이벤트 발생

    select : input, textarea 요소 안의 텍스트를 선택했을 때 발생

 

[ HTML DOM Node ]

※ node란 : js에서 html 모든 요소를 말한다. ( window -> document .. 모두를 말함 )

※ 최상단 Node : window -> document-> html -> body

                            -> (이 이후로는 짜기 나름) -> (예를들어) table -> t.body -> tr -> td

 document -> (문서노드)   html -> (루트노드)  <img src, width=400, height=400> src, width, height -> (속성노드)

 

[ JavaScript Node 폼 접근 - document.폼요소.요소네임 ]

     ※폼에 접근하는 3가지 방법 
         - document.폼네임.요소네임  =>  주로 많이 이용
         - document.forms['폼네임'].elements['요소네임']
         - document.forms['폼네임']['요소네임']

 

[ dataset속성 (data- 속성) ]

ex) data-속성='값;

728x90

'네이버 클라우드 부트캠프 > 복습 정리' 카테고리의 다른 글

33일차 Java [ Gson, Json, jQuery ]  (0) 2024.04.05
30~32일차 JavaScript [ 코드 복습 ]  (0) 2024.04.02
28일차 JavaScript [ 객체, 내장객체 ]  (0) 2024.03.29
27일차 JavaScript [ 출력, 함수 ]  (0) 2024.03.28
26일차 CSS [ 배치, 플렉스 박스 ]  (0) 2024.03.27
'네이버 클라우드 부트캠프/복습 정리' Related Articles more