조금씩 꾸준히 완성을 향해

실시간으로 시간이 흐르는 시계를 만들기 위해서는 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..

● string.length : 문자열의 길이를 나타낸다. let hello = "hello" console.log(hello.length); //5 - 문자열 접근 ● string.charAt(index) : index에 해당하는 문자 반환 ● string.charCodeAt(index) : index에 해당하는 코드를 반환 let str = "hello world"; console.log(str.charAt(1)); //e console.log(str.charCodeAt(1)); 101 console.log(str[0]); //h - 문자열 검색 ● string.indexOf(substr, pos) : 해당 문자가 들어있는 index를 찾아준다. ● string.lastIndexOf(substr, p..

- 지수 표기법(Exponential notation) : 아주 큰 숫자나 아주 작은 숫자 표기를 위해 지수 표기법(e)으로 0의 개수를 대체 let billion_1 = 1000000000; //10억 let billion_2 = 1e9; // 1 + 0이 9개 let us = 1e-6; // micro sec, 왼쪽으로 6번 소수점 이동 console.log(billion_1); //1,000,000,000 console.log(billion_2); //1,000,000,000 console.log(us); //0.000001 - 진법 표기(Base N) : 0x(16진수), 0o(8진수), 0b(2진수)로 N진수 표기 console.log(0x0f); //15 console.log..