nomadcoders_바닐라JS로 크롬앱 만들기_day4

2023-03-16
#5.0 Interval 
setInterval({function}, {time}) 함수를 사용하여 특정 주기마다 함수를 실행할 수 있다. 
이때 주기에 해당하는 time argument는 ms(1s === 1000ms)단위라는 점에 유의하자. 

const clock = document.querySelector("#clock");

function sayHello(){
    console.log("hello");
}

//interval -> 매 2초 등 간격을 의미

setInterval(sayHello, 5000);

 

#5.1 Timeouts and Dates
setTimeout({function}, {time}) 함수를 사용하여 특정 시간이 지난 후에 단 한 번만 함수를 호출할 수 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

자바스크립트에서 기본 제공하는 Date 객체와 setInterval 함수를 사용해서 시계를 만들어 볼 것이다. 자세한 펑션은 DOC문서를 참고하도록 하자. 

const clock = document.querySelector("#clock");

function getClock(){
    const date = new Date();
    clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);

 

#5.2 padStart({maxLength}, {fillString})
타입이 문자열인 함수에 적용할 수 있는 함수이다. 
특정 문자열의 최대 길이를 지정후에 채울 문자를 argument로 전달해주면, 기존 텍스트길이를 제외하고 남은 길이는 fillString에 지정한 문자로 채워진다. 
반대로 뒤에 채우고 싶다면, padEnd()를 사용하면 된다.

const clock = document.querySelector("#clock");

function getClock(){
    const date = new Date();
    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}`;
}
getClock();
setInterval(getClock, 1000);

 

#6.0 Quotes
Math 라이브러리의 함수를 사용하여 랜덤으로 인용구를 꺼내본다.
ceil -> 소수점 밑의 자리를 버리고 올림!
floor -> 소수점 밑의 자리를 버리고 내림!
round -> 소수점 밑의 자리를 반올림!

const quotes = [
    {
        quote : "You will face many defeats in life, but never let yourself be defeated.",
        author : "Maya Angelou"
    },
    {
        quote : "The greatest glory in living lies not in never falling, but in rising every time we fall.",
        author : "Nelson Mandela"
    },
    {
        quote : "Love, free as air at sight of human ties, Spreads his light wings, and in a moment flies.",
        author : "Alexander Pope"
    },
    {
        quote : "To love and win is the best thing. To love and lose, is the next best thing.",
        author : "William Thackeray"
    },
    {
        quote : "The supreme happiness in life is the conviction that we are loved.",
        author : "Victor Hugo"
    },
    {
        quote : "Success is going from failure to failure without a loss of enthusiasm.",
        author : "Winston Churchill"
    },
    {
        quote : "Always bear in mind that your own resolution to succeed is more important than any other.",
        author : "Abraham Lincoln"
    },
    {
        quote : "Try not to become a man of success but rather try to become a man of value.",
        author : "Albert Einstein"
    },
    {
        quote : "If you cannot fly then run. If you cannot run, then walk. And, if you cannot walk, then crawl, but whatever you do, you have to keep moving forward.",
        author : "Martin Luther King Jr."
    },
    {
        quote : "The fastest way to change yourself is to hang out with people who are already the way you want to be.",
        author : "Reid Hoffman"
    },
];

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

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

 

#6.1 Backgroud
createElement는 자바스크립트에서 태그를 만들기 위해 사용하는 함수이다.
만들기만 하고서 끝나면 안 되는데 만들어준 태그를 document에 넣어줘야 로딩이 가능하다.
appendChild() 메서드를 통해 만들어준 태그를 document에 추가할 수 있다.

const images = ["0.jpg", "1.jpg", "2.jpg"];

const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);