در حال بارگذاری...

فرم‌ها

چای‌خانه یک برگه دارد. فرمش #slip است. فیلد متنی #guest که name آن هم guest است، فیلد عددی #cups که name آن هم cups است، و دکمهٔ #send با type="submit". زیر فرم، بند #note هنوز blank می‌گوید.
فرم چند فیلد نام‌دار را یک‌جا جمع می‌کند. آنچه نوشته شده در value همان فیلد است. این ویژگی همیشه رشته است، حتی وقتی type فیلد number باشد. فرستادن فرم رویداد submit روی خود فرم است، نه کلیکی که روی تک‌تک فیلدها گوش بدهی. اگر preventDefault را صدا نزنی، مرورگر آدرس فرم را باز می‌کند و این صفحه می‌رود. اینجا preventDefault زده می‌شود تا بند سر جایش بماند. اسکریپت مهمان را lida می‌گذارد، فنجان را 2، یک بار روی send کلیک می‌کند، و خط می‌شود lida / 2 / stayed.

این نوار بلیت نیست

نوار بلیت یک شنوندهٔ کلیک روی پدر داشت و event.target را می‌خواند. خطش red / blue / gold / 1 بود و preventDefault نداشت. صفحهٔ پلاک preventDefault را روی یک لینک زد. خطش click / seal / plaque / true / quiet بود. این برگه هیچ‌کدام نیست. دکمهٔ gold ندارد و کارش currentTarget نیست. نام رویداد submit است. مقدارهایی که این‌جا مهم‌اند lida و رشتهٔ 2 هستند.
getElementById("guest") فیلد را با id پیدا می‌کند. slip.elements.guest همان فیلد را با name، از داخل فرم، پیدا می‌کند. در این نشانه‌گذاری id و name یکی است تا هر دو راه درست کار کند. درس بعدی خالی بودن یا شکل فیلد را وارسی می‌کند. این صفحه نه. مهمان خالی هم فرستاده می‌شود.

برگه چه را یادداشت می‌کند

بند از blank شروع می‌شود. مهمان و فنجان اول خالی‌اند. نوشتهٔ دکمه همان send می‌ماند. ردیف‌ها را به ترتیب بخوان. هر قطعه از برگهٔ خالی شروع می‌شود، جز ردیف صفحه که مال نمایش پایین است. آن نمایش یک بار روی send کلیک می‌کند.

📊 برگه چه را یادداشت می‌کند

لحظه چه را می‌خوانی متن بند لغزش رایج
گذاشتن lida در مهمان guest.value lida خواندن id که 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 را روی فرم آتش می‌کند، چون type دکمه submit است. slip.submit() صدای دیگری است. به مرورگر می‌گوید فرم را بفرست، و شنوندهٔ submit تو را اجرا نمی‌کند. پس preventDefault داخل آن شنونده اصلاً نوبت پیدا نمی‌کند. این صفحه از کلیک دکمه استفاده می‌کند.

دو راه به یک فیلد

getElementById("cups") از id استفاده می‌کند. slip.elements.cups از name استفاده می‌کند، و فقط وقتی فرم را از قبل در دست داشته باشی. اینجا هر دو ویژگی یک واژه‌اند، پس دو راه با هم جورند. اگر name برابر count بود و id همان 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 است. id برابر 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 است. شنونده اجرا شده، پس مرورگر این صفحه را ترک نکرده. اگر به‌جای کلیک send، slip.submit() را صدا بزنی، تابع pour اجرا نمی‌شود. بند blank می‌ماند.

نام‌ها روی برگه

برگهٔ تازه، این بار بدون شنونده. اسکریپت هر دو فیلد را از راه slip.elements و با name می‌نویسد، بعد در بند به هم می‌چسباند.

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 همان input است که nameاش guest است، نه عنصری که idاش 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، تا مرورگر آدرس فرم را باز کند
  • خواندن id مهمان وقتی value را می‌خواستی
  • گشتن دنبال slip.elements.slip
  • وارسی فیلد خالی یا الگو در همین صفحه
  • خواندن خط به شکل red / blue / gold / 1

این را نگه دار

  • بعد از ذخیرهٔ lida، guest.value همان 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 آموزش