جاوا اسکریپت به زبان ساده: جلسه چهارم - آشنایی با متغیرها (بخش اول)

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

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

متغیر در جاواسکریپت را مانند یک ظرف آب خالی در نظر بگیرید. ظرفی که می‌تواند بارها و بارها پر و خالی شود. می‌تواند به جای آب در آن نوشیدنی دیگری ریخته شود (جنس آن عوض شود) و هزار و یک اتفاق دیگر!

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

نحوه‌ی تعریف متغیرها در جاوا اسکریپت: 

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

var pizza;

var pizzaPeperoni;

var soda;

قواعد نام‌گذاری متغیرها در جاوا اسکریپت: 

حالا که بحث متغیرها شده است، بد نیست همینجا به نکات نام‌گذاری متغیر در جاوا اسکریپت اشاره کنیم. در جاوا اسکریپت متغیرها نباید با اعداد شروع شوند. نباید حرف اول متغیر بزرگ نوشته شود. بین کلمات متغیر نباید اسپیس، + یا نقطه و حروف دیگر گذاشت. برای جدا کردن نام متغیرهای چندکلمه‌ای تنها می‌توانید از _ استفاده کنید و باقی حروف ممنوع است.

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

مثال‌های درست:

var pizzaPeperoni;

var pizzaSpecial;

var pizzaSpecialAndDelicious;

/*مثال‌های اشتباه: */

var pizza + Special

var Pizza;

var pizza special;

حالا خودتان می‌توانید بگویید اشتباه انجام‌شده در تعریف هر کدام از این متغیرها کدام است؟

تعریف متغیر خالی:

وقتی که فقط نام متغیر را بنویسیم و هیچ مقداری به آن اختصاص ندهیم، یک متغیر بدون (مقدار) ساخته‌ایم که می‌توانیم بعدا هر طور که خواستیم آن را شکل دهیم! در واقع مقدار این متغیرها Undefined یا تعریف‌نشده است. این گونه متغیرها را مثل یک خمیر گل رس در نظر بگیرید که بعدا به هر شکلی که بخواهیم درخواهد‌ آمد. تمامی مثال‌های بالا متغیرهای بدون مقدار هستند. برای این کار کافی است یکبار آن‌ها را از طریق پنجره آلرت صدا بزنیم.

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

var pizzaSpecial;

var pizzaPeperoni;

alert(pizzaPeperoni)

alert(pizzaSpecial)

 

خواهید دید که مقدار تمامی این متغیرها خالی است. چون هنوز هیچ مقداری بدا‌ن‌ها داده نشده است.

متغیر متنی:

در همان پروژه سیستم حسابداری، فرض کنید، می‌خواهیم یک کاربر جدید ایجاد کنیم و نام خودتان را به آن اختصاص دهیم. به این متغیرها متنی می‌گویند.

var user = “mohammad Hossein”

var user2  = "sina sedighi" 

var user3 = "behnam moghadasian"

متن یا استرینگ چیست؟

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

مثال‌‌های دیگر از استرینگ:

var myCode = “hello Zoomit's fans”

var mathString = “۲ +‌۲ +۷”

حتی وقتی یک عبارت ریاضی (mathString) را که شامل یک جمع و تفریق ریاضی ساده است بین دو "" قرار می‌دهیم، جاوا اسکریپت آن را نیز به‌عنوان متن ساده در نظر می‌گیرد و بدون محاسبه و با همین شکل فعلی نمایش می‌دهد.

یعنی اگر متغیر mathString را در پنجره کنسول نمایش دهیم با عبارت ۲ +‌۲ +۷ روبه‌رو خواهیم شد. برای امتحان این کار علاوه بر کدهای بالا، دستور زیر را در فایل جاوا اسکریپت بنویسید و صفحه اچ‌تی‌ام‌ال خود را ریفرش کنید:

console.log(mathString)

 

اعمال ابتدایی روی استرینگ‌ها:

متغیرهای استرینگی قابل جمع کردن و به هم پیوستن هستند. مثلا دو متغیر استرینگی زیر را ببینید:

var myName = "Mohammad" + " " + "Hossein"

در این مثال ما یک متغیر myName داریم. متغیر myName دو رشته را با هم جمع می‌کند. در نهایت حاصل متغیر myName را اگر در صفحه نمایش دهیم، متن زیر نوشته و نمایش داده خواهد شد:

 

mohammad hossein

نکته: وقتی می‌خواهید دو متغیر را با هم جمع کنید، از علامت + بین آن‌ها استفاده کنید. دقت کنید که علامت + نباید در داخل کوتیشن قرار بگیرد؛ چرا که در این صورت این علامت نیز به‌عنوان جزئی از همان استرینگ محسوب می‌شود و از خوانده شدن آن جلوگیری خواهد شد. این علامت + برای جمع کردن دو متغیر به‌کار می‌رود.

همچنین ما در این مثال یک استرینگ خالی حاوی اسپیس ساخته‌ایم؛ چرا که جاوا اسکریپت اسپیس‌های اضافه در استرینگ‌ها را نادیده می‌گیرد و ما برای جدا کردن دو استرینگ mohammad و hossein از یک استرینگ که تنها حاوی اسپیس بود استفاده کردیم. این موضوع را می‌توانید به‌صورت زیر امتحان کنید.

یک متغیر استرینگی بسازید که بین کلمه اول و دوم آن ۵ بار اسپیس زده شده است. اگر این متغیر را در کنسول یا پنجره alert چاپ کنید مشاهده می‌کنید که تنها یک اسپیس از این پنج اسپیس محاسبه شده و باقی آن‌ها نادیده گرفته شده است.

مثال دیگر از جمع متغیرهای استرینگی را در زیر با هم مرور می‌کنیم:

 

var firstUser = “mohammad Hossein”

var secondUser  = "sina sedighi" 

var thirdUser = "behnam moghadasian"

var allUsers = firstUser + secondUser + thirdUser

var allUsers2 = firstUser " " + secondUser + " " + thirdUser

console.log(allUsers);

console.log(allUsers)

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

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

ذخیره تگ‌های اچ‌تی‌ام‌ال به‌عنوان متغیرهای متنی 

جالب است بدانید که می‌توانید از تگ‌های اچ‌تی‌ام‌ال نیز در متغیرهای متنی بهره‌مند شوید! مثلا می‌توانید یک پیغام متنی را با تگ h2 بنویسید و بدین ترتیب اگر آن را در صفحه با دستور document.write() چاپ کنید، به‌صورت یک عنوان بزرگ چاپ خواهد شد.

مثال زیر را ببینید.

 

var firstText = “<h1>سلام دوستان زومیتی</h1>”

var secondText  = "<p>پاراگراف متنی که توسط یک متغیر استرینگی چاپ شده است</p>" 

var thirdText = "<p>پاراگراف متنی دیگری که توسط یک متغیر استرینگی چاپ شده است</p>"

var allText = firstText + secondText + thirdText

document.write(allText);

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

تمرین: حالا که کمی با متغیرها آشنا شده‌اید بد نیست خودتان دست به‌کار شوید و چند متغیر متنی بنویسید و آن‌ها را با هم جمع کنید.

از متغیرهای متنی در چه مواردی می‌توانیم استفاده کنیم؟

 

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

استفاده عملی از متغیرهای استرینگی: 

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

 

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





تاريخ : دو شنبه 8 آبان 1396برچسب:, | | نویسنده : مقدم |