دوره مجازی جاوااسکریپت (جلسه 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>
پایان زمان پشتیبانی

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

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

نیاز به لاگین

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