자바스크립트로만 간단한 크롬 웹 클론 코딩을 해보자.
타이머제작
우선은 웹 페이지를 만들 기본 html이 필요하다. 폴더에 html파일과 css 그리고 시계를 만들 js파일을 만들어준다.
html파일
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<div class="js-clock">
<h1 class = "js-title">00:00</h1>
</div>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
js파일은 <script src = 'file_name.js'></script> 로 적용하고
<div> 태그안에 h1태그가 있다. 각 태그의 클래스 이름이 명시되어 있다.
css파일
|
1
2
3
|
h1{
color:blue;
}
|
css파일은 h1태그에만 설정한다. h1태그의 색이 파란색으로 나타날 것이다.
이제 자바 스크립트파일을 작성하여 타이머를 제작해본다.
Js파일
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector('.js-title');
function getTime(){
const date = new Date();
const min = date.getMinutes();
const hour = date.getHours();
const sec = date.getSeconds();
clockTitle.innerHTML = `${hour < 10 ? `0${hour}`: hour}:${min < 10 ? `0${min}` : min}:${sec < 10 ? `0${sec}` : sec}`;
}
function init(){
getTime();
setInterval(getTime,1000);
}
init();
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector('.js-title');
이부분을 보자. document.querySelector('클래스이름') 이 중요하다.
이것은 clockContainer 라는 변수는 해당 '클래스이름' 을 가지는 태그를 가지게 된다.
즉 clockContainer 변수는 'js-clock' 클래스 이름을 가지는 태그를 모두 가지고 우리는 이 변수를 가지고 해당 태그의 내용을 작업할 수 있다. 아래 그림을 보면 이 변수가 가지는 의미를 이해할 수 있다.
그렇다면 clockTitle은 무엇일까?
div 클래스인 clockContainer 안에 있는 태그들 중에 클래스 이름이 js-title 인 태그를 뜻한다. 아래 그림과 같다.
물론 clockContainer만을 가지고 h1태그에 접근할 수 있겠지만, 이렇게 따로 변수들을 설정하여 개발하는것이 좋다.
이제 init() 함수를 보자. 항상 스크립트의 시작은 init() 로 시작하여 모든 기능들을 분리하는 함수들을 만들고 병합할 것이다. init안에 gettime() 함수가 있다.
시간을 표시하기 위해 Date객체를 생성해준다. 그리고 시간, 분, 초 를 저장하는 변수 3개가 선언되어있다. 그리고 이 3개를 표시하는 라인이 있다.
clockTitle.innerHTML = `${hour < 10 ? `0${hour}`: hour}:${min < 10 ? `0${min}` : min}:${sec < 10 ? `0${sec}` : sec}`;
먼저 innerHTML은 querySelector로 가져온 도큐먼트 오브젝트의 내용이나, 내부 HTML 코드를 JavaScript 코드에서 변경 하고 사용하기 위함이다.
clockTitle 객체에 오른쪽의 값들을 넣어서 반환해준다고 생각하면 된다. innerText를 사용해도 무방하다.
init()의 setInterval() 함수가 없다면 이렇게 시간이 반환된것이 보이고 멈춰있는것을 확인할 수 있다. 참고로 뒤의 `{hour < ..... sec}`; 이 있는데 삼항연산자와 ES6문법의 Templete String 이다. 좋은기능이니 알아두자. 필자의 ES6 문법을 참고하면 된다. 삼항 연산자는 다른 프로그래밍 언어에서 쓰는것과 같다.
암튼, clockTitle의 객체가 가지는 값들이 우리가 원하는 시간대로 수정이 잘 되었다. 이제 이것을 실시간으로 움직이도록 조정해보자.
setInterval() 함수는 () 인자로 (function, 시간) 인데 function을 매 시간마다 호출하게 된다.
즉 setInterval(getTime,1000) 은 getTime 함수를 1초마다 호출한다는 뜻이다. 이것으로 1초마다 getTime함수로 시간을 갱신하면서 innerHTML로 객체에 반환하여 우리가 원하는 시간을 실시간으로 얻을 수 있다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 페이지개발 : localstorage 변경 (0) | 2019.12.06 |
|---|---|
| [javascript] 페이지 개발 : localstorage (0) | 2019.11.18 |
| [JavaScript]참조 (0) | 2019.06.02 |
| [JavaScript]Object 객체 (0) | 2019.06.02 |
| [JavaScript]표준 내장 객체 (0) | 2019.05.29 |