오늘은 (제이쿼리를 위한) 자바스크립트 수업 마지막 날!
선생님이 과제를 내주셨는데 내가 한 방법이랑 너무 달라서 정리해보려고 한다.
📍 자바스크립트를 이용해 디지털 시계 구현하기 !
< 예시 이미지 파일 >
HTML 파일
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>자바스크립트 탁상시계</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="clock">
<h2 id="hour"></h2>
<h2 id="minute"></h2>
<h2 id="second"></h2>
<h4 id="weekday"></h4>
<h3 id="year"></h3>
<h3 id="month"></h3>
<h3 id="date"></h3>
</div>
<script src="common.js"></script>
</body>
</html>🔑 클래스가 clock인 div 요소가 실제 시계 역할을 담당할 요소이다.
🔑 h2 태그가 시간을, h3 태그가 날짜를, h4 태그가 요일을 텍스트로 표시한다.
(여기서 내가 코드짤 때 노가다 한 이유 : id에 꽃혀서 h태그 다 같게 묶어둔거 못봄ㅠ)
CSS 파일
<style>
@import url('https://fonts.googleapis.com/css?family=Electrolize');
*{ padding: 0; margin: 0; font-family: 'Electrolize', sans-serif; }
.clock{
width: 680px; height: 160px; margin: 50px;
padding: 30px 40px; box-sizing: border-box;
background-color: lightgray; border-radius: 15px;
}
.clock h2{
float: left; width: 100px; height: 100px; margin-right: 20px;
background-color: #000000; color: #FFFFFF; text-align: center; line-height: 100px; font-size: 65px;
text-shadow: 0px 0px 5px yellow; border-radius: 5px;
}
.clock h4{
float: left; width: 240px; height: 45px; margin-bottom: 10px;
background-color: #000000; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 35px;
text-shadow: 0px 0px 3px yellow; border-radius: 5px; text-transform: uppercase;
}
.clock h3{
float: left; width: 50px; height: 45px; margin-right: 20px;
background-color: #000000; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 30px; text-shadow: 0px 0px 3px yellow; border-radius: 5px; }
#year{ width: 100px; }
#date{ margin-right: 0; }
</style>🔑 검은화면에 하얀색 글씨로 설정하였다.
🔑 모서리 둥글기는 5px로 설정하였다.
내가 작성한 자바스크립트 코드
<script>
function getTime(){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
document.getElementById("hour").innerHTML = hour;
document.getElementById("minute").innerHTML = minute;
document.getElementById("second").innerHTML = second;
setInterval(getTime,1000);
}
getTime();
var today = new Date();
var week = ['Sunday','Monday','Tuesday','Wendsday','Thursday','Friday','Saturday'];
var day = today.getDay();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
document.getElementById("weekday").innerHTML = week[day];
document.getElementById("year").innerHTML = year;
document.getElementById("month").innerHTML = month;
document.getElementById("date").innerHTML = date;
</script>구현은 해냈는데..선생님이 알려주신 코드를 보고 나니까
내가 작성한 코드의 문제점들이 너무 많았다.
📌 id 에 꽃혀서 h태그로 한번에 묶을 생각 안한 것
📌 선생님이 날짜랑 시간 한자리수면 앞에 0붙이라고 했는데 안함.
📌 시간만 실시간으로 바꿀거냐고...그게 시계 맞냐고...
📌 day 겹치는데 신경도 안씀
📌 조건문, 반복문 배웠는데 안 써먹음 (디자인 하느라 복습을 못한 내 죄..)
선생님이 작성하신 자바스크립트 코드
<script>
var h2 = document.querySelectorAll('.clock h2');
var h3 = document.querySelectorAll('.clock h3');
var h4 = document.getElementById('weekday');
// 시간 관련 함수 선언 - 왜냐면 두번실행 : 초기실행, setInterval에 실행
function clock(){
// 오늘날짜시간선언
var today = new Date();
// 시간, 날짜, 요일 담기
var time = [today.getHours(),today.getMinutes(),today.getSeconds()];
var date = [today.getFullYear(),today.getMonth() + 1,today.getDate()];
var week = ['Sun','Mon','Tues','Wednes','Thurs','Fri','Satur'];
var day = today.getDay();
for(var i=0;i<h2.length;i++){
if(time[i] < 10){
time[i] = '0' + time[i];
}
if(date[i] < 10){
date[i] = '0' + date[i];
}
h2[i].innerHTML = time[i];
h3[i].innerHTML = date[i];
}
h4.innerHTML = week[day] + 'day';
}
// 초기 실행 - 처음에 한번만 실행
clock();
// 콜백함수 자리에 함수를 호출할 때는 ()를 열고 닫지 않음
setInterval(clock,1000);
</script>📌 getTime은 함수가 호출된 시점의 시간을 나타내기 위해 정의한 함수.
📌 실시간 도출하기 위해 setInterval 속성 이용함.
- 밀리초 단위이기 때문에 1초를 1000으로 적어야함.
📌 선생님은 역시나 h2,h3을 묶어서 문서내에 출력하셨음
📌 요일 적을때 day를 7번 적을 필요 없이 뒤에 +'day' 하나 붙여주심
📌 for문 중첩으로 if문도 사용하셨음
<script>
for(var i=0;i<h2.length;i++){
if(time[i] < 10){
time[i] = '0' + time[i];
}
if(date[i] < 10){
date[i] = '0' + date[i];
}
h2[i].innerHTML = time[i];
h3[i].innerHTML = date[i];
}
h4.innerHTML = week[day] + 'day';
</script>여기가 제일 어려워서 정리하자면
📌 변수 i 가 0일때부터 / h2태그의 값의 갯수를 / 1씩 커지게 반환해라.
📌 만약 변수 time이 10보다 작을 때, 앞에 0을 붙여라.
📌 만약 변수 date가 10보다 작을 때, 앞에 0을 붙여라.
🔑 .innerHTML : HTML 요소의 내용을 변경하고 싶은 경우에 사용하는 Element 객체의 프로퍼티(속성&메소드)
📌 HTML 파일에 h2,h3라고 적혀있는 내용을 각각 time과 date로 바꿔라.
📌 HTML 파일에 h4라고 적혀있는 내용을
📌 week가 요일이 들어있는 배열인데 오늘의 날짜에 해당하는 값만 가져오기 위해 week[day] 작성.
(그리고 뒤에 공통문자 + 'day' 붙여주기)
지금까지 배운 내용의 총집합이라고 해서 긴장했는데 역시나..
오늘도 개발자의 꿈을 다시 한번 생각해보는.... 그런 시간....
기초부터 이렇게 무너지면 안되는데ㅠㅠ 다시 복습하러 가야지..(눈물찔끔)
