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

دسته بندی: جاوا اسکریپت
زمان مطالعه: ۱ دقیقه
۱۷ تیر ۱۳۹۴

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

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

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

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

ثبت نام در آموزش javascript

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

سهیل بشردوست

درود استاد
من قبل از دیدن حل تمرین(بنا به توصیه خودتون) برای اسکرول نرم خودم کد زیر رو نوشتم؛ با مقدارهای یکسان برای پارامتر پرش عمودی scrollBy و زمان setInterval در هر دو روش یعنی از طریق کد زیر و فراخوانی تابع در خودش(روش شما) دو نتیجه متفاوت حاصل میشه؛ با اجرا از طریق فراخوان تابع شکسته تر و سریعتر اسکرول رخ میده و با کد زیر آرامتر و یکارچه تر! دلیلش رو فکر می کنم تکرار سریع حلقه ایجاد شده توسط فراخوان تابع در خودش میتونه باشه که اگر بخوایم اونرو از بین ببریم فکر می کنم با استفاده از setTimeOut باید تاخیر ایجاد کرد.

function smoothView(ziel){
    var schritt = 3;
    if (ziel){
        var ring = setInterval(function() {
            window.scrollBy(0,schritt);
            if (window.scrollY >= ziel){
                clearInterval(ring);
            }
        }, 1);
    } else {
        ziel = 0;
        var ring = setInterval(function() {
            window.scrollBy(0,-schritt);
            if (window.scrollY <= ziel){
                clearInterval(ring);
            }
        }, 1);
    }
};
hashem

سلام جناب آوند وقتتون بخیر
من میخوام یک navmenu که در موقع اسکرول کردن به صورت ثابت بالای صفحه فیکس میشه رو ایجاد کنم برای همین جدا از کدهای html , css که برای اجرای یک navmenu مورد نیاز است یک کلاس css به نام sticky. ایجاد کردم که آن را در کدهای جاوااسکریپتم به تگ navmenu در صورت داشتن شرایطی اضافه می کنم که خصوصیات آن به صورت زیر است :
position : fixed و width : 100% و top :0
حال کدهای javascript نیز به این صورت می باشد :

(کدهای javascript)

این کد به درستی اجرا می شود ولی سوال بنده این است اگر به جای تعریف متغیر yTopNav مقدار آن را (nav.offsetTop) مستقیما وارد شرط if کنیم یعنی
if ( window.pageYOffset >nav.offsetTop)
دیگر کد به درستی حالت قبل اجرا نمی شود و موقعی که اسکرول به پایین کرده و دوباره آن را به موقعیت اولیه بر می گردانیم navmenu وقتی شرط else را قبول می کند که موقعیت اسکرول به صفر برسد نه موقعی که موقعیت اسکرول کوچکتر شود از موقعیت navmenu از بالا و اسن باعث می شود که به یکباره namenu از موقعیت صفر برسد به موقعیت اولیه ،سوال بنده این است مگر چه فرقی دارد در این دوحالت ؟
خیلی ممنون میشم در صورت پاسخگویی ;

<script>
    window.addEventListener(‘scroll’ , myfanction);
    var nav = document.getElementById(‘navmenu’);
    var sticky = nav.offsetTop;
    function myfanction() {

        if ( window.pageYOffset > sticky){
            nav.classList.add(‘chasbonaky’)
        } else{
            nav.classList.remove(‘chasbonaky’)
        }
    }
</script>
hashem

سلام جناب آوند وقتتون بخیر خدا به شما عمر با عزت بده
میخواستم بدونم آیا راه حلی هست که وقتی اسکرول رو به موقعیت top=0 می برید navmenu به یکباره پایین کشیده نشود مثل سایت 3dmaxfarsi.ir

لقمان آوند

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

hashem

سلام جوابشو از w3schools پیدا کردم ممنون

<script type="text/javascript">

window.onscroll = function(){myfunction()};
var nav = document.getElementById("nav");
var sticky = nav.offsetTop;
function myfunction() {
    if (window.pageYOffset > sticky) {
       nav.classList.add("sticky");
}else{
        nav.classList.remove("sticky");
    }

}
</script>
حمید رضا مصطفی زاده

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

لقمان آوند

بله

فرهاد

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

function smoothScrollTo(yPos) {
  var step = 20;
  if (yPos &lt; scrollY) {
   step *= -1;
  }
  if (Math.abs(yPos - scrollY) &lt;= step) { // stop Condition
   return;
  }
  window.scrollBy(0, step);
  setTimeout(function () {
   smoothScrollTo(yPos)
  }, 3);
 }

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

if (yPos &lt; scrollY) {
   step = -1 * Math.abs(step);
  }
لقمان آوند

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

هدایت عباسی

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

وحید صالحی

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

لقمان آوند

ممنون

لقمان آوند

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

hassani

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

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

hassani

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

hassani

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

hassani

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

لقمان آوند

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

لقمان آوند

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

لقمان آوند

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

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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