바닐라 JS로 크롬 앱 만들기 [5-1] Quotes(명언)
- Math의
random()function 활용
Math
- 기본 문법 :
Math.function_name- 5개의 배열에서 마지막 item은 4번째이기 때문에 필요한 숫자는 4
.random()
- 0부터 1사이의 랜덤한 숫자 제공
- 10을 곱하면 0에서 10사이의 숫자를 랜덤으로 호출
콘솔
⟩ Math.random() * 10
< 9.2213213412321
- 뒤에 소수점 까지 나오는 float이 출력 되기 때문에 없애줘야 함
소수점을 없애는 함수
.round()
- 반올림 해주는 함수
- 1.4 → 1, 1.5 → 2
콘솔
⟩ Math.round(0.1)
< 0
ceil()
- 숫자를 천장(ceil)까지 높여주는 함수
- 1.1 →2, 1.9 → 2
- 1.0 만이 1이 될 수 있음
콘솔
⟩ Math.ceil(1.1)
< 2
.floor()
- 숫자를 바닥(floor)까지 내려주는 함수
- 1.9 → 1, 1.99999 → 1
콘솔
⟩ Math.floor(1.99999)
< 1
응용
.floor를 활용해서 0~10까지의 숫자 얻기
콘솔
⟩ Math.floor(Math.random() * 10)
< 3
명언 랜덤 출력에 응용
HTML
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>valila js</title> </head> <body> <form id="login-form" class="hidden"> <input required maxlength="15" type="text" placeholder="what is your name?" /> <input type="submit" value="Log in" /> </form> <h2 id="clock">00:00:00</h2> <h1 id="greeting" class="hidden"></h1> <div id="quote"> <span></span> <span></span> </div> <script src="js/greetings.js"></script> <script src="js/clock.js"></script> <script src="js/quotes.js"></script> </body> </html>
10개 명언
const quotes = [
{
quote: "꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.",
author: "괴테",
},
{
quote: "닫혀있기만 한 책은 블록일 뿐이다.",
author: "토마스 풀러",
},
{
quote: "오늘이라는 날은 두 번 다시 오지 않는다는 것을 잊지 말라.",
author: "단테",
},
{
quote: "고난이 지나면 반드시 기쁨이 스며든다.",
author: "괴테",
},
{
quote: "그대의 하루하루를 그대의 마지막 날이라고 생각하라.",
author: "호라티우스",
},
{
quote: "변명 중에서도 가장 어리석고 못난 변명은 시간이 없어서라는 변명이다.",
author: "에디슨",
},
{
quote: "어디를 가든지 마음을 다해 가라.",
author: "공자",
},
{
quote: "자신감은 위대한 과업의 첫째 요건이다.",
author: "사무엘 존슨",
},
{
quote: "승리는 가장 끈기있는 자에게 돌아간다.",
author: "나폴레옹",
},
{
quote: "시간과 정성을 들이지 않고 얻을 수 있는 결실은 없다.",
author: "그라시안",
}
];
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을 곱할 경우 나중에 명언을 추가하면 숫자도 고쳐줘야함
[문제 해결] Array.length 사용
console.log(quotes[Math.floor(Math.random() * quotes.length)]);웹페이지에 랜덤 명언 출력
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;
프론트엔드 개발 일기