آموزش ایجاد پیام هشدار در زبان JavaScript + نمونه کد

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

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

فهرست محتوای این مقاله

جاوااسکریپت چیست؟

JavaScript یکی از محبوب‌ترین زبان‌های برنامه نویسی است. جاوا اسکریپت زبانی سطح بالا، پویا (Dynamic)، شی‌گرا و تفسیری است که از شیوه‌های مختلف برنامه نویسی پشتیبانی می‌کند. از این زبان می توان برای برنامه نویسی سمت سرور (Server Side)، اپلیکیشن های موبایل، بازی و اپلیکیشن‌های دسکتاپ استفاده کرد. برای این منظور می‌توانید از فریم‌ورک های مختلف JavaScript استفاده کنید که مجموعه‌ای متنوع از کتابخانه‌ها را در اختیار شما قرار می‌دهند.

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

در  زبان جاوااسکریپت تابعی به نام Alert وجود دارد که با استفاده از آن می توانید پنجره‌ای حاوی پیام هشدار را در صفحه وب نمایش دهید. این تابع یک پارامتر ورودی را به عنوان متن پیام دریافت کرده و آن را در یک پنجره پیام هشدار نمایش می‌دهد. پیام  موجود در شکل ابتدای متن را در نظر بگیرید. این پیام با یک دستور Alert ساده مانند کد زیر به‌وجود آمده است که ما آن را درون یک بلاک Script قرار داده‌ایم:

<script type="text/javascript">
alert("Welcome to 7Learn.com\nthis is an Alert() Example !")
</script>

برای اینکه متن را در یک سطر جدید درون پنجره نشان داده شده بنویسید، باید خط را با کاراکتر خط جدید (new line) که به صورت n\نوشته می‌شود پایان دهید . مانند کد بالا که باعث می‌شود پیام آن، در دو خط مجزا نمایش داده شود.

همان‌طور که در مطلب نوشتن متن در صفحه وب اشاره کردیم ، پارامتر ورودی منابع Alert می‌تواند متن خالی، متغیرهای جاوااسکریپت و یا ترکیبی از این دو باشد. در ادامه با چند مثال عملکرد این تابع را بیشتر توضیح می‌دهیم. در مثال‌های زیر از رویداد ()onclick برای یک دکمه استفاده کردیم تا با کلیک بر روی دکمه ، دستورات موجود درون این رویداد اجرا شود.

دقت کنید که هرچیزی که درون بدنه تابع () alert نوشته شود، به عنوان متن پیام نشان داده می‌شود.

مثال اول : نمایش متن خالی در پنجره پیام هشدار

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

<button onclick="Alert()">Show alert</button>
->
<button onclick="alert('Hello World\nwww.7Learn.com')"> Click Here </button>

مثال دوم : نمایش مقدار متغیرها در پنجره پیام هشدار

در کد زیر حاصل ضرب دو متغیر جاوااسکریپت num1 و num2 را با استفاده از متد Alert نمایش می‌دهیم. دو متغیر را درون بلاک Script تعریف کرده و سپس از آن‌ها در متن تابع ()alert استفاده کرده‌ایم:

<script type="text/javascript">
var num1=7;
var num2=10;
</script>
<button onclick="alert(num1*num2)"> Click Here </button>

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

در کد زیر حاصل ضرب عدد 7 در num3 را با ترکیب متغیرها و متن ها (چسباندن آن‌ها با استفاده از عملگر +) در پنجره پیام نشان می‌دهیم:

<script type="text/javascript">
var num3 = 10;
</script>
<button onclick="alert( '7 * ' + num3 + ' = ' + 7*num3 )"> Click Here </button>

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

جمع بندی

یادگیری زبان جاوااسکریپت می تواند مزایای بسیار زیادی برای برنامه نویسان داشته باشد. اگر به دنبال یک شغل مناسب در حوزه برنامه نویسی هستید، کسب درآمد بالا از طریق جاوااسکریپت ممکن است زیرا این زبان شما را قادر می‌سازد در برنامه نویسی Front-End و Back-End فعالیت کنید و امکان همکاری با بسیاری از پروژه‌ها را داشته باشید.

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

چه امتیازی به این مقاله می دید؟
نویسنده
بیش از 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 جی کوئری استفاده کنید .

Milad

به چه صورت؟
اگه ممکنه این قسمتم به آموزشتون اضافه کنید هم آموزشتون کامل میشه هم کار ما راه میفته 😀
ممنون

لقمان آوند

با کمک گرفتن از کوکی ها و ثبت آخرین زمان باز شدن پیام میشه این کار رو انجام داد .

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

 
گزارش مشکل