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

ساخت وبلاگ

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

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

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

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

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

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

varpizza;

varpizzaPeperoni;

varsoda;

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

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

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

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

varpizzaPeperoni;

varpizzaSpecial;

varpizzaSpecialAndDelicious;

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

varpizza+Special

varPizza;

varpizzaspecial;

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

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

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

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

varpizzaSpecial;

varpizzaPeperoni;

alert(pizzaPeperoni)

alert(pizzaSpecial)

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

متغیر متنی:

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

varuser=ldquo;mohammad Hosseinrdquo;

varuser2="sina sedighi"

varuser3="behnam moghadasian"

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

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

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

varmyCode=ldquo;hello Zoomit's fansrdquo;

varmathString=ldquo;۲ + ۲ +۷rdquo;

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

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

console.log(mathString)

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

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

varmyName="Mohammad"+" "+"Hossein"

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

mohammad hossein

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

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

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

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

varfirstUser=ldquo;mohammad Hosseinrdquo;

varsecondUser="sina sedighi"

varthirdUser="behnam moghadasian"

varallUsers=firstUser+secondUser+thirdUser

varallUsers2=firstUser+""+secondUser+" "+thirdUser

console.log(allUsers);

console.log(allUsers)

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

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

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

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

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

varfirstText=ldquo;

سلام دوستان زومیتی

rdquo;

varsecondText="

پاراگراف متنی که توسط یک متغیر استرینگی چاپ شده است

"

varthirdText="

پاراگراف متنی دیگری که توسط یک متغیر استرینگی چاپ شده است

"

varallText=firstText+secondText+thirdText

document.write(allText);

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

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

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

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

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

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

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

علم وفناوری...
ما را در سایت علم وفناوری دنبال می کنید

برچسب : اسکریپت,متغیرها, نویسنده : 9elme1404c بازدید : 146 تاريخ : چهارشنبه 10 آبان 1396 ساعت: 21:36