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으로 채워서 보여줌

파일 관리를 용이하게 하기 위해서 css, js 폴더를 만든 다음, 기존에 만들었던 파일들을 분리해서 넣어두었다. 지금까지 만들었던 app.js는 greetings.js로 바꾸고, clock.js를 새로 만든다. 이때, index.html에서 기존 파일들에 대한 경로 설정을 새로 해주어야 한다. 이렇게 파일 관리는 divide and conquer 방식을 사용하는 것이 깔끔하다. interval은 매번 일어나야 하는 무언가를 말한다. 예를 들어, 2초마다 발생하는 알람이라면 interval을 사용한다. setinterval : 첫 번째 argument는 실행하고자 하는 function, 두 번째 argument는 호출되는 function의 간격을 몇 ms로 할건지 정한다 예를 들어, clock.js에서 ..

username을 받아서 저장해보자. 브라우저에서 value를 저장할 수 있는 쉬운 방법 중 하나가 local storage API를 이용하는 것이다. local storage는 setItem, getItem, removeItem을 통해서 접근할 수 있다. console 창에서 local storage에 값을 넣거나 가져올 수 있다. setItem(key, value) : local storage에 key-value를 저장한다. getItem(key) : local storage에서 key에 해당하는 value를 가져온다. removeItem(key) : local storage에서 key에 해당하는 key-value를 삭제한다. local storage는 Application - Storage - Lo..