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

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

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

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

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

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

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

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

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

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

Welcome to 7learn

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

علت این موضوع این است که در متن از عملگر خاص 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>

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

جمع بندی

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

[subtitle]اگر می خواهید بیشتر درباره برنامه نویسی جاوا اسکریپت مطالعه کنید مقالات زیر را دنبال کنید [/subtitle]

• جاوا اسکریپت چیست؟
• بهترین آموزش جاوا اسکریپت
• پیش نیازهای آموزش جاوا اسکریپت
• شروع یادگیری برنامه نویسی جاوا اسکریپت چگونه است؟
• فریم ورک های جاوا اسکریپت : بهترین فریم ورک های JavaScript
• راه های کسب درآمد با برنامه نویسی جاوا اسکریپت

این مقاله تنها بخش کوچکی از آموزشی است که شرکت کننده های دوره ی متخصص جاوا اسکریپت می گذرانند، اگر به یادگیری بیشتر در زمینه جاوا اسکریپت علاقه داری، با شرکت در دوره آموزش جاوا اسکریپت در کمتر از یک سال به یک متخصص JS همه فن حریف تبدیل می شوی که آماده ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.