Have an account? Sign in
Login  Register  Facebook
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
[Edit] الجمل الشرطية
if{} : الجمل الشرطية في أبسط صورة لها يكون تكوينها كالتالي:
if (الشرط)

الأمر
الجمل الشرطية تمكنك من إتخاذ قرارات بناء على شروط محددة و كما هو موضح بالأعلى يوضع الشرط بين القوسين التاليين لكلمة if ثم يوضع أسفلهم الأمر الذي سيتم تنفيذه فقط إن تحقق هذا الشرط أي كان صحيحا true و لكي يتضح لك ما هو معنى الشرط و الأمر سأوضح لك بالمثال مثلا أن تقول إذا تساوى متغير و ليكن num الرقم 1 اعرض النص equal نكتبها هكذا
if(num==1)
alert("equal")
و ربما هذه المرة الأولى في الدروس التي تقابلنا فيها هذه الأداه == و هي مختلفة عن أداة الجمع المعتادة = حيث أن : الأداة "==":تقوم بمقارنة ما على يمينها بما على يسارها و تعطى الناتج ture إن كانو متساويين و false إن كانو غير متساويين.
2 == 1 // تعطينا false
99.0 == 99 // تعطينا true
أما الأداة"=":فإنها تضع قيمة ما على يمينها في المتغير الموجود على يسارها . و الأداة "==" هي واحدة من أدوات المقارنة اللذين هم:
  • == يساوي
  • != لا يساوي
  • < أقل من
  • <= أقل من أو يسواي
  • > أكبر من
  • >= أكبر من أو يساوي
وفي جميعهم إن تحققت العلاقة و كانت صحيحة يرجع true و إن لم تتحقق يرجع false,وللتوضيح أكثر فإنه مثلا إن كتبت هذا الكود: result =4<7 فإن قيمة result ستكون صفر لأن العلاقة لم تتحقق فتم إرجاع صفر و من خلال الأداة = تم وضعه في المتغير result و إن و ضعنا المتغير result داخل قوس if أي وضعناه محل الشرط هكذا if(result) alert('true") فإن الأمر الذي يليه alert('true") لن يتم تنفيذه فإنه و كصياغة أخرى لما قلناه من قبل إن كانت القيمة بين قوسي if true ينفذ الأمر الذي يليها أما إن كانت false فإنه لا ينفذ. ولذلك إن وضعنا في قوسي if القيمة true مباشرة هكذا
if(true)
أي أمر
فإن الأمر الذي يليها سيتم تنفيذه دائما كأنها غير موجودة أما إن وضعنها فيها القيمة false مباشرة هكذا
if(false)
أي أمر
فإن الأمر الذي يليها لن يتم تنفيذه أبدا كأن الأمر غير موجود. و إن كانت القيمة أو الناتج الموجود بين قوسي if غير true أو false فإنه يتم تفسيرها كالتالي : أي قيمة غير الصفر تعتبر true ,أما الصفر فيعتبر false كذلك القيمة null تعتبر false . في كل الأمثلة التي عرضناها سابقا فإن كلمة if تحكم تنفيذ أمر واحد فقط و لكن ماذا لو كنا نريد أن نجعل تنفيذ مجموعة من الأوامر وليس أمرا واحدها فقط مشروطا بتحقيق الشرط ما بين قوسي if ؟يتم ذلك كالتالي :
if (الشرط)
{
الأمر الأول 
الأمر الثاني 
الأمر الثالث
}
و كما هو موضح أننا نضع الأوامر بين قوسي مجموعة {} فيتم التعامل معهم كلهم كأنهم أمر واحد إن تحقق الشرط أي كانت القيمة بين قوسي if صحيح true فإنه يتم تنفيذ كل الأوامر بي القوسين بالترتيب من الأعلى إلا الأسفل طبعا و إن لم يتحقق الشرط و كانت القيمة false لا يتم تنفيذ أيا من الأوامر الموجودة بين القوسين.و المثال التالي يوضح ذلك قم بتجربته و من ثم ستجد شرحه أسفله:
شرط لمجموعة من الأوامر
<HTML>
<HEAD>
<TITLE>An if statement with a command block</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var name = prompt("Enter your name:", "John Doe") 
// دالة تقوم برسم خط أفقي حسب القيمة المحددة لها
function drawRule(width)
{
document.write("<HR WIDTH=" + width + "%>")
}
var message = "Click OK if you are using Netscape 3.0 or above"
if (!confirm(message))
{
document.write("<CENTER><B>")
document.write("Hello " + name + "!<BR>")
drawRule(50)
document.write("Please download the latest ",
"version of Netscape Navigator or Internet Explorer")
document.write("</B></CENTER>")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Try it yourself »Click on the "Try it yourself" button to see how it works

عند تنفيذ هذا الكود سيظهر لك مربع في البداية يطلب منك أن تدخل إسمك فيه و هذا المربع ظهر من خلال الأمر

var name = prompt("Enter your name:", "John Doe")

و هو عبارة عن دالة prompt و موضوع لها برامترين الأول عبارة عن النص الذي يقوله لك الصندوق الذي تظهره "Enter your name:" و الثاني فهو القيمة الإفتراضية التي ستجدها موجودة في المكان المطلوب كتابة إسمك فيه John Doe و الدالة موضوعة بعد علامة = حيث يتم وضع القيمة التي ترجعها و هي ستكون النص الذي ستدخله أنت في المتغير name . بعد ذلك ستجد تعريف لدالة تستقبل رقم و تقوم برسم خط أفقي بطول هذا الرقم الذي أدخلته .

function drawRule(width) { document.write("<HR WIDTH=" + width + "%>") }

ثم بعد ذلك ستجدة أداة الشرط if موضوع بين قوسيها الدالة confirm و التي تظهر النص الذي يوضع لها بين قوسيها في صندوق يخير المستخدم بين الضغط على ok أو cancel و إذا ضغط المستخدم ok فإنها ترجع القيمة true أما إذا ضغط cancel فإنها ترجع القيمة false و إذا نظرت للمثال ستجد العلامة ! موضوعه قبل دالة confirm و هي أداة النفي و التي تحول true إلى false و تحول false إلى true و بالتالي إذا ضغطت على ok فإن دالة confirm سترجع القيمة true التي ستعكسها أداة النفي ! إلى false و بالتالي لن تنفذ الأوامر التابعه ل if أما إذا ضغط المستخدم cancel فسترجع قيمة false فتعكسها ! إلى true و تنفذ الأوامر التي تليها والموضوعه بين قوسي مجموعة و التي هي:

{ document.write("<CENTER><B>") document.write("Hello " + name + "!<BR>") drawRule(50) document.write("Please download the latest ", "version of Netscape Navigator or Internet Explorer") document.write("</B></CENTER>") }

و كلها أوامر لإظهار نصوص في الصفحه بالدالة document.write الأول يظهر ترحيب بالإسم الذي أدخلته في المتغير name من خلال صندوق ال prompt بالإضافه إلى تاج الهيتمل <br> ثم بعد ذلك ينادي الدالة التي ترسم الخط و يضع فيها قيمة 50 و الأوامر التالية أيضا تقوم بطباعة نصوص موجودة فيها .و ستجد أن كل هذه الأوامر تنفذ إن ضغط cancel و يظهر لك نص في الصفحه يطلب منك تحديث المتصفح أما إن ضغط ok فلن ينفذ أيا من هذه الأوامر لأن شرط if لن يتحقق .

if {}else{}

ما تعلمناه بالأعلى هو أن نضع شرطا لأمر معين أو عدة أوامر إن تحقق الشرط يتم تنفيذ الأوامر و إن لم يتحقق لا يتم تنفيذ أي شيء ,ما سنتعلمه الآن هو أن نضع شرط إن تحقق ننفذ أمر معين و إن لم يتحقق يتم تنفيذ أمر آخر و يتم ذلك من خلال إستخدام الأداة else كالتالي :
if (الشرط)
{
الأوامر التي سيتم تنفيذها إن تحقق الشرط 
}
else
{
الأوامر التي سيتم تنفيذها إن لم يتحقق
}
و الأداة else لا تستخدم وحدها أبدا لكنها تستخدم مع if و هي مثل if من حيث أنه إنها تطبق على الأمر التابع لها مباشرة و إن أردت ربطها بعدة أوامر فإنك تستخدم قوسي المجموعة {} أيضا . و للتوضيح أكثر إن كان الشرط الموجود بين قوسي if قيمته true أي صحيح: فإن الأمر أو مجموعة الأوامر التالية لـ if فقط هي التي تنفذ . أما إن كان الشرط الموجود بين قوسي if خطأ false: فإن الأوامر الموجودة بين القوسين التالليين لـ else فقط هي التي تنفذ . و المثال التالي يوضح أكثر هذا المفهوم وهو عبارة عن إختبار لعمر المستخدم إن كان اكبر من 21 سنة أو لا جربه و كالعادة شرحه أسفله:
مثال else
<HTML>
<HEAD>
<TITLE>An if statement with a command block</TITLE>
<SCRIPT LANGUAGE="JavaScript">

var age = parseInt(prompt("Please enter your age:", 120))
if (age < 21)
alert("Sorry, you are too young to enter")
else
alert("Welcome in...")

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Try it yourself »Click on the "Try it yourself" button to see how it works

في البداية من خلال هذا السطر var age = parseInt(prompt("Please enter your age:", 120)) يظهر لك صندوق يطلب أن تضع عمرك من خلال دالة الprompt, و الذي نلاحظه أننا في هذه المرة وضعنا دالة prompt كبرامتر لدالة أخرى هي parseInt و التي تقوم بتحويل أي قيمة توضع لها إلى رقم صحيح و يتم إرجاع الناتج في المتغير age . في السطر التالي نقارن بين القيمة التي وضعت في age و الرقم 21 من خلال أداة المقارنة أصغر من if (age < 21) و بالتالي إن كنت قد أدخلت عمرك أصغر من ال 21 سيتحقق الشرط و بالتالي يتحقق الأمر التالي ل if و الذي هو alert("Sorry, you are too young to enter") فيهر لك صندوق به النص Sorry, you are too young to enter . أما إن أدخلت عمرك أكبر من 21 لن يتحقق الشرط أنه أنه سيكون false و بالتالي يظهر لك الأمر التالي لelse فيظهر لك النص Welcome in... في صندوق .

if-else المتداخلة

ما سنفعله الآن هو أننا بدلا من شرط واحد سنستخدم عدة شروط بحيث إن كان الأول صحيح يتم تنفيذ الأمر الخاص به فقط أما إن كان خطأ يتم إختبار الشرط الثاني إن كان صحيحا يتم تنفيذ الأمر الخاص به فقط إن كان خطأ يذهب للشرط الذي يليه و هكذا يسير الأمر حتى تنتهى الشروط و نفعل ذلك من خلال إستخدام if و else بهذه الطريقة
if(الشرط الأول)
{الأمر الأول }
else if(الشرط الثاني )
{الأمر الثاني }
else if(الشرط الثالث)
{الأمر الثالث }
else
{الأمر الأخير}
و كما ترى في أول شرط إستخدمنا if فقط أما في بقية الشروط استخدمنا else if ثم في الختام إستخدمنا else قبل آخر أمر و آخر أمر هذا هو الأمر الذي سيتم تنفيذه إن لم يتحقق ولا شرط من الشروط . و كتطبيق على هذا المفهوم سنصنع برنامج نعطي له رقم ثم نختبر هل هو أصغر من الخمسه أو يساويها أم هل هو بين 5 و 10 أم بين 10 و 15 أم أكبر من 15 و سيكون البرنامج كما بالمثال التالي:
else if
<HTML>
<HEAD>
<TITLE>An if statement with a command block</TITLE>
<SCRIPT LANGUAGE="JavaScript">
  
var num=prompt ("Plz Enter a number")
    
if(num<=5)
   {document.write("the is number is 5 or less than 5")}
  else  if(num<10)
{document.write("the is number is between 5 and 10")}
  else if(num<15)
  {document.write("the is number is between 10 and 15")}
  else
  {document.write("the is number is larger than 15 ")}
  
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Try it yourself »Click on the "Try it yourself" button to see how it works

و المثال واضح و بسيط ففي البداية قمنا بإختبار هل الرقم يساوي 5 أو أقل منها من خلال if(num<=5) إن كان الرقم أقل من أو يساوي خمسة سيعرض البرنامج النص the is number is 5 or less than 5 أما إذا كان أكبر من الرقم خمسه فإنه سيذهب للشرط التالي الذي سيختبر إن كان أقل من الرقم 10 أو لا و هكذا حتى إذا لم يتحقق أي من الشروط هذا يعني أن الرقم ليس أصغر من 5 و ليس أصغر من 15 فبالتالي هو أكبر من 15 فيعرض البرنامج آخر أمر و هو the is number is 5 or less than 5. ملحوظة :إن قمت بإزالة else الأخيره و الأمر الذي يليها فإنه إن لم يتحقق أي من الشروط التي بالأعلى لن يتم تنفيذ أي أوامر و سينتقل البرنامج لما يلي من السطور.

switch:

switch هي أداة أخرى لإتخاذ القرارات و هي في عملها قريبة الشبه بآخر حالة تم عرضها لـ if و هي else if المتداخلة فأنت مثلا إن كان لديك متغير و ليكن num و تريد أن تعرض نص يقول أن هذا الرقم يساوي واحد إن كانت قيمة num واحد و عرض نص يقول أن النص يساوي إثنني إن كانت قيمة النص اثنين و هكذا لعدد محدد من القيم نعرض عدد محدد من النصوص فإنه يتم ذلك بإستخدام الـ switch و الشكل العالم لجملة الـswitch يكون كالتالي:
switch (متغير)
{
case القيمة الأولى:
أوامر الحالة الأولى
break;
case القيمة الثانية:
أوامر الحالة الأولى
break;
case القيمة الثالثه:
أوامر الحالة الثالثه
default:
الأوامر التي ستنفذ إذا لم تحقق أيا من الحالات بالأعلى.
}
و هكذا لأي عدد من الحالات و ليس شرطا ثلاثه . و إذا نظرنا للكود السابق سنجد أننا إستخدمنا عدد من الكلمات و هي :
  • case و توضع بعدها القيم التي عندما يساويها المتغير تنفذ الأوامر التالية و توضع القيمة بين case و بين هذه العلامة":" التي يوضع بعدها الأوامر.
  • default:و يوضع بعدها الأمر الإفتراضي الذي سينفذ إن لم يكن منطبق على المتغير حالة أخرى.
  • break:و هذه الكلمة تجعل البرنامج لا يمر على اوامر الحالات التالية و يذهب لنهاية جملة الـswitch و هي مهمة لأنه لو لم تضعها
  • بعد إن صحت حالة من الحالات بالأعلى فإن البرنامج سيكمل في قراءة بقية الحالات حتى يصل إلى default و default دائما تنفذ الأمر الخاص بها مدام تم الوصول لها و بالتالي سينفذ البرنامج دائما الأوامر الموجودة بعد default في كل الحالات إن لم تضع break بعد أوامر كل حالة .
و كتطبيق على ذلك سنقوم بعمل برنامج يطلب منك أن تذكر له حالة الطقس و يكون لديك عدد من الخيرات و هي :

rainy,sunny,cloudy,windy,cold

إن قمت بإختيار أيا من هذه الخيارات سيعرض لك الخيار الذي إخترته في صندوق بالإضافة لنصيحة مناسبة,أما إن أدخلت أي كلمة غير هذه الكلمات المحددة سيظهر لك صندوق مكتوب فيه I don't know that type of weather
switch
<HTML>
<HEAD>
<TITLE>An if statement with a command block</TITLE>
<SCRIPT LANGUAGE="JavaScript">
  
var weatherType = prompt("What is it like outside?", "");

switch (weatherType) {
    case "sunny":
        alert("It's sunny outside! Go out and play!");
        break;
    case "rainy":
        alert("It's rainy outside! Stay inside!");
        break;
    case "cloudy":
        alert("It's cloudy outside. Stay in or go out.");
        break;
    case "windy":
        alert("It's windy outside! Carry a jacket!");
        break;
    case "cold":
        alert("It's cold outside! Don't forget your coat!");
        break;
    default:
        alert("I don't know that type of weather");
        break;
}

// code here
  
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Try it yourself »Click on the "Try it yourself" button to see how it works

و كما ترى قمنا بإستخدام switch بالطريقة التي شرحناها سابقا لعمل البرنامج .

جملة الشرط المختصرة

هناك طريقة مختصرة لكتابة جملة if و هي قد تكون مفيدة جدا في بعض الحالات و هي كالتالي
var res=(condition)?("case true value "):("case false value ");
يوضع الشرط فيما بين قوسين يليهم علامة إستفهام؟ ثم يليه قوسين بينهم العلامة : في حالة تحقق الشرط يتم إرجاع القيمة الموجودة بين القوسين الموجودين قبل : في المتغير res أما في حالة كان الشرط خطأ فيتم إرجاع القيمة الموجودة بين القوسين التاليين للعلامة : و التي توازي الكلمة else . و نتيجة كتابة الكود بهذا الشكل هي نفسها النتيجة التي يمكن الحصول عليها بطريقة if التقليدية الناتجة عن هذا الكود
if(conditon)
{
var res="case true value "
}else
{
var res="case false value "
}
و المثال التالي تطبيق على هذه الطريقة
الجملة الشرطية المختصرة
<HTML>
<HEAD>
<TITLE>An if statement with a command block</TITLE>
<SCRIPT LANGUAGE="JavaScript">
  
var res=(3>8)?("3 is greater than 8"):("3 is smaller than 8 ");
document.write("res= "+res);
  
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Try it yourself »Click on the "Try it yourself" button to see how it works

و كما ترى الناتج سيكون is smaller than 8 و هو الموجود بعد العلامة : لأن الشرط الموجود قبل علامة الإستفهام (3>8) لم يتحقق أي أنه أعطى النتيجة خطأ false. و بهذا نكون تقريبا قمنا بتغطية كل شيء خاص بالقرارت و الجمل الشرطية لننتقل إلى مفهوم آخر خاص بكيفية تكرار تنفيذ أمر,وهو الـ loops أي الحلقات.
November 5, 2011