반응형
자동차 클래스를 만들고
그 아래에 자동차 객체들을 여러 개 만들어 원하는 자동차 사이트로 연결하는 클래스들을 만들어 보았다.
아래는 기본적인 html 코드로 root 아래에 search id를 만들어주었다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root">
<div id="search"></div>
</div>
<script src="./index.js"></script>
</body>
</html>
첫 번째로 가장 부모 클래스로 자동차 클래스를 만들었다. 이름과 링크만을 가지는 자동차 클래스를 만들었다.
class Car {
name;
link;
constructor(name, link) {
this.name = name;
this.link = link;
}
}자동차 클래스를 상속받는 현대차, 기아차, 테슬라, 삼성(르노자동차)을 만들었다.
class Hyundai extends Car {}
class Kia extends Car {}
class Tesla extends Car {}
class Samsung extends Car {}자동차 리스트를 만들어 객체를 생성과 동시에 초기화 하여 주었다. 이름과 링크를 초기화하였다.
const carList = [
new Hyundai("현대", "https://www.hyundai.com/"),
new Kia(
"기아",
"https://www.kia.com/kr?utm_source=google_SA&utm_medium=AD202307&utm_campaign=KiaSales2022_brand&utm_content=keyword_pc&utm_term=%EA%B8%B0%EC%95%84&gclid=Cj0KCQjwnrmlBhDHARIsADJ5b_kAbfoRb1zNA8hlfOYk_7-Fi0gGlnq0iqRkaeCpdhWHG4EGDWmV8G8aAhv_EALw_wcB"
),
new Tesla("테슬라", "https://www.tesla.com/ko_kr"),
new Samsung(
"삼성",
"https://www.renaultkoream.com/new/model/master.jsp?bannerUrl=MASTERSEARCHG2307&bannerSeq=1&utm_source=google&utm_medium=pc_cpc&utm_campaign=RKM_SEA_MASTER_DEFENSIVE_2307&gclid=Cj0KCQjwnrmlBhDHARIsADJ5b_mEDG_Wk1Zz6ZkgEDD1CvCcd6H6Rb3a1xnkaNS8o_uVxNvkB2-YGSkaAiorEALw_wcB"
),
];
carList 내부아이템들을 foreach 문을 이용하여 돌려주었고, 이때 document.write를 이용하여 출력을 하였다. 아직
하지만, serach id 에 엘리먼트에 div 가 추가로 생기는 것이 아닌 출력을 했을 시에 작동은 잘하지만, javascript에 링크가 걸려 출력이 되었다. 이 부분에 대해 어떤 방식으로 자바 스크립트를 html 엘리먼트로 주어야 할지 공부해야겠다.
carList.forEach((item) => {
console.log(item.name);
item.name = document.write(
"<a href=" + item.link + ">" + "<div>" + item.name + "</div>" + "</a>"
);
});
반응형
'블록체인 개발' 카테고리의 다른 글
| SPA (Single Page Application) 이란? (0) | 2023.11.22 |
|---|---|
| Javascript 데이터 할당 방식 (0) | 2023.08.03 |
| 고차함수와 재귀함수 (0) | 2023.07.11 |
| Event 함수들 (이벤트 리스너, 이벤트 핸들러) (0) | 2023.07.10 |
| Javascript DOM 엘리먼트 객체 (0) | 2023.07.07 |