سلام در ادامه دوره آموزش طراحی سایت با jQuery جی کوئری آشنا میشوید
جی کوئری jQuery چیست؟
برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.
آموزش طراحی سایت
با
توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور
حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع،
jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا
اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را
تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار
بالایی داشته باشید.
تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که
در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از
جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره
کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه
(plugin) پیدا کنید.
قدرت و کارایی بالا، دامنه ی وسیع افزونه های
پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر
کتابخانه های jQuery تمایز بخشیده است.
پس فهمیدیم که jquery چیست(
همچنین برخی افراد معادل فارسی آن یعنی جی کوئری را استفاده می کنند)... در
مطالب آموزشی بعدی به بررسی سایر خصوصیات و موارد فنی jquery می پردازیم.
می
توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad
نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت
خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر
وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند.
بهترین
ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با
داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های
مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به
یاری شما می آید.
داشتن لیستی از property ها، متدها و پارامترهای
احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery
یک تازه وارد هستید.
در
زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به
علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد:
تصویر پایین توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.
این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.
جهت
استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن
استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه
را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو
گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی
"Development" .
نسخه ی "Production" برای وب سایت ها live و آماده می
باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را
اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با
باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و
توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده
فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید
مشاهده کنید خطا در کجا رخ داده است.
پس از دانلود فایل jQuery
JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به
صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار
="text/javascript" src="jquery-3.4.1.js" تنظیم نمایید یا به عبارتی دیگر
در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی
jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده
کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن
ارجاع دهید):
<script type="text/javascript" src="jquery-3.4.1.js">
اکنون بخشی از صفحه ی شما به شکل زیر خواهد:
<title>jQuery test</title>
<script type="text/javascript" src="jquery-3.4.1.js">
یک
روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک
CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه
های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را
میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery
نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می
شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر
کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان
(cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل
را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند،
وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین
سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود.
می
توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید،
مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد.
برای نمونه، جهت اضافه کردن ویرایش jQuery 3.4.1 از سرورهای Google به صفحه
ی وب مورد نظر، دستور زیر را وارد می کنید:
1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:
<div id="divTest1">Hello, world!</div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
همان
طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که
به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند،
استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML
با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن
قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:
<div id="divTest2">Hello, world!</div>
<script type="text/javascript">
document.getElementById("divTest2") = "Hello, world!"
اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به
طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و
سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین
تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه
نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از
بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery
اجرای این عملیات را نیز بسیار آسان ساخته است.
در مبحث بعدی به تشریح انتخابگرها (selector) خواهیم پرداخت.
همان طور که در درس قبلی ذکر شد، توصیه می شود تا اتمام بارگذاری صفحه و آماده شدن آن صبر کنید و سپس اقدام به کار با آن نمایید. این امر همچنین برای شما این امکان را فراهم می کند تا کد جاوا اسکریپت خود را در بخش head صفحه (یا به طور مستقیم و یا از طریق لینک به یک فایل جاوا اسکریپت خارجی) و قبل از تگ body قرار دهید. در jQuery این کار با قرار دادن کد در رخداد document ready امکان پذیر می باشد. در زیر، مثال درس قبلی را بکار می بریم، اما این بار داخل رخداد ready قرار داده شده است.
<div id="divTest1"></div>
<script type="text/javascript">
function DocumentReady() {
$("#divTest1").text("Hello, world!");
}
$(document).ready(DocumentReady);
در
این مثال یک تابع ایجاد کرده و آن را DocumentReady نام گذاری می کنیم که
به مجرد آماده شدن صفحه برای کار با DOM و دستکاری المان های آن، فعال می
شود. در خط آخر کد، با استفاده از متد ready()، تابع خود را به رخداد ready
تخصیص داده و بدین وسیله به jQuery اطلاع می دهیم که با آماده شدن صفحه می
خواهیم که تابع را فراخوانی کند.
می توان با بهره گیری از قابلیت تعریف
تابع بی نام (anonymous function) در جاوا اسکریپت، کد فوق را کوتاه تر
نیز کرد. منظور این است که بجای اعلان تابع و تخصیص اسم به آن، فقط یک تابع
ایجاد می کنیم و بلافاصله ارجاع به تابع ready() را به آن پاس می دهیم.
اگر چندان آشنایی با زبان جاوا اسکریپت ندارید، در آن صورت استفاده از این
روش کمی پیچیده بنظر می رسد. اما با آشنایی بیشتر خواهید دانست که در این
روش، کد نویسی کاهش یافته و فضای کمتری نیز اشغال می شود.
<div id="divTest2"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#divTest2").text("Hello, world!");
});
با این وجود، تیم طراحان و توسعه دهندگان این کتابخانه احساس کردند که این کد را کوتاه تر هم می توانند بکنند. از اینرو یک نسخه ی overload از سازنده (constructor) ایجاد کردند که تابع ready را به عنوان پارامتر می پذیرد و کد را با این روش به مراتب کوتاه تر کردند.
<div id="divTest3"></div>
<script type="text/javascript">
$(function () {
$("#divTest3").text("Hello, world!");
});
در
مثال فوق، تابع بی نام مستقیما به سازنده ارسال می شود که آن را به رخداد
ready تخصیص می دهد. اگر این کد را تست کنید، متوجه می شوید که به مجرد
بارگذاری صفحه، event مربوطه اجرا می گردد. گاهی این رخداد چنین سریع فعال
می شود که اصلا متوجه اجرای آن نمی شوید.
همان طور که قبلا گفته شد،
توصیه می شود برای استفاده از jQuery در صفحه وب خود کدهای آن را داخل تابع
رخداد ready قرار دهید. در بیشتر مثال های این آموزش همین رویه دنبال
خواهد شد، مگر برای کوتاه تر شدن مثال که در تعدادی از نمونه ها این کد را
لحاظ نمی کنیم.
آموزش جی کوئری از آموزش طراحی سایت ادامه دارد
سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با کار با جداول در Bootstrap 4 آشنا شدیم.
عکس و تصویر در Bootstrap 4 به 3 حالت کلی زیر نشان داده می شود :
به کار بردن کلاس rounded در تگ <img> باعث می شود عکس با گوشه های گرد نمایش داده شود، همانند کد و مثال عملی زیر :
<p><img alt="Cinque Terre" class="rounded" src="cinqueterre.jpg"></p>
آموزش نمایش عکس به صورت گرد در Bootstrap 4:
کلاس rounded-circle در Bootstrap 4 باعث می شود تا عکس در تصویر (تگ <img> ) به صورت تمام گرد و دایره نمایش داده شود. همانند کد مثال عملی زیر:
<p><img alt="Cinque Terre" class="rounded-circle" src="cinqueterre.jpg"></p>
به کار بردن کلاس .img-thumbnail در تگ <img>، باعث می شود تا عکس به صورت پیش نمایش، کوچکتر و بند انگشتی همراه با خطوط حاشیه ای باریک نمایش داده شود. همانند کد مثال عملی زیر:
<p><img alt="Cinque Terre" class="img-thumbnail" src="cinqueterre.jpg"></p>
به وسیله کلاس .float-right می توانید عکس را راست چین کرده و با کلاس .float-left، تصویر را در صفحه چپ چین کنید.
در کد مثال عملی زیر، عکس اول را راست چین و عکس دوم را چپ چین کرده ایم :
<p><img class="float-left" src="paris.jpg"> <img class="float-right" src="paris.jpg"></p>
از طرف دیگر، با به کار بردن کلاس های .mx-auto (معادل حالت margin:auto) و کلاس .d-block معادل (خاصیت display : block) در Bootstrap 4، می توان یک عکس را در وسط صفحه یا عنصر مادر قرار داد، همانند کد مثال عملی زیر:
<p><img class="d-block mx-auto" src="paris.jpg"></p>
عکس
ها دارای سایزهای مختلفی هستند و صفحه نمایش ها هم عرض و طول های گوناگونی
دارند. عکس های واکنش گرا یا Responsive Image به طور خودکار اندازه خود
را برای بهترین حالت نمایش در صفحه، بزرگ و کوچک کرده و تنظیم می کنند.
با
اضافه کردن کلاس .img-fluid در Bootstrap به تگ <img>، یک عکس را
واکنش گرا می کنید. عکس هدف اندازه خود را بر حسب اندازه عنصر دربرگیرنده
اش تنظیم کرده و نمایش می دهد.
به کار بردن کلاس .img-fluid برای یک عکس، خواص max-width:100% و height:auto را به آن می دهد.
در
کد مثال عملی زیر، از کلاس .img-fluid برای Responsive کردن عکس استفاده
کرده ایم. همانطور که در خروجی مشاهده می کنید، با بزرگ و کوچک کردن صفحه،
عکس نیز تغییر کرده و بزرگ و کوچک می شود.
<img alt="Chania" class="img-fluid" src="img_chania.jpg">
یک
jumbotron در Bootstrap 4، یک جعبه بزرگ خاکستری رنگ ایجاد می کند که می
توانید برای نمایش اطلاعات مهم و جلب توجه کاربر به نوشته، از آن استفاده
کنید.
jumbotron در Bootstrap 4، معمولا عرض کل عنصر دربرگیرنده خود را اشغال می کند، پس زمینه ای خاکستری داشته و نوشته های آن گرد است.
نکته :
درون یک jumbotron می توانید تقریبا هر تگ معتبر HTML ای قرار داده و از المنت های Bootstrap با کلاس مختلف نیز استفاده کنید.
برای ایجاد یک jumbotron بایستی از تگ <div> با کلاس .jumbotron استفاده نمایید، همانند کد مثال عملی زیر:
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
اگر می خواهید jumbotron ایجاد شده، تمامی عرض صفحه یا عنصر مادر خود را اشغال کرده و در گوشه های آن گرد نباشد، بایستی از کلاس .jumbotron-fluid با یک عنصر داخلی (مثل تگ) با کلاس .container یا .container-fluid استفاده نمایید. همانند کد مثال عملی زیر:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
</div>
چهارچوب کاری بوت استرپ4، روش بسیار ساده ای برای ایجاد کادر هشدار یا Alert Box فراهم کرده است.
کادر
هشدار Alert توسط یک تگ <div> با کلاس .alert ایجاد می شود و از
کلاس های متنی کمکی می توانید برای تعیین رنگ نوشته و پس زمینه آن نیز
استفاده کنید. این کلاس ها عبارتند از .alert-success، .alert-info،
.alert-warning، .alert-danger، .alert-primary، .alert-secondary،
.alert-light و .alert-dark که هر کدام مفهوم خاصی را به کاربر نشان می
دهند.
در مثال های عملی زیر، انواع کادرهای هشدار با رنگ های مختلف به همراه توضیح و کاربرد هر کدام را نشان داده ایم:
موفقیت Success : کادر هشدار بیان گر عمل مثبت یا انجام موفقیت آمیز عملیات است.
اطلاع Info : کادر هشدار نشان دهنده یک عمل عادی یا اطلاعات کم اهمیت تر است.
اخطار Warning : کادر هشدار اعلام می کند یک اتفاق به ظاهر خطرناک افتاده و نیازمند توجه کاربر است.
خطر Danger : این کادر بیان گر عمل منفی یا انجام یک عملیات خطرناک است.
مهم Primary : کادر هشدار نشان دهنده یک عمل مهم و قابل توجه است.
رده 2 secondary : در این حالت کادر هشدار اعلام می کند یک عمل با درجه اهمیت کمتر رخ داده است.
تیره Dark : یک کادر هشدار با پس زمینه خاکستری یا تیره نشان داده می شود.
مثال عملی: در کد زیر، یک کادر هشدار را با کلاس های .alert و .alert-success ایجاد کرده و خروجی آن را نشان داده ایم:
<div class="alert alert-success"><strong>Success!</strong> You should <a class="alert-link" href="#">read this message</a>.</div>
می
توانید درون کادر هشداری که در Bootstrap 4 ایجاد کرده ایم، یک تگ لینک یا
<a> با کلاس .alert-link قرار دهید. برنامه لینک را به صورت توپر و
با رنگی مشابه رنگ نوشته کادر هشدار نشان می دهد.
در مثال های زیر، انواع حالت لینک در کادرهای هشدار را نشان داده ایم:
مثال عملی: کد مثال زیر نحوه قرار دادن یک لینک یا تگ <a> را درون یک کادر هشدار نشان داده است:
<div class="alert alert-success alert-dismissible">×<strong>Success!</strong> Indicates a successful or positive action.</div>
برای این که کادر هشدار ایجاد شده، قابلیت بسته شدن داشته باشد، بایستی کلاس .alert-dismissible را به تگ Alert Box اضافه کنید.
سپس
یک لینک یا دکمه (Button) که می خواهید با کلیک بر روی آن، کادر هشدار
بسته شده را با کلاس class=”close” و خاصیت data-dismiss=”alert” درون عنصر
اصلی کادر هشدار قرار می دهید، همانند کد مثال عملی زیر:
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
موجودیت × یا (x) یک HTML Entity یا خاصیت ذاتی HTML است که بیشتر به جای حرف X برای ایجاد یک آیکون یا دکمه بستن، از آن استفاده می شود.
با اضافه کردن کلاس های .fade و .show کادر هشدار با جلوه نمایشی و به صورت محو شدن یا ظاهر شدن تدریجی، نمایش داده می شود. نحوه استفاده از این دو کلاس و خروجی آن در مثال زیر نشان داده شده است:
<div class="alert alert-danger alert-dismissible fade show">
برای دریافت اطلاعات بیشتر راجع به کادرهای هشدار در بوت استرپ 4 ، به مرجع آموزش کادر هشدار Alert Box در Bootstrap 4 بروید.
</div>
آموزش bootstrap 4 ادامه دارد