آموزش مبانی توسعه وب فرانت‌اند Front End Web Development

در این درس، خواهیم دید که چگونه Sublime Text 3 را بر روی سیستم Mac OSX نصب کنیم.

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

در این درس، نحوه نصب Sublime Text 3 بر روی یک سیستم لینوکسی (اوبونتو) را خواهیم دید.

در این درس خواهیم دید چگونه می‌توانیم نرم‌افزار Sublime Text 3 را از طریق خط فرمان در سیستم‌عامل مک او اس ایکس اجرا کنیم،

در این سخنرانی، ما یاد می‌گیریم که چگونه قابلیت‌های Sublime Text 3 را با استفاده از Package Control گسترش دهیم، که به ما دسترسی به تعداد زیادی از پلاگین‌های شخص ثالث را خواهد داد.

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

در این سخنرانی، شما یاد خواهید گرفت که HTML چیست و چه کاربردی در توسعه برنامه‌های وب مدرن دارد.

در این سخنرانی، نگاهی به ساختار یک صفحه HTML خواهیم انداخت و بررسی خواهیم کرد که چگونه این صفحه در زمان بارگذاری و تجزیه توسط مرورگر ارزیابی می‌شود.

در این سخنرانی، ما یاد خواهیم گرفت که تگ HTML چیست و هدف و ساختار آن چیست.

در این سخنرانی، آنچه را تا کنون دیده‌ایم به کار خواهیم برد و یاد خواهیم گرفت چگونه اولین فایل HTML خود را بنویسیم!

در این سخنرانی، ما یاد خواهیم گرفت که چگونه از سرویس آنلاین رایگان JSBIN برای آزمایش HTML به صورت واقعی و درون مرورگر استفاده کنیم!

در این جلسه، درباره ساختار یک صفحه HTML یاد خواهیم گرفت و نگاهی کلی به دو قسمت اصلی اول، HEAD و BODY خواهیم داشت. منابع خارجی برای این جلسه: عنصر HTML عنصر HEAD عنصر BODY

در این سخنرانی، ما درباره تگ عنوان صفحه، تگ هدری و تگ پاراگراف یاد می‌گیریم. نشست JSBIN برای این سخنرانی: نشست JSBIN منابع خارجی برای این سخنرانی تگ HEAD تگ BODY تگ META تگ TITLE تگ‌های سر عنوان UTF-8 تگ "Element" تگ "P" (پاراگراف)

در این سخنرانی یاد خواهیم گرفت که DIV و SPAN چیستند و چه کاربردی دارند. از طریق این دو، تفاوت بین عنصر بلاک و عنصر اینلاین را خواهیم آموخت. جلسه JSBIN برای این سخنرانی: جلسه JSBIN

در این سخنرانی، ما آنچه را که تاکنون دیده‌ایم مرور خواهیم کرد و بر روی مدل شیء سند مرورگر (Document Object Model) گسترش خواهیم داد.

در این سخنرانی به برخی از تگ‌های معنایی بیشتری که در نسخه فعلی HTML موجود است، نگاهی خواهیم انداخت: Section، Article، Header و Footer. در منابع قابل دانلود، فایل HTML فشرده شده‌ای که برای این سخنرانی استفاده شده است (index.html.zip) را پیدا خواهید کرد. منابع خارجی: تگ Section تگ Article تگ Header تگ Footer

در این سخنرانی به یکی از محبوب‌ترین تگ‌های زبان نشانه‌گذاری HTML در تمام دوران‌ها، یعنی تگ anchor، نگاهی خواهیم انداخت. در منابع قابل دانلود، فایل‌های فشرده‌ای که در این سخنرانی استفاده شده‌اند (anchor-tag.zip) را پیدا خواهید کرد.

در این سخنرانی یاد خواهیم گرفت که چگونه از تگ‌های فرم استفاده کنیم، که به ما این امکان را می‌دهد تا اطلاعات را از کاربر جمع‌آوری کرده و به سرور ارسال کنیم. در منابع قابل دانلود، فایل html فشرده‌ای که برای این سخنرانی استفاده شده است (form.html.zip) را خواهید یافت. منابع خارجی تگ فرم تگ فیلدست تگ ورودی تگ برچسب تگ انتخاب تگ گزینه

در این سخنرانی ادامه خواهیم داد به بررسی نحوه عملکرد فرم‌های HTML و این که چگونه داده‌های فرم هنگام کلیک بر روی دکمه ارسال از مرورگر به سرور منتقل می‌شوند. در منابع قابل دانلود، فایل HTML فشرده شده‌ای که برای این سخنرانی استفاده شده است (form.html.zip) را خواهید یافت.

در این جلسه به تگ لیست HTML نگاهی خواهیم انداخت. منابع خارجی لیست نامرتب UL لیست مرتب OL

در این سخنرانی به بررسی نحوه ارائه اطلاعات جدول‌وار در صفحه خود با استفاده از تگ HTML table خواهیم پرداخت. در منابع قابل دانلود، فایل HTML فشرده‌ای که برای این سخنرانی استفاده شده است (tables.html.zip) را خواهید یافت.

در این درس می‌بینیم که چگونه می‌توانیم تصاویر جالبی به وب‌سایت خود اضافه کنیم! به خاطر داشته باشید که فایل images.zip را در پوشه تجربیات خود، که در آن تمامی فایل‌های HTML ما قرار دارد، استخراج کنید.

در این درس یاد خواهیم گرفت که چگونه دو تگ اضافی HTML5، Nav و Aside، می‌توانند برای افزودن معانی بیشتر به نشانه‌گذاری ما هنگام ایجاد نوارهای ناوبری و محتوای جانبی (مثل نوار کناری) در صفحه‌مان استفاده شوند. در منابع قابل دانلود، فایل HTML فشرده‌ای که برای این درس استفاده شده است (navaside.html.zip) را پیدا خواهید کرد. منابع خارجی تگ Nav تگ Aside بازبینی Aside

در این سخنرانی ما آنچه تاکنون دیده‌ایم را جمع‌بندی خواهیم کرد و یک مینی‌سایت کوچک با یک صفحه اصلی و یک صفحه تماس با ما خواهیم ساخت.

در این سخنرانی خواهیم آموخت CSS چیست و چگونه از آن برای اعمال استایل‌ها و رنگ‌ها به یک سند نشانه‌گذاری استفاده می‌شود

در این سخنرانی به بررسی نحوه اعمال مجموعه‌ای از قوانین CSS (که به آن stylesheet نیز گفته می‌شود) بر روی یک وب‌سایت خواهیم پرداخت. در منابع قابل دانلود، فایل‌های فشرده پروژه‌ای که برای این سخنرانی استفاده شده است (css-1.zip) را پیدا خواهید کرد.

در این سخنرانی به سرعت نگاهی به دسته‌های اصلی ویژگی‌های CSS که با آنها سر و کار داریم خواهیم داشت و واحدهای اندازه‌گیری که برای بیان مقادیر آنها استفاده می‌شود را بررسی خواهیم کرد.

در این جلسه، ویژگی‌های نشانه‌گذاری ID و CLASS معرفی خواهند شد و هدف آن‌ها و تفاوت‌هایشان با یکدیگر توضیح داده خواهد شد. جلسه JSBIN: جلسه JSBIN

در این جلسه، نگاهی به چگونگی هدف‌گیری و استفاده از ویژگی‌های ID و CLASS توسط انتخاب‌گرهای CSS خواهیم داشت. جلسه JSBIN: جلسه JSBIN

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

در این سخنرانی به بررسی انتخاب‌گر ویژگی خواهیم پرداخت و خواهیم دید که چگونه می‌توان از آن برای استایل‌دهی به CSS استفاده کرد. جلسه JSBIN: جلسه JSBIN منابع خارجی MDN - انتخاب‌گر ویژگی انتخاب‌گر ویژگی

در این سخنرانی، ما به معایب انتخابگرهای CSS که تا کنون دیده‌ایم خواهیم پرداخت و اینکه چرا به انتخابگرهای تخصصی‌تری نیاز داریم تا این محدودیت‌ها را برطرف کنیم. در منابع قابل دانلود، شما فایل HTML فشرده‌ای که در این سخنرانی استفاده شده است (relationships-part1.html.zip) را پیدا خواهید کرد.

در این ویدئو به انتخاب‌گرهای ارتباطی خواهیم پرداخت؛ CSS طریقه‌ای دارد برای انتخاب عناصر بر اساس روابط آنها. در مواد قابل دانلود، و فایل HTML فشرده‌ای که برای این سخنرانی استفاده شده است (relationships.html.zip) را پیدا خواهید کرد. آیکون‌ها توسط Freepik از www.flaticon.com ساخته شده و تحت مجوز CC BY 3.0 می‌باشد.

در این درس ما نگاهی به انتخاب‌گرهای کلاس‌های مجازی خواهیم داشت که برای تعیین یک وضعیت خاص برای عنصری که باید انتخاب شود، استفاده می‌شوند. منابع خارجی MDN - کلاس‌های مجازی CanIUse.com JSBIN برای آزمایش با کلاس‌های مجازی: جلسه JSBIN

در این سخنرانی نگاهی خواهیم انداخت به خاصیت position در CSS که نحوه قرارگیری یک عنصر در صفحه وب را تعیین می‌کند. جلسه JSBIN برای موقعیت‌یابی عناصر: جلسه JSBIN جلسه JSBIN برای مثال موقعیت‌یابی: جلسه JSBIN

در این سخنرانی یاد خواهیم گرفت که چگونه مرورگر تعیین می‌کند که کدام قاعده را هنگام تطابق چندین قاعده با یک عنصر اعمال کند. منابع خارجی ویژگی خاص

در این درس خواهیم آموخت که قوانین CSS تحت تأثیر نزدیکی عناصر HTML در محاسبه مقادیر خاصیت قرار نمی‌گیرند.

در این جلسه خواهیم دید که چگونه می‌توان قوانین را نادیده گرفت، فرقی نمی‌کند چقدر خاص باشند. نادیده گرفتن قوانین به این روش معمولاً کاری نیست که بخواهید انجام دهید (و واقعاً باید سعی کنید از انجام آن پرهیز کنید، زیرا این کار نگهداری CSS شما را بسیار دشوار می‌کند) اما این یک ابزار مفید است که در جعبه‌ابزار شما برای مواقع اضطراری که گزینه‌های دیگری در دسترس نیستند، وجود داشته باشد. JSBIN برای این جلسه: جلسه JSBIN

در این جلسه به بررسی ویژگی‌های CSS می‌پردازیم که بر نحوه‌ی نمایش متن در وب‌سایت شما تأثیر می‌گذارد. JSBIN برای این جلسه: جلسه JSBIN

در این سخنرانی، به این خواهیم پرداخت که چگونه ویژگی‌های رنگ می‌توانند در CSS برای تاثیر بر رنگ عناصر مختلف رابط کاربری ما استفاده شوند. JSBIN به عنوان نقطه شروع سخنرانی: جلسه JSBIN JSBIN در پایان سخنرانی: جلسه JSBIN منابع خارجی MDN - مقادیر رنگ MDN - رنگ پس‌زمینه MDN - پیوستگی پس‌زمینه

در این سخنرانی ما در مورد اینکه چگونه ویژگی‌ها توسط نسل‌های یک عنصر به ارث برده می‌شوند، بحث خواهیم کرد. به‌ویژه، خواهیم دید که چگونه ویژگی‌های مرتبط با متن معمولاً به ارث برده می‌شوند، در حالی که ویژگی‌های مربوط به باکس اینطور نیستند. ویژگی‌هایی که می‌توانند به ارث برده شوند عبارتند از: رنگ، فونت، فاصله بین حروف، ارتفاع خط، سبک لیست، تراز متن، فرورفتگی متن، تبدیل متن، دید، فضای خالی و فاصله بین کلمات. ویژگی‌هایی که نمی‌توانند به ارث برده شوند عبارتند از: پس‌زمینه، حاشیه، نمایش، شناور و شفاف، ارتفاع و عرض، حاشیه، ارتفاع و عرض حداقل و حداکثر، خط حاشیه، اضافی، padding، موقعیت، تزئین متن، تراز عمودی و z-index. JSBIN برای این درس: جلسه JSBIN منابع خارجی MDN - مرجع CSS MDN - رنگ CSS MDN - پس‌زمینه CSS

در این درس به برخی از ویژگی‌های موجود که شکل و مرزهای یک عنصر را تعریف می‌کند، نگاهی خواهیم انداخت. در مواد دانلودی، فایل فشرده html مورد استفاده در این درس (boundaries.html.zip) را پیدا خواهید کرد. منابع خارجی MDN - مرز CSS MDN - حاشیه CSS MDN - پرکننده CSS

در این سخنرانی در مورد نحوه محاسبه اندازه عناصر توسط مرورگر صحبت خواهیم کرد، با استفاده از یک مدل جعبه پیش‌فرض (به نام content-box) و چگونگی تغییر آن به نوعی مناسب‌تر (border-box) برای کنترل بهتر اندازه عناصر HTML خود در صفحه. در مطالب قابل دانلود، فایل HTML فشرده‌ای که برای این سخنرانی استفاده شده است (boxmodel.html.zip) را خواهید یافت. منابع خارجی Quirksmode - اندازه‌گیری جعبه

در این سخنرانی به بررسی اینکه چگونه عناصر درون خطی و عناصر سطح بلوک با ویژگی‌های ابعاد کار می‌کنند، خواهیم پرداخت. جلسه JSBIN برای عنصر درون خطی: جلسه JSBIN جلسه JSBIN برای عنصر بلوک: جلسه JSBIN جلسه JSBIN برای تراز: جلسه JSBIN اعتباردهی: آیکون "جدید" توسط http://www.webdesignerdepot.com/ تهیه شده است.

در این درس نگاهی به عناصر شناور و ارتباط آن‌ها با جریان سند خواهیم داشت. JSBIN مورد استفاده در این درس: جلسه JSBIN

در این جلسه ما نگاهی به این خواهیم انداخت که چگونه می‌توانیم مسئله عدم محتوای مناسب را هنگام کار با عناصر شناور حل کنیم (برای توضیح دقیق در مورد این مسئله به جلسه‌ای درباره عناصر شناور مراجعه کنید). جلسات JSBIN استفاده شده برای این جلسه: جلسه JSBIN با تمیز کردن H1 جلسه JSBIN با تمیز کردن عناصر جلسه JSBIN با تمیز کردن Overflow جلسه JSBIN با هک clearfix

در این جلسه، ما شروع به ایجاد ساختار پوشه‌ها و فایل‌های پایه برای پروژه‌مان می‌کنیم و خواهیم دید چگونه فونت‌های سفارشی را به فایل index.html خود اضافه کنیم. در مواد قابل دانلود، فایل‌های فشرده پروژه‌ای که برای این جلسه استفاده شده‌اند را پیدا خواهید کرد (cssws-code-1.zip) منابع خارجی ویکی‌پدیا - فونت‌های ایمن وب

در این سخنرانی کارگاه، توجه خود را بر سرصفحه صفحه متمرکز خواهیم کرد. در مواد قابل دانلود، فایل‌های فشرده پروژه‌ای که برای این سخنرانی استفاده شده‌است (cssws-code-2.zip) را پیدا خواهید کرد. منابع خارجی استفاده از گرید در طراحی وب بازنشانی CSS اریک مایر نظرات اریک مایر در مورد دلایل بازنشانی CSS

در این کارگاه، به ادامه و اتمام کار بر روی هدر صفحه‌مان خواهیم پرداخت. در منابع قابل دانلود، فایل‌های پروژه فشرده استفاده‌شده برای این سخنرانی را (cssws-code-3.zip) خواهید یافت. منابع خارجی کد Clearfix استفاده‌شده در سخنرانی تبدیل پیکسل‌ها به نقطه‌ها

در این کارگاه آموزشی به قسمت پایینی صفحه وب خود خواهیم پرداخت. در مواد دانلود شدنی می‌توانید پیدا کنید: فایل pattern.png استفاده شده برای پس‌زمینه بالای فوتر فایل‌های پروژه فشرده شده مورد استفاده در این سخنرانی (cssws-code-4.zip)

در این جلسه کارگاهی به تصویر اصلی صفحه، یا همان تصویر "قهرمان" ما تمرکز خواهیم کرد. در مواد قابل دانلود، فایل‌های پروژه فشرده‌شده‌ای را که برای این جلسه استفاده شده‌اند (cssws-code-5.zip) پیدا خواهید کرد. منابع خارجی لورم پیکسل: تولیدکننده تصاویر تصادفی!

در این کارگاه سخنرانی، بر روی ادعاهای بازاریابی و چیدمان ستون‌های آن‌ها تمرکز خواهیم کرد. در مواد قابل دانلود، فایل‌های پروژه فشرده شده‌ای که برای این سخنرانی استفاده شده است (cssws-code-6.zip) را پیدا خواهید کرد.

در این کارگاه آموزشی، تمرکز خود را بر روی بخش پورتفولیو معطوف می‌کنیم و کار کلی خود بر روی وب‌سایت را به پایان می‌رسانیم. در مواد قابل دانلود، فایل‌های فشرده پروژه‌ای که برای این سخنرانی استفاده شده است (csws-code-7.zip) را پیدا خواهید کرد.

در این کارگاه، ما چندین لمس نهایی به صفحه اصلی کامل‌مان اضافه خواهیم کرد تا آن را بیشتر بهینه‌سازی شده برای موتورهای جستجو و سازگار با مرورگرهای مختلف کنیم. در مواد قابل دانلود، فایل‌های فشرده پروژه‌ای که برای این جلسه استفاده شده (cssws-code-8.zip) را خواهید یافت.

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

در این کلاس ما نوشتن برخی از جاوااسکریپت‌ها را شروع خواهیم کرد! در مواد قابل دانلود، فایل‌های پروژه فشرده شده‌ای که برای این کلاس استفاده شده‌اند (js-code-1.zip) را پیدا خواهید کرد. منابع خارجی MDN - تگ script

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

در این سخنرانی یاد خواهیم گرفت که چگونه متغیرهای جدیدی را از طریق تعریف متغیر ایجاد کنیم و تفاوت بین یک ارزش undefined و یک ارزش null چیست. منابع خارجی تعریف: تا مرحله 11 بخوانید.

در این درس، نگاهی به انواع داده متغیر اصلی که در جاوا اسکریپت به آن‌ها دسترسی داریم، خواهیم انداخت. منابع خارجی MDN - عملگرهای منطقی MDN - مقادیر نوع داده بنیادی MDN - کاراکترهای فرار رشته

در این سخنرانی خواهیم آموخت که نوع متغیرها در جاوا اسکریپت به طور طبیعی پویا است، در مقایسه با سایر زبان‌های برنامه‌نویسی.

در این سخنرانی به بررسی "توابع" خواهیم پرداخت، واحد قابل استفاده مجدد کد در جاوااسکریپت.

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

در این سخنرانی به تفاوت بین یک کتابخانه جاوا اسکریپت و یک API نگاهی خواهیم انداخت. منابع خارجی ویکی‌پدیا - کتابخانه ویکی‌پدیا - رابط برنامه‌نویسی کاربردی

در این سخنرانی کوتاه نگاهی سریع به بیانیه‌ی بازگشت خواهیم داشت. جلسه JSBIN برای این سخنرانی: جلسه JSBIN منابع خارجی MDN - return (فقط خلاصه، نحو، توضیحات)

در این lecture، به محدوده متغیرها نگاه خواهیم کرد که مشخص می‌کند کد شما هنگام اجرا چه چیزهایی را می‌تواند "ببیند". جلسه JSBIN برای این lecture: جلسه JSBIN

در این جلسه درباره این که اشیاء جاوا اسکریپت چیستند و چگونه می‌توانیم آنها را ایجاد کنیم صحبت خواهیم کرد. جلسه JSBIN برای این آموزش: جلسه JSBIN منابع خارجی MDN - کار با اشیاء

در این جلسه، نگاهی دقیق‌تر به اشیاء خواهیم داشت و خواهیم دید که چگونه آن‌ها بر توابع تأثیر می‌گذارند زمانی که از طریق یک شیء فراخوانی می‌شوند. جلسه JSBIN برای این جلسه: جلسه JSBIN منابع خارجی W3School - اشیاء

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

در این درس، ما یک روش دیگر برای ایجاد یک شیء یاد خواهیم گرفت، علاوه بر تکنیک شیء ادبی که تا به حال آموخته‌ایم. جلسه JSBIN برای این درس: جلسه JSBIN

در این سخنرانی به ویژگی "پروتوتیپ" که درون یک تابع به آن دسترسی داریم نگاهی می‌کنیم. جلسه JSBIN برای این سخنرانی: جلسه JSBIN

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

در این ویدئو دوباره درباره رشته‌ها صحبت خواهیم کرد، اما از یک دیدگاه جدید به آنها نگاه خواهیم کرد و حقایق اضافی درباره آنها را کشف خواهیم کرد. جلسه JSBIN برای این درس: جلسه JSBIN منابع خارجی MDN - رشته‌ها

در این ویدیو نگاهی به Callback ها خواهیم داشت، روشی برای استفاده از توابع به گونه‌ای که بعداً "صدا زده شوند". جلسه JSBIN برای قسمت اول سخنرانی: جلسه JSBIN جلسه JSBIN که از ۲:۵۲ در سخنرانی استفاده شده است: جلسه JSBIN

در این سخنرانی به آرایه‌ها نگاه خواهیم کرد و نحوه بررسی محتوای آن‌ها را یاد خواهیم گرفت. جلسه JSBIN برای این سخنرانی: جلسه JSBIN منابع خارجی: MDN - آرایه

در این ویدیو به بررسی عبارات شرطی خواهیم پرداخت. عبارت شرطی فقط یک راه برای بررسی یک شرط و عمل بر روی آن است. جلسه JSBIN برای این درس: جلسه JSBIN منابع خارجی: MDN - عملگرهای مقایسه MDN - کنسول

در این سخنرانی یاد خواهیم گرفت که چگونه از روش دیگری به نام "تکرار صریح" بر روی ویژگی‌های یک آرایه تکرار کنیم جلسه JSBIN برای این سخنرانی: جلسه JSBIN

در این درس، نگاهی بسیار سریع به اشیاء و توابعی که زمان اجرای جاوااسکریپت در هنگام کار در محیط مرورگر به ما ارائه می‌دهد، خواهیم انداخت. منابع خارجی MDN - DOM MDN - DOM : مقدمه MDN - وب API MDN - API : سند MDN - document.querySelector MDN - API : HTMLImageElement MDN - API : HTMLElement MDN - API : Element

در این جلسه ما با DOM آزمایش خواهیم کرد و با استفاده از مجموعه غنی از اشیاء و توابع موجود در DOM، عناصر HTML جدیدی ایجاد خواهیم کرد. جلسه JSBIN برای این سخنرانی: جلسه JSBIN منابع خارجی MDN - API : Document MDN - API: document.createElement MDN - API : Text MDN - API : Node MDN - API : Node.appendChild

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

در این جلسه تلاش خواهیم کرد آنچه را که در مورد DOM و رویدادهای DOM آموخته‌ایم، در یک تمرین عملی به کار ببریم. جلسه JSBIN برای این درس: جلسه JSBIN مراجع خارجی MDN - API : NodeList

در این جلسه ما ادامه خواهیم داد و تمرین خود را در مدیریت رویدادهای DOM به پایان خواهیم رساند. جلسه JSBIN برای این جلسه: جلسه JSBIN منابع خارجی MDN - وب API MDN - API : EventTarget MDN - API : HTMLAnchorElement MDN - API : HTMLElement MDN - API : Element MDN - API : Node MDN - API : EventTarget ویکی‌پدیا - رویدادهای DOM MDN - API : MouseEvent

با تکمیل تمرین DOM، دوباره به کد نگاه می‌کنیم تا ببینیم آیا می‌توانیم آن را بیشتر بهبود دهیم. نشست JSBIN برای این درس: نشست JSBIN

در این سخنرانی، به بررسی jQuery خواهیم پرداخت، که احتمالاً محبوب‌ترین کتابخانه Javascript در اکوسیستم وب است. منابع خارجی صفحه اصلی jQuery CDNJS - jQuery

در این سخنرانی به این خواهیم پرداخت که چگونه jQuery می‌تواند گوش دادن و واکنش به رویدادهای مرورگر را ساده‌تر کند. جلسه JSBIN برای این و سخنرانی بعدی: جلسه JSBIN منابع خارجی API : on API : mouseover API : mouseout API: jQuery (یا $) W3School - زنجیره‌سازی در jQuery

در این درس، تمرین خود را تکمیل خواهیم کرد و از jQuery برای ساده‌سازی دستکاری DOM استفاده می‌کنیم. جلسه JSBIN برای درس قبلی و این درس: جلسه JSBIN منابع خارجی API : addClass API : removeClass API : کلاس ویژگی API: jQuery (یا $) W3School - زنجیره‌سازی در jQuery

یک مرور سریع بر آنچه تا کنون با jQuery دیده‌ایم.

در این جلسه خواهیم نگاهی به این بیندازیم که HTTP، REST و JSON چه اشتراکاتی دارند. منابع خارجی ویکی‌پدیا - REST تعریف دیگری از REST ویکی‌پدیا - JSON صفحه اصلی استاندارد JSON (ECMA-404)

در این سخنرانی ما Ajax را معرفی می‌کنیم و خواهیم دید که چگونه jQuery کاری را که در غیر این صورت نیاز به تلاش زیادی دارد، ساده می‌کند. منابع خارجی W3School - رویداد onreadystatechange API jQuery - Ajax

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

در این به‌روزرسانی ویدیویی کوتاه، ما در مورد چگونگی اجرای کد Ajax در Chrome بحث می‌کنیم، زیرا به‌روزترین تغییرات در سیاست امنیتی Chrome، از اجرای کد Ajax در اسکریپت‌هایی که به‌صورت مستقیم از سیستم فایل بارگیری می‌شوند، جلوگیری می‌کند (این مشکل زمانی رخ می‌دهد که ما یک فایل html را به‌صورت مستقیم با مرورگر خود از روی کامپیوتر باز می‌کنیم و از فرمت ویژه URL "file:///<مسیر در کامپیوتر ما>" استفاده می‌کنیم). به‌تازگی Chrome پشتیبانی از کد Ajax در فایل‌های بارگیری‌شده به این روش را متوقف کرده است و راه‌حلی که در درس 95 نشان دادیم دیگر کار نمی‌کند. برای دور زدن این محدودیت، دو گزینه داریم: 1) از Firefox استفاده کنید که مجازتر است و اجازه می‌دهد فایل‌های محلی درخواست‌های Ajax انجام دهند 2) به استفاده از Chrome ادامه دهید، اما از طریق یک سرور وب مناسب، برنامه‌ای که بر روی دستگاه ما اجرا خواهد شد به منظور ارائه فایل‌های html ما به مرورگری که از طریق شبکه محلی به آن متصل است.در ویدیو، به شما نشان می‌دهم که چگونه گزینه دوم را پیاده‌سازی کنید، اما به یاد داشته باشید که گزینه 1 همچنان در دسترس است اگر که در نصب پایتون و راه‌اندازی یک سرور وب محلی احساس راحتی نمی‌کنید. همچنین به https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally برای بحثی دقیق‌تر درباره مشکل سیاست امنیتی Chrome و راه‌حلی که نشان داده شده، مراجعه کنید.

در این جلسه ما آنچه را که تا کنون درباره jQuery و Ajax آموخته‌ایم عملی خواهیم کرد و یک سیستم منوی مبتنی بر داده خواهیم ساخت. ما با برداشتن کد چند ویدئو پیش برای منوی افقی خود که دارای پنل‌های پوششی است، شروع خواهیم کرد. ما این کد را تغییر خواهیم داد تا منو و پنل اطلاعات آن کاملاً پویا شوند، با الهام از engadget.com در تب مواد دانلودی، فایل‌های پروژه فشرده شده‌ای که برای این جلسه استفاده شده‌اند (jquery-ws-1.zip) را پیدا خواهید کرد.

بیایید کار بر روی منوی تعاملی خود را با استفاده از Ajax و jQuery ادامه دهیم. در برگه مواد دانلودی، فایل‌های فشرده پروژه‌ایی که برای این درس استفاده شده را پیدا خواهید کرد (jquery-ws-2.zip)

بیایید کارگاه خود را به پایان برسانیم و پروژه‌مان را کامل کنیم! در تب مواد قابل دانلود، فایل‌های فشرده پروژه استفاده شده برای این جلسه (jquery-ws-3.zip) را پیدا خواهید کرد.

در این ویدیو نگاهی به یکی از محبوب‌ترین فریم‌ورک‌های فرانت‌اند در بازار، Backbone.js می‌اندازیم. منابع خارجی Wikipedia - Backbone.js Wikipedia - MVC Wikipedia - Underscore.js

در این سخنرانی به مدل‌های بکه‌بن خواهیم پرداخت. مدل‌های بکه‌بن برای نمایش داده‌هایی که برنامه شما با آن‌ها کار می‌کند، به همراه منطقی که در اطراف آن داده‌ها وجود دارد و به شما اجازه می‌دهد اطلاعات را از یک سرور بازیابی و ذخیره کنید، استفاده می‌شود. نشست JSBIN برای این سخنرانی: نشست JSBIN منابع خارجی بکه‌بن - مدل

در این درس ما آنچه را که در مورد مدل‌های Backbone دیدیم با یک مرور سریع تثبیت خواهیم کرد. جلسه JSBIN برای این سخنرانی: جلسه JSBIN

در این ویدیو به Backbone.Collections نگاهی می‌اندازیم. یک Backbone.Collection یک wrapper (محافظ) برای مجموعه‌ای از Backbone.Models است؛ جلسه JSBIN برای این سخنرانی: جلسه JSBIN منابع خارجی مجموعه Backbone

در این سخنرانی به بررسی Backbone Views خواهیم پرداخت که به ما اجازه می‌دهند نمای بصری برای مدل‌های خود فراهم کنیم. جلسه JSBIN برای این سخنرانی: جلسه JSBIN منابع خارجی ویکی‌پدیا - جدایی نگرش‌ها Backbone View Backbone Events

در این سخنرانی خواهیم دید که چگونه یک نما (view) می‌تواند به رویدادهای ایجاد شده توسط رابط کاربری (صفحه وب) واکنش نشان دهد. جلسه JSBIN به عنوان نقطه شروع این سخنرانی: جلسه JSBIN جلسه JSBIN برای این سخنرانی: جلسه JSBIN

در این جلسه نگاهی به Backbone.Router خواهیم انداخت. در منابع قابل دانلود، فایل‌های فشرده پروژه‌ای که در این جلسه استفاده شده است را پیدا خواهید کرد: (bb-code-router.zip)

در این سخنرانی به پروژه بعدی Backbone خود، فروشگاه اپلیکیشن Foogle نگاهی خواهیم انداخت. ایده این است که یک برنامه وب تک صفحه‌ای غنی و ساده با استفاده از تمام فناوری‌هایی که تاکنون مشاهده کرده‌ایم پیاده‌سازی کنیم. برنامه ما به طور کلی از روی فروشگاه کتاب Google Play مدل‌سازی خواهد شد. در منابع قابل دانلود، فایل‌های JSON API مورد نیاز را خواهید یافت (api.zip) همچنین در منابع قابل دانلود، فایل‌های پروژه فشرده کامل این سخنرانی را پیدا خواهید کرد (bb-ws-1.zip)

در این سخنرانی ما شروع به ایجاد نشانه‌گذاری برای هدر برنامه وب تک صفحه‌ای خود خواهیم کرد. در منابع قابل دانلود، فایل‌های پروژه فشرده شده مربوط به این سخنرانی را (bb-ws-2.zip) پیدا خواهید کرد.

در این سخنرانی به کار روی نشانه‌گذاری برنامه‌مان ادامه می‌دهیم و به نوار کناری با ناوبری دسته‌بندی می‌پردازیم. در منابع قابل دانلود، فایل‌های فشرده پروژه برای این سخنرانی (bb-ws-3.zip) را خواهید یافت.

در این درس به کار بر روی نشانه‌گذاری برنامه‌مان ادامه می‌دهیم و به منطقه محتوایی برای لیست کتاب‌ها در یک دسته‌بندی می‌پردازیم. در منابع قابل دانلود، فایل‌های فشرده پروژه برای این درس (bb-ws-4.zip) را پیدا خواهید کرد

در این سخنرانی به کار بر روی نشانه‌گذاری برنامه‌مان ادامه می‌دهیم و به منطقه محتوا برای جزئیات یک کتاب واحد می‌پردازیم. در منابع قابل دانلود، شما فایل‌های پروژه فشرده مربوط به این سخنرانی را پیدا خواهید کرد (bb-ws-5.zip)

در این سخنرانی ما به سمت جانب جاوااسکریپت می‌رویم و ابتدا کدنویسی Router را شروع می‌کنیم. در منابع قابل دانلود، فایل‌های فشرده پروژه برای این سخنرانی (bb-ws-6.zip) را خواهید یافت.

در این سخنرانی بر روی کدنویسی بخش فهرست کتاب‌ها تمرکز خواهیم کرد. در منابع قابل دانلود، فایل‌های فشرده پروژه برای این سخنرانی (bb-ws-7.zip) را پیدا خواهید کرد.

در این درس به کار بر روی بخش فهرست کتاب‌ها ادامه خواهیم داد. در منابع دانلودی، فایل‌های فشرده پروژه برای این درس (bb-ws-8.zip) را پیدا خواهید کرد.

در این درس، ما به اتمام کار با بخش فهرست کتاب‌ها خواهیم پرداخت. در منابع قابل دانلود، شما فایل‌های فشرده پروژه این درس را پیدا خواهید کرد (bb-ws-9.zip)

در این سخنرانی تمرکز ما بر روی پنل جزئیات کتاب خواهد بود. در منابع قابل دانلود، فایل‌های پروژه فشرده شده برای این سخنرانی (bb-ws-10.zip) را خواهید یافت.

در این سخنرانی خواهیم دید که چگونه با اشکالات غیرمنتظره در کد خود برخورد کنیم و چگونه آن‌ها را عیب‌یابی و رفع کنیم. در منابع قابل دانلود، فایل‌های پروژه فشرده شده برای این سخنرانی (bb-ws-11.zip) را پیدا خواهید کرد.

در این سخنرانی خواهیم دید که چگونه می‌توانیم کد برنامه وب Foogle play خود را با استفاده از قالب‌بندی Underscore بیشتر بهبود دهیم. جلسه JSBIN برای سخنرانی: جلسه JSBIN در منابع دانلودی، فایل‌های فشرده پروژه برای این سخنرانی (bb-ws-12.zip) را پیدا خواهید کرد.

در این ویدیو به بررسی طراحی وب واکنش‌گرا خواهیم پرداخت و نحوه استفاده از آن در توسعه وب فرانت‌اند برای ایجاد تجربیات چند دستگاهی را بررسی خواهیم کرد. منابع خارجی ویکی‌پدیا - طراحی وب واکنش‌گرا MDN - کوئری‌های رسانه‌ای

از این سخنرانی ما شروع به بازطراحی برنامه وب Foogleplay خود خواهیم کرد تا آن را کاملاً واکنش‌گرا کنیم. در منابع قابل دانلود دو فایل فشرده پیدا خواهید کرد: پروژه کامل Foogle play که تا کنون کد نویسی کرده‌ایم، به عنوان نقطه شروع برای این درس (pre-rwd-0.zip) اگر شما به کدنویسی برنامه تا این نقطه نپرداختید. فایل‌های پروژه فشرده استفاده شده در این سخنرانی: (rwd-1.zip)

در این سخنرانی، ما پنل دسته‌بندی‌ها را بازنویسی خواهیم کرد تا به دستگاه‌های کوچک و همچنین صفحه‌نمایش‌های بزرگ توجه شود. در منابع قابل دانلود، شما فایل‌های پروژه فشرده شده‌ای را که در این سخنرانی استفاده شده است (rwd-2.zip) پیدا خواهید کرد.

در این آخرین درس، پنل جزئیات کتاب را به صورت واکنش‌گرا طراحی می‌کنیم تا دستگاه‌های دارای صفحه نمایش کوچک را در نظر بگیرد. در منابع قابل دانلود، فایل‌های پروژه فشرده شده‌ای که در این درس استفاده شده است (rwd-3.zip) را پیدا خواهید کرد.

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

در این درس، خواهیم دید که چگونه پروژه خود را برای تست واحد با Mocha و کتابخانه‌های مرتبطش نصب و راه‌اندازی کنیم. Mocha یک فریم‌ورک تست است که می‌تواند در مرورگر استفاده شود، اما همچنین می‌تواند خارج از مرورگر برای تست کد جاوااسکریپت سمت سرور نوشته شده با استفاده از Node.js، یک فناوری جاوااسکریپت سمت سرور، استفاده شود. در منابع قابل دانلود، ۲ آرشیو فشرده پیدا خواهید کرد: پروژه کامل Foogle play، برای استفاده به‌عنوان نقطه شروع برای این بخش (pre-ut-0.zip) اگر تا این لحظه کدنویسی برنامه را دنبال نکرده‌اید. فایل‌های پروژه‌ای که در این سخنرانی استفاده شده‌اند (ut-1.zip)

در این سخنرانی، ما نوشتن تست‌های واحد برای مدل‌های خود، شامل مدل کتاب و مجموعه کتاب‌ها را آغاز خواهیم کرد و اولین مجموعه تست موکای خود را در مرورگر اجرا خواهیم کرد! در منابع قابل دانلود، فایل‌های فشرده پروژه‌ای که در این سخنرانی استفاده شده است (ut-2.zip) را پیدا خواهید کرد.

در این جلسه ما نوشتن تست‌های واحد برای ویوهای خود را شروع خواهیم کرد و از ویو پیچیده BookDetail به عنوان محیط آزمایشی خود استفاده می‌کنیم. در منابع قابل دانلود، فایل‌های پروژه فشرده‌ شده‌ای که در این جلسه استفاده شده‌اند (ut-3-init.zip) را پیدا خواهید کرد.

در این سخنرانی، ما آزمایش دیدگاه BookDetail خود را به پایان می‌رسانیم و دوباره بررسی می‌کنیم که فرآیند رندرینگ طبق انتظار ما کار می‌کند. در طول این مسیر، یک باگ غیرمنتظره را که به خاطر آزمون واحد ما فاش شده است، پیدا خواهیم کرد! در منابع قابل دانلود، فایل‌های پروژه فشرده شده‌ای را که در این سخنرانی استفاده شده‌اند (ut-3-render.zip) پیدا خواهید کرد.

در این سخنرانی، ما شروع به نوشتن تست‌های واحد برای روتر خود خواهیم کرد و خواهیم دید که چگونه از Sinon.js برای قطع کردن رویدادهای مسیریابی استفاده کنیم. در منابع قابل دانلود، فایل‌های پروژه فشرده شده‌ که در این سخنرانی استفاده شده است (ut-4.zip) را پیدا خواهید کرد.

در این سخنرانی چند فکر نهایی و یک سورپرایز کوچک در پایان ویدیو به شما تقدیم می‌کنم :p