دیالوگ باکس ها در جاوااسکریپت

دیالوگ باکس ها در جاوااسکریپت – آموزش جاواسکریپت مقدماتی درس 24

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

ساختن دیالوگ باکس در جاوااسکریپت

در زمان جاوااسکریپت می توانید دیالوگ باکس  یا اعلام هائی را ایجاد کنید که کاربران بتوانند با آن ها در تعامل قرار گیرند. شما می توانید هم از این دیالوگ باکس ها برای اعلام موضوعات به کاربران استفاده کنید و هم از آن ها به عنوان یک گیرنده پیام کاربرد بهره ببرید.

در جاوااسکریپت می تواند از سه نمونه دیالوگ باکس استفاده کنید که آن ها شامل alert (هشدارها)، Confirm (تاییدها) و در نهایت Promp box (باکس های پیام) می شود.

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

در بخش ادامه ما هر کدام از این دیالوگ باکس ها را با جزئیات کامل برای شما توضیح می دهیم.

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

دیالوگ باکس های هشدار جزء ساده‌ترین و پرکاربرد ترین دیالوگ باکس هائی هستند که در جاوااسکریپت از آن ها استفاده می کنیم. آن ها شما را قادر می کنند که بتوانید یک پیام کوتاه را به مخاطب خودتان نشان دهید. همچنین در کنار این هشدارها یک دکمه OK قرار می گیرد که کاربر می تواند با کلیک کردن بر روی آن، اقدام به تائید پیام و ادامه کار کند.

شما می توانید دیالوگ باکس ها هشدار را با استفاده از متد alert() ایجادکنید. شما پیش از این مثال های متعددی را درباره استفاده از هشدارها در زمان اجرای کدهای جاوااسکریپت را مشاهده کرده اید. بگذارید که نگاهی به یک مثال در این زمینه بیندازیم:

مثال

var message = "Hi there! Click OK to continue.";

alert(message);




 /* The following line won't execute until you dismiss previous alert */

alert("This is another alert box.");

ساختن یک دیالوگ باکس تایید

یک دیالوگ باکس تایید (Confirm dialog box) به کاربر این امکان را می دهد که بتواند انجام یک عملیات را تایید و یا رد کند. یک دیالوگ باکس تایید مشابه با دیالوگ باکس هشدار است، تنها تفاوتی که در اینجا وجود دارد آن است که در اینجا علاوه بر دگمه OK دگمه Cancel نیز وجود دارد.

شما می توانید دیالوگ باکس تایید را با استفاده از متد confirm() فراخوان کنید. این متد به سادگی یک مقدار بولین (true یا false) را بر اساس جواب کاربر به دگمه های OK یا Cancel بر می گرداند. در اغلب اوقات این پاسخ به یک متغیر نسبت داده می شود و در طول اجرای کدها از آن بهره می بریم.

در مثالی که در ادامه آمده است، یک نوشته بر روی مرورگر کاربر نمایش داده می شود، برای شروع این فرایند کاربر باید آن را تایید و یا رد کند.

مثال

var result = confirm("Are you sure?");


 if(result) {

    document.write("You clicked OK button!");

} else {

    document.write("You clicked Cancel button!");

}

 

ساختن دیالوگ باکس اعلام

دیالوگ باکس اعلام (Prompt dialog box) برای نمایش داده برخی از پرسش ها و دریافت اطلاعات کاربر به کار گرفته می شود. یک دیالوگ باکس اعلام شامل یک باکس نوشتاری و دگمه های OK و Cancel است.

شما می توانید دیالوگ باکس اعلام را با استفاده از متد prompt() ایجاد کنید. این متد در صورتی که کاربر بر روی دگمه OK کلیک کنید نوشته نوشتاری دریافت شده در فیلد مربوط را بر می گرداند و در صورتی که کاربر بر روی دگمه Cancel کلیک کند یک مقدار null بر می گرداند. اگر کاربر بر روی دگمه OK کلیک کند و هیچ مقدار وارد نکرده باشد، یک رشته خالی برگردانده می شود. به همین خاطر، اغلب این مقدار برگردانده شده به یک متغیر نسبت داده می شود و از آن استفاده می شود.

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

مثال

var name = prompt("What's your name?");

 if(name.length > 0 && name != "null") {

    document.write("Hi, " + name);

} else {

    document.write("Anonymous!");

}

 

مقدار وارد شده به وسیله متد prompt() همیشه به صورت یک رشته است. این به معنای آن است که اگر کاربر مقدار عددی 10 را وارد کند آن تبدیل به یک رشته به صورت "10" خواهد شد و باید آن را مجددا تبدیل به عدد کرد.

به همین خاطر، اگر شما میخواهید مقدار رشته وارد شده را در معادلات ریاضی به کار ببرید باید از کست کردن (Cast) استفاده کنید برای مثال دریافت مقدار ورودی شما می تواند به این صورت باشد: var age = Number(prompt("What's your age?"));c

نکته

برای نمایش دادن شکست خطوط در درون دیالوگ باکس، می توانید از کاراکتر خط جدید (newline) و یا سرخط (\n) استفاده کنید، این کاراکتر به صورت یک بک اسلش  و سپس یک کاراکتر n است.

No votes yet.
Please wait...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

منو اصلی

question