เขียนเว็บไซต์ โดยใช้ 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>© 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
ถ้ามีคนทักมาถามเรื่อง “งานเขียนโค้ด” หรืออยากจ้าง “บริการออกแบบโปรแกรมอุตสาหกรรม” สิ่งที่ผมมักเริ่มทำก่อนคือทำเดโมให้เห็นภาพเหมือนตัวอย่างหน้าเว็บแสดงสินค้า (สินค้ามาใหม่) ที่สร้างด้วย JavaScript DOM เพียวๆ + CSS เพราะเดโมเล็กๆ จะช่วยคุยงานให้ชัดมากว่าเราทำอะไรได้แค่ไหน และจะต่อยอดเป็นระบบจริงยังไง 1) ทำไมเดโมแบบ JavaScript DOM ถึงช่วยคุยงานบริการได้ - ลูกค้าจะเห็นโครงสร้างข้อมูลชัด: เรามี products เป็น array/object แล้วเอาไป render เป็นการ์ด (รูป/ชื่อ/ราคา/ปุ่ม) - ต่อให้เป็นโปรแกรมอุตสาหกรรม หลักการคล้ายกัน: “ข้อมูลจากเครื่อง/เซนเซอร์/ไฟล์” → “แสดงผลบนหน้าจอ” → “กดสั่งงาน/ยืนยัน” - ใช้เวลาน้อยในการพิสูจน์แนวทาง (Proof of Concept) ก่อนขึ้นระบบใหญ่ 2) Minimal HTML Shell ที่ควรเตรียม (เพื่อให้รันได้จริง) ถึงจะบอกว่าไม่ใช้ HTML โดยตรง แต่ยังต้องมีไฟล์เริ่มต้นอย่างน้อย 1 ไฟล์เพื่อโหลด script.js เช่น - index.html ที่มี <script src="script.js"></script> แนะนำให้เปิดผ่าน Live Server จะได้ไม่เจอปัญหาโหลดไฟล์/รีเฟรชไม่อัปเดต 3) เช็กลิสต์คุณภาพโค้ดเวลารับงานเขียนโค้ด (ผมใช้จริงตอนส่งงาน) - แยกข้อมูลกับการแสดงผล: products ควรอยู่ส่วนบนหรือแยกไฟล์ data.js - ตั้งชื่อ class/id ให้ตรงกับ CSS: ในตัวอย่างนี้ควรระวัง #product-list (อย่าเผลอพิมพ์มีเว้นวรรคเป็น #product -list ไม่งั้น CSS ไม่ติด) - ใส่ alt ให้รูป (มีแล้ว) และเตรียม fallback กรณีรูปหาย - จัดโครงสร้างให้ขยายง่าย: ถ้าจะเพิ่มหมวดหมู่/ค้นหา/เรียงราคา ให้มีฟังก์ชัน renderProducts(list) แล้วค่อยส่ง list ที่ถูกกรองเข้าไป 4) จากหน้าเว็บเดโม ไปสู่ “โปรแกรมอุตสาหกรรม” ต้องเพิ่มอะไรบ้าง ถ้าจะทำเป็นระบบใช้งานจริง (เช่น หน้าจอ HMI บนเว็บ, dashboard โรงงาน, ระบบสต็อก) ผมมองเป็นชิ้นๆ แบบนี้ - การเชื่อมข้อมูล: ดึงจาก API/ฐานข้อมูล (แทน array ในไฟล์) - ความปลอดภัย: แยกสิทธิ์ผู้ใช้ (Operator/Engineer/Admin) - บันทึกเหตุการณ์: log การกดปุ่ม/การเปลี่ยนค่า เพื่อ audit ย้อนหลัง - ความเสถียร: ออกแบบให้รีโหลดแล้วข้อมูลไม่หาย และจัดการ error ให้ผู้ใช้เข้าใจ 5) สเปกที่ควรถามก่อนตีราคา/รับงาน - ต้องการแค่หน้าเว็บแสดงผล หรือมีการกดสั่งงาน/ควบคุมอุปกรณ์ด้วย - จำนวนหน้าจอ/จำนวนข้อมูลที่แสดง (เช่น รายการสินค้า 100 รายการ vs 10,000 รายการ) - ต้องรองรับมือถือ/แท็บเล็ต/จอทีวีโรงงาน - ต้องการส่งมอบแบบไฟล์ static หรือมี backend + database ถ้าใครกำลังเริ่มจากเดโม JavaScript DOM แบบในโพสต์นี้ ผมแนะนำให้ลองเพิ่ม 2 ฟีเจอร์ง่ายๆ เพื่อให้ใกล้งานจริงขึ้น: (1) ปุ่มเพิ่มลงตะกร้าเปลี่ยนเป็นอัปเดตจำนวนในหน้าแทน alert (2) ทำระบบค้นหาชื่อสินค้าแบบพิมพ์แล้วกรองทันที จะช่วยให้เห็นภาพการต่อยอดเวลาไปรับงานเขียนโค้ดมากขึ้นครับ
