🎯 آنچه در این فصل یاد می‌گیرید:
- ✓ JSON — ساختار، تجزیه و ایجاد JSON
- ✓ کاربرد عملی — ساخت رابط کاربری با JSON
- ✓ E-commerce — نمایش محصول با اشیاء جاوا اسکریپت
آشنایی با JSON در جاوا اسکریپت
نمادگذاری شی جاوا اسکریپت - (JavaScript Object Notation (JSON یک فرمت شناخته شده جهانی برای تبادل و ذخیره داده های ساخت یافته است. این سینتکس خود را از جاوا اسکریپت مشتق می کند، اما به طور مستقل عمل می کند و امکان تبادل یکپارچه داده ها را بین کلاینت ها و سرورها یا بین اجزای مختلف یک برنامه وب فراهم می کند.
ماهیت JSON
JSON اساسا یک قالب متنی است که ساختار اشیاء جاوا اسکریپت را تقلید می کند. این برای خوانایی انسان و سهولت استفاده در زبان های برنامه نویسی طراحی شده است، و آن را به فرمت قابل استفاده برای API های وب و فایل های پیکربندی تبدیل می کند.
ویژگی های کلیدی JSON:
- مبتنی بر متن: JSON صرفاً متنی است و به راحتی توسط انسان قابل خواندن است.
- Language Agnostic: با وجود منشأ جاوا اسکریپت، JSON را می توان با بسیاری از زبان های برنامه نویسی استفاده کرد.
- داده های ساختاریافته: از آرایه ها، اشیا، رشته ها، اعداد، بولی ها و تهی پشتیبانی می کند.
کار با JSON در جاوا اسکریپت
جاوا اسکریپت یک شی JSON را با دو روش مهم ارائه می دهد:
- JSON.parse(): یک رشته JSON را به یک شی جاوا اسکریپت تبدیل می کند.
- JSON.stringify(): یک شی جاوا اسکریپت را به یک رشته JSON تبدیل می کند.
این متدها برای کار با داده‌های JSON ضروری هستند، چه آنها را از سرور دریافت کنید و چه از مشتری ارسال کنید.
مثال: تجزیه / Parsing JSON
تصور کنید یک رشته JSON از سروری دریافت کنید که حاوی اطلاعاتی درباره یک کتاب است:
// JSON string
'{"title": "The Hitchhiker's Guide to the Galaxy", "author": "Douglas Adams"}'
برای دسترسی به این داده ها در جاوا اسکریپت، آن را به این صورت تجزیه کنید:
// Parsing the JSON string
const bookData = JSON.parse('{"title": "The Hitchhiker's Guide to the Galaxy", "author": "Douglas Adams"}');
console.log(bookData.title); // Outputs: The Hitchhiker's Guide to the Galaxyمثال: ایجاد JSON
برعکس، اگر یک شی جاوا اسکریپت به نمایندگی از یک کاربر دارید و باید این داده ها را به یک سرور ارسال کنید، آن را به یک رشته JSON تبدیل می کنید:
// JavaScript object
const user = {name: "Jane Doe",
age: 28
};
// Converting the object to a JSON string
const userJSON = JSON.stringify(user);
// The result can be sent to a server
console.log(userJSON); // Outputs: {"name":"Jane Doe","age":28}کاربرد عملی: ساخت رابط کاربری
بیایید با ایجاد یک رابط کاربری ساده که اطلاعات فچ شده از یک فایل JSON را نمایش می دهد، آنچه را که در مورد JSON آموخته ایم اعمال کنیم.
ساختار HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Shape Creator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="userInfo"></div> <div id="result"></div> <script src="script.js"></script> </body> </html>
فایل جاوا اسکریپت
// Fetching user data from a JSON file
fetch('user.json').then(response => response.json()) // Convert the response to JSON
.then(data => {
// Displaying the user info
document.getElementById('userInfo').innerHTML = `<p>Name: ${data.name}</p><p>Age: ${data.age}</p>`;
});فایل user.json شامل:
{
"name": "John Doe",
"age": 30
}قطعه کد داده های کاربر را فچ می کند، JSON را تجزیه می کند و به صورت پویا نام و سن کاربر را در سند HTML درج می کند.
JSON نقشی اساسی در توسعه وب مدرن ایفا می کند و انتقال داده ها را در قالبی قابل خواندن تسهیل می کند. ادغام آن با جاوا اسکریپت از طریق متدهای تجزیه و رشته‌بندی شی JSON به توسعه‌دهندگان اجازه می‌دهد تا بدون دردسر داده‌ها را سریال‌سازی و سریال‌زدایی کنند و از جریان روان داده‌ها در برنامه‌های کاربردی وب اطمینان حاصل کنند.
نتیجه:
ساخت اشیاء با جاوا اسکریپت: نمایش ساده محصول تجارت الکترونیک
در این سناریو، ما با استفاده از HTML، CSS، جاوا اسکریپت و JSON یک نمایشگر ساده محصول تجارت الکترونیک ایجاد می کنیم. هدف ما تمرین ساختن و دستکاری اشیا و تولید پویا کارت های محصول در یک صفحه وب است.
شرح سناریو
یک فروشگاه اینترنتی را تصور کنید که محصولات مختلفی را به فروش می رساند. ما چند محصول از جمله نام، قیمت و تصاویر را در صفحه خود نمایش خواهیم داد. ما هر محصول را به عنوان یک شی تعریف می کنیم و از یک آرایه برای ذخیره چندین محصول استفاده می کنیم. سپس به صورت پویا محتوای HTML تولید می کنیم تا این محصولات را به صورت کارت در صفحه وب خود نمایش دهیم.
دستورالعمل های گام به گام
HTML (index.html)
ساختار اصلی صفحه را ایجاد کنید.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple E-Commerce Display</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Featured Products</h1> <div id="productContainer"></div> <script src="script.js"></script> </body> </html>
CSS (style.css)
برای اینکه کارت های محصول ما مرتب به نظر برسند، سبک هایی اضافه کنید.
/* Basic page styling */
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h1 {
color: #333;
}/* Styling for product cards */
.product-card {
background-color: white;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 20px;
width: calc(33% - 20px);
float: left;
margin-right: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.product-image img {
max-width: 100%;
height: auto;
}
.product-name, .product-price {
margin: 10px 0;
}عملکرد جاوا اسکریپت (script.js)
اشیاء محصول را تعریف کنید و کارت های محصول را به صورت پویا تولید کنید:
// Sample product data in JSON format
const productsJSON = `[
{
"name": "Laptop",
"price": "$999",
"image": "laptop.png"},
{
"name": "Smartphone",
"price": "$499",
"image": "smartphone.png"},
{
"name": "Headphones",
"price": "$199",
"image": "headphones.png"
}
]`;
// Parse JSON to JavaScript object
const products = JSON.parse(productsJSON);
// Function to generate product cards
function displayProducts(products) {
const container = document.getElementById('productContainer');
products.forEach(product => {
// Creating product card elements
const card = document.createElement('div');
card.className = 'product-card';
const image = document.createElement('div');
image.className = 'product-image';
image.innerHTML = `<img src="${product.image}" alt="${product.name}">`;
const name = document.createElement('h2');
name.className = 'product-name';
name.textContent = product.name;
const price = document.createElement('div');
price.className = 'product-price';
price.textContent = product.price;
// Appending elements to card and then card to container
card.appendChild(image);
card.appendChild(name);
card.appendChild(price);
container.appendChild(card);
});
}
// Call displayProducts to generate product cards
displayProducts(products);توضیح:
- HTML: ما یک ظرف <div> راه اندازی کردیم که در آن کارت های محصول ما نمایش داده می شود.
- CSS: یک ظاهر طراحی برای صفحه و کارت های محصول ارائه می دهد و آنها را به صورت شبکه ای از کارت ها نشان می دهد.
- ما با تعریف یک رشته JSON که محصولات ما را نشان می دهد شروع می کنیم.
- ما این JSON را به یک شی جاوا اسکریپت تجزیه می کنیم تا بتوانیم با آن کار کنیم.
- تابع displayProducts محصولات ما را می گیرد و به صورت پویا عناصر HTML را برای هر محصول ایجاد می کند و جزئیات مربوطه را از اشیاء محصول ما درج می کند.
- در نهایت برای نمایش محصولات در صفحه ما این تابع را فراخوانی می کنیم.
نتیجه:
از طریق این تمرین، نحوه ساخت اشیاء در جاوا اسکریپت و استفاده از آنها برای تولید پویا محتوا در یک صفحه وب را مشاهده کرده اید. این الگو سنگ بنای توسعه وب مدرن است که به برنامه های کاربردی وب پویا و تعاملی اجازه می دهد.