바닐라js로 크롬 앱 만들기(노마드 코더)-2

시계 만들기

이전에 만든 greeting 관련 파일을 분리한다.

이런 식으로 세분화 해서 관리하기(divide and conqure)
html에다가 시계를 생성 --

이제 clock.js를 완성해보자

html의 시계를 불러오기. -- const clock = document.querySelector("h2#clock");

개념

인터벌과 타임아웃 인터벌 - 매번 일어나야 하는 무언가 (매 2초 마다~) setInterval -- 두개의 인자를 받음. 첫번째는 실행하고자 하는 function, 두 번째는 호출의 간격.ms로 하기 떄문에 예를 들어 5000이라고 하면 5초가 된다. --- 함수를 매 간격마다 실행한다. 타임아웃 -- 일정 시간이 지난 뒤에 한 번 실행. --setTimeout -- 인자는 실행할 함수, 얼마나 기다릴지.

콘솔창으로 날짜 알기.

const date = new Date(); date.getDate() ---19

date를 사용해서 날짜정보를 알 수 있다.

이제 위의 사항을 써서 본격적인 개발에 나가자. 그에 앞서서.
백틱을 사용한 템플릿 리터럴 -- https://velog.io/@sunaaank/js-backtick에대해 알아보고 가자.

function getClock(){
    const date = new Date(); console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

setInterval(getClock, 1000);

시간: 분: 초로 시간을 표현하며 그 표시 간격이 1초인 시계. 그 결과는

이렇게 표기 된다.

이제 시계에 표기 해보자.
clock.innerText = (${date.getHours()}:${date.getMinutes()}:${date.getSeconds()})

PadStart

수가 표시될때 1,2,3,4 이렇게 가 아니라 01,02,03 이런식으로 표시하게 하고 싶다. 그치만 21 앞에다가 0을 추가하는 식이면 일괄적으로 0이 추가되므로 그건 안되는데...
이때 사용하는 것이 Padstart라는 기능이다.

"1".padStart(2,"0")
'01'
"12".padStart(2,"0")
'12'

이렇게 두 칸이 넘으면 0이 start부분에 추가되지 않는 것을 알 수 있다.
추가로 padend라는 기능은 start의 정반대 기능.

"1".padEnd(2,"0")
'10'

문자에도 사용이 가능하다.

"안녕".padStart(20,"베")
'베베베베베베베베베베베베베베베베베베안녕'

이제 padstart를 사용해서 코드를 바꾸자.

    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    clock.innerText = `${hours}:${minutes}:${seconds}`;

이렇게 정상적으로 작동한다.

명언 만들기

명언들을 랜덤하게 출력하게 만들기.

quotes.js파일을 생성.
html에서 <script src="js/quotes.js"></script> 파일을 참조 하고, 명언란을.

<div id="quote">
        <span></span>
        <span></span>
    </div>

이렇게 만들어 놓음.

div , span에 대해 https://m.blog.naver.com/juyoung1704/221632845422

이제 자바스크립트 파일을 완성해보자.

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

html의 부분 선택-- 각각 아이디가quote인 것에 대해 첫번째 span 태그, 마지막 span태그를 선택해 명언과 작가 이름을 부여한다.

랜덤하게 명언 선택 --
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

랜덤 선택된 것을 전달 ---
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

배경 이미지 제작.

background.js 파일 제작. html에서 가져오기 --

img 폴더 만들어서 이미지 파일 넣기 , 파일 참조는 --
bgImage.src = img/${chosenImage};

이미지를 배열에 저장 -- const images = ["0.jpg", "1.jpg", "2.jpg"];

랜덤 이미지 선택 --const chosenImage = images[Math.floor(Math.random() * images.length)];

중요한 점-- 자바스크립트에서 이미지를 만들어서 html에 보내는 형식.
document를 사용.

이미지 생성 -- const bgImage = document.createElement("img");

만들어진 이미지를 문서의 body에 넣어줘야만 함. --document.body.appendChild(bgImage);

이렇게 이미지가 뜨게 된다.