آموزش جاوا اسکریپت مبتدی : ذخیره اطلاعات مورد نیاز - متغیرها
بعد از خواندن چند مقاله آخر، حالا باید بدانید که جاوا اسکریپت چیست، چه کاری میتواند برای شما انجام دهد، چگونه از آن در کنار سایر فناوریهای وب استفاده کنید و ویژگیهای اصلی آن از سطح بالا چگونه به نظر میرسند. در این مقاله، به اصول اولیه میپردازیم و نحوه کار با اساسیترین بلوکهای سازنده جاوا اسکریپت - متغیرها - را بررسی میکنیم.
در طول این مقاله، از شما خواسته میشود که خطوط کد را تایپ کنید تا درک خود را از محتوا آزمایش کنید. اگر از مرورگر دسکتاپ استفاده میکنید، بهترین مکان برای تایپ کد نمونه شما، کنسول جاوا اسکریپت مرورگر شماست (برای اطلاعات بیشتر در مورد نحوه دسترسی به این ابزار، به «ابزارهای توسعهدهنده مرورگر چیست؟» مراجعه کنید).
یک متغیر، ظرفی برای یک مقدار است، مانند عددی که ممکن است در یک جمع از آن استفاده کنیم، یا رشتهای که ممکن است به عنوان بخشی از یک جمله از آن استفاده کنیم.
بیایید به یک مثال نگاه کنیم:
در این مثال، فشردن دکمه، کدی را اجرا میکند. اولاً، متن روی خود دکمه را تغییر میدهد. ثانیاً، پیامی از تعداد دفعات فشردن دکمه را نشان میدهد. این عدد در یک متغیر ذخیره میشود. هر بار که کاربر دکمه را فشار میدهد، عدد درون متغیر یک واحد افزایش مییابد.
برای درک اینکه چرا این موضوع اینقدر مفید است، بیایید به این فکر کنیم که چگونه میتوانیم این مثال را بدون استفاده از یک متغیر برای ذخیره تعداد بنویسیم. در نهایت چیزی شبیه به این خواهد شد:
ممکن است (هنوز!) به طور کامل سینتکسی که ما استفاده میکنیم را درک نکنید، اما باید بتوانید ایده را بگیرید. بدون متغیر، ما راهی برای دانستن تعداد دفعات کلیک روی دکمه نداریم. وقتی هیچ اطلاعاتی به خاطر سپرده نشود، پیام ارسالی به کاربر به سرعت بیربط خواهد شد.
متغیرها فقط معنی دارند و هرچه بیشتر در مورد جاوا اسکریپت یاد بگیرید، کمکم به یک امر عادی تبدیل میشوند.
یک نکته خاص در مورد متغیرها این است که میتوانند تقریباً هر چیزی را در خود جای دهند - نه فقط رشتهها و اعداد. متغیرها همچنین میتوانند شامل دادههای پیچیده و حتی توابع کامل برای انجام کارهای شگفتانگیز باشند. در ادامه بیشتر در مورد این موضوع خواهید آموخت.
ما میگوییم متغیرها حاوی مقادیر هستند. این یک تمایز مهم است که باید قائل شد. متغیرها خود مقادیر نیستند؛ آنها ظروفی برای مقادیر هستند. میتوانید آنها را مانند جعبههای مقوایی کوچکی در نظر بگیرید که میتوانید چیزها را در آنها ذخیره کنید.
برای استفاده از یک متغیر، ابتدا باید آن را ایجاد کنید - به طور دقیقتر، ما این را اعلام متغیر مینامیم. برای انجام این کار، کلمه کلیدی let و به دنبال آن نامی را که میخواهید متغیر خود را با آن فراخوانی کنید، تایپ میکنیم:
در اینجا ما دو متغیر به نامهای myName و myAge ایجاد میکنیم. این خطوط را در کنسول مرورگر وب خود تایپ کنید. پس از آن، سعی کنید یک (یا دو) متغیر با نامهای دلخواه خود ایجاد کنید.
در جاوا اسکریپت، تمام دستورالعملهای کد باید با یک نقطهویرگول (;) خاتمه یابند - کد شما ممکن است برای خطوط تکی به درستی کار کند، اما احتمالاً وقتی چندین خط کد را با هم مینویسید، این اتفاق نمیافتد. سعی کنید عادت کنید که آن را بگنجانید.
میتوانید با تایپ کردن فقط نام متغیر، بررسی کنید که آیا این مقادیر اکنون در محیط اجرا وجود دارند یا خیر، مثلاً
آنها در حال حاضر هیچ مقداری ندارند؛ آنها محفظههای خالی هستند. وقتی نام متغیرها را وارد میکنید، باید مقدار undefined برگردانده شود. اگر وجود نداشته باشند، یک پیام خطا دریافت خواهید کرد - سعی کنید تایپ کنید
متغیری که وجود دارد اما مقدار تعریفشدهای ندارد را با متغیری که اصلاً وجود ندارد اشتباه نگیرید - این دو چیز بسیار متفاوت هستند. در تشبیه جعبه که در بالا دیدید، عدم وجود به این معنی است که هیچ جعبه (متغیری) برای قرار دادن مقدار وجود ندارد. عدم تعریف مقدار به این معنی است که جعبهای وجود دارد، اما هیچ مقداری درون آن نیست.
پس از تعریف یک متغیر، میتوانید آن را با یک مقدار مقداردهی اولیه کنید. این کار را با تایپ نام متغیر، به دنبال آن علامت تساوی (=) و در نهایت مقداری که میخواهید به آن بدهید، انجام میدهید. برای مثال:
حالا به کنسول برگردید و این خطوط را تایپ کنید. در هر مورد، باید مقداری را که به متغیر اختصاص دادهاید، در کنسول مشاهده کنید تا آن را تأیید کنید. باز هم، میتوانید مقادیر متغیر خود را با تایپ نام آنها در کنسول برگردانید - این موارد را دوباره امتحان کنید:
شما میتوانید یک متغیر را همزمان تعریف و مقداردهی اولیه کنید، مانند این:
احتمالاً این کاری است که بیشتر اوقات انجام خواهید داد، زیرا سریعتر از انجام دو عمل در دو خط جداگانه است.
نکتهای در مورد متغیر var
احتمالاً روش متفاوتی برای تعریف متغیرها، با استفاده از کلمه کلیدی var، نیز خواهید دید:
زمانی که جاوا اسکریپت برای اولین بار ایجاد شد، این تنها راه برای تعریف متغیرها بود. طراحی var گیجکننده و مستعد خطا است. بنابراین let در نسخههای مدرن جاوا اسکریپت ایجاد شد، یک کلمه کلیدی جدید برای ایجاد متغیرها که تا حدودی متفاوت از var عمل میکند و مشکلات آن را در این فرآیند برطرف میکند.
چند تفاوت ساده در زیر توضیح داده شده است. ما اکنون به همه تفاوتها نمیپردازیم، اما با یادگیری بیشتر در مورد جاوا اسکریپت، آنها را کشف خواهید کرد.
برای شروع، اگر یک برنامه جاوا اسکریپت چند خطی بنویسید که یک متغیر را تعریف و مقداردهی اولیه میکند، میتوانید پس از مقداردهی اولیه، یک متغیر را با var تعریف کنید و همچنان کار خواهد کرد. به عنوان مثال:
این روش هنگام تایپ خطوط جداگانه در کنسول جاوا اسکریپت کار نمیکند، بلکه فقط هنگام اجرای چندین خط جاوا اسکریپت در یک سند وب کار میکند.
این روش به دلیل hoisting کار میکند - برای جزئیات بیشتر در مورد این موضوع، var hoisting را بخوانید.
hoisting دیگر با let کار نمیکند. اگر در مثال بالا var را به let تغییر میدادیم، با خطا مواجه میشد. این چیز خوبی است - اعلام یک متغیر پس از مقداردهی اولیه آن منجر به گیجکننده شدن و دشوارتر شدن درک کد میشود.
دوم اینکه، وقتی از var استفاده میکنید، میتوانید یک متغیر را هر چند بار که دوست دارید اعلام کنید، اما با let نمیتوانید. کد زیر کار میکند:
اما کد زیر در خط دوم خطا میدهد:
به جای آن باید این کار را انجام دهید:
باز هم، این یک تصمیم منطقی در مورد زبان است. هیچ دلیلی برای تعریف مجدد متغیرها وجود ندارد - این کار فقط اوضاع را گیجکنندهتر میکند.
به این دلایل و دلایل دیگر، توصیه میکنیم در کد خود از let به جای var استفاده کنید. مگر اینکه صریحاً پشتیبانی از مرورگرهای قدیمی را بنویسید، دیگر دلیلی برای استفاده از var وجود ندارد زیرا همه مرورگرهای مدرن از سال ۲۰۱۵ از let پشتیبانی میکنند.
اگر این کد را در کنسول مرورگر خود امتحان میکنید، ترجیحاً تک تک بلوکهای کد را اینجا کپی و پیست کنید. در کنسول کروم قابلیتی وجود دارد که تعریف مجدد متغیر با let و const را مجاز میکند:
پس از اینکه یک متغیر با یک مقدار مقداردهی اولیه شد، میتوانید با دادن مقدار متفاوت به آن، آن مقدار را تغییر دهید (یا بهروزرسانی کنید). سعی کنید خطوط زیر را در کنسول خود وارد کنید:
نگاهی گذرا به قوانین نامگذاری متغیرها
شما میتوانید تقریباً هر چیزی که دوست دارید برای یک متغیر بنویسید، اما محدودیتهایی وجود دارد. به طور کلی، باید فقط از کاراکترهای لاتین (0-9، a-z، A-Z) و کاراکتر زیرخط استفاده کنید.
- نباید از کاراکترهای دیگر استفاده کنید زیرا ممکن است باعث خطا شوند یا درک آنها برای مخاطبان بینالمللی دشوار باشد.
- از زیرخط در ابتدای نام متغیرها استفاده نکنید - این در برخی از ساختارهای جاوا اسکریپت برای معانی خاص استفاده میشود، بنابراین ممکن است گیجکننده باشد.
- از اعداد در ابتدای متغیرها استفاده نکنید. این کار مجاز نیست و باعث خطا میشود.
- یک قرارداد ایمن که میتوانید رعایت کنید، حروف کوچک و بزرگ است، که در آن چندین کلمه را به هم میچسبانید، برای کل کلمه اول از حروف کوچک استفاده میکنید و سپس کلمات بعدی را با حروف بزرگ مینویسید. ما تاکنون در این مقاله از این برای نام متغیرهای خود استفاده کردهایم.
- نام متغیرها را قابل فهم کنید، به طوری که دادههایی را که در آنها قرار دارند توصیف کنند. فقط از حروف/اعداد تکی یا عبارات طولانی استفاده نکنید.
- متغیرها به حروف کوچک و بزرگ حساس هستند - بنابراین myage متغیری متفاوت از myAge است. نکته آخر: همچنین باید از استفاده از کلمات رزرو شده جاوا اسکریپت به عنوان نام متغیر خودداری کنید - منظور ما از این، کلماتی است که سینتکس واقعی جاوا اسکریپت را تشکیل میدهند! بنابراین، نمیتوانید از کلماتی مانند var، function، let و for به عنوان نام متغیر استفاده کنید. مرورگرها آنها را به عنوان آیتمهای کد متفاوت تشخیص میدهند و بنابراین با خطا مواجه خواهید شد.
میتوانید لیست نسبتاً کاملی از کلمات کلیدی رزرو شده را که باید از آنها اجتناب کنید، در دستور زبان لغوی - کلمات کلیدی پیدا کنید.
مثالهای خوب نام:
نمونههایی از نامهای بد:
اکنون با در نظر گرفتن راهنماییهای بالا، سعی کنید چند متغیر دیگر ایجاد کنید.
انواع مختلفی از دادهها وجود دارد که میتوانیم در متغیرها ذخیره کنیم. در این بخش، این موارد را به طور خلاصه شرح خواهیم داد، سپس در مقالات آینده، با جزئیات بیشتری در مورد آنها خواهید آموخت.
شما میتوانید اعداد را در متغیرها ذخیره کنید، چه اعداد صحیح مانند 30 (که عدد صحیح نیز نامیده میشوند) و چه اعداد اعشاری مانند 2.456 (که اعداد اعشاری یا اعداد اعشاری نیز نامیده میشوند). برخلاف برخی از زبانهای برنامهنویسی دیگر، در جاوا اسکریپت نیازی به اعلام نوع متغیر ندارید. وقتی به یک متغیر مقدار عددی میدهید، علامت نقل قول ("") را قرار نمیدهید:
رشتهها تکههایی از متن هستند. وقتی به یک متغیر مقدار رشتهای میدهید، باید آن را داخل علامت نقل قول تکی یا دوتایی قرار دهید؛ در غیر این صورت، جاوا اسکریپت سعی میکند آن را به عنوان نام متغیر دیگری تفسیر کند.
مقادیر بولی (Boolean) مقادیر درست/نادرست هستند - میتوانند دو مقدار داشته باشند، درست یا نادرست. اینها معمولاً برای آزمایش یک شرط استفاده میشوند و پس از آن کد در صورت لزوم اجرا میشود. بنابراین برای مثال، یک حالت ساده به صورت زیر خواهد بود:
در حالی که در واقعیت بیشتر به این شکل استفاده میشود:
این از اوپراتور "کوچکتر از" (<) برای بررسی اینکه آیا 6 کمتر از 3 است یا خیر، استفاده میکند. همانطور که انتظار میرود، مقدار false را برمیگرداند، زیرا 6 کمتر از 3 نیست! در ادامه این دوره آموزشی، اطلاعات بیشتری در مورد چنین عملگرهایی خواهید آموخت.
یک آرایه یک شیء واحد است که شامل چندین مقدار است که در داخل کروشه قرار گرفته و با کاما از هم جدا شدهاند. سعی کنید خطوط زیر را در کنسول خود وارد کنید:
پس از تعریف این آرایهها، میتوانید به هر مقدار از طریق موقعیت مکانی آنها در آرایه دسترسی پیدا کنید. این خطوط را امتحان کنید:
براکتها مقدار اندیس مربوط به موقعیت مقداری که میخواهید برگردانید را مشخص میکنند. شاید متوجه شده باشید که آرایهها در جاوا اسکریپت دارای اندیس صفر هستند: اولین عنصر در اندیس ۰ قرار دارد.
در برنامهنویسی، یک شیء ساختاری از کد است که یک شیء واقعی را مدلسازی میکند. میتوانید شیءای داشته باشید که نمایانگر یک جعبه باشد و شامل اطلاعاتی در مورد عرض، طول و ارتفاع آن باشد، یا میتوانید شیءای داشته باشید که نمایانگر یک شخص باشد و شامل دادههایی در مورد نام، قد، وزن، زبانی که صحبت میکنند، نحوه سلام کردن به آنها و موارد دیگر باشد.
سعی کنید خط زیر را در کنسول خود وارد کنید:
برای بازیابی اطلاعات ذخیره شده در شیء، میتوانید از سینتکس زیر استفاده کنید:
جاوا اسکریپت یک «زبان با نوع داده پویا» است، به این معنی که برخلاف برخی زبانهای دیگر، نیازی نیست نوع دادهای که یک متغیر در خود جای میدهد (اعداد، رشتهها، آرایهها و غیره) را مشخص کنید.
برای مثال، اگر یک متغیر را تعریف کنید و مقداری را که در علامت نقل قول قرار دارد به آن بدهید، مرورگر با متغیر به عنوان یک رشته رفتار میکند:
حتی اگر مقداری که داخل نقل قول قرار گرفته فقط رقم باشد، هنوز یک رشته است — نه یک عدد — پس مراقب باشید:
چهار خط بالا را یکی یکی در کنسول خود وارد کنید و ببینید نتایج چه هستند. متوجه خواهید شد که ما از یک عملگر ویژه به نام typeof استفاده میکنیم - این عملگر نوع داده متغیری را که بعد از آن تایپ میکنید، برمیگرداند. اولین باری که فراخوانی میشود، باید رشته را برگرداند، زیرا در آن مرحله متغیر myNumber حاوی یک رشته '500' است. نگاهی بیندازید و ببینید بار دوم که آن را فراخوانی میکنید، چه چیزی را برمیگرداند.
ثابتها در جاوا اسکریپت constants
علاوه بر متغیرها، میتوانید ثابتها را نیز تعریف کنید. اینها مانند متغیرها هستند، با این تفاوت که:
- هنگام تعریف آنها باید مقداردهی اولیه کنید.
- پس از مقداردهی اولیه، نمیتوانید مقدار جدیدی به آنها اختصاص دهید.
برای مثال، با استفاده از let میتوانید یک متغیر را بدون مقداردهی اولیه تعریف کنید:
اگر سعی کنید این کار را با استفاده از const انجام دهید، خطایی مشاهده خواهید کرد:
به طور مشابه، با let میتوانید یک متغیر را مقداردهی اولیه کنید و سپس مقدار جدیدی به آن اختصاص دهید (به این کار، اختصاص مجدد متغیر نیز میگویند):
اگر سعی کنید این کار را با استفاده از const انجام دهید، خطایی مشاهده خواهید کرد:
توجه داشته باشید که اگرچه یک ثابت در جاوا اسکریپت باید همیشه مقدار یکسانی را نامگذاری کند، میتوانید محتوای مقداری که نامگذاری میکند را تغییر دهید. این تمایز برای انواع سادهای مانند اعداد یا مقادیر بولی مفید نیست، اما یک شیء را در نظر بگیرید:
شما میتوانید ویژگیهای یک شیء تعریفشده با استفاده از const را بهروزرسانی، اضافه یا حذف کنید، زیرا اگرچه محتوای شیء تغییر کرده است، ثابت همچنان به همان شیء اشاره میکند:
چه زمانی از const و چه زمانی از let استفاده کنیم؟
اگر نمیتوانید با const به اندازه let کار کنید، چرا ترجیح میدهید از آن به جای let استفاده کنید؟ در واقع const بسیار مفید است. اگر از const برای نامگذاری یک مقدار استفاده کنید، به هر کسی که کد شما را بررسی میکند میگوید که این نام هرگز به مقدار دیگری اختصاص داده نخواهد شد. هر زمان که این نام را ببیند، میداند که به چه چیزی اشاره دارد.
در این دوره، ما اصل زیر را در مورد زمان استفاده از let و زمان استفاده از const اتخاذ میکنیم:
وقتی میتوانید از const استفاده کنید و وقتی مجبور هستید از let استفاده کنید.
این بدان معناست که اگر میتوانید هنگام تعریف یک متغیر، آن را مقداردهی اولیه کنید و نیازی به اختصاص مجدد آن بعداً نداشته باشید، آن را به یک ثابت تبدیل کنید.
