1️⃣ 자바스크립트로 이미지 로딩하기

• 이전에 html의 요소들을 자바스크립트에서 불러온 것을 배운적이 있습니다.
• 이번에는 반대로 자바스크립트에서 html에 노드를 만드는 기능을 써보겠습니다.
• append()메소드를 이용하면 부모노드에 자식노드혹은 문자들을 추가해줄 수 있습니다. appendChild()메소드를 이용하면 오직 자식노드 한개만을 추가해줄 수 있습니다.

document.body.appendChild(sampleNode); //body에 생성

(1) 이미지(img)태그 노드 생성

const adImage = document.createElement("img");
adImage.src = `이미지 주소`;

• document개체의 createElement()메소드로 img(이미지)노드를 생성 합니다.
• 생성한 img태그에 .src요소를 지정해줄 수 있습니다.

(2) 링크(a)태그 노드 생성

const adlink = document.createElement("a");
adlink.href = "웹 주소";
adlink.innerText = "표시해줄 링크문자";

• 당연히 createElement()를 이용하여 링크(a)노드를 생성할 수 있습니다.
• .innerText요소에 유효한 문자를 넣으면 정상적으로 링크가 표시됩니다.

(3) 최종 결과물(이미지)

2️⃣ 시계만들기

(1) 기본 함수

• 이전에 배웠던 delay(타이머?)함수인 setInterval()를 이용하여 시계를 만들어보겠습니다. setInterval(func, delay)
  
• delay마다 func을 호출해줍니다.
• delay는 ms단위로 1000일경우 1초를 뜻합니다.
  const date = new Date();
  date.getHours()
  date.getMinutes()
  date.getSeconds()
  
• date개체를 이용하여 위와같이 현재 프로그램의 시, 분, 초을 얻어올 수 있습니다.

(2) 임시 결과물(시계)

const clock = document.querySelector("span#clock");

function getClock() {
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
setInterval(getClock, 1000);

00:00:00

• 하지만 시, 분, 초의 각 요소가 한 자리수일 때 부자연스럽게 출력됩니다.
  ([ex] 12시 6분 1초가 12:6:1 과 같이 출력)

(3) 최종 결과물(시계)

• 그래서 padStart()함수를 이용하여 최소자리수(첫번째인자)와 채워줄 문자(두번째 인자)를 적절히 적용하여 사용해 주었습니다.

function getClock1() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  clock1.innerText = `${hours}:${minutes}:${seconds}`;
}

00:00:00

• 이제 시, 분, 초의 각 요소가 자연스럽게 출력됨을 볼 수 있습니다.

3️⃣ 응용 결과물

• 이미지 로딩 기능(append())과 타이머 기능(setInterval())함수를 조합하여 다음과 같이 움직이는 이미지를 만들 수 있습니다.