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

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

برای تسلط بر جاوا اسکریپت، به درک عمیقی از نحوه عملکرد کل اکوسیستم نیاز دارید. اکوسیستم اصلی جاوا اسکریپت از سه مولفه اصلی تشکیل شده است که عبارتند از ECMAScript ، JavaScript Engine و JavaScript Runtime.

همه چیز با درک اینکه ECMAScript چیست و تفاوت آن با جاوا اسکریپت چیست و به دنبال آن درک JavaScript Engine و JavaScript Runtime شروع می‌شود. به خاطرJavaScript Runtime است که NodeJS و گوگل کروم می‌توانند از یک موتور جاوا اسکریپت یکسان استفاده کنند و در پیاده سازی جاوا اسکریپت برای توسعه دهندگان بسیار متفاوت هستند.

JavaScript Runtime یا Host JavaScript چیست؟

JavaScript Runtime یا همان Host JavaScript را می‌توان ظرفی دانست که از موتور جاوا اسکریپت برای تولید API استفاده می‌کند و توسعه دهندگان نرم‌افزار می‌توانند از آن برای ایجاد برنامه‌های کاربردی با استفاده از جاوا اسکریپت استفاده کنند. به عنوان مثال JavaScript Runtime در یک مرورگر، به طور معمول شامل پیاده سازی جاوا اسکریپت است که بیشتر به مرورگر اختصاص دارد. در حالی که runtime برای چیزی مانند NodeJs پیاده سازی‌های خاصی دارد که بیشتر مختص اجرا و ساخت یک برنامه سمت سرور با استفاده از جاوا اسکریپت است.

JavaScript Runtime در مرورگر شما برای توسعه وب

JavaScript Runtime در مرورگر از جاوا اسکریپت استفاده می‌کند که توسعه دهندگان را قادر می‌سازد تا برنامه‌هایی را برای وب توسعه دهند. runtime مرورگر وب دارای سه جز مهم زیر است:

هسته مبتنی بر ECMAScript - پیاده سازی پایه جاوا اسکریپت با تمام توابع ورودی و خروجی که توسعه دهندگان می‌توانند از آن استفاده کنند.
Document Object Model (DOM) - این همان چیزی است که مرورگر به عنوان سلسله مراتبی از گره‌ها ارائه می‌دهد تا برای XML و HTML به کلاینت یا کاربر نمایش داده شود.
Browser Object Model (BOM) - این کامپوننت به توسعه دهندگان اجازه می‌دهد پنجره مرورگر را دستکاری کنند. با استفاده از BOM، توسعه دهندگان می‌توانند به ویژگی‌های مرورگر دسترسی پیدا کرده و آن‌ها را خارج از DOM یا صفحه نمایش داده شده تغییر دهند.

بیایید برای درک جزئیات هر یک از این کامپوننت‌ها را دقیق‌تر بررسی کنیم.

توابع هسته IO بر اساس ECMAScript

با اندکی آگاهی از تاریخچه جاوا اسکریپت مشخص می‌شود که ECMAScript چیست. ECMAScript یک زبان اسکریپت نویسی عمومی است که بر اساس استانداردهای تعریف شده در ECMA-262 توسط انجمن تولید کنندگان کامپیوتر اروپا (ECMA) ساخته شده است. این کار با هدف استاندارد سازی جاوا اسکریپت از سال 1997 انجام شد.

جاوا اسکریپت یک نوع پیاده سازی ECMAScript است و تمام مرورگرهای وب هنگام ایجاد موتور جاوا اسکریپت و محیط runtime باید به ECMAScript پایبند باشند. ECMAScript شامل هیچ توابع IO نیست، در عوض این جاوا اسکریپت است که توابع مختلف را با استفاده از دستورالعمل‌های تنظیم شده توسط ECMAScript اجرا می‌کند. ECMAScript و JavaScript با یکدیگر متفاوت هستند. ECMAScript یک زبان برنامه نویسی بر اساس استانداردهای تعریف شده در ECMA-262 است و به مرورگرهای وب مرتبط نیست. این به لطف بهره‌گیری از ECMAScript است که یک زبان اسکریپت نویسی قوی‌تر مانند جاوا اسکریپت ساخته شده است.

Document Object Model یا DOM

Document Object Model یک رابط خنثی برای زبان XML و همچنین HTML است که کل سند را به عنوان یک سلسله مراتب از گره‌ها تهیه می‌کند و نمایشی درخت مانند ایجاد می‌کند. کد HTML ارائه شده در زیر نمونه کاملی از سلسله مراتب گره‌ها است.

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

چرا Document Object Model (DOM) مورد نیاز است؟

در طی سال‌های ابتدایی معرفی اینترنت، تنها دو مرورگر Netscape Navigator 4 و Internet Explorer 4 وجود داشت. هر دو مرورگر نسخه دیگری از HTML پویا (DHTML) را دنبال می‌کردند، بنابراین اثبات اجرای کد HTML یکسان در مرورگرهای مختلف دشوار بود. با افزایش ترس از از دست دادن ماهیت چند پلتفرمی وب، یک نهاد مستقل به نام کنسرسیوم شبکه جهانی وب (W3C) ایجاد شد. این وظیفه W3C بود که استانداردهای ارتباط وب را هنگامی که شروع به کار بر روی DOM می‌کرد، حفظ کند. به دلیل خاصیت DOM است که جاوا اسکریپت توانایی ایجاد HTML پویا را پیدا می‌کند و یک توسعه دهنده می‌تواند بخش‌های مختلف یک فایل را دستکاری کند.

روش‌های مختلفی توسط DOM به عنوان یک رابط برنامه نویسی ارائه شده است که به شما امکان می‌دهد سند HTML را همانطور که می‌خواهید به عنوان یک توسعه دهنده تغییر دهید. در اینجا چند نمونه از ویژگی‌های DOM API آورده شده است:

امکان یافتن عنصری در صفحه وب براساس شناسه یا کلاس آن
امکان تغییر استایل یا محتوای بین تگ‌ها
امکان ردیابی رویدادهای مختلف در صفحه و افزودن شنوندگان رویداد
امکان افزودن یا حذف تگ‌های HTML
و موارد دیگر

با استفاده از شی document در مرورگر می‌توان به DOM دسترسی پیدا کرد. در اینجا یک مثال ساده از دسترسی به یک عنصر با "id="demo به کمک شی document در مرورگر با استفاده از جاوا اسکریپت آورده شده است.

در این لینک لیست تمام خصوصیات و متدهای شی document در مرورگر ذکر شده است.

Browser Object Model یا BOM

درست مانند DOM، Browser Object Model نیز رابطی برای تعامل با مرورگر خارج از متن خود سند است. BOM به دلیل اینکه تنها بخشی از جاوا اسکریپت است که هیچ استانداردی برای کنترل آن وجود ندارد، کاملا مشکل ساز تلقی می‌شود. با این حال، با انتشار HTML5، بسیاری از ویژگی‌های مربوط به BOM از استاندارد رسمی HTML5 جدا شدند که منجر به کاهش آشفتگی در BOM شد.

با استفاده از شی window که نمایانگر پنجره مرورگر است، می‌توان به BOM دسترسی داشت. همه متغیرهای جهانی بخشی از شی window در مرورگرها هستند. بیایید نگاهی به نحوه دسترسی به شی window و خصوصیات آن بیندازیم:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>

</body>
</html>

در زیر چند نمونه از ویژگی‌های ارائه شده توسط BOM API آورده شده است: