2023.08.03(목) 슈퍼코딩 부트캠프 신입연수원 Day4 중간보고

(9/23 수정)

✔ 오늘의 다짐

나는 작지만 소중한 존재입니다.

• 자신을 너무 과대평가하고 있지는 않나요?
• 아니면 너무 스스로를 낮게 평가하진 않나요?
• 타인의 시선을 의식하지 않으려면 무엇이 필요할까요?

​

✔ WHAT TO DO

• 10:00 Daily Scrum
• Day4 입사 가이드 교육
• 27강 JavaScript 응용1-CSS와 이벤트 다루기 ~ 33강 깃허브 업로드 및 netlify로 배포하기 수강

​

✔ 배운 내용 요약 정리

​

• JavaScript로 DOM 조작하기

- time으로 id 지정해 주었을 경우

document.getElementById("time");

document.querySelector("#time");

​

// 태그를 가져오는 방법

const timeElement = document.getElementById("time");

// 태그를 가져오는 다른 방법

const timeElement = document.querySelector("h1");

​

timeElement.style.color = "tomato";

timeElement.innerText = "01:00";

​

- time으로 class 지정해 주었을 경우

document.querySelector(".time");

​

timeElement.addEventListener("동작", 함수);

(해당 동작 실행 시 함수 실행)

​

window.addEventListener("동작", 함수);

도 가능

​

(예시)

function 색깔을_바꿔주는_함수() {

if (timeElement.style.color === "orange") {

timeElement.style.color = "blue";

} else {

timeElement.style.color = "orange";

}

}

timeElement.addEventListener("click", 색깔을_바꿔주는_함수);

​

-> time을 클릭하면 orange로 바뀌고, 한 번 더 클릭하면 blue로 바뀜

​

• 동적인 웹을 위한 JavaScript

setInterval: 주기적 호출

setTimeout: 1회성 호출 (재귀형식으로 setInterval처럼 사용 가능)

​

콘솔창에

new Date()

new Date().getDate() -> 오늘 날짜를 불러옴

getMinutes(), getHours(), getFullYear() 등등

​

padStart(최대숫자, "문자열")

(예시) padStart(2, "0")

padStart는 문자열에만 적용 가능함. 따라서 get Date() 등을 통해 가져온 숫자는 문자열로 바꿔줘야해

(예시) const 분 = new Date().getMinutes().toString();

​

• Wordle 게임 제작