hye-log

- Adding ToDos 우리가 만든 ToDo로 새로운 ToDo를 추가할 수 있지만, 지울 수는 없다. 또한, 웹페이지를 새로고침하면 ToDo가 모두 사라지게 된다. 따라서 Todo를 저장하는 수단을 만드는 것이 필요하다. #5~#11 에서 paintTodo function은 newTodo를 받아서 span에 넣어주는 역할을 한다. #6 에서 li tag를 정의한다. li 는 list의 약자로 목록을 만드는 태그이다. #7 에서 span tag를 정의한다. span 은 inline-element를 하나로 묶을 때 사용하는 태그이다. #8 에서 li tag 안에 span tag를 정의한다. #9 에서 span의 innerText는 newTodo로 정의한다. #10 에서 todoList에 li 를 chil..

이제 ToDo 리스트를 만들어보자. 먼저 index.html 에서 todoForm, todoInput, todoList를 정의한 다음 todo.js에서 불러온다. #5~#9 는 form에 submit 동작이 발생했을 때 기본 동작을 막고 input을 빈 값으로 채워주는 function 이다. #6 에서 submit의 기본 동작이 웹페이지 새로고침이므로 기본 동작을 막아주는 function을 사용한다. #7 에서 newTodo에 todoInput으로 사용자가 입력한 값을 복사한다. #8 에서 todoInput은 value를 빈 값으로 채워준다. 사용자가 값을 입력하고 새로고침하면 웹페이지가 새로고침 되지 않고, input에 빈 값만 남게 된다. 새로운 개념은 없고 앞서서 배운 개념을 가지고 적용시키기만 했다.

HTML에 직접 태그를 작성할 수도 있지만, Javascript에서 HTML 태그를 추가할 수 있다. Javascript에서 생성한 HTML 태그는 HTML에 추가해주는 작업이 필요하다. #1, #3 은 image list를 정의하고 랜덤으로 image를 선택하는 코드이다. #5 는 createElement를 통해 img 태그를 정의한다. #7 은 img 태그로 가져올 리소스를 정의한다. #9 에서 bgImage를 HTML의 body 부분에 붙여서 HTML에 img 태그를 추가한다.

index.html에서 #22~#25 를 통해 quote를 생성할 공간을 만든다. 각각 quote와 author의 span을 만든다. quotes.js에서 #1~#42 를 통해 기본 제공하는 quote array를 입력한다. quote array는 제일 마지막에 코드를 공유해두었다. #44~#45 를 통해 index.html에서 querySelector를 이용하여 span을 불러온다. #47 에서 Math.random()을 이용해서 quote를 선택한다. Math.random : 0부터 1 사이의 랜덤한 숫자를 제공 우리는 0부터 9 사이의 숫자가 필요하기 때문에, Math.random * 10 을 한다. Math.round : 숫자를 반올림 Math.ceil : 숫자를 올림(천장까지 높여줌) Math...

시계를 만들어보자. Date()는 현재 시간을 가져와주는 기능을 한다. #5 처럼 date에 현재 시간을 가져와준다. #6 에서 innerText를 다음과 같이 바꾸어주면 시계를 얻을 수 있다. 시계가 실행될 때 숫자 형식이 0, 1, 2, ... 인 것을 볼 수 있다. 우리는 깔끔하게 보이기 위해서 두 자리씩을 맞추고 싶다. padStart(maxLength, fillString) : string의 길이가 maxLength가 되지 않으면 fillString으로 채워서 보여줌