قراءة قيم الإدخال
يمكنكم الوصول إلى القيم من حقول النص ومربعات الاختيار وقوائم select.
قراءة قيم الإدخال درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
التعامل مع بيانات النماذج
تجمع النماذج إدخال المستخدم من خلال حقول مثل مربعات النص وخانات الاختيار وأزرار الاختيار والقوائم المنسدلة. ويعرض كل نوع بياناته بطريقة مختلفة قليلًا.
input.value
تعرض حقول الإدخال الشبيهة بالنص محتوياتها الحالية من خلال الخاصية value، وتكون قيمتها دائمًا سلسلة نصية.
const name = document.querySelector("#name");
console.log(name.value);value سلسلة نصية دائمًا
حتى حقول الأرقام تعيد سلسلة نصية. حوّل القيمة صراحةً عندما تحتاج إلى رقم.
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
توفر حقول الأرقام والتواريخ الخاصية valueAsNumber، التي تعيد رقمًا مباشرةً، أو NaN إذا كانت القيمة فارغة أو غير صالحة.
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
تعرض خانات الاختيار حالتها من خلال الخاصية المنطقية checked، وليس value.
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falseأزرار الاختيار
في مجموعة أزرار الاختيار، ابحث عن الزر المحدد. تحدد الخاصية checked الخيار المختار.
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");select Value
تعرض القائمة المنسدلة ذات الاختيار الواحد الخيار المحدد من خلال value.
const country = document.querySelector("#country");
console.log(country.value);اختيار متعدد
في القائمة متعددة الاختيارات، اقرأ selectedOptions ثم حوّل الخيارات إلى قيم.
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);حدث input
استمع إلى حدث input للاستجابة لكل ضغطة مفتاح أو تغيير في الوقت الفعلي.
name.addEventListener("input", (e) => {
console.log(e.target.value);
});حدث change
يُطلَق حدث change عندما يفقد الحقل التركيز بعد تغير قيمته، أو فورًا في خانات الاختيار والقوائم المنسدلة.
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
تجمع FormData جميع الحقول المسماة في النموذج دفعةً واحدة، مما يجعلها مثالية للإرسال إلى خادم.
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));تحقق سريع
اقرأ خانة الاختيار بالطريقة الصحيحة.
مراجعة
اقرأ حقول النص باستخدام value، التي تكون دائمًا سلسلة نصية، واستخدم valueAsNumber للأرقام. واقرأ خانات الاختيار وأزرار الاختيار باستخدام checked، والقوائم المنسدلة باستخدام value أو selectedOptions. استجب لحدث input عند كل تغيير، أو لحدث change عند اعتماد التغيير، واجمع كل البيانات دفعةً واحدة باستخدام FormData.
الأسئلة الشائعة
هل درس «قراءة قيم الإدخال» مجاني؟
نعم — نص درس «قراءة قيم الإدخال» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «قراءة قيم الإدخال»؟
يمكنكم الوصول إلى القيم من حقول النص ومربعات الاختيار وقوائم select. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «قراءة قيم الإدخال»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.