제수기 - 제발 수업내용을 기억해라 / 단순 수업내용 정리 시리즈

Object_Array

목록

객체배열을 DOM에 추가하기

• a 태그 3개 생성
  

• 아래와 같이 정리할 수도 있다.
  div#area>div>a
  

• div#area>ul>li>a
  

표

html 스타일에서 표 생성

선택지 동적으로 생성하기

구조가 div#mbti-container니까
h4 > select > option 이렇게니까 select 및에 option 태그가 쌓일 수 있게 해줘야 한다.

**select 찾아서 거기에 option 태그를 넣는 코드**

forEach((tag) => $mbtiContainer.querySelector('select').insertAdjacentHTML('beforeend', tag))

• radio, selectbox 형성
  

• checkbox
  

💥코드 흐름 이해하기 (chat GPT)

랜덤 강아지

fetch api

외부와 통신 가능한 js api.
자동으로 json 파일로 변환시켜준다.

저 url을 가지고 이미지 태그에 쏙 넣어주면 화면에 강아지 그림이 나온다.

💥생성자함수도, 클래스도 위에 사용된 '표'와 비교했을 때 길게 쓰여진 코드를 간단하게 줄일 수 있다는 장점이 부각된다. 그 외에 다른 차이점은 클래스를 사용했을 때 생성자 함수에 비해 상속을 하기가 거 쉽다는 점이다.

생성자 함수

객체생성을 목적으로 하는 함수
new 연산자와 함께 호출해야 객체가 생성된다.
관례적으로 대문자로 시작하는 이름을 짓는다.
생성자함수 안에서 this는 현재객체를 가리킨다.
생성되는 객체간의 공통메소드는 부모객체(prototype속성)에 선언할 수 있다.

html
<input type="button" value="생성자함수" onclick="test5();">

js
const test5 = () => {
    const pets = [];

    pets.push(new Pet('멍멍이', '푸들', 3.2, 10, ['brown', 'white']));
    pets.push(new Pet('애득이', '말티즈',4.5, 9, ['white']));
    pets.push(new Pet('뿡께', '고양이', 7, 6, ['brown', , 'black', 'white']));
    
    const $area = document.querySelector('#area');
    const table = `
    <table>
        <thead>
            <tr>
            <th>순번</th>
            <th>이름</th>
            <th>품종</th>
            <th>몸무게</th>
            <th>나이</th>
            <th>색상</th>
            <th>자기소개</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>`
    $area.insertAdjacentHTML('beforeend', table);
    
    $tbody = $area.querySelector('tbody'); // #area하위에서 tbody 조회
    pets
        .map((pet, index) => `
        <tr>
            <td>${index + 1}</td>
            <td>${pet.name}</td>
            <td>${pet.breed}</td>
            <td>${pet.weight}kg</td>
            <td>${pet.age}살</td>
            <td>${pet.color}</td>
            <td>${pet.introduce()}</td>
        </tr>
    `)
        .forEach((tr) => $tbody.insertAdjacentHTML('beforeend', tr))

};
// 화살표함수는 생성자함수로 사용할 수 없다.
function Pet(name, breed, weight, age, color){
    this.name = name;
    this.breed = breed;
    this.weight = weight;
    this.age = age;
    this.color = color;
}
  // 부모객체에 공통메소드 선언
Pet.prototype.introduce = function(){
    return `제이름은 ${this.name}이고, 품종은 ${this.breed}입니다.`;
}

💥위에 '표'랑 비슷해보이지만, 생성자함수를 사용해서 좋아진 부분들이 있다. 뭘까?

class 함수

생성자함수의 사용성 더 개선한 문법
constructor 생성자
field/method
static field/method

const test6 = () => {
    const pets = [];
    pets.push(new Pet2('멍멍이', '푸들', 3.2, 10, ['brown', 'white']));
    pets.push(new Pet2('애득이', '말티즈',4.5, 9, ['white']));
    pets.push(new Pet2('뿡께', '고양이', 7, 6, ['brown', , 'black', 'white']));
    
    const $area = document.querySelector('#area');
    const table = `
    <table>
        <thead>
        <tr>
            <th>순번</th>
            <th>이름</th>
            <th>품종</th>
            <th>몸무게</th>
            <th>나이</th>
            <th>색상</th>
            <th>자기소개</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>`
    $area.insertAdjacentHTML('beforeend', table);
    
    $tbody = $area.querySelector('tbody'); // #area하위에서 tbody 조회
    pets
        .map((pet, index) => `
        <tr>
            <td>${index + 1}</td>
            <td>${pet.name}</td>
            <td>${pet.breed}</td>
            <td>${pet.weight}kg</td>
            <td>${pet.age}살</td>
            <td>${pet.color}</td>
            <td>${pet.introduce()}</td>
        </tr>
    `)
        .forEach((tr) => $tbody.insertAdjacentHTML('beforeend', tr))

};


class Pet2 {
    constructor(name, breed, weight, age, color){
        this.name = name;
        this.breed = breed;
        this.weight = weight;
        this.age = age;
        this.color = color;
    }

    introduce(){
        return `제이름은 ${this.name}이고, 품종은 ${this.breed}입니다.`;
    }
}