نــشــانــک ســایــت با کــد جــاوا اســکریپت
نشانک‌ها، ابزارهای مفیدی هستند که به کاربران امکان می‌دهند به سرعت به وب‌سایت‌های مورد علاقه خود دسترسی پیدا کنند. در اینجا، ما به بررسی چگونگی ایجاد نشانک سایت با استفاده از کد جاوا اسکریپت می‌پردازیم.
تعریف نشانک
نشانک به کاربر اجازه می‌دهد لینک یک صفحه وب را ذخیره کند. این عمل باعث می‌شود تا کاربر بدون نیاز به یادآوری یا جستجو، به راحتی به آن صفحه دسترسی پیدا کند.
چگونگی ایجاد نشانک با جاوا اسکریپت
برای این کار، می‌توانیم از متد `window.external.AddFavorite` استفاده کنیم. این متد به کاربر این امکان را می‌دهد که یک صفحه وب را به نشانک‌های مرورگر خود اضافه کند. با این حال، توجه داشته باشید که این روش فقط در مرورگر اینترنت اکسپلورر کار می‌کند.
```javascript
function addBookmark(title, url) {
if (window.sidebar && window.sidebar.addPanel) { // Firefox
window.sidebar.addPanel(title, url, '');
} else if (window.external && ('AddFavorite' in window.external)) { // IE
window.external.AddFavorite(url, title);
} else { // سایر مرورگرها
alert('برای اضافه کردن نشانک، از Ctrl+D استفاده کنید.');
}
}
```
توضیحات کد
- تابع `addBookmark`: این تابع دو پارامتر ورودی می‌گیرد: عنوان نشانک و URL.
- بررسی مرورگر: در اینجا، ما ابتدا بررسی می‌کنیم که آیا کاربر از فایرفاکس استفاده می‌کند یا اینترنت اکسپلورر. اگر هیچ‌کدام نباشد، یک پیام هشدار نشان داده می‌شود.
- استفاده از `alert`: این بخش از کد، کاربر را راهنمایی می‌کند که چگونه نشانک را به صورت دستی اضافه کند.
نکات مهم
- توجه به مرورگرها: در نظر داشته باشید که روش‌های مختلف برای مرورگرهای مختلف وجود دارد.
- تجربه کاربری: همیشه تجربه کاربری را در نظر بگیرید. راهنمایی‌های مفید می‌تواند به کاربر کمک کند.
با استفاده از این کد و نکات، شما می‌توانید به راحتی نشانک‌های سایت را با جاوا اسکریپت ایجاد کنید.
نشانک سایت با استفاده از کد جاوا اسکریپت
در دنیای وب، نشانک‌ها (Bookmarks یا Favorites) ابزارهای بسیار مهم و کاربردی هستند که به کاربران اجازه می‌دهند صفحات مورد علاقه‌شان را ذخیره و در آینده سریع‌تر به آن‌ها دسترسی داشته باشند. حال، اگر بخواهید کاربرانتان بتوانند نشانک‌هایی را به صورت داینامیک در سایت شما ایجاد یا مدیریت کنند، باید از جاوا اسکریپت بهره بگیرید. در ادامه، یک توضیح کامل و جامع درباره ساخت و مدیریت نشانک‌ها با جاوا اسکریپت ارائه می‌دهم.
بخش اول: مفاهیم پایه
نشانک‌ها در مرورگر، عموماً در نوار نشانک‌ها یا بخش‌های مشخص ذخیره می‌شوند، اما در سمت کاربر، می‌توانید نشانک‌های سفارشی را در قالب لیستی در صفحه وب نمایش دهید. این کار با استفاده از جاوا اسکریپت، ذخیره‌سازی محلی (Local Storage) و DOM انجام می‌شود.
بخش دوم: ایجاد یک سیستم نشانک ساده
فرض کنید، می‌خواهید صفحه‌ای داشته باشید که کاربر بتواند لینک‌های مورد علاقه‌اش را به آن اضافه کند و این نشانک‌ها در صفحه باقی بمانند، حتی پس از بروزرسانی. برای این کار، باید موارد زیر را انجام دهید:
- ایجاد فرم برای وارد کردن لینک و عنوان نشانک
- ذخیره نشانک‌ها در Local Storage
- نمایش نشانک‌ها در صفحه
- امکان حذف نشانک‌ها
بخش سوم: نمونه کد کامل جاوا اسکریپت
در ادامه، یک نمونه کد کامل برای این سیستم آورده‌ام:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=
- 0" />
<style>
body { font-family: Tahoma, sans-serif; margin: 20px; }
#bookmarkList { list-style: none; padding: 0; }
#bookmarkList li { margin: 10px 0; }
button { margin-left: 10px; }
</style>
</head>
<body>
<h2>اضافه کردن نشانک</h2>
<form id="bookmarkForm">
<input type="text" id="title" placeholder="عنوان" required />
<input type="url" id="url" placeholder="لینک" required />
<button type="submit">اضافه کردن</button>
</form>
<h2>نشانک‌های من</h2>
<ul id="bookmarkList"></ul>
<script>
// بارگذاری نشانک‌ها از Local Storage
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
const listContainer = document.getElementById('bookmarkList');
// تابع برای نمایش نشانک‌ها
function displayBookmarks() {
listContainer.innerHTML = '';
bookmarks.forEach((bookmark, index) => {
const li = document.createElement('li');
li.innerHTML = `<a href="${bookmark.url}" target="_blank">${bookmark.title}</a>
<button onclick="deleteBookmark(${index})">حذف</button>`;
listContainer.appendChild(li);
});
}
// فراخوانی تابع برای نمایش نشانک‌ها هنگام بارگذاری صفحه
displayBookmarks();
// افزودن نشانک جدید
document.getElementById('bookmarkForm').addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('title').value;
const url = document.getElementById('url').value;
bookmarks.push({ title, url });
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
displayBookmarks();
// ریست کردن فرم
document.getElementById('bookmarkForm').reset();
});
// حذف نشانک
function deleteBookmark(index) {
bookmarks.splice(index, 1);
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
displayBookmarks();
}
</script>
</body>
</html>
```
بخش چهارم: توضیح کد
- ذخیره‌سازی در Local Storage: وقتی کاربر نشانکی را اضافه می‌کند، این نشانک در آرایه `bookmarks` قرار می‌گیرد، سپس این آرایه به صورت رشته‌ای در Local Storage ذخیره می‌شود.
- نمایش نشانک‌ها: تابع `displayBookmarks()` لیست نشانک‌ها را از Local Storage خوانده، ساخته و در صفحه نمایش می‌دهد.
- حذف نشانک: با کلیک بر روی دکمه حذف، نشانک مربوطه از آرایه حذف شده و صفحه بروز می‌شود.
بخش پنجم: نکات مهم و توسعه‌های ممکن
- می‌توانید امکانات بیشتری اضافه کنید، مانند ویرایش نشانک‌ها، دسته‌بندی، یا ذخیره‌سازی در سرور.
- برای امنیت بیشتر، بهتر است از روش‌های احراز هویت و ذخیره‌سازی امن‌تر استفاده کنید، مخصوصاً اگر نشانک‌های کاربران مهم باشند.
- این سیستم به صورت پایه‌ای است و می‌تواند به سادگی با افزونه‌های دیگر یا فریم‌ورک‌های مختلف توسعه یابد.
---
اگر نیاز دارید، می‌توانم نمونه‌های پیشرفته‌تر، یا سیستم‌های پیچیده‌تر برای نشانک‌ها را هم برایتان شرح دهم.
