inline CSS
HTML 요소에 직접 CSS를 지정, 선택자가 필요 없다.
JavaScript에서 요소 스타일을 변경할 때 주로 사용, style 태그나 외부 CSS보다 더 높은 우선순위
우선순위 : 요소명 < class < id < inline CSS < !import
같은 가중치(우선순위)에서는 마지막에 선언된 스타일이 적용

<p class="my-class" style="color:red">예시1</p>
<p class="my-class" sytle="backgroundColor:yellow">예시2</p>

반복문

for문

for문을 구성할 때 i의 값은 1씩 자동 증가하기 때문에 배열의 방 번호로 사용하기 좋다

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

for (let i=0; i<배열.length; i++){ }

<예제>

input type="text" id="inputMsg">
<button onclick="change()">전송</button>
<p>p1</p>
<p>p2</p>
<p>p3</p>
    .
    .
    .
<p>p10</p>

<script>
	const change = () => {
		// 입력할 문자열을 담아온다
		const msg = document.querySelector("#inputMsg").value;
		for (let i = 0; i<document.querySelectorAll("p").length; i++) {
			document.querySelectorAll("p")[i].innerText = msg;
		 }
		document.querySelector("#inputMsg").value = "";
	}
</script>

document

HTML 요소 선택

querySelector : ui를 제어할 수 있는 값을 return
찾고 싶은 요소 중 오직 하나를 찾게 하는 명령어

<예제>

<p id="one">abcde</p>

<script>
	document.querySelector("#one").style.backgroundColor = "green";
</script>

querySelectorAll : ui를 제어할 수 있는 값을 return
찾고 싶은 여러 개의 요소를 찾게 하는 명령어

<예제

<p class="my-class">abc</p>
<p class="my-class>def</p>

<script>
	document.querySelectorAll(".my-class")[0].style.color = "red";
	document.querySelectorAll(".my-class")[1].style.color = "red";
</script>

HTML 내용 조작

innerText : 요소의 텍스트 내용을 설정하거나 가져오는 함수

<예제>

<input type="text" id="inputMsg" placeholder="메세지 입력...">
<p id="result">...</p>

<script>
	const msg = document.querySelector("#inputMsg").value;
	document.querySelector("p").innerText = msg;
</script>

HTML 요소 생성

createElement : 페이지 로딩 시점에 없는 요소를 생성

document.createElement("요소명");

<예제>

<input type="text" id="inputMsg" placeholder="메세지 입력...">
<button onclick="add()">추가</button>
<div id="wrapper">
        
</div>

<script>
	/*
		메세지를 입력하고 추가 버튼을 누르면
		1. 입력한 메세지를 읽어와서 변수에 담는다.
		2. p 요소를 새로 만든다.
		3. 새로만든 p 요소에 변수에 담긴 메세지를 innerText로 출력한다.
		4. 새로만든 p 요소를 id가 wrapper인 div의 자자식요소를 추가한다.
	*/

	// 메세지 입력
	const inputMsg =  document.querySelector("#inputMsg");

	let add = () => {
		// 입력 메세지를 변수에 담는다
		const msg = inputMsg.value;
		// p 요소 생성
		const p = document.createElement("p");
		// p 요소에 메세지를 출력
		p.innerText = msg;
		// div 자식 요소에 해당 p 요소를 추가
		document.querySelector("#wrapper").append(p);
		// 입력창 reset
		inputMsg.value = "";
	}
</script>

이벤트 처리

callback 함수

addEventListener : 이벤트를 등록하고 예약하는 함수

document.querySelector(요소).addEventListner(String type으로 event명, function type);

<예제>

<button id="myBtn">클릭</button>
<script>
	// 클릭 이벤트가 일어날 때 마다 함수 호출 	
	document.querySelector("#myBtn").addEventListener("click", ()=>{
		console.log("클릭 성공")
	});
</script>

function 이해

event에 대한 정보를 알고 싶다면 매개변수 선언
만일 매개변수를 선언하면 object가 전달된다

<script>
// 함수를 전달 받아서 내부에서 함수를 호출하는 함수
function useFunc(f){
	f("hi"); // f를 실행하면서 "hi"를 전달
}

// useFunc 함수는 f라는 함수를 전달받아서 실행
useFunc((arg)=>{
	console.log(arg)
});

// 결과적으로 f = (arg) => {console.log(arg);}
</script>

제어문

if

if(조건문){}

<예제>

<input type="text" id="inputName" placeholder="이름 입력...">
<ul id="nameList"></ul>

<script>
	/*
	input 요소에 이름을 입력하고 enter 키를 누르면 입력한 이름이
	ul 요소에 추가 되도록 프로그래밍 하기
	*/
    
	document.querySelector("#inputName").addEventListener("keyup", (e) => {
		// 만일 눌러진 키의 코드값이 13이라면 (Enter 키를 눌렀다면)
		if (e.keyCode == 13) {
			// 입력한 이름을 읽어온다.
			const name = document.querySelector("#inputName").value;
			// li 요소를 만들어서
			const li = document.createElement("li");
			// innerText로 입력한 이름을 출력하고
			li.innerText = name;
			// ul의 자식 요소로 추가하기
			document.querySelector("#nameList").append(li);
			// 입력창 초기화
			document.querySelector("#inputName").value = "";
		}
	});
</script>