campaign-edianeh-98

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



visibility  
mode_comment   ۴۷

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

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

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

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

ثبت نام در آموزش جاوا اسکریپت از مبتدی تا پیشرفته

comment دیدگاه کاربران
hassani replyپاسخ

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

hassani

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

لقمان آوند

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

hassani

در تابع fadein و fadeout من یه تکه کد رو از تابع حذف کردم و مشکلی نبود به نظرم این تکه کد ضروری نیست:

لقمان آوند

برای افزایش سازگاری و اطمینان از مقدار دهی اولیه و ویژگی opacity این خط استفاده شده …

hassani

با اینکه این جلسه تقریبا جلسه آخر جاوااسکریپت بود ولی به نظر من فقط دستورات و قواعد و با ذکر مثال برای فهم مسایل جاوااسکریپت تا الان گفته شده.و به موضوع افزایش سطح مهارت دانشجوها کمتر پرداخته شده .به نظر من حداقل تا دو جلسه دیگه به کاربردهای متعدد جاوااسکریپت در صفحات وب و حل مثال پرداخته بشه تا یه کم کاربردی تر یاد بگیریم.مثلا آموزش ساخت منوها با جاوااسکریپت, همین دکمه اسکرول به بالا,منوی ثابت در بالای صفحه پس از مقداری اسکرول یا ساخت یه تقویم و…
تا مثال های کاربردی در طراحی صفحات وب رو هم یاد بگیریم و راحتتر ایده پردازی کنیم و در واقع با توابع متد ها آرایه ها حلقه ها و نحوه به کارگیریشون در طراحی یک صفحه وب واقعی آشنا بشیم.اگه میشه مواردی رو که در صفحات وب دیده میشه و با جاوااسکریپت طراحی شده برای ما مثال بزنید و بررسی کنید.اینم بگم که برای من به شخصه مهم نیست که حتما تا فلان تاریخ همه کلاس های جاوااسکریپت ارایه شده باشه بلکه مهم اینه که بعد از این دوره بتونم کدهایی رو که میبینم بفهمم و خودم ایده هایی رو که دارم بتونم پیاده کنم.
با تشکر از سون لرن. ❓

لقمان آوند

عجله داری حسنی جان
پروژه های اصلی و کاربردیمون هنوز مونده. کمی صبر کن. یه فصل کامل آخر دوره برای این موارد داریم …

hassani

امیدوارم همینطور که میگین باشه.
❓ ❓ ❓

لقمان آوند

سپاسگزارم ….

hassani

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

http://s3.picofile.com/d/6263fbec-69fa-4625-8d79-077e6dd7d5cf/scrollTop.rar

لقمان آوند

خوبه .
یواش یواش تجربت داره بیشتر میشه.
تقریبا همین بود و مواردی که مدنظرم بود رو خوب پیده سازی کردی ..

hassani

یه فهرست هم با جاوااسکریپت کد زدم .گفتم بذارم شاید به عنوان تمرین به درد بقیه بخوره.نمیدونم چرا از بین 216 دانشجوی جاوااسکریپت فقط من کامنت میذارم ایراد میگیرم تمرین حل شده میذارم و…
یعنی بقیه هیچ مشکلی ندارن؟!!!!! ❗ ❗ 😀
http://s6.picofile.com/d/f93c2cb8-469b-4e97-b3f1-35c1675f361d/nav_js.rar

لقمان آوند

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

سیدمحمدرضا طبیبیان replyپاسخ

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

لقمان آوند

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

سیدمحمدرضا طبیبیان replyپاسخ

اطلاعیه رو دیدم . انشاء الله بهبودی کامل حاصل شود .

ehsan69 replyپاسخ

سلام آقای آوند
لطفاً و اگر صلاح دونستین هنگام ضبط ویدئوهاتون از قابلیت زوم در نوشتن کدهاتون استفاده کنین. کدها کمی ریز هستند.
ممنونم

لقمان آوند

چشم

ehsan69

چشمت بی بلا لقمان جان

mehdi karimi replyپاسخ

سلام استاد
من با چیزایی که گفتید تا حالا و تابع setInterval یه اسلایدر خیلی خیلی ساده درست کردم 😀 کدشو میزارم هم بقیه دوستان ببینن هم خوشحال میشم خودتون یه نگاهی بهش بندازید و نظرتونو بدید
بازم میگم خیلی ابتدایی هست این اسلایدر ، چیزی بود که از دستم بر میومد 😀

http://upload7.ir?p=preview&s=1&q=CyaKBhsYRzpNYK2FGfZwudj6xoMazAh4YhDrrXf9&s=1

لقمان آوند

ممنون
مهم اینه که شما از مواردی که یاد گزفتید یه استفاده کاربردی کردید
اینکارو ادامه بدید تا تسلط و تجربتون افزایش پیدا کنه

فرهاد replyپاسخ

با سلام خدمت استاد عزیز آقای دکتر آوند
براتون آرزوی سلامتی دارم و امیدوارم هر چه زودتر سلامتی تون رو به دست بیارید.
اما سوالی که داشتم در مورد تابع toggleClock بود . استاد شما این تابع رو به صورت زیر نوشتید:


اما من فقط از روی کنجکاوی اومدم و در بلوک if جای دو دستور رو عوض کردم. یعنی به این صورت نوشتم:


اما دیدم که بلوک if تابع درست کار نمیکنه آیا دلیل خاصی داره؟ یعنی چه لزومی داره که حتما اول تابع clearInterval رو صدا بزنیم و بعد مقدار iv1 رو صفر کنیم؟ دلیل این موضوع چیه و اینکه این دو دستور چرا باید به همان ترتیبی که خودتون نوشتید صدا زده بشند؟
با تشکر

لقمان آوند

الان دقیقا حضور ذهن ندارم که موقع کدنویسی این کد چیکار کردم ;D (اینجاست که نقش کامنت گذاری توضیحی معلوم میشه !)
یه نکته ای که می تونم بهتون بگم اینه که احتمالا خواستم iv1 مقدارش ریست شه. چون clearInterval اون متغیر رو دیگه از حالت متغیر زمانی در میاره ولی مقدارش رو (که یه عددی بالای 0 هست) پاک نمی کنه.

فرهاد replyپاسخ

استاد یه سوال دیگه:
برای حرفه ای یاد گرفتن یک زبان برنامه نویسی مثل java script یا Php یا زبان های دیگه دقیقا باید چه کار کرد؟ آیا خوندن مستندات و توایع از پیش تعریف شده اون زبان می تونه به حرفه ای شدن کمک کنه یا اینکه باید پروژه های کاربری انجام بدیم یا اینکه کار دیگه ای لازم هست که انجام بشه. برای حرفه ای یاد گرفتن چه کار باید کرد؟
با تشکر

لقمان آوند

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

مقصودی replyپاسخ

سلام و خسته نباشید
در مورد این کد که پیاده سازی توابع fade in out هستش سوال داشتم:
تابع fadeIn به صورت زیر نوشته شده اما مقدار opacity روی 0.05 قفل میکنه، ممنون میشم راهنمایی فرمایید

لقمان آوند

لطف کنید فایل کامل رو که تست می کنید برای بنده ایمیل کنید که چک کنم براتون .

مقصودی

سلام
چند روزی هست که کد رو براتون ایمیل کردم اما جوابی دریافت نکردم ممنون میشم ایمیلتون رو بررسی کنید.

لقمان آوند

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

ervin replyپاسخ

اقای اوند یه سوال داشتم من میخوام مثلا تابع sum


این تابع رو به عنوان یه ابجکت یا المنت برا div1 قرار بدم مثل

همونطور که میبینید 2 مقدار ورودی میگیره حالا با توجه به اموزش شما! این کار درسته؟!

لقمان آوند

متوجه نشدم. اون div یه متغیره ؟ یا چیز دیگه منظورتون هست ؟

Arash Taghavi replyپاسخ

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

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

لقمان آوند

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

Arash Taghavi

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

Arash Taghavi replyپاسخ

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

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

لقمان آوند

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

Arash Taghavi

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

لقمان آوند

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

Arash Taghavi

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

مجید زارعی هوشیار replyپاسخ

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

لقمان آوند

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

مجید زارعی هوشیار replyپاسخ

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

Aria Banazadeh replyپاسخ

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

لقمان آوند

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

morteza replyپاسخ

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

لقمان آوند

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

behnam kian replyپاسخ

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

 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);
                }
            }
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.