본문 바로가기

자바스크립트 기기기초

 (29)
#7.2 Deleting To Dos function deleteToDo(event){ const li = event.target.parentElement;//target:클릭된 html element(button), parentElement-Element의 부모 li.remove(); } function paintToDo(newTodo){ const li = document.createElement("li"); const span = document.createElement("span"); const button = document.createElement("button"); button.innerText = "❌"; button.addEventListener("click",deleteToDo); //button을 클릭하면 event를 얻..
#7.1 Adding ToDos Log In 00:00:00 ​ const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); function paintToDo(newTodo){ const li = document.createElement("li"); const span = document.createElement("span"); li.appendChild(span); span.innerText = newTodo; toDoList.a..
#7.0 Setup Log In 00:00:00 ​ const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); function toDoSubmit(event){ event.preventDefault(); const newTodo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit",toDoSubmit);
#6.1 Background const images = ["0.jpg","1.jpg","2.jpg"]; //폴더 안에 있는 이미지 이름이랑 똑같게 const chosenImage = images[Math.floor(Math.random()*images.length)]; const bgImage = document.createElement("img"); //img요소 생성 bgImage.src = `img/${chosenImage}`; document.body.appendChild(bgImage) //body에 html추가(가장 뒤에)
#6.0 Quotes 랜덤 명언 불러오기 const quotes = [{ quote:"하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다", author:"사무엘존슨" },{ quote:"삶이 있는 한 희망은 있다", author:"키케로" },{ quote:"언제나 현재에 집중할수 있다면 행복할것이다.", author:"파울로 코엘료" },{ quote:"행복의 문이 하나 닫히면 다른 문이 열린다 그러나 우리는 종종 닫힌 문을 멍하니 바라보다가 우리를 향해 열린 문을 보지 못하게 된다", author:"헬렌켈러" },{ quote:"먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에", author:"엘사 맥스웰" },{ quote:"절대 어제를 후회하지 마라. 인생은 오늘의 나 안에 있고 내일은 스스로 만드는..
#5.2 PadStart PadStart : 문자열 길이를 정해진 수로 조정해줌, String을 현재보다 길게 만들어야 할 때 사용 function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2,0); //문자열로 변환 후, const minutes = String(date.getMinutes()).padStart(2,0);//문자열을 2개로 맞춰주고 문자열이 2보다 작다면 앞에 0붙임 const seconds = String(date.getSeconds()).padStart(2,0); clock.innerText = `${hours}:${minutes}:${seconds}`; }
#5.1 Timeouts and Dates setTimeout(sayHello, 5000); //5초 후에 함수가 실행됨 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}` } getClock(); //즉시 호출해서 바로 시간을 볼 수 있게 setInterval(getClock, 1000);
#5.0 Intervals Interval '매번'일어나야 하는 무언가 2초마다 무슨 일이 일어나게 하고 싶다-> 이럴때 Interval을 사용 1초 === 1000ms const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello,5000)//실행하고자 하는 함수, 함수가 호출되는 간격(ms)

티스토리툴바