자바스크립트 + 제이쿼리 입문 day 6
object
기본 형태
<script>
const shopping = {
title : '제품이름',
price : 1000,
thumb : './img/01.jpg'
}
shopping.title;
</script>
간단한 클래스 obj를 만들고 출력해보기
<div class="obj">
<figure>
<img src ="">
<figcaption>
제품이름(1000)
</figcaption>
</figure>
</div>
const shopping = [
{title : '제품이름1', price:1000, thumb : './img/01.jpg'},
{title : '제품이름2', price:2000, thumb : './img/02.jpg'},
{title : '제품이름3', price:3000, thumb : './img/03.jpg'}
]
shopping[0].title = '가디건';
const elObj = document.querySelector('.obj');
elObj.innerHTML = `<figure>
<img src ="${shopping[0].thumb}">
<figcaption>
${shopping[0].title}(${shopping[0].price})
</figcaption>
</figure>`;
console.log(shopping[0].title);for each 문을 활용하기
=> 배열 요소 각각에 대해 실행합니다.
let 배열 = ['a', 'b', 'c']
배열.forEach(function(){})
함수가 들어오고 중괄호 안에서 실행문이 들어온다.
let 배열 = ['a', 'b', 'c']
배열.forEach(function(){
배열값의 개수 만큼 3번 반복}
)괄호 안에는
0번째 => 'a', 0
let 배열 = ['a', 'b', 'c']
배열.forEach(function(value, index){
배열값의 개수 만큼 3번 반복}
)
onclick시 바뀌는 함수 코드
<script>
const elTab = document.querySelectorAll('article button');
const elContent = document.querySelector('.content')
let tabData = ['content 01', 'content 02', 'content 03']
elTab.forEach(function(button, idx){
button.onclick = function(){
elContent.innerHTML = `content ${idx+1} ${tabData[idx]}`
}
})
</script>
dom 클래스를 제어하는 메서드
add(), remove(), toggle(), contains()
wrap up
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- object.html-->
<style>
img {
width: 200px;
border-radius: 15px;
opacity: inherit;
box-sizing: border-box;
}
</style>
<div class="obj">
<figure>
<img src="" />
<figcaption>제품이름(1000)</figcaption>
</figure>
</div>
<script>
// const shopping = {
// title : '제품이름',
// price : 1000,
// thumb : './img/01.jpg'
// }
const shopping = [
{ title: "제품이름1", price: 1000, thumb: "./img/01.jpg" },
{ title: "제품이름2", price: 2000, thumb: "./img/02.jpg" },
{ title: "제품이름3", price: 3000, thumb: "./img/03.jpg" },
];
shopping[0].title = "가디건";
const elObj = document.querySelector(".obj");
shopping.forEach(function (data, key) {
elObj.innerHTML += `<figure>
<img src ="${shopping[key].thumb}">
<figcaption>
${shopping[key].title}(${shopping[key].price})
</figcaption>
</figure>`;
});
const elFigure = document.querySelectorAll(".obj figure");
elFigure.forEach(function (figure, idx) {
figure.onclick = function () {
console.log(idx);
};
});
// elObj.innerHTML += `<figure>
// <img src ="${shopping[0].thumb}">
// <figcaption>
// ${shopping[0].title}(${shopping[0].price})
// </figcaption>
// </figure>`;
// console.log(shopping[0].title);
</script>
<article>
<h2>tab</h2>
<div>
<button>Tab 01</button>
<button>Tab 02</button>
<button>Tab 03</button>
</div>
<div class="content">Content 01</div>
</article>
<style>
article {
width: 500px;
margin: 100px auto;
}
button.active {
background-color: #000;
color: #fff;
}
article .content {
border: 1px solid #000;
padding: 60px;
text-align: center;
}
</style>
<script>
const elTab = document.querySelectorAll("article button");
const elContent = document.querySelector(".content");
let tabData = [
{ info: "content 01" },
{ info: "content 02" },
{ info: "content 03" },
];
let lastIdx = 0;
elTab.forEach(function (button, idx) {
button.onclick = function () {
elTab[lastIdx].classList.remove("active");
button.classList.add("active");
lastIdx = idx;
elContent.innerHTML = `content ${idx + 1} ${tabData[idx].info}`;
};
});
</script>
<article>
<h2>FAQ</h2>
<ul>
<li class="active">
Q 질문 1
<div>A 답변 1</div>
</li>
</ul>
<ul>
<li>
Q 질문 2
<div>A 답변 2</div>
</li>
</ul>
<ul>
<li>
Q 질문 3
<div>A 답변 3</div>
</li>
</ul>
</article>
<style>
li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul {
border-bottom: 1px solid #000;
padding: 10px 0;
}
li {
background-color: #eee;
padding: 40px;
display : none;
}
li.active div{
display: block;
}
</style>
<script></script>
</body>
</html>반응형
'교육 > Javascript&Jquery' 카테고리의 다른 글
| 자바스크립트 + 제이쿼리 입문 day 8 (0) | 2023.01.06 |
|---|---|
| 자바스크립트 + 제이쿼리 입문 day 7 (0) | 2023.01.04 |
| 자바스크립트 + 제이쿼리 입문 day 5 (0) | 2022.12.29 |
| 자바스크립트 + 제이쿼리 입문 day 4 (0) | 2022.12.26 |
| 자바스크립트 + 제이쿼리 입문 day 3 (0) | 2022.12.23 |
