Quotes 기본 세팅
<div id="quotes">
<span></span>
<span></span>
</div>
// 10개의 명언들을 object안에 10개의 array들이 ,으로 연결되어있ㄷ.
const quotes = [
{
quote: "Be the change that you wish to see in the world.",
author: "Mahatma Gandhi",
},
{
quote: "Be yourself; everyone else is already taken.",
author: "Oscar Wilde",
},
{
quote:
"I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.",
author: "Marilyn Monroe",
},
{
quote:
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
author: "Albert Einstein",
},
{
quote: "So many books, so little time.",
author: "Frank Zappa",
},
{
quote: "A room without books is like a body without a soul.",
author: "Marcus Tullius Cicero",
},
{
quote:
"Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.",
author: "Bernard M. Baruch",
},
{
quote:
"You've gotta dance like there's nobody watching, Love like you'll never be hurt, Sing like there's nobody listening, And live like it's heaven on earth.",
author: "William W. Purkey",
},
{
quote:
"You know you're in love when you can't fall asleep because reality is finally better than your dreams.",
author: "Dr. Seuss",
},
{
quote: "You only live once, but if you do it right, once is enough.",
author: " Mae West",
},
];
const quote = document.querySelector("#quotes span:first-child");
const author = document.querySelector("#quotes span:last-child");
Quotes 0~9까지의 array들을 반환하는 방법
object 안에 10개의 array들이 있기 때문에 컴퓨터는 0부터 센다. 0부터 9까지 포함되는 function들을 만들어야 한다.
랜덤하게 쓸 수 있는 함수 : Math.random()
반올림 : Math.round() / 올림 : Math.ceil() / 내림 : Math.floor()
console.log(quotes[0-9]);
// Math.random() 함수를 사용한다.
// Math.random() *10 === 0에서 10사이의 숫자들을 얻을 수 있다.
// 콘솔창에서 찍어보면 소수점 이하 숫자들이 나오는데 쓸모가 없기 때문에 3개의 함수들을 이용할 수 있다.
// 반올림 === Math.round() / 올림 === Math.ceil() / 내림 === Math.floor()
Math.floor(Math.random() *10)
코드에 적용해보면,
console.log(quotes[Math.floor(Math.random() * 10)]);
우리가 꼭 array들이 10개인 건 아닐 것이다. 무한한 가능성의 갯수들이 있을 것이기 때문에. array의 길이를 알아볼 수 있는 array.length를 사용한다.
console.log(quotes[Math.floor(Math.random() * quotes.length)]);
코드에 적용해보면,
const quote = document.querySelector("#quotes span:first-child");
const author = document.querySelector("#quotes span:last-child");
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
Background 에 적용하기
이미지 폴더에 이미지를 넣고 img.earth.jpg / img.ocean.jpg / img.tree.jpg
Quote와 만드는 것과 같다.
const images = ["img.earth.jpg", "img.ocean.jpg", "img.tree.jpg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
JavaScipt에서 무언가를 만들어서 그걸 HTML에 추가해야 하는 방법이 필요하다.
▶ document.createElement() 함수 사용한다. - 즉, HTML에서 직접 작성하는 것과 같은 원리.
const bgImage = document.createElement("img");
console.log(bgImage);
이렇게 출력하면, 콘솔창에는 <img>가 생겼다. 그렇다면, bgImage.src도 쓸 수 있다는 얘기이다.
src는 img/라고 써주는 원칙.
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
console.log(bgImage);
이렇게 출력하면, 콘솔창에는 <img/ src = "img/img/tree.jpg"> 랜덤하게 나온다.
bgImage를 body내부에 추가해야 한다.
▶ appendChild() - 이미지가 가장 아래쪽에 / prepand() - 이미지가 가장 위쪽에
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);
최종적 코드
const images = ["img.earth.jpg", "img.ocean.jpg", "img.tree.jpg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);
'개발언어 > JavaScript' 카테고리의 다른 글
Weather날씨 만들기 (0) | 2021.09.04 |
---|---|
To Do List 만들기 (0) | 2021.09.03 |
Clock만들기 (0) | 2021.09.01 |
Login만들기 (0) | 2021.09.01 |
JavaScript - 브라우저(Document, Elements, Events) (0) | 2021.08.26 |