فهم الأساسيات

(ج) بناء مدير لسجلات الكتاب مع شركة جافاسكوريبت وشركة تخزين الشبكة العالمية (PavaScript) مشروع ممتاز لتقنين المفاهيم الأساسية للنهاية الأمامية، ويجب أن يتناول الطلب في جوهره ثلاث عمليات رئيسية: ] ، ] [الحياة التقليدية:]

قبل كتابة خط واحد من الرموز، ترسي فهمك للركائز التالية:

  • The DOM API:] You will query elements, listen for events, and manipulate the document tree to display bookmarks dynamically.
  • localStorage:] This key-value store retains data even after the browser is closed. It only supports strings, so objects must be seriesized with and deserialized with .
  • Event-driven programming:] Forms emit events; delete blues fire events.
  • Array methods:] , , and ] will help render and manipulate the bookmarks list efficiently.

بناء مدير الكتاب الأساسي

هيكل HTML

ابدأ برسم هيكلي بسيط وثامن للكتاب الآلي HTML، ويجمع النموذج اسم علامة الكتاب ورقم URL؛ وتصدر قائمة غير مُحللة علامات الكتاب المخزنة.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Bookmark Manager</title>
</head>
<body>
 <h1>My Bookmarks</h1>
 <form id="bookmarkForm">
 <label for="name">Name</label>
 <input type="text" id="name" required />
 <label for="url">URL</label>
 <input type="url" id="url" required />
 <button type="submit">Add Bookmark</button>
 </form>
 <ul id="bookmarkList"></ul>
 <script src="app.js" defer></script>
</body>
</html>

Notice the ] attribute on the script tag -it ensures the DOM is fully parsed before the script runs, eliminating the need for a ]] wrapper in modern setups.

وضع العلامات على القابلية للاستقرار (على المستوى المثالي ولكن الموصى به)

وفي حين أن الوصلة البينية النظيفة ليست هي محور التركيز، فإنها تحسن من خبرة المستعملين، وتضيف ورقة نمطية بسيطة إلى الفضاء الخارجي، وتلقي نظرة متسقة، وتضع قائمة الكتب المرجعية التي لها آثار على المزمار، كما يمكن أيضاً حقن مصغرة عن طريق جافاسكريبت، ولكن يفضل الاحتفاظ بقائمة منفصلة [(FLT:11]).

<!-- inside <head> -->
<link rel="stylesheet" href="style.css" />

In , use flexbox for the form layout, a maximum width for the container, and distinct visual feedback for delete blues to prevent accidental reads.

JavaScript Logic - The Heart of the Application

وتعيش جميع هذه الثبات والتفاعلات في . وتفصل الأقسام التالية كل مهمة.

البيانات

نحتاج إلى متغير مركزي يحمل قائمة المعالم الكتابية الحالية، وينبغي أن يُستهل من أو أن يتراجع إلى صفيفة فارغة.

let bookmarks = [];

function loadBookmarks() {
 const stored = localStorage.getItem('bookmarks');
 if (stored) {
 bookmarks = JSON.parse(stored);
 } else {
 bookmarks = [];
 }
}

function saveBookmarks() {
 localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}

loadBookmarks();

وتسمى وظيفة كل مرة تتغير فيها الصفائف - بعد إضافة أو تحرير أو حذف علامة كتابية، وهذا يضمن أن يكون التخزين متزامنا دائما مع مجموعة المذكرات.

دلائل الكتاب المصور

ويُعدّ عرض قائمة المعالم الكتابية تكراراً على صفيفة ] ووضع بنود قائمة بعلامة مرساة وزرّ مُحذف.

function renderBookmarks() {
 const list = document.getElementById('bookmarkList');
 list.innerHTML = ''; // clear existing entries

 bookmarks.forEach(function(bookmark, index) {
 const li = document.createElement('li');
 li.dataset.index = index;

 const link = document.createElement('a');
 link.href = bookmark.url;
 link.textContent = bookmark.name;
 link.target = '_blank';
 link.rel = 'noopener noreferrer';

 const deleteBtn = document.createElement('button');
 deleteBtn.textContent = 'Delete';
 deleteBtn.addEventListener('click', function() {
 deleteBookmark(index);
 });

 li.appendChild(link);
 li.appendChild(deleteBtn);
 list.appendChild(li);
 });
}

وباستخدام بدلاً من استخدام نظام داخلي للصرف الآلي للبيانات الجمركية يتجنب أوجه الضعف في نظام خدمات الدعم المركزية عندما تتضمن أسماء العلامات الدفترية HTML. ويستخدم الزر الحذف إغلاقاً لاستخلاص الرقم القياسي للعلامات الكتابية.

إضافة علامة كتاب

الاستماع إلى الحدث الذي وقع في النموذج ](FLT:21[، ومنع إعادة تحميل الصفحة المتخلفة، وخلق موضوع علامة كتابية، ودفعها إلى الصفيفة، والاستمرار، وإعادة طرحها.

document.getElementById('bookmarkForm').addEventListener('submit', function(e) {
 e.preventDefault();

 const nameInput = document.getElementById('name');
 const urlInput = document.getElementById('url');

 const newBookmark = {
 name: nameInput.value.trim(),
 url: urlInput.value.trim()
 };

 // Basic validation: ensure URL starts with http/https
 if (!newBookmark.url.startsWith('http://') && !newBookmark.url.startsWith('https://')) {
 newBookmark.url = 'https://' + newBookmark.url;
 }

 bookmarks.push(newBookmark);
 saveBookmarks();
 renderBookmarks();

 // Reset form
 nameInput.value = '';
 urlInput.value = '';
 nameInput.focus();
});

وهذا النهج مباشر، بالنسبة للإنتاج، قد ترغب في التحقق من الشكل الذي يُستخدم في استخدام البنيان أو البقعة.

حذف علامة كتاب

ويزيل حذف البند من الرقم القياسي المعين ويستكمل التخزين وإدارة الشؤون الإدارية.

function deleteBookmark(index) {
 bookmarks.splice(index, 1);
 saveBookmarks();
 renderBookmarks();
}

(د) إذا كنت تفضل عدم التكرار، فيمكنك استخدام [(FLT:26]) وإعادة تعيين ، ولكن لمشروع صغير كهذا، واضح ومؤدّي.

تعزيز التطبيق

وبمجرد أن تعمل وحدة مكافحة المخدرات الأساسية، ينظر في هذه التحسينات لتحويل نموذج أولي إلى أداة قوية.

حرر العلامات الكتابية

يستعاض عن الاسم الثابت/الوصلة بنموذج التحرير المباشر، وعندما يضغط المستخدم زر التحرير، يتبادل مع حقول المدخلات التي تم ملؤها بالقيم الحالية، وعند الحفظ، يستكمل الصفيف ويستمر.

Implementation hint: add an ] function that creates editable inputs. Use event delegation] on the list to handle edit saves without attaching multiple listeners.

تصنيف مع التاغز

(ب) إضافة ممتلكات اختيارية إلى كل مادة من مواد الكتاب (مثلاً، [(FLT:31]]) ثم توسيع نطاق تطبيق نظام المعلومات الإدارية المتكامل بمدخلات مرشحة تخفي قائمة الأصناف التي لا تتطابق مع علاماتها، ويمكنك تخزين البطاقات كخط فاصل داخل النموذج وتقسيمها إلى صفيفة.

الواردات والصادرات

(د) السماح للمستعملين بنسخ دفتر احتياطي أو نقل، واستخدام حمولة [(FLT:32]) أو تحميل الملفات، وتسلسل الصادرات [(FLT:33]) في سلسلة من دفترات (JON) وبث التحميل عن طريق و.

function exportBookmarks() {
 const data = JSON.stringify(bookmarks, null, 2);
 const blob = new Blob([data], { type: 'application/json' });
 const url = URL.createObjectURL(blob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'bookmarks.json';
 a.click();
 URL.revokeObjectURL(url);
}

البحث والملف

(د) إضافة مدخل فوق قائمة العلامات المرجعية، في كل مناسبة ]، تصفيف صفيفة ]] بالاسم (أو URL) وتسمية متغير لا يظهر سوى المباريات، وتفادي فقدان القائمة الأصلية، وتخزين نسخة مغلفة أو استخدام البارامترات المحسوبة.

الاختبار والقابلية للاختبار

Local Storage is supported in all modern browsers, but older versions of Internet Explorer (IE 8+) had a different API. If you must support legacy environments, test with polyfills or fall back to Cookies. Today’s Chrome, Firefox, Safari, Edge](both Chromium and legacy)

عند الاختبار، التحقق:

  • البيانات تنجو من إعادة فتح الصفحات و إعادة تشغيل المصفوفين
  • تحرير علامة الكتاب تحديث كل من وحدة التفتيش المشتركة والتخزين.
  • وتُصدر الشخصيات الخاصة في الأسماء المرجعية للكتاب (الاقتباسات، والكمبرات) بشكل صحيح.
  • URLs with and without are normalized.

Use developer tools] > Application < Storage > Local Storage to inspect rescue data manually.
] For automated testing, consider using Cypress[ or [FLT form:5]Playwright add

خاتمة

ويبيّن هذا المشروع كيف يمكن لعشرات خطوط الفانيلا جافاسكيبت أن تستحدث تطبيقاً عملياً ومستمراً على الشبكة العالمية، وقد تعلمت أن تسخر ] من عمليات التخزين المحلي من أجل استمرار البيانات، ] وفد الدولة [FUDLT:3] من أجل تحديثات فعالة للمبادرة، و

To deepen your understanding, explore the MDN documentation on localStorage and read about ]event handling in the DOM. For more advanced state management, look into IndexedDB for larger dataets or6