Coding Story

todo.js const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; let toDos = []; function deleteTodo(event){ const btn = event.target; const li = btn.parentNode; //버튼에 대한 부모 요소 toDoList.removeChild(li); //쟈식 li태그 제거 const cleanToDos = toDos.filter(function(toDo){ return toDo.id..

2739번 구구단 const readline=require('readline'); const rl=readline.createInterface({ input:process.stdin, output:process.stdout }); const gugudan = (num) => { for(let i=1; i

select에서 option 값 선택하기 html --- Choose Your Country --- Korea Greece Turkey Finland js const select = document.querySelector(".select"); const currentValue = select.options[select.selectedIndex].value; 1. select에 클래스를 만들어 querySelector로 불러온다. 2. option들엔 각각의 인덱스가 있는데, 선택된 인덱스의 option의 value를 currentValue에 저장한다. LocalStorage에 저장하기 localStorage.setItem(key, value) const COUNTRY_LS="Country"; local..

event.preventDefault 보통 이벤트는 root 에서 일어난다. event는 일종의 거품 같은 것이다. 올라가면서 다른 모든것들이 이벤트에 반응하게 된다. form을 제출하는 이벤트가 발생하면 이벤트는 document까지 계속 위로 올라간다. 그 document는 프로그램 되어진대로 다른 곳으로 가고, 페이지는 새로고침 된다. event.preventDefault()는 이런 이벤트의 디폴트 동작을 막는 방법이다. 이경우 엔터를 눌러 submit을 해도 다른곳으로 가지 않는다. local stroage 는 URLs를 기초로 동작한다. 때문에 한 웹사이트가 다른 웹사이트의 local storage에 접근하지 못한다. document.createElement() 무언가를 생성하기를 원할때 사용한다..

setInterval(fn, 1000) 첫번째 인자로 실행할 함수를 받고, 두번째 인자로 그 함수를 실행하고 싶은 시간(실행할 시간 간격)을 받음. (단위는 millisecond) Element 반환하기 querySelector: 첫번째 것을 가져온다. querySelectorAll: 모든걸 가져온다. 클래스명에 따른 모든 엘리먼트들의 배열을 가져옴. getElementByID: Id로 엘리먼트를 가져온다. getElementByTagname: 태그로 엘리먼트를 가져온다(input, body, html, div, section..) local storage 자바스크립트 정보를 유저 컴퓨터에 저장하는 방법! 크롬 Application 창 -> Local Storage localStorage.setItem(..

IF-ELSE 로 이벤트에 반응하는 로직을 짜는 법 const title=document.querySelector("#title"); const BASE_COLOR="rgb(52, 73, 94)"; const OTHER_COLOR="#7F8C8D"; function handleClick(){ const currentColor=title.style.color; if (currentColor==BASE_COLOR){ title.style.color = OTHER_COLOR; }else{ title.style.color=BASE_COLOR; } } function init(){ title.style.color=BASE_COLOR; title.addEventListener("click", handleClick)..

css와 같이 자바스크립트에서도 element를 선택할 수 있다. javascript 에서 id로 무언가 선택할 때는 document.getElementById 라고 쓴다. 1. id 속성을 가진 요소를 찾아 객체 반환하기 const title = document.getElementById("title"); 2. 내용수정 title.innerHTML = "Hi! From JS" 3.색상변경 title.style.color = "red" 4. 타이틀 변경 document.title = 'I own you now' js로 객체화 하는 것을 통해 각종 html 문서를 감지하고 추가하고 변경하는 등의 것들을 할 수 있다. document.queryselector() queryselector는 노드의 첫번째 자식..

console.log() console.log()를 하면 ()안에 있는 것이 콘솔창에 출력된다. console -> 객체(object) log -> 메서드(method) () 안 -> 매개변수(parameter) 즉, 객체 안에 있는 메서드를 실행시켜 매개변수를 작동시키는 작업이다. console 객체는 다양한 메소드들을 가지고 있다. console.warn() -경고 표시 console.error() -에러 표시 console.dir() -자바스크립트 객체의 속성들을 출력 2557번 - Hello World console.log('Hello World!'); 10718번 - We love kriii console.log('강한친구 대한육군'); console.log('강한친구 대한육군'); 10171번..