محیط مرورگر و خصوصیات (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 برای استفاده مناسب است.

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 مربوط نیستند اما توابع مختص مرورگر برای ارتباط با کاربر را نمایش می‌دهند.

خلاصه

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

خصوصیت 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 نقش اصلی در رابط کاربری را دارد.