[2024 신입부원 기초 스터디] 이종윤 #6주차 (웹 기초 스터디 마무리~)

 

이번 시간에는 마무리로 지금까지 배운 js를 활용하여 마지막 실습을 했다.

실습 내용은 'stop watch' 만들기!!!

이 실습을 하기 전에 선행 되어야 할 개념 부터 배우자.

 

 

1. Date 객체란?

저번 시간에도 배웠지만 Date 객체는 날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체이다.

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

 

2. 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가 출력된다.

 

3. setTimeout( )란?

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

예를들어

 

는 2초후 2가 출력된다.

4. setInterval(), clearInterval이란?

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

그리고 setTimeout() 함수와 setInterval() 함수를 사용하면 멈추지 않고 계속 반복을 한다. 그러므로 사용한 후에는 반드시 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해야한다.

 

5. 실습 시작 !!!

이 StopWatch의 Html

가장 중요한 js를 만들자

 

가장 먼저 이 StopWatch실습에 쓸 변수를 설정해준다.

여기서 중요한 것은 let으로 한 번 설정한 변수는 재설정 하면 절대 안된다는 것이다.

 

 

그리고 start 버튼을 클릭했을 때 작동하는 js이다.

먼저 이미 돌아가는 중인 시계인지 판별하기 위해 if문과 그의 조건으로 isTimerRuning이라는 flag함수가 false(멈춘 상태)인 것을 확인하고 밑에 과정을 진행한다.

그리고 interval을 사용하여 10미리세컨드(0.01초)를 주기로 이 타이머를 업데이트한다.

마지막으로 이 시계가 작동한다는 것을 표시하기위해 flag함수의 값을 true로 바꿔준다.

 

그리고 Stop버튼을 눌렀을 때 clearInterval를 사용하여 반복을 멈추고 시계가 멈췄다는 것을 알리기 위해 flag함수를 다시 false로 바꿨다.

그리고 Reset버튼을 눌렀을 때 if문을 활용하여 시계가 뭠췄을 때만 밑에 과정이 진행되도록 만들었다.

그리고 seconds와 tens 값을 0으로 바꾸고 innertext를 활용하여 표시되는 값을 00으로 바꾼다.

 

위에서 만들었듯이 Start버튼을 누르면 StartTimer함수가 0.01초마다 Interval된다.

그러므로 0.01초마다 tens값을 1씩 더하고 tens가 한자리 수 일 때 앞부분에 0을 붙여 두 자리 수와 같게 만든다.

second값도 마찬가지이다. 그리고 tens값이 100이 되면 seconds값이 1이 늘고 tens값이 00이 되게 만든다.

완성작!!

 

마지막으로 강조할 점은 한번 설정한 변수는 재설정하면 안된다!!!

 

 

 

 

진짜 마지막으로 그동안 수업 진행해주시고 노력해주신 선배님들 감사합니다 :)