اگر قصد دارید یک برنامه نویس فرانت اند باشید، باید ۳ زبان اصلی html و css و جاوا اسکریپت رو به خوبی یاد بگیرید. زبان جاوا اسکریپت یک زبان قدرتمند فرانت اند هست که در حوزه های طراحی اپلیکیشن، طراحی صفحات وب و… کاربرد بسیار زیادی داره. پس یادگیری اون برای برنامه نویسان فرانت اند الزامیه. اما قبل از یادگیری این زبان، اول باید بدونید که جاوا اسکریپت چگونه کار میکند؟ در این مطلب قصد داریم به طور کامل نحوه عملکرد جاوا اسکریپت رو با ذکر مثال و توضیح بررسی کنیم.
درسته که موضوع اصلی مقاله ما راجب زبان جاوا اسکریپت چگونه کار میکند و نحوه عملکرد زبان جاوا اسکریپت است؛ ولی خب قبل از اون لازم هست که شما رو با برنامه نویسی Asynchronous (آسنکرون) و synchronous(سنکرون) اشنا کنم .
برنامه نویسی سنکرون به معنی برنامه نویسی غیر هم زمان هست . حالا این یعنی چی؟! خب برای درک واضح تر و بیشتر شما دوستان عزیز با یک مثال براتون توضیح میدم که کاملا متوجه این سبک برنامه نویسی بشین.شما درنظر بگیرین که وارد فروشگاهی شدین و یه تعداد وسیله برداشتین. قاعدتا برای پرداخت کردن پول وسائلی که برداشتین باید تو صف بایستین و منتظر باشین تا نفرجلوییتون کارش تموم بشه.
فارغ از اینکه نفر جلویی شما 50 تا وسیله خریده یا یدونه یا هزار تا و اصلا هم مهم نیست که شما تعداد خرید کمتری دارین. شما باید توی صف بایستین تا مراحل خرید و پرداخت نفرجلوییتون تموم بشه .درسته ؟! حالا همین روند داخل برنامه نویسی رو میگن برنامه نویسی سنکرون و این روند داخل کد چه معنیی میده ؟! به این معنی هست که کد ها به صورت غیر همزمان اجرا میشن.
یعنی برای مثال اگر برای اجرای یک قطعه کدی نیاز به ده ثانیه (البته که این تایم برای سایت فاجعه ست ولی خب مثاله:)) زمان لازم باشه منتظر میمونه تا اون قطعه کد کارش رو انجام بده و بعد از اتمام کار وارد قطعه کد بعدی میشه !. دیگه خودتون متوجه اتلاف وقت تو برنامه نویسی سنکرون بشین!!!
در ادامه موضوع زبان جاوا اسکریپت چگونه کار میکند، حالا میریم سراغ برنامه نویسی آسنکرون، که به معنی برنامه نویسی هم زمان هست که برای توضیح این مدل برنامه نویسی هم براتون مثال میزنم . برای این قسمت اگه بخام مثال بزنم میتونم به رستوران اشاره بکنم . شما وقتی میرین رستوران و به طور مثال ده پرس شیشلیک. سفارش دادین و یک ربع هم هست که منتظر نشستین. اما یکی بعد از شما میاد و مثلا یه ساندویچ ساده سفارش میده و سریع و قبل از شما سفارشش اماده میشه . چرا؟
چون تو همون تایمی که طول میکشه تا ده تا پرس شیشلیک اماده بشه ، میشه تو وقت صرفه جویی کرد و سفارش اون بنده خدارو هم اماده کرد پس چرا اینکارو نکنن ؟
خب حالا می رسیم به پاسخ این سوال که جاوا اسکریپت چگونه کار میکند ؟ زبان جاوا اسکریپت به این روش کار میکنه، که اگر قطعه کدی یه مدتی طول بکشه تا کارش تموم بشه. مثلا قرار باشه از سرور اطلاعاتی رو بگیره یا هرچیز دیگه ای و بعد از اون قطعه کدی باشه که به هیچ زمانی نیاز نداشته باشه اول سراغ قطعه کد دوم میره و اون رو اجرا میکنه و بعد برمیگرده سراغ قطعه کد قبلی
اینجوری سرعت پردازش زبان جاوا اسکریپت افزایش پیدا میکنه البته آسنکرون بودن زبان جاوا اسکریپت یک سری مشکلاتی ایجاد میکنه و برای رفع اون ها call back , promiss و async-await در اکما اسکریپت 6و 7و … روی کار اومدن که بحث خیلی مفصلی هست و اگر لازم شد راجبش در یک مقاله ی دیگه ای توضیح میدم .
تا اینجای مطلب زبان جاوا اسکریپت چگونه کار میکند، ما با یک سازو کار مهم در جاوا اسکریپت اشنا شدیم و تقریبا متوجه شدیم که جاوا اسکریپت چگونه کار میکند حالا میریم که سازو کار و کاربرد جاوا اسکریپت رو در طراحی سایت بررسی کنیم. ما این زبان رو در طراحی سایت سمت کاربر(front end) بررسی میکنیم . ببینید همونطور که در مقاله ی چرا باید جاوا اسکریپت را یادبگیریم گفته شد ،html یک زبان نشانه گذاری و css یک زبان استایل دهی هست که هیچ کدوم از این ها زبان برنامه نویسی نیستن.
تنها زبان برنامه نویسی استفاده شده جاوا اسکریپت هست که ماهیت داینامیکی رو به وبسایت ما میده و اون رو از حالت استاتیکی(منظور از استاتیک بودن یک سایت ، نداشتن تعامل با کاربر هست که فقط از html , css استفاده شده باشه) در میاره و در واقع عملا هویت سایت مارو تشکیل میده . البته نباید تاثیر اون رو در زیباسازی سایت هم نادیده گرفت که از کتابخونه های زیادی میشه برای زیبا سازی و دادن جلوه های خاص ازشون استفاده کرد.
تو این قسمت از مقاله نحوه عملکرد زبان جاوا اسکریپت، میخوام براتون از از محیط اجرایی جاوااسکریپت تو بستر مرورگر بگم (مثل کروم و سافاری و فایرفاکس و …). به طور کلی هر مرورگری یه محیط اجرایی جاوا اسکریپت داره که این محیط اجرایی یسری API ها رو در اختیار برنامه نویس قرار میده ، چیزهایی مثل AJAX , DOM , setTimeOut .
اینا جز هسته اصلی خود جاوا اسکریپت نیستن، اینا آبجکت و متدهایی هستن که مرورگر در محیط اجرایی جاوا اسکریپت خودش در اختیار موتور اصلی برنامه میذاره. در واقع موتور جاوا اسکریپت جزیی از محیط اجرایی جاوا اسکریپت مرورگر هست. هر مرورگر موتور مخصوص خودش رو داره، کروم از موتوری به اسم V8 استفاده میکنه که در ادامه میخوایم نگاهی بهش بندازیم.
اول یه تعریف کلی v8 از ویکی پدیا بخونیم:
“Google V8 JavaScript Engine یک موتور جاوااسکریپت متن‌باز است که توسط گوگل توسعه‌یافته و همراه مرورگر گوکل کروم عرضه می‌شود. لارس باک رئیس برنامه‌نویسی آن است.”
وی۸ با کامپایل کردن جاوااسکریپت به زبان محلی ماشین قبل از اجرا به جای اجرای بایت کد یا سپردن آن به مفسر کارایی را افزایش می‌دهد. بیشتر افزایش کارایی در آن به‌وسیلهٔ به‌کارگیری فن‌هایی بهینه‌سازی‌ای چون استفاده از نهانگاه درون‌برنامه‌ای (Inline caching) به‌دست می‌آید. با این قابلیت‌ها برنامه‌هایی که با موتور وی۸ اجرا می‌شوند سرعت خوبی دارا هستند که با کدهای اجرایی کامپایل شده قابل مقایسه است.
زمانی که کروم کدهای جاوا اسکریپت رو دریافت میکنه، موتور V8 شروع به تجزیه اونها میکنه. در ابتدا کل کدها یکبار چک میشن تا مشکل و خطای سینتکسی نداشته باشن. اگر در این مرحله خطایی مشاهده نشد، موتور شروع به خوندن کدها از بالا به پایین میکنه. هدف نهایی اینه که کدهای جاوا اسکریپت تبدیل به کدهای ماشین بشن تا کامپیوتر بتونه اونها رو متوجه بشه. اما قبل از اینکه بخوایم بفهمیم دقیقا چه اتفاقی داره میوفته، باید محیط اجرایی جاوا اسکریپت در مرورگر رو خوب متوجه بشیم.
در ادامه مطلب نحوه عملکرد زبان جاوا اسکریپت، محیط اجرایی این زبان رو مورد بررسی قرار میدیم. این محیط رو مثل یک بخش بزرگ (دربردارنده) در نظر بگیرین، یک بخش بزرگی که درونش چندین بخش کوچکتر و مستقل دیگه وجود داره؛ زمانی که موتور جاوا اسکریپت شروع به تجزیه و تحلیل کدها میکنه، هر بخشی از کد با توجه به عملکردی که داره درون یکی از این بخش هاقرار میگیره.
اولین بخش دربردارنده تواین محیط که جزئی از موتور جاوااسکریپته همون پشته ی حافظه ی خودمونه (memory heap). وقتی موتور به متغیر ها و توابع میرسه اونا رو این جا ذخیره میکنه و هر وقت بهشون احتیاج داشته باشه ازشون استفاده میکنه.
دومین بخش دربردارنده تو این محیط پشته ی اجرایی که اصطلاحا call stack بهشون گفته میشه. که در ادامه مطلب زبان جاوا اسکریپت چگونه کار میکند با اون آشنا میشید. اینم جزئی از هسته ی اصلی موتور جاوااسکریپته .وقتی موتور به کد های اجرایی میرسه اون هارو تو این بخش لیست میکنه تا اجراشون کنه . وقتی مثلا یه تابع تو استک لیست میشه .جاوا اسکریپت کداش رو تجزیه میکنه و متغیرهاش رو از حافظه فراخوانی میکنه (فرض براینه که شما اشنایی نسبی با برنامه نویسی دارین و میدونین فراخوانی متغیر به چه معنی هست )
وقتی این تابع مقداری رو برمیگردونه سریعا ازلیست استک حذف میشه ومیره سراغ تابع بعدی . اگه بعد از اجرا و حل کردن یک تابع هیچ مقداری به طوری مشخصی برگشت داده نشه موتور مقدار undefind رو برمیگردونه و تابع رو از لیست خارج میکنه. شکل زیر ساز و کار کلی جاوا اسکریپت را نشون میده.
منبع:
