پنج شنبه , تیر ۲۸ ۱۳۹۷
صفحه اصلی / مقالات / زبانهای برنامه نویسی / وب / جاوا اسکریپت / آموزش جاوا اسکریپت قسمت دوم -کار با ورودی‌های عددی فرم‌ها

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

 

لطفا اگر قسمت اول را ندیده‌اید این لینک را مشاهده کنید

قسمت اول جاوا اسکریپت – شروع و آشنایی با دستورات اولیه

 

شروع سریع

اول فیلم را مشاهده کنید

کدهای این قسمت

<script>

function summation()
{
var x,y,z;
x=document.getElementById("number1").value;
y=document.getElementById("number2").value;
z=Number(x)+Number(y);	
document.getElementById("p").innerHTML= "جمع : " + z ;
}
</script>
<input type="text" id="number1">
<br>

<input type="text" id="number2">
<br>

<input type="button" value="محاسبه" onClick="summation()">
<p id="p"></p>

(در صورتی که میخواهید قسمت‌های بعدی این مجموعه را به رایگان ببینید 

کلیک کنید )

 

 

 

توضیحات کد:

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

function summation()

 

سه متغییر معرفی کردیم با این دستور

var x,y,z;

 

مقادیری را که میخواهیم با انها کار کنیم را با این دستورات گرفتیم و مقدار هر فیلد را در یک متغییر ریختیم

x=document.getElementById("number1").value;

y=document.getElementById("number2").value;

 

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

و ما میخواهیم بصورت عدد با آنها کار کنیم باید متغییرها را بصورت عددی تعریف کنیم برای این کار از Number  استفاده کردیم

 

z=Number(x)+Number(y);

 

و جواب را در پاراگراف پایین نمایش دادیم

document.getElementById("p").innerHTML= "جمع : " + z ;

 

همانطور که در فیلم گفتم فراموش نکنید که در onClick باید نام تابع‌ای که تعریف کردید را وارد کنید

<input type="button" value="محاسبه" onClick="summation()">

 

لطفا اگر سوالی دارید در زیر این پست مطرح کنید

 

 

درباره فرخ ابراهمی نژاد

فرخ ابراهمی نژاد
نویسنده‌ی کتاب yii framework برای برنامه نویسان php برنده‌ی دو دوره جشنواره‌ی وب ایران برای سایت linkpad.ir نویسنده, مدرس, مشاور و تولید کننده‌ی نرم افزار فرخ فوق‌لیسانس و لیسانس نرم‌افزار خوانده اما اعتقاد دارد برای موفقیت و رسیدن به درآمد وکسب‌وکار آنلاین نیاز به تحصیلات در دانشگاه ندارید.

این مطالب را نیز ببینید!

آموزش جاوا اسکریپت قسمت سوم-شرط

  لطفا اگر قسمت‌های قبل  آموزش جاوا اسکریپت را ندیده‌اید اول این قسمت‌ها را مشاهده …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فقط برای افراد عملگر

همین الان دوره را برایم ارسال کن

درست میبینید این دوره‌ی ارزشمند رایگان است
همین الان دوره را برایم ایمیل کن
 دوره‌ی جاوا اسکریپت بصورت ایمیل هر جلسه  برایتان ارسال میشود
close-link