استفاده از کنسول توسعه ی جاوا اسکریپت

مرورگر های مدرن، دارای ابزار های توسعه ای برای کار با جاوا اسکریپت و سایر تکنولوژی های وب هستند. این ابزار شامل یک کنسول، همراه با ابزار هایی برای بازبینی DOM، اشکال زدایی و تجزیه و تحلیل فعالیت شبکه است.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

کنسول می تواند برای ثبت اطلاعات به عنوان بخشی از فرآیند توسعه ی جاوا اسکریپت استفاده شود، و همچنین به شما اجازه می دهد تا با یک صفحه ی وب، با بیان عبارات جاوا اسکریپت در متن صفحه، ارتباط برقرار کنید. اساسا، کنسول توانایی نوشتن، مدیریت و نظارت بر Javascript را در صورت درخواست فراهم می کند.

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

کار با کنسول در یک مرورگر

اکثر مرورگر های وب مدرن که از HTML و XHTML مبتنی بر استاندارد پشتیبانی می کنند، یک کنسول توسعه ارائه می دهند که در آن می توانید با جاوا اسکریپت کار کنید. در ادامه ی این مقاله، در مورد نحوه دسترسی به کنسول در فایرفاکس و کروم خواهیم پرداخت.

کنسول جاوا اسکریپت در فایرفاکس

برای باز کردن کنسول وب در فایرفاکس، می توانید بر روی منو ☰ در گوشه ی بالای سمت راست، در کنار نوار آدرس کلیک کنید.

سپس، بر روی دکمه ی Developer کلیک کنید، در این مرحله، منوی Web Developer باز می شود. سپس، بر روی آیتم منوی کنسول کلیک کنید.

در این مرحله، صفحه ای در پایین پنجره ی مرورگر باز خواهد شد:

همچنین می توانید با استفاده از میانبر صفحه کلید CTRL + SHIFT + K در لینوکس و ویندوز، یا COMMAND + OPTION + K در macOS وارد کنسول وب شوید.

کنسول جاوا اسکریپت در کروم

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

در این مرحله، یک پانل باز می شود که در آن می توانید بر روی کنسول در نوار منوی بالای صفحه کلیک کنید تا Console جاوا اسکریپت ظاهر شود.

همچنین می توانید با استفاده از میانبر صفحه کلید CTRL + SHIFT + J در لینوکس یا ویندوز و یا COMMAND + OPTION + J در macOS وارد Console جاوا اسکریپت شوید.

کار در کنسول

در کنسول، می توانید کد جاوا اسکریپت را تایپ کنید. بیایید با یک هشدار / alert شروع کنیم که رشته ی Hello World را چاپ می کند:

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

همچنین می توانیم به جای هشدار های پاپ آپ، با وارد کردن console.log. با جاوا اسکریپت کار کنیم.

برای چاپ رشته ی  Hello World، می توانیم عبارت زیر را در کنسول تایپ کنیم:

در کنسول، خروجی زیر را دریافت خواهید کرد:

همچنین می توانیم جاوا اسکریپت را برای انجام عملیات ریاضی در کنسول استفاده کنیم:

می توان برخی از عملیات ریاضی پیچیده تر را نیز امتحان کرد:

علاوه بر این، می توانیم در چندین خط با متغیر ها کار کنیم:

اگر نیاز به تغییر یک فرمان در کنسول داشتید، می توانید کلید ↑ بالا، روی صفحه کلید را برای بازیابی فرمان قبلی تایپ کنید. این کار به شما این امکان را می دهد که فرمان را ویرایش کرده و آن را دوباره ارسال کنید.

کار با یک فایل HTML

شما همچنین می توانید در متن یک فایل HTML و یا یک صفحه ی پویا در کنسول کار کنید. این حالت به شما این امکان را می دهد تا با کد جاوا اسکریپت را درون یک HTML، CSS و جاوا اسکریپت موجود، تجربه کنید.

در نظر داشته باشید که بعد از اصلاح صفحه با کنسول، به محض بارگذاری مجدد، صفحه به حالت قبل خود، پیش  از اصلاح سند باز می گردد، پس مطمئن شوید که تغییرات را در جای دیگری ذخیره کنید.

برای درک چگونگی استفاده از Console و تغییر یک فایل، یک سند HTML خالی مانند فایل index.html زیر را در نظر می گیریم:

اگر فایل HTML بالا را ذخیره کرده و سپس آن را در مرورگر مورد نظر خود بارگذاری کنید، باید یک صفحه خالی با عنوان Today’s Date  مشاهده کنید.

پس از آن می توانید Console را باز کنید و برای تغییر صفحه، شروع به کار با جاوا اسکریپت کنید. کار را، با استفاده از جاوا اسکریپت برای قرار دادن عنوان در HTML شروع می کنیم.

خروجی زیر را در کنسول دریافت خواهید کرد:

و در این مرحله، صفحه شما باید شبیه به این باشد:

همچنین می توانیم استایل صفحه مانند رنگ پس زمینه را تغییر دهیم:

و همین طور، رنگ متن در صفحه را نیز تغییر می دهیم:

در این مرحله، صفحه ی شما چیزی شبیه به این خواهد بود:

از این جا می توانید یک عنصر پاراگراف <p> ایجاد کنید:

با ایجاد این عنصر، می توانید یک گره متنی ایجاد کنید که بعدا به پاراگراف اضافه کنید:

گره متنی را با افزودن آن به متغیر p اضافه می کنیم:

و در نهایت p را با پارامتر <p> پاراگراف و گره متن افزوده شده به سند، اضافه می کنیم:

پس از تکمیل این مراحل، صفحه HTML index.html شبیه تصویر زیر خواهد بود:

کنسول شما، فضایی را برای تغییر صفحات HTML ایجاد می کند اما مهم است که بدانید در هنگام انجام تغییرات در کنسول، سند HTML را تغییر نمی دهید. در این مورد، هنگامی که صفحه را دوباره بارگذاری می کنید، به همان سند خالی باز می گردد.