[JavaScript] Quotes and Backgrounds

Quotes

학습내용 : 웹 페이지에 명언과 작가를 랜덤하게 출력

• 명언 10개를 가진 quotes.js 파일 생성

const quotes = [ { quote: "삶이 있는 한 희망은 있다.", author: "키케로" }, 
{ quote: "아는 것이 힘이다.", author: "프랜시스 베이컨" }, 
{ quote: "대부분의 사람들은 삶을 이끌어 가지 않고, 단지 삶에 따라 흘러갈 뿐이다.", author: "세네카", }, 
{ quote: "삶은 선택의 연속이다.", author: "윌리엄 제임스" }, 
{ quote: "모든 위대한 것은 꿈에서 시작된다.", author: "엘리노어 루스벨트" }, 
{ quote: "성공은 실패의 연속에서 비롯된다.", author: "콘래드 힐튼" }, 
{ quote: "우리가 변화를 만들지 않으면, 변화가 우리를 만든다.", author: "영국 속담", }, 
{ quote: "나를 죽이지 않는 고통은 나를 더 강하게 만든다.", author: "니체" }, 
{ quote: "성공으로 가는 길은 늘 공사 중이다.", author: "릴리 톰린" }, 
{ quote: "삶은 10%는 우리가 겪는 일이고, 90%는 그에 어떻게 반응하느냐이다.", author: "찰스 R. 스윈돌", },
];

 

index.html

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

명언을 출력하기 위한 html코드 작성

 

 

첫 번재 명언을 콘솔창에 출력

console.log(quotes[0]);

 

 

랜덤한 값을 호출하기 위해 Math 모듈 사용

Math.random * 10을 하면 0~10사이의 숫자를 얻을 수 있음

 

 

소수점을 없애기 위해 사용할 수 있는 함수 3가지

• round() : 반올림

• ceil() : 올림

• floor() : 내림

 

 

 

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

현재는 명언이 10개라는 것을 아는 상태로 10을 곱한 상태임

문제 : 명언이 추가되거나 감소했을 때 함께 수정해주어야 함

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

명언을 담은 배열의 길이를 곱해주는 방식으로 변경

 

 

명언과 작가를 출력

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

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

---

Backgrounds

학습내용 : 랜덤 배경화면

background.js 파일을 js폴더 안에 만들고, 최상단 경로에 img 폴더를 만들어 2개 이상의 이미지를 저장

랜덤한 숫자를 얻어 이미지를 고르고 이미지를 body에 추가할 예정

 

 

background.js

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

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

const bgImage = document.createElement("img"); // html에 이미지 태그 생성
bgImage.src = `img/${chosenImage}`;

// html의 body 태그 안에 추가
document.body.appendChild(bgImage);