[생활코딩] #디지털 시계 만들기 #입문자를 위한 자바스크립트 기초 강의

 

 

✅ 객체를 만드는 생성자

 

1️⃣ 객체 개념 복습하기

 

어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단, 자바스크립트 코드 내에서 객체란 "값 또는 기능을 가지고 있는 데이터" 이다.

 

 

2️⃣ 생성자

 

객체를 생성할 때 사용하는 함수로서, "생성자 함수"라고도 한다. 사용할 기능을 정의한 일반 함수와 생성자 함수 사이에 특별한 문법적 차이는 존재하지 않는다. 즉, 함수는 생성자 역할을 할 수 있다. 단, 생성자 함수는 객체 생성을 목적으로 만드는 것이다.

 

 

👌 생성자의 쓸모는?

 

자바스크립트가 제공하지 않는 유형의 데이터를 창조할 수 있다!

 

 

3️⃣ 키워드 this 사용하기

 

생성자 함수 정의 시 this 키워드는 객체 그 자신을 의미한다. this를 이용해 해당 객체의 속성이나 메소드를 추가할 수 있다.

 

// 강아지를 표현하는 "Dog"객체를 만들고 싶다
function Dog(){
	this.name = "콩이"
    this.breed = "시츄"
}

 

=> 일반적으로, 생성자 함수명의 첫글자는 대문자로 한다(필수가 아닌 관례)

 

 

4️⃣ 객체 생성은 new 연산자로

 

생성자 함수는 "객체를 이렇게 만들겠습니다"에 대한 정의일 뿐이며, 실제 객체가 생성되기 위해서는 new 연산을 통해 객체를 반환해야 한다.

 

function Dog(){
	this.name = "콩이"
    this.name = "시츄"
}

// Dog 객체를 생성하고, myDog 라는 이름을 붙이겠다.
const myDog = new Dog();
console.log(myDog.name) // 콩이
console.log(myDog.breed) // 시츄

 

 

5️⃣ 생성자 하나로 여러 개 만들기

 

생성자 함수는 "객체를 이렇게 만들겠습니다"에 대한 정의, 즉 "설계도"의 역할을 한다. 따라서 생성자 함수 하나로 객체를 여러 개 만들 수도 있다.

 

// 생성자에도 매개변수를 정의할 수 있다.
function Dog(eachName, eachBreed){
	this.name = eachName
    this.breed = eachBreed
}

const one = new Dog("바둑이", "진돗개");
const two = new Dog("하나코", "시바견");
const three = new Dog("마르코", "셰퍼드");

 

 

✅ 기본 생성자 Date

 

1️⃣ 기본 생성자

 

내장 생성자, 빌트인 객체(built-in object)라고도 한다. 자바스크립트는 처음부터 사용할 수 있는 기본 객체 및 생성자를 제공하는데, 그중 대표적인 내장 생정자가 바로 날짜와 시간에 대해 표현하는 Date이다.

 

=> 이미 브라우저 자바스크립트에서 제공하는 window 객체를 사용해오고 있었는데, 이 또한 내장 객체랑 할 수 있다.

 

 

2️⃣ Date

 

Date는 날짜와 시간을 처리하는 다양한 메소드가 정의된 내장 생성자이다.

 

// 코드가 실행되는 시점의 날짜와 시간 정보를 담은 객체
const now = new Date()

// 2008년 5월 10일의 날짜와 시간 정보를 담은 객체
const then = new Date(2008, 5, 10)

// Date 객체끼리는 밀리초 단위로 연산된다.
const interval = now - then 
console.log(interval) // 419184288514

 

 

3️⃣ Date 객체 주요 메소드

 

출처 : 생활코딩 강의

 

const h1 = document.querySelector("h1")


const now = new Date()

const hour = now.getHours()
const minu = now.getMinutes()
const seco = now.getSeconds()

const nowTime = `${hour}:${minu}:${seco}`

h1.textContent = nowTime;

콘솔에 출력된 모습

 

 

html에 h1 태그를 만들어 놓고 쿼리셀렉터로 가져온 후, 시+분+초를 h1으로 나타내었다.

 

 

✅ 타이머 관련 기능들

 

1️⃣ setTimeout

 

정해진 시간이 지나고 나면 주어진 함수를 실행 해주는 타이머 메소드!

 

setTimeout(실행할 함수, ms 단위의 시간)

 

// 1000ms 가 지나고 나면 함수를 실행한다!
setTimeout(
	function(){
    console.log("재밌다")
    }
. 1000)

 

2️⃣ setInterval

 

일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드!

 

setInterval(반복 실행할 함수, ms 단위의 시간)

 

// 500ms 마다 함수를 반복 실행한다!
setInterval(
	function(){
    console.log("안녕하세요")
    }
, 500)

 

3️⃣ clearInterval

 

setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면, 타이머는 0이 아닌 숫자를 반환한다. 숫자는 타이머의 ID를 의미하며, 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 실행이 취소된다.

 

let timer;
timer = setInterval(
	function(){
    console.log("안녕하세요")
    }
, 500)

// 셋팅된 타이머를 멈춰주세요(취소해주세요)!
clearInterval(timer)

 

const button = document.querySelector("button")

let interId
interId = setInterval(function(){
    console.log(1234)
}, 2000 )

// interval은 0이 아닌 숫자를 id로 반환하는데, 랜덤으로 반환한다.
console.log(interId)

button.addEventListener("click", functin(){
    // setInterval로 등록한 타이머 동작을 멈출 수 있다.
    clearInterval(interId)
})

 

clearInterval 메소드는 주어진 ID에 해당하는 타이머를 제거한다(멈춘다).