[TIL-46] 노마드코더 크롬앱(JS) 클론코딩 #5.0~#6.0

#5 시계

Intervals

• 파일 세팅
  • css는 css폴더에, js는 js 폴더에
  • js 파일은 greeting, clock 등으로 기능별로 쪼개서 만듦.
  • 각각 html 파일에 잘 연결시키기
• html
  • clock 아이디 가진 h2 태그 만듦.
  • "00시 00분"을 디폴트값으로 둠.
• js
  • h2 태그 불러와 텍스트 집어넣기.
• interval : 매번 일어나야 하는 무언가.
  • 예) 매 2초
  • setInterval(실행할 함수, 함수가 호출될 간격 ms);

 

Timeouts and Dates

• timeout : interval과 달리 일정 시간이 지난 후 한번만 실행.
  • setTimeout(sayhello, 5000ms);
• date
  • new Date() : 오늘 날짜 가져옴.
  • Date.prototype.필요한함수()
    • getFullYear, getHours, getMilliseconds, getMinutes, getMonth 등
    • getDay : 요일을 일요일=0부터 숫자로 알려줌.
    • getDate : 며칠인지 알려줌.
• interval과 date 이용해서 매초마다 현재 시간을 업데이트.
  • 시계 모양 출력
    • const date = new Date();
      console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
    • 인터벌 사용하면 실시간인 것처럼 보임.
    • 문제는 00:00:00의 형태가 아니라 한자리 숫자일 때 0:12:0 이런 식으로 나옴.
  • 콘솔이 아니라 h2 태그 안에 innerText로 넣어줘야 함.
  • interval의 문제는 처음에 1초 기다려야 뜬다는 것. 새로고침 시 바로 실행되게 따로 함수 한번 써야 함.

 

PadStart

• 00:00:00, 즉 string을 문자 두 개로 채우기.
  • string이 항상 최소 2개의 문자 가져야 함.
  • 아니라면 앞에 0 추가.
• padStart(원하는 길이, "길이가 짧을 때 앞에 추가할 문자")
  • string에 쓰는 함수. 예) "1".padStart(2, "0")
    • date.getHours()는 숫자이기 때문에 String() 사용해서 문자로 바꿔줘야 함.
  • padEnd : 뒤에 문자 추가.

 

#6 명언과 배경

Quotes

• html
  • id가 quote인 div 안에 span 두 개 만듦.
• js
  • 명언 object들이 들어있는 배열 만듦.
  • 명언과 저자가 들어갈 span을 변수로 각각 불러옴.
  • quotes 배열의 0~n-1(인덱스)번째 데이터를 랜덤으로 불러와야 함.
    • Math 모듈 사용. 그 안의 여러 함수들 중 random().
      • 0~1 사이의 랜덤 숫자 제공.
      • 최댓값이 되길 원하는 수를 곱해주면 0부터 그 값까지의 수가 나옴.
        • 예) Math.random() * 10
      • 여기서는 배열의 길이를 알아내서 곱하면 됨. 배열명.length
    • 소수를 정수로 만들어주기 위한 function
      • round : 반올림
      • ceil : 올림
      • floor : 내림