الدرس الخامس — كيف تفهم الكود الذي ينتجه الذكاء الاصطناعي؟

١. ما الهيكل العام؟ (كم ملف؟ كم قسم؟)
٢. ما الأجزاء الكبيرة؟ (Functions, Components, Sections)
٣. أين المنطق الرئيسي؟ (أين القرارات تُتخذ؟)
٤. هل هناك شيء غريب أو غير متوقع؟

اشرح لي هذا الكود بالعربي سطراً سطراً بأسلوب بسيط:

[الصق الكود هنا]

ما الذي يفعله هذا السطر بالضبط؟
const filteredItems = items.filter(item => item.active === true);

ما معنى كلمة "async" في هذا الكود؟ اشرح لي كأنني لا أعرف البرمجة.

لماذا استخدمت localStorage هنا بدلاً من متغير عادي؟
ما الفرق العملي؟

<!-- هيكل صفحة بسيطة -->
<header>        <!-- رأس الصفحة (الشعار والقائمة) -->
  <nav>         <!-- قائمة التنقل -->
    <a>         <!-- رابط -->
  </nav>
</header>

<main>          <!-- المحتوى الرئيسي -->
  <section>     <!-- قسم مستقل -->
    <h1>        <!-- العنوان الرئيسي (واحد فقط لكل صفحة) -->
    <h2>        <!-- عنوان فرعي -->
    <p>         <!-- فقرة نصية -->
  </section>
</main>

<footer>        <!-- تذييل الصفحة -->
</footer>

/* استهداف عنصر مباشرة */
h1 {
  font-size: 2rem;     /* حجم الخط */
  color: #ffffff;      /* اللون */
  text-align: center;  /* التوسيط */
}

/* استهداف عنصر بـ class */
.card {
  background: #1a1a1a;  /* خلفية داكنة */
  padding: 1rem;         /* مسافة داخلية */
  border-radius: 8px;    /* حواف دائرية */
}

// ١. الحصول على عنصر من الصفحة
const button = document.querySelector('#myButton');

// ٢. الاستماع لحدث (ضغطة، تحريك، كتابة)
button.addEventListener('click', function() {
  // ٣. تنفيذ شيء عند الحدث
  alert('تم الضغط!');
});

// ٤. تغيير محتوى عنصر
document.querySelector('#title').textContent = 'عنوان جديد';

// ٥. إضافة/إزالة class (لتغيير التصميم)
button.classList.toggle('active');

function   → وصفة طبخ — مجموعة خطوات لها اسم
variable   → صندوق يخزّن قيمة
array      → قائمة من العناصر [١, ٢, ٣]
object     → بطاقة تعريف {الاسم: "عبدالله", العمر: 25}
if/else    → قرار: إذا كان كذا → افعل كذا، وإلا → افعل كذا
loop       → كرّر هذه الخطوة حتى ينتهي الشرط
API        → وسيط يجلب بيانات من موقع آخر
async      → "انتظر هذه الخطوة قبل المتابعة"