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

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

سه لایه‌ی تشکیل‌دهنده‌ی وب

تقریباً تمام صفحات وب از ۳ جزء اصلی تشکیل می‌شوند. HTML، CSS و JavaScript. HTML برای ایجاد محتوای صفحات وب به کار برده می‌شود. CSS نیز برای اعمال سبک‌های نمایشی مختلف به محتوا به کار برده می‌شود. و جاوا اسکریپت نیز برای افزودن قابلیت‌های تعاملی به صفحات وب به کار برده می‌شود.

هر لایه‌ای مبتنی بر لایه‌ی قبلی است. یک صفحه‌ی وب می‌تواند به تنهایی با استفاده از HTML ایجاد شود، اما با CSS و JavaScript به تنهایی نمی‌توان یک صفحه‌ی وب را ایجاد کرد. در واقع CSS و JavaScript مکمل HTML در طراحی صفحات وب هستند. در روزهای اولیه‌ی پیدایش وب، تمام صفحات وب صرفاً با HTML ایجاد می‌شدند و اعمال برخی سبک‌های نمایشی ساده به محتوای صفحات با استفاده از HTML امکان‌پذیر بود. بعدها زبان CSS برای اعمال سبک‌های نمایشی پیشرفته‌تر به عنوان یک لایه‌ی مجزا به صفحات وب اضافه شد. همچنین با توجه به نیاز بیشتر کاربران برای تعامل با صفحات وب نیز، زبان برنامه‌نویسی جاوا اسکریپت به این مجموعه اضافه شد. (البته به لحاظ تاریخی جاوا اسکریپت قبل از CSS به وجود آمده است.)

این لایه‌ها را از هم جدا کنید

اکیداً توصیه می‌شود که کدهای مربوط به این ۳ لایه را از هم تفکیک کنید. با این کار هر لایه فقط مسئول مدیریت یک وظیفه است. قرار دادن کدهای این زبان‌ها در یک فایل باعث شلوغی بیش از حد کدها و کم شدن خوانایی کدها می‌شود که اصطلاحاً به این نوع کدها “کد اسپاگتی” گفته می‌شود. جداسازی این ۳ لایه، به عنوان روش استاندارد تولید صفحات وب به کار برده می‌شود و مثال‌های متعددی از این نوع پیاده‌سازی را می‌توان در سطح وب یافت.

جاوا اسکریپت تفکیک شده (Unobtrusive JavaScript) ^۱

در اوایل پیدایش جاوا اسکریپت، کدهای جاوا اسکریپت مستقیماً داخل کدهای HTML قرار داده می‌شدند. یک نمونه از این نوع کدنویسی را در قطعه زیر می‌توانید مشاهده کنید.

<button id="button" onclick="alert('سلام دنیا!')">Click Me</button>

قطعه کد فوق دکمه‌ای را در صفحه‌ی وب ایجاد می‌کند که با کلیک شدن آن، پیغام “سلام دنیا!” به کاربر نمایش داده می‌شود.

با توجه به ترکیب شدن کدهای HTML و JavaScript، خوانایی کد فوق و درک نحوه‌ی عملکرد آن کمی دشوار است. همچنین به دلیل ارتباط تنگاتنگ کدهای HTML و JavaScript، در صورت نیاز به ویرایش کدهای HTML، کدهای JavaScript نیز باید ویرایش شوند.

این امکان وجود دارد که کدهای HTML را از کدهای JavaScript تفکیک کرده و کل کدهای JavaScript را داخل یک تگ <script> قرار دهیم. قطعه کد زیر، عملکردی معادل قطعه کد قبلی دارد. اما همانطور که مشاهده می‌شود کدهای HTML و JavaScript از هم تفکیک شده‌اند.

<button id="button">Click Me</button>
<script>
var btn = document.getElementById("button");
btn.addEventListener("click", function() {
	alert("سلام دنیا!");
});
</script>

این روش به مراتب بهتر از روش قبلی است. چرا که کدهای JavaScript و کدهای HTML از هم تفکیک شده‌اند. البته شاید اینطور به نظر برسد که استفاده از این روش باعث طولانی‌تر شدن کدنویسی می‌شود. در این مثال ساده همینطور است. اما در برنامه‌های واقعی که تعداد خطوط برنامه بیشتر است چنین اتفاقی نخواهد افتاد.

اما هنوز یک قدم دیگر تا دستیابی کامل به جاوا اسکریپت تفکیک شده باقی مانده است. همانطور که مشاهده کردید، در قطعه کد فوق، همچنان کدهای JavaScript و کدهای HTML در یک فایل ذخیره شده‌اند. این امکان وجود دارد تا کل کدهای JavaScript را در یک فایل جداگانه ذخیره کرده و تنها فایل مربوطه را به سند HTML ضمیمه کنیم. می‌توان کل کدهای داخل تگ <script> را در فایلی جداگانه ذخیره کرد و با کد زیر آن را به سند HTML ضمیمه کرد. (فرض شده است که نام فایل جاوا اسکریپت main.js است و در همان مسیری قرار دارد که فایل HTML قرار گرفته است.)

<script src="main.js"></script>

این روشی است که معمولاً در عمل توسط توسعه دهندگان به کار برده می‌شود که به آن جاوا اسکریپت تفکیک شده یا Unobtrusive JavaScript گفته می‌شود.

ایده‌ی مشابهی برای کدهای CSS نیز به کار گرفته می‌شود. یعنی کل کدهای CSS در یک فایل مجزا ذخیره شده، سپس فایل مربوطه با استفاده از تگ <link> به سند HTML ضمیمه می‌شود. در این صورت فایل مربوط به سند HTML هم فقط شامل کدهای HTML خواهد بود. این مناسب‌ترین روش برای ایجاد یک صفحه‌ی وب با HTML، CSS و JavaScript است که در طول این کتاب نیز از همین روش استفاده خواهد شد. البته با توجه به اینکه هدف این کتاب آموزش جاوا اسکریپت است، در بسیاری از مثال‌ها از CSS استفاده نمی‌شود و از HTML نیز به صورت حداقلی استفاده خواهد شد.

[ ۱ ]– کلمه‌ی Unobtrusive از نظر لغوی به معنای “محجوب” یا “منزوی” است. اما به نظر می‌رسد در این مورد خاص استفاده از کلمه‌ی “تفکیک شده” مناسب‌تر باشد.