[2024 신입부원 기초 스터디] 이종윤 #5주차 (JS_실습: Clock만들기)

window.onload()란?

javaScript는 html 내의 요소들을 움직일 수 있는 dom 객체를 조작하는 방식으로 주로 사용한다.
위부터 차례차례 읽어 들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해 자바스크립트는 작성 위치에 따라 오작동을 일으키기도 한다. 

 예를들어 위와 같이 사용을 하면, 원칙상으로 자바스크립트의 document.getElementById( 'hi' ); 가 html 내부 id가 hi이란 태그가 생성되기도 전에 실행됨으로 문제가 일어난다.

그러므로 자바스크립트 문서를 뒤로 옮겨야만 한다. 

하지만 자바스크립트가 아래쪽에 놓여 있고 길게 늘어지게 된다면 가독성이 떨어져 보기에도 안 좋아진다.이러한 불편을 해결하기 위해서 자바스크립트가 문서가 준비된 상황 이후에 발동하도록만 한다면 문서 앞에 선언해도 상관없게 되는데 이것이 바로 window.onload()이다. 그러므로 아래처럼 사용하면 된다.

 

 

Date 객체란?

날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체이다.

new Date()를 호출하면 새로운 Date 객체가 만들어지는데, new Date()는 다음과 같은 형태로 호출할 수 있다.

• 시간메소드는 getHours(), getMinutes(), getSeconds()... 등이 있다.
• 날짜메소드는 getFullYear(). getMonth(), getDate() … 등이 있다.

 

innerText와 innerHTML란?

 

innerText 는 태그 안의 텍스트를 가져오거나 바꾸는 기능을 한다.

(바뀌는 범위 : <태그>텍스트</태그> => 텍스트만 바뀜)

 

innerHTML는 태그 자체를 가져오거나 바꾸는 기능을 한다.

(바뀌는 범위 : <태그>텍스트</태그> => 전체 다 바뀜)

 

element.innerText = "<div style='color:red'>A</div>";

element.innerText에 html을 포함한 문자열을 입력하면,  html코드가 문자열 그대로 element안에 포함된다.

 

element.innerHTML = "<div style='color:red'>A</div>";

위와 같이 element.innerHTML 속성에 html코드를 입력하면, html element가 element안에 포함되고 alert하면 html이 해석되어 빨간색 A가 출력된다.

 

setTimeout( )란?

setTimeout함수는 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우에  일정 시간이 지난 후에 코드가 실행 될 수 있게 해주는 함수이다. setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다.  ( ※ 1s = 1000ms 이다. )

예를들어

는 2초후 2가 출력된다.

+ setInterval()이란?

setInterval()함수는 웹페이지의 특정 부분을 주기적으로 업데이트 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아오는 함수이다. setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다. 함수 API는 setTimeout() 함수와 비슷한데 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초 단위로 받는다. 

마지막으로 setTimeout() 함수와 setInterval() 함수를 사용한 후에는 반드시 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해야한다.

 

 

지금까지 배운 JS 실습하기

주제: 전자시계만들기

먼저 아까 배운 Date객체를 활용해 시간, 분, 초에 대한 정보를 받아오고 변수로 설정한다.

 

그리고 4주차때 배웠던 js 문법들을 활용해 todayHours와 todatMinutes들의 조건을 설정하고 todayString를 만든다.

 

위에서 배운 innertext를 활용해 todayString값을 ClockDisplay로 옮겨주고

위에서 배운 setTimeout를 활용해 1초마다 재실행하여 시계가 1소마다 업데이트 되도록 해준다.

 

날짜도 똑같은 과정으로 반복해주고 여기에 css 조금 추가하면 완성 ~~

디자인이 영 꽝이라 웃기게 생기긴 했지만 어쩃든 완성!!!

 

감사합니다.