مبانی جاوا اسکریپت JavaScript

کنسول جاوا اسکریپت چگونه کار می‌کند؟ اول از همه، برای درک این سوال باید بفهمیم که کنسول چیست. هر زمان که به کنسول‌ها فکر می‌کنید، به پلی‌استیشن‌ها یا ایکس باکس‌ها فکر نکنید، به دهه ۸۰ فکر کنید وقتی که کامپیوترها از رابط‌های کاربری گرافیکی برخوردار نبودند. در عوض، آنها تنها ورودی مستقیم از صفحه‌کلید را مجاز می‌دانستند؛ این یک رابط متن یا کنسول استاندارد است. بنابراین پاسخ این است که کنسول به سادگی جایی است که می‌توانیم دستورات متنی را مستقیماً اجرا کنیم. هیچ دکمه یا اشاره‌گری وجود ندارد، همه چیز از طریق صفحه‌کلید است!

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

جاوا اسکریپت دارای یک نحوه نگارش بسیار خاص است، با این حال، حتی برای حرفه‌ای‌های با تجربه نیز می‌تواند درک این زبان را گیج‌کننده کند. اول، منظور من از 'نحو' چیست؟ نحو به سادگی شیوه‌ای است که یک زبان برنامه‌نویسی نوشته می‌شود، به عنوان مثال CPP، C#، جاوا، HAXE، اکشن‌اسکریپت و بسیاری از زبان‌های دیگر به شیوه‌ای خاص نوشته می‌شوند. این همان نحو است و جاوا اسکریپت نحو مخصوص به خود را دارد.

جاوااسکریپت دارای انواع بنیادی زیادی است که یک برنامه را تشکیل می‌دهند. در واقع هر زبانی باید مجموعه‌ای استاندارد از مقادیر بنیادی را ارائه دهد و جاوااسکریپت نیز از این قاعده مستثنی نیست. برای درک بهتر این زبان، باید با مقادیر بنیادی (پایه) که جاوااسکریپت ارائه می‌دهد، شروع کنیم. این جلسه شامل انواع بنیادی رشته، عدد، بولین، null، undefined و NaN خواهد بود.

متغیرها و ثوابت در جاوا اسکریپت برای ذخیره‌سازی داده‌ها بسیار مهم هستند. این درس به بررسی نحوه راه‌اندازی یک متغیر می‌پردازد که بسیار آسان است و ذخیره‌سازی داده‌های اولیه در آن متغیر. همچنین کمی بیشتر از آن پیش خواهیم رفت. وقتی یک متغیر ایجاد می‌کنید چه اتفاقی می‌افتد؟ آیا می‌دانید؟

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

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

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

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

آرایه‌ها در جاوا اسکریپت به عنوان اشیاء شناخته می‌شوند، همانطور که دیده‌ایم. آرایه‌ها داده‌ها را به یکدیگر گروه‌بندی می‌کنند، مانند یک شیء، که این امکان را به برنامه‌های ما می‌دهد تا قدرت بیشتری داشته باشند. به عبارت ساده، بدون گروه‌بندی داده‌ها، ما هیچ راهی برای ایجاد ساختارهای داده پیشرفته یا برنامه‌ها نخواهیم داشت. بنابراین، آنچه ما انجام داده‌ایم فقط ایجاد یک آرایه پایه است؛ اما می‌خواهیم این دانش را کمی بیشتر پیش ببریم و آرایه‌ها را درون آرایه‌ها قرار دهیم تا بیشتر درباره سلسله‌مراتب اشیاء یاد بگیریم.

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

ما می‌توانیم از تشبیه جعبه‌ها درون جعبه‌ها استفاده کنیم، گروه‌بندی متغیرها یا جعبه‌های کوچکتر. متغیرها می‌توانند داده‌های اولیه و توابع را مانند کلیدهایی که در اشیاء وجود دارند، در خود جای دهند. بنابراین بهترین تشبیهی که می‌توانیم استفاده کنیم، جعبه‌هایی درون جعبه‌های دیگر است، هر جعبه یک کلید دارد و می‌توانیم هر جعبه را هنگام درخواست آن کلید_access کنیم. این مفهوم بسیار ساده می‌تواند برنامه‌های ما را به سطحی شگفت‌انگیز از پتانسیل برساند و انعطاف‌پذیری و ساختار بیشتری فراهم کند.

در این سخنرانی، ما به بررسی تغییر یک آرایه که یک شیء است با استفاده از عملگرهای دسترسی به اعضای استاندارد و محاسبه شده خواهیم پرداخت. با این حال، من به شما نشان می‌دهم که چرا نباید این کار را انجام دهید و چگونه می‌توانید از مشکلات بعدی جلوگیری کنید.

Here is the translation of the provided text into Persian: توابع در جاوا اسکریپت به عنوان شهروندان درجه یک یا اشیاء قابل فراخوانی در نظر گرفته می‌شوند. به عبارت دیگر، آنها اشیاء هستند. زمینه یک شیء استاندارد متشکل از ویژگی‌ها و متدها است. با این حال، اشیاء قابل فراخوانی دارای زمینه اجرایی هستند که متشکل از لیستی از دستوراتی است که باید بر روی کامپیوتر اجرا شود. دقیقاً مانند اشیاء، اشیاء قابل فراخوانی می‌توانند درون یک متغیر، ثابت یا حتی یک پارامتر قرار گیرند. بله، شما حتی می‌توانید یک تابع را به تابع دیگری منتقل کنید اگر مایل باشید.

توابع در جاوااسکریپت به عنوان موجودات درجه اول یا اشیاء قابل فراخوانی در نظر گرفته می‌شوند. به عبارت دیگر، آن‌ها اشیاء هستند. زمینه (context) یک شیء استاندارد از ویژگی‌ها و متدها تشکیل شده است. با این حال، اشیاء قابل فراخوانی دارای زمینه‌ای اجرایی هستند که از یک لیست دستورالعمل‌ها برای اجرا بر روی کامپیوتر تشکیل شده است. مانند اشیاء، اشیاء قابل فراخوانی می‌توانند درون یک متغیر، ثابت یا حتی یک پارامتر قرار بگیرند. بله، حتی می‌توانید یک تابع را به تابع دیگری منتقل کنید، اگر بخواهید.

ما قبلاً آموخته‌ایم که اشیاء به همان اندازه که توابع مهم هستند. اما در مورد ایجاد یک شیء از طریق یک تابع سازنده چه؟ این موضوع در جاوا اسکریپت بسیار رایج است زیرا ES5 (یا نسخه 5 جاوا اسکریپت) هیچ سینتکس کلاسی ندارد. اما نسخه بعدی جاوا اسکریپت شامل سینتکس کلاس خواهد بود. با این حال، فعلاً بیایید مروری بر نحو ایجاد یک تابع سازنده داشته باشیم.

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

پس از بررسی اینکه چرا به توابع سازنده نیاز داریم و اینکه این توابع به طور کلی چگونه کار می‌کنند، لازم است که زمینه بیشتری برای موضوع داشته باشیم. این زمینه در هر زبان برنامه‌نویسی، نه فقط جاوااسکریپت، بسیار مهم است. آن کلمه کلیدی مهم "this" چیست، چرا باید از آن استفاده کنیم و چه چیزی را شامل می‌شود؟

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

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

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

مدل شیء سند (DOM) برای درک نحوه تفسیر جاوااسکریپت از DOM به اشیاء JS بسیار مهم است. تمامی نودها یا عناصر DOM در واقع به اشیاء جاوااسکریپت تبدیل می‌شوند. کامپایلر JIT به طور جداگانه به HTML و CSS نگاه می‌کند و همه چیز را در یک شیء JS متصل می‌کند که شامل حجم زیادی از اطلاعات درباره آن عنصر است.

بازگرداندن کل شیء سند (document object) در هنگام کار با DOM مفید نیست. در این حالت، ما برخی از متدها را بر روی شیء سند اجرا خواهیم کرد و یک شیء واحد برای یک گره DOM باز می‌گردانیم. تغییر این شیء بر روی خود عنصر DOM تأثیر خواهد گذاشت، همچنین به هدف‌گیری چندین عنصر DOM که در قالب یک آرایه بازگردانده شده‌اند، خواهیم پرداخت.

جاوااسکریپت به خوبی با DOM کار می‌کند. پس چگونه می‌توان متن و اطلاعات را درون DOM تغییر داد؟ خوب، ما می‌توانیم به راحتی این کار را با هدف قرار دادن یک شیء که نمایانگر یک عنصر DOM در جاوااسکریپت است انجام دهیم و خواص innerHTML و innerText را تغییر دهیم.

خصوصیت style به ما این امکان را می‌دهد که از طریق جاوااسکریپت استایل‌ها را به عناصر DOM خود اعمال کنیم. ما خصوصیت style را از طریق شیء style تغییر می‌دهیم؛ هر شیء DOM دارای یک شیء style درون‌ساخته است که به ما اجازه می‌دهد تا خصوصیات CSS را دستکاری کنیم.

رویدادها به تعامل کاربر گوش می‌دهند. همچنین می‌تواند شامل تغییر در وضعیت باشد؛ به عنوان مثال، شما می‌توانید یک رویداد را زمانی که پخش‌کننده ویدیوی HTML5 در حال پخش، متوقف شده یا در حالت توقف است، فعال کنید. این به ما این امکان را می‌دهد که صفحات تعاملی ایجاد کنیم و محتوا را برای اطلاع‌رسانی به کاربر نشان دهیم، پنهان کنیم یا به‌روز کنیم. به همین دلیل است که درک رویدادها چنین مهم است.

در این تدریس، من یک شیء DOM مجازی در جاوااسکریپت ایجاد خواهم کرد. سپس به DOM می‌گویم که عنصر مربوطه را با استفاده از اطلاعات موجود در شیء DOM مجازی ما اضافه کند. این اجازه می‌دهد تا من یک عنصر از جاوااسکریپت تولید کنم.

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

از اینکه دوره من را تماشا کردید متشکرم و در اینجا به سرعت یک مرور کلی می‌زنم و چند مورد را بررسی می‌کنم. از همگی شما بابت تماشای این دوره سپاسگزارم!

به جلسه‌ی اضافی نگاهی بیندازید تا پیشنهادات بیشتری را ببینید.