دوره مجازی جاوااسکریپت (جلسه 15): کدنویسی چند پروژه عملی و کاربردی

- visibility ۲۰ mode_comment

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

مطالب و پروژه های انجام شده در این جلسه عبارتند از :

  • مینی پروژه : انجام اسکرول نرم (smooth scroll) با جاوااسکریپت و تغیر تابع scrollTo پیش فرض
  • مینی پروژه : ایجاد دکمه انتقال به بالا با قابلیت اسکرول نرم و محو/نمایان شدن خودکار
  • مینی پروژه : ایجاد منوی چسبان با جاوااسکریپت به شکل جالب و زیبا
  • مینی پروژه : افزودن شمارنده زمانی (قابلیت محدودست زمان بازی) برای بازی عنکبوت-مگس جلسه 10
  • توضیح در مورد جی کوئری
  • چرا باید از جی کوئری استفاده کرد ؟
  • کجا از جی کوئری و کجا از جاوااسکریپت خالص استفاده کنیم ؟
info توجه

این مطلب یک جلسه از دوره جاوااسکریپت و جی کوئری می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در دوره جاوااسکریپت و جی کوئری

comment دیدگاه کاربران

سلام خسته نباشید استاد آوند فقد یک درخواست
استاد من میخواهم در سایت کد های مورد نظرام را قرار بدم اما استایل جالب نداره باید چکارکنم
آیا افزونه است در این زمینه یا خیر ممنون میشم که راهنمایی کنید

لقمان آوند

سلام
از کتابخانه و افزونه هایی که به syntax highlighter معروف هستند استفاده کنید

mehdi karimi

سلام
استاد یه تمرینی تو جلسه های گذشته داده بودید که اطلاعات مرورگر و سیستم عامل کاربر رو بدست بیاریم ، تمرین آسونی بود فقط به دست آوردن سیستم عامل کاربرو اگه ممکنه تو جلسه آینده یه توضیحی بدید دربارش بدید ، ممنون

لقمان آوند

این کد خوبی هست که اطلاعات مناسبتری رو بهتون میده. می تونید ازش استفاده کنید .

hassani

تمرین دوم یه اشکال داشت که توی همین دکمه اسکرول به بالای سون لرن هم این اشکال هست.اونم اینکه وقتی روی دکمه کلیک میکنیم اگر از روی عکس فلش کنار نریم دکمه محو نمیشه و حتی اگر کنار هم بریم درصورتی که به محل دکمه بریم دکمه باز نمایان میشه و در مورد این دکمه در سون لرن هم وقتی دکمه محو شده اگر به محل دکمه بریم میشه رو دکمه کلیک کرد و اون علامت pointer میاد باید کد زیر رو به fade out اضافه کنیم:


و کد زیر رو هم به fade in :

لقمان آوند

بله این رو هم می تونید اضافه کنید که کد بهتر بشه .
ممنون

hassani

خیلی عالی بود این جلسه , هم مینی پروژه ها هم توضیحات استاد که مسلط و با بیانی واضح وراحت ارایه شده بود انشالله مشکل استاد هرچه زودتر برطرف بشه و ایشون بتونن به کارشون ادامه بدن هر چند تا همین جا هم جا برای تمرین بیشتر برای دانشجوها هست تا روی کدنویسی جاوااسکریپت تسلط بیشتری پیدا کنن.
تدریس و راهنمایی های ایشون اونقدر خوب بود که من ۳ تا از مینی پروژه های این جلسه رو قبل از این جلسه پیاده کرده بودم.
فقط یه سوال:
آقای آوند شما به غیر از فعالیت در سون لرن و دانشگاه به کار دیگه ای هم مشغول هستین مثلا طراحی قالب و…؟
بازم تشکر بابت آموزش کامل و جامع تون. ❓ ❓ ❓

لقمان آوند

سلام و ممنون
کار که زیاد داریم. خود سایت و کارای دانشگاه خیلی زیادن و تقریبا وقتم رو پر کرده . یه کوچولوی 1 ساله هم دارم که اونم کلی وقتمو میگیره اخیرا و مشغول بچه داری هم هستیم !

hassani

❓ ❓ ❓ ❓ ❓ ❓ ❓ تبریک استاد ایشالله تن درست و شاد باشید.

لقمان آوند

ممنون

hassani

راستی بازی که من روش کار کردم خیلی جالب تره ببینید:
http://s6.picofile.com/d/50b7f914-df33-48a7-885d-1d712cb77699/game.rar

لقمان آوند

خیلی خوب شده
معلومه حسابی پیشرفت کردی … خوشحالم از این بابت !

hassani

عجب چیزی شد:
http://s6.picofile.com/d/89a33e2d-9dff-42b7-8258-ebe752f858da/fixedNavMenu.rar

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

لقمان آوند

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

هدایت عباسی

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

وحید صالحی

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

فرهاد

استاد آوند کد این جلسه که برای اسکرول نرم نوشته بودید یه مشکل کوچیک داشت:


مشکل این کد این بود که در صورتی که شرط موجود در بلاک if اول (yPos < scrollY) با هر بار اجرای تابع درست ارزیابی شود برای مثال با فرض برابر بودن متغیر step = 20 هر بار این متغیر در یک منفی ضرب می شود و برنامه نتیجه درستی تولید نخواهد کرد. یعنی مثلا بار اول که تابع احرا می شود اگر step = 20 باشد تبدیل به منفی 20 شده و در بار دوم دوباره به مثبت 20 تغییر پیدا می کند. و این باعث می شود که صفحه اسکرول نشود. و این عمل در هر بار احرای تابع مکررا ادامه پیدا می کند. راه حل درست تر اینکه که به صورت زیر عمل کنیم:

لقمان آوند

حرفتون درسته.
ممنون بابت اصلاح این مورد ..

حمید رضا مصطفی زاده

سلام مینی پروژه های این جلسه رو میشه همه رو با Jquery راحتر پیاده کرد؟

لقمان آوند

بله

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.