เขียนเว็บไซต์ โดยใช้ JavaScript เพียวๆ

#javascript

#พื้นฐานการเขียนเว็ปไซต์

code หน้าเว็ปไซต์แสดงสินค้า เขียนด้วย javascript dom และตกแต่งด้วย css โดยไม่ใช้ html

แน่นอนครับ! การสร้างโครงสร้างเว็บไซต์แสดงสินค้า โดยไม่ใช้ HTML โดยตรง แต่ใช้ JavaScript DOM ในการสร้างองค์ประกอบทั้งหมด และตกแต่งด้วย CSS สามารถทำได้ดังนี้ครับ

เนื่องจากคุณขอโค้ดสำหรับสร้างหน้าเว็บแสดงสินค้าโดยไม่ใช้ HTML (หมายถึงไฟล์ .html ที่มีแท็กโครงสร้างปกติ) ผมจะสมมติว่าคุณมีไฟล์ JavaScript และ CSS และจะใช้ JavaScript สร้างโครงสร้างพื้นฐานทั้งหมดและเชื่อมโยงกับ CSS ครับ

ข้อจำกัด: โดยปกติแล้ว เว็บเบราว์เซอร์ต้องการไฟล์ HTML เพื่อเป็นจุดเริ่มต้นในการโหลดสคริปต์ JavaScript และสไตล์ชีต CSS อย่างไรก็ตาม โค้ดด้านล่างนี้จะแสดงวิธีการที่ JavaScript สร้างทุกอย่าง ตั้งแต่แท็ก <body> ลงมา โดยคุณจะต้องเรียกใช้สคริปต์นี้ในไฟล์ HTML พื้นฐานมากๆ (อาจมีแค่แท็ก <script> เท่านั้น) เพื่อให้มันทำงานได้

💻 JavaScript (DOM Manipulation)

บันทึกโค้ดนี้เป็นไฟล์ชื่อ script.js

JavaScript

// ข้อมูลสินค้าที่เราจะแสดง

const products = [

{ id: 1, name: "เสื้อยืดคลาสสิก", price: 350, image: "tshirt.jpg" },

{ id: 2, name: "กางเกงยีนส์เดนิม", price: 1200, image: "jeans.jpg" },

{ id: 3, name: "รองเท้าผ้าใบ", price: 890, image: "sneakers.jpg" },

{ id: 4, name: "กระเป๋าสะพาย", price: 550, image: "bag.jpg" }

];

// ฟังก์ชันหลักในการสร้างหน้าเว็บ

function createProductPage() {

const body = document.body;

// 1. สร้างส่วนหัว (Header)

const header = document.createElement('header');

header.innerHTML = '<h1>สินค้ามาใหม่</h1>';

body.appendChild(header);

// 2. สร้างคอนเทนเนอร์หลักสำหรับสินค้า

const productContainer = document.createElement('div');

productContainer.id = 'product-list';

body.appendChild(productContainer);

// 3. วนลูปเพื่อสร้างบัตรสินค้า (Product Card) แต่ละชิ้น

products.forEach(product => {

// สร้างองค์ประกอบหลักสำหรับสินค้าแต่ละชิ้น

const card = document.createElement('div');

card.className = 'product-card';

card.setAttribute('data-product-id', product.id);

// 3.1 สร้างรูปภาพ

const img = document.createElement('img');

img.src = product.image; // สมมติว่ามีรูปภาพชื่อตามนี้ในโฟลเดอร์เดียวกัน

img.alt = product.name;

card.appendChild(img);

// 3.2 สร้างชื่อสินค้า

const name = document.createElement('h2');

name.textContent = product.name;

card.appendChild(name);

// 3.3 สร้างราคา

const price = document.createElement('p');

price.className = 'price';

price.textContent = `${product.price} บาท`;

card.appendChild(price);

// 3.4 สร้างปุ่มเพิ่มลงตะกร้า

const button = document.createElement('button');

button.textContent = 'เพิ่มลงตะกร้า';

button.addEventListener('click', () => {

alert(`เพิ่ม ${product.name} เข้าตะกร้าแล้ว!`);

});

card.appendChild(button);

// เพิ่มบัตรสินค้าลงในคอนเทนเนอร์หลัก

productContainer.appendChild(card);

});

// 4. สร้างส่วนท้าย (Footer)

const footer = document.createElement('footer');

footer.innerHTML = '<p>&copy; 2025 ร้านค้าออนไลน์</p>';

body.appendChild(footer);

}

// เรียกใช้ฟังก์ชันเมื่อ DOM โหลดเสร็จสมบูรณ์

document.addEventListener('DOMContentLoaded', createProductPage);

// (เพื่อการสาธิต) สร้างลิงก์ CSS โดยใช้ DOM (ปกติจะอยู่ใน HTML)

const head = document.head;

const link = document.createElement('link');

link.rel = 'stylesheet';

link.href = 'style.css'; // เชื่อมไปยังไฟล์ CSS

head.appendChild(link);

🎨 CSS (Styling)

บันทึกโค้ดนี้เป็นไฟล์ชื่อ style.css

CSS

/* จัดรูปแบบทั่วไป */

body {

font-family: 'Arial', sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f9 ;

color: #333 ;

line-height: 1.6;

}

/* ส่วนหัว */

header {

background-color: #007bff ;

color: white;

padding: 20px 0;

text-align: center;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

header h1 {

margin: 0;

font-size: 2.5em;

}

/* คอนเทนเนอร์รายการสินค้า */

#product -list {

display: flex; /* จัดเรียงสินค้าแบบยืดหยุ่น */

flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่ได้ */

justify-content: center; /* จัดให้อยู่ตรงกลาง */

padding: 20px;

gap: 30px; /* ระยะห่างระหว่างบัตรสินค้า */

}

/* บัตรสินค้าแต่ละชิ้น */

.product-card {

background-color: white;

border: 1px solid #ddd ;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

padding: 15px;

width: 250px; /* กำหนดความกว้างคงที่ */

text-align: center;

transition: transform 0.2s;

}

.product-card:hover {

transform: translateY(-5px); /* เลื่อนขึ้นเล็กน้อยเมื่อชี้ */

box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

}

/* รูปภาพสินค้า */

.product-card img {

width: 100%;

height: auto;

border-radius: 4px;

margin-bottom: 10px;

}

/* ชื่อสินค้า */

.product-card h2 {

font-size: 1.4em;

margin: 10px 0;

color: #007bff ;

}

/* ราคา */

.product-card .price {

font-size: 1.2em;

color: #e67e22 ; /* สีส้มสำหรับราคา */

font-weight: bold;

margin-bottom: 15px;

}

/* ปุ่ม */

.product-card butt