تخفیف ویژه

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

دسته بندی: جاوا اسکریپت
زمان مطالعه: 5 دقیقه
۱۳ خرداد ۱۳۹۹

شاید شما نیز تا به حال به چنین مواردی برخورده باشید که به محض ورود یا چند ثانیه بعد از ورود به یک وب سایت، پنجره‌ای  باز شده و پیغام خاصی، مانند پیغام خوش آمدگویی را برایتان نمایش داده باشد. یا روی دکمه‌ای کلیک کرده‌اید و در مرورگر پنجره‌ای باز شده و هشداری به شما نشان داده شده باشد. اما چگونه می‌توان با 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 همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.

چه امتیازی به این مقاله می دید؟
نویسنده لقمان آوند
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

نظرات کاربران

حسین سلیمی

سلام.خیلیم عالی بود مقاله.لطفا در مورد پیغامی که بعد از باز کردن سون لرن میاد هم یک مقاله ای بنویسید.

فائقه نامور

سلام ممنون از توجه شما
موردی که اشاره فرمودید به تیم تولید محتوا انتقال داده می شود

ehsan m

اینطور نوشتن ایمن هست؟

var jvalue = ‘this is javascript value’;

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

لقمان آوند

درست نیست این مورد .

ehsan m

سلام
چطور میتونم مقدار یک متغیر جاوااسکریپتی رو توی یک متغیر php قرار بدم؟

لقمان آوند

js سمت کاربره و php سمت سرور!
می تونید با درخواست های ایجکس مقادیر متغیر های js رو سمت سرور بفرستید و اونجا ازشون استفاده کنید.

ehsan m

آخه پروژه ام خیلی ایجکس توی ایجکس شده صفحه کند میشه ، راه دیگه ای هست آقای آوند؟ امنیت هم داشته باشه ممنون

لقمان آوند

خیر همین راهشه …

اکبر

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

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

وحید صالحی

encoding صفحه مورد نظر که کد های جاوااسکریپت رو درش مینویسد روی utf-8 بزارید

نفس اصولی

سلام… با تشکر از سایت فوق العاده مفیدتون… برای تغییر title این alret باکس چه کار باید کرد؟

وحید صالحی

سلام دوست عزیز API یی برای تغییر در این مورد وجود نداره برای حفظ مسائل امنیتی و نمیشه این تغییر رو ایجاد کرد البته با vbscript میشه که اون خودش یکسری پیش نیاز هایی رو لازم داره که صرف نمیکنه براش زمان بزاری برای اینکار شما بهتر یک alert box سفارشی استفاده کنید مثل استفاده از پلاگین های موجود که چند نمونش رو در لینک های زیر براتون قرار دادم موفق باشید.اگر هم گوگل کنید موارد زیادی پیدا خواهید کرد با استایل های متفاوت کافیه عبارت alert box with jquery رو سرچ کنید
لینک1
لینک 2

سحر

سلام وقت بخیر من مبتدی هستم
این کد رو باید در کدوم قسمت سایت قرار بدیم؟
آیا برای استفاده از کدهای جاوا اسکریپت باید کتابخانه خاصی رو در سایت الحاق کنیم؟ واگه اینطوره بگید چطوری..ممنون

کیوان علی محمدی

سلام کد رو در بین تگ های head صفحه مورد نظرتون قرار بدین. اکثر کدها نیاز به وکتابخونه جی کوئری دارن (البته کد این مطلب نیاز نداره)

مریم

سایت جامعی بود .ممنون

مریم

سلام خسته نباشید.
چطور میشه تو php کدی نوشت که اگه فیلدی اشتباه پر شد یه ستاره قرمز کنارش بزاره.
و اگه مثلا بخواهیم رکوردی رو حذف کنیم پیغام بده که مطمعا هستید و 2تا دکمه okوcancel بذاره و با okکردن حذف بشه.
ممنون میشم زود پاسخ بدین چون بهش نیاز دارم.

لقمان آوند

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

مریم

خواهش میکنم اگه به این زبان مسلطین ،بگین که چطور باید بنویسمش.
مثل همین قسمت ارسال دیدگاه که اگه نام یا ایملو وارد نکنی پیغام میده.

لقمان آوند

عبارت form validation using javascript رو تو گوگل سرچ کنید کلی آموزش در این مورد وجود داره . می تونید مطالعه بفرمایید.

لقمان آوند

وقتی پیامو نشون میدید باید زمانش رو در یک کوکی ثبت کنید .
در دفعات بعدی که کاربر می خواد سایتو ببینه اون کوکی رو بگیرید و بررسی کنید ایا 12 ساعت گذشته یا نه . اگه گذشته بود بهش نشون بدید و دوباره کوکی رو اپدیت کنید .
می تونید از پلاگین cookie جی کوئری استفاده کنید .

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :