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

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

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

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

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

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

برای پیاده‌سازی پنجره هشدار اصلا احتیاج به انجام کارهای پیچیده نیست. این کار با یک تابع ساده به نام 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>

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

جمع‌بندی:

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

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

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

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۳۸ دیدگاه
میکائیل ۲۳ اسفند ۱۳۹۹، ۱۰:۲۱
سلام من ازین کد میخوام بسازم ولی با این تفاوت که دکمه نداشته باشه باشد کجا رو تغییر بدم ؟
نازنین کریمی مقدم ۲۶ اسفند ۱۳۹۹، ۰۱:۰۲
سلام.
پیامتون بدون دکمه باشه؟
یا از اول اون دکمه رو نداشته باشیم که روش کلیک کنیم و پیام بیاد؟
حسین سلیمی ۲۱ خرداد ۱۳۹۹، ۱۸:۰۱
سلام.خیلیم عالی بود مقاله.لطفا در مورد پیغامی که بعد از باز کردن سون لرن میاد هم یک مقاله ای بنویسید.
فائقه نامور ۲۱ مرداد ۱۳۹۹، ۱۴:۳۹
سلام ممنون از توجه شما
موردی که اشاره فرمودید به تیم تولید محتوا انتقال داده می شود
ehsan m ۲۳ تیر ۱۳۹۵، ۰۵:۰۸
اینطور نوشتن ایمن هست؟


var jvalue = 'this is javascript value';

<?php $abc = "document.write(jvalue)"?>

لقمان آوند ۲۳ تیر ۱۳۹۵، ۲۲:۵۵
درست نیست این مورد .
ehsan m ۲۳ تیر ۱۳۹۵، ۰۴:۵۶
سلام
چطور میتونم مقدار یک متغیر جاوااسکریپتی رو توی یک متغیر php قرار بدم؟
لقمان آوند ۲۳ تیر ۱۳۹۵، ۰۵:۰۱
js سمت کاربره و php سمت سرور!
می تونید با درخواست های ایجکس مقادیر متغیر های js رو سمت سرور بفرستید و اونجا ازشون استفاده کنید.
اکبر ۲۰ شهریور ۱۳۹۴، ۱۱:۳۱
باسلام بنده اگه بخوام یه متن فارسی روبه عنوان هشدار نمایش بدم بصورت ناخواناهس مشکل کجاست .

البته مشکلو برطرف کردم نمیدونم چرا یعضی موقع ها که جاوااسکریپت رو تو یه فایل جدا نوشته وفراخوانی میکنم اینطور میشه مجبور شدم تو خود صفحه بنویسم راهنمایی بفرمایید
وحید صالحی ۲۳ شهریور ۱۳۹۴، ۰۰:۲۲
encoding صفحه مورد نظر که کد های جاوااسکریپت رو درش مینویسد روی utf-8 بزارید
نفس اصولی ۰۶ مرداد ۱۳۹۴، ۰۰:۱۷
سلام... با تشکر از سایت فوق العاده مفیدتون... برای تغییر title این alret باکس چه کار باید کرد؟
وحید صالحی ۰۶ مرداد ۱۳۹۴، ۰۰:۳۱
سلام دوست عزیز API یی برای تغییر در این مورد وجود نداره برای حفظ مسائل امنیتی و نمیشه این تغییر رو ایجاد کرد البته با vbscript میشه که اون خودش یکسری پیش نیاز هایی رو لازم داره که صرف نمیکنه براش زمان بزاری برای اینکار شما بهتر یک alert box سفارشی استفاده کنید مثل استفاده از پلاگین های موجود که چند نمونش رو در لینک های زیر براتون قرار دادم موفق باشید.اگر هم گوگل کنید موارد زیادی پیدا خواهید کرد با استایل های متفاوت کافیه عبارت alert box with jquery رو سرچ کنید
لینک1
لینک 2
سحر ۱۹ تیر ۱۳۹۴، ۱۴:۱۸
سلام وقت بخیر من مبتدی هستم
این کد رو باید در کدوم قسمت سایت قرار بدیم؟
آیا برای استفاده از کدهای جاوا اسکریپت باید کتابخانه خاصی رو در سایت الحاق کنیم؟ واگه اینطوره بگید چطوری..ممنون
کیوان علی محمدی ۲۷ تیر ۱۳۹۴، ۱۰:۴۸
سلام کد رو در بین تگ های head صفحه مورد نظرتون قرار بدین. اکثر کدها نیاز به وکتابخونه جی کوئری دارن (البته کد این مطلب نیاز نداره)
مریم ۱۹ اردیبهشت ۱۳۹۴، ۲۰:۰۸
سایت جامعی بود .ممنون
مریم ۱۸ اردیبهشت ۱۳۹۴، ۲۰:۰۱
سلام خسته نباشید.
چطور میشه تو php کدی نوشت که اگه فیلدی اشتباه پر شد یه ستاره قرمز کنارش بزاره.
و اگه مثلا بخواهیم رکوردی رو حذف کنیم پیغام بده که مطمعا هستید و 2تا دکمه okوcancel بذاره و با okکردن حذف بشه.
ممنون میشم زود پاسخ بدین چون بهش نیاز دارم.
لقمان آوند ۱۸ اردیبهشت ۱۳۹۴، ۲۱:۲۲
این کار باید با جاوااسکریپت انجام بشه .
Milad ۲۵ مهر ۱۳۹۳، ۲۱:۲۹
سلام
امکانش هست کاری کرد مثلا برای هر آی پی هر 12 ساعت یکبار نمایش داده بشه؟
لقمان آوند ۲۵ مهر ۱۳۹۳، ۲۳:۱۸
با کمک گرفتن از کوکی ها و ثبت آخرین زمان باز شدن پیام میشه این کار رو انجام داد .
شاهرخ ۱۲ خرداد ۱۳۹۳، ۰۰:۱۴
سپاسگزارم دوست عزیز .
پاپ اپ هایی که اغلب تبلیغاتی هستند و زمان لود شدن صفحه نمایان میشه رو اگه امکان داره اسکریپتشو بذارین . بازم ممنون
شاهرخ ۱۱ خرداد ۱۳۹۳، ۲۱:۱۶
غیر از هشدار متنی یا همون آلرت هشدار تصویری هم داریم ؟
لقمان آوند ۱۲ خرداد ۱۳۹۳، ۰۰:۰۰
خیر، مگر اینکه با استفاده از تگ های html و کدهای جاوااسکریپت چنین چیزی رو اضافه کنید .
مثلا یه تگ div که شامل تصویر هست رو اول به صورت مخفی دارید و با رخداد اتفاق خاصی با استفاده از جاوااسکریپت اون رو نمایان کنید .
بی نام ۱۹ بهمن ۱۳۹۲، ۱۰:۰۳
مطلب بسیار مفیدی بود.متشکر :?:
javad ۱۵ دی ۱۳۹۲، ۲۱:۱۸
مرررررررررررسی
restless ۱۵ آبان ۱۳۹۲، ۲۳:۰۵
ممنون بسیار عالی ....
مسپ ۳۱ شهریور ۱۳۹۲، ۰۸:۰۹
سلام خسته نباشید از سایت خوبتون می خواستم ببینم چه طورمی تونم در سایتم مثل شما آمار بازدید کننده ها رو بیارم اگر زحمتی براتون نیست لطفا جواب رو اگه خواستید ایمیل کنید
کیوان علی محمدی ۳۱ شهریور ۱۳۹۲، ۰۸:۵۱
سلام افزونه wp-statistics رو امتحان کنید.
کاوه ۱۸ مرداد ۱۳۹۲، ۲۰:۱۶
من یک کدی میخوام که یک سایت دیگه رو داخل کادری تو وبلاگم نشون بده و لود کنه
کیوان علی محمدی ۱۸ مرداد ۱۳۹۲، ۲۱:۵۷
سلام میتونی از iframe ها استفاده کنی،این مطلب رو بخون
abas ۲۹ بهمن ۱۳۹۱، ۱۷:۳۰
سلام اقا مرسییییییییییییییییییییییییییی سری به وبلاگم بزن
amirhosein.m ۱۹ بهمن ۱۳۹۱، ۱۴:۳۹
فقط یه مشکل داره که هر قسمتی میری دوباره پیغام رو نشون میده و اعصاب خواننده رو داغون میکنه!
armansalimzadeh ۱۰ آذر ۱۳۹۱، ۰۹:۳۸
سلام لقمان جان عالی بود.کار کرد.آرمان