Javascript

- 만들고 싶은 기능 1. array, object에 담아두기 먼저 js파일 안에 array에 quote와 author이라는 key값을 가진 object들을 담아 두었다. 명언은 총 10개이며, 네이버에서 쉽게 퍼올수있다! const quotes = [ { quote: "상식과 정직한 거래만큼 인간을 경탄케하는 것은 없다.", author: "랄프 왈도 에머슨", }, { quote: "결과보다 과정 이라는 말은 상업 항공의 등장으로 옛말이 되었다.", author: "헨리 J. 틸만", }, { quote: "많이 보고 많이 겪고 많이 공부하는 것은 배움의 세 기둥이다.", author: "벤자민 디즈라엘리", }, { quote: "한 방향으로 깊이 사랑하면 다른 모든 방향으로의 사랑도 깊어진다.",..

- 만들고 싶은 기능 : 사용자가 이름을 입력하면, 입력값을 저장한 후, 반기는 멘트를 띄우기 *단, 입력 후에 새로고침해도 반기는 멘트가 유지되어야한다. 1. HTML Log in 입력받는 폼태그와 입력 이후에 띄울 수 있는 greeting h1 태그가 있다. 2. CSS .hidden{ display: none; } 3. JavaScript const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector(#greeting); ////////////////////////////////..

원하는 결과 1. HTML - id값이 "clock"인 h1태그를 body안에 넣어준다. 00:00:00 2. Javascript const clock = document.querySelector("#clock"); const date = new Date(); // 시계함수(getClock) 만들기 function getClock(){ // 시, 분, 초 변수 만들기 const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); // clock html element에 변수로 치환하기 clock.innerText = `${hours}:${minutes}:${seconds}`; } // 함..

더보기 new Date() 1) 오늘의 날짜 시간 등을 가져오고 싶은 경우 new Date 함수를 활용할 수 있다. const date = new Date(); // getHours, getMinutes, getSeconds 출력 console.log(date.getHours()); console.log(date.getMinutes()); console.log(date.getSeconds()); // 출력값 13, 12, 33 (=1시 12분 33초) 2) 이외에 연도,월,일,요일도 불러올 수 있다. new Date().getFullYear; new Date().getMonth; new Date().getDate; new Date().getDay;

더보기 localStorage 사용자의 입력값을 저장해두고 싶을 때, localStorage API를 활용하면 된다. localStorage의 값은 object형식으로 key와 value값을 따로 지정하여 저장하면된다. 1) 값을 저장하고 싶을 때 localStorage.setItem('username','daeun') 2) 값을 가져오고 싶을 때 localStorage.getItem("username") // 출력값 daeun 값을 가져올 때에는 key값을 알아야한다는 점이 있다. 3) 값을 지우고 싶을 때 localStorage.removeItem("username")

태그 안에 class를 추가하고 싶을 때는 아래와 같이 추가하면 된다. // 변수로 지정하지 않았을 때, document.getElementsByClassName('hello').classList.add('bye') // 변수로 지정해놨을 때, const greeting = document.getElementsByClassName('hello') greeting.classList.add('bye') 이벤트를 할 때마다 클래스가 추가되고 없어지는 과정을 넣고 싶다면, // 토글되는 함수 만들기 function handleClick (){ document.getElementsByClass('hello').toggle('bye'); } // 이벤트화하기 gretting.addEventListener("clic..