[바닐라코딩]

[바닐라코딩 | Javascript] - This Month

개발잘하고싶음 2023. 3. 22. 14:17

1)문제

 

This Month - Starter Kit

📌 현재 날짜를 기준으로, 이번 달의 일수가 1일부터 표시되어야 합니다.

book.vanillacoding.co

 

2)결과

2023년 3월

 

3)풀이

더보기

(1)HTML

<body>
  <table>
    <tr>
      <td>일</td>
      <td>월</td>
      <td>화</td>
      <td>수</td>
      <td>목</td>
      <td>금</td>
      <td>토</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>    
  </table>
</body>

(2)CSS

table {
  //크기 설정
  width:500px;
  height:500px;
  
  //본인 가로세로 가운데 정렬
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin:auto ;
  //자식요소 가로세로 가운데 정렬
  display:flex;  
  align-items:center;
  justify-content:center; 
}

td {
  width:50px;
  height:50px;
  //글자 가운데정렬
  text-align:center;
  border:thin solid;
  border-color:black;
}

 

(3)JS

①무식하게

let date = new Date('2023-03-01');
let day = date.getDay();

let trEles = document.querySelectorAll('tr')

for(let i=day; i<7; i++){
  trEles[1].children[i].textContent= i-2
}

for(let i=0; i<7; i++){
  trEles[2].children[i].textContent= i-2+7 
}

for(let i=0; i<7; i++){
  trEles[3].children[i].textContent= i-2+7+7 
}

for(let i=0; i<7; i++){
  trEles[4].children[i].textContent= i-2+7+7+7 
}

for(let i=0; i<6; i++){
  trEles[5].children[i].textContent= i-2+7+7+7+7 
}

4)관련 학습

(1)Date()와 new Date() 차이

①Date()  - date()가 아니다!

new 키워드가 없는 Date() 함수는 인수를 무시하며, 현재 날짜 및 시간을 나타내는 문자열을 반환합니다.

Date('asd')
// 'Wed Dec 22 2021 19:58:27 GMT+0900 (한국 표준시)'

Date()
// 'Wed Dec 22 2021 19:59:10 GMT+0900 (한국 표준시)'

typeof Date()
// 'string'

참고로 date()로 하면 안 된다. Date()다.

let a = date();
console.log(a); // Uncaught ReferenceError: date is not defined

 

 

②new Date()

new 키워드를 사용한 new Date()는 Date 타입인 새로운 객체를 생성합니다. 인수를 생략하면 현재 날짜 및 시간을 나타내는 Date 객체가 생성됩니다. 인자를 전달하면 인자 형태에 따라 Date 객체가 생성됩니다.

new Date();
// Thu Dec 23 2021 00:24:26 GMT+0900 (한국 표준시)

new Date('2020-01-01');
// Wed Jan 01 2020 09:00:00 GMT+0900 (한국 표준시)

new Date(2021, 11, 23);
// Thu Dec 23 2021 00:00:00 GMT+0900 (한국 표준시)

new Date(2021, 11, 23, 12, 23, 00);
// Thu Dec 23 2021 12:23:00 GMT+0900 (한국 표준시)

typeof new Date()
// 'object'

③참고 URL

 

[JavaScript]Date와 new Date 차이점

이번 포스팅에서는 Date, Date(), new Date()의 차이점을 소개합니다. 목차 Date Date() new Date() Date ECMAScript의 타입에는 Date 타입이 존재하지 않으며, 아래 8개의 타입이 존재합니다. undefined null boolean string

developer-talk.tistory.com

 

(2)new Date(year,month,date)에서 date를 0으로 지정하면

새로운 date객체를 만들 때 날짜를 0으로 지정하면 저번 달의 마지막 날짜를 가진 date 객체가 반환된다. 참고로 getMonth()는 현재 date 객체의 월을 0~11 사이의 숫자로 반환한다.

var startDay = new Date(2023, 3, 0);  //'2023-03-31'을 뜻함
var Month = startDay.getMonth(); //month-1 
var Date = startDay.getDate();// 0은 마지막 날을 뜻함.
var Day = startDay.getDay(); // 일요일부터 0

console.log(Month); // 2
console.log(Date); // 31
console.log(Day); // 5, 금요일이므로

(3)삼항연산자

for문 내 if문 사용시 간결해 보인다.

// 다음달
for (var i = 1; i <= (7 - nextDay == 7 ? 0 : 7 - nextDay); i++) {
    calendar.innerHTML = calendar.innerHTML + '<div class="day next disable">' + i + '</div>'
}

삼항연산자

 

 

스크립트의 실행 시점을 조절하는 Async와 Defer 속성 - 재그지그의 개발 블로그

로드한 스크립트의 실행 시점을 조절할 수 있게 만들어주는 Async와 Defer 속성에 대해 알아봅니다.

wormwlrm.github.io

 

저작자표시

'[바닐라코딩]' 카테고리의 다른 글

[바닐라코딩 | Javascript] - First Day  (0) 2023.03.17
[바닐라코딩 | Javascript] - Drawing Webpages.Background Changer  (0) 2023.03.10
[바닐라코딩 | Javascript] - Events Practice (신호등 불 켜기), for문  (0) 2023.03.10
[바닐라코딩 | Javascript] - DOM API 요약  (0) 2023.03.09
[바닐라코딩 | Javascript] - Part3 요약  (0) 2023.03.08

'[바닐라코딩]'의 다른글

  • 현재글[바닐라코딩 | Javascript] - This Month

관련글

댓글

티스토리툴바