ساخت پاپ آپ با جاوا اسکریپت

جاوا اسکریپت عملکردهای داخلی مختلفی را برای نمایش پیامهای پاپ آپ برای اهداف مختلف مانند نمایش پیام ساده یا نمایش پیام و پذیرش آن برای کاربر یا نمایش پنجره برای دریافت مقدار ورودی کاربر فراهم می کند.

جعبه هشدار
از تابع هشدار () برای نمایش یک پیام پاپ آپ به کاربر استفاده کنید. این پنجره حاوی یک دکمه تأیید برای بستن پنجره است.

alert("This is alert box!");  // display string message

alert(100); // display number 

alert(true); // display boolean

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

کادر را تأیید کنید
بعضی اوقات شما نیاز به گرفتن یک گواهی کاربر برای ادامه کار دارید. به عنوان مثال ، شما می خواهید قبل از ذخیره اطلاعات به روز شده یا حذف داده های موجود ، گواهی کاربر را بگیرید. در این سناریو ، از گواهی عملکرد JavaScript () داخلی استفاده کنید. عملکرد تأیید () با دو دکمه OK و Cancel یک پیام بازشو را به کاربر نمایش می دهد. می توانید دکمه مورد نظر کاربر را بررسی کرده و مطابق آن ادامه دهید.

مثال زیر نحوه نمایش کادر تأیید را نشان می دهد و سپس دکمه مورد نظر کاربر را بررسی می کند.

var userPreference;

if (confirm("Do you want to save changes?") == true) {
    userPreference = "Data saved successfully!";
} else {
    userPreference = "Save Cancelled!";
}

 

جعبه سریع
بعضی اوقات ممکن است برای انجام کارهای بیشتر با صفحه وب ، نیاز به ضبط ورودی کاربر داشته باشید. به عنوان مثال ، شما می خواهید EMI را بر اساس مدت وام مورد نظر کاربر محاسبه کنید. برای این نوع سناریو ، از نوار عملکرد JavaScript داخلی () استفاده کنید.

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

prompt([string message], [string defaultValue]);

 

var tenure = prompt("Please enter preferred tenure in years", "15");
    
if (tenure != null) {
    alert("You have entered " + tenure + " years" );
}

 

 

همانطور که در مثال بالا مشاهده می کنید ، یک پیام را به عنوان اولین پارامتر و مقدار پیش فرض "15" به عنوان پارامتر دوم مشخص کنید. عملکرد سریع مقدار وارد شده توسط کاربر را برمی گرداند. اگر کاربر چیزی وارد نکند ، خالی برگردانده می شود. بنابراین توصیه می شود قبل از اقدام مقدار خالی را بررسی کنید.

 

نکته ای که باید به خاطر داشته باشید:
می توانید با استفاده از توابع عمومی ، یک پیام بازشو نشان دهید - هشدار () ، تأیید () ، و سریع ().
عملکرد هشدار () با دکمه "OK" یک پیام بازشو را نشان می دهد.
صفحه نمایش () نمایش دکمه های "OK" و "Cancel" را تأیید کنید. از عملکرد OK () برای تأیید کاربر استفاده کنید.
تابع Prompt () به شما امکان می دهد با فشار دادن دکمه های "OK" و "لغو" ورودی را وارد کنید. تابع () () مقدار وارد شده توسط کاربر را برمی گرداند. اگر کاربر هیچ مقدار ورودی را ارائه ندهد ، این مقدار خالی را برمی گرداند.

الگو ها در جاوا اسکریپت چی هستن ؟ و چرا آن ها رو رعایت کنیم؟

تا زمان راه‌اندازی ES6 ، جاوا اسکریپت هیچگاه روش صحیحی برای اداره این زنجیره نداشته است. ES6 چیزی به نام سواد الگو را معرفی می کند ، که به JavaScript اجازه می دهد تا چندین رشته را با کارایی و ظرافت بیشتری دستکاری کند.
نحو برای الگوهای شخصیت
ادبیات فرم قصد ندارند قابلیت های اضافی را به قابلیت های موجود جاوا اسکریپت اضافه کنند اما سعی می کنند مشکل را به روشی جدید حل کنند. از اینجا ، نحو جدید را وارد کنید. به جای استفاده از نقل قول های یک یا دوتایی ، می توانید رشته هایی را با کلیدهای عقب (') تنظیم کنید.

 

// This is how strings were declared pre ES6
var earlierStrings = 'How strings were declared pre ES6';

// Declaring strings using template literals in ES6
let templateLiterals = `How strings can be declared post ES6`;

console.log(typeof earlierStrings); // "string"
console.log(typeof templateLiterals); // "string"

قالب کاراکترها پاسخ چندین رشته خط در JavaScript است
رشته های چندگانه همیشه قبل از ES6 مسئله ای بوده اند زیرا رشته هایی با نقل قول های مضاعف و تک نرخی اعلام شده اند. این یک مشکل بود زیرا وقتی رشته هایی را با نقل قول های دو یا یک منتشر می کنید ، نیش ها دقیقاً در یک خط قرار می گیرند. بیایید نگاهی به نحوه توسعه دهندگان برای قرار دادن چندین خط HTML در کد JavaScript بیندازیم تا بفهمیم چگونه می توان شکل کلامی را تغییر داد.

var profile = '' +
    '    <div class="profile">\n' +
    '\n' +
    '        <div class="name">John Doe </div>\n'
    '\n' +
    '        <div class="designation">Web Developer</div>\n'
    '\n' +
    '    </div>\n';

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

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

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