[2024 신입부원 기초 스터디] #5주차 "디지털 시계 만들기"

01. window.onload() 속성

- 해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성

- 웹 페이지에서 여러 번 사용해도 window.onload() 함수는 하나만 적용

 

 

02. Date 객체

- 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수

시간 메소드 : getHours(), getMinutes(), getSeconds()

날짜 메소드 : getFullYear(), getMonth(), getDate()

//현재 날짜 및 시간이 출력
let date = new Date();
console.log(date);

 

 

03. innerText와 innerHTML

- innerText : Element의 속성으로, 해당 Element 내에서 사용자에게 보여지는 텍스트 값을 가져오거나 설정 가능

- innerHTML : Element의 속성으로, 해당 Element의 HTML,XML을 가져오거나 설정 가능

 

 

04. setTimeout()

- 특정 시간이 지난 다음에 코드를 실행하는 함수

//3초가 지난 후, "Wink" 출력
setTimeout(function(){
    console.log("Wink");
}, 3000)

 

 

05. 백틱

백틱을 사용하면 ${}를 사용해서 문자열과 변수를 같이 사용 가능

`${todayHours} : ${todayMinutes} : ${todaySeconds}`

 

 

 

06. 동기처리함수, 비동기처리함수

동기 : 어떤 작업을 실행할 때 그 작업이 끝나기를 기다리는 방식을 의미

- 작업의 순서를 보장

- 작업이 끝날 때까지 결과를 기다리는 것이 가능

비동기 : 어떤 작업을 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식을 의미

- 병렬적인 작업 처리가 가능 (작업이 오래 걸리는 경우 시간을 절약)

 

자바스크립트는 싱글 스레드 기반의 프로그래밍 언어 (한 번에 하나의 작업만 처리 가능)

     --> 비동기처리 방식 필요

 

 

07. 디지털 시계 만들기

디지털 시계 만들기 완성본

digitalclock.zip

0.00MB

html, css, js 파일