کار با جاوا اسکریپت در مرورگر

تا به اینجا ما کدهای جاوا اسکریپت را به کمک node.js اجرا می کردیم.این در حالی است که مرورگرها نیز قابلیت اجرای کدهای جاوا اسکریپت را دارند .ابتدا فقط مرورگرها،توانایی اجرای کد جاوا اسکریپت را داشتند.حتی node.js نیز از موتور پردازشی به اسم v8  که متعلق به گوگل کروم برای اجرای کدهای جاوا اسکریپت استفاده می کند.

برای شروع کار نیاز است یک صفحه با پسوند html ساخته شود.برای مثال در vs.code به شکل زیرعمل کنید:

ساخت یک فایل html در vs.code داخل فایل بالا مقادیر زیر را تایپ کنید:

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

یک صفحه html ساده

حال یک فایل دیگر به اسم todo-app.js ایجاد کنید:

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

سپس در بالا کد index.html را به شکل زیر تغییر دهید:


همانطور که مشاهده می کنید خط ۱۰ به کد اضافه شده است.در واقع این خط فایل todo-app.js را به صفحه html ارتباط می دهد.نحوه کار مرورگر به این صورت هست که هر زمان به این خط می رسد به داخل فایل جاوا اسکریپت رفته و آن را اجرا می کند.

حال داخل کد جاوا اسکریپت کد زیر را تایپ کنید:

دوباره به محل فایل بروید و فایل index.html را اجرا کنید.به ظاهر فایل ما با دفعه قبلی هیچ فرقی ندارد ولی برای اینکه تفاوت را با سری پیش ببینید روی صفحه راست کلیک کنید و گزینه inspect را انتخاب کنید:

نحوه گرفتن inspect در کروم سپس یک پنجره جدید برای شما باز خواهد:

console در کروم

روی تب console کلیک کنید.

querySelector

همانطور که مشاهده می کنید اولین تگ p با محتوای <p>خرید خانه</p> چاپ شده است.به عبارتی با استفاده از شی document و متد querySelector اولین تگ p که جاوا اسکریپت پیدا می کند را برمی گرداند.ورودی  querySelector  همان نام تگی است که می خواهیم روی صفحه پیدا کنیم و به اولین تگ p که روی صفحه رسید که آن  بر می گرداند.

لیستی از تگهای html در زیر قابل مشاهده است:

Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Defines information about the document
<title> Defines a title for the document
<body> Defines the document’s body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!–…–> Defines a comment

querySelectorAll

اگر بخواهید که تمامی تگهای p روی صفحه را چاپ کنید از querySelectorAll استفاده می کنیم:

querySelectorAll در جاوا اسکریپت

همانطور که قابل مشاهده است تمام تگهای p به صورت یک آرایه روی صفحه چاپ خواهند شد.