img 태그 객체 생성

canvas에서 이미지 객체 생성하는 거랑 헷갈렸다.

let img = new Image()

위가 canvas일때고, 아래가 jQuery에서 이미지 객체를 생성하는 방법이다.

let img = document.createElement('IMG')
img.setAttribute('src', './triforce.jpg')

이미지의 경로src는 setAttribute()함수를 활용해야한다.

남은 시간 출력

구글에서의 소스코드를 분석해보았다.

function showDue() {
  let now = new Date() //현재시간을 구한다.
  let end = new Date(2022, 01, 20, 23, 55, 00)

  let now = now.getTime() // 현재의 시간만 가져온다
  let end = end.getTime() // 종료시간만 가져온다

  if (now < end) {
    //현재시간이 종료시간보다 이르면 종료시간까지의 남은 시간을 구한다.
    sec = parseInt(end - now) / 1000
    hour = parseInt(sec / 60 / 60)
    sec = sec - hour * 60 * 60
    min = parseInt(sec / 60)
    sec = parseInt(sec - min * 60)

    if (hour < 10) {
      hour = '0' + hour
    }
    if (min < 10) {
      min = '0' + min
    }
    if (sec < 10) {
      sec = '0' + sec
    }

    let time = 'Due:' + hour + ':' + min + ':' + sec
    $('#prob2').html(time)
  } else {
    //현재시간이 종료시간보다 크면
    let time = 'Due:' + 00 + ':' + 00 + ':' + 00
    $('#prob2').html(time)
  }

  setInterval(showDue, 1000)
}

여기서 중요한 점은 종료시간을 설정할때 Month부분은 원래의 달에 -1을 한 값을 적용해야한다.

rgb함수로 색상 적용

처음에는 단순히 이런식으로 해버렸다.

$('#colorBar').css('background-color', 'rgb(r,g,b)')

새로 생성한 변수 r,g,b에 랜덤한 값을 할당하였다면,

let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)

var random_color = 'rgb(' + r + ',' + g + ',' + b + ')'

$('#colorBar').css('background-color', random_color)

이와 같이 ’+‘를 활용하여 random_color 문자열을 완성시켜야한다.
그리고 처음엔 Math.random(256)으로 했는데, Math.random() * 256으로 해야한다.

$.ajax에서 $.each() 사용할 때의 오류

Uncaught TypeError: Cannot use ‘in’ operator to search for ‘length’ in…
=> 이거는 success일때 받아온 data가 parsing이 잘 안되어서 생기는 오류라고 한다.

function showArticle() {
  $.ajax({
    url: './news_2020.txt',
    type: 'get',
    datatype: 'json',
    success: function (data) {
      $.each(JSON.parse(data), function (index, item) {
        if (index < 5) {
          $('#prob4').append(
            '<a href=' + item.link + '>' + item.title + '</a><br>',
          )
        }
      })
    },
  })
}

JSON.parse()를 활용하여 파싱작업을 해주면 해결이 된다.
index값을 사용하여 출력되는 데이터의 개수도 조정이 가능하다!
=> index는 each함수가 돌때마다 자동적으로 1씩 증가됨

img 태그 객체 생성
남은 시간 출력
rgb함수로 색상 적용
$.ajax에서 $.each() 사용할 때의 오류