시계 만들기
자바스크립트에서는 어떤 행동을 일정한 간격을 주고 반복하도록 할 수 있다. setInterval(함수명, ms 단위의 간격);과 같다. 이를 이용하면 서버에서 시간을 받아와 보여주는 기능도 만들 수 있다. 좀 더 깔끔하게 보면서 진행할 수 있도록 새로운 clock.js 파일을 만들고 해당 파일을 html 파일에 연결해 주었다. html은 다음과 같이 clock 이라는 클래스의 h2 태그를 추가했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<form id="login-form" class="hidden">
<input required maxlength="15" type="text" placeholder="What is your name?">
<button>Log In</button><br>
</form>
<h1 id="greeting" class="hidden"></h1>
<h2 id="clock">00:00:00</h2>
<script src="js/clock.js"></script>
<script src="js/greeting.js"></script>
</body>
</html>clock.js 파일에서는 배웠던 대로 html 문서 내의 clock 클래스를 변수 지정해주고, 기본 제공해주는 date 객체를 통해 서버의 시간, 분, 초를 받아올 수 있다. 코드는 다음과 같이 작성하면 된다.
function clocking1(){
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
clocking1(); //처음 1초간 생기는 공백을 메우기 위해서 즉시 실행되도록 함.
setInterval(clocking1, 1000);여기서 중요한 점은 clocking1(); 으로 처음 index.html 을 켰을 때 (혹은 새로고침할 때)의 interval을 없애줄 수 있다는 것이다. 그리고 바로 setInterval()을 이용해서 반복될 수 있도록 해주면 된다. 이렇게 위의 코드를 넣고 실행하면 다음과 같은 결과를 볼 수 있다.
아쉬운 점은 시계가 예쁘지 않다는 것이다. 지금이 몇시인지 정확하게 알겠는데, 16:41:8 이라는 숫자에서 마지막 8이 많이 아쉽다. 08로 나왔다면 훨씬 깔끔하고 예쁠텐데. 그래서 배우는 것이 string.padStart(maximum length, "채울 문자열")이다. 이를 이용해서 만든 새로운 함수는 다음과 같다.
function clocking2(){
const date = new Date();
const hour = String(date.getHours()).padStart(2, "0");
const minute = String(date.getMinutes()).padStart(2, "0");
const second = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hour}:${minute}:${second}`;
}
clocking2(); //처음 1초간 생기는 공백을 메우기 위해서 즉시 실행되도록 함.
setInterval(clocking2, 1000);date.getHours나 Minutes 등으로 얻는 값은 문자열이 아닌 숫자형이다. 따라서 바로 .padStart하면 작동되지 않는다. (그래도 오류가 뜨는 건 아니다) 그래서 String()을 이용해서 문자열 형태로 바꿔주고 padStart 해주면 된다. 마찬가지 방법으로 padEnd도 있다!
난수 생성기로 만드는 명언과 배경 띄우기
파이썬에도 존재하고 자바에도 존재하고 C언어에서도 존재하듯이 자바스크립트에도 난수(random number)를 발생시키기 위해서 사용하는 모듈이 있다. 특히 자바스크립트는 내장 모듈이라 라이브러리 없이도 사용할 수 있다. 먼저 이 기능은 또 새로운 기능이니까 새로운 quotes.js 파일을 만들고 해당 사항을 html 파일에 반영해준다. (이따 배경을 위해서도 background.js 파일을 하나 더 추가해줄 예정이니 파일을 하나 더 만들어두고 html에 연결 해둔다.)
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
그리고 html에는 명언을 기록하는 div 칸을 남겨둔다. span 태그 두개로 명언과 그 명언을 남긴 사람을 기록할 수 있게 나눠둔다.
<div id="quote">
<span></span>
<span></span>
</div>그러면 quotes.js 에 명언 리스트를 넣고 랜덤하게 하나의 명언을 뽑아서 보여주는 코드를 넣으면 된다. 하나의 명언을 뽑는데는 Math.random()을 이용할 수 있다. Math.random()은 0에서 1사이의 수를 무작위로 뽑아서 보여준다. 이는 실수 자료형이라서 범위 내의 정수형으로 바꿔주려면 발생된 난수에 범위 내의 수의 개수를 곱해서 Math.floor()을 이용하는 식으로 가면 된다.
const quotes = [
{
quote: "Happiness depends upon ourselves.",
author: "Aristotle",
},
{
quote: "Happiness is when what you think, what you say, and what you do are in harmony.",
author: "Mahatma Gandhi",
},
{
quote:"The greatest glory in living lies not in never falling, but in rising every time we fall.",
author: "Nelson Mandela"
},
{
quote:"The way to get started is to quit talking and begin doing.",
author:"Walt Disney"
}
]
const quote1 = document.querySelector("#quote span:first-child");
const author1 = document.querySelector("#quote span:last-child");
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote1.innerText = todaysQuote.quote;
author1.innerText = todaysQuote.author;배운 것들을 종합하여 이렇게 발생시킬 수 있다. quote1, author1이라는 변수를 사용한 건 quotes안에 있는 객체에도 quote라는 성질이 있고, quote라는 변수도 있다보니 자바스크립트에서 헷갈려 오류라고 떴기 때문이다.
이렇게 하면 예쁘지는 않지만 우리의 의도대로 명언이 뜬다.
배경을 랜덤하게 설정하는 것도 이와 비슷하다. 먼저 html과 같은 폴더 안에 img 라는 폴더를 만들고 내가 맘에 드는 배경 사진의 후보군을 여러 개 뽑는다.
이렇게 이미지는 img 폴더 안에 넣어주고 숫자 붙여줘서 저장했다. 그리고 나서는 background.js를 다음과 같이 입력하면 된다.
const images = ['img1.jpg', 'img2.jpg','img3.jpg'];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);- images 리스트 안에는 내가 저장한 이미지 파일들의 이름과 동일한 문자열들이 들어가야 한다.
- createElement는 처음 나오는데, img tag를 만들어준다고 보면 된다. 하지만 생성은 되었지만 어디에도 나타나지는 않는다.
- 같은 이미지 태그에 .src로 source를 적어준다.
- .appendChild로 이미지 태그를 html의 body 안으로 넣어주면 된다!
이렇게 하면 디자인은 별로지만 어쨌든 우리가 얻고자 했던 요소들은 다 얻은 사이트가 나온다. 추후에 css로 다듬어지면 예쁘게 만들 수 있다.
'TIL > JavaScript' 카테고리의 다른 글
| 2021.7.5 TIL : [JavaScript] 자바스크립트 기초-3 (0) | 2021.07.05 |
|---|---|
| 2021.7.4 TIL : [JavaScript] 자바스크립트 기초-2 (0) | 2021.07.04 |
| 2021.7.3 TIL : [JavaScript] 자바스크립트 기초-1 (0) | 2021.07.04 |
댓글