المتغيرات في الجافا سكريبت

بمناسبة عيد الاضحي المبارك

لنفترض أن لدينا نص فأين سيتم حفظ هذا النص؟؟

إذا أردنـــا تخـــزين أي نـــص فـــي برنامجنـــا بـــشكل مؤقـــت أي خـــلال فتـــرة عمـــل

البرنامج فقط وينتهي تخزينها عند انتهاء البرنـامج هنـا سـو ف نحتـاج إلـى مخـزن يـتم

ً مـا يكـون جـزء مـن ذاكـرة الحهـاز المؤقتـة فـي تعتبـر ذاكـرة

حفـظ هـذا الـنص بـه وغالبـا

تخزين مؤقتة، ويتم إعطاء هذا الجزء من ذاكـرة الجهـاز اسـم خـاص حتـى يـتم التعامـل

مع هذا الجزء.

نـستنتج ممـا سـبق بـأن المتغيـر هـو جـزء مـن ذاكـرة الجهـاز يـتم إعطـاء اسـم لـه،

ويعتبر بمثابة مخزن للبيانات.

أنواع البيانات :

توفر لنا لغة الجافا سكريبت التميز بين 4 أنواع من البيانات:

String النصوص .

Number القيم العددية .

Boolean الحالة البولينية ( صح أم خطأ).

Null القيمة لا شئ .

حسب طبيعة ونوع البيانات المخزنة به ٍ وبشكل عام يختلف نوع مخزن البيانات

ولكـن المتغيــرات فـي لغـة الجافـا سـكريبت لا تختلـف فـي بنيتهـا بـإختلاف نـوع

البيانات المخزنـة بهـا كمـا هـو الحـال بلغـة الجافـا والـسي التـي يتميـز فيهـا نـوع المخـزن

حسب نوع البيانات المخزنة به.

عنـد تـسمية المتغيـرات فـي الجافـا سـكريبت لا يفـضل اسـتخدام الرمـز _ للفـصل

بين مقاطع الكلمات ولكـن يـتم دمـج المقـاطع وجعـل الحـرف الأول صـغير وأول حـرف

من المقاطع التالية يكون ذو حر ف كبير.

وقبل أن تستخدم أيا من هذه المتغيرات لابد من الإفصاح عنها، وذلك باستخدام

الأمر var.

مثال: عندما نريد تسمية متغير ليعبر عن name last لا يفضل تسميته كما يلي:

name_ Last ولكن يفضل تسمية كما يلي lastName.

<HTML>

<HEAD>

var username = prompt ("اسمك أدخلً

;("ما ھو اسم؟" , "لطفا

;(username" + مرحبا بك يا:")alert

</SCRIPT>

</HEAD>

</HTML>

أنه قد تـم الإعـلان عـن متغيـر باسـم userName ثـم خـزن بـه ٕواذا حللنا الصيغة نجد

القيمـــــــــة الراجعـــــــــة مـــــــــن الأمـــــــــر prompt ثـــــــــم قمنـــــــــا بطباعـــــــــة القيمـــــــــة المخزنـــــــــة

ً إليها نص "مرحبا بك يا :"

بالمتغيرuserName مضافا

:ً

وعند تطبيق المثال السابق سيظهر لنا أول

_______________________

المعاملات الرياضية:

تـستخدم لإجـراء العمليـات الرياضـية مـن جمـع وطـرح وضـرب وقـسمة وبـاقي

القسمة.

الطرح -

الضرب *

القسمة /

باقي القسمة %

الجمع +

مثال:

<HTML>

<HEAD>

alert(8%3);

</SCRIPT>

</HEAD>

</HTML>

ويكون ناتج باقي القسمة هو:

وبنفس الطريقة يمكننا التطبيق على باقي العمليات.

________________________

المعاملات المنطقية:

النفي !

اصغر من >

اكبر من <

اصغر من أو يساوي =>

اكبر من أو يساوي =<

يساوي =

لا يساوي =!

و &&

أو ||

شرط :?

ً ما تكون أطراف المقارنة إحدى القـيم false أو

تستخدم لإجراء مقارنة منطقية، وغالبا

.True

أمثلة على الصيغ:

<HTML>

<HEAD>

alert (true || false);

</SCRIPT>

</HEAD>

</HTML>

___________________________________

مثال:

<HTML>

<HEAD>

alert (true && false);

</SCRIPT>

</HEAD>

</HTML>

مثال:

<HTML>

<HEAD>

alert (! true);

</SCRIPT>

</HEAD>

</HTML>

____________________

المعاملات الأحادية:

.ً

تستخدم لإجراء العمليات الرياضية من جمع وطرح بشكل مختصر جدا

وتسمى هذه المعاملات بأنها معاملات أحادية لأنها تتعامل مع طرف واحد.

++ تستخدم لزيادة قيمة الطرف الممرر لها بمقدار واحد صحيح

-- تستخدم لإنقاص قيمة الطرف الممرر لها بمقدار واحد صحيح

تـستخدم لعكـس إشـارة العامـل الممـرر لهـا فـإذا كانـت قيمـة سـالبة

- فسو ف تتحول إلي قيمة موجبة والعكس صحيح.

مثال:

<HEAD>

var num1 = 6, num2;

num2 = num1++;

alert( "num2 = " + num2 );

alert( "num1 = " + num1 );

</SCRIPT>

</HEAD>

</HTML>

____________________________

معاملات المقارنة:

تـستخدم لإجـراء عمليـات المقارنـة عنـد إجـراء مقارنـة يكـون نـاتج هـذه

المقارنة إحدى القيم أما false أو true .

== لتعين هل طرفي المقارنة متساويان في القيمة

=== لتعين هل طرفي المقارنة متساويان في القيمة ونوع البيانات

=! لتعين هل طرفي المقارنة غير متساويان في القيمة

==! لتعين هل طرفي المقارنة غير متساويان في القيمة ونوع البيانات

< لتعين هل الطرف الأيسر أكبر من الطرف الأيمن

> لتعين هل الطرف الأيسر أقل من الطرف الأيمن

=< لتعين هل الطرف الأيسر أكبر أو يساوي الطرف الأيمن

=> لتعين هل الطرف الأيسر أقل من أو يساوي الطرف الأيمن

معاملات النصوص:

ً في الصيغة الخاصة بالمثال:

تطرقنا لها سابقا

بلاك سنايبر = prompt ("اسمك أدخلً

;("ما ھو اسم؟" , "لطفا

;(username" + مرحبا بك يا:")alert

ً بك يا:مبرامج اخلاقي.

______________________

عبارات التحكم

IF statement

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

الصورة العامة لعبارة التحكم if الشرطية هو الشكل التالي :

( يتم وضع الشرط هنا ) If

{

يتم وضع هنا الأوامر أو العمليات التي ترغب في تنفيذها عند تحقق الشرط

}

ولآن سوف نأخذ مثال يتم توضيح ما سبق ذكره:

مثـال : فـي هـذا المثـال سـوف نقـوم عمـل برنـامج يـتم فيـه حـساب مكعـب لعـدد مـا يـتم

تعريفه في البرنامج.

No Statements

1 <html>

2 <head>

3 <title>Second Example</title>

4 </head>

5 <body >

6 <SCRIPT LANGUAGE="javascript">

7 <!--

8 var x=50;

9 if ( x > 0 ) // if test

10 {

11 y = ( x * x * x ); // 1: cube of x

12 document.write("y = "+y+" that is the cube of x when x = "+

x +"");

13 }

14 -->

15 </SCRIPT>

16 </body>

17 </html>

_________

يتم وضع tag المسمى والذي يدل على بداية الـصفحة <html <والــ tag

1 -أولا

<html </والذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML .

2و3 و4> -head <و<head </يوضع بينهما عنوان الصفحة. وأمـا بالنـسبة لــ

<title <و <title </تتــيح لــك هــذه العلامــة أن تعطــي الــصفحة عنوانــا واضــحا ً ً

ً ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي علـى العنـوان علـى

مميزا

حروف وأرقام فقط.

5> -body <و<body </حيـث يـتم كتابـة داخـل هـذا الجـزء محتويـات صـفحة

الويب الفعلية مثل الجداول والنماذج والصور والتي سيراها الزوار لهذه الصفحة.

6 -هذا السطر يجب أن يكون أول سطر فـي أي كـود جافـا سـكريبت كمـا ذكرنـاه فـي

المثال الأول حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو Javascript

7 و14 -الرمـز التـالي --!> يقـوم بإخفـاء كـود الجافـا سـكريبت مـن المـستعرض أو

المتصفح الذي لا يدعم لغة الجافـا سـكريبت وبعـد الانتهـاء مـن كتابـة الكـود يـتم وضـع

الرمز التالي < --.

8-في هذه الخطوة تم تعريف متغيـر وذلـك باسـتخدام الكلمـة var واسـم هـذا المتغيـر

x وتم إعطاءه القيمة 50 .

9 -هنــا اســتخدمنا جملــة الــتحكم if الــشرطية والــشرط الموجــود فــي المثــال معنــاه إذا

كانـت قيمـة المتغيـر x أكبـر مـن الـصفر (أي عنـد تحقـق الـشرط) فإنـه ينفـذ الأوامـر

التـي بعـد جملـة if الـشرطية وقـد يـتم وضـع الأقـواس {} وذلـك يـدل علـى أنـه يجـب

تنفيذ كل الأوامر الموجودة بداخل الأقواس.

________

0و13 -وضـع الأقـواس {} حيـث تـم وضـعها عنـدما نريـد أن ننفـذ أكثـر مـن جملـة

عنـد تحقـق شـرط مـا وفـي حالـة عـدم وضـع الأقـواس فـإن البرنـامج عنـد تحقـق الـشرط

الموجود في حملة if سوف يقوم بتنفيذ أول جملة بعد if وهو:

y = ( x * x * x );

11 -فـي هـذه الخطـوة يـتم وضـع العمليـة الحـسابية وهـي عمليـة تكعيـب المتغيـر x

وذلك بضرب المتغير فـي نفـسه ثـلاث مـرات ومـن ثـم وضـع النـاتج مـن هـذه ا لعمليـة

في متغير y ولا ننسى وضع علامة الفاصلة المنقوطة في نهاية الجملة:

y = ( x * x * x );

ً ولكن هناك بعض النقاط

12 -العبارة التالية هي شبيهه بالمثال الذي تم شرحه سابقا

الجديدة:

document.write("y = "+ y +" that is the cube of x when x =

"+ x +"");

و في هذا السطر يتم استخدام الكائن ( document (وذلك لكتابة عن طريق الدالة

(write (ما بداخل الأقواس.

و سوف نشرح الجزء التالي:

("y = "+ y +" that is the cube of x when x = "+ x +"")

هنا نلاحظ التالي :

(" جملـة أو نـص وفـي هـذا المثـال فـراغ "+ المتغيـر وفـي هـذا المثـال x "+ جملـة أو

نــص"+ المتغيــر وفــي هــذا المثــال y "+ هنــا الــنص الــذي تريــد طباعتــه وفــي هــذا

المثال = y ("

إذا نستنتج أنه إذا أردنا طباعة نص أو جملة فإنه يتم وضـعها فـي علامتـي تنـصيص

." "

و إذا أردنـا أن نطبـع قيمـة المتغيـر يـتم وضـعه بـدون علامـة تنــصيص ونــضعه بـين

علامتي + + .

الشكل العام لجملة switch وهي:

switch (n)

بداية قوس جملة التحكم switch {

case 1:

نفذ هذه الأوامر

break;

case 2:

نفذ هذه الأوامر

break;

case 3:

نفذ هذه الأوامر

break;

case 4:

نفذ هذه الأوامر

break;

default :

نفذ هذه الأوامر

break;

نهاية قوس جملة التحكم switch}

وهي في العادة تستخدم عندما تكون لديك قيمة محددة ومعرفة وتريد تنفيـذ العمليـات

أو الأوامر عندما يتم اختيار قيمة معينة

يقـوم الأمـر باختبـار قيمـة المتغيـر n عنـدما تكـون مـساوية لواحـد مـن الحـالات التـي

حـددتها وهـي case تنفـذ الأوامـر التـي وضـعتها بـداخل الــ case إلـى أن يـصل إلـى

لــم ٕ كلمــة break عنــد ذلــك يــتم الخــروج مــن البلــوك الخــاص بجملــة switch واذا

تـــساوي أي مـــن القـــيم التـــي افترضـــتها يتوجـــه التنفيـــذ إلـــى الأوامـــر التـــي تلـــي الأمـــر

.default

وسوف نشرح مثال بعد أن نأخذ عبارات التكرار حيث سندمج جملة الـتحكم switch

مـع جملـة التكـرار for وذلـك فهـم التركيـب بـين جمـل الـتحكم والتكـرار ومـن ثـم نتـرك

لخيالك الواسع للإبداع في كتابة البرامج. وألان لننتقل إلى عبارات التكرار

عبارات التكرار

FOR

نفس الوظيفة جملة while ولكن هنا يتم تحديد القيمة التي سوف نبدأ منها ومقدار

الزيادة أو النقصان وعدد مرات التكرار والشكل العام لجملة for هي:

مقدار لزيادة أو ; شرط يتم فيه تحديد عدد مرات التكرار ; قيمة البداية ) For

( النقصان

بداية قوس جملة التكرار for{

نفذ هذه الأوامر

نهاية قوس جملة التكرار for}

والمثال التالي يوضح ذلك:

for (var x = 1; x <= 10 ; x++)

{

نفذ هذه الأوامر

}

ابدأ العد من 1 حتى تصل القيمة ً للغة ++C ومعنى المثال التركيب مطابق تماما

إلى قيمة اصغر من أو تساوى 10 وفي كل مرة زيد قيمة المتغير x بمقدار 1

وملخص ذلك كرر ما بداخل البلوك 10 مرات

مرة أخرى لا حظ استخدام المؤثرات المنطقية المظلل بالأزرق.

World Intellectual Property Organization

Led by#Black_snipper/

والآن سوف نقوم بشرح مثال يحتوي على جملة التكرار for وعلى جملة التحكم

switch

No Statements

1 <html>

2 <head> welcome to java

3 </head>

4 <SCRIPT LANGUAGE="javascript">

5 <!--

6 var n=5;

7 for (var i=1 ; i<n ; i+1)

8 {

9 switch (i)

10 {

12 case 1: { document.write(" welcome "); }

13 break;

14 case 2: { document.write(" to "); }

15 break;

16 case 3: { document.write(" you "); }

17 break;

18 case 4: { document.write(" and "); }

19 break;

20 default :{ document.write(" *+*+*+*+* "); }

21 break;

22 }

23 }

24 -->

25 </SCRIPT>

26 <body>

27 </body>

28 </html>

World Intellectual Property Organization

Led by#Black_snipper/

ً يـتم وضـع tag المـسمى والـذي يـدل علـى بدايـة الـصفحة <html <والــ

1و28 -أولا

tag> html </والـذي يـدل علـى نهايـة الـصفحة ويـتم وضـع بـاقي الأوامـر

لغة HTML .

2و3> - head <و<head </يوضع بينهما عنوان الصفحة.

4 -هذا الـسطر يجـب أن يكـون أول سـطر فـي أي كـود جافـا سـكريبت حيـث أنـه ينبـه

المتصفح بأن ما سيتبع هذا الأمر هو Javascript .

5 و24 -الرمـز التـالي --!> يقـوم بإخفـاء كـود الجافـا سـكريبت مـن المـستعرض أو

المتـصفح الـذي لا يـدعم لغـة الجافـا سـكريبت وبعـد الانتهـاء مـن كتابـة الكـود يـتم

وضع الرمز التالي < --.

ً يـتم وضـع

6 -في هذه الخطوة يتم تعريـف متغيـر n ويـتم إعطـاءه القيمـة 5 وأخيـرا

الفاصلة المنقوطة.

7 -اسـتخدام جملـة التكـرار for حيـث يـتم بـداخل جملـة for تعريـف متغيـر i وتـم

إعطاءه قيمة ابتدائية تساوي واحد ثم بعد ذلك ثم وضع فاصلة منقوطة ; ثـم بعـد

ذلك يـتم وضـع الـشرط والـذي يحـدد عـدد مـرات التكـرار وفـي مثالنـا هـذا تـم تحديـد

عـدد المـرات وهـو 4 مـرات التكـرار ثـم بعـد ذلـك تـم وضـع مقـدار الزيـادة وهـو فـي

مثالنـا مقـدار الزيـادة بواحـد ويمكـن وضـع أي مقـدار زيـادة أو مقـدار نقـصان علـى

حسب متطلبات البرنامج الذي تريد عمله ، ونعود إلـى المثـال فـي الجـزء 1+i فـي

هذا الفقرة يقوم البرنامج بإضافة 1 إلى أخر قيمة للمتغير i .

World Intellectual Property Organization

Led by#Black_snipper/

بداية قوس

جملة الـ for

نھاية قوس

جملة الـ for

المطلوب فهمه في هذه الخطوة ما يلي:

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

الخطوة الأولى:

أن يضع قيمة أولية لمتغير I .

الخطوة الثانية :

يتحقق من الـشرط إذا كانـت قيمـة I اقـل مـن قيمـة الــ n ) أو علـى حـسب الـشرط

الذي تضعه) إذا لم يتحقق الشرط فإنـه أمـا إذا تحقـق الـشرط فإنـه يقـوم بزيـادة المتغيـر

I بمقدار 1 وينتقل إلى الخطوة الثالثة.

الخطوة الثالثة :

ينفذ كل الأوامر الموجودة بداخل الأقـواس الخاصـة بجملـة الــ for ومـن ثـم يعـود إلـى

الخطوة الثانية.

الخطوة الرابعة :

يخرج من جملة التكرار for وينفذ باقي البرنامج.

والشكل التالي يوضح الجزء السابق :

World Intellectual Property Organization

Led by#Black_snipper/

for (var i=1 ; i<n ; i+1)

{

}

switch (i)

{

case 1: { document.write(" welcome ");}

breake;

case 2: { document.write(" to "); }

breake;

case 3: { document.write(" you "); }

breake;

case 4: { document.write(" and "); }

breake;

default:{ document.write(" *+*+*+*+* ");}

break;

}

األوامر

التي يجب

تنفيذھا

والتي ھي

بداخل أو

بين

أقواس

جملة for

World Intellectual Property Organization

Led by#Black_snipper/

8 و23 -في هذه الخطوة يتم كتابة فتح قـوس جملـة التكـرار for ويكـون القـوس علـى

شكل } ويجب أن يغلق بالقوس الذي شكله { كما في المثال.

9 -فـي هـذه الخطـوة يـتم اسـتخدام عبـارة الـتحكم ( i( switch حيـث يـتم باختبـار

قيمة المتغير i عندما تكون مـساوية لواحـد مـن الحـالات التـي حـددتها وهـي case يـتم

تنفذ الأوامر الموجودة بداخل الأقواس لهذه الـ case .

10 و22 -في هذه الخطوة يتم كتابة فتح قـوس عبـارة الـتحكم ( i( switch ويكـون

القوس على شكل } ويجب أن يغلق بالقوس الذي شكله { .

12و13 -فــي هــاتين الخطــوتين يــتم التأكــد مــن أن قيمــة المتغيــر i تــساوي القيمــة

الموجودة أمام كلمة case وفي مثالنا وخصوص هذه الحالة تساوي 1 حيث يـتم تنفيـذ

ما بداخل القوس التي شكلها { } وهو

{ document.write(" welcome "); }

breake;

في هذه الجملة يتم اسـتخدام الكـائن ( document (وذلـك لكتابـة عـن طريـق الدالـة

(write ( مـا بـداخل الأقـواس التـي شـكلها ( ) وبينهـا علامـة " " . ثـم بعـد ذلـك يـتم

قفل القوس الذي شكله { } وهنا استخدمنا الأقواس { } وذلك في حالة أنك تريد

تنفيـذ أكثـر مـن أمـر عنـدما تكـون قيمـة المتغيـر i تـساوي القيمـة الموجـودة أمـام كلمـة

case .ثــم بعــد ذلـــك يــتم كتابـــة الأمــر ;break وذلـــك للخــروج مـــن جملــة الـــتحكم

.switch

ملاحظـة : مـن الـضروري كتابـة كلمـة ; breake بعـد كـل case وذلـك لمنـع

الانتقال وتنفيذ باقي الحالات الـ case الأخرى.

World Intellectual Property Organization

Led by#Black_snipper/

14 و15 -نفس فكرة الخطوة 12-13 فيما عدا انه يـتم التأكـد مـن أن القيمـة المتغيـر

i تساوي القيمة الموجودة أمام كلمة case وهي تساوي هنا 2 ثم بعد ذلك يتم كتابـة

الأمر ;break وذلك للخروج من جملة التحكم switch .

16 و17 -نفـــس فكـــرة الخطـــوة 12-13 فيمـــا عـــدى انـــه يـــتم التأكـــد مـــن أن القيمـــة

المتغير i تساوي القيمة الموجودة أمـام كلمـة case وهـي تـساوي هنـا 2 ثـم بعـد ذلـك

يتم كتابة الأمر ;break وذلك للخروج من جملة التحكم switch .

18 و19 -نفـــس فكـــرة الخطـــوة 12-13 فيمـــا عـــدى انـــه يـــتم التأكـــد مـــن أن القيمـــة

المتغير i تساوي القيمة الموجودة أمـام كلمـة case وهـي تـساوي هنـا 2 ثـم بعـد ذلـك

يتم كتابة الأمر ;break وذلك للخروج من جملة التحكم switch .

20و21 -في هذه الخطوة يتم وضـع حالـة افتراضـية وذلـك يعنـي أنـه عنـد عـدم تحقـق

أحـد الحـالات الـسابقة يقـوم بتنفيـذ هـذه الحالـة وهـي الــ :default حيـث يـتم تنفيـذ مـا

بداخل القوس التي شكلها { } وهو

default:{ document.write(" *+*+*+*+* ");}

بعد ذلك يتم كتابة الأمر ;break وذلك للخروج من جملة التحكم switch.

breake;

25 -وفي هذه الخطوة يتم كتابة <Script </وهو الذي يدل المتصفح أنه نهاية

برنامج الجاف سكريبت.

26 و27> -body <و<body </حيــث يـــتم كتابـــة داخـــل هـــذا الجـــزء محتويـــات

صـــفحة الويـــب الفعليـــة مثـــل الجـــداول والنمـــاذج والـــصور والتـــي ســـيراها الـــزوار لهـــذه

الصفحة.

ملاحظـة : هنـا نلاحـظ أننـا لـم نكتـب برنـامج الجافـا سـكريبت داخـل منطقـة الــ Body

ٕ لـــصفحة وهـــي المنطقـــة المحـــصورة بـــين <body <و<body </وانمـــا كتبنـــاه فـــي

منطقـة الــ head وهـي المنطقـة المحـصورة بـين <head <و<head </وهـذا يعنـي

أنه يمكن كتابة برنامج الجافا سكريبت في أي جزء من كود أو لغة الـ HTML .

World Intellectual Property Organization

Led by#Black_snipper/

WHILE

الهدف من عبارات التكرار هو تكرار أجزاء من البرنامج مرات ومرات حسب الشرط

العددي أو شرط معين وذلك لاختصار كتابة جزء كبير من التعليمات.

الشكل العام لعبارة while كآلاتي :

; ٕواعطاءه قيمة أولية تعريف متغير

( شرط يتم فيه تحديد عدد مرات التكرار ) while

بداية قوس جملة التكرار while{

نفذ هذه الأوامر

; زيادة المتغير الذي تم تعريفة في الأعلى

نهاية قوس جملة التكرار while}

إليك المثال التالي

var x = 1;

while (x <= 10)

{

x +2;

}

World Intellectual Property Organization

Led by#Black_snipper/

while يقوم بعمل تكرار البلوك أو أمر بشرط أن تكون قيمة المتغير x اصغر من

أو تساوي 10

والبلــوك المطلــوب تكــراره عبــارة عــن زيــادة قيمــة المتغيــر x بمقــدار 2 ثــم يقــوم أمــر

التكرار بالكشف ثانية على القيمة حتى تصل إلى الشرط الذي ينهي عملية التكرار.

والآن نأخذ مثال كامل على عبارة أو جملة التكرار while :

No Statements

<html> 1

<title>fouth Example</title> 2

<body> 3

<SCRIPT LANGUAGE="javascript"> 4

<!-- 5

var x = 1; 6

while (x <= 3) 7

{ 8

document.write("<h"+ 9 x+"> welcome "+x+"");

10 x+1

11 }

12 -->

13 </SCRIPT>

14 </body>

15 </html>

1و15 -أولا يـتم وضـع tag المـسمى والـذي يـدل علـى بدايـة الـصفحة <html <والــ

tag> html </والـذي يـدل علـى نهايـة الـصفحة ويـتم وضـع بـاقي الأوامـر لغـة

.HTML

2> - title <و <title </تتــــيح لــــك هــــذه العلامــــة أن تعطــــي الــــصفحة عنوانــــا

واضــحا مميــزا ويظهــر هــذا العنــوان علــى نافــذة المــستعرض ويجــب أن يحتــوي علــى

العنوان على حروف وأرقام فقط.

World Intellectual Property Organization

Led by#Black_snipper/

3 و14> -body <و<body </حيـــث يـــتم كتابـــة داخـــل هـــذا الجـــزء محتويـــات

صفحة الويب الفعلية.

4 -هذا الـسطر يجـب أن يكـون أول سـطر فـي أي كـود جافـا سـكريبت حيـث أنـه ينبـه

المتصفح بأن ما سيتبع هذا الأمر هو Javascript .

6 - فـي هـذه الخطـوة تـم تعريـف متغيـر وذلـك باسـتخدام الكلمـة var واسـم هـذا

المتغير x وتم إعطاءه القيمة 1 .

7 و14 -الرمـز التـالي --!> يقـوم بإخفـاء كـود الجافـا سـكريبت مـن المـستعرض أو

المتــصفح الــذي لا يــدعم لغــة الجافــا ســكريبت وبعــد الانتهــاء مــن كتابــة كــود الجــاف

سكريبت يتم وضع الرمز التالي < --.

8 و11 -فـي هـذه الخطـوة يـتم كتابـة فـتح قـوس جملـة الـتحكم while ويكـون القـوس

على شكل } ويجب أن يغلق بالقوس الذي شكله { كما في المثال.

9 -هنا استخدمنا جملة التكرار while والشرط الموجود في المثال معناه إذا كانـت

قيمة المتغير x أقل من أو يساوي 3) أي عند تحقق الشرط ) فإنه ينفذ الأوامر التي

بعــد جملــة while ويــتم وضــع الأقــواس {} وذلــك يــدل علــى أنــه يجــب تنفيــذ كــل

الأوامر الموجودة بداخل الأقواس.

10 -العبارة:

هـــذا وفـــي document.write("<h"+x+"> welcome "+x+"");

السطر يتم استخدام الكائن (document (وذلك لكتابة عن طريق الدالة (write (ما

بـداخل الأقـواس. ومـا بـداخل الأقـواس هـو عبـارة عـن أمـر عـادي مـن أوامـر HTML

الذي يأمر المتصفح بإظهار الجملة:

" "<h"+x+"> welcome "+x+"" "

World Intellectual Property Organization

Led by/#Black_snipper

والآن لنأخذ هذه الجملة ونشرحها بالتفصيل

" < h "+x+" > welcome " +x+ ""

هذا السطر سوف نشرحه على خطوات:

الخطوة الأولى:

سوف يتم أولا إرسال الجملة التالية إلى المستعرض على الصورة التالية وهي

< " يتم وضع قيمة المتغير x وهي في أول مرة تساوي 1 " h <

إذا يـصبح شـكل الجملـة التـالي < h1 < وهـذا الـشكل يفهمـه المـستعرض علـى أنـك

تريـد أن تطبـع عنـوان ويكـون المـستوى لهـذا العنـوان هـو 1 .ثـم بعـد ذلـك سـوف يقـوم

بطباعة الكلمة welcome على صفحة الإنترنت

الخطوة الثانية :

يقوم بطباعة قيمة المتغير x .

ثـم بعـد ذلـك يـتم زيـادة قيمـة المتغيـر x بمقـدار واحـد وذلـك عـن طريـق كتابـة الجملـة

1+x .ومــن ثــم يعــود إلــى جملــة while ويكــرر نفــس الــشيء حيــث يختبــر الــشرط

وعند تحققه يخرج من جملة while .

13 -وفـي هـذه الخطـوة يـتم كتابـة <Script </وهـو الـذي يـدل المتـصفح أنـه نهايـة

برنامج الجاف سكريبت.

World Intellectual Property Organization

Led by#Black_snipper/

الـدوال

هناك دوال تعطيها لك اللغة وهي دوال جاهزة لإجراء عمليات معينه وسوف نتعرض

ً وهي التي سوف تنشئها أنت بنفسك مثال: إلى الأكثر استخداما

Function FunctionName ( )

{

تنفيذ

الأوامر

{

و الآن سوف نأخذ مثال بسيط لطريقة استخدام الدوال:

No Statements

1 <html>

2 <head>

3 <title>useing function</title>

4 <SCRIPT LANGUAGE="javascript">

5 <!--

6 function clickme()

7 {

8 alert("welocm to you");

9 }

10 -->

11 </SCRIPT>

12 </head>

13 <body>

14 <input type="button" value=" hi "

onclick='clickme();'>

15 </body>

16 </html>

_____

World Intellectual Property Organization

Led by#Black_snipper/

1و16 -أولا يـتم وضـع tag المـسمى والـذي يـدل علـى بدايـة الـصفحة <html <والــ

tag> html </والـذي يـدل علـى نهايـة الـصفحة ويـتم وضـع بـاقي الأوامـر لغـة

.HTML

2و12> - head <و<head </يوضع بينهما عنوان الصفحة.

3> - title <و <title </تتــــيح لــــك هــــذه العلامــــة أن تعطــــي الــــصفحة عنوانــــا

ً ويظهــر هــذا العنــوان علــى نافــذة المــستعرض ويجــب أن يحتــوي علــى

ً مميــزا

واضــحا

العنوان على حروف وأرقام فقط.

4 -هذا السطر يجب أن يكون أول سطر فـي أي كـود جافـا سـكريبت كمـا ذكرنـاه فـي

المثال الأول حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو Javascript .

5 و10 -الرمـز التـالي --!> يقـوم بإخفـاء كـود الجافـا سـكريبت مـن المـستعرض أو

المتصفح الذي لا يدعم لغة الجافـا سـكريبت وبعـد الانتهـاء مـن كتابـة الكـود يـتم وضـع

الرمز التالي < --.

6 -يــتم كتابــة الكلمــة function وهــي كلمــة محجــوزة فــي اللغــة وتقــوم هــذه الكلمــة

بتعريف دالة سوف يتم إنشاءها واسـم هـذه الدالـة فـي مثالنـا هـو ()clickme وعنـدما

سنستدعي الدالة من أي مكان من الصفحة يجب أن تكون بنفس الاسم.

7 و9 -فـي هـذه الخطـوة يـتم كتابـة فـتح قـوس لدالـة ()clickme function ويكـون

القوس على شكل } ويجب أن يغلق بالقوس الذي شكله { كما في المثال.

8 -اسـتخدام الأمـر ;("you to welocm("alert حيـث يقـوم هـذا الأمـر بإظهـار

رسـالة تنبيـه يـتم فيهـا كتابـة الجملـة المـراد إظهارهـا وتنبيـه المـستخدم بهـا وفـي مثالنـا

سـوف يقـوم هـذا الأمــر بإظهــار الجملـة التاليـة you to welocm ولا تنــسى أن

الجملة يجب وضعها في بين علامتي تنصيص كما في التالي :

(" النص المطلوب طباعته " ِ)alert

11 -وفـي هـذه الخطـوة يـتم كتابـة <Script </وهـو الـذي يـدل المتـصفح أنـه نهايـة

برنامج الجاف سكريبت.

13 و15> -body <و<body </حيــث يــتم كتابــة داخــل هــذا الجــزء محتويــات

صفحة الويب الفعلية.

14 -فـي هـذه الخطـوة فقـط اسـتخدمنا لغـة HTML حيـث تـم تعريـف زر وهـو مـن

نـوع "button="type وقـد اعطينـاه القيمـة " hi=" value وهـذه الكلمـة التـي

داخل value ما سيظهر وهو في مثالنا كلمة hi ثم بعد ذلك تم كتابة الكلمة

التطبيق العملي للمثال:

تظهر الصيغة في المفكرة على الشكل التالي:

وبعد حفظ هذا المسند كما سبق وشرحنا يظهر لنا على المتصفح على الشكل التالي:

سـيظهر كمـا لاحظنـا الـزر hi وعنـد الـضغط عليـه سـيظهر لنـا الـنص to welocm

you على الشكل التالي:

النماذج

الجافــا ســكريبت تقــوم بوضــع كــل الوثــائق (Forms (تجــدها فــي الــصفحة فــي

مصفوفة تـسمى (forms .(ويمكنـك الوصـول لكـل نمـوذج (form (وذلـك عـن طريـق

الفهـرس (index (فـي هـذه المـصفوفة. النمـوذج الأول لـه الفهـرس رقـم 0 , والنمـوذج

الثاني له الفهرس رقم 1 وهكذا. ويمكن التعامل مع النموذج (form (عن طريـق اسـم

النموذج.

ولكي يتم فهم كيفية التعامل مع النماذج نقوم بأخذ بعض الأمثلة :

No Statements

1 <html>

2 <head>

<title <التعامل مع الوثائق<title </3

4 <SCRIPT LANGUAGE="javascript">

5 <!--

6 function testform()

7 {

8 // test the form no.0

9 if(document.forms[0].elements[0].value==""

10 ||document.forms[0].elements[1].value==""

11 ||document.forms[0].elements[2].value=="")

12 {

;("يجب الكتابة في كل الحقول")alert 13

14 }

15 }

16 -->

17 </SCRIPT>

18 </head>

19 <body>

20 <center>

21 <form method=post onSubmit="return testform()">

22 <tabel>

23 <tr>

24 <td>Name : </td>

25 <td><input type="text" name="name" ></td></tr>

26 <tr><td>Address :</td>

27 <td><input type="text" name="address" ></td></tr>

28 <tr><td>City :</td>

29 <td><input type="text" name="city" ></td></tr>

30 </tabel>

31 <p>

32 <input type="submit" name="البيانات إرسال "

value="submit">

33 </form>

34 </center>

35 </body>

36 </html>

شرح الكود:

وذلك بلغة الـ HTML وهو الجزء المحاط بالون الأزرق ً form أولا قمنا بإنشاء الـ

_______________________________

حيــث تــم إنــشاء form وحــددنا طريقــة إرســال هــذه form وذلــك بطريقــة الـــ

post=method واســـتخدمنا الحـــدث onSubmit وهـــو حـــدث الـــضغط علـــى زر

___________________________________

(إرسـال البيانـات ) مـن صـفحة الويـب حيـث سـوف يـتم اسـتدعاء دالـة ()testform

وهـي الدالــة مكتوبــة بلغــة الجافـا ســكريبت والتـي تقــوم بفحــص الحقــول فــي الـــ form

والتأكد من الكتابة في كل الحقول وعدم ترك أحد الحقول فارغ.

ثم قمنا بإنشاء الحقول الخاصة بالـ form وبعد ذلك أنشأنا زر الإرسـال عـن طريـق

ا لأمر input وحددنا نوع هذا المدخل أنه مـن نـوع زر إرسـال وتـم إعطـاءه الاسـم (

إرسال البيانات ).

والآن سوف نتحدث عن الدالة ()testform وهو الجزء المحاط بالون الأحمر وهـو

الجزء الخاص بالجافا سكريبت

نلاحـظ فـي أنـه عنـد تنفيـذ الدالـة فإنـه يـستخدم جملـة If الـشرطية حيـث أنـه يقـوم

بفحــــــص الفــــــورم رقــــــم صــــــفر ([0[Form (وحــــــددنا العنــــــصر رقــــــم صــــــفر أيــــــضا

([0[elements (فــي نفــس ([0[Form (وهـــو فــي مثالنـــا الحقــل name وحـــددنا

أيضا القيمة التي بداخله إذا كانت فارغة أي لا يوجد أي شـيء مكتـوب وثـم بعـد ذلـك

ً اســتخدمنا العلاقــة المنطقيــة (||) وذلــك إذا لنقــوم بفحــص العنــصر رقــم واحــد أيــضا

([1[elements (في نفس ([0[Form (وهو في مثالنا الحقل المسمى address

وحـددنا أيـضا القيمـة التـي بداخلـه إذا كانـت فارغـة ثـم وضـعنا العلاقـة المنطقيـة ( || )

_________________________________________

وذلـك أنـه إذا وجـد أحـد الحقـول فارغـة فإنـه سـوف يقـوم بتنفيـذ الأمـر ()alert وسـوف

يظهر الرسالة التالية (يجب الكتابة في كل الحقول)

مثال آخر بإنشاء قائمة منسدلة :

1 <html>

2 <head>

3 <title>منسدلة قائمة/>title>

4 <script language="javascript">

5 function formHandler()

6 {

7 Var URL=

document.pulldown.selectname.options

[document.pulldownMenu.yourSelect.selectIndex].value

8 window.location.href=URL

9 }

10 </script>

11 choose a search engine:

12 <form name="pulldownMenu">

13 <select name="yourSelect" onChange="formHandler()">

14 <option value="http://www.msn.com">MSN

15 <option value="http://www.yahoo.com">Yahoo

16 <option value="http://www.altavista.com">Altavista

17 </select>

18 </form>

19 </html>

شرح الكود:

يتم إنشاء القائمة المنسدلة وذلك بلغة الــ HTML وهـو الجـزء المحـاط بـالون الأزرق

وذلك بإتباع الخطوات التالية :

يـــــتم إنـــــشاء الــــــ Form وذلـــك عـــــن طريـــــق كتابـــــة الــــــ tag وهـــــو form<

<"pulldownMenu="name وفي هذه الحالة قمنا بإنشاء الـ Form وتـم تـسميته

pulldownMenu ثـم بعـد ذلـك اسـتخدمنا الــ tag > select < وهـو الـذي يقـوم

بإنشاء القائمة المنسدلة واليك هذا الأمر ,

ومـن> select name="yourSelect" onChange="formHandler()">

ثــم ســـمينا هـــذه القائمــة بالاســـم yourSelect بالإضـــافة أنــه إضـــفنا عنـــد الاختيـــار

الحـدث ()onChang وهـو حـدث تغيـر قيمـة معينـة لحقـل مـا بحيـث يـتم تنفيـذ الدالـة

()formHandler والتـــي ســـوف نـــشرحها بعـــد قليـــل ، ثـــم بعـــد ذلـــك نقـــوم بوضـــع

الخيـارات عـن طريـق الــ tag > option < وبعـد ذلـك نـضع لكـل أختيـار قيمتـه عـن

طريق الـ attribute وهي value وأحد الخيارات الموجـودة فـي المثـال option<

MSN">com.msn.www://http="value.حيث يحتوي هذا الامر على الخيار

.http://www.msn.com التالية ) value ) القيمة له والذي MSN

والآن سوف نتحدث عن الدالة ()testform وهو الجـزء المحـاط بـالون الأحمـر وهـو

الجزء الخاص بالجافا سكريبت:

ً نقــوم يتعريــف متغيــر

نلاحــظ عنــد تنفيــذ الدالــة ()formHandler نقــوم بالتــالي أولا

سميناه URL وجعلناه يساوي اسم الفورم بإضافة إلى القائمة المنسدلة وأيضا الخيار

الذي تم أختيارة مع القيمة التي مع هذا الخيار.

ثــــم بعـــــد ذلــــك اســـــتخدام هــــذا المتغيـــــر والــــذي يحتـــوي علــــى اســـــم موقــــع مـــــا مـــــثلا

com.yahoo.www://http حيــــــــــــــــــث ســــــــــــــــــوف نــــــــــــــــــستخدم هــــــــــــــــــذه الجملــــــــــــــــــة

URL=href.location.window حيث ساويناها مع المتغيـر الـذي بـه اسـم موقـع

ما وهذه الجملة سوف تقوم بالانتقال إلى هذا الارتباط أو الـصفحة الموجـودة فـي هـذا

المتغير

سيظهر المثال على الشكل التالي:

الأحــداث

مقدمة :

الوينــدوز هــو محــيط رســائلي يــتم إرســال رســالة عنــد حــدوث حــدث مثــل مــرور

الماوس فوق صورة أو فوق زر معين أو التركيز على نافذة أو ضغط الزر الأيمن أو

الأيــسر أو الأوســط للمــاوس وهكــذا نــستغل هــذه الأحــداث لتنــشيط جــزء أو كــل مــن

برنـامج جافـا سـكريبت ليقـوم بعمـل وظائفـه المـصمم مـن اجلهـا وسـنتعرض معـا بعـض

الأمثلة والأحداث لشرح الفكرة :

شرح الحدث الحدث

استجابة لضغط زر يتم تحديده عندها ينفذ جزء من الكود ()onClick

تستخدم كثيرا استجابة لضغط الماوس أو لوحة المفاتيح ()onSubmit

على زر إرسال النماذج

هو حدث مرور الماوس فوق عنوان أو وصلة ()onMouseOver

حدث تحريك الماوس بعيدا عن وصلة ()onMouseOut

حدث وضع الماوس على حقل مدخلات معينه ()onFocus

حدث تغير قيمة معينه لحقل ()onChange

حدث ترك حقل بيانات بدون تغيير ()onBlur

حدث انتهاء متصفح الإنترنت من تحميل الصفحة الحالية ()onLoad

حدث الخروج من الصفحة الحالية إلى ()onUnload

والآن سوف نأخذ أمثلة توضح كيفية أستخدم الأحداث في صفحة الويب.

مثال على الحدث ()onClick :

No Statements

<html> 1

<head> 2

<title>Onclick alert message</title> 3

function pushbutton() 5

{ 6

قيد ;(" اإلنشاء 7(" alert

} 8

</script> 9

</head> 10

<body> 11

<center> 12

<h2> 13

Vist our home page </a></h2> 15

</center> 16

</body> 17

</html> 18

التنفيذ

وعند ضغط OK سيظهر الموقع المسجل في الرابط.

مثال على الحدث ()onSubmit :

No Statements

<html><head> 1

<title>onSubmit alert message </title> 2

<SCRIPT LANGUAGE="javascript"> 3

<!-- 4

function testform() 5

{ 6

;("نشكرك لتسجيل معنا في الموقع")alert 7

8 }

9 -->

10 </SCRIPT>

11 </head>

12 <body>

13 <form method=post onSubmit="return testform()">

14 <tabel>

15 <tr>

16 <td>Name : </td>

17 <td><input type="text" name="name" ></td></tr>

18 <p><tr><td>Email :</td>

19 <td><input type="text" name="Email" ></td></tr>

20 </tabel>

21 <p>

22 <input type="submit" name="إرسال "value="submit">

23 </form>

24 </body>

25 </html>

فــي هــذا المثــال ســوف نقــوم بإظهــار رســالة لمــستخدم عنــد القيــام بالــضغط علــى زر

إرســــال فــــي الـــــ form لــــذلك ســــوف نــــستخدم الحــــدث" ()onSubmit " وذلــــك

لاسـتدعاء الدالـة ()testform والتـي تقـوم بإظهـار رسـالة للمـستخدم وهـي " نـشكرك

لتسجيل معنا في الموقع ".

التنفيذ :

مثال على الحدثين ()onMouseOver و()onMouseOut :

No Statements

1 <html><head>

2 <title>Onclick alert message</title>

3 <script language="javascript">

4 function MouseOver()

5 {

6 alert("The mouse was over");

7 }

8 function MouseOut()

9 {

10 alert("The mouse out of the link");

11 }

12 </script>

13 </head>

14 <body>

15 <center>

16 <h2>

17 <a href="http://www.com" onMouseOver="MouseOver();">

18 Event win mouse over this link</a></h2>

19 <hr>

20 <p>

21 <a href="http:/www.com" onMouseOut="MouseOut();">

22 Event win mouse out of this link </a>

23 </center>

24 </body>

25 </html>

فـي هـذا المثـال عنـد القيـام بـالمرور بالفـأرة علـى وصـلة أو ارتبـاط وهـو الحـدث

()onMouseOver " حيث سوف نستفيد من هذا الحـدث فـي اسـتدعاء دالـة مكتوبـة

بالجافا سكريبت وذلك لتنفيذ أي دالة تريدها في هذا المثال سوف نقـوم بإظهـار رسـالة

تنبه المستخدم بمرور الفأرة فوق الارتباط أو الوصلة وفـي مثالنـا الرسـالة هـي " The

" mouse was over

وفي الوصلة الأخرى عند المرور ومـن ثـم الابتعـاد بالفـأرة عـن وصـلة أو ارتبـاط

وهو الحدث ()MouseOut " حيث سوف نستفيد مـن هـذا الحـدث فـي اسـتدعاء دالـة

مكتوبــة بالجافــا ســكريبت وذلــك لتنفيــذ أي دالــة تريــدها فــي هــذا المثــال ســوف نقــوم

بإظهار رسالة تنبه المستخدم بمرور الفأرة فوق الارتباط أو الوصلة ومن ثم الابتعاد

عن الوصلة أو الارتباط وفي مثالنا الرسالة هي " over was mouse The "

التنفيذ :

مثال على الحدث ()onFocus :

No Statements

1 <html><head>

2 <title>onFocus alert message</title>

3 <SCRIPT LANGUAGE="javascript">

4 </SCRIPT>

5 <body>

6 Enrter your name:

7 <form>

8 <INPUT TYPE="TEXT" NAME "YourName" onFocus =

"window.status=('Enter your name');return true;">

9 </form>

10 </center>

11 <body>

12 </html>

World Intellectual Property Organization

Led by#Black_snipper/

في هذا المثال عند القيام بوضع المؤشر داخل الحقل وهو الحدث "()onFocus "

تظهر لنا رسالة في أسفل المستعرض " name your Enrter ."

التنفيذ :

مثال على الحدث ()onChange :

No Statements

<html><head> 1

<title>onChange alert message</title> 2

<SCRIPT LANGUAGE="javascript"> 3

</SCRIPT> 4

<body> 5

Enter your name: 6

> 7 < form

<INPUT TYPE="TEXT" NAME= "YourName" 8

onChange="window.status=('you was change the filed');return

true;">

</form> 9

</center> 10

<body> 11

</html> 12

World Intellectual Property Organization

Led by#Black_snipper/

في هذا المثال عند تغيير مكان المؤشر عن الحقل " القيام بالحدث ()onChange "

تظهر لنا رسالة في أسفل المستعرض " filed the change was you ."

التنفيذ :

مثال على الحدث ()onBlur :

No Statements

1 <html><head>

2 <title> onBlur alert message</title>

3 <SCRIPT LANGUAGE="javascript">

4 </SCRIPT>

5 <body>

6 Enter your name:

7 <form>

8 <INPUT TYPE="TEXT" NAME= "YourName" onBlur =

"window.status=('youe leaf the filed empty');return true;">

9 </form>

10 </center>

11 <body>

12 </html>

في هذا المثال عند ترك الحقل ً فارغا " القيام بالحدث ()onBlur "

تظهر لنا رسالة في أسفل المستعرض " empty filed the leaf you ."

World Intellectual Property Organization

Led by#Black_snipper/

التنفيذ:

مثال على الحدثين ()onLoad و()onUnload :

No Statements

1 <html><head>

2 <title>onLoad & onUnload alert message</title>

3 <script language="javascript">

4 function onloadweb()

5 {

;("أھال بكم في موقعنا")alert 6

7 }

8 function onUnloadweb()

9 {

;("نشكركم على زيارة موقعنا")alert 10

11 }

12 </script>

13 </head>

14 <body onLoad="onloadweb()" onUnload="onUnloadweb()">

15 <center><h1>الرحيم الرحمن الله بسم>h1></center>

16 </body>

17 </html>

World Intellectual Property Organization

Led by#Black_snipper/

فــي هــذا المثــال عنــد القيــام بتحميــل الــصفحة وهــو الحــدث "()onLoad "يــتم تنفيــذ الدالــة

()onloadweb تظهــــر رســــالة "أهــــلا بكــــم فــــي موقعنــــا"وعنــــد القيــــام بــــإغلاق الــــصفحة

المـستعرض وهـو الحـدث ()onUnload يـتم تنفيـذ الدالـة ()onUnloadweb فتظهـر لنـا

رسالة " نشكركم على زيارة موقعنا ".

التنفيذ:

أمثلة مختارة متنوعة

§ تم اختيار مجموعة من الأمثلة التطبيقية لمختلف النواحي وتحتاج منكم إلى

تحليل مكثف لقراءة الكود الخاص بها ونذكر أن ما تعلمناه هو مبادئ

لوضع الطالب على الطريق الصحيح في لغة الجافا سكريبت وما على

المهتم إلا المتابعة والاجتهاد في هذا المجال وهذا كان هدفنا من ذكر هذه

الأمثلة والتي يصل بعضها إلى درجة الاحتراف.

مثال عن كيفية التنقل بين العناوين المخزنة في المتصفح:

World Intellectual Property Organization

Led by#Black_snipper/

No Statements

<HTML> 1

<HEAD> 2

<TITLE> History Buttons </TITLE> 3

<SCRIPT LANGUAGE="JavaScript"> 4

function nav(X){ history.go(X);} 5

</SCRIPT> 6

</<HEAD> 7

<BODY> 8

<CENTER><h1>Histoy Buttons</h1> 9

10 <h2> Here are the tow buttons made with navigator form buttons:

</h2><P>

<FORM> 11

<INPUT TYPE="button" VALUE=" 12 السابقة الصفحة "onClick="nav(-

1)">

</FORM> 14

15 </CENTER>

16 </BODY>

</HTML> 17

World Intellectual Property Organization

Led by#Black_snipper/

مثال عن كيفية إنشاء زر لإرسال بريد إلكتروني :

No Statements

<HTML> 1

<HEAD> 2

<title> Email button</title> 3

</HEAD> 4

<BODY> 5

<FROM> 6

7 <INPUT TYPE="button" VALUE="send e-mail"

onClick="self.location='mailto:mymail@any_compeny.com';">

</FORM> 8

</BODY> 9

</HTML> 10

World Intellectual Property Organization

Led by#Black_snipper/

مثال عن كيفية فحص واختبار المتصفح :

No Statements

<HTML> 1

<HEAD> 2

<TITLE> testing All Browsers</TITLE> 3

<SCRIPT> 4

function browsertest() 5

{ 6

thisapp=navigator.appName 7

8 thisversion=navigator.appVersion

9 thisappcodename=navigator.appCodeName

10 alert("Youare using

"+thisapp+"version"+thisversion+",which is code

named"+thisappcodename+".");

11 }

12 </SCRIPT>

13 </HEAD>

14 <BODY onload="browsertest()" bgcolor="FFFFFF">

15 <CENTER>

16 <H1> Testing All Browsers</H1>

17 <H2>You can modigy this script and use it to direct your

JavaScript visitors in one direction.and other visitors

elsewhere.</H2>

18 </CENTER>

19 </BODY>

20 </HTML>

فـــــي هـــــذا المثـــــال عنـــــد تحميـــــل الـــــصفحة أي الحـــــدث onload يـــــتم تنفيـــــذ الدالـــــة

()browsertest حيـث تقـوم هـذه الدالـة بفحـص واختبـار المتـصفح وذلـك عـن طريـق

الكــــــــــــــــــــــــــــــــــــــــــائن navigator ، والخاصــــــــــــــــــــــــــــــــــــــــــية appName و appVersion

وappCodeName حيث :

عند كتابة الجملة appName.navigator سوف تقوم بإرجاع اسم المتصفح

Arab British Academy for Higher Education.

- 64 -

وعند كتابة الجملة appVersion.navigator سوف تقوم بإرجاع إصدار المتصفح

وعنــــد كتابــــة الجملــــة appCodeName.navigator ســــوف تقــــوم بإرجــــاع الاســــم

البرمجي.

التنفيذ :

World Intellectual Property Organization

Led by#Black_snipper/

عداد الزوار:

ً ستكون بحاجة إلى صورة العداد...

طبعا

World Intellectual Property Organization

Led by#Black_snipper/

وضع محرك بحث Google في موقعك:

< INPUT TYPE =hidden name=ie value=windows-1256>

< INPUT TYPE =hidden name=oe value=windows-1256>

< INPUT TYPE =submit name=btnG VALUE="Google Search">

</FORM></CENTER>

تم تجهيز مجلد خاص مع المادة يحتوي على بعض الأمثلة المفيدة يرجى الاطلاع

World Intellectual Property Organization

Led by#Black_snipper/

مهمـة دراسية

صفحة حرة

أنــشئ صــفحة برمجيــة مناســبة بلغــة الجافــا ســكريبت بــأي موضــوع تختــاره علــى أن

تتضمن معظم ماورد في هذه المادة إضافة إلى معلوماتك ومطالعاتك الخاصة.

يرفق معWorld Intellectual Property Organization

Led by#Black_snipper/

ملف خاص يشرح بشكل مفصل كل سطر في الصيغة المستعملة.

دولة الهرم الرابع

بحث هذه المدونة الإلكترونية

المتغيرات في الجافا سكريبت

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

صفحات مزورة جاهزة لإختراق

اكواد هواتف الاندرويد

تطير حسابات الفيسبوك