Do-it! JS 실습 복습 #unit 3

unit3 자바스크립트와 객체

---

🤔 8-1 날짜 계산

 

const birthYear = document.querySelector("#year");
const birthMonth = document.querySelector("#month");
const birthDate = document.querySelector("#date");
const bttn = document.querySelector("#bttn");

const current = document.querySelector("#current");
const resultDays = document.querySelector("#days");
const resultHours = document.querySelector("#hours");

const today=new Date();

console.log(today.getFullYear());

bttn.addEventListener("click",()=>{
    const birthDay=new Date(birthYear.value,birthMonth.value-1,birthDate.value);

    let passed=today.getTime()-birthDay.getTime();
    let passedDay=(Math.floor(passed/(1000*60*60*24)));
    let passedHours=(Math.floor(passed/(1000*60*60)));

    current.innerText=
    `${today.getFullYear()}년 ${today.getMonth() + 1}월 ${today.getDate()}일 ${today.getHours()}시 ${today.getMinutes()}분 현재`;
    
    resultDays.innerText=`날짜로는 ${passedDay}일이 흐르고,`;
    resultHours.innerText=`시간으로는 ${passedHours}시간이 흘렀습니다`;
})

 

✅ point

1. 왜 getMonth()+1 인가

2.왜 -1인가

3.new Date(요소)의 방식

4.getTime()

 

8-2. 무작위 이벤트

 

const seed=document.querySelector("#seed");
const total=document.querySelector("#total");
const rafBtn=document.querySelector("#raffle");
const clearBtn=document.querySelector("#clear");

const result=document.querySelector("#result");
let luckNum=[];

rafBtn.addEventListener("click",(e)=>{

    e.preventDefault();
    for(let i=0;i<total.value;i++){
        luckNum[i]=Math.floor((Math.random())*seed.value+1);
    }
    result.classList.add("show");
    result.innerText=`당첨자:${luckNum}번`;
    
})

 

 

✅ point

Math.floor:내림

 

---

9-1,2 class와 상속

 

class Pet{
    constructor(name,color){
        this.name=name;
        this.color=color;
    }
    run(){
        alert(`${this.name}은 달린다`);
    }
}

class Cat extends Pet{
    constructor(name,color,breed){
        super(name,color);
        this.breed=breed;
    }
    viewInfo(){
        alert(`이름:${this.name} 품종:${this.breed} 색상:${this.color}`);
    }
}

let cat = new Cat("버들냥","갈색","시고르자브");
cat.viewInfo();

 

 

✅ point

this의 사용

 

---

10-1. 배열을 표시하고 추가

const origin = document.querySelector("#origin");
const result = document.querySelector("#result");

const arr=[2,4,6,8,10];
let sum=0;

function showArray(area,arr){
    let str;
    str="<table><tr>";
    for(let i=0;i<arr.length;i++){
        str+="<td>"+arr[i]+"</td>"
    }
    str+="</tr></table>"
    area.innerHTML=str;

}

showArray(origin,arr);

for(let i=0;i<arr.length;i++){
    sum+=arr[i];
}
arr.push(sum);

showArray(result,arr);

 

 

✅ point

태그 추가 방법

배열.push()

 

 

10-2. 배열 추출

const origin=document.querySelector("#origin");
const result=document.querySelector("#result");
let numbers=[2,4,6,8,10];

//tail()
//배열길이가 1보다 크면 1번째요소 빼고 나머지, 1이면 배열 전체 반환
//slice(시작위치,끝위치) :시작위치,끝위치 직전까지 추출
function tail(a){
    if(a.length>1){
        let aa= a.slice(1);
        return aa;
    }else if(a.length==1){
        return a;
    }   
}


origin.innerText=numbers;
result.innerText=tail(numbers);

 

 

✅ point

slice(시작위치,끝위치):시작위치~끝위치 직전 까지 추출.

함수안에 return 반환값

 

---

🤔   11-1 객체 구조 분해

 

class Lecture {
    constructor(hasTutor, lectID, members) {
      this.hasTutor = hasTutor;
      this.lectID = lectID;
      this.members = members;
    }
  }

function getStudents(classRoom){
    let {hasTutor,lectID,members}=classRoom;
    let tutor,students;

    (hasTutor)?[tutor,...students]=members:[...students]=members;
    return students;
}

let class1=new Lecture(false,"k01",["a","b","c"]);
let class2=new Lecture(true,"k02",["aa","bb","cc","dd"]);

console.log(`강의:${class1.lectID} 수강생:${getStudents(class1)}`);
console.log(`강의:${class2.lectID} 수강생:${getStudents(class2)}`);

 

 

✅ point

객체 구조 분해 

 

🤔  11-2. 랜덤 복권 객체 구조 분해

 

const btn=document.querySelector("button");
const result=document.querySelector("#result");

const luckPro={
    max:6,
    total:45
};

btn.addEventListener("click",()=>{
    let {max,total}=luckPro;
    let luckArr= new Set();

    for(let i=0;i<max;i++){
        luckNum=Math.floor(Math.random()*total)+1;
        luckArr.add(luckNum);
    }
    result.innerText=`${[...luckArr]}`;
});

 

✅ point

객체 구조 분해