배운 객체를 가지고 좋아하는 포켓몬 3마리 소개하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 내가 가장 좋아하는 포켓몬 3마리를 소개해보자!
// 1. 포켓몬 리스트 (pokemonList) 배열 선언
// 2. 내가 좋아하는 포켓몬 3마리를 넣을 것
// => name, type, age (객체)
// 3. 문서에 출력
let pokemonList = [{
name: "팽도리",
type: "물",
age: 3,
pic: "https://img.chuing.net/i/QuGpyJ/Preview.x.jpg"
}, {
name: "마자용",
type: "에스퍼",
age: 7,
pic: "https://appdata.hungryapp.co.kr/data_file/data_img/201703/22/W149015034843374241.png/hungryapp/resize/500"
}, {
name: "지우",
type: "노말",
age: 10,
pic: "https://contents-cdn.viewus.co.kr/image/230223/67efdb42-b33f-4fa1-ba35-d6ccbf55fa33.jpeg"
}]
for (i = 0; i <= 2; i++) {
document.write(`<img width = "100px" src = ${pokemonList[i].pic}> <br/>
${i + 1}. ${pokemonList[i].name} <br/>
- ${pokemonList[i].type} 속성 <br/>
- ${pokemonList[i].age}살 <br/>
====================== <br>`)
}
</script>
</body>
</html>새롭게 배운 점
객체의 속성값으로 이미지 주소를 넣으면 이미지를 띄울 수 있다. -> 배열의 요소로 객체를 사용해서 인덱스 번호로 반복문을 사용해서 이미지도 반복문에 추가할 수 있다.
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] Ex08_DOM예제.html (0) | 2023.06.19 |
|---|---|
| [JS] Ex07_DOM.html (6 없음) (0) | 2023.06.19 |
| [JS] Ex04_객체.html (0) | 2023.06.19 |
| [JS] Ex03_햄버거실습.html (0) | 2023.06.19 |
| [JS] Ex02_함수실습_소수.html (0) | 2023.06.15 |
