مهدی غفاری
مهدی غفاری
خواندن ۵ دقیقه·۳ سال پیش

جاوا اسکریپت چگونه کار میکند ؟ | آکادمی سبزلرن

بنام خدا و سلام خدمت همه ی شما عزیزان علاقه مند به حوزه ی برنامه نویسی

امروز دوباره اومدیم با یه آموزش جذاب دیگه که با هم به ساختار جاوا اسکرپیت پی ببریم

. ببینیم که این زبان قدرتمند و جذاب چطوری کار میکند و از دستورهای ما چگونه بهروری میکنه

پس بدون وقت هدر دادن , بریم که آموزش رو شروع کنیم :)


جاوا اسکریپت یک زبان برنامه‌نویسی برای وب است. این زبان برنامه‌نویسی توسط اکثر مرور‌گر‌ها از قبیل گوگل کروم، فایر‌فاکس، سافاری، اینترنت اکسپلورر، Edge و اُپرا پشتیبانی می‌شود. همچنین اکثر مرور‌گر‌هایی که برای اسمارت‌فون‌ها وجود دارند نیز از جاوا اسکریپت پشتیبانی می‌کنند.

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

سه گانه صفحه وب

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

جاوا اسکریپت چگونه کار می‌کند؟

هنگامی که مرورگر یک صفحه وب را بار‌گذاری می‌کند، تجزیه کننده، اجرای کد‌های HTML را شروع می‌کند و مدل شی‌گرا متن برنامه (DOM) را ایجاد می‌کند. DOM در واقع یک رابط برنامه‌نویسی اپلیکیشن است که متن کد‌های HTML، XHTML یا XML را به‌صورت یک ساختار درختی در‌می‌آورد که در آن هر شاخه، یک شی به نمایندگی از کل برنامه است. پس از آن نوبت به CSS یا جاوا اسکریپت می‌رسد. در این هنگام اجرای کدهای مربوطه به تجزیه‌گر CSS یا موتور جاوا اسکریپت واگذار می‌شود. موتور جاوا اسکریپت، فایل‌های خارجی و همچنین کد‌های داخلی برنامه را بارگذاری می‌کند، ولی هیچ‌یک از کد‌ها را بلافاصله اجرا نمی‌کند. صبر می‌کند تا اجرای کد‌های HTML و CSS کامل شود. پس از آن تمام کد‌ها و هر آنچه که به جاوا اسکریپت مرتبط باشند، اجرا می‌شوند: متغیر‌ها و توابع تعریف شده، توابعی که فراخوانی شده و در حال اجرا هستند و مواردی از این قبیل. نتایج حاصل از این فعالیت‌ها در DOM به‌وسیله جاوا اسکریپت آپدیت شده و توسط مرور‌گر نمایش داده می‌شوند.

ساز و کار جاوا اسکریپت در طراحی سایت


تا اینجای کار ما با یک سازو کار مهم در جاوا اسکریپت اشنا شدیم و تقریبا متوجه شدیم که جاوا اسکریپت چگونه کار می کند

حالا میریم که  سازو کار و کاربرد جاوا اسکریپت رو در طراحی سایت بررسی کنیم. که ما اون رو در طراحی سایت سمت کاربر(front end) بررسی میکنیم .

ببنید همونطور که در مقاله ی چرا باید جاوا اسکریپت را یادبگیریم گفته شد ،html یک زبان نشانه گذاری و css  یک زبان استایل دهی هست که هیچ کدوم از این ها زبان برنامه نویسی نیستن.

و تنها زبان برنامه نویسی استفاده شده جاوا اسکریپت هست که ماهیت داینامیکی رو به وبسایت ما میده و اون رو از حالت استاتیکی(منظور از استاتیک بودن یک سایت ، نداشتن تعامل با کاربر هست که فقط از html , css استفاده شده باشه )در میاره و در واقع عملا هویت سایت مارو تشکیل میده .

که البته نباید تاثیر اون رو در زیباسازی سایت هم نادیده گرفت که از کتابخونه های زیادی میشه برای زیبا سازی و دادن جلوه های خاص ازشون استفاده کرد.

حالا میخام براتون از از محیط اجرایی جاوااسکریپت تو بستر مرورگر بگم (مثل کروم و سافاری و فایرفاکس و …)

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

هر مرورگر ی یه محیط اجرایی جاوا اسکریپت داره که این محیط اجرایی یسری API ها رو در اختیار برنامه نویس قرار میده ، چیزهایی مثل AJAX , DOM , setTimeOut .

اینا جز هسته اصلی خود جاوا اسکریپت نیستن،  اینا آبجکت و متدهایی هستن که مرورگر در محیط اجرایی جاوا اسکریپت خودش در اختیار موتور اصلی برنامه میذاره.

در واقع موتور جاوا اسکریپت جزیی از محیط اجرایی جاوا اسکریپت مرورگر هست.

هر مرورگر موتور مخصوص خودش رو داره، کروم از موتوری به اسم V8 استفاده میکنه که الان میخوایم نگاهی بهش بندازیم.

موتور جاوا اسکریپت V8

اول یه تعریف کلی v8 از ویکی پدیا بخونیم:

Google V8 JavaScript Engine یک موتور جاوااسکریپت متن‌باز است که توسط گوگل توسعه‌یافته و همراه مرورگر گوکل کروم عرضه می‌شود. لارس باک رئیس برنامه‌نویسی آن است.

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

بیشتر افزایش کارایی در آن به‌وسیلهٔ به‌کارگیری فن‌هایی بهینه‌سازی‌ای چون استفاده از نهانگاه درون‌برنامه‌ای (Inline caching) به‌دست می‌آید.

با این قابلیت‌ها برنامه‌هایی که با موتور وی۸ اجرا می‌شوند سرعت خوبی دارا هستند که با کدهای اجرایی کامپایل شده قابل مقایسه است.

the call stack  (پشته اجرایی)

دومین بخش دربردارنده تو این محیط پشته ی اجرایی که اصطلاحا call stack بهشون گفته میشه .

که اینم جزئی از هسته ی اصلی موتور جاوااسکریپته .وقتی موتور به کد های اجرایی میرسه اون هارو تو این بخش لسیت میکنه تا اجراشون کنه .

وقتی مثلا یه تابع تو استک لیست میشه .

جاوا اسکریپت کداش رو تجزیه میکنه و متغیرهاش رو از حافظه فراخوانی میکنه (فرض براینه که شما اشنایی نسبی با برنامه نویسی دارین و میدونین فراخوانی متغیر به چه معنی هست )

وقتی این تابع مقداری رو برمیگردونه سریعا ازلیست استک حذف میشه ومیره سراغ تابع بعدی .

اگه بعد از اجرا و حل کردن یک تابع هیچ مقداری به طوری مشخصی برگشت داده نشه موتور مقدار undefind رو برمیگردونه و تابع رو از لیست خارج میکنه .

خب دوستان این هم از عملکرد جزئی و شمای کلی از تو این مقاله میخوایم شیوه ی عملکرد زبان جاوا اسکریپت رو بررسی کنیم و در مورد اینکه جاوا اسکریپت چگونه کار میکند ؟ صحبت کردیم.که البته این بحث خیلی مفصل هست و سعی کردم در حدی که توی یک مقاله جا بشه و مفید و کافی باشه براتون بنویسم امیدوارم  مورد استفاده تون قرار گرفته شده باشه .روزتون خوش امیدوارم که این مطلب براتون مفید واقع بوده باشه .

جاوا اسکریپتبرنامه نویسیآموزش برنامه نویسی
علاقه مند به سطح اینترنت و برنامه نویسی
شاید از این پست‌ها خوشتان بیاید