6.0 Quotes
Math.random() - 0부터 1사이에 아무 숫자나 랜덤하게 출력해줌
Math.round() - 1.1~1.5 까지는 1로 1.6~1.9 까지는 2로 출력 (반올림)
Math.ceil() - 숫자를 천장까지 높여주는 것 (올림함수)
Math.floor() - 숫자를 바닥까지 내려주는 것 (내림함수)
Math.floor(Math.random()*10) - 응용 예시
[1,2,3,4,5].length // ~~~.length = 배열의 길이를 알려줌
5<명언 10개 중에서 랜덤하게 출력되기>
-last code-
const quotes = [
{
quote:"True life is lived when tiny changes occur.",
author:"Leo Tolstoy"
},
{
quote:"He who has never hoped can never despair.",
author:"George Bernard Shaw"
},
{
quote:"The higher the buildings, the lower the morals.",
author:"Noel Coward"
},
{
quote:"If a free society cannot help the many who are poor, it cannot save the few who are rich.",
author:"John F. Kennedy"
},
{
quote:"It takes a long time to bring excellence to maturity.",
author:"Publilius Syrus"
},
{
quote:"A person is never happy except at the price of some ignorance.",
author:"Anatole France"
},
{
quote:"If you tell the truth you don't have to remember anything.",
author:"Mark Twain"
},
{
quote:"Laughter is the tonic, the relief, the surcease for pain.",
author:"Charlie Chaplin"
},
{
quote:"When anger rises, think of the consequences.",
author:"Confucius"
},
{
quote:"Energy is eternal delight.",
author:"William Blake"
},
]
const quote = document.querySelector("#quote span:first-child"); //첫번째꺼 (quote)
const author=document.querySelector("#quote span:last-child"); //마지막꺼 (author)
const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)]
//랜덤 수를 배열의 길이 만큼 곱하고 그걸 내림함수로 내린 수 = 배열의 몇번째꺼
quote.innerText = todaysQuote.quote; // todaysQuote에서 나온거의 quote 출력
author.innerText = todaysQuote.author; // todaysQuote에서 나온거의 author 출력<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Momentum App</title>
</head>
<body>
<form class="hidden" id="login-form">
<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/greeting.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script> //요것도 추가
</body>
</html>
6.1 Background
Javascript에서 만들어서 html에 생성시키는 것을 처음으로 해보았음
-last code-
const images=["0.jpeg","1.jpeg","2.jpeg"];
const chosenImage=images[Math.floor(Math.random()*images.length)];
//js에서 html로 갖다주기
const bgImage=document.createElement("img");
bgImage.src=`img/${chosenImage}`;
document.body.appendChild(bgImage);createElement = element를 생성해주는 함수
appendChild = 선택한 요소 안에 자식요소 추가하는 함수
근데 나는 왜 사진이 안나오고 저따구로 나올까
ㄴ 5/10 스터디에서 sbn이 해결 해주셨다 !!
