آموزش کامل عملگرها (Operators) در جاوااسکریپت

در این دوره به صورت کامل تمام نکات و متدهایی که ما به آنها نیاز داریم در عملگرها را ریز به ریز خواهیم گفت و این دوره قراره که یک دوره کامل اموزش عملگرها باشه.

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

با سرچ کلمه developer mozilla javascript در گوگل؛ در ردیف اول سایت موزیلا هست، وقتی که وارد میشیم داکیومنت آموزش کامل جاوااسکریپت را میبینیم، منوی سمت چپ تمام موضوع و مبحث هایی که تو جاوااسکریپت هست رو آماده کرده و به صورت کامل درموردش توضیح داده، ولی تو این دوره ما فقط به بخش expressions &
Operators نیاز داریم و استفاده خواهیم کرد.

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

در تمام دوره های آموزش کامل سایت از این مرجع استفاده کردیم، و اگه کاملا متوجه نشدید میتونید از این مرجع استفاده کنید؛

پیشنیاز های این دوره عملگرهای جاوااسکریپت

فقط کافیست آشنایی کمی با جاوااسکریپت داشته باشید مثلا عملگرها چی هست بدونید کافیه، ولی اگه هیچ پیش زمینه ای از جاوااسکریپت ندارید میتونید آموزش مقدماتی جاوااسکریپت رو از سایت تهیه کنید، توی تونل یادگیری رایگان میتونید به آموزش رایگان جاوااسکریپت بپردازید؛

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

عملگرهای حسابی (Arthimetic)

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

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

شروع کد نویسی

فایل خود را که در ویرایشگر باز کردیم، درونش این کد را وارد میکنیم که اسکریپت هایمان را بنویسیم:

<"script"><"/script"> // البته بدون " " و اینجا بخاطر اینکه اسکریپت ران نشه از " " استفاده میکنیم

عملگرها همراه با توضیح و نمونه کد:

اولین عملگری که مورد بررسی قرار میدهیم عملگر +1- است، 2 عملیات انجام میدهد adding & concatenation

Adding: دو یا چند عدد را جمع میکند:

console.log(2+4); //6
console.log(2+true); //3
console.log(2+false); //2

نکته: true = 1 & false = 0

concatenation: دو یا چند رشته را جمع میکند:

console.log("MEGA"+"JS"); //MEGAJS
console.log(2+"MEGAJS"); //2MEGAJS
console.log(true+"JS"); //trueJS

نکته: یک عدد اگه با رشته جمع بشه عدد هم به صورت رشته حساب میشه، ترو هم اگه با رشته جمع به رشته تبدیل میشه.

2- عملگر منفی – دو یا چند عدد را از هم کم میکند:

console.log(4-2); //2
console.log(4-"MEGAJS"); //NaN

نکته: هیچ وقت عدد منهای رشته نمیشود

3- عملگر تقسیم / دو یا چند عدد رو تقسیم میکند:

console.log(10/8); //1.25
console.log(10/0); //Infinity بینهایت
console.log(-10/0); //-Infinity

4- عملگر ضرب * دو یا چند عدد را ضرب میکند:

console.log(2*3); //6
console.log(2*"MEGAJS"); //NaN

5- عملگر درصد % عدد اول تقسیم عدد دوم میکند و عدد بینشون رو میده:

console.log(10 % 8); //2

نکته: عملگر / باقیمانده خارج از تقسیم را میده، عملگر % باقیمانده داخل تقسیم رو میده.

 

6- عملگر ** عدد اول را به توان عدد دوم میکنه:

console.log(3**2); //9

میتوانید بجای تابع pow استفاده کنید

7- عملگر ++ مثلا میگیم دو++ به دو یدونه اضافه میکنه:

console.log(2++); //2
let two = 2++;
console.log(two); //3
console.log(++2); //3

نکته: چون اول 2 رو لاگ زدیم و بعد ++ کردیم همان 2 رو داد، ولی لاگ دومی چون دو++ رو ریختیم در یک متغیر و لاگ گرفتیم خروجی3 داد؛ در لاگ سوم چون اول ++ رو گزاشتیم یکی اضافه کرد.

8- عملگر — مثلا میگیم دو — از دو یدونه کم میکنه:

console.log(2--); //2
console.log(--2); //1

خب عملگرهای حسابی هم به پایان رسید، متدهای مهم عملگرهارا توضیح دادیم، نظرات فراموش نشه 🙂

عملگرهای انتسابی (Assignment)

در این مقاله قراره عملگرهایی رو یادبگیریم که هم تو ریاضی هست و هم تو جاوااسکریپت هست ولی متفاوت هستند.

عملگر انتسابی همون مساوی مون تو ریاضی هست،
اگه یادتون باشه برای تعریف متغیر این کار رو میکردیم:

var num = 53;

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

عملگرها همراه با توضیح:

1- Addition assignment:

مقاله قبلی اگه یادتون باشه از عملگر ++ استفاده کردیم، حالا اگه بخواهیم چندتا مثلا به x اضافه کنیم باید از این دو روش استفاده کنیم:

var x = 50;
var x = x+3; //53
var x += 3; //53

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

2- subtraction

مقاله قبلی رو خونده باشید یدونه کم میکردیم با عملگر –، ولی اگر بخواهیم چندتا کم کنیم از این عملگر استفاده میکنیم:

var x = 50;
var x = x - 5; //45
var x -= 5; // 45

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

3- عملگر (*) ضرب:

اگه مقاله قبلی رو خونده باشید، با * چند عدد را ضرب هم میکردیم به این صورت 2*2؛ با این روش خیلی کار ساده تر و کد کوتاه تر میشود:

var x = 50;
var x = x * 2; //100
var x *= 2; //100

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

4- عملگر / تقسیم:

اگه مقاله قبلی رو خونده باشید چند عدد را به این صورت با این عملگر تقسیم میکردیم 2/2؛ با این روش ساده تر و کوتاه تر میشود کدمان:

var x = 50;
var x = x / 2; //25
var x /= 2; //25

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

5- عملگر % درصد:

اگه مقاله قبلی رو خونده باشید، با این عملگر به این صورت درصد میگرفتیم 2%2؛ با این روش کدمان کوتاه و ساده تر میشود:

var x = 50;
var x = x % 2; //0
var x %= 2; //0

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

6- عملگر ** توان:

همانند مقاله قبلی که توان میکرد 2 عدد را به این صورت 2**2؛ با این روش کد کوتاه و تمیز تر میشود:

var x = 50;
var x = 50 ** 2; //2500
var x **= 2; //2500

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

همانطور که میدونید، تمام زبان های برنامه نویسی یا برنامه هامون وقتی به کامپیوتر میرسند تبدیل به بیت میشن؛

بیت چیست؟

به اعداد 0 و 1 که باعث میشن با کامپیوتر ارتباط برقرار کنیم.

7- عملگر shift

کد بیت ما را که مثلا برای پنج 0000000000101 است، عدد 2 دوتا به اخر این پنج 0 اضافه میشود :

var x = 5; //0000000000101
x <<= 2; //000000000010100
var a = 5; //0000000000101
a = 2; //00000000001

ایکس 2 تا اضافه کرد به وسیله عملگر شیفت <<=
اِی هم 2 تا از آخر حذف میکند به وسیله عملگر شیفت >>=

بقیه عملگرها خیلی کم کاربرد دارن، بخاطر همین توضیح نمیدیم ولی میتونید از سایت developer mozilla از سایدبار سمت چت گزینه عملگرهای انتسابی را انتخاب کنید و مطالعه کنید.

نظرات فراموش نشه 🙂

عملگرهای مقایسه ای (Comparison)

خب مقاله قبلی متوجه شدید که = در ریاضی یعنی 1=1؛ ولی در جاوااسکریپت به این شکل نیست، = نشانه این است که متغیر مثلا x یک مقداری دارد و اون وقت ما از مساوی استفاده میکردیم برای مثال: در جاوااسکریپت

var x = 50;
console.log(x); //50
در ریاضی:
x = 50; //50 = 50

خب تفاوت این 2 رو هم فهمیدیم.

تو این مقاله قراره یاد بگریم که چه چیزی معنی مقایسه رو میده و چه چیزی در جاوااسکریپت مقایسه گر است!

1- عملگر == یا === :

این عملگر مقایسه میکند که مثلا یک برابر است با یک است:

var txt = "HELLO World!";       // String
var text = txt.toLowerCase();   // text is txt converted to Lower
// output: hello world!

var x = 0;
x == 1; //false
x == 0; //true

همیشه مقدار خروجی این عملگر بولین است یعنی یا true یا false.

و اگر بخواهیم بدانیم که از نظر دیتا تایپ هم برابرند از عملگر === استفاده میکنیم، مثال:

var x = 0;
var y = "1";
console.log(x == y); //true
console.log(x === y); //false

2- عملگر != و !==

کار این عملگر این است که مقایسه کند مثلا 2 برابر نیست با 1، مثال:

var x = 2;
var y = 2;
var z = "2";
console.log(x != y); //false
console.log(x !== z); //true

چون برابر هستن مقدار فالز رو برمیگردونه، ترو دومی هم برای اینکه از نظر دیتا تایپ برابر نیستن ترو برمیگردونه.

3- عملگر Relation operators

از لحاظ بزرگ و کوچک بودن عدد مقایسه میکنند، مثال:

var x = 1 > 2; //false
var y = 1 < 2; //true
var z = 1 <= 1; //true
var m = 1 <= 2; //true
var a = 1 >= 2; //false

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

عملگرهای شرطی (Conditional)

در این مقاله قراره یک عملگری را یاد بگیریم که درواقع کار همون if…else رو توی یک خط انجام میده، و با 2 تا عملگر یه علامت سوال و  یه 2نقطه این کار را بدون استفاده از if انجام میدیم، یجورایی جایگزین if…else میشه.

مثلا ما یک وبسایتی داریم و هر کاربر یک امتیازی داره، مثلا ما میخواهیم یک کاربری که (if) امتیاز بالای 1100 را دارد نامی بگیرد و در غیر این صورت (else) یک نام  دیگر:

var points = 1100;
if(points > 1000) {
console.log("Gold");
} else {
console.log("Silver");
} // Gold

خروجی Gold میباشد چون عدد مورد نظر از 1000 بزرگتر است، ولی اگه کمتر باشد خروجی Silver است.

نوشتن همین عملیات با عملگر شرطی امروز:

var points = 1100;
var type = (points>1000) ? 'Gold' : 'Silver'; //Gold

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

خب اینم از عملگرهای شرطی، حتما تمرین کنید؛ نظرات فراموش نشه 😉

عملگرهای منطقی (Logical)

در این مقاله قراره که عملگرهای منطقی در جاوااسکریپت رو یادبگیریم، یعنی AND منطقی، OR منطقی، و NOT منطقی؛ خواهیم یادگرفت که چطور از این ها استفاده کنیم.

خب در مقاله قبلی درمورد امتیاز های کاربر یک سایت صحبت کردیم و برای اونها شرط تعریف کردیم به این صورت:

var points = 1100;
var type = (points>1000) ? "Gold" : "Silver"; //Gold

حالا میخواهیم بنویسیم که کاربر چند ماهه که ثبت نام کرده، و برای این دو شرط بزاریم:

var points = 1100;
var mRegistered = 8;
console.log(points>1000 && mRegistered>6); //true

ما سه تا عملگر منطقی داریم:

عملگر AND؛ && : بررسی میکنه و اگه هر دو طرف مقدار درست رو برگردانند، مقدار درست را میدهد و اگه یکی درست و یکی غلط باشد، مقدار غلط را برمیگرداند؛ معنی فارسی آن “و” است

console.log(points>1000 && mRegistered>9); //flase
console.log(points>1000 && mRegistered>6); //true

عملگر OR؛ || : بررسی میکنه اگر حتی یکی هم درست باید مقدار درست را برمیگرداند، معنی فارسی آن “یا” است.

console.log(points>1000 || mRegistered>9); //true
console.log(points>12000 || mRegistered>9); //false

عملگر NOT، !: بررسی میکنه که مثلا امتیاز های یک کاربر باید بالای 1000 نباشه:

console.log(!points > 1000); //false
console.log(!points > 1000 && !mRegistered > 6); //false

چون امتیاز های کاربر بالاتر از 1000 است، جواب غلط است، لاگ دومی هم برای اینکه عملگر AND و عملگر NOT رو باهم استفاده کردیم جواب اشتباه رو داده، چون این دو عملگر باهم قابل اجرا نیست.

خب این مقاله هم تموم شد، حتمی تمرین کنید، نظرات فراموش نشه

اولویت عملگرها (Precedence)

تا به این مقاله، انواع عملگرهای مهم رو بررسی کردیم و یادشون گرفتیم؛ تو این مقاله قرار نیست که عملگری را یاد بگیریم، قراره اولویت عملگرهارو مرور کنیم.

خب همانطور که تو عکس بالایی میبینید، اولویت های عملگرهارو نوشته؛

به مثال زیر دقت کنید:

var x = 2+3*6; //20

چرا جواب 20 میشه؟ چون اول ضرب رو حساب میکنه که میشه 18 و بعد با 2 جمعش میکنه. اولویت به این صورته که اول توان و رادیکال ها و دوم ضرب و تقسیم و سوم جمع تفریق که دوران دبیرستان آشنا شدیم در ریاضی.

اما داخل برنامه نویسی اولویت هایی داشتیم که تو ریاضی نبود مثل : AND, OR, NOT.

تو برنامه نویسی بیشترین اولویت در () و [] است، مثلا اگه جمع 3 + 2 رو داخل پرانتز بزاریم به این شکل خواهد بود خروجی:

var x=(2+3)*6; //30

چون داخل پرانتز گذاشتیم اول 2 رو با 3 جمع کرد و بعد به سراغ ضرب رفت.

اولویت دوم همانطور که تو عکس بالایی دیدید، دست ++ و — و ! و… هست، مثال:

var x=5;
var y=(++x + 2) * 4; //32

اول داخل پرانتز به x یدونه اضافه میکنه، و بعد با 2 جمع میکنه و بعد عدد بدست آماده داخل پرانتز که 8 است را ضرب 4 میکنه.

همانطور که تو عکس بالایی دیدید، اولویت های بعدی ضرب، تقسیم و درصد هست، بعد از آن جمع و تفریق هست، بعد از آن شیفت هایی هست که در مقاله های قبلی یادگرفتیم و گفتیم که به عدد بیتی یک عدد چند تا کم و اضافه میکند، بعد از اون ریلِیشِن هاست که بزرگتر و کوچکتر و… رو مشخص میکردیم، بعد از آن عملگرهای مساوی بودن و نبودن هست، بعد آن عملگرهای AND, XOR, OR هست، بعد این ها دست عملگر شرطی هست که if…else رو تو یک خط تعریف میکردیم؛ و بعد اینها = و += و -= و *= و /= و %= و =>> و =<< و =<<< و &= و ^= و |= هست، و در آخر هم دست کاما یا “،” است؛ که مقاله های قبلی همه رو یادگرفتیم.

نیازی نیست که همه این جدول رو حفظ کنید؛ تنها باید مثال های زیادی بزنید که بتونید کاملا یادشون بگیرید.
در مقاله های قبلی هم اگه دقت کرده باشید، به ترتیب عملگرهارو بررسی کردیم.

زمانی که به مشکلاتی برخوردید که فکر میکردید غیرمنطقی هست، به این جدول یه سری بزنید و ببینید مشکل از کجاست تا بتوانید حل کنید، یا میتونید در سایت Developer Mozilla سرچ کنید: Operator Precedence و از انجا مشاهده کنید.

خب این مقاله هم به پایان رسید؛ تمرین کنید، نظرات فراموش نشه.

تمرین (Swaping Variables)

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

شروع تمرین
خب در شروع یک متغیر با نام a تعریف میکنیم، و مقدار Red رو بهش میدیم:
و یه متغیر دیگه با نام b تعریف میکنم و مقدار Blue رو میدم:

var a="Red"; //Red
var b="Blue"; //Blue

خب حالا میخواهیم متغیر تعریف کنیم و مقدار a و b را عوض کنیم:

var c;
c = a; //Red
a = b; //Blue
b = c; //Red

خب دیدید که با تعریف یک متغیر با نام c توانستیم که مقدار a و b را جابجا کنیم.

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