본문 바로가기
기록/자바_국비

[배운내용정리] 0122 자바 국비교육_ Javascript

mois 2021. 2. 7. 04:49
728x90

2021년 01월 22일 9시 ~ 15시 30분 zoom으로 수업 진행

 

 

location

<!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 type="text/javascript">
        function test() {
            //location.href = "http://www.google.com";

            //location.replace("http://www.google.com");
            //전 페이지에 대한 기록 x
            //현재 보고있느 페이지를 해당 url페이지로 아예 바꿔버린다고 생각

            location.reload();//새로고침
        }
    </script>
</head>
<body>
    <a href="http://google.com">구글로 이동</a>
    <button onclick="test();">이동</button>
    
</body>
</html>

 

 

자바스크립트로 체크박스 다루기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>checkbox</title>

    <style type="text/css">
        #colorbox{
            width: 320px;
            height: 320px;
            position: relative;
        }
        #red,#yellow,#blue,#black {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            position: absolute;
        }
        
        #yellow{left:160px;}
        #blue{top:160px;}
        #black{left:160px; top:160px;}
    
    </style>
    
    <script type="text/javascript">
    
        function allsel(check){
            var chks = document.getElementsByName("chk");
            for(var i=0; i<chks.length; i++) {
                chks[i].checked = check;
            }
        }
    
        function sel() {
            var chks = document.getElementsByName("chk");
            if(chkChecked(chks)>0) { //하나 이상 체크 되었을때
                for(var i=0; i<chks.length; i++) {
                    if(chks[i].checked) {
                        document.getElementById(chks[i].value).style.backgroundColor=chks[i].value;
                    } else {
                        document.getElementById(chks[i].value).style.backgroundColor="white";
                    }
                }
            } else {
                clearDiv();
            }
    
        }
    
        function chkChecked(chks) {
            var cnt = 0;
            for(var i=0; i<chks.length; i++) {
                if(chks[i].checked) {
                    cnt++;
                }
            }
            return cnt;
        }
    
        function clearDiv() {
            allsel(false);
            document.getElementsByName("all")[0].checked=false;
    
            var colorboxs = document.querySelectorAll("#colorbox > div");
            for(var i=0; i<colorboxs.length; i++) {
                colorboxs[i].style.backgroundColor="white";
            }
        }
    
    </script>

</head>
<body>
    <div id="colorbox">
        <div id="red">red</div>
        <div id="yellow">yellow</div>
        <div id="blue">blue</div>
        <div id="black">black</div>
    </div>
    <div id="base">
            <input type="checkbox" name="all" onclick="allsel(this.checked);">전체선택<br>
            <input type="checkbox" name="chk" value="red">빨강<br>
            <input type="checkbox" name="chk" value="yellow">노랑<br>
            <input type="checkbox" name="chk" value="blue">파랑<br> 
            <input type="checkbox" name="chk" value="black">검정<br> 

            <input type="button" value="선택" onclick="sel();">
            <input type="button" value="초기화" onclick="clearDiv();">

    </div>




</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select</title>

    <script type="text/javascript">
       function show() {
            var food = document.getElementsByName("food")[0];//select 태그가 들어올거임

            //selectedIndex = select 태그에서 현재 선택이 되어있는 option 태그의 인덱스 값을 반환
            var idx = food.selectedIndex;

            var foodVal = food.options[idx].value;
            alert(foodVal);
       }


       function show2() {
           var food = document.getElementsByName("food")[1];
           var str = "";

           for(var i=0; i<food.options.length; ++i) {
               if(food.options[i].selected) {
                   str += food.options[i].value + " ";
               }
           }

           alert(str +"먹고싶다.");

       }
        
    </script>

</head>
<body>
    
    <h1>음식 선택하기</h1>
    <form>
        <select name="food" onchange="show();">
            <option>---선택---</option>
            <option value="제육">제육</option>
            <option value="라면">라면</option>
            <option value="만두">만두</option>
            <option value="호빵">호빵</option>
            <option value="피자">피자</option>
        </select>

        <br><br><br>

        <select name="food" multiple="multiple" size="5">
            <option value="제육">제육</option>
            <option value="라면">라면</option>
            <option value="만두">만두</option>
            <option value="호빵">호빵</option>
            <option value="피자">피자</option>
        </select>

        <input type="button" value="선택" onclick="show2();">
    </form>


</body>
</html>

 

 

자바스크립트 부모 , 자식 탐색하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom</title>

    <script type="text/javascript">
        function searchPar() {
            //선택한 태그의 부모태그를 찾는 함수
            var child02 = document.getElementsByTagName("p")[1];

            var child02Par = child02.parentNode;//child02의 부모 객체를 받아온다.
            console.log(child02Par.nodeName);//child02Par (child02의 부모객체를 받아왔음)의 객체의 이름을 출력 
            child02Par.style.backgroundColor= "coral";
        }

        function searchChi() {
            //선택한 태그의 자식태그를 찾는 함수
            var parent01 = document.getElementsByTagName("div")[0];//elements는 무조건 배열로 전달받기 때문에 순서 정해줘야 함

            var parent01Child = parent01.childNodes;//자식이 하나일지 두개일지 , 여러개인지 모르니까 배열로 넘겨받는다.
                                                    //그럼 이 경우에 p가 3개 들어올거임
            var str = "";
            for(var i=0; i<parent01Child.length; ++i) {
                str += parent01Child[i].nodeName + " ";
            }

            console.log(str);//결과가  #text P #text P #text P #text 이렇게 출력된다.
            //dom의 입장에서 태그와 태그 사이에 텍스트가 들어갈 수 있으니, 텍스트가 들어갈 수 있는 공간 == 빈 공백 자체도 text노드로 관리한다.
            //div태그의 시작부터 종료까지 모든 태그들을 공백없이 붙인 상태에서 -> <div><p>child01</p><p>child02</p><p>child03</p></div>
            // 함수를 실행시키면 #text없이 P만 출력되는 것을 볼 수 있다.

            console.log(parent01Child[5]);
            parent01Child[5].style.backgroundColor="yellow";

        }

    </script>

</head>
<body>
    <h1>부모탐색, 자식탐색</h1>
    <div>
        <p>child01</p>
        <p>child02</p>
        <p>child03</p>
    </div>
    <button onclick="searchPar();">부모탐색</button>
    <button onclick="searchChi();">자식탐색</button>

    
</body>
</html>

 

 

자바스크립트 엘리먼트 생성하기

<!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 type="text/javascript">
        function eleCreate() {
            //엘리먼트 객체 생성 : createElement("String TagName");
            var div = document.createElement("div");
            //<div></div>

            //text 객체 생성 : createTextNode("String text");
            var txt = document.createTextNode("엘리먼트 생성 메소드");
            div.appendChild(txt);
            //<div>엘리먼트 생성 메소드</div>


            //방법 1
            //속성추가 : setAttributeNode(Attr attr);
            //var attr = document.createAttribute("style");
            //style = "";
            //attr.nodeValue = "border:2px solid blue";
            //style = "border:2px solid blue";

            //div.setAttributeNode(attr);
            //<div style = "border:2px solid blue">엘리먼트 생성 메소드</div>



            //방법2
            //속성추가 : setAttribute("attr", "value");
            div.setAttribute("style", "border:2px solid blue");

            document.body.appendChild(div);
        }
    </script>

</head>
<body>
    
    <button onclick="eleCreate();">엘리먼트 생성하기</button>

</body>
</html>

 

 

 

자바스크립트로 img 태그 와 속성을 설정하여 , 이미지 바꾸기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        img, #imgView {
            width: 300px;
            height: 300px;
        }

    </style>

    <script type="text/javascript">
        function createImg() {
            var radios = document.getElementsByName("rdoBtn");
            var radioVal = "image/";

            for(var i=0; i<radios.length; ++i) {
                if(radios[i].checked) {
                    radioVal += radios[i].value;
                    break;
                }
            }

            console.log(radioVal);

            //1. img 태그 생성
            var img = document.createElement("img");
            //<img>

            //2. src 속성을 만들어서 , radioVal 값을 넣어준다.
            img.setAttribute("src", radioVal);

            //3.
            var div = document.getElementById("imgView");
            var chd = document.querySelector("#imgView > img");

            //chd를 방금 생성한 img 로 바꾸자
            div.replaceChild(img, chd);
            
        }   
        
        function deleteImg() {
            var img = document.querySelector("#imgView > img");
            img.setAttribute("src", " ");
        }
        
    </script>
</head>
<body>

    <input type="radio" name="rdoBtn" value="flower1.PNG">그림 1<br>
    <input type="radio" name="rdoBtn" value="flower2.PNG">그림 2<br>
    <input type="radio" name="rdoBtn" value="flower3.PNG">그림 3<br>

    <button onclick="createImg();">이미지 생성하기</button>
    <button onclick="deleteImg();">이미지 삭제하기</button>

    <div id="imgView"><img src=""></div>
</body>
</html>

 

 

자바스크립트 a태그를 이용하여 이미지 전환하기 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        img {
            width: 300px;
            height: 300px;
        }
        a {
            font-size: 30px;
            text-decoration: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            var count = 1;
            var img = document.querySelector("img");
            var as = document.querySelectorAll("a");//a태그 전부 가져오기

            //왼쪽 a태그 클릭
            as[0].onclick = function() {
                console.log(count);
                var imgAlt = img.getAttribute("alt");//alt 속성 가져오기
                if(imgAlt == "flower1") {
                    count = 3;
                    img.setAttribute("alt","flower3");
                    img.setAttribute("src", "image/flower3.PNG");
                }
                else {
                    //img에 alt 속성을 변경
                    img.setAttribute("alt", "flower" + (--count));

                    //img의 src 속성을 변경
                    img.setAttribute("src", "image/flower" + count + ".PNG");
                    
                }

            }

            //오른쪽 a태그 클릭
            as[1].onclick = function() {
                console.log(count);
                var imgAlt = img.getAttribute("alt");
                
                if(imgAlt == "flower3") {
                    count = 1;

                    img.setAttribute("alt", "flower1");
                    img.setAttribute("src", "image/flower1.PNG");
                }
                else {
                    img.setAttribute("alt", "flower" + (++count));
                    img.setAttribute("src", "image/flower" + count + ".PNG");

                }

            }
        }

    </script>
</head>
<body>
    <div>
        <a href="#" id="lt">◁</a>
        <img alt="flower1" src="image/flower1.PNG">
        <a href="#" id="rt">▷</a>
    </div>
</body>
</html>

 

 

자바스크립트 태그 생성, 이동 하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        p {
            border: 1px solid red;
        }

        #test01, #test02 {
            width: 300px;
            height: 300px;
            border: 1px solid blue;
        }
    </style>

    <script type="text/javascript">
        var cnt = 1;
        function addAppend() {
            var fieldset = document.getElementById("addElement");

            var p = document.createElement("p");

            //1.
            //var txt = document.createTextNode("자식태그들 중 마지막에 붙여넣는다");
            //p.appendChild(txt);


            //2.
            p.textContent = "자식태그들 중 마지막에 붙여넣는다";

            fieldset.appendChild(p);

            
        }

        function addBefore() {
            var fieldset = document.getElementById("addElement");
            var newP = document.createElement("p");

            newP.textContent = "엘리먼트의 앞에 붙여 넣는다." + (cnt++);

            var oldDiv = document.querySelector("fieldset > div");

            fieldset.insertBefore(newP, oldDiv);


        }


        function moveElement() {
            var moveEle = document.querySelector("fieldset").children[1];

            var addEle = document.body;
            addEle.appendChild(moveEle);
        }

        function addTest() {
            //test01 태그에 dom test라는 내용을 가진 div 태그 추가
            var getTest01 = document.getElementById("test01");
            
            var div = document.createElement("div");
            div.textContent="dom test";
            
            console.log("addTest");

            getTest01.appendChild(div);
        }

        function moveTest() {
            //test01 태그에 추가된 태그들을 test02로 이동시켜보자
            var test01 = document.querySelector("#test01").children;
            var test02 = document.getElementById("test02");


            test02.appendChild(test01);

        }

    
    </script>
</head>
<body>
    
    <h1>태그 추가하기</h1>
    <button onclick="addAppend();">appendChild()</button>
    
    <button onclick="addBefore();">insertBefore()</button>
    
    <button onclick="moveElement();">appendChild()를 이용한 엘리먼트 이동</button>

    <fieldset id="addElement">
        <legend>부모 태그</legend>
        <div>div태그</div>
    </fieldset>

    <hr>


</body>
</html>
저작자표시 비영리 변경금지

'기록 > 자바_국비' 카테고리의 다른 글

[배운내용정리] 0126 자바 국비교육_ jQuery  (0) 2021.02.08
[배운내용정리] 0125 자바 국비교육_ Javascript_jQuery  (0) 2021.02.07
[배운내용정리] 0121 자바 국비교육_ Javascript  (0) 2021.02.07
[배운내용정리] 0120 자바 국비교육_ Javascript  (0) 2021.02.07
[배운내용정리] 0115 자바 국비교육 _ Javascript  (0) 2021.01.15

'기록/자바_국비' Related Articles

티스토리툴바