Vanilla JS # 04

Getting userName

"Hello" + username; === `Hello $ {username}`;

Saving userName

localStorage API >> setItem, getItem,removeItem

Intervals

setInterval(function[ , delay]);

setInterval(sayHello, 1000);

sayHello()라는 function을 1초마다 반복한다는 의미

단 바로 실행 되지 않고 1초 후 첫 시작이 되고 계속 1초 마다 반복 된다.

SetTimeOut

setTimeout(sayHello, 5000);

5초 기다렸다가 딱 한번 만 실행 된다.

1. Math 객체 기능

Math.random()  0부터 1사이 무작위의 값을 반환해준다.

Math.floor() 내림 (소수점이 몇이든 관계 없이 정수로 내려준다.)

Math.ceil() 올림 (소수점이 몇이든 관계 없이 정수를 올려 준다.)

Math.round()  반올림 해준다.

2. JS에서 html 요소를 생성

createElement(" ")

ex:)

document.createElement("img") 일 경우 html 내에 img 태그를 생성한다.

 

appendChild() 함수 안의 경로에 정의한 값을 가장 뒤에서 기입한다.

 

prependChild() 반대로 앞에서 기입한다.

SetUp

1.html

1) Todo-list 를 만들기를 원하니 html에 form 태그로 구조를 만들어 준다.

나중에 JavaScript에서 만지기 쉽게 id는 todo-form으로 설정해 준다.

2) form 자체는 submit이라는 기본 기능을 내장하는 하나의 묶음 밖에 되지 않는다.

우리는 이용자가 todo-list에 무언가 기입하는 것을 원하기 때문에 form

태그 안에 input 태그를 넣어 'text'를 타이핑 할수 있는 기능을 추가한다.

3) 그 밑에 ul 태그를 생성하여 todo-list 에 작성 된 text가 저장 및 나열 될 수 있게 한다.

2.JavaScript

1) 앞에 html에서 만든 구조 3가지 ('todo-form', 'todo-form 안의 input', 'todo-list')에

접속하기 위해 항상 길게 타이핑 하는것 은 비휴율적이므로 단축을 위해 각각 변수로 설정한다.

2) 이전 greeting 강의 에서 form 태그에서의 event는 submit 발생시키고,

browser는 기본값으로 설정 되어 있는 새로 고침을 하게 된다.

우리는 todo-list를 작성한다고 새로고침 되는 것을 원치 않기 때문에

(todo-list를 1,000번 작성한다고 가정한다면 불필요한 새로고침이 1,000번 발생하고

1,000번의 랜덤한 이미지가 로드 될것이다. 데이터적으로 비휴율적, 시각적으로 불편)

event.preventDefault() 로 기본값을 없애 준다.

3) text 상자 안에 글을 작성하고 enter를 눌렀을 때

그 글이 초기화 되게 만들기 위해 toDoInput.value = ""; 을 통해 value를 빈 텍스트로 한다.

4) text 상자를 비게 하는 것은 좋은데 그 전에 이용자가 입력한 text를 저장해야 나중에

ul태그 안에 사용 할수 있기 때문에

toDoInput.value = ""; 로 기입한 text가 사라지기 이전에

const newTodo = toDoInput.value ; 를 정의하여

기입한 text가 newTodo 라는 값에 저장되게 한다.

5) 앞의 세 가지 동작 ( 기본값 방지, text 저장, text 상자 비우기) 는

한번에 이루어지는 세트이기 때문에 효율성 및 편의를 위해 함수로 묶어준다.

function handleTodoSubmit(){

event.prventDefault();

const newTodo = toDoInput.value;

toDoInput.value = "";

}

6) todo-form 안 에서 submit이 발생하는 특정 상황에서 함수 handleTodoSubmit을 실행 시키기 위해

toDoform.addEventListener("submit", handleTodoSubmit); 을 기입한다.

(함수 handleTodoSubmit이 항상 실행되고 있는 상태라면 text 창은 항상 비어 있는 상태 일 것이기 때문이다.)