آموزش جاوا اسکریپت Java Script قسمت پنجم

اکرم کریمی 1395/4/17 826

من میخوام امشب رو روی مرورگر کروم توضیحاتی بدم، البته این مواردی که میگم توی سه مرورگر کروم، فایرفاکس و IE هست اما از لحاظ ظاهری یه کم متفاوتند. پس لطفا از مرورگر کروم برای نمایش صفحه html تون استفاده کنید که خدای نکرده دچار سر در گمی نشید.

تا اینجا ما فقط کد می نوشتیم و اجرا میکردیم، اما چطور بفهمیم که کدمون همون جوری که ما میخوایم داره پیش میره؟ اینجاست که موجودی با نام debugger وارد میشه. debugger چی کار میکنه؟ debugger یه ایست میده در اجرای دستورات جاوا اسکریپت، و شما میتونید به از اون قسمتی که debugger رو قرار دادید مرحله به مرحله اجرای دستوراتتون رو ببینید. خب چطوری ازش استفاده کنیم؟ فقط کافیه خط کد زیر رو در محل مورد نظر قرار بدیم:

debugger;

مثلا من بعد از دستور use strict میخوام بذارمش.

'use strict';

debugger;

var s = 0;

function showTime() {

 setInterval(function () { document.querySelector("#demo").innerText = ++s; }, 1000);

}

 

خب حالا صفحه تون رو توی کروم اجرا کنید. و دکمه F12 رو بزنید یا اینکه رو صفحه مرورگر کلیک راست کرده و گزینه Inspect Element رو در انتهای context menu تون انتخاب کنید.

 

آموزش جاوااسکریپت

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

تب اول، تب Elements است که المنتهای درون صفحه html رو به ما نشون میده، میتونید استایلهایی که به این المنتها دادید رو در سمت راست ملاحظه کنید. این تب تقریبا مربوط به design است و ما زیاد کاری با این تب نداریم مگر اینکه بخوایم از ساختار html یه المنت اطمینان حاصل کنیم یا اینکه ببینیم این المنت الان اون مثلا استایلی که ما بهش دادیم رو گرفته یا نه، یا اصلا توی صفحه موجود است یا نه و ...

تب دوم هم که Network اسمشه، یه سری اطلاعات به ما میده که موقع اجرای این صفحه چه فایلهایی درخواست داده شده و سایزشون و سرعت لود صفحه و ... که ما اصلا با این صفحه کاری نداریم، مگر اینکه یه زمانی بخوایم مطمئن شیم که فایلی که درخواست داده بودیم اومده یا نه.

اینکه میگم کاری نداریم منظورم در مبحث جاوااسکریپته.

خب میرسیم به تب اصلی در حیطه جاوا اسکریپت، تب Sources.

آموزش javascript

همونطور که توی این تصویر هم می بینید این تب از سه قسمت تشکیل شده. من یه سری توضیحات کلی در مورد این تب میدم و در طول آموزش بیشتر با این ابزار آشنا میشیم. در قسمت سمت چپ، در تب Sources، یک سری فایلها که به همراه فایل html تون لود شده رو میتونید ببینید. اینکه میگم یک سری، چون ممکنه مثلا یک فایل js رو با استفاده از روشهای دیگه ای غیر از قرار دادن تگ <script> فراخوانی کرده باشیم و اون موقعه که این فایل رو در سمت چپ این پنل نداریم.

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

برگردیم سر debugger مون.

اگر که قادر به مشاهده بدنه فایل js تون نیستید از قسمت سمت چپ، از پوشه Scripts فایلتون رو انتخاب کنید تا بتونید محتواش رو ببینید. صفحه رو مجدد refresh کنید تا ببینید چه اتفاقی میفته.

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

به غیر از debugger ما میتونیم توی مرورگر از امکان breakpoint هم بهره ببریم. مثلا من کدم روی این debugger توقف کرده اما میدونم طبق اون چیزی که گفتم توی تابع showTime نمیره. برای دیباگ کردن showTime چکار میکنم؟ میام یه breakpoint میذارم. چطوری؟ روی شماره خط کد (line number) که در کنار هر خط قرار گرفته یکبار کلیک میکنم. میبینید که یه علامت آبی رویش قرار میگیره. اگر که این اتفاق براتون نمیفته به این دلیله که اجازه قرار دادن breakpoint رو روی این خط کد ندارید.

همونطور که در شکل میبینید، در سمت راست در قسمت breakpoints یه گزینه اضافه شده که نمایانگر breakpoint شماست. میتونید با برداشتن تیک کنارش، اون رو غیر فعال کنید. میتونید با کلیک رویش، به خط کد اون breakpoint هدایت شید.

آموزش کدنویسی در جاوااسکریپت

همونطور که در شکل میبینید، در سمت راست در قسمت breakpoints یه گزینه اضافه شده که نمایانگر breakpoint شماست. میتونید با برداشتن تیک کنارش، اون رو غیر فعال کنید. میتونید با کلیک رویش، به خط کد اون breakpoint هدایت شید.

در قسمت بالای کادر سمت راست، یک سری دکمه در اختیار ما قرار گرفته. اولین دکمه، دکمه Resume است که برای ادامه دادن اجرای کد است و تا debugger بعدی کد توقف نخواهد کرد، اگر هم که دیگه debugger یا breakpoint نداشته باشیم توقف نمیکنه، به جای این دکمه میتونید از میانبر F8 کیبورد استفاده کنید. دکمه دوم Step over است که با اون میتونید خط به خط کدتون رو برید جلو. به جای این دکمه میتونید از دکمه میانبر کیبورد، F10 استفاده کنید.

دکمه سوم، Step into است، کاربرد این دکمه مشابه دکمه قبله با این تفاوت که اگه تابعی رو در میان راه فراخوانی کرده باشید با استفاده از این دکمه میتونید به درون بدنه آن تابع رفته و کدهای درون آن را هم دیباگ کنید. معادل این دکمه، میانبر F11 است. توجه کنید که گفتم فراخوانی تابع نه ایجاد یک تابع!

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

دکمه پنجم، برای زمانی است که من میخوام همه debuggerها و breakpointهام رو غیر فعال یا فعال کنم. در صورت فعال بودن روی آیکون یک خط کج قرار گرفته و در صورت غیر فعال بودن هیچ خطی بر روی آیکون ان نیست.

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

دکمه آخر رو هم به موقعش توضیح میدم.

حالا توی بدنه کدتون عبارت document.querySelector("#demo") رو انتخاب کنید و بر روی اون کلیک راست کنید و گزینه Add to watch رو انتخاب کنید.

آموزش جاوا اسکریپت

دکمه F8 رو بزنید تا اجرای برنامه ادامه پیدا کنه.

عبارتی که انتخاب کردیم رو در سمت راست در قسمت watch ملاحظه میکنید، میبینید که یک مقدار رو برگردونده، اگر که با اشاره گر موس بر روی این مقدار بروید المنت متناظر با اون رو توی صفحه به صورت انتخاب شده (به رنگ آبی) می بینید. یه مثلث کوچک هم کنار عبارت ما در قسمت watch هست. اگه این مثلث رو باز کنید شکل زیر رو می بینید:

آموزش javascript

توی این قسمت میتونید تمامی پراپرتی های این المنت رو ببینید مثل innerText که اون رو مقدارددهی کردیم. همچنین میتونید رویدادهای اون رو هم ببینید مثل onclick، onmouseenter، onmouseleave

خب اگه breakpoint ای که گفتم بذارید سر جاش باشه و شما دکمه start رو توی صفحه بذارید میبینید که سر خط کدی که توی بدنه تابع showTime گذاشتیم متوقف میشه

روش دیگر اضافه کردن یه عبارت به قسمت watch اینه که بر روی دکمه + در کنار watch کلیک کنید و عبارت مورد نظرتون رو که میخواید مقدارش رو ببینید توی قسمت مورد نظر نوشته و دکمه enter رو بزنید

میتونید برای امتحان کردن این روش، عبارت s رو درون watch قرار بدید و مقدار اون رو ببینید.

حالا با این توضیحاتی که دادم در این قسمت میتونیم کدهامون رو دیباگ کنیم

توی این جلسه موفق نشدیم کدی بنویسیم، انشاءالله توی جلسه بعد ادامه stopWatch رو خواهیم داد

دانلود PDF قسمت پنجم آموزش جاوااسکریپ

قسمت بعدی قسمت قبلی