آشنایی با کتابخانه جاوا اسکریپتی SweetAlert 2

کتابخانه جاوا اسکریپتی SweetAlert نسخه شماره 2

کتابخانه SweetAlert برای بهبود تابع پیش فرض جاوا اسکریپت به نام ()alert تولید و رونمایی شد .

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

ابتدا برای استفاده باید این کتابخانه را در صفحه وب خود بارگذاری کنیم .

پیشنهاد می شود از سایت CDNJS برای سرعت بالای بارگذاری استفاده شود .

آدرس صفحه کتابخانه SweetAlert2 در سایت CDNJS : لینک مشاهده

سرویس CDN چیست ؟

قبل از CDN ها اگر فایلی را در هاستی ذخیره می کردیم و میخواستیم از تمام نقاط دنیا به آن دسترسی داشته باشیم ، بستگی به نقطه جغرافیایی زمان بیشتری برای بارگذاری وقت صرف میشد .

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

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

حالا شروع میکنیم به ساخت اولین صفحه وب برای آزمایش کردن این کتابخانه

<!DOCTYPE html>
<html>
<head>
<!--SweetAlert2-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.4/sweetalert2.min.css" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.4/sweetalert2.all.min.js" integrity="sha256-qtyU+b249rw/5PQ1KXGRtxjlgg6hfU2EK50YOlc0n50=" crossorigin="anonymous"></script>
</head>
<body dir="rtl">
    <button onclick="">نمایش پاپ آپ</button>
</body>
</html>

در قسمت بالا در تگ head دو فایل css و js کتابخانه مربوطه بارگذاری شد .

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

این دو خاصیت فوق async و defer نام دارند .

خاصیت integrity و crossorigin در تگ script به چه معناست ؟

خاصیت integrity به این معناست که برای جلوگیری از اجرای کد های مخرب در کنار این فایل مورد نظر ، سورس کد اصلی ، طبق الگوریتم رمز نگاری مخصوص خود بررسی می شود و اگر نا هماهنگی وجود نداشت اسکریپت در سایت بارگذاری می شود .

خاصیت onclick به چه معناست ؟

در تگ button خاصیتی وجود داره به نام onclick که میتوان کد جاوا اسکریپتی در قالب تابعی نوشت و نام آن را در این خاصیت قرار داد . پس از کلیک کردن کاربر بر روی این دکمه آن تابع فراخوانی و اجرا می شود .

حالا اسکریپتی را می نویسیم که بتوانیم از کتابخانه استفاده کنیم .

<script>
function show_sw () {
    swal (
    'عنوان',
    'متن توضیحات',
    'نوع',
    )
}
</script>

حالا این تابع را فراخوانی میکنیم .

<!DOCTYPE html>
<html>
<head>
<!--SweetAlert2 CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.4/sweetalert2.min.css" />
<!--SweetAlert2 JavaScript-->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.4/sweetalert2.all.min.js" integrity="sha256-qtyU+b249rw/5PQ1KXGRtxjlgg6hfU2EK50YOlc0n50=" crossorigin="anonymous"></script>

<script>
function show_sw() {
    swal (
    'عنوان',
    'متن توضیحات',
    'نوع',
    )
}
</script>
</head>
<body dir="rtl">
    <button onclick="show_sw()">نمایش پاپ آپ</button>
</body>
</html>