جاوا اسکریپت برای طراحان وب (دوره رایگان)

ما با بحث در مورد متغیرها، انواع داده‌ها و حلقه‌ها به سادگی شروع می‌کنیم. سپس، به مفاهیم پیچیده تری مانند توابع، انتخابگرها و رویدادها خواهیم پرداخت. شما حتی فرصتی خواهید داشت که مهارت هایی را که آموخته اید با کنار هم قرار دادن چند مثال به کار ببرید – برای هر طراح وب مناسب است!

آنچه شما یاد خواهید گرفت

• جاوا اسکریپت چیست و چگونه کار می کند
• متغیرها و انواع داده ها
• آرایه ها و اشیا
• توابع و انتخابگرها
• چگونه همه را کنار هم بگذاریم

برای اینکه دوره را به درستی دنبال کنید، به تعدادی دارایی نیاز دارید. می توانید با کلیک بر روی دکمه زیر آنها را آماده و آماده کنید.

دانلود فایل های دوره

معرفی

درس تصویری را تماشا کنید [0:00] ↗

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

1. کار با جاوا اسکریپت

درس تصویری را تماشا کنید [0:27] ↗

جاوا اسکریپت یک زبان برنامه نویسی قدرتمند و همه کاره است که می تواند برای ایجاد وب سایت های تعاملی و برنامه های کاربردی وب استفاده شود. در مرورگرها و همچنین در سرورها (با استفاده از Node.js) خواهید دید. این یکی از سه فناوری اصلی است که برای ایجاد محتوا برای وب در کنار HTML و CSS استفاده می شود.

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

• در کنسول مرورگر
• با نوشتن آن به صورت خطی در یک سند HTML
• با استفاده از یک فایل JS اختصاصی

2. متغیرها

درس تصویری را تماشا کنید [4:54] ↗

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

اگر تا به حال از یک پیش پردازشگر CSS مانند LESS یا Sass استفاده کرده اید، در مورد مفهوم متغیرها می دانید – به همان روش با جاوا اسکریپت کار می کند. متغیرها ذخیره و دستکاری سریع و کارآمد داده ها در سمت مشتری را برای توسعه دهندگان آسان تر می کند.

3. انواع داده ها

درس تصویری را تماشا کنید [9:07] ↗

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

• رشته
• عدد
• بولی
• خالی
• تعریف نشده

انواع داده های ترکیبی عبارتند از:

و این چیزی است که در ادامه به آن خواهیم پرداخت.

4. آرایه ها

درس تصویری را تماشا کنید [13:17] ↗

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

5. اشیاء

درس تصویری را تماشا کنید [20:04] ↗

برای درک اشیا، باید ویژگی ها را درک کنید. یک ویژگی ارتباط بین یک نام و یک مقدار است. برای مثال color = red.

اشیاء در جاوا اسکریپت مجموعه ای از ویژگی ها هستند. اشیاء نسبت به آرایه ها روش قدرتمندتری برای دستکاری داده ها ارائه می دهند زیرا می توانند اطلاعات پیچیده تری را در قالب سلسله مراتبی ذخیره کنند. آنها همچنین می توانند برای ایجاد اشیاء سفارشی استفاده شوند که ویژگی ها و روش های منحصر به فرد خود را دارند. در مثال زیر، یک شی ایجاد کرده ایم person و چندین ویژگی مرتبط ایجاد کرد، از جمله، age، height، و married (وضعیت تأهل):

6. اپراتورها

درس تصویری را تماشا کنید [25:25] ↗

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

• اپراتورهای انتساب: مانند =
• عملگرهای مقایسه: مانند >، <، و ==
• عملگرهای منطقی: &&، ||

7. اگر دیگر اظهارات

درس تصویری را تماشا کنید [34:07] ↗

بیانیه If Else یک عبارت تصمیم گیری است که در جاوا اسکریپت استفاده می شود که به شما امکان می دهد مقدار یک عبارت را بررسی کنید و در صورت درست بودن عبارت، بلوکی از کد را اجرا کنید.

می توان برای ایجاد منطق قدرتمند و سفارشی با ترکیب چند شرط با استفاده از عملگرهای منطقی مانند &&، ||، ! و غیره همچنین اجازه می دهد تا دستورات تو در تو که در آن یک یا چند مجموعه از شرایط را می توان در یک دستور دیگر بررسی کرد. این امکان کنترل بیشتر بر نحوه و زمان اجرای کد را فراهم می کند.

8. حلقه ها

درس تصویری را تماشا کنید [38:50] ↗

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

9. توابع

درس تصویری را تماشا کنید [45:01] ↗

شما می توانید توابع در جاوا اسکریپت را به عنوان زیربرنامه خاص خود در نظر بگیرید. آنها کدهای قابل استفاده مجدد هستند که پارامترها را می پذیرند، عملیات را روی آنها انجام می دهند و نتیجه را برمی گردانند. آنها به کدها اجازه می دهند تا با تجزیه عملیات به اجزای کوچکتر که می توانند مجدداً در سراسر برنامه مورد استفاده قرار گیرند، به روش ماژولار سازماندهی شوند. توابع با استفاده از function کلمه کلیدی به دنبال نام تابع، مجموعه اختیاری از پارامترها، و متن کد که در براکت های فرفری پیچیده شده است.

توابع همچنین می توانند مستقیماً یک مقدار را برگردانند یا یک مقدار ضمنی داشته باشند return عبارتی که اگر مقداری مشخص نشده باشد، تعریف نشده برمی گردد.

10. انتخابگرها

درس تصویری را تماشا کنید [51:17] ↗

انتخابگرها در جاوا اسکریپت برای هدف قرار دادن و دسترسی به عناصر از Document Object Model (DOM) استفاده می شوند. می توان از آنها برای دریافت ارجاع به یک عنصر یا چندین عنصر، ایجاد یک عنصر جدید و افزودن آن به DOM، حذف عناصر از DOM یا ایجاد تغییرات در آنها استفاده کرد.

11. رویدادها

درس تصویری را تماشا کنید [59:17] ↗

اصطلاح “رویدادهای جاوا اسکریپت” شاید کمی نامناسب باشد زیرا رویدادها در واقع در سمت HTML اتفاق می‌افتند. تنها کاری که می توانید در JS انجام دهید این است که به این رویدادها گوش دهید و مطابق با آن واکنش نشان دهید. یک رویداد می تواند چیزی باشد که توسط مرورگر یا کاربر راه اندازی شده است.

درس‌های بعدی تمام آنچه را که تا کنون آموخته‌اید با چند مثال عملی در اختیار شما قرار می‌دهد.

12. دکمه بازگشت به بالا

درس تصویری را تماشا کنید [1:06:15] ↗

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

سپس در فایل style.css، می‌توانید تنظیماتی را برای نحوه انجام آن انجام دهید بازگشت به بالا دکمه ظاهر می شود و نحوه عملکرد آن، از جمله موقعیت آن در صفحه، رنگ، اندازه و غیره.

13. تکمیل خودکار جعبه متن

درس تصویری را تماشا کنید [1:17:11] ↗

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

برای انجام این کار، باید چند متغیر از جمله به فایل اسکریپت خود اضافه کنید targetInput results برای کشورها، سپس می توانید اضافه کنید targetInput.addEventListener تنظیم کنید keyup که باعث می شود هرگاه شخصی شروع به تایپ در فیلد فرم کند، اسکریپت شروع به مقایسه آن ورودی با لیست کشوری می کند که قبلاً ایجاد کرده ایم.

14. لغزنده محتوا ساده

درس تصویری را تماشا کنید [1:41:42] ↗

در نسخه ی نمایشی سوم، می توانید یک نوار لغزنده محتوا ایجاد کنید که حاوی تصاویر، متن، HTML و هر چیز دیگری است که ترجیح می دهید. در مثال، نوار لغزنده حاوی نقل قول است:

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

15. لایت باکس تصویر

درس تصویری را تماشا کنید [1:39:50] ↗

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

16. Tab Control

درس تصویری را تماشا کنید [1:44:02] ↗

در آخرین نسخه نمایشی این دوره، همه چیز را در مورد نحوه ایجاد یک کنترل برگه ساده یاد می گیرید که به بازدیدکنندگان اجازه می دهد بین برگه ها کلیک کنند تا محتوای مختلف را تغییر دهند.

نشانه گذاری برای این بسیار ساده است. تب فعال دارای کلاس است active و tab-contents حاوی هر محتوایی که قرار است در هر برگه نمایش داده شود.

کلمات پایانی

درس تصویری را تماشا کنید [1:46:43] ↗

تا زمانی که به آخرین درس دوره می رسید، باید ایده بسیار واضح تری از آنچه می توانید با جاوا اسکریپت به عنوان یک طراح وب انجام دهید و نحوه پیاده سازی آن در پروژه های خود داشته باشید. بهترین شانس!