دستورات شرطی در JavaScript
دستورات شرطی
اغلب اوقات هنگام نوشتن یک اسکریپت، شما نیاز دارید که تصمیم های متفاوتی در مقابل نتایج مختلف بگیرید، برای تحقق این موضوع از جملات شرطی استفاده می کنیم.
انواع جملات شرطی در JavaScript:
- ... if: هنگامی که شرط درست باشد، دستور مقابل if اجرا می شود.
- if ... else: اگر شرط درست باشد دستور مقابل if اجرا می شود وگرنه دستور دستور مقابل else اجرا می شود.
- if ... elseif ... else: برای اجرای یک دستور از بین چند دستور کاربرد دارد.
- Switch: برای انتخاب و اجرای یک دستور از بین چند دستور استفاده می شود.
دستور if:
هنگامی که شرط درست باشد، دستور مقابل if اجرا خواهد شد.
نحوه استفاده:
{
code to be executed if condition is true
}
توجه داشته باشید که if با حروف کوچک نوشته شده است. اگر از حروف بزرگ (IF) استفاده کنید، JavaScript یک خطا تولید خواهد کرد.
مثال (دستورات شرطی در JavaScript)
/*اگر ساعت کوچکتر از 10 باشد
جمله "صبح بخیر" چاپ خواهد شد*/
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>
توجه داشته باشید که در این نوع جمله شرطی، قسمت ...else... وجود ندارد. شما به مرورگر می گویید تنها اگر شرط درست بود، کد مورد نظر اجرا شود.
دستور if...else:
این دستور که در واقع می تواند کامل کننده if باشد، تعیین می کند که اگر شرط درست نبود چه دستوری اجرا شود.
نحوه استفاده:
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
مثال (دستورات شرطی در JavaScript)
/*اگر ساعت کوچکتر از 10 باشد جمله "صبح بخیر" چاپ خواهد شد
وگرنه جمله "روز بخیر" چاپ می شود*/
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
دستور if...elseif....else:
همان طور که در بالا گفته شد این نوع if برای اجرای یک دستور از بین چند دستور کاربرد دارد.
نحوه استفاده:
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}
مثال (دستورات شرطی در JavaScript)
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>
مثال - خودتان امتحان کنید
لینک تصادفی
در این مثال یک لینک نشان داده شده است، زمانی که روی لینک کلیک می کنید شما به سایت beyamooz.com یا W3Schools.com لینک داده می شوید. برای هر کدام از آنها %50 شانس وجود دارد.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 33723
دیدگاه‌ها
سلام.
من توی مثال اول در استفاده از عبارت کلیدی new موندم که برای چیه.
دو تا کاربردی که در فصول قبل یاد گرفتم یکی تعریف آرایه بود:
var text = new array(); a
و یکی هم تعریف نوع یک متغیر بود:
var text = new string; a
حالا اینجا عبارت new با هیچ کدام اینها جور در نمیاد:
var d = new Date(); a
اینجا new چه کاری انجام میده؟
سپاس
سلام.
با استفاده از کلمه ی کلیدی new می توان از یک متد، یک شیء ایجاد نمود. در اولین مثال از این مقاله، از متد ()Date یک شیء ایجاد کرده ایم. درواقع از این متد، یک نمونه گیری انجام داده ایم. در تمامی موارد به همین صورت می باشد:
var d = new String();
var d = new Array();
var d =new Date();
با تشکر از جواب سریعتون.
البته شاید چون هنوز به مبحث اشیاء نرسیدم این جوابتون کامل برام مفهوم نباشه. یعنی میخواین بگین ما بادستور var یک متغیر ایجاد میکنیم که داخل اون مقدار تاریخ رو با تابع ()Date قرار دادیم و با عبارت new اون رو تبدیل به یک شیء میکنیم؟ و اینکه فرمودین یک نمونه گیری انجام دادیم رو اصلا متوجه نشدم.
فرض کنید که می خواهیم یک تابع ایجاد کنیم که به ما کمک کند تاریخ را به سادگی به دست بیاوریم. مثلا نام این تابع را Date قرار می دهیم.
این تابع ما یک تابع کلی است که وظایف مختلفی می خواهیم برای آن تعریف کنیم. مثلا در اینجا می خواهیم از این تابع روز(Day) و ساعت(hours) را بگیریم. برای اینکه بتوانیم به هریک از این مقادیر به صورت جدا جدا دسترسی داشته باشیم، میایم و توی تابع اصلی، یک سری متد ( تابع) تعریف می کنیم. مثلا یک متد به نام ()getDay تعریف می کنیم که به ما روز را بدهد. و یک متد دیگر به نام ()getHours تعریف می کنیم تا ساعت رو به ما بدهد.
خب حالا وقتی که این متدها رو درون این تابع کلی یعنی تابع ()Date تعریف کردیم، برای استفاده از این متدها ابتدا باید از این تابع یک شیء ایجاد کنیم. که این کار رو با استفاده از کلمه ی کلیدی new انجام می دهیم. وقتی که شیء یا همان نمونه ی ما از این تابع ایجاد شد، قادر هستیم تا از متدهای درون این تابع استفاده کنیم و ساعت و روز را به دست بیاوریم. بنابراین ابتدا میایم و از تابع ()Date یک نمونه می گیریم و در داخل یک متغیر قرار می دهیم، مثال زیر:
var d =new Date();
وقتی که عمل نمونه گیری ر انجام دادیم، متدها و متغیرهای تابع Date در درون متغیر d ذخیره می شوند. حالا می توانیم از این متدها استفاده کنیم و ساعت و روز رو به دست بیاوریم. برای استفاده از این متدها به صورت زیر عمل می کنیم:
var time = d.getHours();
var day = d.getDay();
مثلا دستور اول در بالا به این معنی است که: متد ()getHours که در داخل شیء d قرار دارد را اجرا کن و حاصل را در متغیری به نام time قرار بده. یعنی زمان(ساعت) رو در داخل این متغیر قرار بده.
الان یعنی متغیر time و day هم تبدیل به شیء شدند(به خاطر استفاده از متغیر d داخلشون که قبلا تبدیل به شیء شده بود) یا اینکه اگه بخواهیم چیزی از اونها استخراج کنیم دوباره باید با کلمه کلیدی new تبدیل به شیء بشن؟
البته پوزش میخوام از این همه سوال و تشکر از این همه وقتی که برامون میزارین.
ببینید، متغیر d الان یک شیء است درسته؟ حالا توی این شیء یک سری متد وجود دارند.
متد چیست؟ اگه خیلی ساده بخوام بگم، یک متد یک تابع هست. و چیزی رو محاسبه می کند و برای ما برمی گرداند.
حالا مثلا ما داخل متغیر d دو تا متد داریم. متد ()getHours وقتی صدا زده بشه، ساعت رو بری ما برمی گرداند. و متد ()getDay روز را برای ما برمی گرداند.
چطور می تونیم یک متد را که در داخل یک شیء مثل متغیر d قرار دارد صدا بزنیم؟
با استفاده از یک علامت نقطه(.) می تونیم این کار رو انجام بدهیم. به این صورت که ابتدا نام شیء ای که متد ما در داخل آن وجود دارد را می نویسیم (در اینجا d ) و سپس یک علامت نقطه می گذاریم. و سپس نام متدی که می خواهیم اجرا شود را می نویسیم و یک پرانتز جلوی آن قرار می دهیم.
مثلا به دستور زیر توجه کنید:
var d =new Date();
var day = d.getDay();
معنی دستورات بالا به این صورت است:
در خط اول، ابتدا میایم از تابع کلیِ ()Date با استفاده از کلمه ی کلیدی new یک شیء درست می کنیم و در داخل متغیر d اطلاعات این شیء ذخیره می شود. حالا می تونیم از متدهایی که درون این تابع کلی تعریف شده بوده اند، استفاده کنیم.
بنابراین ابتدا نام شیء خودمان(یعنی d ) را می نویسیم و سپس یک علامت نقطه(.) قرار می دهیم و سپس نام متدی که می خواهیم اجرا شود را می نویسیم. وقتی که این متد رو با استفاده از روش گفته شده، صدا می زنیم(اجرا می کنیم)، این متد یک مقدار را برای ما برمی گرداند که در داخل متغیر day قرارمی گیرد.
بسیار عالی توضیح دادین. راستش تا یه موضوع برام کامل جا نیوفته نمیتونم از روش رد بشم. حالا دیگه دو زاریم افتاد. ممنون
سلام و خداقوت از زحمات زیادتون.من تو قسمت مثال else if بجای کد قسمت else از document.getEle mentById("sa"). innerHTML="good day";
استفاده کردم اما داخل تگی که بوسیله آی دی خواستم good day نوشته بشه اینکا نمیشه و همون محتوای متنی قبلیش باقی میمونه
سلام. خواهش می کنم.
باید به ساعت کامپیوتر هم توجه کنید. در مثال زیر که لینکش رو قرار داده ام، اگر ساعت کمتر از 10 باشه، شرط اول اجرا میشه و در غیر این صورت عبارت hello Ehsan در عنصر با آی دی sa قرار میگیره:
codepen.io/sbaloot/pen/YNdgwa
سلام من یک سوال دارم دقیقا عین سوال sdd اما با این تفاوت که اگر listbox باشه چطور می تونیم از دستورات شرط استفاده کنیم
با سلام.
کنترل‌ها یه خاصیت به نام value دارن که توسط آن می‌توان مقدار کنترل را خواند، یا به مقداری به آن انتساب نمود.
اگر این کنترل چند مقدار بگیرد، این خاصیت مقادیر را به صورت ارایه نمایش خواهد داد.
این خاصیت در jQuery به صورت ()val می‌باشد.
alert(document.getElementById(#control_id).value);
alert($('#control_id').val());
سلام و تشکر بخاطر سایت بسیار خوبتان
اگر بخواهیم از رادیو باکس ها در شرط استفاده کنیم به چه شکل می شود مثلا بگیم وقتی رادیو باکس فعال باشه این کار رو بکن
سلام
یک مثال برای شما در یک ادیتور آنلاین ایجاد کرده ایم. آدرس: codepen.io/sbaloot/pen/EjGWqm
سلام تشکر از سایتتون
لطفا بگید چرا در کدی که من نوشتم کد عمل نمی کند
http://uploadbaz.com/qu42p08g8kz6
سلام
برای ارتباط با عناصر html باید از دستور getElementById استفاده نمایید: codepen.io/sbaloot/pen/bdOgPM
سلام لینک زیر رو ببینید مقدار دکمه وقتی روی آن کلیک می کنم تغییر نمی کنه ضمنا بعد از کلیک وقتی یک بار دیگر کلیک کردم می خواهم به مقدار اولیه بر گردد
http://codepen.io/prv/pen/RPeBQZ
سلام
به صورت زیر عمل کنید:
codepen.io/sbaloot/pen/yNRqjr
سلام
ببخشید زمانی که در شرط مورد نظر متغیر باشد چه معنی می دهد مثل
if(n){
بعد اگر متغییری با true باشد مثل if (n==true) یعنی اگر متغییری که برای مثلا دکمه تعریف شده باشد وقتی فعال شود کاری را انجام بده ؟؟؟
اگر که n یک عدد باشد، هنگامی که برابر با 0 است false برگردانده می شود و اگر که برابر با عددی دیگر باشد true برمی گردد. اگر که n رشته باشد، اگر اشتباه نکنم همواره true برمی گردد.
باید وقتی دکمه تان فعال شد، یک متغیر را true کنید. یعنی ابتدا آن را برابر با flase قرار دهید و وقتی که دکمه فعال شد اون رو برابر با true قرار دهید و سپس از این متغیر در شرط های دیگه استفاده کنید.
بعد با جاوا اسکریپت آیا بادستور return میشه به قسمت کد پرش کند یا باید حتما به تابع برود مثلا
function a(){
var n=prompt("");
if(n==2){
alert()
else{
alert
}
}
return n
}
ببخشید ولی دقیقا منظورتون رو متوجه نمی شوم . اگه بیشتر توضیح بدید ممنون میشم...
salam
mersi az saytetun
dasture if ke neveshtam che mani mide
if (!m){
m = 1;
s();
}
}
معنی آن اینه: اگر که نقیض m برابر با true باشد، m را برابر با 1 قرار بده و تابع s را اجرا کن.
سلام چگونه می توانم از چک باکس و رادیو باکس تو دستورا ت شرطی استفاده کنم
مثلا وقتی چک باکس تیک بخوره یک سری شرط را انجام بده یا وقتی رادیو باکس فعال باشه ؟
ضمنا برای لیست باکس فقط باید از نام لیست استفاده کنیم دیگه درسته؟؟؟
سلام
کد مورد نظرتون رو در یک ادیتور آنلاین ایجاد کردیم به آدرس: codepen.io/sbaloot/pen/MwXLmL
در مورد لسیت باکس اگه منظورتون همون تگ select باشه، می تونید از دستور زیر برای ارتباط با آن استفاده کنید:
var x = document.getEle mentById("mySel ect");
سلام یک کد نوشتم که دوتا چک باکس و دوتا رادیو باکس داره طبق کد شما عمل کردم
کاربر حتما باید یکی از رادیو باکس ها را فعال کند در غیر این صورت ارور می دهد اما از چک باکس ها اگر یکی را هم فعال نکرد مهم نیست اما کد عمل نمی کند
function Send(){
var a=document.getElementById("_js").checked;
var b=document.getElementById("_css").checked;
var c=document.getElementById("_r1").checked;
var d=document.getElementById("_r2").checked;
if (a==true || b==true || c==true || d==true){
document.getElementById("").innerHTML="Your information saved";
}else{alert("Eror");}
if (c==false || d==false){alert ("inser your working");}else{}}
javaScript:
Css-Html:
work in the department computer:
work in the department Web design:
سلام
لطف کنید و در یکی از سایت های زیر ثبت نام به عمل آورید و کد مورد نظر خودتون رو اونجا ذخیره کنید و لینکش را برای ما ارسال کنید تا بتوانیم به درستی منظور شما را متوجه شویم:
1.[http://codepen.io/
2.https://jsfiddle.net
http://codepen.io/prv/pen/qdKvjP این لینکو ببینید
کدتون درست کار می کنه فقط آکولاد تابع رو در آخر کدها ی جاوااسکریپت فراموش کرده بودید. لینک جدید کدها ی مد نظر شما: codepen.io/sbaloot/pen/yNEwze
سلام یه کد داریم که وقتی روی آن کلیک می کنیم بعد از رنگ آن پیغام ظاهر شود آیا کد زیر درست است:
function a(){
var n=document.getElementById("ex");
n.style.backgroundColor="red";
if (n.backgroundColor==red){
alert("Start");
}else{
alert("No!!");
}
}
Hello Baby
سلام
کد رو باید به صورت زیر بنویسید :
function a(){
var n=document.getElementById("ex");
n.style.backgroundColor="red";
if (n.style.backgroundColor=="red"){
alert("Start");
}else{
alert("No!!");
}
}
اشکال از خط 4 بود که رفع شد...
سلام
ببخشید از کدام قسمت میشه به متد هایی مثل tan دست پیدا کرد ؟
من دیدم اما همه متد ها نیست !
میشه عقب جلو برد و منویی نداره
سلام
برای دسترسی به کلیه متدهای شیء Math مثل tan به لینک زیر مراجعه فرمایید:
beyamooz.com/jsref/342-javascript/2616-%DA%A9%D9%84%DB%8C%D9%87-%D9%85%D8%AA%D8%AF%D9%87%D8%A7%DB%8C-%D8%B4%DB%8C%D8%A1-math-%D8%AF%D8%B1-javascript
این قسمت بدلیل اینکه هنوز تکمیل نشده، منویی برای آن در نظر گرفته نشده است...!
این چیه ؟var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write( "Good morning");
}
منظورم getHours هستش ! اصلا چرا d.getHours ?
www.beyamooz.com/try_it_yourself/tryit.php?filename=tryjs_ifthen
از متد ()getHour در Javascript، برای برگرداندن ساعت استفاده می شود(از 0 تا 23)، با توجه به خط قرمز رنگ نهایتاً ساعت جاری در متغییر time ذخیره می شود و در ادامه اگر مقدار آن از 10 کوچکتر بود، پیغام "Good morning" چاپ خواهد شد.
برای کسب اطلاعات بیشتر در مورد متد ()getHour به لینک زیر مراجعه نمایید:
www.beyamooz.com/jsref/2836
خیلی ممنون
ولی خوب متغیر d چی هست ؟ چیکار میکنه ؟ new date چی ؟
اگر سوال و جواب ها ادامه دار هستند، خیلی راحت روی لینک "پاسخ دادن" کلیک فرمایید...!var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write( "Good morning");
}
خط اول: در JavaScript با استفاده از کلمه کلیدی var، می توانیم یک متغییر را تعریف کنیم. در اینجا نام متغیرمان d است که می تواند هر نام دلخواه دیگری باشد. در ادامه باید d را مقدار دهی کنیم، بنابراین از یک علامت مساوی استفاده کرده ایم. در Javascript برای تعریف اشیاء از کلمه کلید new استفاده می شود، حالا d دیگر یک متغییر ساده نیست، بلکه یک شیء است، اما زمانی که بعد از new از تابع ()Date استفاده می کنیم، باعث می شود تا نهایتاً شیء d با تاریخ جاری مقداری دهی شود.برای کسب اطلاعات بیشتر در مورد Date به لینک زیر مراجعه نمایید:
www.beyamooz.com/javascript/128-object/400
پس تا اینجا، تاریخ جاری در d قرار دارد. یعنی d شامل تاریخ و زمان جاری است.
خط دوم: زمانی که می گوییم d یک شیء از نوع Date است، بنابراین خیلی راحت می توانیم به موارد زیر دسترسی داشته باشیم:
1- ثانیه جاری
2- دقیقه جاری
3- ساعت جاری
4- روز جاری
5- ماه جاری
6- سال جاری
اما از موارد بالا، تنها به ساعت نیاز داریم، بنابراین خیلی راحت از متد ()getHours استفاده می کنیم. نهایتاً ساعت جاری داخل متغیر time قرار می گیرد. برای آشنایی با اشیاء در JavaScript به لینک روبرو مراجعه فرمایید: beyamooz.com/javascript/128-object/398
خط سوم: حالا اگر مقدار time از 10 کوچکتر بود، پیغام "Good morning" چاپ خواهد شد.
سلام با تشکر از سایت بسیار عالی و متفاوت شما
ببخشید اقای مهندس میشه کدی قرار بدید که به هنگام وقت اذان , پخش اذان انجام بشه من هرکاری کردم نتونستم این کار رو انجام بدم ممنون میشم که یه راهنمایی بکنید
سلام
عالیه. دست همتون درد نکنه. لطفا محکم و استوار ادامه بدهید.
با تشکر
خیلی خودتون و سایتتون رو دوست دارم. توی مثال آخر با عنوان "لینک تصادفی" این 0.5 که نوشتید معنی چی میده؟؟؟؟؟؟؟var r=Math.random();
if (r>0.5){
document.write("<a href='http://ww w.beyamooz.com' >Visit beyamooz.com!</a>");
}
else
{
document.write("<a href='http://ww w.W3Schools.com '>Visit W3Schools.com!</a>");
}
ممنون
در کد بالا متد ()random، یک عدد تصادفی بین 0 و 1 را برمی گرداند. بنابراین اگر این عدد بزرگتر از 0.5 بود لینک beyamooz.com را مشاهده خواهید کرد وگرنه W3Schools.com
برای کسب اطلاعات بیشتر در مورد متد ()random به لینک زیر مراجعه فرمایید:
www.beyamooz.com/jsref/2828
عاااالی این مبحث با این که مفهومی بود من از سایتتون خیلی خوب یاد گرفتم.
موفق باشید.