هنگامی‌که از برخی از وب‌سایت‌ها بازدید می‌کنیم پاپ‌آپ‌ها یا پنجره‌های بازشویی در صفحه ظاهر می‌شوند و حاوی پیغامی یا تبلیغی برای ما هستند. این جعبه‌های هشدار (Message box در جاوا اسکریپت) نوعی پنجره کوچک هستند که پیغام یا متن مشخص‌شده‌ای را به ما نمایش می‌دهند. اگر آموزش صفر تا صد جاوا اسکریپت سبزلرن را دنبال کرده باشید می‌دانید که  این قابلیت با تابعی به نام تابع Alert در جاوا اسکریپت امکان‌پذیر است که در این مطلب از مجله سبزلرن قرار است در سناریوهایی کاملاً عملی آن را مورد بررسی و بازبینی قرار دهیم.

جعبه‌های پاپ آپ در جاوا اسکریپت

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

• جعبه هشدار (Alert Box)

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

• جعبه تأیید (Confirm Box)

در درجه اول برای تأیید کاربر استفاده می‌شود. این باکس از کاربر می‌خواهد برای ادامه روی «OK» یا «Cancel» کلیک کند و بر این اساس اقدامات بعدی برای کاربر قابل انجام است.

• جعبه ورود (Prompt Box)

به کاربران اجازه می‌دهد قبل از ورود به صفحه، مقداری را در جعبه یا باکس وارد کنند. کاربر پس از وارد کردن یک مقدار، روی «OK» یا «Cancel» کلیک می‌کند. موارد بالا انواع جعبه‌های بازشو در جاوا اسکریپت هستند. در بخش بعد به صورت تخصصی باکس‌های هشدار را که با متد یا تابع Alert در جاوا اسکریپت ساخته می‌شوند، مورد بررسی و بازبینی دقیق قرار خواهیم داد و در آخر سر دو نمونه از باکس‌های Confirm و Prompt را هم با متدهای مخصوص خودشان بررسی می‌کنیم.

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

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

سینتکس تابع Alert در جاوا اسکریپت

برای نمایش جعبه هشدار در جاوا اسکریپت، از تابع alert با سینتکس زیر می‌توان استفاده کرد:

alert();  // syntax 1
alert(message); // syntax 2

در سینتکس فوق، «message» نوعی رشته متنی است که همان پیغام یا هشدار را به کاربران ارائه می‌دهد. پارامتر «message» اختیاری اما بهتر است برای آنکه کاربر بفهمد چه اتفاقی افتاده است آن را ارائه کنیم. مثال زیر را در نظر بگیرید که در آن تابع جاوا اسکریپت نوعی هشدار را راه‌اندازی می‌کند:

در مثال بالا، با فراخوانی تابع showAlert نوعی جعبه هشدار با پیام This is an Alert به کاربر نمایش داده می‌شود. این ویژگی ساده و در عین حال مؤثر اغلب برای برقراری ارتباط یا ارائه دستورالعمل‌های مهم در یک صفحه وب استفاده می‌شود. پارامترهای تابع Alert در Javascript تابع alert در جاوا اسکریپت نوعی پارامتر اختیاری را می‌پذیرد که آن هم پارامتر پیغام بوده که شیوه نوشتن آن به صورت زیر است: message: 'string' در خط کد بالا message نوعی رشته اختیاری است که می‌تواند در تابع alert گنجانده شود.

آموزش ایجاد هشدار در جاوا اسکریپت

همان‌طور که بیان کردیم متد alert در جاوا اسکریپت برای نمایش جعبه هشدار پاپ آپ با پیام مشخص و یک OK استفاده می‌شود. این متد معمولاً برای اطمینان از اینکه اطلاعات مهم به دست کاربر می‌رسد استفاده خواهد سد. در زیر مثالی وجود دارد که نحوه ایجاد هشدار در جاوا اسکریپت را نشان می‌دهد.

    
    




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

    

        برای نمایش هشدار لطفا روی دکمه «نمایش هشدار» کلیک کنید.
    

    
نمایش هشدار
    

    

خروجی کد بالا به صورت زیر است: در زیر توضیحات کامل کد بالا ارائه شده است: بلوک style حاوی برخی استایل‌های CSS برای عناصر HTML، مانند رنگ و خانواده فونت برای استایل دادن به alert است.

در داخل تگ «»، یک عنوان («

» و «

») وجود دارد که به کاربر خوشامد می‌گوید.

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

همچنین در این بلوک یک پاراگراف (p) به کاربر پیشنهاد می‌دهد تا روی دکمه نمایش پیام هشدار کلیک کند.

    برای نمایش هشدار لطفا روی دکمه «نمایش هشدار» کلیک کنید.

دکمه (button) دارای یک ویژگی «ondblclick» است که با دو بار کلیک کردن، تابع «myAlert» را فعال می‌کند.

نمایش هشدار

بلوک «                          

Click the button below to see an alert.

                  

                  

            توضیح مثال بالا به صورت زیر است: در برنامه بالا یک تابع جاوا اسکریپت به نام createAlert تعریف می‌کنیم. در داخل این تابع، از تابع alert برای نمایش پیام This is an ALERT message استفاده می‌کنیم که کد مربوطه آن به صورت زیر است:

در بدنه HTML، یک پاراگراف داریم که توضیح می‌دهد که با کلیک روی دکمه یک هشدار نمایش داده می‌شود.

 Click the button below to see an alert. 

همچنین به دنبال پاراگراف بالا در داخل صفحه دکمه‌ای ایجاد می‌کنیم که با کلیک کردن، تابع «createAlert» را فعال می‌کند (با استفاده از ویژگی «onclick»).

هنگامی‌که دکمه کلیک می‌شود، تابع «createAlert» را فراخوانی می‌کند که به نوبه خود کادر هشدار را با پیام مشخص‌شده نشان می‌دهد. مثال بالا یک مورد استفاده ساده و در عین حال مهم از تابع alert را در صفحه وب نشان می‌دهد.

نحوه کار تابع alert در Javascript

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

مثال‌هایی برای استفاده از تابع alert در Javascript

بیایید مثال‌های عملی بیشتری را برای درک بهتر نحوه عملکرد تابع  alert در جاوا اسکریپت بررسی کنیم. کد جاوا اسکریپت خوش آمد گویی زیر برای این هدف مد نظر است:

   
      
   
   
      
Click the button below to see an alert.

      

         
      
   

تشریح کدهای مثال بالا به صورت زیر خواهد بود: ساختار کد بالا حاوی یک تگ اسکریپت در بخش head است.

در داخل تگ اسکریپت، یک تابع جاوا اسکریپت به نام «createAlert» تعریف می‌کنیم. همچنین در داخل تابع، از تابع alert بدون ارسال پارامتر استفاده شده است. این تابع نوعی پاپ آپ هشدار بدون هیچ پیامی ایجاد می‌کند. در قسمت body یک پاراگراف داریم که به کاربر دستور می‌دهد روی دکمه کلیک کند.

Click the button below to see an alert.

همچنین در ادامه فرمی با یک دکمه ‌ایجاد شده است. این دکمه طوری پیکربندی شده که با کلیک کردن، تابع «createAlert» را فراخوانی کند.

هنگامی‌که دکمه Click Me فشار داده می‌شود، تابع createAlert فعال و نوعی جعبه هشدار یا باکس هشدار بدون متن نمایش داده می‌شود. پس از تائید هشدار با کلیک بر روی OK کادر هشدار ناپدید می‌شود و پنجره مرورگر دوباره در دسترس کاربر قرار می‌گیرد. حال در مثال زیر نحوه نمایش  عنوان سند HTML را در قالب در جعبه هشدار و با استفاده از تابع Alert در جاوا اسکریپت، بررسی می‌کنیم. برای این هدف قطعه کد زیر مد نظر است:

   
      
      
   
   
      
Click the button below to see an alert.

      

         
      
   

سند HTML بالا شامل یک تگ عنوان در قسمت head است که تایتل صفحه را به عنوان alert() in JavaScript تعریف می‌کند.

در تگ اسکریپت، یک تابع جاوا اسکریپت به نام «createAlert» تعریف می‌کنیم.

function createAlert() {
   alert(document.title);  // Using the alert function with document.title
}

در داخل تابع، alert(document.title) برای نمایش عنوان سند در کادر هشدار استفاده می‌شود. «document.title» به ویژگی عنوان پنجره فعلی دسترسی دارد.

alert(document.title);  // Using the alert function with document.title

مانند دو مثال بالا بخش body شامل پاراگرافی است که به کاربر دستور می‌دهد روی دکمه کلیک کند.

Click the button below to see an alert.

به دنبال آن دوباره فرمی با یک دکمه ‌ایجاد می‌شود و دکمه به گونه‌ای پیکربندی خواهد شد که با کلیک کردن، تابع «createAlert» را فراخوانی کند.

با کلیک بر روی دکمه Click Me تابع  createAlert فعال می‌شود و یک کادر هشدار با عنوان تب فعلی به کاربران نشان می‌دهد، اگر عنوانی وجود نداشته باشد، جعبه هشدار هیچ متنی را نمایش نمی‌دهد.  مثال فوق نحوه بازیابی و نمایش پویا عنوان سند را با استفاده از تابع  Alert در جاوا اسکریپت نشان می‌دهد.

چه مرورگرهایی از تابع Alert در جاوا اسکریپت پشتیبانی می‌کنند؟

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

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

تابع confirm در جاوا اسکریپت برای تائید کاربر قبل از شروع یک کار خاص، مانند ذخیره، به‌روزرسانی یا حذف داده‌ها استفاده می‌شود که سینتکس استفاده از آن به صورت زیر است:

bool window.confirm([message]);

در اصل تابع confirm در جاوا اسکریپت نوعی پیام بازشو به کاربر ارائه می‌دهد که دارای دو دکمه است: OK و Cancel. بسته به انتخاب کاربر، اگر روی OK کلیک شود، تابع true یا در صورت انتخاب Cancel، false را برمی‌گرداند. این مقدار بازگشتی می‌تواند برای پردازش‌های بعدی استفاده شود. مثال زیر نحوه استفاده از این تابع را بیان می‌کند.

var userPreference;
if (confirm("Do you want to save changes?") == true) {
    userPreference = "Data saved successfully!";
} else {
    userPreference = "Save Cancelled!";
}

توضیح مثال فوق به صورت زیر است:

• تابع confirm پیامی را نمایش می‌دهد که از کاربر می‌پرسد آیا می‌خواهد تغییرات را ذخیره کند یا خیر.
• عبارت if بررسی می‌کند که آیا کاربر روی OK کلیک کرده است یا خیر.
• اگر جواب درست باشد، Data saved successfully به متغیر userPreference اختصاص داده خواهد شد.
• اگر نادرست باشد Save Cancelled به UserPreference اختصاص داده خواهد شد.

به این ترتیب، تابع confirm به توسعه‌دهندگان این امکان را می‌دهد تا گفتگوهای تائید کاربر را برای تجربه کاربری تعاملی‌تر و کنترل‌شده‌تری در برنامه‌های خود بگنجانند.

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

یکی دیگر از توابع که اهدافی مانند تابع‌های confirm و Alert در جاوا اسکریپت دارد، تابع prompt است. تابع prompt در جاوا اسکریپت برای جمع‌آوری ورودی کاربر برای اقدامات بعدی استفاده می‌شود و سینتکس آن به صورت زیر است:

string prompt([message], [defaultValue]);

تابع prompt دو پارامتر دارد. پارامتر اول پیامی است که باید نمایش داده شود و از کاربر درخواست می‌کند و پارامتر دوم مقدار پیش‌فرض در کادر ورودی است. مثالی از ورودی کاربر را با استفاده از prompt به صورت زیر است:

var name = prompt("Enter your name:", "John");
if (name == null || name == "") {
    document.getElementById("msg").innerHTML = "You did not enter anything. Please enter your name again";
}
else {
    document.getElementById("msg").innerHTML = "You entered: " + name;
}

تشریح مثال فوق به صورت زیر است:

• تابع prompt گفتگویی را نشان می‌دهد که از کاربر می‌خواهد نام خود را با John به عنوان مقدار پیش‌فرض وارد کند.
• عبارت if بررسی می‌کند که آیا کاربر روی دکمه کنسل کلیک کرده یا چیزی وارد نکرده است.
• اگر درست باشد، یک عنصر HTML را با پیامی که از کاربر می‌خواهد نام خود را دوباره وارد کند، به‌روز می‌کند.
• اگر نادرست باشد، عنصر HTML را با پیام نمایش نام وارد شده به‌روز می‌کند.

به این ترتیب، تابع prompt تعامل کاربر را با گرفتن ورودی تسهیل می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا برنامه‌ها را بر اساس اولویت‌ها یا نیازهای کاربر تنظیم کنند.

یادگیری جاوا اسکریپت به صورت پروژه محور

تابع alert در جاوا اسکریپت به منظور نمایش نوعی پنجره بازشو یا جعبه هشدار در پنجره مرورگر عمل می‌کند. استفاده از این تابع نوعی ویژگی متداول برای انتقال پیام‌های ضروری به کاربران است و هشدار امکان دارد حاوی متن خاصی باشد یا نباشد. تابع alert نوعی جعبه یا کادر بازشو راه‌اندازی کرده و دسترسی کاربر را تا انجام اقدام خاصی به صفحه وب محدود می‌کند. هنگامی‌که کاربر روی دکمه، OK یا تائید پنجره بازشو کلیک کرد، دسترسی به محتوای صفحه آزاد خواهد شد. این تابع به طور گسترده در مرورگرهای مختلف پشتیبانی می‌شود. اگر دنبال یک تجربه یادگیری متنوع و حرفه‌ای در زمینه جاوا اسکریپت هستید، دوره آموزش صفر تا صد جاوا اسکریپت از پلتفرم سبز لرن بهترین انتخاب برای شما است. این دوره علاوه بر افزایش سطح مهارت شما در جاوا اسکریپت، به شما در ساخت پروژه‌های متنوع و پیشرفته بسیار کمک می‌کند که می‌تواند رزومه شما را به شکل قابل‌توجهی تقویت کند. اگر می‌خواهید مهارت‌های خود را در جاوا اسکریپت به سطوح پیشرفته‌تری ببرید و به راحتی با پروژه‌های واقعی کار کنید، این دوره بهترین فرصت را برای شما فراهم می‌کند. با این دوره، شما نه تنها مهارت‌های فنی خود را افزایش خواهید داد، بلکه با حمایت قوی پشتیبان‌های این دوره، به راحتی موانع یادگیری را پشت سر خواهید گذاشت.