الدرس الخامس فى الجافا سكريبت

Loops

-تستخدم(loops) فى عمل تكرار على الكود عدد من المرات حيث توفر لك الوقت فى كتابة كود معين بدلا من تكرارة فى اكثر من سطر تستبدلة بسطر واحد عن طريق loops وايضا سرعة موقعك فكتابة اكواد كثيرة يؤدى الى بطىء الموقع ولها اكثر من طريقة فى كتابتها كالتالى:

الشكل العام

استخدامها

Loops

for (initial value; condition; increament or decreament statement)
{
code
}

تقوم بعمل تكرار على الكود عدد من المرات.

for

for (….. in ……)
{
code
}

تقوم بعمل تكرار على خصائص ال object والتى سندرسها فيما بعد وهذا التكرار قليل الاستخدام.

for/in

while (condition)
{
code
}

تقوم بعمل تكرار على الكود لكن فى وجود شرط فاذا تحقق هذا الشرط يتم التكرار واذا لم يتحقق لا يتم التكرار.

while

do
{
code
}
while (condition);

تقوم بعمل تكرار على الكود فى وجود شرط ايضا لكن فى هذة الحالة يتم التكرار اولا ثم بعد ذلك يختبر الشرط.

do/while

(1)for:

مثال:

<!DOCTYPE html>

<html>

<body>

<script>

var x=””;

for (var i=0;i<5;i++)

{

x=x + “The number is ” + i + “<br>”;

}

document.write(x);

</script>

</body>

</html>

وكما هو موضح فان جملة التكرار for تاخذ ثلاث جمل يتم الفصل بينهم بفصلة منقوطة والجملة الاولى يتم فيها تعريف متغير بقيمة بدائية (var i=0) والجملة الثانية يتم وضع شرط او قيد (i<5) والجملة الثالثة هى عبارة الزيادة او النقصان (i++) حيث فى كل مرة يزيد واحد اما اذا اردنا ان ننقص واحد فنستخدم جملة النقصان وهى (i–) ثم بعد ذلك نضع بين اقواس التكرار الجملة المراد تكرارها ومعها المتغير المعرف فى الجملة الاولى.

وتظهر بصفحة الويب كما يلى:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

ولكن ماذا اذا اردنا ان نكتب هذا الكود بدون استخدام جملة التكرار يكون كالتالى :

<!DOCTYPE html>

<html>

<body>

<script>

document.write(“The number is 0″+”<br>”);

document.write(“The number is 1″+”<br>”);

document.write(“The number is 2″+”<br>”);

document.write(“The number is 3″+”<br>”);

document.write(“The number is 4″+”<br>”);

</script>

</body>

</html>

والفرق بينهما كبير جدا لان الاول يوفر كتابة الكود خاصة فى حالة التكرارات الكبيرة فتكون الطريقة الثانية صعبة جدا وتاخذ وقت طويل وبطء فى صفحة الويب.

(2)for/in :

مثال:

<!DOCTYPE html>

<html>

<body>

<script>

var x;

var txt=””;

var person={fname:”John”,lname:”Doe”,age:25};

for (x in person)

{

txt=txt + person[x];

}

document.write(txt);

</script>

</body>

</html>

وسيتم شرح هذة الحالة بالتفصيل لكن بعد شرح درس ال object .

(3)while :

مثال:

<!DOCTYPE html>

<html>

<body>

<script>

var x=””,i=0;

while (i<5)

{

x=x + “The number is ” + i + “<br>”;

i++;

}

document.write(x);

</script>

</body>

</html>

وفى هذة الحالة من التكرار يتم وضع جملة القيمة الابتدائية قبل جملة التكرار ويوضع الشرط بين قوسى كلمة التكرار while وتوضع جملة الزيادة او النقصان مع الجملة المراد عمل تكرار عليها وهذا المثال يظهر فى صفحة الويب كالمثال السابق.

(4)do/while :

مثال:

<!DOCTYPE html>

<html>

<body>

<script>

var x=””,i=0;

do

{

x=x + “The number is ” + i + “<br>”;

i++;

}

while (i<5);

document.write(x);

</script>

</body>

</html>

وكما نرى فان الحالتين الاخرتين متشابهين مع الفرق بينهما ان التكرار بجملة while يقوم باختبار الشرط الاول فاذا كان الشرط صحيح تتم عملية التكرار اما فى حالة do-while يتم التكرار اولا ثم يختبر الشرط فاذا كان الشرط صحيح يرجع مرة اخرى ليكمل عملية التكرار.

Break and Continue

هذا الجزء هو مرتبط دائما بعملية التكرار حيث تستخدم (break) فى وقف الحلقة التكرارية ونهايتها عند وقت معين اما (continue) تستخدم فى حذف جزء من الحلقة التكرارية ثم تستكمل الحلقة التكرارية كالتالى:

(1)مثال على break:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to do a loop with a break.</p>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>

function myFunction()

{

var x=””,i=0;

for (i=0;i<10;i++)

{

if (i==3)

{

break;

}

x=x + “The number is ” + i + “<br>”;

}

document.getElementById(“demo”).innerHTML=x;

}

</script>

</body>

</html>

(2)مثال على continue:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to do a loop which will skip the step where i=3.</p>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>

function myFunction()

{

var x=””,i=0;

for (i=0;i<10;i++)

{

if (i==3)

{

continue;

}

x=x + “The number is ” + i + “<br>”;

}

document.getElementById(“demo”).innerHTML=x;

}

</script>

</body>

</html>

جرب بنفسك المثالين لتتعرف على الفرق بينهما.

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: