2023.03.31 객체, DOM

함수 

return문 뒤에는 아무것도 올 수 없다. 마지막 문장이라고 생각하자.

 

ex)

function add2(){

         return 1+2;

}

let result = add2(); // 3이라는 결과를 담아줄 공간 result 선언.

return이 없으면 결과값을 되돌려주지 않으니까 undefined 나옴.

 

출력문(console.log)은 return이 없는 함수...

 

---

arguments 객체

함수의 정의보다 더 많은 매개변수를 전달받을때,

매개변수에 대입되지 못한 데이터들을 사용할 수 있다.

배열과 흡사한 구조를 가지고 있다.(거의 배열이라고 봐도 무방함)

그런데 타입은 배열이 아님.

 

        function add5(){

            console.log(arguments);

            let sum = 0;

            for(let i=0; i <arguments.length; i++){

                sum = sum + arguments[i];

            }

            console.log("arguments를 이용한 매개변수 누적합 : ",sum);

        }

        add5(5,4,3,2,1);

---

 

   JS의 객체 - js를 이루고있는 object

    <script>

자바스크립트의 객체

자바스크립트의 모든 개념들이 객체에 포함된다고 봐도 무방할정도로 범위가 넓다.

프로퍼티(변수)와 메소드(함수)의 집합체

객체의 형태{}를 JS의 객체로 표현한다.

let 객체이름 = { 프로퍼티이름:값 , 프로퍼티이름:함수 }

객체 생성 - 리터럴 표기를 이용한 객체 생성

        let person = {

            name:"홍길동" ,

            birth:"2023-03-31",

            bloodType:"O형",

            pId : 12345,

            eat:function(){

                return "밥을 먹는다.";

            }

        }

객체안에 있는 프로퍼티 사용 2가지 방법

1. 객체변수명.프로퍼티이름;

2. 객체변수명['프로퍼티이름'];

        console.log("person의 이름 : ",person.name);

        console.log("이름은 : ",person['name']);

        // 객체안에 정의된 메서드(프로퍼티) 사용

        // 객체변수명.메서드명();

        console.log("현재 홍길동은 : ",person.eat());

        // 객체생성 - 생성자함수를 통한 생성방법

        function human(name,birth,bloodType){

            //함수내부에서 this키워드를 이용하면 해당 메소드를 포함하는 객체를 뜻한다.

            this.name = name;

            this.birth = birth;

            this.bloodType = bloodType;

        }

        // 생성자함수를 이용하여 객체 생성시 new연산자를 사용해야한다.

        let man = new human("이순신",20230401,"A형");

        console.log("생성자함수를 이용한 man생성 : ",man);

        // 객체의 프로퍼티에 접근하여 데이터 수정

        let dog = {

            name:"송이",

            family:"비숑",

            age:4

        }

        dog.age = 5; // 속성 수정

        console.log(dog);

       

        dog.color = "흰색"; // 속성 추가

        console.log(dog);

        delete dog.family; // 속성 삭제

        console.log(dog);

        // 반복문을 이용한 속성제어

        let food = {

            pizza:'피자',

            chicken:'치킨',

            pasta:"파스타"

        }

        for(let key in food){

            console.log("for in을 사용한 객체 제어 : ",key);

        }

        // for/of 반복문은 반복되는 인덱스가 있을때만 사용가능 - 객체에서 사용은 안되겠다.

        // for(let value of food){

        //     console.log("for of 를 이용한 객체 제어 : ",value);

        // }

---

JS의 DOM조작

<p></p>

    <p id="secondP"></p>

    <script>

js를 활용한 DOM조작(html 조작)

dom : document object model

document객체와 관련된 집합체

 

DOM객체 : JS로 HTML의 태그요소들을 이용할수있도록 객체로 만든것.

        console.log(document.head); // document객체의 head 프로퍼티를 조회

        console.log(document.title);

 

• js에서 태그요소를 선택하기 위한 함수 - 배열 형태로 가져옴
• 반복문으로 하나씩 제어해야함

html안에 있는 모든 p태그를 가져온다. 

        let pTag = document.getElementsByTagName("태그이름");

        console.log(pTag);

        for(let i = 0; i <pTag.length; i++){

            pTag[i].innerText = "html 조작";

        }

 

• 특정 아이디값을 가지는 html요소에 접근하는 함수 - 배열 형태X
• 단독으로 하나만 가져오기 때문에 html요소를 직접 제어가능

        let secondP = document.getElementById("아이디이름");

        console.log(secondP);

        //(배열로 가져오지 않아서 반복문 없이 직접 조작할 수 있다. )

        secondP.innerText = "아이디값을 조회하여 수정";

 

 

• 특정 class 선택자 - 배열 형식으로 가져옴.
• 반복문으로 하나씩 제어해야함.

          document.getElementsByClassName('클래스이름')

 

• 위의 선택자를 전부 사용가능한  함수

• document.querySelector('css선택자'); : 해당 선택자 하나만 반환
• document.querySelectorAll('css선택자'); : 해당 선택자를 전부 반환(배열형태로) - 반복문으로 제어가 가능하죠

 

---

 

 

       

        // html에 요소를 생성하는 방법 - 1번

        // innerHTML로 작성하면 새롭게 페이지를 작성한다. (기존에 있었던 태그들 지운상태에서 새로 씀.)

        // document.body.innerHTML = `<h1>첫번째 HTML 요소 생성</h1>`;

 

        // html에 요소를 생성하는 방법 - 2번

        // document.createElement('태그명'); - 특정태그를 생성해준다.

        let h1 = document.createElement('h1'); // 특정 태그 생성

        h1.innerText = "두번째 HTML 요소 생성"; // 태그의 텍스트를 추가(수정)

        document.body.appendChild(h1); //body태그에 h1태그가 추가된다.

 

        // html에 요소를 생성하는 방법 - 3번

        // document.write('문자열') - 그냥 문자열 자체를 추가해준다.

         // document.write('<태그>문자열</태그>') - 특정태그도 같이 생성해서 추가해준다.

        document.write('<h3>세번째 HTML 요소 추가</h3>');

       

        //1번은 잘 사용x 2번 3번 주로 사용.

 

        // js의 dom조작을 활용하여 구구단을  html에 생성해봅시다.

        /*

            ------2단 시작------

            2 x 1 = 2

            2 x 2 = 4

            .

            .

            .

            9단까지

        */

         

         function gugudan(){

            for(i=1;i<10;i++){

            document.write(`<h3>------${i}단 시작------</h3>`);

                for(t=1;t<10;t++){

                    document.write(`<p>${i} x ${t} = ${i*t}</p>`);

                }      

            }

            }

            gugudan();

---

<!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>JS의 DOM조작</title>

    </head>

    <body>

        <p></p>

        <p id="secondP">두번째p태그</p>

        <p class="thirdP"></p>

        <!-- html내부에서 onclick 속성을 이용하면 클릭이벤트를 추가할 수 있고,

            속성의 값에는 우리가 생성한 함수를 호출할 수 있다. -->

        <button onclick="click_test()">클릭테스트</button>

        <button onclick="addTodo()">할일추가</button>

        <button onclick="removeTodo()">할일삭제</button>

        <script>

        //js를 활용한 DOM조작(html조작)2

        // 태그선택함수,id선택함수,class선택함수를 간편하게 이용할 수 있는 함수

        // document.querySelector('css선택자') - 특정선택자 하나를 가져오는 함수

        // 자주 사용되는 css선택자

        /*

            태그 선택자 : 태그이름

            아이디 선택자 : #아이디이름

            클래스 선택자 : .클래스이름

            부모, 자식 선택자 : 선택자1 선택자2

       

        */

       // 태그중에서 첫번째 태그를 선택해서 가져온다.

        let tagP = document.querySelector('p');

        console.log(tagP);

        let secondP = document.querySelector('#secondP');

        console.log(secondP);

        let thirdP = document.querySelector('.thirdP');

        console.log(thirdP);

        // 해당 선택자를 가지는 태그를 전부 가져오는 함수

        // document.querySelectorAll('선택자'); -> 배열로 가져온다.

        let tagPs = document.querySelectorAll('p');

        console.log(tagPs);

---

dom조작을 이용한 css속성 제어

해당 dom객체의 style 속성을 제어할 수 있다.

 

•         tagP.style.color = 'red';
•         tagP.innerText = 'dom조작을 이용한 css속성 제어';
•         tagP.style.textAlign = 'center';
•         tagP.style.fontSize = '20px';

        // 부모태그에 자식태그 추가 - appendChild()함수

        let tagUl = document.createElement('ul'); //ul태그를 생성

        let tagLi_1 = document.createElement('li');//li태그를 생성

        tagLi_1.innerText = "리스트1번"; //li태그에 텍스트 추가

        let tagLi_2 = document.createElement('li');// 두번째 li태그를 생성

        tagLi_2.innerText = "리스트2번"; //두번째 li태그에 텍스트 추가

       

        tagUl.appendChild(tagLi_1); //ul태그에 li태그를 추가

        tagUl.appendChild(tagLi_2); //ul태그에 두번째 li태그를 추가

       

        document.body.appendChild(tagUl); //body태그에 ul태그를 추가

        let tagUl_2 = document.createElement('ul'); //두번째 ul태그 생성

        document.body.appendChild(tagUl_2); //body태그에 두번째 ul태그 적용(추가)

        //반복문을 사용하여 html요소 대량 생성

        for(let i = 1; i <=10; i++){

            let li = document.createElement('li');

            li.innerText = `할일 추가${i}`;

            li.className = "todos";

            tagUl_2.appendChild(li);

        }

        //dom조작을 활용한 메모장 만들기. - html에 함수(이벤트) 추가하기.

        // 할일 등록하는 함수 생성

        function click_test(){

            alert('버튼이 클릭 되었습니다.');

        }

        // 할일을 추가하는 함수를 생성하고, 위에서 만들어놓은 할일 추가 버튼을 클릭했을때

        // 할일이 추가되도록 만들어 봅시다.

            function addTodo(){

                let todoList = document.querySelectorAll('.todos');

                // console.log(todoList);

                let li = document.createElement('li');

                li.innerText = `할일추가${todoList.length+1}`;

                li.className = "todos";

                tagUl_2.appendChild(li);

               

               

            }

           

        //dom조작을 활용한 html요소 제거 - removeChild()

        //삭제할 타겟 html을 가져온다.

        let removeTarget = document.querySelector('#secondP');

        // 자식요소중에 하나를 삭제한다.

        // 부모객체.removeChild(자식개체);

        document.body.removeChild(removeTarget);

        //removeChild함수를 이용하여 할일목록 중에서 가장 마지막 요소부터 차례로 제거하는 버튼과,기능을

        // 만들어봅시다.

        //할일삭제 버튼 생성

        //할일삭제 함수 생성

        //버튼,함수를 연동

       function removeTodo(){

    //     let todoList = document.querySelectorAll('.todos');

    //     let removeTarget = todoList[todoList.length-1];

    //     tagUl_2.removeChild(removeTarget);

    //    }

        //현재 removeTodo함수는 할일목록이 전부 삭제된 상태에서

        //삭제버튼을 다시 누르게되면 console창에 에러가 발생된다.

        //해당 에러가 출력이 안되도록 수정을 해봅시다.

       

        //클래스이름이 todos라고 되어있는 요소를 모두 가져와서 todoList에 저장.

        let todoList = document.querySelectorAll('.todos');

        // 배열.length -1 == 배열의 마지막인덱스값

        let removeTarget = todoList[todoList.length-1];

        //우리가 해당페이지에서 tagUl_2이라는 변수를 만들었기때문에

        //부모태그를 손쉽게 얻을 수 있었다.

        if( (todoList.length)> 0 ){

        tagUl_2.removeChild(removeTarget);

    }else{

        alert("더이상 삭제할 할일이 없습니다.")

    }  

    }

       

        //사용자에게 할일을 입력받아서 목록에 추가

        //삭제기능은 내가 원하는 할일을 삭제

        //-할일입력을 받아서 해당 할일을 삭제하도록구현.    

 

    </script>

    </body>

</html>

---