آموزش پروژه محور جاوا اسکریپت – آموزش گام به گام طراحی اسلایدر عکس
در طراحی وب آشنایی با HTML و CSS و JavaScript ضروری است. با نوشتن کدهای HTML میتوانید عناصر صفحه شامل گزینههای منوها، دکمهها، متن و پاراگراف و عکسها و سایر بلوکها را در صفحه ایجاد کنید اما اینکه این عناصر چه ظاهری داشته باشند، کاری است که با تعریف استایل در CSS صورت میگیرد. جاوا اسکریپت برای ایجاد عناصر پویا به کار میرود. به عنوان مثال اسلایدر عکس یا منو و برخی عناصر جذاب که فقط با HTML و CSS قابل طراحی نیست، توسط JavaScript طراحی میشود. در این آموزش پروژه محور جاوا اسکریپت، به یکی از موضوعات کاربردی در طراحی سایت که طراحی اسلایدر عکس است، میپردازیم. قبل از اینکه مراحل طراحی اسلایدر عکس به کمک جاوا اسکریپت را شرح دهیم، به دو نکته توجه کنید:
آموزش پروژه محور جاوا اسکریپت
در آموزش پروژه محور جاوا اسکریپتبا استفاده از HTML و CSS و بدون هیچ نوع کد جاوا اسکریپت هم میتوان اسلایدر عکس طراحی کرد ولیکن امکانات و پویایی آن ساده خواهد بود. برای اینکه اسلایدر عکس حرفهای باشد و امکاناتی نظیر نمایش خودکار عکسهای بعدی، دانلود عکس، جابجا شدن بین عکسها با افکتهای جذاب، نمایش توضیح عکسها و غیره، همگی در آن گنجانده شود، میبایست از جاوا اسکریپت استفاده کرد. برای یک اسلایدر جاوا اسکریپت ساده، میتوانید خودتان دست به کار شوید و کد بنویسید اما اگر تاکنون در مورد JavaScript هیچ مطالعهای نداشتهاید، میبایست از دورههای آموزش جاوا اسکریپت استفاده کنید تا در سریعترین زمان ممکن، با این زبان مفید و کاربردی آشنا شوید. توصیه میکنیم از فرادرس و آموزش کاربردی جاوا اسکریپت آن بازدید کنید:
نکتهی دوم این است که در طراحی وب لازم نیست همهی کدها را از صفر بنویسید چرا که کدهای و لایبرریهای آماده بسیار است! بهتر است قبل از نوشتن کد، در مورد چیزی که لازم دارید جستجو کنید. به عنوان مثال برای طراحی اسلایدر عکس حرفهای، تعداد زیادی کتابخانه جالب و حرفهای در گیتهاب و دیگر منابع به اشتراک گذاشته شده است. کافی است دستورالعمل استفاده از توابع تعریف شده را مطالعه کنید و در پروژهی خودتان پیادهسازی کنید. بسیاری از کتابخانهها متن باز و رایگان است، لذا میتوانید کدها را به تناسب نیاز، تغییر بدهید و سفارشیسازی کنید.
در این آموزش پروژه محور جاوا اسکریپت میخواهیم یک اسلایدر ساده عکس طراحی کنیم. حاصل نهایی کار را در فیلم زیر مشاهده میکنید:
در این آموزش پروژه محور جاوا اسکریپت میخواهیم یک اسلایدر ساده عکس طراحی کنیم. حاصل نهایی کار را در فیلم زیر مشاهده میکنید:
موارد لازم برای طراحی اسلایدر عکس با جاوا اسکریپت
در این آموزش پروژه محور جاوا اسکریپت، با توجه به اینکه نمیخواهیم از کتابخانههای رایگان و حرفهای جاوا اسکریپت استفاده کنیم، آشنایی به موارد زیر ضروری است:
HTML
منظور از HTML یک زبان علامتگذاری است که برای ایجاد ساختار و اسکلت کلی صفحات وب به کار میرود. به عنوان مثال برای ایجاد یک پاراگراف میبایست جمله را بین <p> و <p/> تایپ کنید و برای ساخت یک بلوک جدید میبایست <div> تایپ کنید و پس از قرار دادن چند پاراگراف یا لینک و غیره در آن، <div/> تایپ کنید که این تگ بسته شود. به جز تگ <img> و <br> میبایست سایر تگها را ببندید. یادگیری HTML ساده است و اگر از دورههای مفدماتی آموزش HTML استفاده کنید، شاید ظرف چند ساعت بتوانید به راحتی کدهای HTML را بخوانید و درک کنید و همینطور بنویسید! به همین جهت استفاده از آموزشهای HTML در فرادرس، توصیه میشود:
یک صفحه بسیار ساده وب شامل ۲ تگ head و body است. استایلها و توضیحات صفحه و فایلهای CSS و JavaScript در هد تعریف و فراخوانی میشوند و در بخش body یا بدنه، محتوای صفحه قرار میگیرد. به تصویر زیر توجه کنید:
نمونه کد HTML و تعریف کردن بلوک و عکس و لینک و پاراگراف
در این نمونه کد ساده، در تگ head عنوان صفحه با استفاده از تگ title تعریف شده است. زمانی که این صفحه را در مرورگرهای وب نظیر گوگل کروم باز میکنید، عنوان صفحه را در نوار تبها مشاهده خواهد کرد.
بدنه بین <body> و </body> تعریف شده که شامل یک پاراگراف و یک عکس و یک لینک است. برای مشخص کردن استایل عکس و پاراگراف، میتوانید مستقیماً برای تگ a و img و p، استایل تعریف کنید. در عین حال برای استایل دادن متفاوت به تگهای مشابه، میبایست برای تگ موردنظر، کلاس یا آیدی در نظر بگیرید و سپس برای آن کلاس یا آیدی، در CSS استایل بنویسید.
CSS
منظور از Cascading Style Sheets یا به اختصار CSS، کدهایی است که ظاهر و استایل عناصر صفحه که با کدهای HTML ایجاد شده را مشخص میکند. به عنوان مثال با نوشتن font-size:20px در تعریف استایل تگ p، اندازه فونت پاراگرافها ۲۰ پیکسل خواهد شد مگر آنکه در تعریف سایر استایلها، اندازه فونت پاراگراف خاصی را متفاوت تعریف کنید.
p{font-size: 20px}
کدهای CSS حالت آبشاری دارد به این معنی که آخرین و جزئیترین استایل، موارد قبلی را بیاثر میکند. به عنوان مثال اگر با کد قبلی، اندازه فونت پاراگرافها را ۲۰ پیکسل تعریف کرده باشید و بخواهید پاراگراف خاصی که کلاس آن example است، فونت ۳۰ پیکسلی داشته باشد، میبایست در HTML این گونه بنوسید:
<p class="example">Bigger Text</p>
و در CSS نیز استایل کلاس example را به صورت زیر تعریف کنید:
.example{font-size:30px;}
برای یادگیری CSS نیز توصیهی ما استفاده از دورههای آموزشی مختصر و مفید است. فرادرس در این حوزه نیز آموزشهای مقدماتی بسیار مفیدی دارد:
JavaScript
جاوا اسکریپت اساساً یک زبان برنامهنویسی است که امکان تغییر در کدهای HTML صفحه و همینطور تغییر در استایل عناصر صفحه را فراهم میکند. به عبارت دیگر با جاوا اسکریپت میتوانید در HTML و CSS تغییر ایجاد کنید و محتوای صفحه را از حالت استاتیک و ساده، به حالت پویا و دینامیک تبدیل کنید. نمونهی آن اسلایدر عکسی است که به کمک جاوا اسکریپت طراحی شده است.
کدنویسی اسلایدر عکس با جاوا اسکریپت
فرض کنید که در بخشی از صفحه که در تگ body قرار گرفته، مطلبی حاوی چند عکس نوشته شده است. بخش مربوط به اسلایدر عکس را با یک تگ div آغاز میکنیم و کلاس این بلوک را slider مینامیم.
<div class="slider">
و اما اولین عکس در بلوک اسلایدر: یک بلوک دیگر ایجاد میکنیم و در آن عکس را آدرسدهی میکنیم:
<div class="item">
<img src="https://site.com/Image_1.jpg">
</div>
برای عکس بعدی نیز به همین ترتیب عمل میکنیم و صرفاً آدرس عکس تغییر میکند:
<div class="item">
<img src="https://site.com/Image_2.jpg">
</div>
پس از قرار دادن چند div به تعداد عکسها، نوبت به دکمهی رفتن به عکس قبلی و بعدی میرسد که با استفاده از تگ a تعریف میکنیم. در تگ a میتوان اکشن نیز تعریف کرد و تابعی که با کلیک روی لینک اجرا میشود را مشخص کرد. اسم تابع رفتن به عکس قبلی را previousSlide فرض کنید و کلاس این لینک را نیز previous فرض کنید:
<a class="previous" onclick="previousSlide()">❮</a>
دقت کنید که متن این لینک، کاراکتر < است.
برای لینک رفتن به اسلاید بعدی نیز یک لینک دیگر با کلاس و تابع متفاوت در نظر میگیریم:
<a class="next" onclick="nextSlide()">❯</a>
به این ترتیب کدهای HTML اسلایدری که در این آموزش پروژه محور جاوا اسکریپت طراحی میکنیم، به صورت زیر خواهد بود و بخشهای مشخص شده، بخشهایی است که برای تغییر دادن عکسهای اسلایدر، میبایست تغییر داد.
اما تعریف کردن استایل عناصر و کلاسها: برای بلوک اصلی از استایل زیر استفاده میکنیم:
.slider{
max-width: 90%;
position: relative;
margin: auto;
height: 300px;
}
برای تصاویری که در بلوکهایی با کلاس item قرار دارند نیز از استایل زیر استفاده میکنیم:
.slider .item img }
object-fit: cover;
width: 100%;
height: 300px;
}
استایل دکمهی بعدی و قبلی نیز به صورت زیر تعریف میشود. موقعیت به صورت مطلق است و فاصله از بالای بلوک، ۵۰ درصد است تا این دکمهها در وسط ضلع چپ و راست قرار گیرند. زمانی که موس روی این دکمهها قرار میگیرد، رنگ پسزمینه کمی تیره میشود.
.slider .previous, .slider .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 16px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.slider .next }
right: 0;
border-radius: 3px 0 0 3px;
}
.slider .previous:hover,
.slider .next:hover {
background-color: rgba(0, 0, 0, 0.2);
}
در پایان تعریف استایل انیمیشن تغییر بلوکهای حاوی عکس را ساده و به کمک keyframe در CSS انجام میدهیم. به عنوان مثال اگر بخواهید حین تغییر کردن اسلایدها، افکت محو و ظاهر شدن داشته باشید، میتوانید در فریم شروع و پایان، دو مقدار متفاوت برای شفافیت یا Opacity تعریف کنید و نام انیمیشن را نیز fade بگذارید.
.slider .item }
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from }
opacity: 0.4
{
to }
opacity: 1
{
}
تعریف کردن انیمیشن بخش مهمی از فرآیند ساخت اسلایدر جاوا اسکریپت است که برای انیمیشنهای ساده به کمک CSS و برای انیمیشنهای پیچیده و حرفهایتر، به کمک جاوا اسکریپت و CSS صورت میگیرد. البته قابلیتهای انیمیشن در CSS3 نیز بسیار زیاد است. به عنوان مثال میتوانید در کیفریم شروع و پایان، علاوه بر Opacity، از Transform و Scale استفاده کنید و دو مقدار متفاوت برای Scale ابتدا و انتها در نظر بگیرید. در این صورت زمانی که تصویر تغییر میکند، علاوه بر ظاهر شدن تدریجی، اندازهی آن نیز بزرگ میشود.
transform: Scale(0.4);
transform: scale(1);
اما نوبت به نوشتن کدهای جاوا اسکریپت میرسد. قدم اول تعریف کردن اندیسی است که شماره اسلایدی که نمایش داده میشود را مشخص میکند:
let slideIndex = 1;
سه تابع نیاز داریم. تابع نمایش اسلایدی که شمارهی آن ارایه شده که نام آن را showSlides میگذاریم. تابع رفتن به اسلاید بعدی و تابع رفتن به اسلاید قبلی. در ابتدا اولین اسلاید نمایش داده میشود. لذا دستور زیر را مینویسیم:
showSlides(slideIndex);
در تابع nextSlide که اسلاید بعدی را نمایش میدهد، ابتدا شماره اندیس ۱ واحد زیاد میشود و سپس تابع نمایش اسلاید اجرا میشود. دقت کنید که منظور از a+=1 این است که مقدار متغیر a به اضافه ۱ شده و خروجی در همین متغیر ذخیره شود.
function nextSlide(){
showSlides(slideIndex += 1);
}
تابع نمایش اسلاید قبلی نیز به همین صورت است با این تفاوت که عدد اندیس یک واحد کم میشود.
function previousSlide (){
showSlides(slideIndex -= 1);
}
اما تابع نمایش اسلاید: به تابعی نیاز داریم که یک آرگومان که شمارهی اسلاید است را بگیرد و در استایل همهی بلوکهای حاوی عکس به جز یک مورد خاص، عبارت زیر را اضافه کند:
style="display:none "
بنابراین با یک حلقه for، ابتدا این استایل را به همهی divهایی که کلاس item دارند، اضافه میکنیم تا مخفی شوند و در پایان برای div خاصی که شماره اندیس آن به تابع showSlides ارسال شده، استایل نمایش را به صورت block در نظر میگیریم که در حقیقت از حالت مخفی خارج میشود.
این فرآیند با چند خط کد زیر انجام میشود:
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("item");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (let slide of slides) }
slide.style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
نتیجهی نهایی کار همان چیزی است که در ابتدای مقاله اشاره کردیم:
استفاده از کتابخانههای رایگان جاوا اسکریپت
برای ساخت اسلایدرهای حرفهایتر، همانطور که اشاره کردیم بهترین کار استفاده از کتابخانههای آماده است که برنامهنویسان و گروههای حرفهای روی جوانب مختلف آن کار کردهاند و طبعاً شما را از نوشتن کدهای طولانی و طی کردن مراحل طراحی ظاهر اسلایدر و دیباگ کردن کدها بینیاز میکند. لذا در زمان نسبتاً کم، به نتیجهی بسیار خوبی میرسید.
به عنوان مثال اگر در گوگل در مورد javascript library slider سرچ کنید، در همان صفحه اول چندین لایبرری حرفهای و معروف ظاهر میشود که میتوانید نمونهای از اسلایدرهای ساخته شده با این کتابخانهها را بررسی کنید و موردی که مناسبتر است را انتخاب کرده و در طراحی سایت خودتان از آن استفاده کنید.
تغییر دادن کدهای این نوع کتابخانهها، بهینهسازی و همینطور اضافه کردن کدها به فایلهای CSS و JS پروژه طراحی وب نیز به دانش و تجربه نیاز دارد ولیکن روال کار به مراتب سادهتر از نوشتن کدهای جاوا اسکریپت و استایل و HTML از صفر است.
در سایتهای دینامیک نظیر سایتهایی که با وردپرس طراحی شده، میبایست فایلهای کتابخانهها را در فایلهای قالب اضافه کنید و در کدنویسی پوسته که به زبان PHP صورت میگیرد، کدهایی اضافه کنید که divها و تگهای a و img مربوط به اسلایدر را به صورت ساده و سریع ایجاد کند. در غیر این صورت نویسندهی سایت وردپرسی مجبور میشود که کد HTML اسلایدر را به صورت دستی ایجاد کرده و در ادیتور کد HTML سایت وردپرس پیست کند که کار وقتگیری و احتمال خطای انسانی را افزایش میدهد. بد نیست از دورههای آموزشی PHP در فرادرس استفاده کنید تا کدنویسی سایت وردپرسی و به خصوص ویرایش کردن قالب، برایتان ساده شود.
اگر برای خرید مودم، اینترنت و تجهیزات شبکه سوال داشتید یا نیاز به راهنمایی و کمک دارید؛ کانال تلگرام شبکهچی به آیدی shabakehchi@ را فالو و پرسش خود را برای مدیر کانال بفرستید تا جواب دهیم.