جاري التحميل...

النماذج

مكتب الشاي يحتفظ بقسيمة واحدة. النموذج هو #slip. فيه حقل نص #guest واسمه guest، وحقل رقم #cups واسمه cups، وزر #send من النوع type="submit". تحت النموذج يقول #note كلمة blank.
النموذج يجمع حقولاً لها أسماء. ما كتبه الزائر تقرأه من value، وهذه الخاصية نص دائماً حتى لو كان نوع الحقل number. إرسال النموذج حدث submit على النموذج نفسه. من دون preventDefault يفتح المتصفح عنوان النموذج وتختفي هذه الصفحة. هذه القسيمة تستدعي preventDefault فيبقى النص مقروءاً. تضبط الصفحة الضيف على lida والفناجين على 2، وتنقر send مرة واحدة، فيصير السطر lida / 2 / stayed.

ليست شريط التذاكر

شريط التذاكر وضع مستمعاً واحداً للنقر على الأب وقرأ event.target. سطره كان red / blue / gold / 1 ولم يستدعِ preventDefault. صفحة اللوحة استدعت ذلك على رابط، وسطرها click / seal / plaque / true / quiet. هذه القسيمة ليست أياً منهما. لا زر gold ولا currentTarget. اسم الحدث submit. القيمتان المهمتان هما lida والنص 2.
getElementById("guest") يجد الحقل بالمعرّف. slip.elements.guest يجده بالاسم عبر النموذج. هنا المعرّف والاسم كلمة واحدة حتى يعمل الطريقان. درس لاحق يفحص الحقل الفارغ أو الصيغة. هذه الصفحة لا تفعل ذلك. الضيف الفارغ يُرسَل أيضاً.

ماذا تسجّل القسيمة

يبدأ النص بكلمة blank. الضيف والفناجين فارغان في البداية. تسمية الزر تبقى send. اقرأ الصفوف بالترتيب. كل مقطع يبدأ من القسيمة الفارغة، إلا صف الصفحة فهو العرض في الأسفل. ذلك العرض ينقر send مرة واحدة.

📊 ماذا تسجّل القسيمة

اللحظة ماذا تقرأ نص الملاحظة الخلط السهل
ضبط الضيف على lida guest.value lida قراءة المعرّف guest
ضبط الفناجين على 2 cups.value 2 وهو نص توقع الرقم 2
نقر send والدالة تكتب stayed الملاحظة stayed استدعاء slip.submit() فيتخطى المستمع
الاسمان عبر النموذج elements.guest وelements.cups lida 2 قراءة elements.slip
سكربت الصفحة السطر lida / 2 / stayed red / blue / gold / 1

value لا يحوّل حقل الرقم إلى رقم. بعد تخزين 2 تكون cups.value المحارف 2. typeof cups.value يساوي "string". إذا احتجت رقماً لاحقاً فحوّله أنت. هذا السطر لا يفعل ذلك.
send.click() يطلق submit لأن نوع الزر submit. slip.submit() نداء آخر: يرسل النموذج ولا يشغّل مستمع submit، فلا تصل preventDefault إلى التنفيذ. هذه الصفحة تستخدم نقرة الزر.

طريقان إلى الحقل نفسه

getElementById("cups") يستخدم المعرّف. slip.elements.cups يستخدم الاسم، وبعد أن تمسك النموذج فقط. هنا الصفتان الكلمة نفسها فيتفق الطريقان. لو كان الاسم count وبقي المعرّف cups، لما وُجد elements.cups ولصار الحقل تحت elements.count.

اسم الضيف

الحقل يبدأ فارغاً. يخزّن السكربت lida في value ثم يعيد قراءة الخاصية نفسها إلى النص. لم يُرسَل شيء بعد.

Read the guest

javascript 
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);

السجل lida. المعرّف هو guest. النص ليس كلمة guest. هو أي سلسلة تجلس في value.

كم فنجاناً

قسيمة جديدة. حقل الفناجين type="number". خزّن 2 واقرأ value ثم اسأل typeof.

Read the cups as text

javascript 
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);

السجل 2 string. الصندوق يبدو رقمياً والسكربت استلم نصاً. خزّن الرقم 2 من دون علامات اقتباس وستعود الخاصية نص "2" أيضاً.

زر الإرسال

قسيمة جديدة. المستمع على النموذج لحدث submit. يستدعي preventDefault ويكتب stayed. ثم تنقر الصفحة زر send. لا تستدعي slip.submit().

Stay on the page

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);

السجل stayed. المستمع اشتغل فلم يغادر المتصفح هذه الصفحة. استدعِ slip.submit() بدل نقر send فلا تعمل الدالة pour. يبقى النص blank.

الأسماء على القسيمة

قسيمة جديدة بلا مستمع. يكتب السكربت الحقلين عبر slip.elements باستخدام الاسم، ثم يجمعهما في النص.

Read both names

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);

السجل lida 2. elements.guest هو الحقل الذي اسمه guest، وليس عنصراً معرّفه slip. المسافة فاصل في النص فقط. سطر الصفحة يستخدم لاحقاً /.

السطر تحت القسيمة

السكربت في آخر body بعد النموذج والفقرتين. mark يبدأ left. المستمع يمنع الإرسال الافتراضي، وينسخ القيمتين إلى النص، ويجعل mark مساوياً stayed. ثم يملأ السكربت lida و 2 وينقر send مرة واحدة. يُكتب السطر بعد تلك النقرة.

Page demo — tea slip

html 
<!DOCTYPE html>
<html>
<head>
<title>forms — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>

السطر lida / 2 / stayed. الكلمة الأولى الضيف، والثانية الفناجين كنص، والأخيرة mark. المستمع اشتغل فالكلمة الأخيرة stayed وليست left. ينتهي النص عند lida / 2. كلمة blank ذهبت. سطر التذاكر صفحة أخرى. هذه القسيمة لا تتحقق من امتلاء الحقول.

عند المنضدة

  1. خزّن lida في حقل الضيف واقرأ value. النص lida.
  2. خزّن 2 في الفناجين واقرأ value مع typeof. النص 2 string.
  3. استمع إلى submit واستدعِ preventDefault وانقر send. النص stayed.
  4. اقرأ الحقلين عبر slip.elements. ثم اقرأ سطر الصفحة: lida / 2 / stayed.

أخطاء عند المنضدة

التسميات تبقى guest و cups و send. النص ليس كلمة slip.

  • اعتبار cups.value الرقم 2
  • استدعاء slip.submit() وانتظار تشغيل pour
  • نسيان preventDefault فيفتح المتصفح عنوان النموذج
  • قراءة المعرّف guest وأنت تريد value
  • البحث عن slip.elements.slip
  • فحص الحقول الفارغة أو الأنماط في هذه الصفحة
  • قراءة السطر كأنه red / blue / gold / 1

احتفظ بهذا

  • guest.value هي lida بعد تخزين lida
  • cups.value النص 2 وtypeof يساوي "string"
  • send.click() يشغّل مستمع submit وslip.submit() لا يفعل
  • preventDefault هو سبب بقاء الصفحة وإمكان قول stayed
  • slip.elements.guest وslip.elements.cups يقرآن الحقلين المسمّيين
  • سطر الصفحة lida / 2 / stayed

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 53 من 55
Javascript درس تعليمي