سه بخش اصلی JavaScript

2110 بازدید

دسته بندی: برنامه نویسی وب - طراحی وب منتشر شده در 2 اسفند 1399 نویسنده: مدیر سایت زمان مطالعه: 6 دقیقه 0 نظر

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

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

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

JavaScript Runtime یا میزبان JavaScript چیست؟

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

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

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

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

بیایید برای درک جزئیات هر یک از این اجزا، عمیق تر وارد آنها شویم.

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

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

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

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 است که JavaScript توانایی ایجاد HTML پویا را پیدا می کند و یک توسعه دهنده می تواند المان های مختلف یک سند را دستکاری کند.

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

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

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

در اینجا لیست رسمی تمام خصوصیات و روش های شی 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 آورده شده است:

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

در اینجا لیست رسمی تمام خصوصیات و روش های Browser Object Model موجود است.

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

ترجمه و بازنویسی اختصاصی از لرن نیکو / منبع

آیا این مطلب را می پسندید؟

https://learnniko.ir/?p=1327

سایت متریال فارسی | ابزارهای رایگان متریال برای طراحان و برنامه نویسان

مدیر سایت

مطالب بیشتر

نظرات

0 نظر در مورد سه بخش اصلی JavaScript

دیدگاهتان را بنویسید لغو پاسخ

هیچ دیدگاهی نوشته نشده است.

سه بخش اصلی JavaScript

JavaScript Runtime یا میزبان JavaScript چیست؟