صفحات تتفاعل: صفحات الويب الديناميكية
الصفحة الثابتة تبدو نفسها دائمًا، أما الصفحة الديناميكية فتتغير عندما يتصرف المستخدم. ويسمى التصرف حدثًا، مثل النقر على زر أو الضغط على مفتاح. والشفرة التي تعمل للحدث هي المعالج، ونربطه بسطر مثل button.onclick = () => { ... }. والصفحة التي تعدّ النقرات تحفظ العدد في متغير count. كل نقرة تنفذ count = count + 1 ثم تكتب القيمة الجديدة في الصفحة، فبعد ثلاث نقرات تعرض الصفحة ٣. ولقراءة ما كتبه المستخدم في مربع إدخال نستخدم خاصية value: تحمل box.value النص المكتوب، فتعرض "Hello " + box.value العبارة Hello Mona إذا كُتب Mona. وإذا لم تفعل الصفحة ما تتوقعه فصحّح: اقرأ رسالة الخطأ إن وُجدت، ثم اقرأ الشفرة سطرًا سطرًا، وغيّر شيئًا واحدًا، ثم اختبر من جديد. وفي المثال الخاطئ تبقى الصفحة فارغة لأن JavaScript حساسة لحالة الأحرف: textcontent ليست textContent، فينشئ السطر خاصية جديدة عديمة الفائدة ولا يتغير النص الظاهر.
1let count = 0; 2const show = document.getElementById("count"); 3document.getElementById("plus").onclick = () => { 4 count = count + 1; 5 show.textContent = count; 6};
| النقرة | count | النص في الصفحة |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
1const box = document.getElementById("name"); 2document.getElementById("hello").onclick = () => { 3 document.getElementById("out").textContent = "Hello " + box.value; 4};
1const show = document.getElementById("count"); 2let count = 0; 3document.getElementById("plus").onclick = () => { 4 count = count + 1; 5 show.textcontent = count; 6};
على الورق تتبع عدّاد النقرات لخمس نقرات واكتب النص في الصفحة بعد كل نقرة. ثم غيّر المعالج لتضيف كل نقرة ٢ واكتب الجدول الجديد. وأخيرًا اكتب روتين التصحيح في أربع خطوات قصيرة.