parsgreen.com
article

تعریف متغیرها، محاسبات و عملگرها در جاوا اسکریپت (javascript)

javascript-var-operators

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

نکات کلی که باید بدانید:
- جاوا اسکریپت حساس به حروف بزرگ و کوچک است، یعنی به فرض متغیر var با Var از نظر مفسر این زبان متفاوت است.
- برای قرار دادن متن راهنما بین کدها از شیوه /*متن راهنما*/ یا متن راهنما// استفاده کنید.
- کدهای جاوا اسکریپت بین تگ head یا body قابل اجرا هستند و به صورت فایل خارجی نیز می توان آنها را ایمپورت کرد.
- جاوا اسکریپت زبانی سمت کاربر است، یعنی تنها روی مرورگر کاربران قابل پردازش و اجرا است.

متغیر ها در جاوا اسکریپت


شاید واژه متغیر در نگاه اول کمی پیچیده به نظر برسد اما در یک بیان ساده متغیر چیزی نیست جزء عنصری که طی یک فرایند برنامه نویسی ممکن است در چند موقعیت مختلف و یا با مقادیر مختلف مورد استفاده قرار گیرد، به عنوان مثال کارخانه ای را تصور کنید که مواد اولیه را (به عنوان متغیر) تهیه کرده و در طی فرایند تولید و انجام فعل و انفعالاتی، تبدیل به محصولات قابل استفاده می کند، متغیر در جاوا اسکریپت و اکثر زبان های برنامه نویسی کارکردی اینچنین دارد (البته در بیانی خیلی ساده)، به مثال زیر توجه کنید:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تعریف متغیرها در جاوا اسکریپت</title>
<!-- http://webgoo.ir -->
<script type="text/javascript">
var x=20;
var y=50;
var all=x+y;
document.write(all);
</script>
</head>
<body>
<hr />
متغیر ها در جاوا اسکریپت، می توانند مقادیری عددی یا رشته ای (متنی) باشند
</body>
</html>
پیش نمایش
توضیح:
- متغیرها در جاوا اسکریپت با عنوان var شناخته می شوند.
- document.write یک دستور برای مرورگر ارسال می کند تا متغیر all (یا هر مقدار دیگری) را خروجی دهد.

محاسبات در جاوا اسکریپت


مثل بسیاری از زبان ها ی برنامه نویسی، جاوا اسکریپت نیز از قابلیت های محاسباتی (جمع +، تفریق -، ضرب * و تقسیم /) پشتیبانی می کند؛ علاوه بر این علامت % باقیمانده ضریب بخش پذیری را بر می گرداند، علامت ++ برای افزایش و -- برای کاهش یک مقدار عددی کاربرد دارند:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | محاسبات در جاوا اسکریپت</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
<script type="text/javascript">
//<![CDATA[
var x=20;
var y=50;
var addition=x+y;
var subtraction=y-x;
var multiplication=x*y;
var division=x/y;
var remainder=y%9;
var increment=++x;
var decrement=--y;
var newline="<br />";
document.write("عملگر جمع: ");
document.write(addition);
document.write(newline);
document.write("عملگر تفریق: ");
document.write(subtraction);
document.write(newline);
document.write("عملگر ضرب: ");
document.write(multiplication);
document.write(newline);
document.write("عملگر تقسیم: ");
document.write(division);
document.write(newline);
document.write("عملگر باقیمانده بخش پذیری: ");
document.write(remainder);
document.write(newline);
document.write("عملگر افزایش: ");
document.write(increment);
document.write(newline);
document.write("عملگر کاهش: ");
document.write(decrement);
//]]>
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
<hr />
جاوا اسکریپت تقریبا از تمام عملیات های محاسباتی پرکاربرد، پشتیبانی می کند
</body>
</html>
پیش نمایش
توضیح:
- خط مربوط به CDATA در مثال بالا جهت جلوگیری از نامعتبر شدن کد از لحاظ سیستم های اعتبار سنجی و جلوگیری از پردازش کدهای جاوا اسکریپت به جای XHTML است.
- همانطور که گفتیم علامت % باقیمانده ضریب بخش پذیری را بر می گرداند، مثلا حاصل تقسیم 50 بر 9 مساوی 45 است، لذا % باقیمانده تقسیم یعنی 5 را بر می گرداند (به صورت صحیح و نه اعشاری).
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با switch و case در جاوا اسکریپت (JavaScript)
» حلقه for و while در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» رویداد ها (events) در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
commentنظرات (۱۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: لطفا کمکم کنید!
زمان: ۰۰:۲۳:۰۰ - تاریخ: ۱۳۹۱/۱۲/۲۷
سلام من مبتدی هستم!
این برنامه را نوشتم. میخواهم در پایان تمام مقادیر p را با هم جمع کند. لطفا کمکم کنید.
<html>
<head>
<script type="text/javascript">
function total(a,b)
{
result=a+b
return result
}
function Power(a,b)
{
result=1/Math.pow(a,b);
return result
}
</script>
</head>
<body>
this program will calculate<font color=purple size=16> SUM of 1/x^2 </font>from 1 to any value of x that you want
<br><br><br><br>these are values of 1/x^2<b>:<b>
<script type="text/javascript">
var n=prompt("Enter value for x",10);
for(x=1;x<=n;x++)
{
p=Power(x,2);
document.write("<br>x :"+x + "==> "+ p);
s=total();
}
document.write("<br><br><br><B><font size=18 color=purple><B>Final Answer for SUM(1/x^2) Is </font></B>"+ s);
</script>
</body>
</html>
پاسخ: 
سلام
از نمونه کد تصحیح شده استفاده کنید.
<html>
<head>
<script type="text/javascript">
function total(a,b)
{
result=a+b
return result
}
function Power(a,b)
{
result=1/Math.pow(a,b);
return result
}
</script>
</head>
<body>
this program will calculate<font color=purple size=16> SUM of 1/x^2 </font>from 1 to any value of x that you want
<br><br><br><br>these are values of 1/x^2<b>:</b>
<script type="text/javascript">
var n=prompt("Enter value for x",10);
var s = 0;
for(x=1;x<=n;x++){
p=Power(x,2);
document.write("<br>x :"+x + "==> "+ p);
s += p;
alert(s);
}
document.write("<br><br><br><B><font size=18 color=purple><B>Final Answer for SUM(1/x^2) Is </font></B>"+ s);
</script>
</body>
</html>
نویسنده: مرسی که کمکم کردین!
زمان: ۲۱:۱۹:۲۵ - تاریخ: ۱۳۹۱/۱۲/۲۷
سلام. مرسی. خیلی آدم خوبی هستی. دستت درد نکنه. خدا خیرت بده.
نویسنده: ابوالفضل
زمان: ۲۰:۱۶:۲۹ - تاریخ: ۱۳۹۲/۱۲/۱۲
سلام
من میخوام در یک فایل js این کد رو قرار بدم آیا حتما باید CDATA را قرار دهم؟
پاسخ: 
سلام
خیر، CDATA برای حالتی است که کدها در بین تگ های HTML و آن هم در نسخه های خاصی از HTML یعنی XHTML به کار می روند.
نویسنده: افسانه
زمان: ۱۱:۳۲:۰۳ - تاریخ: ۱۳۹۳/۰۲/۳۰
سلام
چرا از جی کوئری چیزی نمیگین؟ چه فرقی با جاوا داره؟
پاسخ: 
سلام
جی کوئری یک فریم ورک جاوا اسکریپت است، در حال حاضر آموزش مربوط به فریم ورک ها در سایت منتشر نمی شود، لطفا برای کسب اطلاعات بیشتر عبارت "فریم ورک" را در قسمت جستجوی سایت وارد کنید.
نویسنده: Mahdi
زمان: ۱۴:۲۱:۵۴ - تاریخ: ۱۳۹۳/۰۷/۱۵
سلام.
عزیز من اینو چجوری بذارم تو فایل جاوا اسکریپتم؟
var operators = '~ ! @ # $ % ^ & * ( ) - + = ? . / ;';
چجوری باید با اسلش جداشون کنم؟
پاسخ: 
سلام
لطفا سوالتان را دقیق مطرح کنید، سوال مبهم است! از دید ما این یک متغیر است که با چند کاراکنر به صورت رشته متنی مقداردهی شده و استفاده از آن در کدهای جاوا اسکریپت مانند سایر متغیرهاست!
نویسنده: مرتضی
زمان: ۱۹:۵۴:۲۴ - تاریخ: ۱۳۹۳/۰۸/۲۲
ببخشید چه طوی میشه متغیر رو از کاربر گرفت (input)
مثلا من یه اینپوت باکس بذارم و از کاربر سنش رو بخوام
و بعدش مثلا به علاوه 10 بکنم و نتیجه رو نشون بدم
ممنون میشم اگه بگید
پاسخ: 
دوست گرامی انجام این موارد نیازمند این است که آموزش ها را قدم به قدم مطالعه و تمرین کرده باشید، دریافت اطلاعات از input نیازمند آشنایی با مبحث form در HTML است، سپس باید با بحث متد POST در PHP آشنا باشید، همچنین سشن از کاربر گرفته نمی شود و خود مبحث مفصلی دارد!
نویسنده: hamid
زمان: ۲۰:۳۷:۴۸ - تاریخ: ۱۳۹۳/۰۹/۳۰
سلام من نیاز دارم دوتا textbox داشته باشم که کاربر بتونه عدد وارد که و بعد این دوتا باهم جمع تفریق یا ضرب و تقسیم بشن و جواب رو ببینه . چیکار کنم تازه کار هستم یه مثال آماده نیس؟
پاسخ: 
سلام
می توانید از نمونه کد زیر برای جمع (تفریق ضرب تقسیم) دو مقدار در جاوا اسکریپت استفاده کنید:
<script type="text/javascript">
function numberReault(id_1, id_2){
var value_1 = document.getElementById(id_1).value;
var value_2 = document.getElementById(id_2).value;

//result
var result = Number(value_1) + Number(value_2);

alert(value_1 + ' + ' + value_2 + ' = ' + result);
}
</script>
<input type="text" id="test_1">
<input type="text" id="test_2">
<input type="button" value="Click!" onclick="numberReault('test_1', 'test_2')">
نویسنده: elmira
زمان: ۰۹:۳۴:۵۹ - تاریخ: ۱۳۹۳/۱۲/۱۵
سلام
تابع set interval کارش چیه؟
پاسخ: 
سلام
این متد برای فراخوانی یک تابع (به صورت پی در پی) پس از سپری شدن زمان مشخص (به میلی ثانیه) است، برای غیرفعال کردن این روند باید از متد clearInterval استفاده کرد، همچنین برای فراخوانی تابع تنها برای یک بار می توان از متد setTimeout استفاده کرد.
نویسنده: xc
زمان: ۲۰:۵۱:۲۹ - تاریخ: ۱۳۹۴/۰۱/۰۱
سلام ممنون از سایت خوبتون. من چه جوری می تونم وقتی یه دکمه درست کردم و وقتی اونو زدم تو باکس نوشته شه؟؟؟؟؟؟؟
پاسخ: 
سلام
قاعدتا باید با جاوا اسکریپت به اندازه کافی آشنایی داشته باشید، در این صورت با اختصاص یک رویداد به تگ input خود می توانید یک تابع را فراخوانی کرده و در تابع هر مقداری که مد نظرتان بود را به فیلد متنی مورد نظر نسبت دهید، مثال:
<script type="text/javascript">
function setText(id, text){
document.getElementById(id).value = text;
}
</script>
<input type="text" id="test">
<input type="button" value="click!" onclick="setText('test', 'JavaScript is easy!');">
نویسنده: سلام
زمان: ۱۱:۲۱:۱۶ - تاریخ: ۱۳۹۴/۰۲/۲۲
سلام
من در مورد جاوا اسکریپت مبتدی هستم . یک صفحه وب دارم که تعدادی لینک داخل ان می خواهم ایجاد کنم . می خواهم با زدن روی لینک به یک فایل که با تاریخ روز شروع میشود برود. برای تعریف متغیر لینک تاریخ چگونه باید کد را بنویسم؟ به جز جاوا اسکریپت در خود html هم می توان چنین لینکی که متغیر تاریخ را دارد ایجاد کرد؟
ممنون اگر جواب بدهید خیلی برایم مهم است.
متشکر
پاسخ: 
سلام
هرچند دقیقا متوجه منظورتان نشدیم، اما درج تاریخ و... از دو طریق ممکن است، حالت اول توسط کدهای سمت سرور مانند PHP که می توان در خروجی اولیه صفحه تاریخ را در قسمت مورد نظر چاپ کرد (که این قسمت می تواند درون کدهای جاوا اسکریپت نیز باشد)، حالت دوم استفاده از متدهای مربوط به تاریخ در جاوا اسکریپت است که خود مبحث جداگانه و مفصلی دارد، به این صورت می توان آدرس لینک را به روش داینامیک با جاوا اسکریپت ساخت، نمونه ای از ساخت لینک در جاوا اسکریپت:
<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Webgoo';
newlink.setAttribute('title', 'Webgoo');
newlink.setAttribute('href', 'http://webgoo.ir');
document.body.appendChild(newlink);
</script>
در صورت آشنایی با متدهای مربوط به تاریخ و زمان در جاوا اسکریپت می توان موارد دلخواه را به قسمت href در مثال بالا اضافه کرد.
نویسنده: حسام
زمان: ۲۱:۵۷:۰۱ - تاریخ: ۱۳۹۴/۰۸/۰۶
سلام من دو متغیر X و Y دارم وقتی هر دو رو برابر 2 میدم و براشون این عملکرد رو تعریف میکنم : X + Y به جای اینکه جواب چهار رو نمایش بده مینویسه 22 مشکلم کجا هست ؟
اینم کدش:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div align="center" style="border:solid ; border-color:#00F">
<script language="javascript">
function ZXL(){
var X = document.getElementById('X').value;
var Y = document.getElementById('Y').value;
var Z = X + Y;
document.getElementById("P").innerHTML = Z;
}
</script>
<input type="number" id="Y" />
<br />
<br />
<input type="number" id="X" />
<br />
<input type="button" value="جمع" onclick="ZXL()" />
<br/>
<p id="P"></p>
</div>
</body>
</html>
پاسخ: 
سلام
در این حالت مفسر جاوا اسکریپت مرورگر، با اعداد مانند یک رشته متنی رفتار می کند، برای رفع مشکل دستور parseInt را به شکل زیر استفاده کنید:
var Z = parseInt(X) + parseInt(Y);
نویسنده: سید محمد
زمان: ۱۶:۲۱:۵۵ - تاریخ: ۱۳۹۴/۱۰/۱۱
ممنون بابت آموزش
من یه مشکل کوچیک ولی اساسی دارم!!
ctxt.font = "bold " + f + "pt Impact, BTitr, sans-serif";
BTitr رو میبینید، میخوام به جاش متغییری به اسم Font رو بزارم . اما هر کاری میکنم خطا میده
لطف کنید راهنمایی کنید
پاسخ: 
از نمونه زیر می توانید استفاده کنید:
<script type="text/javascript">
var Font = 'your font!';
ctxt.font = "bold " + f + "pt Impact, " + Font + ", sans-serif";
</script>
نکته: برای خطایابی دستورات جاوا اسکریپت بهتر است افزونه هایی مانند Web Developer را در مرورگر فایرفاکس نصب نمائید.
https://addons.mozilla.org/en-us/firefox/addon/web-developer
نویسنده: آقاجانی
زمان: ۱۹:۳۰:۱۱ - تاریخ: ۱۳۹۴/۱۰/۲۸
سلام چه جوری میشه url یک متغیر مانند x = www.xyz.com را جای خاصیت href یک لینک قرار داد ؟
پاسخ: 
سلام
سوال دقیق نیست! منظور از یک لینک در چه شرایطی است؟! آیا لینک درخروجی HTML است؟ یا در سایر متغیرهای موجود در دستورات PHP؟ در دستورات PHP:
<?php
$url = 'www.xyz.com';
$result = '<a href="http://'.$url.'>لینک</a>';
?>
نویسنده: آقاجانی
زمان: ۱۳:۴۴:۰۷ - تاریخ: ۱۳۹۴/۱۱/۰۱
نه در HTML مثلا در کد زیر :
<script>
a = prompt("آدرس لینک","")
</script>
<a href="" >کلید کنید</a>
میخوام ادرسی که a دریافت میکنه رو جای خاصیت href لینک قرار بده .
پاسخ: 
برای این کار می توانید از نمونه کد زیر استفاده کنید:
<script type="text/javascript">
window.onload = function(){
a = prompt("آدرس لینک", "");
if(a != null){
document.getElementById('test').setAttribute('href', a);
}
}
</script>
<a id="test" href="" >کلید کنید</a>
نویسنده: pink flower
زمان: ۱۴:۵۵:۱۵ - تاریخ: ۱۳۹۵/۰۴/۰۷
سلام برای اینکه تو یه ماشین حساب عملگر پرانتز استفاده کنیم چه کدی باید بنویسیم
پاسخ: 
لطفا از طرح سوالات کلی خودداری کنید! می توانید یک دکمه برای این کار اختصاص دهید که علامت پرانتز را به فیلد اضافه کند، برای این کار باید کدنویسی و متدهای جاوا اسکریپت بلد باشید.
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

9 × 5
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...