11일차 내용 정리

채공부·2025년 6월 9일

10일차 내용 복습

document 객체

querySelector & querySelectorAll

문자열로 선택자를 작성
선택자의 문법은 css 선택자의 작성법과 동일

document.querySelector(선택자)
-> object를 return (각각의 문서를 제어할 수 있는 objcet)
document.querySelectorAll(선택자)

-> array를 return

요소명	id	class
button	#one	.one
input	#two	.two
div	.	.
p	.	.
ul	.	.
.	.	.

예시
웹 브라우저가 로딩한 문서 객체 중에서 id가 myBtn인 요소의 참조값 얻어내기

document.querySelector("#myBtn")

addEventListener

함수를 호출하면서 함수를 전달
적절한 시점에 자동으로 호출

addEventListener(이벤트명, 콜백함수);
			 string type  function type

예시

<div id="one"></div>

<script>
documnet.querySelector("#one").addEventListener("mousemove"(e)=>{})
// -> e : call back 함수의 매개변수의 event object가 전달
</script>

createElement

새로 만든 요소 객체를 return
생성했다고 바로 화면 출력되지 않고 body 안에 넣어야 화면에 출력

document.createElement(만들요소명)

window의 함수

setTimeout

(1000*1) 1000분의 1초 단위
페이지 로딩된 후 해당 시간 경과하면 호출

setTimeout(함수, 시간)
				1000*1 : 1000분의 1초 단위 -> 10초

setInterval

해당 시간이 경과할 때마다 주기적으로 호출

setInterval(함수, 시간)

반복문

for문

for(초기식; 조건식;  증감식;)

조건식 : 반복 가능한 자료구조를 다룰 때 index 값으로 많이 활용
조건에 숫자 지정보다는 해당 참고하는 배열의 길이로 설정한다면 배열이 수정이 용이 (조건 지정 시 i<5 보다는 i<array명.length)
for문의 제어변수(ex. i) : 각각의 함수에 고유한 값을 가진다

11일차 새로운 내용 시작

array의 저장소와 기능

배열명.length : 배열의 길이 <데이터의 저장소>
배열명.push : 배열의 맨 마지막에 추가하면서 return <기능>
배열명.pop : 배열의 맨 마지막에 있는 걸 삭제하면서 return <기능>
배열명.forEach : 함수를 호출하면서 함수를 전달 callbackfn <기능>
				전달한 즉시 최대 빠르기로 해당 배열의 길이만큼 호출
                매개변수에 배열에 저장된 아이템들이 순서대로 전달
	  .
	  .
	  .
      
더 많은 저장소와 기능이 존재

forEach

매개변수는 즉시 배열의 길이만큼 호출
매개변수에 배열에 저장된 item들이 순서대로 전달

객체.forEach((매개변수) => {});

예시1

<button id="printBtn">출력</button>
<ul id="nameLisg"></ul>

<scripnt>
  const friends = ["유재석", "박명수", "정준하", "정형돈", "노홍철", "하하"];
  
  document.querySelector("#printBtn").addeventListener("click", ()=>{
  	friends.forEach(()=>{
    	const li = createElement("li");
        li.innerTex = li;
        document.querySelector("#nameList").append(li)l
    })
  });
</script>

예시2

<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<button>button5</button>

<script>
	const buttons = document.querySelectorAll("button");
    
    // item : document object type, button의 참조값
    buttons.forEach((item) => {
    	// 함수는 각각의 고유한 매개변수를 가진다
    	item.addEventListener("click", () => {
        	item.innerText = "clicked";
            item.style.color = "red";
            item.style.backgroundColor = "yellow";
            console.log("출력 완료");
        });   
    });
</script>

HTML 내용 조작

innerText : 문자열 출력

innerHTML : HTML로 해석한 결과를 출력

CODE

<div id="wrapper"></div>
<div id="wrapper2"></div>

<script>
	const htmlFormat = `<button>버튼</button>`;

	document.querySelector("#wrapper").innerText = htmlFormat;
	document.querySelector("#wrapper2").innerHTML = htmlFormat;
</script>

RESULT

문자열 생성과 연결

예시

<script>
	// 문자열 만드는 방법 3가지
	const myName = '유재석';    // single quotation
	const yourName = "박명수";  // double quotation
	const ourName = `무한도전`;   // backtixc

	// 문자열 연결
	const result1 = '나의 이름:'+myName;
	const result2 = "너의 이름:"+yourName;
    
	// yourName 변수에 있는 내용을 가리키는 건 불가능
	const result3 = "너의 이름:yourName";
    
	// backtic 안에서 ${} 표현식을 이용하면 문자열을 좀 더 편하게 구성 가능
	const result4 = `우리의 이름:${ourName}`;
</script>

document객체 + window 객체 + 문자열 응용

	<style>
		img {
			width: 100px;
			/*margin-left가 변경될 때 1s(1초) 동안 변경되도록 시간 텀을 두어라
                                      	 ease-out : 부드럽게 변경*/
			transition: margin-left 0.5s ease-out;
        }
    </style>
<body>
	<button id="moveBtn">이동</button><br>
	<button id="reBtn">이전으로</button><br>
	<button id="resetBtn">초기화</button><br>
	<button id="autoBtn">자동 이동</button><br>
    <img id="one" src="https://picsum.photos/id/237/200/300"><br>

    <script>
        let mLeft = 0;
        // 이동 버튼을 누르면 id가 one인 이미지의 왼쪽 마진을 mLeft 변수 안에 들어있는 숫자 만큼 적용해 보세요
        document.querySelector("#moveBtn").addEventListener("click", () => {
            // mLeft 변수에 100을 plus한 값을 대입
            mLeft += 100;
            //  mLeft 안에  있는 값을 이용해서 marginLeft 값에 반영
            document.querySelector("#one").style.marginLeft = `${mLeft}px`;
        });

        // 이전으로 버튼을 누르면 id가 one인 이미지의 왼쪽 마진을 이동 전 마진으로 적용해 보세요
        document.querySelector("#reBtn").addEventListener("click", () => {
            mLeft -= 100;
            document.querySelector("#one").style.marginLeft = `${mLeft}px`;
        });

        // 초기화 버튼을 누르면 id가 one인 이미지의 왼쪽 마진을 0으로 적용해 보세요
        document.querySelector("#resetBtn").addEventListener("click", () => {
            mLeft = 0;
            document.querySelector("#one").style.marginLeft = `${mLeft}px`;
        });

        // 자동으로 일정 시간 간격마다 오른쪽으로 조금씩 이동
                // 1초마다 mLeft를 100씩 증가시켜 이미지에 margin-left로 반영
        document.querySelector("#autoBtn2").addEventListener("click", () => {
            setInterval(() => {
                mTop += 100;
                document.querySelector("#one").style.marginTop = `${mTop}px`;           
            }, 1000*1);
        });
	</script>