[Javascript] 객체 생성자/빌트인 생성자 이용_실습

시계 코드: https://stackblitz.com/edit/stackblitz-starters-bcr5qw?file=script.js
드림카 소개하기 코드: https://stackblitz.com/edit/stackblitz-starters-h3sjjn?file=index.js

앞페이지에서 배웠던 빌트인 함수, 객체 중 하나인 setInterval, new Date를 통해서 시계를 만들었다.
정각까지 몇분 남았는지의 기능과 stop버튼을 누르면 시간이 멈추고, 그 후 나오는 start 버튼으로 다시 가게하는 기능을 넣었다.

시계 만들기

코드

// 타이머 id timer 변수 저장
let timer = setInterval(updateClock, 1000);
// 시계 빌트인 객체 updateClock 함수 선언(호이스팅으로 위에서 사용.)
function updateClock() {
  const p = document.querySelector('#now_time');
  const div = document.querySelector('#sharp');
  const nowTime = new Date();

  let hour = nowTime.getHours();
  let minute = nowTime.getMinutes();
  let second = nowTime.getSeconds();
  let sharpTime = 59 - minute;

  p.textContent = `${hour}시 ${minute}분 ${second}초 입니다.`;
  div.textContent = `정각까지 ${sharpTime}분 남았습니다.`;
}

const button = document.getElementById('stop');
// 버튼 토글 초기값
let isRunning = true;

button.addEventListener('click', function () {
  // 버튼 눌렀을때 true>false>true 이런 식으로 전환
  isRunning = !isRunning;
  if (isRunning === false) {
    // Interval중지 함수로 timer중단
    clearInterval(timer);
    button.textContent = `start`;
  } else if (isRunning === true) {
    // 타이머 id 다시 실행
    timer = setInterval(updateClock, 1000);
    button.textContent = `stop`;
  }
});

• timer변수에 setInterval로 updateClock 함수 1초에 한번씩 실행(호이스팅으로 아래 선언된 함수 위에서 실행 가능)
• new Date 불러와 nowTime에 할당 및 hour, minute 등등 가져와 변수 선언
• 버튼 클릭 이전 초기값 설정(true)
• isRunning = !isRunning;으로 버튼 눌렀을 때 false>true>false 토글 처럼 바뀌게 처리
• false 일 경우 clearInterval로 timer 중단
• true일 때 다시 timer 변수 선언

회고: 토글 구조 짜는 방법을 몰랐는데 공부하며 알게되었다. 토글 은근 헷갈린다..
누르면 반대로 바뀌는 기능을 넣으면 토글이 일단은 완성되는듯 하다.
그리고 타이머 어떻게 다시 실행시켜야하나 고민하다가 그냥 다시 setInterval넣었다.

드림카 소개하기

const dreamCar = {
  brand: 'zeep',
  model: 'wrangler',
  year: 2024,
};

// 2. 마침표 연산자(dot notation)를 사용하여 dreamCar의 model 값을 출력하세요.
console.log(dreamCar.model);

// 3. 대괄호 연산자(bracket notation)를 사용하여 dreamCar의 brand 값을 출력하세요.
console.log(dreamCar['brand']);

// 4. 1번에서 생성한 객체를 생성자 함수를 사용하여 생성하세요.
function Car(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
  // 5.myDreamCar 메소드를 추가해주세요.
  this.myDreamCar = function () {
    console.log(`제 드림카는 ${year}년식 ${brand} 회사의 ${model}입니다.`);
  };
}

// 6. 생성자 함수로 객체 생성
const dreamCar1 = new Car('zeep', 'wrangler', 2024);

// 마침표 연산자로 메소드 호출하기
dreamCar1.myDreamCar();

• dreamCar 변수에 각각 brand, model, year키와 그 값을 넣었다.
• 생성자 함수를 만들어 this로 키-값을 넣었다.
• new Car로 객체 생성한 후 props값들을 넣었다.