تا اینجا در دو مقاله قبلی از سری مقالات "آموزش مقدماتی جاوااسکریپت"، مباحث پایه ای رو بررسی کردیم. در مقاله اول، با مفهوم متغیرها و انواع داده ها آشنا شدیم و دیدیم که چطور جاوااسکریپت به ما امکان می‌ده تا داده‌های مختلفی رو در برنامه هامون ذخیره و مدیریت کنیم. در مقاله دوم، به مفهوم عملگرها و روش‌های مختلف دستکاری داده ها پرداختیم و یاد گرفتیم که چطور داده‌ها رو به انواع دیگر تبدیل کنیم و از نوع داده‌های مختلف استفاده کنیم.

حالا تو این مقاله، به یکی از بخش‌های جذاب و کاربردی جاوااسکریپت می‌پردازیم: تعامل با کاربر. به طور خاص، از سه تابع اصلی جاوااسکریپت یعنی alert، prompt و confirm استفاده می‌کنیم تا یاد بگیریم چطور با کاربر در مرورگر ارتباط برقرار کنیم، ازش ورودی بگیریم و با توجه به جواب هاش واکنش‌های متفاوتی نشون بدیم. این سه تابع به ما اجازه می‌دن که پیام‌های ساده نمایش بدیم، از کاربر اطلاعات بگیریم و حتی سوالاتی با جواب بله/خیر مطرح کنیم. بریم سراغ جزئیات و نحوه استفاده از این توابع در پروژه‌های خودمون.

تعامل با کاربر در جاوااسکریپت: alert، prompt و confirm

حالا که قراره از مرورگر برای اجرای کدهای جاوااسکریپت استفاده کنیم، بیایید با چندتا از دستورات جاوااسکریپت آشنا بشیم که می‌تونیم باهاشون با کاربر تعامل داشته باشیم. این دستورات شامل alert، prompt و confirm هستن.

alert

این دستور رو قبلاً دیدیم! alert یه پیغام رو به کاربر نشون می‌ده و منتظر می‌مونه تا کاربر دکمه “OK” رو بزنه.

مثال:

alert("Hello");

وقتی alert رو صدا می‌زنیم، یه پنجره کوچیک باز می‌شه که بهش می‌گن پنجره مودال. این یعنی تا وقتی که کاربر پیغام رو نبنده و دکمه “OK” رو نزنه، نمی‌تونه با بقیه بخش‌های صفحه کاری انجام بده.

prompt

تابع prompt یه قدم جلوتره و علاوه بر نشون دادن یه پیغام، به کاربر اجازه می‌ده که توی یه فیلد متنی چیزی تایپ کنه. این تابع دوتا آرگومان می‌گیره:

result = prompt(title, [default]);

• title: متنی که به کاربر نشون داده می‌شه (مثل سؤال یا راهنما).
• default: مقداری که به طور پیش فرض توی فیلد ورودی نشون داده می‌شه (اختیاریه).

داخل این پنجره، کاربر می‌تونه یه متنی رو تایپ کنه و بعدش روی OK کلیک کنه تا اون متن رو دریافت کنیم. اگه کاربر به جای OK روی Cancel کلیک کنه یا کلید Esc رو بزنه، نتیجه برابر null می‌شه.

مثال:

let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // خروجی مثلاً: شما 100 سالتونه!

توی این مثال، یه پنجره باز می‌شه که از کاربر می‌پرسه "چند سالته؟" و مقدار پیش فرضش 100 هست.

نکته: تعامل با کاربر در اینترنت اکسپلورر

وقتی از prompt استفاده می‌کنیم، پارامتر دوم اختیاریه و می‌تونیم مقدار پیش فرض رو خالی بذاریم. اما یه نکته ریز هست! توی مرورگر اینترنت اکسپلورر، اگه این پارامتر رو خالی بذاریم، به جاش متن "undefined" رو نشون می‌ده که ظاهر خوبی نداره.

مثلاً این کد رو توی اینترنت اکسپلورر اجرا کن تا ببینی:

let test = prompt("Test");

برای اینکه این مشکل توی اینترنت اکسپلورر پیش نیاد، بهتره همیشه یه مقدار پیش فرض (حتی خالی) براش تعریف کنیم:

let test = prompt("Test", ''); // حل مشکل برای IE

confirm

تابع confirm هم یکی دیگه از توابع پرکاربرده که به شکل یه پنجره مودال باز می‌شه و به کاربر دوتا گزینه می‌ده: OK و Cancel.

سینتکس این تابع این جوریه:

result = confirm("سوال شما؟");

اگه کاربر روی OK کلیک کنه، نتیجه true برمی گرده و اگه Cancel رو بزنه، false برمی گرده.

مثال:

let isBoss = confirm("آیا شما رئیس هستید؟");
alert(isBoss); // true اگه OK کلیک بشه

خلاصه بخش تعامل با کاربر در جاوااسکریپت

تو این بخش، با سه تا تابع آشنا شدیم که باهاشون می‌تونیم توی مرورگر با کاربر تعامل داشته باشیم:

• alert: پیامی به کاربر نشون می‌ده و منتظر می‌مونه تا OK رو بزنه.
• prompt: پیامی نشون می‌ده و از کاربر می‌خواد متنی رو وارد کنه. متن وارد شده رو برمی گردونه یا اگه کاربر Cancel رو بزنه، null برمی گردونه.
• confirm: سوالی رو از کاربر می‌پرسه و دو گزینه OK و Cancel می‌ده. اگه کاربر OK رو بزنه، true و اگه Cancel یا Esc رو بزنه، false برمی گردونه.

این متدها همه مودال هستن، یعنی تا وقتی که کاربر جوابی نده، اجرای کد متوقف می‌شه و بقیه صفحه غیرفعاله.

نکته ها:

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

تمرینات بخش تعامل با کاربر در جاوااسکریپت

قبل از اینکه بریم سراغ تمرین ها، یه نکته خیلی مهم: تمرین کردن بهترین راه برای جا افتادن مطالب تو ذهنه! سعی کن هر تمرین رو اول خودت حل کنی. حتی اگه اولش به جواب نرسیدی، یه کم دیگه روش فکر کن و راه‌های مختلف رو امتحان کن. هر بار که خودت به جواب برسی، کلی یادگیریت عمیق‌تر می‌شه و حسابی اعتماد به نفست بالا می‌ره!

ولی اگه چند بار تلاش کردی و هنوز جواب رو پیدا نکردی، اون وقت می‌تونی به راه حل نگاه بندازی. پس دست به کار شو، با تمرین‌ها جلو برو و لذت یادگیری جاوااسکریپت رو حس کن! 😄

تمرین 1: ساخت یک صفحه ساده

توی این تمرین قراره یه صفحه وب ساده بسازیم که از کاربر اسمش رو بپرسه و بعد اسمش رو نشون بده. خیلی کار آسون و جالبیه!

راه حل:

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

let name = prompt("اسمت چیه؟", "");
alert(name);

کل صفحه: اینجا کد کامل HTML رو برات گذاشتم. کافیه این کد رو توی یه فایل HTML بذاری و توی مرورگر باز کنی:

<!DOCTYPE html>
<html>
<body>
  <script>
    'use strict';
    let name = prompt("اسمت چیه؟", ""); // درخواست وارد کردن اسم کاربر
    alert(name); // نمایش اسم کاربر
  </script>
</body>
</html>

• اول با prompt یه پنجره باز می‌کنیم و از کاربر می‌پرسیم که "اسمت چیه؟"
• بعد با alert همون اسمی که کاربر وارد کرده رو نشون می‌دیم.

این یه نمونه سادست از اینکه چطوری می‌شه با استفاده از جاوااسکریپت با کاربر تعامل داشت.

تمرین 2: نمایش سلام شخصی

یه صفحه وب درست کن که از کاربر اسمش رو بپرسه و بعد با استفاده از alert یه پیام خوش آمدگویی با اسم خودش نشون بده. مثلاً اگه کاربر اسمش رو "متین" وارد کرد، پیام بده: "سلام متین! خوش اومدی!"

راه حل:

let name = prompt("اسمت چیه؟", "");
alert(`سلام ${name}! خوش اومدی!`);

گرفتن نام کاربر با prompt: اول با دستور prompt یه پنجره باز می‌کنیم که از کاربر اسمش رو می‌پرسه. prompt دو تا ورودی می‌گیره:

• پیام سوال (اینجا "اسمت چیه؟") که توی پنجره نمایش داده می‌شه.
• مقدار پیش فرض (اینجا یه رشته خالی "") که اگه کاربر چیزی وارد نکنه، همون مقدار پیش فرض رو برمی گردونه.

ذخیره ی نام در متغیر: نامی که کاربر وارد می‌کنه توی متغیر name ذخیره می‌شه تا بعداً بتونیم ازش استفاده کنیم.

نمایش پیام خوش آمدگویی با alert: با دستور alert پیغام خوش آمدگویی رو به همراه اسم کاربر نشون می‌دیم. از بکتیک `...` استفاده کردیم تا متن و متغیر رو ترکیب کنیم و پیغام نهایی مثل "سلام متین! خوش اومدی!" نمایش داده بشه.

تمرین 3: جمع دو عدد

یه صفحه وب درست کن که از کاربر بخواد دو عدد وارد کنه. بعد، این دو عدد رو با هم جمع کن و نتیجه رو با alert نمایش بده.

راه حل:

let num1 = prompt("عدد اول رو وارد کن:", "0");
let num2 = prompt("عدد دوم رو وارد کن:", "0");
// تبدیل رشته‌ها به عدد و جمع شون
let sum = Number(num1) + Number(num2);
alert(`جمع این دو عدد: ${sum}`);

گرفتن دو عدد از کاربر: با prompt، کاربر رو به وارد کردن دو عدد دعوت می‌کنیم.

prompt دو ورودی می‌گیره: پیام سوال و مقدار پیش فرض. اینجا مقدار پیش فرض رو 0 گذاشتیم تا اگه کاربر چیزی وارد نکرد، مقدار 0 به عنوان ورودی دریافت بشه.

تبدیل مقادیر رشته ای به عددی: هر مقداری که از prompt دریافت کنیم، به صورت رشته (string) برمی گرده، حتی اگر عدد وارد شده باشه. پس با استفاده از Number() مقادیر num1 و num2 رو به عدد تبدیل می‌کنیم تا بتونیم عملیات جمع رو روشون انجام بدیم.

جمع کردن و نمایش نتیجه: بعد از جمع کردن این دو عدد در متغیر sum، با alert نتیجه ی جمع رو به کاربر نمایش می‌دیم. متن جمع این دو عدد: و متغیر sum رو با بکتیک‌ها ترکیب کردیم تا پیام نهایی به صورت مثلا "جمع این دو عدد: 15" نشون داده بشه.

تمرین 4: پیام دادن بر اساس ساعت

یه صفحه وب درست کن که از کاربر ساعت روز رو بپرسه (مثلاً عددی بین 1 تا 24). بعد، این ساعت رو بگیر و با alert پیغام مناسبی نشون بده. برای مثال، اگه کاربر عدد 10 رو وارد کرد، پیام بده: "الان ساعت 10 صبحه!"

راه حل:

let hour = prompt("ساعت چنده؟ (مثلاً 10)", "");
alert(`الان ساعت ${hour} هست!`);

پرسیدن ساعت از کاربر: با prompt از کاربر می‌پرسیم "ساعت چنده؟". این مقدار می‌تونه مثلاً 10 یا 15 یا هر ساعتی که کاربر وارد کنه باشه. اگه کاربر مقداری وارد نکنه، چون مقدار پیش فرض رو "" گذاشتیم، به جای ساعت، یه رشته خالی ذخیره می‌شه.

نمایش پیام ساعت با alert: مقدار hour که کاربر وارد کرده رو توی یه پیغام دوستانه با alert نمایش می‌دیم. از بکتیک استفاده کردیم تا مقدار ساعت به راحتی داخل متن پیغام قرار بگیره و مثلاً پیام "الان ساعت 10 هست!" نمایش داده بشه.

تمرین 5: تایید ورود به سایت

یک صفحه وب بساز که وقتی کاربر وارد سایت می‌شه، ازش بپرسه که آیا موافق به ادامه ورود به سایت هست یا نه. اگه کاربر گزینه "OK" رو بزنه، پیغام خوش آمدگویی نمایش داده بشه. اما اگر "Cancel" رو بزنه، پیغام خداحافظی نمایش داده بشه.

راه حل

let isConfirmed = confirm("آیا می‌خواهید وارد سایت شوید؟");
if (isConfirmed) {
  alert("خوش آمدید به سایت ما!");
} else {
  alert("به امید دیدار!");
}

با استفاده از confirm از کاربر می‌پرسیم که آیا قصد ورود به سایت رو داره یا نه.

اگه کاربر روی "OK" کلیک کنه، confirm مقدار true برمی گردونه و ما پیغام "خوش آمدید به سایت ما!" رو با alert نمایش می‌دیم.

اما اگه کاربر "Cancel" رو بزنه، confirm مقدار false برمی گردونه و پیغام "به امید دیدار!" نمایش داده می‌شه.

جمع بندی

در این مقاله یاد گرفتیم چطور با سه تابع alert، prompt و confirm در جاوااسکریپت با کاربر تعامل داشته باشیم. دیدیم که alert یه پیغام ساده به کاربر نشون می‌ده و تا وقتی دکمه "OK" رو نزنه، کاری انجام نمی‌ده. با prompt می‌تونیم از کاربر ورودی بگیریم و حتی یه مقدار پیش فرض براش تعیین کنیم. در نهایت، با استفاده از confirm می‌تونیم سوال هایی بپرسیم که جواب بله یا خیر دارن و به ما کمک می‌کنن تصمیم بگیریم که کاربر چه چیزی می‌خواد.

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