آموزش برنامه نویسی فرانت اند Frond end

توسعه Front-End که به عنوان توسعه سمت کلاینت نیز شناخته می‌شود، عمل تولید JS ، کتابخانه ها و چهارچوب های مرتبط با آن مانند React، Angular و Vue برای یک وب‌سایت یا برنامه وب است، تا کاربر بتواند مستقیم آنها را ببیند و با آنها ارتباط برقرار کند. چالش مرتبط با توسعه فرانت اند این است که ابزارها و تکنیک های مورد استفاده برای ایجاد قسمت جلویی یک وب سایت دائم تغییر می کنند و بنابراین توسعه دهنده باید دائماً از نحوه توسعه این زمینه آگاه باشد. هدف از طراحی سایت این است که اطمینان حاصل شود وقتی کاربران سایت را باز می کنند، اطلاعات را در قالبی می بینند که به راحتی قابل خواندن و مرتبط باشد. این امر با این واقعیت پیچیده تر می شود که کاربران اکنون از دستگاه های مختلف با اندازه و وضوح صفحه متفاوت استفاده می کنند و بنابراین طراح را مجبور می کند که این جنبه ها را هنگام طراحی سایت در نظر بگیرد. آنها باید اطمینان حاصل کنند که سایتشان در مرورگرهای مختلف ، سیستم‌عامل‌های مختلف و دستگاه‌های مختلف به درستی نمایش داده می‌شود، که نیاز به برنامه‌ریزی دقیق از سوی توسعه‌دهنده دارد.

دانشجویان پس از سپری کردن این دوره توانایی ایجاد صفحات با تکنولوژی های به روز در این حوزه را خواهند داشت.

نام دوره :

• دوره برنامه نویسی فرانت

پیش نیاز:

برنامه نویسی مقدماتی

مخاطبان دوره :

• علاقمندان به برنامه نویسی فرانت و ورود به دنیای برنامه نویسی وب

مدت دوره: 80 ساعت

سر فصل های دوره :

SASS

• آشنایی با زبان اسکریپت نویسی Sass
  • مقدمه
  • مفهوم پیش پردازنده
  • تفاوت Sass و Scss
• نصب و اجرا
  • نصب در ویندوز (Windows)
  • نصب در لینوکس (Linux)
  • ایجاد اولین پروژه
  • تنظیم Watch
• دستورهای Sass
  • کامنت ها
  • متغیرها
  • انواع داده
  • عملگرهای ریاضیاتی
  • عملگرهای تساوی
  • عملگرهای مقایسه
  • عملگرهای منطقی
  • عملگر رنگ ها
  • عملگر & (Ampersand)
  • درج متغیر در رشته ها
• : Partials & Imports
  • Partials
  • Imports
•  Mixin و وراثت
  • معرفی Mixin
  • Mixin با پارامتر ورودی
  • وراثت
  • Placeholder Selectors
  • تفاوت Mixin با Extend
• دستورهای تو در تو
  • دستورهای تو در تو
  • ویژگی های تو در تو
• مباحث تکمیلی
  • لیست ها
  • تابع nth
  • Maps
  • At – root
• توابع
  • معرفی توابع
  • توابع از پیش تعریف شده
  • تعریف تابع
  • استفاده از توابع
• شرط ها و حلقه ها
  • if و else if, else
  • حلقه for
  • حلقه each
  • حلقه while
• فریم ورک ها
  • Bourbon
  • Bourbon Neat
  • Bourbon – Bitters
  • Compass
• ابزارها و تکنیک ها
  • Scout – App
  • تبدیل CSS به Sass

JavaScript

• مقدمات جاوا اسکریپت
  • معرفی جاوا اسکریپت
  • توانایی های جاوا اسکریپت
  • ساختار برنامه در جاوا اسکریپت
  • معرفی شی   Document
  • معرفی خصوصیت InnerHTML
  • رویدادها (Events) و توابع (Functions)
• معرفی انواع داده (Data Type) و عملگرها در جاوا اسکریپت
  • نوع داده رشته ای (String)
  • نوع داده عددی (Number)
  • نوع داده منطقی (Boolean)
  • نوع داده آرایه (Array)
  • نوع داده شی (Object)
  • عملگرهای جاوا اسکریپت (حسابی، انتسابی، مقایسه ای و منطقی)
  • عملگر سه حالته یا شرطی (Conditional Operator)
• پنجره های Popup، ساختارهای کنترلی
  • پنجره Alert
  • پنجره Confirm
  • پنجره Prompt
  • ساختار کنترلی if
  • ساختار کنترلی Switch
• تعریف توابع
• حلقه ها (Loops)
  • حلقه for
  • حلقه while
  • حلقه do-while
  • حلقه for-in
• رویدادها (Events)
  • رویدادهای ماوس
  • رویدادهای صفحه کلید

• درخت مدل شی گرای سند (Document Object Model)
  • تغییر محتوا از طریق DOM
  • تغییر Attributeها از طریق DOM
  • تغییر Style از طریق DOM
  • تعیین Eventها از طریق DOM
  • روابط بین گره ها در درخت DOM
  • مفهوم childNodes و Siblings و parentNode
  • پیمایش درخت DOM
• تغییر درخت DOM
  • ایجاد Node با متدهای createElement و createTextNode
  • افزودن Node با متدهای appendChild و insertBefore و replaceChild
  • حذف Node با removeChild
• شی Date یا تاریخ
  • سازنده های مختلف کلاس Date
  • متدهای مختلف کلاس Date
• اشیا جاوا اسکریپت – شی آرایه (Array)
  • خصوصیت Length
  • متدهای Array
• اشیا جاوا اسکریپت – کلاس Math
  • خصوصیات Math
  • متدهای Math
    • Round
    • Random
    • Floor
    • Max
    • Min
    • Pow
    • Abs

و…

React

• درس یکم: آشنایی با کتابخانه ReactJS
  • مروری بر مقایسه آمارهای برنامه‌نویسی Front-End و Back-End
  • ReactJS و ضرورت یادگیری آن
  • کاربردهای آن در تولید نرم‌افزار
• درس دوم: مروری بر مفاهیم کاربردی JavaScript و ES6
  • مروری بر Arrow Function‌ها
  • مروری بر Template Literalها
  • مروری بر Destructuring
  • استفاده از Ternary Operator
  • Import / Export ماژول‌ها
  • استفاده از map, filter و reduce
• درس سوم: نصب و راه‌اندازی ابزارهای لازم در ویندوز
  • نصب Node.js و Yarn
  • تفاوت npm و Yarn
  • نصب یک ادیتور مانند VS Code
  • نصب یک مرورگر مانند Chrome
• درس چهارم: ساخت اولین پروژه ReactJS
  • نصب کتابخانه ReactJS
  • آشنایی با ساختار پوشه‌بندی پروژه React
  • آشنایی با JSX و کاربرد آن
  • آشنایی با کامپایلر Babel
  • مفهوم Virtual DOM
  • React Dev Tools
• درس پنجم: معرفی Componentها در React
  • کامپوننت‌های مبتنی بر کلاس یا Stateful
  • آشنایی با Props
  • آشنایی با State
  • استفاده از this
  • آشنایی با متدهای Lifecycle
    • componentWillMount
    • componentDidMount
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • componentDidUpdate
    • componentWillUnmount
    • render
  • کامپوننت‌های تابعی یا Stateless
• درس ششم: استفاده از Componentها در React
  • Conditional Rendering چیست؟
  • مدیریت رویدادها
  • استفاده از CSS Style در React
    • Inline styling
    • اسامی Camel case برای ویژگی‌ها
    • JavaScript Object
    • CSS Stylesheet
    • ماژول CSS و import کردن آن
  • فرم‌ها
  • لیست‌ها و کلیدها
  • استفاده از Routing (مسیریابی) در پروژه
• درس هفتم: معرفی Context API
  • مقدمه و معرفی اولیه
  • Context API 2 چیست؟
  • اضافه کردن Context و Provider
  • نحوه دسترسی به Context
  • به‌روزرسانی داده‌های Context
  • ایجاد Context‌های چندگانه
  • استفاده از Context‌های چندگانه
• درس هشتم: معرفی Hooks
  • آشنایی با Hooks
  • آشنایی با useState
  • استفاده از useState در فرم‌ها
  • آشنایی با useEffect
• درس نهم: ترکیب Hooks و Context
  • استفاده از Hooks همراه با Context
  • Context‌های چندگانه با استفاده از Hooks
  • ساخت Context با کامپوننت‌های تابعی
  • مفهوم Flux
• درس دهم: ایجاد یک پروژه لیست کتاب‌های کتابخانه
  • لیست کتاب‌های کتابخانه – بخش یکم
  • لیست کتاب‌های کتابخانه – بخش دوم
  • لیست کتاب‌های کتابخانه – بخش سوم
  • آشنایی با مفاهیم Reducers, Actions و State
  • اضافه کردن یک Reducer
  • اضافه کردن localStorage