آموزش سریع جاوا اسکریپت - دریافت ورودی

          حمیدرضا 
            بازدید : 1643
          دوشنبه 15 شهريور 1395
           نظرات (0)
        

بعد از یه وقفه ی چند روزه بالاخره اومدم با یه مطلب خیلی عالی.

اگر مطلب قبلی را نخوانده اید ، بخوانید!

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

در این مطلب می خواهیم کمی پیشرفته تر کار کنیم. در برنامه ای که مقدار ورودی و متغیر وجود نداشته باشد ، کار ها خیلی ساکن (static) می شوند. ما می خواهیم با افزودن مقدار ورودی و متغیر ها کار خود را کمی پویا تر کنیم.

نمایش پیغامی که کاربر می خواهد

مثل مثال قبلی کار می کنیم:

<<<code>>>

function showAlert( value )

{

alert( value ); // استفاده از مقدار

}

<<</code>>>

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

یه آزمایش: کد بالا را در قسمت کنسول مرورگر (یکی از راه های اجرای کد جاوا اسکریپت) وارد کنید و Enter بزنید. با این کار تابع بالا در صفحه ای که شما هم اکنون در آن حضور دارید وارد می شود. (توجه کنید که این کار فقط روی سیستم شما دارد اتفاق می افتد ، چون جاوا اسکریپت در سیستم شما اجرا می شود.) الان شما می توانید از این تابع استفاده کنید. کد زیر را بنویسید و مقادیر متفاوت را امتحان کنید تا نتیجه را ببینید.

<<<code>>>

showAlert("hellllllllooo"); // به جای ورودی هر چی می خواید بذارید و اینتر کنید

<<</code>>>

حالا فکر کنم درک بهتری از کاری که می خواهیم انجام بدهیم به دست آورده اید.

ادامه ی کد:

<<<code>>>

function pageLoad() // تعریف تابعی جدید

{

var inputValue = prompt("Please enter a value to show:"); // دریافت مقدار ورودی

if( inputValue == null || inputValue == false )

{

pageLoad();

return; // فقط نقش تمام کننده ی تابع را دارد. می تواند نباشد.

}

else

{

showAlert( inputValue );

return; // فقط نقش تمام کننده ی تابع را دارد. می تواند نباشد.

}

window.onload = pageLoad;

<<</code>>>

اوه! دو تا چیز جدید می بینیم!

قسمت بنفش یک تابع پیش ساخته در جاوا اسکریپت است (مثل alert که از آن برای نمایش پیغام استفاده کردیم). این تابع پیغامی نمایش می دهد و از کاربر مقدار ورودی می خواهد. نهایتا مقداری که کاربر وارد می کند در متغیر inputValue قرار می گیرد. این تابع به شکل زیر است:

تابع prompt

<<<code>>>

prompt( message [, default-input] )

<<</code>>>

خوب است که با این طرز معرفی توابع آشنا شوید. همان طور که می بینید در پرانتز جلوی تابع مقادیری نوشته شده است. (توابع می توانند در پرانتز جلوی خودشان آرگومان دریافت کنند. آرگومان همان مقدار ورودی برای تابع است.) به جای کلمات نوشته شده شما باید مقادیر قابل قبول برای جاوا اسکریپت را قرار دهید. قسمتی از فرم تابع که در [] قرار دارد ، اختیاری است. message مقداری است که به کاربر نمایش داده می شود. default-input مقداری است که اگر کاربر هیچ چیز وارد نکند توسط تابع برگردانده می شود. مقداری که توسط تابع بر می گردد ، دقیقا مثل این می ماند که جای خود آن نوشته شود. مقداری بازگشتی هم می تواند به طور مستقیم استفاده شود و هم در متغیری ریخته شود و در طول برنامه از آن استفاده شود (که راه دوم بهتر و اصولی تر است).

قسمت آبی رنگ یک ساختار شرطی است که قبلا درباره ی آن توضیح داده ام. طرز استفاده از ساختار شرطی if ... else ... در جاوا اسکریپت به این شکل است:

ساختار شرطی

trueOrFalse: معنی این عبارت "صحیح یا غلط" است. کامپیوتر شرط را نمی فهمد! فقط ما باید به او بگوییم که این کار را بکن (true) یا نکن (false). اگر اولی false باشد ، به سراغ else if می رود. اگر آن هم false باشد به سراغ else می رود و آن را انجام می دهد.
حتما این سوال برایتان پیش می آید که "پس معنی شرط به همین سادگی است؟"
در جواب باید بگویم. بله. اما ما خودمان برای این که بتوانیم استفاده های بیشتری از شرط های متنوع داشته باشیم ، از چیز های پیچیده تری مثل ، برابر بودن ، برابر نبودن ، بزرگ تر بودن ، کوچک تر بودن و حتی خیلی بیشتر ... استفاده می کنیم که بعدا در باره ی آن ها توضیح می دهم.

<<<code>>>

if( trueOrFalse ) {

// ... some code

}

else if( trueOrFalse ) {

// ... some code

}

else {

// ... some code

}

<<</code>>>

قسمت خاکستری می تواند حذف شود و نباشد.

باید متوجه شده باشید که شرط در مثال ما چگونه کار می کند. برنامه بررسی می کند و اگر مقدار ورودی (inputValue) خالی بود (یعنی با null مساوی بود) یا ( علامت || ) مقدار ورودی برابر false بود (یعنی کاربر cancel رو زد) تابع pageLoad را فراخوانی می کند (یعنی کار از اول شروع می شود). اگر این شرط برقرار نبود (یعنی inputValue با null مساوی نبود و inputValue با false هم مساوی نبود) برنامه در یک پیغام ، مقداری که کاربر وارد کرده است را نمایش می دهد.

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

برای دیدن نتیجه ی نهایی این مثال روی لینک زیر کلیک کنید.

نمایش نتیجه ی آنلاین کد ها

(اگر توی برنامه گیر کردید با موس cancel یا ok کنید حل میشه. بعد از روی حالت نمایش لحظه ای خارج کنید)

می دونم سخت بود. ولی اگه بفهمید تازه قشنگ میشه. اگر سوالی بود در بخش نظرات بپرسید جواب میدم.

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2239	snakeeye
طراحی باکس دانلود	6	2386	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	8332	grimboy
انواع قالب اختصاصی	3	2016	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2434	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	8925	jack7788