input type="text"의 value 값을 element에서 찾고 싶어, console.dir(document.body); 를 입력하였다. childeNodes -> form.login-form -> -> input.login-form__text.hidden -> value: "gaeun"
form 에는 분명히 class="hidden"이 적용되어 있고, style.css 파일에는 class="hidden"는 display: none;으로 적용되도록 설정되어 있다. 하지만 위 사진과 같이 개발자 도구에서 취소선이 그어지면서 안먹히는 현상이.. 나타났다. 이는 해당하는 #login-form 이 display가 flex에 해당되어서 그랬던 것이다... 이유는 차차 알아보자. 따라서 위와 같이 class="hidden" 을 display: flex가 걸려있는 form 이 아닌, input에 따로따로 걸어줬더니 정상작동 한다 !!
1. Adding ToDos 2. Deleting ToDos function deleteToDo(event) { const li = event.target.parentElement; li.remove(); } todo.js
1. html form 생성 ; index.html 2. js 연동 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { // submit의 기본설정 막음 (새로고침) event.preventDefault(); // input의 value를 새로운 변수에 복사 const newTodo = toDoInput.value; // input의 value를 비움 toDoInput.value = ""; } toDoForm...
1. Javascript에서 html element을 생성 how to use // images 배열 생성 const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg"]; // images 랜덤으로 선택 const chosenImage = images[Math.floor(Math.random() * images.length)]; // html에 img element 생성 const bgImage = document.createElement("img"); // (랜덤 생성) bgImage.src = `img/${chosenImage}`; background.js 2. body에 html을 추가 how to use document.body.appendChild(..
padStart padStart(maxLength, fillstring) -> padStart가 적용되는 문자열의 길이가 maxLength보다 작다면, 부족한 길이만큼 fillstring을 문자열 앞쪽에 채운다. padEnd padEnd(maxLength, fillstring) -> 문자열 뒤쪽에 채운다. how to use clock.js hello.padStart(7, "x"); // xxhello 9.padStart(2, "0"); // 09
1. timeout setTimeout(func, time) -> time(ms) 이후에 func이 실행됨. how to use clock.js function sayHello() { console.log("hello"); } // 5000ms(5초) 뒤에 sayHello 함수 실행됨. setTimeout(sayHello, 5000); 2. date object web에서 제공하는 기본 객체로, 날짜/시간과 관련된 객체 - google -> js date mdn search ! how to use clock.js const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); // Date 객체 ..
interval 매번 발생해야 하는 기능을 말함 setInterval(func, intervaltime) -> func을 intervaltime(ms) 마다 실행하는 함수 how to use clock.js function sayHello() { console.log("hello"); } // 5000ms(5초)마다 sayHello 함수가 호출됨. setInterval(sayHello, 5000);
Saving & Loading Username index.html app.js const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit(event) { event.preventDefault(); // 기본동작 실행되지 않도록 막기 loginForm.classList.add(HIDDEN_CLAS..
index.html app.js const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); function onLoginSubmit() { const username = loginInput.value; console.log(username); } loginForm.addEventListener("submit", onLoginSubmit); 브라우저의 기본 동작 막기 1. form submit의 기본동작은 "새로고침" app.js const loginForm = document.querySelector("#login-form"); const login..
