2/17 바닐라 JS Quotes & Background

목표

무작위성(Randomness)에 대해 이야기해보려고한다! 우리가 하고자 하는건

첫번쨰로는 Array안에 있는 elment에 어떻게 접근하는가다 

만약에 array에 10개의 item이 있다면  10 -1 로 마지막 element에 접근할 수 있다. 

 

그래서 1부터 9사이에 랜덤적인 숫자를 구하기위한 function을 만들어보려고한다!

Math는 흥미로운 function들을 많이 가지고있는데 그중 하나가 random()이다. 

0부터 1사이에 랜덤 숫자를 출력한다

1부터 10사이에 숫자를 얻으려면 Math.random() *10을 곱하면 0에서 10사이의 숫자들을 얻을 수 있다. 

근데 숫자가 너무나 길다. 왜냐하면 이거는 integer이 아니라 float값이 나왔기 때문이다. 

이것을 짧게 만드는 방법은 세가지가 있는데 

1. Math.round(1.1) -> 1을 돌려준다  Math.round(1.8) - > 2로 반올림 해서 결과를 출력한다

2. Math.ceil()이 하는건 숫자를 천장까지 높여준다 , 말그대로 꼭대기 까지 

ex ) Math.ceil(1.1) -> 2 , Math.ceil(1.01) -> 2로 나온다 1.0만이 1이 나온다.

3. Math.floor()은 걸어다니는 마루까지 숫자를 내려준다. Math.floor(1.8) -> 1 

 

지금 우리가 사용할건 floor()이다.  지금 우리가 해야 할건 랜덤하게 얻은 숫자에 10을 곱해서 floor()을 사용하는것이다. 

const quotes = [
    {
        quote:"I have been crucified with Christ and I no longer live, but Christ lives in me. The life I now live in the body, I live by faith in the Son of God, who loved me and gave himself for me.",
        author:"Galatians 2:20 NIV",
    },
    {
        quote:"For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life.",
        author:"John 3:16 NIV",
    },
    {
        quote:"I have fought the good fight, I have finished the race, I have kept the faith.",
        author:"2 Timothy 4:7 NIV",
    },
    {
        quote:"Now that you have purified yourselves by obeying the truth so that you have sincere love for each other, love one another deeply, from the heart.",
        author:"1 Peter 1:22 NIV",
    },
    {
        quote:"I can do all this through him who gives me strength.",
        author:"Philippians 4:13 NIV",
    },
    {
        quote:"In the beginning God created the heavens and the earth.",
        author:"Genesis 1:1 NIV",
    },
    {
        quote:"Blessed are those who are persecuted because of righteousness, for theirs is the kingdom of heaven.",
        author:"Matthew 5:10 NIV",
    },
    {
        quote:"You are the salt of the earth. But if the salt loses its saltiness, how can it be made salty again? It is no longer good for anything, except to be thrown out and trampled underfoot.",
        author:"Matthew 5:13 NIV",
    },
    {
        quote:"This, then, is how you should pray: “ ‘Our Father in heaven, hallowed be your name",
        author:"Matthew 6:9 NIV",
    },
    {
        quote:"I am the Alpha and the Omega, the First and the Last, the Beginning and the End.",
        author:"Revelation 22:13 NIV"
    },
];

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

console.log(quotes[Math.floor(Math.random() *10)]);

이렇게 하면 콘솔에는 랜덤으로 명언들이 출력이 된다!

그러나 문제 가 있따. 우리는 10을 곱함으로 저 명언이 딱 10개 가지고 있을때만 동작하게 되었고 

우리가 만약 명언 하나를 더하면 어떻게 해야할까? 

정확한 숫자를 기억하는것보다는 Array의 길이를 알아내는게 좋을거같다. 

길이를 알아내는 방법은 굉장히 쉽다. 그 배열뒤에 .length만 붙이면되는데

그래서 10이라고 쓰는 대신에 

console.log(quotes[Math.floor(Math.random() *quotes.length)]);

이렇게 하는게 훨씬더 깔끔하고 좋다. 

 

이제 우리가 해야 할건 명언이랑 작가를 화면에 보이게 하는것 뿐이다! 

const quotes = [
    {
        quote: "I have been crucified with Christ and I no longer live, but Christ lives in me. The life I now live in the body, I live by faith in the Son of God, who loved me and gave himself for me.",
        author: "Galatians 2:20 NIV",
    },
    {
        quote: "For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life.",
        author: "John 3:16 NIV",
    },
    {
        quote: "I have fought the good fight, I have finished the race, I have kept the faith.",
        author: "2 Timothy 4:7 NIV",
    },
    {
        quote: "Now that you have purified yourselves by obeying the truth so that you have sincere love for each other, love one another deeply, from the heart.",
        author: "1 Peter 1:22 NIV",
    },
    {
        quote: "I can do all this through him who gives me strength.",
        author: "Philippians 4:13 NIV",
    },
    {
        quote: "In the beginning God created the heavens and the earth.",
        author: "Genesis 1:1 NIV",
    },
    {
        quote: "Blessed are those who are persecuted because of righteousness, for theirs is the kingdom of heaven.",
        author: "Matthew 5:10 NIV",
    },
    {
        quote: "You are the salt of the earth. But if the salt loses its saltiness, how can it be made salty again? It is no longer good for anything, except to be thrown out and trampled underfoot.",
        author: "Matthew 5:13 NIV",
    },
    {
        quote: "This, then, is how you should pray: “ ‘Our Father in heaven, hallowed be your name",
        author: "Matthew 6:9 NIV",
    },
    {
        quote: "I am the Alpha and the Omega, the First and the Last, the Beginning and the End.",
        author: "Revelation 22:13 NIV"
    },
];

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;

---

랜덤 배경화면을 또 한 만들어보려고한다! 

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

const chosenImage = images[Math.floor(Math.random() * images.length)];

console.log(chosenImage);

아직 자바스크립트에서 무언갈 만들고 HTML에 추가해본적은 없다. 

자바스크립트에서 이미지를 만들고 이걸 html에 추가해보려고한다.

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}`
console.log(bgImage);

document.createElement를 통해서 자바스크립트에서 Html 에 이미지 태그를 만들고

bgImage.src를 통해 이미지 저장소를 정했다.

 

마지막으로 우리가 해야할일은 bgImage를 body내부에 추가하는것이다. 

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}`

// body에 html을 추가할것이다.
document.body.appendChild(bgImage);

---

결론 : item 5개가 있는 Array에서 마지막 item을 가져오려면 필요한숫자는 4라는거!

floor()을 사용하는 이유는  Array에 4.3같은 숫자는 사용할 수 없기 떄문이다. 우리는 4라는 숫자가 필요할뿐append는 가장 뒤에, prepend는 가장 위에 오게한다!