دوره مجازی جاوااسکریپت (جلسه 14): توابع زمانی، خطایابی و تشخیص خطا در جاوااسکریپت

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

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

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

  • آموزش نحوه صحیح دیباگ کردن و خطایابی کدهای جاوااسکریپت
  • روش های مختلف خطایابی و مزیت ها و معایب هر کدام
  • استفاده از ابزارهای دیباگر و اینسپکتور مرورگر برای آنالیز و بررسی روند اجرای کدها
  • استفاده از ساختار try..catch برای مدیریت خطاها در هنگام اجرای کد
  • مینی پروژه : نوشتن یک برنامه جالب برای تصحیص داده ها وروری کاربر و خطایابی آن
  • معرفی توابع اجرا در بازه زمانی در جاوااسکریپت
  • معرفی تابع setInterval : اجرای کدها در بازه های زمانی مشخص
  • معرفی تابع clearInterval: پاک کردن متغیر زمانی ساخته شده توسط setInterval
  • معرفی تابع setTimeout : اجرای کدها با یک تاخیر مشخص
  • معرفی تابع clearTimeout: پاک کردن متغیر زمانی ساخته شده توسط setTimeout
  • مینی پروژه: ایجاد یک ساعت زنده و آپدیت شونده
  • مینی پروژه: ایجاد یک تولید کننده اعداد رندم با استایل دهی مناسب
  • مینی پروژه : پیاده سازی و ایجاد انیمیشن های fadeIn و fadeOut
  • جایگذاری انیمیشن های کدنویسی شده به عنوان متد در اشیاء صفحه وب
  • ارائه تمرینات مناسب ...
:: توجه

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

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

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

جلسات دوره

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

حسین زاهدی ادیب

سلام، چطور می توانم اعداد ۱ تا ۱۵ را به طور رندم در attribute آی دی ۱۵ تگ div پخش کنم؟

علی حیدرپور

سپاس از شما، تا فاصله پاسخ شما خودم به این روش حل کردم که در onclick هر دکمه ابتدا توقف یکی و بعد شروع دیگری اجرا بشه. یعنی با کلیک روی fadein ابتدا stopFadeOut() اجرا بشه و بعد fadeIn(). اگر این روش مشکلی داره لطفا بفرمایید.

علی حیدرپور

سلام وقت بخیر، در مینی پروژه fade in و fade out اگر همزمان که یکی در حال اجراست و هنوز تکمیل نشده دیگری رو هم اجرا کنیم با هم تداخل پیدا میکنن و opacity روی یک عددی بالا پایین میکنه و تو لوپ میوفته. لطفا بفرمایید راه حل این مشکل چی هست.
ممنون

لقمان آوند

می تونید قبل از شروع فید مقدار opacity رو بگیرید. اگر 0 یا 100 بود شروع کنید فقط

behnam kian

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

 function btnGenerat(){
              iv =  setInterval(function(){
                demo.innerHTML += "<span class=’pm’ style = ‘color : "+ randColor2() +" ‘ >" + rand(0,99) + "</span>" ; 
               },1000)
            res.querySelector("h4").innerHTML += "," + iv ;
            b = res.querySelector("h4").innerText;
            return stt = b.split(",");
            }


            function stopGenerat(){
                clearInterval(iv);
            }
            
            function stopAll(){
                for(var m=1;m <= stt.length;m++){
                    clearInterval(m);
                }
            }
morteza

سلام
تگ img وقتیid میگره و به عنوان پارامتر به یک تابع ارسال میشه داخل تابع جاوا اسکریپت شی ارسالی شناخته نمی شه و undefined میزنه..و با تابع getComputedStyle( ) هم نمیشه دسترسی داشت به style اون حالا چطور میشه این مشکل رو حل کرد باید از روی img یک ابجک Image() بسازیم یا روشی هس برای پاس دادن تگ img به عنوان پارامتر داخل تابع هست؟؟

لقمان آوند

سلام
اینطور که میگید نیست احتمالا اشتباهی در کدهاتون دارید. دقت کنید در این مورد که مشکلتون رو پیدا کنید

Aria Banazadeh

سلام من این کدو تست کردم جواب نمیده اصا کاری نمیکنه این اسکری
پت باید وقتی رو start میزنیم اجرا شه و مث باکتری button بسازه هر 1ثانیه دو برار کنه تعداد باتنایی که میسازرو ولی کار نمیکنه لطفا جواب بدید

  MyButtonGenerator
Start
StopAll
 <span>Result:</span>
 document.getElementById('StartButton').addEventListener('click',function(){
  setInterval(function()
     {GenerateButton();
     },100);
 });
 var i = 1;
    function GenerateButton()
    {
     var b = document.getElementById('div2');
     for(var x;x==i;x++)
     {
     var f= document.createElement('button');
      f.style.backgroundColor="red";
      f.innerHTML= "MyButton";
      x.appendChild(f);
     }
     i=i*2;
    }
 
لقمان آوند

لطفا فایل کامل حاوی این کد رو برام ایمیل کنید ببینم

مجید زارعی هوشیار

و اضافه کردن یه متد به Window که میتونستم پارامتره ایی هم بهش پاس بدیم ولی من ساده اش رو نوشتم :

 function myScrooll() {
  window.scrollY += 100;
  if (scrollY &gt; 1000) {
   return;
  }
  window.scrollTo(0, scrollY);
  var position = setTimeout(function () {
   myScrooll();
  }, 50);
 }
 Window.prototype.goScroll=function(){
  myScrooll()
 } 
مجید زارعی هوشیار

سلام آقای آوند……………. کد های زیر برای scrooll درسته ؟:

 function myScrooll() {
  window.scrollY += 100;
  if (scrollY &gt; 1000) {
   return;
  }
  window.scrollTo(0, scrollY);
  var position = setTimeout(function () {
   myScrooll();
  }, 50); 
لقمان آوند

تست کنید تو صفحه وب. اگه درست باشه جواب میده 😉

Arash Taghavi

سوال دومی هم داشتم البته.فرمودین با خاصیت protoype میتونیم یک شی یا متد رو به یک کلاس اضافه کنیم.شما توو این جلسه اومدین و از دستور زیر استفاده کردین و مثلا متد a رو به شی element اضافه کردین

Element.prototype.a=function(){
f(this)
} 

الان متد a به شی element اضافه شد.سوالم اینه مگه با prototype شی رو به کلاس اضافه نمیکردیم؟ پس اینجا چجوری شی a به شی element(و نه کلاس element) اضافه شده؟ ممنون

لقمان آوند

در کدی که دادین a به کلاس اضافه شده و روی اشیاء مختلف کلاس element قابل دسترسی هست الان!

Arash Taghavi

آهان پس Element کلاس هستش؟ آخه توو آموزش ها میگفتین شی element

Arash Taghavi

درسته،مدت زیادی درگیر این موضوع بودم 🙂 ممنونم 😀

لقمان آوند

آره معمولا اون مواردی که با حرف بزرگ شروع میشن کلاسن. احتمالا اشتباه می گفتم. شی در واقع متغیری (نمونه ای) هست که از این کلاس ها ساخته میشه.

Arash Taghavi

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

 &lt;button onclick=f(elem)
function a(e){
}

توو بالا،پارامتر elem در واقع یه شی هستش که توو تابع a با مقدار e قابل دسترسه.چیزی که من متوجه شدم اینه که مقدار e در تابع a به صورت زیر مقداردهی شده
e=document.getElementbyId(elem)
این درسته؟ یعنی میخوام بگم اون elem که توو button استفاده شده در واقع آی دیه یه تگ توو صفحه ی HTML هستش؟ اگه اره لطف کنید بفرمایید با همین روش آیا میشه اتریبیوت های دیگه ای از تگ ها رو به تابع پاس داد؟مثلا به جای آی دی،کلاس رو پاس بدیم.یا href مثلا.ممنون

لقمان آوند

اول عذر می خوام بابت تاخیر در پاسخگویی
کدتون به نظر ناقص میاد ؟ میشه کاملش رو بزارید ؟

Arash Taghavi

اینو متوجه شدم 🙂

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

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

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

نیاز به لاگین

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