نحوه استفاده از اپراتورهای بزرگتر و کمتر در جاوا اسکریپت
![](https://khabarkaav.ir/wp-content/uploads/2024/02/pankaj-patel-1IW4HQuauSU-unsplash.jpg)
![](https://www.freecodecamp.org/news/content/images/2024/02/pankaj-patel-1IW4HQuauSU-unsplash.jpg)
در برنامه های جاوا اسکریپت خود، اغلب باید دو مقدار را با هم مقایسه کنید تا ببینید یکی از دیگری بزرگتر است یا کمتر. اینجاست که اپراتورهای بزرگتر و کمتر به کار می آیند.
در این مقاله، نحوه استفاده از این عملگرها را با جزئیات بیشتر از طریق مثال های کد تحلیل خواهیم کرد.
نحوه استفاده از عملگر بزرگتر از >
در جاوا اسکریپت
می توانید از عملگر بزرگتر برای تحلیل اینکه آیا مقدار سمت چپ بزرگتر از مقدار سمت راست است یا خیر استفاده کنید. با نماد >
نشان داده می شود.
اگر مقدار سمت چپ بزرگتر از مقدار سمت راست باشد، نتیجه یک مقدار بولی true
و اگر مقدار نادرست باشد false
برمیگرداند.
در اینجا مثالی برای تحلیل اینکه آیا 5
بزرگتر از 3
است آورده شده است:
console.log(5 > 3); // true
از آنجایی که عدد 5
بزرگتر از 3
است، نتیجه true
خواهد بود.
اگر دو مقدار را تغییر دهیم، نتیجه false
خواهد بود:
console.log(3 > 5); // false
نحوه استفاده از عملگر کمتر از <
در جاوا اسکریپت
برای تحلیل اینکه آیا مقدار سمت چپ کمتر از مقدار سمت راست است می توانید از عملگر کمتر استفاده کنید. با نماد <
نشان داده می شود.
اگر مقدار سمت چپ کمتر از مقدار سمت راست باشد، نتیجه یک مقدار بولی true
و اگر مقدار نادرست باشد، مقدار false
برمیگرداند.
در اینجا یک مثال وجود دارد که تحلیل می کند که آیا عدد 3
کمتر از 5
است یا خیر:
console.log(3 < 5); // true
از آنجایی که 3
کمتر از 5
است، نتیجه true
خواهد بود.
اما اگر دو مقدار را تغییر دهیم، نتیجه false
خواهد بود:
console.log(5 < 3); // false
نحوه استفاده از عملگر بزرگتر یا مساوی >=
در جاوا اسکریپت
اگر باید تحلیل کنید که آیا مقدار سمت چپ بزرگتر یا مساوی با مقدار سمت راست است، می توانید از عملگر بزرگتر یا مساوی استفاده کنید. با نماد >=
نشان داده می شود.
در صورتی که مقدار سمت چپ بزرگتر یا مساوی با مقدار سمت راست باشد، نتیجه یک مقدار true
است و اگر این مقدار نادرست باشد، false
برمیگرداند.
در اینجا مثالی وجود دارد که تحلیل می کند آیا عدد 5
بزرگتر یا مساوی 5
است:
console.log(5 >= 5); // true
از آنجایی که عدد 5
برابر با 5
است، نتیجه true
خواهد بود.
اگر مقدار سمت چپ را به عدد 3
تغییر دهیم، نتیجه false
خواهد بود:
console.log(3 >= 5); // false
نحوه استفاده از عملگر کمتر یا مساوی <=
در جاوا اسکریپت
اگر باید تحلیل کنید که مقدار سمت چپ کمتر یا مساوی با مقدار سمت راست است، می توانید از عملگر کمتر یا مساوی استفاده کنید. با نماد <=
نشان داده می شود.
در صورتی که مقدار سمت چپ کمتر یا مساوی با مقدار سمت راست باشد، نتیجه یک مقدار true
است و اگر مقدار نادرست باشد، مقدار false
برمیگرداند.
در اینجا مثالی وجود دارد که تحلیل می کند عدد 3
کمتر یا مساوی 5
است:
console.log(3 <= 5); // true
اگر مقدار سمت چپ را به عدد 6
تغییر دهیم، نتیجه false
خواهد بود:
console.log(6 <= 5); // false
نحوه استفاده از عملگرهای مقایسه در یک بیانیه شرطی
استفاده از عملگرهای مقایسه در داخل دستورات شرطی مانند دستور if
معمول است.
در این مثال، اپلیکیشنی داریم که سن کاربر را میپرسد و بر اساس سنی که وارد کرده، پاسخی را نشان میدهد:
برای HTML، از فرمی استفاده می کنیم تا سن کاربر را بپرسیم. در زیر فرم، پیام را بر اساس سن وارد شده نمایش خواهیم داد.
<h1 class="title">How old are you?</h1> <main> <form id="form"> <div class="input-container"> <label for="age">Enter your age: </label> <input type="number" id="age" required min="1" max="120" /> </div> <button class="submit-btn" id="submit-btn">Submit age</button> </form> <p class="result-para" id="result"></p> </main>
در مرحله بعد، از روشی به نام getElementById
برای عبور از سند HTML استفاده می کنیم تا عناصری را پیدا کنیم که با شناسه های مشخص شده مطابقت دارند.
میتوانیم از روش برای دریافت عنصر فرم، ورودی سن و پاراگراف نتیجه استفاده کنیم و آنها را به متغیرهای const
نسبت دهیم:
const ageInput = document.getElementById("age"); const form = document.getElementById("form"); const resultParagraph = document.getElementById("result");
سپس میخواهیم آرایهای از رشتهها ایجاد کنیم تا کاربر را بر اساس سن او نشان دهیم.
const responsesArr = [ "Oh wow! You are just a kid.", "Nice! It looks like you are old enough to drive in the States.", "Awesome! It looks like you are old enough to vote in the States.", "Cool! It looks like you are old enough to drink in the States.", ];
سپس باید تابعی به نام displayResponse
با پارامتری به نام age
ایجاد کنیم. این تابع وظیفه نمایش پیام ها را بر اساس سن وارد شده بر عهده خواهد داشت.
function displayResponse(age) { }
در داخل آن تابع، باید تحلیل کنیم که آیا سن کاربر کمتر از 16
است یا خیر. اگر اینطور باشد، اولین پیام را در آرایه responsesArr
نمایش خواهیم داد.
ما از ویژگی textContent
برای تغییر متن داخل عنصر resultParagraph
استفاده خواهیم کرد.
if (age < 16) { resultParagraph.textContent = responsesArr[0]; }
اگر کاربر بین 16
تا 18
باشد، پیام دوم را در آرایه responsesArr
نمایش می دهیم.
else if (age >= 16 && age < 18) { resultParagraph.textContent = responsesArr[1]; }
اگر کاربر بین 18
تا 21
باشد، سومین پیام را در آرایه responsesArr
نمایش خواهیم داد.
else if (age >= 18 && age < 21) { resultParagraph.textContent = responsesArr[2]; }
اگر کاربر 21
یا بیشتر باشد، آخرین پیام را در آرایه responsesArr
نمایش خواهیم داد.
else { resultParagraph.textContent = responsesArr[3]; }
آخرین بخش این تابع، بازنشانی فرم پس از ارسال سن توسط کاربر است.
ageInput.value = "";
در اینجا تابع کامل است:
function displayResponse(age) { if (age < 16) { resultParagraph.textContent = responsesArr[0]; } else if (age >= 16 && age < 18) { resultParagraph.textContent = responsesArr[1]; } else if (age >= 18 && age < 21) { resultParagraph.textContent = responsesArr[2]; } else { resultParagraph.textContent = responsesArr[3]; } ageInput.value = ""; }
آخرین بخش این برنامه اضافه کردن یک شنونده رویداد است که تحلیل می کند کاربر چه زمانی ورودی خود را در فرم ارسال می کند و آن پیام را بر اساس سن وارد شده نمایش می دهد.
ما قصد داریم از متد addEventListener
برای گوش دادن به رویداد submit
در فرم استفاده کنیم. وقتی فرم ارسال شد، از رفتار پیشفرض فرم جلوگیری میکنیم و تابع displayResponse
را با مقدار ورودی سن فراخوانی میکنیم.
form.addEventListener("submit", (e) => { e.preventDefault(); displayResponse(ageInput.value); });
در اینجا یک مثال تعاملی کامل در CodePen آمده است:
نتیجه
کار با عملگرهای مقایسه ای مانند اپراتورهای بزرگتر، بزرگتر یا مساوی، کمتر و کمتر یا مساوی با عملگرها یک کار رایج در جاوا اسکریپت است. از آنها برای مقایسه دو مقدار و برگرداندن مقدار بولی true
یا false
بر اساس مقایسه استفاده می شود.
امیدوارم از این مقاله لذت برده باشید و برای شما مفید بوده باشد.
کد نویسی مبارک!
ارسال نظر