شرح JavaScript وتمارين إضافية
ارجع إلى هذه الصفحة عندما تحتاج إلى مثال كامل أو خطوات تجهيز المشروع أو تمرين إضافي. تابع الدروس القصيرة لإنجاز مهمة واحدة في كل مرة.
HTML المستخدم في هذا المثال
<h1>سارة</h1>
<button id="greet">رحّب بي</button>
<p id="message"></p>
<button id="count">أضف ضغطة</button>
<p id="total">0</p>
<button id="toggle">اعرض نبذتي</button>
<p id="details" hidden>أتعلّم بناء المواقع.</p>اجعل صفحتك تستجيب للمستخدم
أصبح لصفحتك محتوى وتنسيق. باستخدام JavaScript، تختار عنصراً وتغيّره عند ضغط المستخدم. في المثال، نختار الزر greet وننتظر ضغطة عليه. التعامل مع عناصر الصفحة بهذه الطريقة يُسمّى التعامل مع DOM.
JavaScript
document.getElementById("greet").addEventListener("click", () => {
document.getElementById("message").textContent = "Hello!";
});2. احفظ قيمة وغيّرها
تحفظ let قيمة يمكن تغييرها. يبدأ العدّاد هنا من صفر. تضيف كل ضغطة واحداً، ثم تعرض textContent القيمة. أضف إلى HTML زراً يحمل id=count وفقرة تحمل id=total.
JavaScript
let clicks = 0;
document.getElementById("count").addEventListener("click", () => {
clicks = clicks + 1;
document.getElementById("total").textContent = clicks;
});3. أظهر قسماً أو أخفه
تكون hidden مساوية لـ true عندما يكون العنصر مخفياً. وتعكس ! هذه القيمة. أضف زراً يحمل id=toggle وقسماً يحمل id=details وخاصية hidden. يبدّل الكود ظهوره مع كل ضغطة.
JavaScript
document.getElementById("toggle").addEventListener("click", () => {
const details = document.getElementById("details");
details.hidden = !details.hidden;
});أضف قسماً تفاعلياً إلى موقعك
- غيّر رسالة الترحيب في المحرّر. شغّل الكود وتأكد أنها تظهر بعد الضغط.
- أضف العنصرين count وtotal، ثم استخدم مثال العدّاد. اضغط ثلاث مرات؛ يجب أن تظهر القيمة 3.
- أضف قسماً للتفاصيل عنك وزراً لتبديل ظهوره. جرّب إظهاره وإخفاءه عدة مرات.
مشروعك: أضف هذا التفاعل إلى موقعك الذي بنيته في HTML وCSS. نفّذه في ملفاتك، وتأكد أن أسماء id تطابق الكود، ثم جرّبه بلوحة المفاتيح والفأرة. احتفظ به للمرحلة التالية.
شروحات ومراجع إضافية
ارجع إلى مصدر إذا احتجت إلى شرح أكثر
ركّز على الموضوعات التي تحتاجها لمهمة المرحلة. طبّق أثناء التعلّم؛ إنهاء كل المقاطع ليس شرطاً للمتابعة.
خطة دراسة JavaScript
من يريد مساراً واسعاً يغطي JavaScript وECMAScript الحديثة.
تفاصيل الدورةلغة الجافا سكربت
من يريد بديلاً منظماً داخل مسار واجهات متكامل.
تفاصيل الدورةمسار Frontend Development
من يريد مساراً يجمع JavaScript مع الأدوات والإطارات.
تفاصيل الدورةإذا واجهتك مشكلة
احفظ عملك، ثم جرّب أصغر خطوة تُظهر المشكلة. قارن ما توقّعت حدوثه بما حدث فعلاً. اقرأ رسالة الخطأ وراجع آخر تعديل. يمكنك الرجوع إلى أحد المصادر أعلاه لفهم النقطة التي صعبت عليك.