⏬ HTML 준비 코드 /* 할 일을 적을 입력칸*/ /* 적은 입력이 저장되는 출력칸*/ ⏬JS 코드 🔆각 요소 값 변수에 저장 및 입력한 값을 담을 배열 생성 //입력 폼 const toDoForm = document.querySelector('#todo-form') //입력 const toDoInput = toDoForm.querySelector('input') //출력할 ul요소 const toDoList = document.querySelector('#todo-list') /**localstorage에는 오직 text만 저장 가능하다. */ let toDos = []; /*자주 사용하는 단어(상수)는 오타를 치지 않도록 변수에 담아서 사용한다.*/ const TODOS_KEY = "todos";..

🟰위와 같이 새로고침을 할 때 자동으로 다음 인용구가 랜덤으로 나오도록 만들어보는 연습을 하려고 한다. ⏬준비할 html코드(id가 quote인 div태그안의 span태그에 인용구를 넣으려고 한다) ⏬JS코드 ( quotes값에 넣고자 하는 인용구와 text를 넣어준다.) 🔆quote안의 두개의 span 을 first-child, last-child를 통해 불러온다 🔆Math.random()을 통해 랜덤정수를 가져온다.(quotes.length를 곱해서 해당 길이만큼 범위를 확장) 🔆Math.floor를 통해 소수점을 버린다. Math.random은 double타입으로 나오기 때문 🔆그렇게 생성된 랜덤 인덱스에 해당하는 quote와 text를 각 span에 넣어주기만 하면 끝! const quotes =..

🟰시간 출력하기에 필요한 개념 📌 어떠한 요소 안에 String타입의 변수를 출력할때 ☀️ 백틱이라는 기호(``)를 써서 변수를 표현한다. 일반적으로 숫자키 옆 ~에 있다. ☀️setInterval(함수,간격) : 해당 함수를 지정한 간격만큼 두고 실행한다. ☀️ new Date()를 호출할 경우 현재 날짜와 시간을 가져옵니다. ☀️ padStart,padEnd(자릿수, 빈 공간을 채울 문자) : 자릿수만큼 문자열 공간을 지정하고 빈 공간은 지정한 문자로 채웁니다. 위 개념을 숙지하셨다면 코드를 보여드리겠습니다. ⏬코드예시 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); const..

🟰Sort함수 sort함수를 통해 불러온 요소들의 순서를 바꿀 수 있다. 이때 사용되는 클래스와 함수들을 간단히 알아보자. 1. Array.from : 불러온 요소들을 Array(배열)상태로 묶는다. 2. 요소.appenChild(요소2) 요소2를 요소1의 하위요소로 넣는다. 예시) ul.appendChild(li) : ul안에 li요소를 집어넣는다. 3. querySelector('불러올요소') , querySelectorAll('불러올 요소') 예시) querySelector('ul') : ul요소를 하나 불러온다. querySelectorAll('ul') : ul요소를 모두 불러온다. Sort에서는 자바의 람다, 익명클래스와 같은 방식이 사용된다. 클래스를 생성하지 않고 곧바로 람다식을 통해 익명의..

🟰switch switch의 기본 구문은 이렇습니다. switch(연산대상) { case(연산결과값1) : 해당 case가 해당될 경우 수행될 내용 break; case(연산결과값2) : 해당 case가 해당될 경우 수행될 내용 break; default : case외의 결과값시 수행될 내용 break; } 이처럼 연산대상의 결과값에 따라 다른 내용이 수행되도록 하는 while과 유사하지만 조금 다른 모습의 반복문이다. 만약 어떤 값이 나올경우 종료를 시키고 싶다면 return;을 적으면 해당 반복문이 종료된다. 이 구문을 이용하여 간단한 이동효과를 만들 수 있다. HTML 삽입 미리보기할 수 없는 소스 지정된 가로500px 세로 500px의 div안(#root)에 하나의 다른 div(.item)를 넣고..

🟰if문 ☀️코드 if(조건식) { 조건 성립시 수행할 구문... } 예시코드 HTML 삽입 미리보기할 수 없는 소스 코드내용 해석: input 에서 age라는 id의 value값을 가져와서 if문에서 활용한다. submit을 클릭할 경우가 함수가 수행된다. if(age.value >=20) //만약 age의 밸류값이 20이상이라면(조건) msg.innerText = '당신은성인입니다.' //msg의 텍스트에 '당신은 성인입니다'라는 내용을 삽입한다. esle // 20미만이라면(위 if문의 예외상황시 조건) msg.innerText = '당신은 미성년자입니다.' //msg의 텍스트에 '당신은 미성년자입니다'라는 내용을 삽입한다.