해당 실습은 AJAX와 callback 함수에 대한 기본적인 학습이 필요합니다.

• 👉🏼 AJAX 간단 복습
• 👉🏼 AJAX 기본 문법
• 👉🏼 callback 함수란?
• 👉🏼 AJAX + JSON

실습: 실시간으로 동작하는 시계 만들기

<aside> 💡 목표: 실시간으로 (1초마다) 시간 정보를 받아오는 시계 만들기

</aside>

진행 순서

1️⃣ HTML로 위의 사진과 같은 페이지 만들기

참고: 내가 작성한 내용에만 네모 박스(?)를 치고 싶다면 <span> 태그를 사용하면 간단함

+) 아이콘은 아래의 URL에서 가져옴

Alarm

2️⃣ 현재 시간을 띄워줄 수 있도록 JavaScript 코드 작성하기

• makeClock()이라는 이름의 함수 만들기 + 호출하기

(makeClock() 함수 안에 들어갈 내용)

• XMLHttpRequest 객체 생성

• 해당 객체의 open() 함수 작성하기

+) 현재 시간에 대한 JSON 데이터는 아래의 URL에서 가져옴

World Time API: Simple JSON/plain-text API to obtain the current time in, and related data about, a timzone.

• onreadystatechange() 함수 작성하기

  힌트: JSON 데이터를 parsing하고 HTML 문서에 띄워주는 코드가 작성되어야 함

• send() 함수 작성하기

3️⃣ 실시간으로 현재 시간이 변하도록 JavaScript 수정하기

• 기존에 onreadystatechange() 함수에 들어있던 내용을 callback 함수 호출로 만들어주기

  힌트: makeClock() 함수의 인자로 callback 함수 받기

  makeClock() 함수 호출 시 인자로 기존 onreadystatechange() 함수에 들어있던 내용을 적어주기

• setInterval() 함수를 사용하여 1초마다 함수가 수행되도록 수정하기

  힌트: 1초로 설정하려면 인자로 1000을 줘야함

  setInterval(function(){

  makeClock(){

  }, 1000);

  이런 식으로