طراحی سایت و طراحی وب سایت حرفه ای را با گروه سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

آرایه ها، عملگرهای منطقی و مقایسه ای، دستورات شرطی

آرایه ها، عملگرهای منطقی و مقایسه ای، دستورات شرطی

دوستان عزیز سلام؛ امروز هم در خدمت شما عزیزان هستم با آموزش JavaScript – بخش پنجم و در این جلسه می خواهم مطالب زیر را برای شما همراهان گرامی شرح دهم:

  • آرایه ها در جاوا اسکریپت
  • عملگر های منطقی و مقایسه ای در جاوا اسکریپت
  • دستورات شرطی در جاوا اسکریپت

در ابتدا به سراغ آرایه می رویم و پس از معرفی آن، متدها و نحوه دسته بندی عناصر آرایه را بررسی می کنیم.

آرایه ها در جاوا اسکریپت

در جلسه دوم آموزش JavaScript گفتیم که آرایه ها زمانی کاربرد دارند که می خواهیم چندین مقدار را در یک متغیر ذخیره کنیم. یعنی:

آرایه ها متغیر هایی هستند که چند مقدار را در خود ذخیره می کنند.

آرایه ها

بیایید کمی بیشتر آرایه ها را بررسی کنیم:

فرض کنید که می خواهیم نام 3 برند Apple، VAIO و ASUS را ذخیره کنیم. در این صورت باید سه متغیر متفاوت را تعریف کنیم و این مقادیر را به آنها تخصیص دهیم.

حال فرض کنید که می خواهیم 30 مقدار را ذخیره کنیم. یعنی باید 30 متغیر متفاوت را تعریف کنیم؟!

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

اما چگونه یک آرایه را ایجاد کنیم؟

ساختار یک آرایه به صورت زیر می باشد:

var array_name = [item1, item2, ...];

یا

var array_name = [
        item1,
        item2,
        ...
];

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

می توان یک آرایه را به صورت زیر تعریف کرد:

var array_name = new Array("Item1", "Item2", "Item3");

اما از این ساختار استفاده نمی کنیم. چرا که متد new  باعث کاهش سرعت اجرای کدها می شود.

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

دسترسی به عناصر آرایه

گفتیم که عناصر یک آرایه از عدد 0 شماره گذاری می شوند که با استفاده از این شماره ها (index numbers یا شاخص عددی) می توان به مقادیر ذخیره شده در آرایه دسترسی داشت. فرض کنید که آرایه ای به صورت زیر داریم:

var brand = ["Apple", "VAIO", "ASUS", "Lenovo"];

برای فراخوانی مقدار VAIO دستور زیر را می نویسیم:

document.getElementById("id").innerHTML = brand[1];

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

document.getElementById("id").innerHTML = array_name[index number]

اگر بخواهیم به کل مقادیر درون آرایه دسترسی داشته باشیم چکار می کنیم؟

بله، نام آرایه را می نویسیم. مثلا دستور زیر تمام مقادیر درون یک آرایه را در المانی با شناسه id می نویسد:

document.getElementById("id").innerHTML = array_name;
  • آرایه حالت خاصی از آبجکت می باشد و عملگر typeof  نیز مقدار object را برای یک آرایه بر میگرداند.
  • هر عنصر یک آرایه می تواند یک تابع، آرایه و یا یک آبجکت باشد.

در مثال زیر می بینید که ویژگی length  تعداد عناصر یک آرایه را برمی گرداند:

<body>
 <p id="p01"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand.length;
 </script>
</body>

آموزش JavaScript – بخش پنجم

آرایه های انجمنی

آرایه انجمنی (associative) آرایه ای است که ما خودمان عناصر آن را نام گذاری می کنیم که متاسفانه این نوع آرایه در جاوا اسکریپت پشتیبانی نمی شوند. در عوض یک آرایه را به صورت زیر می توان تعریف کرد:

<body>
 <p id="p01"></p>

 <script> 
 var brand = [];
 brand[0] = "Apple";
 brand[1] = "VAIO";
 brand[2] = "ASUS";
 brand[3] = "Lenovo";
 brand[4] = "Dell";
 var x = brand.length;
 var y = brand[1];
 document.getElementById('p01').innerHTML = brand + "<br>" +
 x+ "<br>" +
 y;
 </script>
</body>

آموزش JavaScript – بخش پنجم

در اینجا سوال مهمی که پیش می آید این است که چه زمانی از آرایه و چه زمانی از آبجکت استفاده کنیم؟

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

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

تفاوت آرایه ها و آبجکت ها در چیست؟

و اما یک سوال:

چگونه آرایه را تشخیص بدهیم؟

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

روش اول

متد Array.isArray()  را استفاده می کنیم و نام آرایه را درون پرانتز می نویسیم. اگر مقدار true در مرورگر برگردانده شد، پس آرایه داریم و اگر false برگردانده شد، قاعدتا آرایه نداریم. مشکل این متد این است که در مرورگرهای قدیمی پشتیبانی نمی شود.

روش دوم

ساخت تابعی به صورت زیر:

<body>
 <p id="p01"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = isArray(brand);
 function isArray(myArray) {
 	return myArray.constructor.toString().indexOf("Array")> -1;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

اگر مقدار true برگردانده شد، پس آرایه داریم و اگر مقدار false برگردانده شد، قاعدتا آرایه نداریم.

و اما روش سوم:

می توان از عملگر instanceof Array  هم استفاده کرد:

<body>
 <p id="p01"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand instanceof Array;
 </script>
</body>

آموزش JavaScript – بخش پنجم

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

متدهای آرایه ها

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

متد toString()

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

زمانی که می خواهیم در نمایش عناصر آرایه ها از علامتی غیر از کاما استفاده کنیم، متد join()  (که کاری شبیه به متد toString  انجام می دهد) را به کار می بریم. پارامتری را که به این متد می دهیم، علامتیست که می خواهیم با آن عناصر آرایه ها را جدا سازی کنیم:

<body>
 <p id="p01"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];

 document.getElementById('p01').innerHTML = brand.toString() + "<br>" +
 brand.join(" / ");
 </script>
</body>

آموزش JavaScript – بخش پنجم

افزودن و یا حذف عناصر آرایه ها

در کار با آرایه در بیشتر مواقع نیاز داریم که عنصری را حذف و یا اضافه کنیم. به حذف کردن عنصر اصطلاحا popping و به افزودن عنصر به آرایه pushing می گوییم.

اما متد حذف کردن عنصر از یک آرایه pop()  می باشد. این متد همیشه آخرین عنصر آرایه را حذف می کند:

<body>
 <p id="p01"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p02"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand;
 function myFunction () {
 	brand.pop();
 document.getElementById('p02').innerHTML = brand;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

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

کار دیگری که می توان با این متد انجام داد، برگرداندن مقادیر حذف شده از آرایه است:

<body>
 <p id="p01"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p02"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand;
 function myFunction () {
 document.getElementById('p02').innerHTML = "<p><b>deleted item:</b></p>" + " " + brand.pop();
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

متد push()  برای افزودن عنصر جدید به آخر یک آرایه استفاده می شود:

<body>
 <p id="p01"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p02"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand;
 function myFunction () {
 	brand.push("Samsung");
 document.getElementById('p02').innerHTML = brand;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

با استفاده از ویژگی length  نیز می توان عنصر جدید را به آرایه افزود:

brand[brand.length] = "Samsung";

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

function myFunction () {
    brand[brand.length] = "Samsung";
    document.getElementById('p02').innerHTML = brand;
 }

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

<body>
 <p id="p01"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p02"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand;
 function myFunction () {
 	 brand[15] = "Samsung";
     document.getElementById('p02').innerHTML = brand;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

همانطور که می بینید چون در آرایه 6 عنصر داریم بنابراین من باید از شاخص 7 استفاده می کردم. اما چون شاخص 15 را در دستور افزودن نوشته ام، در آرایه حفره ایجا شده است.

پس همیشه برای افزودن عنصر به آرایه، باید شاخص مناسبی را انتخاب کرد.

کاربرد دیگر push  را در مثال زیر می بینیم:

<body>
 <p id="p01"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p02"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand;
 function myFunction () {
     document.getElementById('p02').innerHTML = "<p><b>Number Index of pushed element is:</b></p>" + brand.push("Samsung");
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

متد های بالا عنصر را به انتهای آرایه اضافه و یا از آن حذف می کنند. خب حالا ببینیم که اگر بخواهیم عنصری را به ابتدای آرایه اضافه یا کم کنیم از چه متدی باید استفاده کنیم؟

متد shift()  دقیقا مانند متد pop()  عمل می کند با این تفاوت که عضو را از ابتدای آرایه حذف می کند. همچنین متد unshift()  نیز همان عملکرد push()  را دارد و عضو جدید را به ابتدای لیست اضافه می کند.

متد دیگری که در جاوا اسکریپت برای حذف عناصر وجود دارد، متد delete  است. نحوه استفاده از این متد را در مثال زیر با هم می بینیم:

<p id="p01"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p02"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand;
 function myFunction () {
 	 delete brand[3];
     document.getElementById('p02').innerHTML = brand;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

اما استفاده از این متد ممکن است باعث ایجاد حفره های تعریف نشده در آرایه شود. پس بهترین روش استفاده از متد های pop()  و shift()  است.

احتمالا می خواهید بدانید که آیا این امکان وجود دارد که عنصر جدید را جایگزین عنصری از آرایه کنیم؟

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

تغییر اعضای یک آرایه

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

<body>
 <body>
 <p id="p01"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p02"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell"];
 document.getElementById('p01').innerHTML = brand;
 function myFunction () {
 	 brand[4] = "Samsung";
     document.getElementById('p02').innerHTML = brand;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

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

باز هم بله دوستان. برای این کار، متد قدرتمند splice()  را داریم:

متد splice()

این متد به ما این اجازه را می دهد که هر تعداد عنصر جدید با شاخص عددی دلخواه را به آرایه اضافه کنیم و یا عنصری را حذف کنیم.

پارامتر اولی که این متد دریافت می کند، شاخص عددی دلخواه عنصر (عناصر) جدید می باشد. پارامتر دوم تعیین کننده تعداد عناصری است که می خواهیم از آرایه حذف شوند و در پارامتر های بعدی عناصر جدیدی که می خواهیم به آرایه اضافه شوند را می نویسیم.

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

<body>
 <p id="p01"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p02"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo"];
 document.getElementById('p01').innerHTML = brand;
 function myFunction () {
 	 brand.splice(3, 0, "Samsung", "Dell", "HP");
     document.getElementById('p02').innerHTML = brand;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

تمرین: با استفاده از متد splice()  عنصر ASUS در مثال بالا را حذف کنید.

متد concat()

در مثال زیر نحوه ترکیب آرایه ها را با استفاده از متد concat()  می بینید:

<body>
 <p id="p01"></p>
 <p id="p02"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p03"></p>

 <script> 
 var brand1 = ["Apple", "VAIO", "ASUS", "Lenovo"];
 var brand2 = ["Dell", "Acer", "Micrisoft", "HP"];
 var brand = brand1.concat(brand2);
 {
     document.getElementById('p01').innerHTML = brand1;
     document.getElementById('p02').innerHTML = brand2;
}

 function myFunction () {
     document.getElementById('p03').innerHTML = brand;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

و برای اتصال چند آرایه به هم دستور زیر را داریم:

var new_arr = arr1.concat(arr2, arr3, arr4, …);

اما توجه کنید که:

متد concat()  آرایه ها را تغییر نمی دهد بلکه بعد از اتصال آنها با هم، آرایه جدیدی را ایجاد و برمی گرداند.

متد slice()

این متد عناصری از یک آرایه را دریافت می کند و با آنها یک آرایه جدید می سازد. در مثال زیر می بینید که دو پارامتر 2 و 6 را به این متد داده ام بنابراین عناصری که شاخص عددی آنها بین 2 و 6 می باشد به آرایه جدیدی با نام brand2 تبدیل شده اند:

<body>
 <p id="p01"></p>
 <p id="p02"></p>
 <button onclick="myFunction ()">کلید کنید</button>
 <p id="p03"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell", "Acer", "Micrisoft", "HP"];
 var brand2 = brand.slice(2, 6);
 var brand3 = brand.slice(2);
 document.getElementById('p01').innerHTML = brand;

 function myFunction () {
     document.getElementById('p03').innerHTML = "<p><b>brand.slice(2, 6):</b></p>" + " " + brand2 + "<br>" +
     "<p><b>brand.slice(2):</b></p>" + " " + brand3;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

مطلب دیگری را که باید در مورد آرایه ها بدانید را در ادامه شرح می دهم:

دسته بندی عناصر آرایه ها

دوستان عزیز، جاوا اسکریپت این امکان را به ما می دهد که عناصر درون آرایه ها را با استفاده از متد هایی که در ادامه توضیح داده می شود، دسته بندی کنیم.

متد sort()

برای دسته بندی الفبایی عناصر آرایه ها از متد sort()  استفاده می کنیم.

متد reverse()

در بعضی مواقع ممکن است نیاز باشد که عناصر را به صورت الفبایی و بر عکس بچینیم. در این صورت متد reverse()  را به کار خواهیم برد.

<body>
 <p id="p01"></p>
 <button onclick="myFunction()">کلید کنید</button>
 <p id="p02"></p>
 <p id="p03"></p>

 <script> 
 var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Dell", "Acer", "Micrisoft", "HP"];
 document.getElementById('p01').innerHTML = brand;

 function myFunction() {
 	 brand.sort();
     document.getElementById('p02').innerHTML = "<p><b>brand.sort():</b></p>" + " " + brand;

     brand.reverse();
     document.getElementById('p03').innerHTML = "<p><b>brand.reverse():</b></p>" + " " + brand;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

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

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

دو عدد 25 و 100 را در نظر بگیرید. در مقایسه رشته ای عدد 25 بزرگتر از عدد 100 است. چرا؟

چون در مقایسه رشته ای اعداد، رقم به رقم مقایسه صورت می گیرد و این یعنی 2 با 1 مقایسه می شود. چون 2 بزرگتر است از 1، در نتیجه عدد 25 بزرگتر از 100 در نظر گرفته می شود. و اما راه حل چیست؟ متد جدید داریم؟

نه. متد جدید نداریم. اما راه حل داریم!

برای مقایسه اعداد باید تابع مقایسه بسازیم و آن را به متد sort()  پاس دهیم. ساختار تابع مقایسه به صورت زیر است:

function(a, b){return a - b}

و این تابع را به صورت زیر استفاده می کنیم:

arr.sort(function(a, b){return a - b})

این تابع دو عدد a و b را که در آرایه قرار دارند را انتخاب می کند. حال عمل تفریق یعنی a-b را انجام می دهد.در این صورت پاسخ این تفریق 3 مقدار می تواند باشد:

این 3 مقدار عبارتند از 0 یا مقداری مثبت و یا مقداری منفی. اگر مقدار 0 بود که دو عدد برابرند. اگر مقدار مثبت بود که یعنی عدد a بزرگتر از عدد b است. و اگر مقدار منفی بود قاعدتا عدد b بزرگتر از a است.

در مثال زیر یک آرایه عددی را ایجاد کرده و به سه روش رشته ای، عددی صعودی و عددی نزولی مرتب می کنیم:

<body>
 <p id="p01"></p>
 <button onclick="myFunction1()">دسته بندی رشته ای</button>
 <button onclick="myFunction2()">دسته بندی عددی</button>
 <p id="p02"></p>
 <p id="p03"></p>

 <script> 
 var points = [10, 450, 58, 361, 30, 5, 259, 127];
 document.getElementById('p01').innerHTML = points;

 function myFunction1() {
 	 points.sort();
     document.getElementById('p02').innerHTML = "<p><b>points.sort():</b></p>" + " " + points;

     points.reverse();
     document.getElementById('p03').innerHTML = "<p><b>points.reverse():</b></p>" + " " + points;
 }

 function myFunction2() {
 	 points.sort(function (a, b) {return a - b});
     document.getElementById('p02').innerHTML = "<p><b>ascending:</b></p>" + " " + points;

 	 points.sort(function (a, b) {return b - a});
     document.getElementById('p03').innerHTML = "<p><b>descending:</b></p>" + " " + points;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

آموزش JavaScript – بخش پنجم

در مثال زیر می بینید که می توان اعداد درون یک آرایه را به صورت تصادفی در کنار هم چید:

<body>
 <p id="p01"></p>
 <button onclick="myFunction()">چینش تصادفی</button>
 <p id="p02"></p>
 <p id="p03"></p>

 <script> 
 var points = [10, 450, 58, 361, 30, 5, 259, 127];
 document.getElementById('p01').innerHTML = points;

 function myFunction() {
 	 points.sort(function(a, b){return 0.5 - Math.random()});
     document.getElementById('p02').innerHTML = points;
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

همچنین در مثال زیر کدهایی برای یافتن بیشترین و کمترین عضو یک آرایه را می بینید:

<body>
 <p id="p01"></p>
 <button onclick="myFunction()">کلیک کنید</button>
 <p id="p02"></p>
 <p id="p03"></p>

 <script> 
 var points = [10, 450, 58, 361, 30, 5, 259, 127];
 document.getElementById('p01').innerHTML = points;

 function myFunction() {
 	points.sort(function(a, b){return a - b});
    document.getElementById('p02').innerHTML = "<p><b>lowest value:</b></p>" + " " + points[0];

 	points.sort(function(a, b){return b - a});
    document.getElementById('p03').innerHTML = "<p><b>highest value:</b></p>" + " " + points[0];
 }
 </script>
</body>

آموزش JavaScript – بخش پنجم

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

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

عملگر های منطقی و مقایسه ای را برای بررسی صحیح یا غلط بودن می نویسیم. با این عملگر ها در جلسه اول آموزش JavaScript آشنا شدیم و در ادامه با چند مثال، عملکرد آنها را می بینیم:

عملگر های مقایسه ای

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

به مقایسه های صورت گرفته در مثال زیر توجه کنید:

<body>
<p id="p01"></p>

 <script>
 var x = 10;
 document.getElementById('p01').innerHTML = 
 // (==) operator
 "<p><b>(x == '7'):</b></p>" + " " + (x == '7') + "<br>" +
 "<p><b>(x == 7):</b></p>" + " " + (x == 7) + "<br>" +
 "<p><b>(x == 10):</b></p>" + " " + (x == 10) + "<br>" +
 // (===) operator
 "<p><b>(x === '6'):</b></p>" + " " + (x === '6') + "<br>" +
 "<p><b>(x === 10):</b></p>" + " " + (x === 10) + "<br>" +
 // !== operator
 "<p><b>(x !== 4):</b></p>" + " " + (x !== 4) + "<br>" +
 "<p><b>(x !== '10'):</b></p>" + " " + (x !== '10') + "<br>" +
 "<p><b>(x !== 10 ):</b></p>" + " " + (x !== 10 );

 </script>
</body>

آموزش JavaScript – بخش پنجم

در مثال بالا می توانید با استفاده از عملگر های مقایسه ای < ، > و =< و =>  متغیر x را با هر داده ای مقایسه کنید. همانطور که می بینید اگر نتیجه مقایسه درست باشد، مقدار بولی true و اگر غلط باشد، مقدار بولی false برگردانده می شود.

عملگر های منطقی

عملگر های منطقی را برای درست یا غلط بودن منطق بین متغیر ها و مقادیر استفاده می شوند:

<body>
<p id="p01"></p>

 <script>
 var x = 10;
 var y = 4;
 document.getElementById('p01').innerHTML = 
 // ( ! ) operator
 "<p><b>!(x == y):</b></p>" + " " + !(x == y) + "<br>" +
 "<p><b>!(x > 7):</b></p>" + " " + !(x > y) + "<br>" +
 // ( || ) operator
 "<p><b>(x === 5 || y === 5):</b></p>" + " " + (x === 5 || y === 5) + "<br>" +
 "<p><b>(x === 10 || y === 5):</b></p>" + " " + (x === 10 || y === 5) + "<br>" +
 "<p><b>(x === 15 || y === 4):</b></p>" + " " + (x === 10 || y === 4) + "<br>" +
 // ( && )operator
 "<p><b>(x < 15 && y > 1):</b></p>" + " " + (x < 15 && y > 1) + "<br>" +
 "<p><b>(x < 15 && y < 1):</b></p>" + " " + (x < 15 && y < 1);

 </script>
</body>

آموزش JavaScript – بخش پنجم

همانطور که می بینید این عملگر ها نیز مقدار بولی true و false را بر می گردانند.

و اما یک مطلب مهم:

عملگر شرطی سه گانه

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

variablename = (condition) ? value1:value2

اگر شرایط برقرار باشد، یعنی پاسخ سوال مثبت می باشد در نتیجه value1  به متغیر نسبت داده می شود. در غیر این صورت value2  به آن نسبت داده می شود:

<body>
<input id="age" value="18" />
<button onclick="myFunction()">کلیک کنید</button>
<p id="p01"></p>

 <script>
 function myFunction() {
 	var age, text;
 	age = document.getElementById('age').value;
 	text = (age < 15) ? "Your age is less than 15":"Your age is more than 15";
    document.getElementById('p01').innerHTML = text;
 }

 </script>
</body>

آموزش JavaScript – بخش پنجم

همانطور که می بینید اساس کار این عملگرها، مقادیر بولی، یعنی true یا false می باشد و در نوشتن عبارات شرطی به کار میروند.

به نظر شما 5 > “15” درست است یا غلط؟

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

حالا مقایسه 5 > “Hello” درست است یا غلط؟

حضور شما عارضم که این مقایسه مقدار false را بر می گرداند.

همچنین توجه داشته باشید که رشته خالی (یعنی “”) در برنامه نویسی، صفر در نظر گرفته می شود و صفر یعنی false.

به نظر شما نتیجه مقایسه “5” > “15” مقدار true می باشد یا false؟

لطفا پاسخ خود را در بخش دیدگاه ها برای ما ارسال نمایید.

و اما آخرین مبحث این جلسه:

دستورات شرطی در جاوا اسکریپت

زمانی که می خواهیم تحت شرایطی خاص، کدهایی اجرا شوند از دستورات شرطی استفاده می کنیم.

اولین دستور شرطی که باید با آن آشنا شوید، دستور if  می باشد که اگر شرایط برقرار بود، کدهایی اجرا می شوند. ساختار آن به صورت زیر می باشد:

if (شرایط) {

کدهایی که اگر شرایط درست بود باید اجرا شوند

}

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

اما می تواینم با استفاده از دستور else  کدهای دیگری را بنویسیم که در صورت درست نبودن شرایط، اجرا شوند. ساختار استفاده از دستور if  و else  به صورت زیر می باشد:

if ( شرایط ) {

کدهایی که اگر شرایط درست بود باید اجرا شوند

} else {

کدهایی که اگر شرایط درست نبود باید اجرا شوند

}

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

<body>
<p id="p01"></p>

 <script>
  var a = 10, b = 8;
  var text;

  if (a > b) {
  	text = "a - b = " + ( a - b );
  } else {
  	text = "b is greater than a"
  }

 document.getElementById('p01').innerHTML = text;
 </script>
</body>

آموزش JavaScript – بخش پنجم

در مثال ساده بالا گفتیم که اگر a بزرگتر b باشد آنگاه عمل a – b انجام شود و اگر این شرایط درست نبود مقدار: b بزرگتر است از a را در مرورگر برگردان.

علاوه بر این دو، دستور else if  را هم داریم که در صورت غلط بودن شرایط if ، شرایط دیگری را بررسی می کند و با درست بودن شرایط ثانویه، کدهایی را اجرا می کند.

دستور else if  نیز ساختار زیر را دارد:

if ( شرایط اولیه ) {

کدهایی که اگر شرایط اولیه درست بود باید اجرا شوند

} else if ( شرایط ثانویه ) {

کدهایی که اگر شرایط ثانویه دست بود باید اجرا شوند

} else {

کدهایی که اگر شرایط اولیه و ثانویه درست نبودند باید اجرا شوند

}

در ساختار بالا هر تعداد else if  را می توانیم استفاده کنیم. یعنی در تعیین شرایط برای انجام عملی خاص، محدود نیستیم.

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

<body>
<p id="p01"></p>

 <script>
  var a = 10, b = 25;
  var text;

  if (a > b) {
  	text = "a is greater than b and a - b = " + (a - b);
  } else if (b > a) {
  	text = "b is greater than a and a - b = " + (a - b);
  } else {
  	text = "a = b and a - b = " + (a - b);
  }

 document.getElementById('p01').innerHTML = text;
 </script>
</body>

آموزش JavaScript – بخش پنجم

دوستان  عزیز و همراهان همیشگی سایت سازان، در اینجا آموزش JavaScript – بخش پنجم را به پایان می رسانم.

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

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

همراه من باشید در جلسه ششم آموزش JavaScript.

نوشته های مرتبط

دیدگاه ‏خود را بنویسید