[2024 신입부원 기초 스터디] 백채린 #5주차 (Clock_실습)

window.onload()

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

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

 

window.onload = () => {
  console.log("wink");
}

 

 

Data 객체 

- 날짜와 시간을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수

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

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

 

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

 

 

innerText

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

innerHTML

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

 

// innerText
// 스타일 적용되지 않은 기본 폰트로 <div style = 'color:red'>innerText</div> 출력
const innerT = document.getElementById('innerT');
innerT.innerText = "<div style = 'color:red'>innerText</div>";
console.log(innerT);

// innerHTML
// 스타일 적용된 빨간색 폰트로 innerHTML 출력
const innerH = document.getElementById('innerH');
innerH.innerHTML = "<div style = 'color:red'>innerHTML</div>";
console.log(innerH);

 

 

setTimeout()

- 특정 시간이 지난 다음에 코드를 실행하는 함수 ex) 3s = 3,000ms

 

setTimeout(function() {
 console.log("Hello World");
}, 2000); //2초 후 "Hello World" 출력

 

 

---

 

 

Clock 실습

 

window.onload = () => {
    showTime();
    showDate();
}

const showTime = () => {

    // 1. 시간, 분, 초 정보가 필요합니다. (Date 객체 사용)
    let data = new Date();
    let hour = data.getHours();
    let minute = data.getMinutes();
    let second = data.getSeconds();
    let time = "AM"

    // 2. hour에 대한 조건
    // - 자정 = 0시가 아니라 12시로 바꿔서 보여주기 (12:00 AM)
    // - AM -> PM으로 넘어가는 경우 (13:00 AM -> 1:00 PM)
    if (hour == 0){
        hour = 12;
    }
    
    if (hour > 13){
        hour = hour - 12;
        time = "PM";
    }
    
    // 3. 시간이 10 이하인 경우 앞에 0 붙여주기 (ex> 09:00 AM / 08:00 PM)
    if (hour < 10){
        hour = `0${hour}`;
    }
    if (minute < 10){
        minute = `0${minute}`;
    }
    if (second < 10){
        second = `0${second}`;
    }

    // div 태그에 텍스트 전달.
    const a = hour;
    const b = minute;
    const c = second;
    console.log(`${a}:${b}:${c} ${time}`);
    const innerT = document.getElementById('ClockDisplay');
    innerT.innerText = `${a}:${b}:${c} ${time}`;


    // setTimeout 설정
    setTimeout(showTime, 1000);


}

const showDate = () => {

    // 1. 연, 월, 일 정보가 필요합니다. (Date 객체 사용)
    let data = new Date();
    let year = data.getFullYear();
    let month = data.getMonth() + 1;
    let day = data.getDate();

    console.log(year, month, day);

    // 2. month와 day 조건
    // - 10 이하일 경우 앞에 0 붙여주기 (ex> 2024/9/3 -> 2024/09/03)
    if (month < 10){
        month = `0${month}`;
    }

    if (day < 10){
        day = `0${day}`;
    }


    // div 태그에 텍스트 전달 (DOM 사용)
    let a = year;
    let b = month;
    let c = day;
    console.log(`${a}/${b}/${c}`);
    const innerT = document.getElementById('DateDisplay');
    innerT.innerText = `${a}/${b}/${c}`;


    // setTimeout 설정
    setTimeout(showDate, 1000);

}