پنجره‌ی هشدار با کد در جاوا اسکریپت

شاید شما نیز تا به حال به چنین مواردی برخورده باشید که به محض ورود یا چند ثانیه بعد از ورود به یک وب سایت، پنجره‌ای  باز شده و پیغام خاصی، مانند پیغام خوش آمدگویی را برایتان نمایش داده باشد. یا روی دکمه‌ای کلیک کرده‌اید و در مرورگر پنجره‌ای باز شده و هشداری به شما نشان داده شده باشد. اما چگونه می‌توان با html و css این کار را انجام داد؟

باید بگوییم این پنجره با html و css پیاده‌سازی نشده است. بلکه با زبان محبوب جاوا اسکریپت پیاده‌سازی شده است. می‌خواهیم بدانیم چگونه این پنجره نمایش داده می‌شود. در ادامه با آموزش کد پنجره نمایش پیام هشدار در جاوا اسکریپت با ما همراه باشید.

شکل زیر یک نما از پنجره‌ی هشدار با پیام خوش آمد گویی را نمایش می‌دهد:

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

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

نمایش مستقیم دستور alert در جاوا اسکریپت

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

<script>
alert("Welcome to \n shopingserver");
</script>

در مثال فوق درون تگ اسکریپت در سند html از تابع ()alert استفاده کرده‌ایم و درون ” (بخوانید : دابل کوتیشن) نوشته‌ای را به عنوان پارامتر وارد کرده‌ایم. خروجی قطعه کد فوق به صورت زیر می‌باشد:

چرا shopingserver به خط دوم آمده است؟ علت چه می‌تواند باشد؟

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

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

می خواهیم کاری کنیم که به محض کلیک روی یک دکمه، پنجره‌ی هشدار ظاهر شود. چگونه این کار را انجام دهیم؟

برای نمایش پیغام راه حل مشخص است و آن استفاده از تابع alert می‌باشد ولی چگونه آن را روی یک دکمه پیاده سازی کنیم؟

برای این کار دو روش داریم :

روش اول -> روش مستقیم

در این روش می‌توانیم به صورت مستقیم در ویژگی onclick که یک ویژگی رویدادی است درون تگ button، استفاده کنیم و کدها را به صورت مستقیم، درون آن بنویسیم:

<button onclick="alert('anything')"> I can do </button>

در خروجی  به محض کلیک روی این دکمه یک پنجره باز می‌شود که پیغام anything را چاپ می‌کند.

روش دوم -> روش غیر مستقیم

در این روش ابتدا کد را در یک تابع درون فایل جاوا اسکریپت می‌نویسیم و سپس توسط تگ script به سند html متصل می‌کنیم. به مثال زیر دقت کنید:

function example(){
alert("enything");
}

کدهای فوق را درون فایل جاوا اسکریپت می‌نویسیم و نام فایل را example.js می‌گذاریم.

در سند html فایل فوق را به صورت زیر load می‌کنیم و همچنین نام تابع را در ویژگی رویدادی onclick می‌نویسیم :

<script src="example.js"></script>
<button onclick=example(); > I can do </button>

در ادامه وقتی که روی دکمه I can do کلیک می‌کنیم، یک پنجره باز می‌شود که  anything را نمایش می‌دهد.

حل دو مثال از کد پنجره نمایش پیام هشدار در جاوا اسکریپت

مثال یک: ساخت پنجره دریافت ورودی از کاربر

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

برای حل این سوال باید با یک تابع به نام ()prompt آشنا شویم تابع ()prompt یک ورودی از کاربر دریافت می‌کند. این تابع می‌تواند یک متن به عنوان ورودی دریافت کند که توسط آن به کاربر می‌گوییم چه چیزی می‌خواهیم. می‌دانیم برای نمایش خروجی در یک پنجره هشدار در یک وب‌سایت باید از تابع ()alert استفاده کنیم. بنابراین پاسخ مثال فوق به صورت زیر است:

<script>
var a=prompt("how old you?");
var year=1399-a;
alert("your birth year is "+year);
</script>

به سادگی با استفاده از تابع ()prompt مثال اول را حل کردیم. دریافتیم در جاوا اسکریپت می‌توانیم از مخلوط متغیر و رشته به صورت مستقیم  در تابع () alert استفاده کنیم.

مثال دوم: نمایش پیام خوش آمد‌گویی بعد از ۳ ثانیه

برنامه‌ای بنویسید که پس از گذشتن سه ثانیه از ورود کاربر به سایت، پیغام خوش آمدگویی را برای کاربر نمایش دهد.

برای حل سوال یک چالش داریم و آن فراخوانی alert بعد از ۳ ثانیه است.

در اینجا باید از تابعی  به نام ()settimeout استفاده کنیم تابع ()settimeout یک تابع بدون نام(anonymous) دریافت می‌کند و یک عدد که بیانگر زمان به واحد میلی‌ثانیه است.این تابع  دستوراتی را که به صورت تابع مشخص شده است را بعد از گذشتن ثانیه‌های مشخص شده چاپ می‌کند.

<script>
setTimeout(function(){alert("welcome to 7learn"); },3000);
</script>

در اینجا پس از گذشت سه  ثانیه پیغام خوش آمدگویی چاپ می‌شود.

جمع‌بندی:

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