۲۵ ژوئیه ۲۰۲۲

محیط مرورگر و خصوصیات (Specs)

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

یک پلتفرم می‌تواند یک مرورگر، وب-سرور، یا یک ماشین لباسشویی یا هر میزبان دیگری یا حتی یک ماشین قهوه‌ساز «هوشمند» باشد اگر بتواند جاوااسکریپت را اجرا کند. هر کدام از این‌ها عملکرد مختص به آن پلتفرم را فراهم می‌کند. مشخصه‌ی جاوااسکریپت (JavaScript specification) آن را یک محیط میزبانی (host environment) می‌نامد.

یک محیط میزبانی اشیاء و توابع اضافی مربوط به پلتفرم را به هسته‌ی اصلی زبان می‌افزاید. مرورگرهای وب ابزاری برای کنترل کردن صفحات وب می‌دهند. Node.JS قابلیت‌های سمت سرور را فراهم میسازد و غیره.

اینجا نمایی کامل از چیزهایی که هنگام اجرای جاوااسکریپت درون یک مرورگر وب داریم را می‌بینیم:

در ادامه یک نگاه سریع به اتفاقی‌ست که وقتی ما جاوااسکریپت را در مرورگر وب اجرا می‌کنیم، می‌افتد:

یک شئ پایه‌‌ای (root) به نام window داریم که دو نقش دارد:

۱. اولا، یک شئ سراسری (Global Object) برای کد جاوااسکریپت است، همینطور که در بخش شیء گلوبال توضیح داده‌ شد.

۲. دوما، صفحه‌ی مرورگر (Browser Window) را نمایش میدهد و توابعی برای کنترل آن فراهم می‌سازد.

برای نمونه، ما اینجا به عنوان یک شئ سراسری استفاده‌ش میکنیم:

function sayHi() {
  alert("Hello");
}

// global functions are methods of the global object:
window.sayHi();

و ما اینجا به عنوان یک صفحه‌ی مرورگر از آن برای دیدن ارتفاع صفحه استفاده می‌کنیم:

alert(window.innerHeight); // inner window height

توابع و مشخصه‌های مربوط به صفحه (window-specific) بیشتری وجود دارد که در بخش‌های بعدی به آنها خواهیم پرداخت.

Document Object Model (DOM)

شئ document دسترسی مارا به محتویات صفحه فراهم می‌سازد. ما میتوانیم هرچیزی که در صفحه‌ از آن استفاده می‌شود را بسازیم یا تغییر بدهیم.

Document Object Model یا به اختصار DOM، تمام محتوای صفحه به صورت شیءهایی که می‌توانند تغییر پیدا کنند نمایش می‌دهد.

شیء document «نقطه ورود» اصلی به صفحه است. می‌توانیم با استفاده از آن هر چیزی در صفحه را تغییر دهیم یا ایجاد کنیم.

برای نمونه:

// رنگ پس‌زمینه را به قرمز تغییر میدهیم
document.body.style.background = "red";

// سپس بعد از یک ثانیه به حالت قبل بازمیگردانیم
setTimeout(() => document.body.style.background = "", 1000);

در اینجا ما از document.body.style استفاده کردیم، اما بیشتر هم هست. خیلی بیشتر! توابع و مشخصه‌ها در خصوصیات زبان توضیح داده شده‌اند: DOM Living Standard.

به نظر شخصی من، https://dom.spec.whatwg.org برای استفاده مناسب است.

DOM فقط برای مرورگرها نیست

خصوصیات DOM ساختار یک document را توصیف می‌کند و اشیائی برایی تغییر آن فراهم می‌کند. همینطور ابزارهای غیر-مرورگری‌ای هستند که از آن استفاده می‌کنند.

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

CSSOM برای استایل دادن

قوانین CSS و شیوه‌نامه (stylesheets) مشابه HTML ساختاربندی نشده‌ند. یک خصوصیت مجزا CSSOM که نمایان شدنشان به شکل اشیا و نحوه نوشته و خوانده شدنشان را توصیف میکند.

CSSOM همراه با DOM برای تغییر و تصحیح قوانین استایل برای document استفاده می‌گردد. اگرچه در عمل، CSSOM به ندرت مورد استفاده‌ میگیرد، به این علت که ما به ندرت نیاز داریم که قوانین CSS را در جاوااسکریپت حذف یا اضافه کنیم (معمولا ما فقط کلاس‌های CSS را اضافه/حذف می‌کنیم نه اینکه قوانین CSS آن‌ها را تغییر دهیم)، اما این کار هم قابل انجام است.

BOM (قسمتی از خصوصیت HTML)

مدل اشیا مرورگر (Browser Object Model یا BOM)، اشیا افزوده‌ای هستند که توسط مرورگر فراهم میشوند (محیط میزبانی یا host environment) تا با هرچیزی به جز document کار کنند.

برای نمونه:

  • شئ navigator اطلاعات پس‌زمینه در مورد مرورگر و سیستم‌های عامل فراهم می‌کند. مشخصه‌های زیادی هستند، اما دو مورد معروف آن: navigator.userAgent که درباره مرورگر کنونی‌ست و navigator.platform که درباره پلتفرم است (کمک میکند که بین ویندوز/لینوکس/مک و بقیه بتوانیم تمایز قائل شویم).
  • شئ location به ما اجازه خواندن URL کنونی را می‌دهد و می‌تواند مرورگر به صفحه‌ی جدیدی انتقال یابد.

نحوه‌ی استفاده از شئ location:

alert(location.href); // shows current URL
if (confirm("Go to wikipedia?")) {
  location.href = "https://wikipedia.org"; // redirect the browser to another URL
}

توابع alert/confirm/prompt همچنین قسمتی از BOM هستند: مستقیما به document مربوط نیستند اما توابع مختص مرورگر برای ارتباط با کاربر را نمایش می‌دهند.

HTML خصوصیت

BOM قسمتی از HTML specification عمومی است.

بله، درست متوجه‌ شدید. خصوصیت HTML در https://html.spec.whatwg.org نه تنها درباره “HTML زبان” (tags, attributes) است، بلکه مجموعه‌ای از اشیا، توابع و افزونه‌های DOM مربوط به مرورگر را هم پوشش می‌دهد. این معنی HTML در حالتی کلی‌ست. همچنین بعضی از قسمت‌ها مشخصات اضافی دارند که در https://spec.whatwg.org لیست شده است.

خلاصه

در بحث استانداردها داریم:

خصوصیت DOM
ساختمان document، تغییرها و اتفاقات (events) را توصیف می‌کند. https://dom.spec.whatwg.org
خصوصیت CSSOM
شیوه‌نامه و قواعد استایل دادن، تغییر آنها با اتصال آنها به documents را توصیف می‌کند. https://www.w3.org/TR/cssom-1/
خصوصیت HTML
زبان HTML (چیزهایی مثل tags) و همینطور BOM و توابع مرورگر مختلف را توصیف می‌کند: setTimeout، alert، location و غیره. https://html.spec.whatwg.org. خصوصیت DOM را می‌گیرد و با بسیاری از مشخصه‌ها و توابع آنرا بسط می‌دهد.

اضافه بر این، بعضی از کلاس‌ها به طور جداگانه در https://spec.whatwg.org/ توضیح داده شده‌اند.

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

هنگامی که می‌خواهید راجب یک مشخصه یا یک تابع مطالعه کنید، راهنمای Mozilla در https://developer.mozilla.org/en-US/search منبع خوبیست اما خواندن خصوصیت مربوطه بهتر است: پیچیده‌تر است وخواندش طولانی‌تر است اما دانش پایه‌ای شما را کامل و درست می‌کند. حالا میرویم برای یادگیری DOM، چراکه document نقش اصلی در رابط کاربری را دارد.

نقشه آموزش

نظرات

قبل از نظر دادن این را بخوانید…
  • اگر پیشنهادی برای بهبود ترجمه دارید - لطفا یک ایشوی گیت‌هاب یا یک پول‌ریکوئست به جای کامنت‌گذاشتن باز کنید.
  • اگر چیزی را در مقاله متوجه نمی‌شوید – به دقت توضیح دهید.
  • برای قراردادن یک خط از کد، از تگ <code> استفاده کنید، برای چندین خط – کد را درون تگ <pre> قرار دهید، برای بیش از ده خط کد – از یک جعبهٔ شنی استفاده کنید. (plnkr، jsbin، codepen…)