آموزش جاوا اسکریپت – قسمت چهارم: کنسول مرورگر و تب توسعه دهندگان

توسط با بدون دیدگاه آموزش JavaScript

در این قسمت از آموزش های جاوا اسکریپت سراغ ابزار های مرورگر که برای شروع به آن ها نیاز داریم می رویم.

برای دیباگ کردن کدهایمان به ابزارهایی نیاز داریم که مثلا به ما بگوید کجای کد ما اشتباه است. خوشبختانه این ابزار به صورت پیش فرض در مرورگرهای امروزی وجود دارد. در واقع همه مرورگرها به صورت پیش‌فرض سیستم‌هایی برای توسعه وب‌سایت‌ دارند. این ابزارها که در حالت عادی از دید کاربران مخفی هستند، Developer Tools نام دارند.

کنسول مرورگر و تب توسعه دهندگان

برای نمایش ابزار مخصوص توسعه‌دهندگان در مرورگر کروم مراحل زیر را طی کنید:

نمایش ابزار توسعه‌دهندگان در مرورگر کروم

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

نمایش ابزار توسعه‌دهندگان در مرورگر فایرفاکس

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

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

آشنایی با بخش Elements

این بخش از Developer Tools کدهای اچ‌تی‌ام‌ال و سی‌اس‌اس نهایی را نمایش می‌دهد. شما می‌توانید از طریق این بخش تمامی تگ‌های اچ‌تی‌ام‌ال صفحه را مشاهده کنید. همچنین در سمت راست این پنجره، یک بخش مخصوص نمایش CSS-ها وجود دارد که با رفتن روی هر المان، می‌توانید دستورات CSS اعمال‌شده روی آن را در سمت راست صفحه و در بخش styles، مشاهده کنید.

تمامی CSS-ها  و HTML-های صفحه قابل تغییر هستند و شما می‌توانید همانجا در تب Elements، آن‌ها را به دلخواه خود تغییر دهید و تغییرات خود را به‌صورت زنده و لحظه‌ای مشاهده کنید.  البته این تغییرات تنها در مرورگر شما اجرا می‌‌شود و در سایت اصلی به هیچ عنوان تغییری ایجاد نمی‌شود. همچنین با هر بار Refresh و بارگذاری مجدد صفحه، تمام تغییرات شما نیز از بین خواهد رفت و همه چیز به حالت ابتدایی خود برخواهد گشت. همچنین شما می‌توانید با کلیک روی المنت‌های اچ‌تی‌ام‌ال صفحه در صورت لزوم آن‌ها را تغییر دهید یا کپی یا حذف کنید.

آشنایی با بخش Console

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

همچنین شما می‌توانید پیغام‌های دلخواه را در جاوا اسکریپت بنویسید و این پیغام‌ها را در کنسول مرورگر نمایش دهید (اصطلاحا چاپ کنید). این کار توسط دستور console.log انجام می‌شود. بعدا این دستور را با هم استفاده خواهیم کرد.

همچنین شما می‌توانید در محیط کنسول، به‌صورت ریل تایم کد جاوا اسکریپت بنویسید و این کدها را همان جا اجرا کنید. برای مثال ما می‌توانیم از دستور alert جاوا اسکریپت به‌صورت مستقیم در کنسول استفاده کنیم. برای این کار دستور زیر را در کنسول مرورگر کپی کنید و اینتر بزنید.

alert("i am console")

آشنایی با بخش Network

این تب در واقع نمایش‌دهنده وضعیت تعامل شما با سرورهای سایت است. در واقع تمامی درخواست‌های ارسال‌شده به سرور و وضعیت و پاسخ آن‌ها در این تب قابل مشاهده است. به علت اینکه در این آموزش ما به سرور وصل نخواهیم شد، وارد جزئیات این تب نخواهیم شد.

شبیه‌سازی موبایل

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

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

توسط با بدون دیدگاه آموزش JavaScript

بعد از یادگیری HTML و CSS نوبت به یادگیری جاوا اسکریپت می‌رسد.

آشنایی با جاوا اسکریپت

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

جاوا اسکریپت اصولا یک زبان سمت کاربر یا فرانت‌اند است. البته با به وجود آمدن زبان NodeJS امکان نوشتن سرویس‌های سمت سرور با جاوا اسکریپت نیز وجود دارد. یکی از مزایای جاوا اسکریپت، فریم‌ورک‌ها و کتابخانه‌هایی است که بر پایه این زبان شکل گرفته‌اند. مشهورترین و نام‌آشناترین کتابخانه‌ جاوا اسکریپت، Jquery است.

جاوا اسکریپت، تنها یک زبان برنامه نویسی برای طراحی سایت و افزودن مقداری انیمیشن و حرکت و منطق به وب‌سایت‌ها نیست. فریم‌ورک‌ها و ابزارهای بسیار زیادی با کمک این زبان توسعه داده شده‌اند که با کمک آن‌ها می‌توان از اپلیکیشن‌های موبایل گرفته تا سیستم‌های پیچیده را پیاده‌سازی کرد. ابزارهایی مثل ReactJS شرکت فیس‌بوک یا Angular JS شرکت گوگل از جمله‌ی این ابزارها هستند. همچنین با روی کار آمدن NodeJS، امکان اجرای کدهای جاوا اسکریپت به‌عنوان زبان سمت سرور نیز فراهم شده است.

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

ما در این دوره تمرکز اصلی خود را بر کسانی قرار داده‌ایم که قصد ورود به دنیای برنامه‌نویسی جاوا اسکریپت دارند. به همین دلیل سعی شده است مطالب تا حد امکان ساده و به دور از عمق و پیچیدگی بسیار باشد. البته این بدان معنا نیست که مفاهیم مهم را از قلم انداخته‌ایم،؛ بلکه بدین معنا است که آموزش پیش روی شما سعی دارد در عین سادگی و روان بودن، مفاهیم اصلی را نیز توضیح دهد و از گفتن جزئیات تکمیلی خودداری شود. در ادامه‌ی این آموزش‌ها مطالب زیر را فرا خواهید گرفت‌ (توجه کنید که مفاهیم زیر بسیار کلی هستند و در خلال آموزش مطالب بیشتری گنجانده شده است):

۱. آشنایی با مفاهیم اولیه‌ی ساخت فایل جاوا اسکریپت و استفاده از آن در صفحه‌ی اچ‌تی‌ام‌ال

۲. آشنایی با ابزارهای دیباگ جاوا اسکریپت (کنسول مرورگر)

۳. آشنایی با مفاهیم اولیه از جمله متغیرها و انواع آن

۴. آشنایی با فانکشن‌ها

۵. آشنایی با آبجکت‌ها

۶. آشنایی با آرایه‌ها

۷. شرط‌ها و if و else در برنامه نویسی

۶. EventListener و Event-ها

۷. تغییر DOM (المان‌های صفحه‌ی اچ‌تی‌ام‌ال) از طریق جاوا اسکریپت

برای اجرای کدهای جاوا اسکریپت به چه چیزی نیاز داریم؟

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

پیشنهاد ما به شما، Visual Studio Code مایکروسافت یا نرم افزار ++NotePad است.

لینک دانلود Visual Studio Code – نسخه سبک محیط توسعه مایکروسافت (این نسخه با آن ابزار مشهور چند گیگابایتی مایکروسافت Visual Studio تفاوت دارد.)

برای یادگیری جاوا اسکریپت نیاز نیست حتما برنامه‌نویس کارکشته‌ای باشید؛ اما باید با زبان‌های طراحی وب پایه همچون HTML و CSS آشنایی اندکی داشته باشید.

شروع جاوا اسکریپت

برای شروع ابتدا یک صفحه اچ‌تی‌ام‌ال ساده ایجاد می‌کنیم.

<!DOCTYPE html>

<html>

   <body>

     <h2>آموزش جاوا اسکریپت با پردیس وردپرس</h2>

     <p id="pardiswp"></p>

   </body>

</html>

قبل از بسته شدن تگ body، یک تگ <script></script> باز می‌کنیم که امکان اجرای کدهای جاوا اسکریپت را برای ما فراهم می کند. این تگ به ما اجازه می‌دهد کدهای جاوا اسکریپت را در صفحه اچ‌تی‌ام‌ال بنویسیم.

حال می‌خواهیم به‌محض اینکه این صفحه‌ی خالی باز شد، یک پیغام هشدار  ()alert برای کاربر باز شود و به او جمله‌ی «خوش‌آمدید» را اعلام کند. برای این کار بین تگ script که پیش‌تر باز کردید، عبارت (“سلام خوش آمدید”)alert را بنویسید.

<!DOCTYPE html>

<html>

<body>

  <h2>آموزش جاوا اسکریپت با پردیس وردپرس</h2>

   <p id="pardiswp"></p>

   <script>

       /* کد جاوا اسکریپت شما اینجا نوشته خواهد شد */

        alert("سلام خوش آمدید")

   </script>

  </body>

</html>

حال صفحه‌ی اچ‌تی‌ام‌ال خود را ذخیره و آن را یک بار ریفرش کنید. خواهید دید که به محض بارگذاری صفحه، پیغام نوشته‌شده توسط شما در قالب یک پنجره‌ی «alert» نمایش داده خواهد شد.