۱۹ مارس ۲۰۲۱

تعاملی: آلِرت، پِرامت، کانفرم

همانطور که از مرورگر به عنوان محیط آزمایشی خودمان استفده می‌کنیم، بگذارید چندتایی تابع تعاملی را بررسی کنیم: alert، prompt و confirm.

آلِرت

این یکی را قبلاً هم دیده‌ایم. یک پیغام نمایش می‌دهد و صبر می‌کند تا کاربر دکمهٔ «OK» را بزند.

برای مثال:

alert("Hello");

این پنجرهٔ کوچک همراه با پیغام یک modal window است. کلمهٔ «modal» به معنای آن است که بازدیدکننده نمی‌تواند با بقیهٔ صفحه تعامل کند، دکمه‌های دیگر را بزند و یا غیره، تا زمانی که با پنجرهٔ بازشده کارش تمام شده باشد. در این مورد خاص – تا زمانی که دکمهٔ «OK» را بزند.

پِرامت

تابع primpt دو پارامتر دارد:

result = prompt(title, [default]);

این تابع یک پنجرهٔ modal همراه با یک پیغام، یک فیلد ورودی برای بازدیدکننده، و دکمه‌های «OK/Cancel» را نمایش می‌دهد.

title
پیغامی که به کاربر نمایش داده می‌شود.
default
یک پارامتر دوم اختیاری، مقدار اولیه برای فیلد ورودی.
براکت های در سینتکس [...]

براکت‌های اطراف defaultدر سینتکس بالا اختیاری بودن پارامتر را مشخص می‌کند.

بازدیدکننده می‌تواند چیزی را در فیلد ورودی پِرامت تایپ کند و دکمهٔ «OK» را بزند. سپس ما متن را در result دریافت می‌کنیم. یا بازکننده می‌تواند با زدن دکمهٔ «Cancel» یا فشردن Esc ورودی را کنسل کند،

تابع prompt متن دریافتی از فیلد ورودی و یا null در صورت کنسل شدن را بر می‌گرداند.

برای مثال:

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!
در اینترنت اکسپلورر: همیشه default را تعریف کنید.

پارامتر دوم اختیاری است، اما اگر آن را تعریف نکنیم، اینترنت اکسپلورر متن "undefined" را درون آن قرار می‌دهد.

کد زیر را در اینترنت اکسپلورر اجرا کنید تا ببینید:

let test = prompt("Test");

پس، برای خوب به نظر رسیدن پِرامت‌ها در اینترنت اکسپلورر، ما پیشنهاد می‌کنیم همیشه پارامتر دوم را تعریف کنید:

let test = prompt("Test", ''); // <-- for IE

کانفرم

سینتکس کد:

result = confirm(question);

تابع confirm یک پنجرهٔ modal همراه با یک سوال و دو دکمهٔ OK و Cancel نمایش می‌دهد.

در صورتی که OK کلیک شود، نتیجه true و در غیر این‌صورت، نتیجه false خواهد شد.

برای مثال:

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true if OK is pressed

خلاصه

ما ۳ تابعٔ خاص مرورگر را که از طریق آن‌ها می‌توان با کاربر تعامل کرد را بررسی کردیم:

alert
نمایش یک پیغام.
prompt
نمایش یک پیغام و درخواست از کاربر برای وارد کردن متن. این تابع متن را و یا اگر دکمهٔ Cancel یا Esc زده شود null را بر می‌گرداند.
confirm
نمایش یک پیغام و منتظرماندن برای کاربر تا دکمهٔ «OK» یا «Cancel» را فشار دهد. این تابع برای OK true و برای Cancel/Esc false را بر می‌گرداند.

همهٔ این توابع، مُدال هستند: آن‌ها اجرای اسکریپت را متوقف می‌کنند و به بازدیدکننده اجازه تعامل با بقیهٔ صفحه را تا زمانی که پنجره بسته شود نمی‌دهند.

دو محدودیت دربارهٔ همهٔ تابع‌های بالا وجود دارد:

  1. مکان دقیق پنجرهٔ modal توسط مرورگر تعیین می‌شود. معمولاً در وسط صفحه قرار دارد.
  2. ظاهر دقیق پنجره نیز توسط مرورگر تعیین می‌شود. ما نمی‌توانیم آن را تغییر دهیم.

این بهایی‌ست که برای سادگی می‌پردازیم. راه‌های دیگری برای نمایش پنجره‌های بهتر و غنی‌تر برای تعامل با بازدیدکننده نیز وجود دارد، ولی اگر «زرق و برق» برای‌تان مهم نیست، این توابع کار را به خوبی انجام می‌دهند.

تمارین

اهمیت: 4

یک صفحهٔ وب ساده بسازید که نام را درخواست می‌کند و آن را نمایش می‌دهد.

اجرای دمو

کد جاوااسکریپت:

let name = prompt("What is your name?", "");
alert(name);

کل صفحه:

<!DOCTYPE html>
<html>
<body>

  <script>
    'use strict';

    let name = prompt("What is your name?", "");
    alert(name);
  </script>

</body>
</html>
نقشه آموزش

نظرات

قبل از نظر دادن این را بخوانید…
  • اگر پیشنهادی برای بهبود ترجمه دارید - لطفا یک ایشوی گیت‌هاب یا یک پول‌ریکوئست به جای کامنت‌گذاشتن باز کنید.
  • اگر چیزی را در مقاله متوجه نمی‌شوید – به دقت توضیح دهید.
  • برای قراردادن یک خط از کد، از تگ <code> استفاده کنید، برای چندین خط – کد را درون تگ <pre> قرار دهید، برای بیش از ده خط کد – از یک جعبهٔ شنی استفاده کنید. (plnkr، jsbin، codepen…)