[JavaScript Basic] Vanilla Js를 사용하여 간단한 프로젝트 만들기 1탄

SMALL

Vanilla js란?

Vanilla Js를 처음 접했을땐, 기존의 React, Vue, Angular와 같은 새로운 프레임워크라고 생각했다. 하지만 찾아보니 Vanilla JS는 어떤 라이브러리, 프레임워크를 사용하지 않은 정말 순수한 JavaScript를 말하는 것이였다......솔직히 처음엔 뭔지 몰라서 쫄았었다...

최근 React의 강세로 Front 개발이 조금더 편해진거 같다. 개인적으로 React를 사용해봤을때 굉장히 편하다고 느꼈지만, JavaScript자체를 이해를 못하고 있다면, 오히려 많은게 생략되었다고 느껴져서 어렵다고 느낄수도 있다고 생각되었다.

때문에 개인적으로 JavaScript를 기초를 조금 더 공부하고자 Vanilla JS로 간단한 프로젝트를 만들어 보려고 한다.

간단하게 오늘은 HTML, js를 연동해서 웹에서 시계를 구현하는 프로젝트를 구현하고자 한다. 시계부터 해서 점차 프로젝트를 키워가는 방식으로 접근할 예정이다.

Home.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</body>

</html>

index.js

const indexDiv = document.querySelector(".js_clockTitle"),

indexH1 = indexDiv.querySelector("h1"),

indexH4 = indexDiv.querySelector("h4");

function getTime() {

const myTime = new Date();

const myMonth = myTime.getMonth();

const myDay = myTime.getDate();

const myHour = myTime.getHours();

const myMin = myTime.getMinutes();

const mySec = myTime.getSeconds();

indexH1.innerText = `${myMonth+1}월 ${myDay}일 `;

indexH4.innerText = `${myHour}: ${myMin < 10 ? `0${myMin}` : `${myMin}`}: ${mySec < 10 ? `0${mySec}` : `${mySec}`}`;

}

function init() {

getTime();

setInterval(getTime,1000);

}

init();

const indexDiv = document.querySelector(".js_clockTitle"),//doucument내에서 js_clockTitle class를 가지고 온다.

indexH1 = indexDiv.querySelector("h1"),// js_clockTitle이란 class즉 div태그 내에서 h1을 담다준다.

indexH4 = indexDiv.querySelector("h4");// 위와 같은 방식으로 h4를 담아준다.

const myTime = new Date(); //myTime에 js에서 제공해주는 Date객체를 생성해서 담아준다.

const myMonth = myTime.getMonth();// myTime인스턴스를 사용해서 내부 객체들을 각각의 변수들에 담아준다.

const myDay = myTime.getDate();

const myHour = myTime.getHours();

const myMin = myTime.getMinutes();

const mySec = myTime.getSeconds();

innerText는 문자열 그대로를 리턴해준다. 때문에 indexH1(h1 태그)에 동적으로 문자열을 쓸수있다. 굳이 HTML을 건드리지 않고 Js만으로도 충분히 수정이 가능하다!..

indexH1.innerText = `${myMonth+1}월 ${myDay}일 `;

indexH4.innerText = `${myHour}: ${myMin < 10 ? `0${myMin}` : `${myMin}`}: ${mySec < 10 ? `0${mySec}` : `${mySec}`}`;

여기서 나는 시간을 제외하고 분과 초에는 삼항연산을 사용하였다. 사용한 이유는 js에서 제공하는 Date자체는 10단위 이하로 떨어지게 되면 한자리 수로 표현하기 때문에 실제 전자시계처럼 보이기 위해서 10단위 아래로도 2자리를 표현하기 위함이였다.

LIST

저작자표시

우주를놀라게하자

[JavaScript Basic] Vanilla Js를 사용하여 간단한 프로젝트 만들기 1탄 :: 우주를놀라게하자

티스토리툴바