쇼핑몰 페이지를 만들 때 자바스크립트로 상품 목록을 가져오는 코드입니다.
<HTML>
<!DOCTYPE html>
<html>
<head>
<title>상품 목록</title>
</head>
<body>
<div id="product-list">
<!-- 상품 목록이 여기에 동적으로 추가될 것입니다 -->
</div>
<script src="script.js"></script>
</body>
</html>
<JavaScript>
// 서버에서 상품 목록을 가져와서 웹 페이지에 동적으로 표시하는 함수
function displayProductList() {
// AJAX 요청을 보내고 상품 목록을 가져옵니다.
// 실제로는 서버의 API 엔드포인트에 요청을 보내야 합니다.
// 여기서는 가상의 데이터를 사용합니다.
const products = [
{ id: 1, name: '상품 1', price: 10000 },
{ id: 2, name: '상품 2', price: 20000 },
{ id: 3, name: '상품 3', price: 30000 }
];
const productListDiv = document.getElementById('product-list');
// 상품 목록을 순회하면서 각 상품을 동적으로 생성하여 웹 페이지에 추가합니다.
products.forEach(product => {
const productDiv = document.createElement('div');
productDiv.innerHTML = `
<h3>${product.name}</h3>
<p>가격: ${product.price}원</p>
<button onclick="addToCart(${product.id})">장바구니에 추가</button>
`;
productListDiv.appendChild(productDiv);
});
}
// 장바구니에 상품을 추가하는 함수
function addToCart(productId) {
// 상품을 장바구니에 추가하는 로직을 구현합니다.
console.log(`상품 ID ${productId}를 장바구니에 추가했습니다.`);
}
// 페이지 로드 시 상품 목록을 표시합니다.
displayProductList();'🎒내가방 > 📒JavaScript' 카테고리의 다른 글
| [자바스크립트] 고차함수를 활용한 실무 알고리즘 테스트 (1) | 2024.10.03 |
|---|---|
| [자바스크립트] 상품을 필터링하기 (0) | 2023.07.01 |
| [자바스크립트] 회원가입 할 때 패스워드 체크 기능 구현하기 (0) | 2023.06.29 |
| [모던 자바스크립트 Deep Dive] 18장 함수와 일급객체 (0) | 2023.06.29 |
| [모던 자바스크립트 Deep Dive] 17장 생성자 함수에 의한 객체 생성 (0) | 2023.06.29 |
