조금씩 꾸준히 완성을 향해

앱에 Todo-list를 추가해 보자. 먼저 이렇게 입력할 수 있는 input 태그를 생성해 준다. const toDoForm = document.getElementById("todo-form"); function handleToDoSubmit(event){ event.preventDefault(); } toDoForm.addEventListener("submit", handleToDoSubmit); submit이 되면 값을 저장하기 위해 handleToDoSubmit 함수를 호출한다. 함수 안에서는 가장 먼저, submit의 default 행위(새로고침)을 막아주기 위해 preventDefalut() 메소드를 불러준다. 그리고 나서는 이렇게 입력하고 enter를 눌렀을 때 값은 저장이 되고, input..

랜덤으로 바뀌는 명언과 배경이미지를 구현해 보자. 랜덤의 수를 가져오기 위해서는 Math라는 module을 살펴봐야 한다. Mathe는 JavaScript의 built-in object로 여러가지 수학적인 작업들을 함수로 제공한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math Math - JavaScript | MDN Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. developer.mozilla.org 그 중, Math.random() 은 0~1 사이의 임의의 수를 제공한다. 이렇게 소수점이 길게 붙은 숫자를 지정된 범위의 수로 바꾸기 위해서는 곱..

실시간으로 시간이 흐르는 시계를 만들기 위해서는 interval에 대한 개념을 알아야 한다. interval은 매번 일어나야 하는 어떤 행위의 간격을 말한다. setInterval() 함수를 이용하면 이를 구현할 수 있다. setInterval(function, 호출 간격) 첫번째 인자에는 실행할 함수를, 두번째 인자에는 호출되는 간격을 milliseconds 단위로 적어준다. 예시를 살펴보자. function sayHello(){ console.log("hello"); } setInterval(sayHello, 5000); //5초마다 콘솔에 "hello"를 출력 5초마다 sayHello 함수가 호출된다. 즉, 5초마다 콘솔에 "hello"가 출력된다. 이렇게 hello가 쌓이는 것을 볼 수 있다. s..

입력받은 username을 저장하고 지속적으로 보여주기 위해서 Web API인 Local Storage를 사용해 보자. Local Storage는 브라우저에 값을 저장하고 가져다 쓸 수 있게 해주는 유용한 API이다. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Window.localStorage - Web APIs | MDN The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessi..

Username을 입력받고 저장해서 보여주기 위해서는 먼저, input의 값을 가져와야 한다. 그것을 위해 value라는 속성을 사용한다. const loginInput = document.querySelector("#login-form input"); const username = loginInput.value; input에 입력되는 값을 받아서 username이라는 변수에 저장 완료! 여기서 체크해 봐야 할 게 & 의 관계이다. input 태그는 반드시 form 태그 안에 있어 유효성 검사를 작동시킬 수 있다. LogIn 죽, form 태그 안에 있어야 이런 식으로 내재돼 있는 유용한 기능들(required, maxlength 등)을 사용할 수 있다. 그리고 form 태그 안에 있는 input은 자동..

CSS in JavaScript 자바스크립트에서 직접적으로 CSS 변경이 가능하다. style 이라는 method를 사용한다. const h1 = document.querySelector(".hello h1"); function handleTitleClick(){ const currnetColor = h1.style.color; let newColor; if(currnetColor === "blue"){ newColor = "tomato"; } else{ newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click", handleTitleClick); 이렇게 h1 태그의 글자 색을 변경가능하다. 그러나 이것은 권장되는 방식은 아..

배열에 element를 단순 삽입하고 삭제 할 때 쓰이는 method인 push, pop, shift, unshift 에 대해 살펴보겠다. 1. push : 아이템을 배열의 끝에 삽입한다. // push: add an item to the end let fruits = ['apple', 'banana']; fruits.push('strawberry', 'peach'); console.log(fruits); // ['apple', 'banana', 'strawberry', 'peach'] 2. pop : 배열의 끝에서부터 아이템을 삭제한다. // pop: remove an item from the end let fruits = ['apple', 'banana', 'strawberry', 'peach'] f..

배열에서 사용되는 여러가지 method 중에 Searching에 사용되는 간단한 세 가지를 살펴보겠다. 1. indexOf() : 특정 element의 index 값을 찾을 때 사용. 값이 존재하지 않으면 -1을 return indexOf(searchElement) : searchElement가 처음으로 등장하는 index 값 리턴 indexOf(searchElement, fromIndex) : fromIndex부터 시작해서 searchElement가 처음으로 등장하는 index 값을 리턴 // find the index let fruits = [ 'peach', 'orange', 'tomato', 'strawberry', 'cherry', 'lemon'] console.log(fruits.indexOf..

배열의 값들을 반복문으로 돌리기 위한 방법은 크게 4가지로 나뉜다. 1. for 문 const fruits = ['apple', 'banana', 'cherry']; // a. for for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } 2. for of - 배열의 각 아이템 하나하나를 순회한다. const fruits = ['apple', 'banana', 'cherry']; // b. for of for ( let fruit of fruits) { console.log(fruit); } 3. for in - Object의 반복문에 주로 사용되는 방법이지만, 배열에서도 사용 가능하다. - 배열의 각 아이템의 index 를 순회한다. c..