국비교육(22-23)

6일차(1)/javascript 기초 : 동적 요소 만들기(2)

서리/Seori 2022. 10. 13. 14:34

<예제1> (지난예제 수정)

<!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>Step06_createElement.html</title>
    <style>
          /* li 요소에 마우스가 hover 되었을때 적용할 css */
          li:hover{
            background-color: yellow;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>문서 객체 동적으로 만들기</h1>
    <input type="text" id="inputName" placeholder="이름 입력...">
    <button id="addBtn">추가</button>
    <ul>
        <li>바나나</li>
        <li>딸기</li>
        <li>복숭아</li>
    </ul>
    <script>
        /*
            input 요소에 이름을 입력하고 추가 버튼을 누르면
            입력한 이름이 ul에 추가되도록 프로그래밍 해 보세요.

            -hint
            let name=document.querySelector("#inputName").value;

            let a=document.queryElement("li");
            a.innerText="xxx";

            document.querySelector("ul").append(a);
        */

        //추가버튼을 눌렀을때 실행할 함수 등록
        document.querySelector("#addBtn").addEventListener("click", function(){
            appendLi();
        });

        document.querySelector("#inputName").addEventListener("keydown", function(e){
            //만일 엔터키를 눌렀으면
            if(e.keyCode==13){
                appendLi();
            }
        });

        //li를 추가하는 함수
        function appendLi(){
            //1. input 요소에 입력한 이름을 읽어온다.
            let name=document.querySelector("#inputName").value;
            //2. li 요소를 동적으로 만든다.
            let a=document.createElement("li");
            //3. 만든 li요소의 innerText로 1.에서 읽어온 이름을 넣어주고
            a.innerText=name;
            //4. ul요소의 자식요소로 추가하기
            document.querySelector("ul").append(a);
            //5. 입력창 초기화
            document.querySelector("#inputName").value=""; //value에 빈 문자열 넣어주기
            
            //6. 추가해 만든 li요소에 이벤트 리스너 함수 등록하기
            a.addEventListener("click", function(){
                //확인을 누르면 true, 취소를 누르면 false가 리턴된다.
                let isDelete=confirm("삭제 하시겠습니까?");
                //만일 삭제 할거라면
                if(isDelete){
                    //click 이벤트가 일어난 바로 그 요소를 삭제한다.
                    this.remove();
                };
            });
        }

        // 현재(페이지로딩시점) 존재하는 모든 li 요소의 참조값을 배열에 담아둠
        const lis=document.querySelectorAll("li");
        //반복문 돌면서 이벤트 리스너 함수 등록하기
        for(let i=0; i<lis.length; i++){
            lis[i].addEventListener("click", function(){
                //확인을 누르면 true, 취소를 누르면 false가 리턴된다.
                let isDelete=confirm("삭제 하시겠습니까?");
                //만일 삭제 할거라면
                if(isDelete){
                    //click 이벤트가 일어난 바로 그 요소를 삭제한다.
                    this.remove();
                }
            });    
        }        
    </script>
</body>
</html>

- 리스트 추가 기능 + 만들어진 리스트를 클릭하면 삭제하는 버튼 만들고 싶다면.

 

- document.querySelectorAll("li") : 모든 li요소가 들어있는 배열 찾기(콘솔에서 확인)
- 위의 각각의 li를 클릭했을때 이벤트 발생한다면 → eventListener을 모든 li에 넣기

 

const lis=document.querySelectorAll("li");
        lis[0].addEventListener("click", function(){});
        lis[1].addEventListener("click", function(){});
        lis[2].addEventListener("click", function(){});

- lis[n] 으로 반복해서 만든 형태인데, 

for(let i=0; i<lis.length;, i++){
	lis[i].addEventListener("click", function(){});    
};

- for문을 사용하면 이렇게 수정이 가능하다.


하지만 이렇게 하면 페이지 로딩시점이 기준이 되어서, 이후에 추가한 리스트에는 동작하지 않는다.
→ 6. 새로 추가한 li를 대상으로 하는 .addeventlistener 추가.

a.addEventListener("click", function(){
	alert("추가한 li를 클릭했네?") //일단 alert로 넣어봄
});

→ 위와 똑같은 코드인데 한군데 모아놓고 콜하는게 편하지 않을까?

javascript로 프로그래밍하다보면 동일한 코드를 여러군데에서 실행해야 하는 경우가 있다.
그럴 때에는 동일한 여러줄의 코드를 특정 함수 안에 작성하고 그 함수를 콜하는 구조로 변경하는 것이 좋다!

 

function appendLi(){};

li를 추가하는 appendLi(){}; 라는 함수를 만든다.
if안에있는 document.querySelector("ul").append(a); 완전히 동일!!
li를 추가하는 함수를 만든다 appendLi();



[ style 추가 ]
li 요소에 마우스가 올라와있을때 적용(css) 

li:hover{
            background-color: yellow;
            cursor: pointer;
        }

 

lis[i].addEventListener("click", function(){                
	let isDelete=confirm("삭제 하시겠습니까?");
	if(isDelete){
		this.remove();
	};

- 클릭시 confirm 창을 띄우고 확인을 누르면 삭제하는 버튼 만들기
- isDelete 변수 만들어서 if문안에 넣는다.

- this.remove == event.target.remove 와 같다

 

<예제2> 속성 추가하기 (setAttribute) 

<!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>Step06_createElement2.html</title>
</head>
<body>
    <h1>문서 객체 동적으로 만들기</h1>
    <button id="addImage">이미지 추가하기</button>
    <div id="wrapper">
        <img src="images/cat.png" alt="고양이 이미지">
    </div>
    <script>
        document.querySelector("#addImage").addEventListener("click", function(){
            //img 요소를 만들어서 참조값을 a 에 담기
            const a=document.createElement("img");
            //src 속성 추가하기
            a.setAttribute("src", "images/cat.png");
            //alt 속성 추가하기
            a.setAttribute("alt", "고양이 이미지");
            //id가 wrapper인 요소에 img 요소를 추가하기
            document.querySelector("#wrapper").append(a);
        });
    </script>
</body>
</html>

- img이미지를 추가하면서 속성src,alt 함께 추가하기

 

document.querySelector("#wrapper").append(a);

- div의 자식요소로 img 요소를 추가하기

 

.setAttribute(name, value)

- src 속성 추가하기
 a.setAttribute("src", "images/cat.png");
- alt 속성 추가하기
 a.setAttribute("alt", "고양이 이미지");

- console창에서 확인해보면 새로 생겨난 이미지들도 src, alt 속성을 가지고 있는 것을 확인할 수 있다.

 

** 페이지 소스 보기 : 최초에 로딩된 내용
** 검사 - element : 현재 문서의 상태.(js를 통해 조작된 것 포함)

'국비교육(22-23)' 카테고리의 다른 글

7일차(1)/DB_Oracle(1) : 설치 및 기본정보  (0) 2022.10.14
6일차(2)/javascript 기초 : 실습예제  (1) 2022.10.13
5일차(5)/javascript 기초 : 동적 요소 만들기  (0) 2022.10.12
5일차(4)/javascript 기초 : 연산자 operator  (0) 2022.10.12
5일차(3)/javascript 기초 : if, else 문(2)  (0) 2022.10.12

'국비교육(22-23)'의 다른글

  • 현재글6일차(1)/javascript 기초 : 동적 요소 만들기(2)

관련글

댓글

티스토리툴바