🧟‍♀️하...왐마...

Replit 과제는 다 끝냈는데...배운거 정리하려니...
오늘은 금요일이니 주말에 할까? 싶지만
나는 나를 알기에 내일의 나에게 맡겨둘수가 없군
두서없겠지만 오늘 배운 걸 우선 정리 아니 기록하자!

객체 접근하고싶을 땐

Class vs Object?

클래스는 객체를 공장처럼 찍어내기 위한 틀이다!
클래스와 객체의 구조는 비슷해보이지만, 클래스에는 생성자(constructor)가 있다!

class Car {
  ##클래스 생성
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
## 클래스를 통해 생성된 객체는 인스턴스라고한다
const morning = new Car('Morning', 2000000);

메서드

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }


  applyDiscount(discount) {  
    return this.price * discount;   
  }


  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}

객체 키 변수로 접근하기

const information = {
  name: '김개발'
}
#위에 객체에 verb를 key, project를 value 넣고싶을때 방법
const verb = 'developes' 
const project = 'facebook'

두가지 방법이 있다. [B]의 경우 key과 value는 항상 정해져있어야만한다.

information[verb] = project // [A]
information.developes = 'facebook' // [B]

참고 :https://www.notion.so/29-object-3-c2628eea9c9445889b674707d26350b9

객체 순회하기

1. 배열로 받아서 for문돌리는 방법

• object key를 배열로 받기!

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

• object value도 마찬가지! 배열로 받기!

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

• 객체를 통으로 배열로 받기

const entries = Object.entries(obj)
/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

2. for-in

const arr = ['coconut', 'banana', 'pepper', 'coriander'];
//i는 0으로 초기화 하고 i를 1씩 자동증가시키기
for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

객체에서도 굴러가는 for-in

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
for (let key in obj) {	//객체의 각각의 키에 해당하는 문자열을 할당
  const value = obj[key]
  console.log(key)
  console.log(value)
}

:: Assignment 내뜻대로 풀어보기
https://www.notion.so/29-object-3-c2628eea9c9445889b674707d26350b9

// Assignment - 다음 함수 안에 코드를 구현하세요
const getScorePoint = score =>{
    switch(score){
        case 'A+':
            return 4.5;
        case 'A':
            return 4.0;
        case 'B+':
            return 3.5;
        case 'B':
            return 3;
        case 'C+':
            return 2.5;
        case 'C':
            return 2;
        case 'D+':
            return 1.5;
        case 'D':
            return 1;
        case 'F':
            return 0;
    }
}
const getExamResult = (scores, requiredClasses) => {
    for(let key in scores){
        let score = scores[key];
        // console.log(scores[key],getScorePoint(score));
        scores[key] = getScorePoint(score);
    }
    for(let i in requiredClasses){
        let checkNum = 0;
        for(let key in scores){
            if (requiredClasses[i] == key){
                checkNum++;
            }
        }
        if(checkNum===0){
            console.log(requiredClasses[i]);
            scores[requiredClasses[i]] = 0;
        }
    }
    // console.log(scores);
    const result = scores;
    return result
  }
  let scores = {
    '생활속의회계': 'C',
    '논리적글쓰기': 'B',
    '독일문화의이해': 'B+',
    '기초수학': 'D+',
    '영어회화': 'C+',
    '인지발달심리학': 'A+',
  };
  const requiredClasses =  ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];
console.log(getExamResult(scores, requiredClasses));

Event

인터랙티브한 사이트를 위해서 JavaScript에서 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그래밍한다.

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

이벤트종류 참고 :

• https://www.w3schools.com/js/js_htmldom_eventlistener.asp
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

:: Assignment 내뜻대로 풀어보기
https://www.notion.so/Check-Point-32-Event-a90138c30a7a495ca709bde6be9e9ec1

const thisIsPw = document.getElementById('password');
const thisIsRePw = document.getElementById('re-password');
thisIsRePw.addEventListener('keyup', function(event) {
  // thisIsCode.innerHTML = event.keyCode;
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;
  // alert("test");
  const alert = document.querySelector(".alert");
  if(password ==rePassword){
      alert.innerHTML = "";
  }else{
      alert.innerHTML = "비밀번호가 일치하지 않습니다";
  }
});

DOM이란?! (Document Object Model)

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다.
DOM은 HTML인 웹페이지와 스크립팅언어(Javascript)를 서로 잇는 역할이다.

javascript는 어떻게 html에 접근하는가?!
JavaScript의 document 객체는 DOM 구조를 접근하는 관문이며, document 객체는 HTML 문서이다!

JavaScript에서 html 조정해보기!

function addPTag() {
  const Ptag = document.createElement('p');
  const h1 = document.querySelector('h1');
  Ptag.className = "dom";
  Ptag.innerHTML = "DOM";
  h1.appendChild(Ptag);
}

참고 : https://www.notion.so/31-DOM-9375ab062f2046b49e423648588826a5

오늘하루 어땟나?

• 벌써 위코드 한주 끝난거냐...미쳤다
  replit js는 끝났지만...정리되지 않은 기록들 마음이 너무 찜찜하지만 오늘은 좀 집에 일찍가야겠다(목표는 20:30)
• 점심은 새로 알게된 멤바들(크롬개발자도구 공부팀-프레첼1팀ㅎ)과 곰국
• 참! 오늘 새벽에 맥북에어 결제하였다! (잠깐잊고있었네;;3월에 온다하니,,아직 그램이랑 잘지내야행)
• 참! 조카 태어났다 신생아가 이렇게 뽀얄수있나
  

낼은 뭐가 달라져야할까
달라지기전에 오늘 정리못한일 내일까지 끝내자

• 만나이계산 velog 작성
• random 최소, 최대 범위지정 값뽑기 velog 작성
• 크롬 개발자도구 정리 velog 작성
• javascript는 어디에 위치해야하는가?! 공부하고 velog 작성

velog공장인줄...?