dukDukz

2021.03.24 JS에 대해 본문

웹 개발/JAVASCRIPT

2021.03.24 JS에 대해

헤일리_HJ 2021. 3. 24. 11:06

 

developer.mozilla.org/ko/docs/Web/API/Document

 

1.  변수, 함수의 타입 (+함수에 변수를 지정하는 법 : return)

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*  1. 변수의 타입
        ingoo ="1";
        ingoo2 = 1;
        ingoo3 = new Date();            //data type : object 

        console.log(typeof(ingoo));
        console.log(typeof(ingoo2));
        console.log(typeof(ingoo3));
        */
       /***************************************************************************/

        /* 2. 함수의 동작

        // 함수는 호출 시에만 동작한다.
        function sum(a,b,c){        //함수를 만들고 각각 3개의 변수를 선언
            console.log(a+b+c);
        }

        // setInterval() 과 같은 모양 - 함수 호출
        sum(1,2,3);     // a=1, b=2, c=3

        console.log((sum(1,2,3))); 
        
        a = sum(1,2,3); //이건 불가능 sum(1,2,3)가 datatype이 없기 때문에 a에 저장이 불가능함
        */


        /**************************************************************************/


        /*3. return 을 쓰는 경우
        function sum(a,b,c){        //이걸 해결하기 위해 return을 씀 - return은 어떤 값(데이터 타입)까지만 만들어준다.
            return a+b+c;
        }
        a = sum(1,2,3);
        console.log(a);
        console.log(typeof(a));     // type of a : number
        */

        /*******************************************************************************/
        
        
        /* 목표 : 사각형의 넓이를 구하는 함수 만들기*/
        // 세로가 10~1까지 가로가 10~1까지 있는 각각의 넒이를 구하라

        /*
        function box(width, height){
            return width*height;        // return은 함수의 결과 값을 가지고만 있는거다.
        }

        box1 = box(10,10);
        box2 = box(9,9);
        box3 = box(8,8);
        box4 = box(7,7);
        box5 = box(6,6);
        box6 = box(5,5);
        box7 = box(4,4);
        box8 = box(3,3);
        box9 = box(2,2);
        box10 = box(1,1);

        console.log(box1);
        console.log(box2);
        console.log(box3);
        console.log(box4);
        console.log(box5);
        console.log(box6);
        console.log(box7);
        console.log(box8);
        console.log(box9);
        console.log(box10);
        */

        
    </script>
</head>
<body>
    
</body>
</html>

 

 

 

 

 

 

2. 객체란 무엇인가? Object

 

Object 안에 3개의 type 이 있는데 1. Array 2. function 3. Object

www.codingfactory.net/10436

 

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <div class="na1">

        </div>
    </div>

    <div id="parent-id">
        <p>hello world 1</p>
        <p class="test">hello world 2</p>
        <p class="test">hello world 3</p>
        <p>hello world 3</p>
        <p>hello world 4</p>
    </div>

    <input id = "btn2" type="button" >
    <button id= "btn3"></button>

    <script type="text/javascript">
       
       div = document.querySelector('#root');      // document 객체 안에서 querySelector 이 동작을 실행함 string으로 가져옴
        console.log(typeof(div));                   //object
        console.log(div);

        //작성을 위한 문서 스트림을 엽니다.  window.open 과 같은 기능
        
        document.open('https://naver.com','id','width="400" height="300"');          //팝업 허용하면 열림                                                                                                                                                                                                                                                                                                                
        


        var get_class = document.getElementsByClassName('na1');
        console.log(get_class);



        var parentDOM = document.getElementById("parent-id");
        console.log(typeof(parentDOM));

        var test = parentDOM.getElementsByClassName("test"); // a list of matching elements, *not* the element itself , 엘리먼트들이 배열 안에 들어 있는 것, 이 자체로는 엘리먼트라고 할 수 없음
        console.log(typeof(test));

        console.log(test); //HTMLCollection[1]

        for (var i = 0; i < test.length; i++) {
            test[i].style.color = 'red';
        }

       

        //정상 출력됨
        delBtn = document.createElement('button');
        btnText = document.createTextNode('버튼1');

        delBtn.onclick = function(){
            alert('warning');
        }
        delBtn.appendChild(btnText);        //버튼 1 텍스트 출력
        parentDOM.appendChild(delBtn);      // 버튼 1 출력

        //정상 출력됨
        Btn = document.createElement('button');
        Btn.innerHTML = '버튼!!';
        Btn.setAttribute('id','btn1');
        parentDOM.appendChild(Btn);


        //btn2 = document.querySelector('#btn2');   // 이건 필요가 없음
        document.querySelector('#btn2').value = "버튼2";

        // value 값 출력 안됨 
        btn3 = document.querySelector('#btn3-1');
        //btn3.setAttribute('value', '버튼3');
        //document.setAttribute("#btn3-1").value = "버튼3";

        //정상 출력됨
        btn4 = document.createElement('input');
        btn4.setAttribute("type","button");
        btn4.setAttribute("value","버튼입니다");
        parentDOM.appendChild(btn4);

        //출력 안됨
        btn5 = document.setAttribute('button');
        btn5.value('버튼5');
        parentDOM.appendChild(btn5);

        //출력 안됨
        btn6 = document.createElement('button');
        btn6.setAttribute("type","button");
        btn6.setAttribute('value','버튼6');
        parentDOM.appendChild(btn6);


    </script>


   
</body>
</html>

 

'웹 개발 > JAVASCRIPT' 카테고리의 다른 글

2021.03.25 경일 배너 만들기 (애니메이션)  (0) 2021.03.25
2021.03.25 JS Document. 의 활용  (0) 2021.03.25
2021.03.23 사진 슬라이드 _ js  (2) 2021.03.23
To do list_ Array 배열 없이 요소 삭제하기  (4) 2021.03.23
2021.03.22 To do list  (0) 2021.03.22
'웹 개발/JAVASCRIPT' Related Articles more