در مقاله جاوا اسکریپت در مرورگرها، اولین کد جاوا اسکریپتی که خیلی ساده بود و فقط پیام Hello World را در کنسول ثبت می کرد، نوشتیم و اون رو در مرورگر اجرا کردیم. اما واقعیت اینه که در یک برنامه واقعی ممکنه هزاران یا حتی در برنامه های بزرگ سازمانی (Enterprise) میلیون ها خط کد جاوا اسکریپتی داشته باشیم. کاملا بدیهی هستش که این مقدار کد رو نباید مستقیما به صورت اصطلاحا توکار (Inline) داخل فایل html بنویسیم. پس راه حل چیه؟ راه حل پیروی از یک اصل در برنامه نویسی به نام SoC یا Separation of Concerns (جداسازی قابلیت ها یا رفتارها) است. این اصل به مقدار خیلی زیادی قابلیت استفاده مجدد از کد، تست پذیری و نگهداری پذیری نرم افزار را افزایش می دهد.
بگذارید با یک مفهوم استعاری یا انتزاعی شروع کنیم تا موضوع قابل فهم تر بشه. فضای منزلتون رو در نظر بگیرید. در یک منزل نوعی اتاق های متعددی وجود داره. حالا بگید جای تخت خواب داخل اتاق خواب هستش یا داخل آشپزخونه؟ مطمئنا جای تخت خواب در اتاق خواب هستش. این مثال، مصداق همون مفهومی هستش که در برنامه نویسی اون را SoC می گیم.
در یک صفحه وب، محتوا (Content) به کمک html پیاده سازی می شه، نقش جاوا اسکریپت هم پیاده سازی رفتار (Behavior) هاست. مثلا اینکه وقتی نشانگر ماوس رو بر روی المانی از محتوای صفحه بردیم، آن المان اندازه اش تغییر کند یا اینکه پنهان شود یا اینکه کادری به صورت pop-up نمایش داده شود. پر واضح هستش که محتوا و رفتار دو مقوله جدا از هم هستن پس باید اون ها رو از هم جدا کنیم.
پوشه js-bascis که در پست های آموزشی قبلی ایجاد کرده بودیم رو با ماوس کشیده و روی ویرایشگر VS Code رها کنید. در تب اکسپلور، داخل پوشه js-basics و در کنار فایل index.html یک فایل جدید به نام index.js ایجاد کنید. حالا فایل index.html را باز کرده و کدهای جاوا اسکریپتی که در پست قبل داخل تگ script نوشته بودیم رو برداشته و به داخل فایل index.js منتقل کنید و اون رو ذخیره کنید.
در این مثال خیلی ساده ما فقط یک فایل جاوا اسکریپت داریم اما در برنامه های واقعی بزرگ ممکنه صدها یا حتی هزاران فایل جاوا اسکریپتی مجزا داشته باشیم. در آموزش های آتی به شما خواهم گفت که چطور می تونیم فایل های مجزای جاوا اسکریپتی یک برنامه رو بعد از توسعه کامل برنامه، به صورت یک فایل یکپارچه (Bundle) در بیاریم و اون رو برای اجرا به سمت کلاینت یا همون مرورگر بفرستیم.
حالا که کدهای html و javascript برنامه رو از هم جدا کردیم. بایستی در فایل index.html به فایل index.js ارجاع بدیم. برای اینکار کافیه تا به تگ script که کدهای داخلش رو اخیرا به فایل دیگه ای منتقل کردیم، یک خصوصیت به نام src اضافه کرده و مقدارش رو برابر با آدرس محل قرار گیری فایل index.js نسبت به محل فایل index.html قرار بدیم. مثل زیر:
با این کار به مرورگر می گیم که کدهای جاوا اسکریپت برنامه هم اکنون در فایل index.js قرار دارند. تغییرات فایل index.html را ذخیره کنید. سپس بر روی فایل index.html در تب اکسپلورر کلیک راست کرده و گزینه Open With Live Server را انتخاب کنید. مرورگر پیش فرض شما باز شده و به طور خودکار به آدرس http://127.0.0.1:5500/index.html هدایت خواهد شد. داخل مرورگر بر روی یک فضای خالی کلیک راست کرده و گزینه Inspect را انتخاب کنید یا از دکمه های میانبر Ctrl + Shift + I (در ویندوز) استفاده نمائید. پنجره Developer Tools برایتان باز می شود. در پنجره باز شده بر روی تب Console کلیک نمائید. حالا مشاهده خواهید کرد که عبارت Hello World در خط فرمان برایتان ثبت (Log) شده است. این نشان می دهد که برنامه ساده ما بعد از جداسازی کدها نیز به درستی کار می کند.
در مقاله بعدی دوره آموزش جاوا اسکریپت برای مبتدی ها، به موضوع زیر خواهیم پرداخت :
