2020-01-15
#3. 0 Making a JS Clock part One (09:54)
Momentum
시계를 만들어보자.
항상 무언갈 만들 때 작은 부분으로 나눠서 진행한다고 한다.
그리고 함수를 정의할때 init() 함수를 만들고 그 안에 함수들을 생성하고
init() 함수를 호출해서 한다고 한다.
html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<script src="index.js"></script>
<scipt src="clock.js"></scipt>
</body>
</html>
JavaScript
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");
function getTime() {
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText=`${hours}:${minutes}:${seconds}`;
}
function init() {
getTime();
}
init();이번 강의에서는 시간을 구하고 브라우저에 출력하는 코드를 짜보았다.
위에서 말했듯이 작은부분을 나눠서 진행을 해보면
html문서에 script태그를 이용해서 자바스크립트 파일을 연결해준다.
연결해주고 나서 <div> 태그를 이용하여 js-clock이라는 클래스 이름을 부여하고
<div> 태그 안에 <h1> 태그를 이용하여 00:00이라는 시간을 의미해줄 수 있는 문자를 써준후
자바스크립트 파일로 이동한다.
이동후 html 코드 안에서 <div class="js-clock">을 객체화시켜 clockContainer에 저장 후
<div> 클래스 안에 있는 <h1> 태그를 clockTitle 변수에 저장시킨다.
이후 시간을 불러오는 함수를 정의한다.
Date(); 객체를 생성시켜 시간을 구하는 각 getMinutes, getHurs(), getSeconds(); 함수를 이용해
date, minutes, hours, seconds 변수에 저장시킨 후 innerText를 이용해
<h1> 태그를 담아둔 clockTitle변수에 시간을 초기화시켜준다.
이후
init() 함수 안에 getTime() 함수를 넣고 init()을 실행하는 코드를 작성하고 브라우저를 확인하면
시간이 잘 나오는 걸 확인할 수 있다.
지금 코드의 문제로는 현재시간이 계속 업데이트되지 않는다.
업데이트를 하려면 계속 새로고침을 해주어야 하는데
다음 강의에서 setInterval 함수를 이용해서 자동으로 업데이트되게 하는 방법에 대해서 알려준다고 한다.
#3. 1 Making a JS Clock part Two (07:17)
setInterval
ternary operator(삼항 연산자)
JavaScript
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");
function getTime() {
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText=`${hours<10 ?`0${hours}`:hours}:${minutes <10 ? `0${minutes}`: minutes}:${seconds < 10 ? `0${seconds}`: seconds}`;
}
function init() {
getTime();
setInterval(getTime,1000);
}
init();위의 이전 강의에 기존 코드에서 바뀐 코드들을 한번 보자.
init() 함수 부분에 setInterval 함수를 추가해놓은걸 확인할 수 있는데
setInterval함수에 대해 짧게 말하자면 두 개의 인자를 받는다 첫 번째 인자에는 함수를 두 번째 인자에는 ms단위의 간격으로 함수가 다시 재실행되야하는지를 정해준다.
추가하고 나서 시간을 나타내는 데 있어서 1시 1분 1초와 같이 1의 자리인 시간대에서 01 02 03 이런 식으로 나오는 게 보기에 더 직관적이어서 바꾸고자 하는데 이럴 때 IF-ELSE문을 이용해서 할 수 있겠지만
여기서는 삼항 연산자를 이용해서 간단하게 바꿔보았다.
삼항 연산자는 IF? ~~~ : ELSE 이런 식으로 써주면 된다.
hours가 10 이하라면 앞에 0을 붙여주도록 하고 아니라면 그냥 그대로의 hours가 출력되도록.
이제 자바스크립트에서의 시간을 불러오는 함수는 여기서 끝이고
다음 강의에서는 사용자의 이름을 불러오는 방법에 대해서 강의를 한다고 한다.
#3. 2 Saving the User Name part One (13:24)
form
localstorage
브라우저의 localstorage에는 작은 자바스크립트의 정보들이 있다.
위에서 만든 코드의 브라우저에서 확인해보자.
그리고 여기다 장난을 해볼 것이다.
이를 코드로 구현해서 브라우저에 띄워보겠다.
html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
<form class="js-form form">
<input type="text" placeholder="what is your name?"/>
</form>
<h4 class="js-greetings greetings"></h4>
</div>
<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>
css
.form,
.greetings{
display: none;
}
.showing{
display: block;
}JavaScript
const form =document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting= document.querySelector(".js-greetings")
const USER_LS = "currentUser",
SHOWING_CN = "showing";
function paintGreeting (text) {
form.classList.remove(SHOWING_CN)
greeting.classList.add(SHOWING_CN)
greeting.innerText = `Hello${text}`
}
function loadName(){
const currentUser = localStorage.getItem(USER_LS)
if(currentUser === null){
// he is not
} else {
// she is
paintGreeting(currentUser);
}
}
function init() {
loadName()
}
init();위의 코드를 보면 일단 form 태그는 무시하자 다음 강의를 위한 초석이다.
이번 강의에서 설명하고자 하는 부분은 따로 있다.
h4태그에 클래스를 js-greetings(js전용) greetings(css전용)을 추가하자
+ 클래스를 만들 때도 하나만을 위한 클래스로 만드는 게 좋다.
아무튼 추가 후 css에서
. greetings를 display:none으로 브라우저에서 지워주는 걸 확인하고
그아래
. showing 클래스를 css에 작성해서 block 형식으로 바꿔주는 코드를 작성해준다.
이후 JS파일로 넘어와서
js-greetings태그를 객체화시켜서 greeting안에 넣어준다
그리고 showing과 currentUser 문자를 담을 변수인 USER_LS와 SHOWING_CN을 생성하고
loadName 함수를 만들고 그 안에
localStorage객체의 getItem 함수를 이용해서 USER_LS (currentUser)라는 key에 대한 value를 가져와
currentUser변수에 넣어주고
if-else 조건문으로 존재 여부를 확인해서 없다면 기존 적용되어있는 display:none에는 변화가 없을 테니
브라우저에는 아무것도 안나올 것이고
존재하면 else문에 paintGreeting(crrentUser) 함수를 실행할 것인데
위의 paintGreeting 함수를 설명해보자면
기존 display:none의 값을 block으로 바꿔서 브라우져에 띄워지게 만들고
innerText로 Hello currentUSER에 대한 VALUE값이 출력되게 만드는 것.
다음 강의에서는 input의 값을 저장하고 사용자를 불러오는 거에 대해서 해본다고 한다.
'노마드코더 > 바닐라JS로 크롬앱 만들기' 카테고리의 다른 글
| 바닐라JS 2주 완성반 DAY6: #3.5~3.7 (0) | 2021.01.19 |
|---|---|
| 바닐라JS 2주 완성반 DAY6: #3.3~3.4 (0) | 2021.01.17 |
| 바닐라JS 2주 완성반 DAY4 : 2.5~2.7 (0) | 2021.01.15 |
| 바닐라JS 2주 완성반 DAY3 : 2.0~2.4 (0) | 2021.01.14 |
| 바닐라JS 2주 완성반 DAY2 : 1.6~1.10 (0) | 2021.01.12 |
