بوحمد
05-08-04, 02:16 PM
مقدمة
ما هي جافا سكريبت ؟
جافا سكريبت هي لغة برمجة طورت من قبل Netscape . عندما تستخدم جافا سكريبت يمكنك بسهولة عمل صفحات ويب تفاعلية . و هذه المقدمة توضح ماذا يمكنك إن تفعل بجافا سكريبت و الأهم كيف تفعله .
جافا سكريبت و ليس جافا !
كثير من الناس يعتقدون جافا سكريبت هي نفسها جافا لتشابه الاسمين. هذا غير صحيح . و سوف تأخذ وقت طويل لشرح الفرق الشاسع بين جافا و جافا سكريبت. لذلك تذكر فقط جافا سكريبت ليست جافا. و لمزيد من المعلومات قم بقراءة المقدمة من Netscape.
تشغيل جافا سكريبت !
ما هو المطلوب لتشغيل ال البرامج المكتوبة بجافا سكريبت ؟ أنت تحتاج متصفح به خاصية جافا سكريبت كمثال : Netscape Navigator بداية من الإصدار 2 . و مايكروسوفت انترنت اكسبلورر بداية من الإصدارة 3 .و لانتشار هذه المتصفحات بين مستخدمين كثر فالكثير من المستخدمين سيكون متاح لهم تشغيل جافا سكريبت . و هذا من النقاط الهامة لاستخدامك في صفحاتك جافا سكريبت. بالطبع ستحتاج معرفة أساسيات لغة HTML لتستطيع قراءة بقية الدروس. و أحسن شيء تقوم بفعله هو البحث عن كلمة هتمل في ياهوو و غوغل (باللغة الإنجليزية طبعا) .
المحتويات :
1- ادخال كود جافا سكريبت في صفحة ويب .
2- تركيب جافا سكريبت(syntax) .
3- التعليقات (comments) .
ادخال كود جافا سكريبت فى صفحة ويب :-
يتم ادخال جافا سكريبت الى صفحة الهتمل ( اى صفحات ويب يمكنك اضافة جافا سكريبت لها) باستعمال تاج (script) ، (لن اترجم كلمة تاج التى اصلها tag، هكذا افضل) . تاجات ال script توضع فى تاج الرأس الخاص بالصفحة (head tag) ، المتصفحات القديمة . الخ .. لا احد يستعمل متصفحات قديمة ، دعنا نترك هذا و هناك شىء واحد عليك معرفته و هو لا تنسى عندما تكتب سكريبت ان تضعه فى تاجات التعليقات فى هتمل .
مثال :
CODE
<! - - code - ->
عندما تستعمل مع جافا سكريبت النهاية ستتغير و ستبدأ بهذه العلامة // التى هى كود جافا سكريبت للتعليق . و ذلك يجعل مترجم (interpreter) جافا سكريبت بان يقوم بتجاهل هذه العبارة و لا يعرضها.
مثال
CODE
<html>
<head>
<title>صفحة ويب بها كود جافا سكريبت</title>
<script language="javascript">
<!-- hide javascript code from non-javascript enabled browsers
--------
هنا يكتب كود جافا سكريبت --------
--------
//end hiding of javascript code -->
</script>
</head> هذا هو تاج الرأس
<body>
صفحة الهتمل
</body>
</html>
و يمكننا ايضا سطر كود او شفرة واحد ملحق بحدث (event) . و التكوين العام يكون هكذا :
<html_tag attibute="option" onevent="كود جافا سكريبت يكتب هنا">الاشياء الموجودة بين بداية و نهاية التاج</html_tag>
تركيب جافا سكريبت : -
الكتابة باى لغة يجب ان تكون تتبع تركيبة و قواعد معينة . فمثلا فى لغتنا العربية الاصيلة يجب ان يكون هناك فعل و فاعل و ان لم يجد فنائب فاعل او ما يدل على ....... هذا يكفى فلن ادخل فى درس قواعد و لكن ما اريد قوله انه لابد من الكتابة بالقواعد المحددة حتى تحصل على معنى ... أليس كذالك... و الان جافا سكريبت لديها بضعة قواعد متبعة فى تركيبها :-
Case-sensitive:-
الحقيقة لم استطع ترجمتها فأى ترجمة ستكون سخيفة على حد علمى و لكن لا تخف ، لقد فهمتها و عليك انت ايضا فهمها ، و معناها ... انها تعامل الكلمات بطريقة مختلفة تماما حتى لو كان الاختلاف حرف ، قارن هذه الكلمات معى .
example
Example
EXAMPLE
هل لاحظت الفرق ، يعنى ممكن تحصل "بلاوى" لو لم تنتبه لما تكتبه .
Semicolons:-
لا احتاج ان اقول اى جملة(statement) تقوم بكتابتها يجب ان تنتهى بهذه العلامة و الا فلن تنتهى فهذه العلامة هى التى تفرق بين جملة و اخرى " ; "
مثال
CODE
Var x = 0; var y = 10;
White Spaces:-
المسافات البيضاء او الخالية ، جافا سكريبت مثل هتمل تتجاهل المساحات الخاوية او الاسطر الجديدة بين الجمل ، و لكن جافا سكريبت تتعرف على المسافات البيضاء و الاسطر الجديد التى هى جزء من Strings و التى سوف اتكلم هنها لاحقا . من خلال دروس اخرى .
مثال
var x=0; هو نفسه var x = 0; هو نفسه var x= 0;
كل هذه الامثلة تخرج لنا نفس النتائج ، و هى فكرة جيدة ان تضع بعض المسافات لكى تجعله برنامج قابلا للقرأة اكثر ، او يمكنك جعل برنامج كومة من الاوامر التى تحتاج وقت كبير لقرأتها . و لكن لا تنسى ان تضع مسافة بين المتغير و اسمه .
Strings And Quotes:-
بحثت عن ترجمة ملائمة و لكن لم تعجبنى واحدة ، لذلك ستكون اسمها كما هى ، اتفقنا .... ال strings هى عبارة عن متتاليات من الصفر او من كائنات اخرى (charcters) داخل علامة اقتباس مزدوجة او مفردة ( 'single' , "double") .
دقق معى جيدا فى هذين المثالين
CODE
('He said, "javascript is a good language" ')
("He said, 'javascript is a good language' ")
هل الاثنين متطابقين ؟ ستقول لى لا . فأرد و اقول لا انهم متطابقين ، فما اريد قوله هو ان علامات الاقتباس المزدوجة ممكن ان تبدأ و تنتهي بعلامات اقتباس مفردة و العكس صحيح ، علامة الاقتباس المفردة يمكن ان تستخدم فى غلق علامات الاقتباس المزدوجة ، و سأقوم بإتباع هذه الطريقة في الدروس اللاحقة .
مثال اخر
CODE
<input type="button" value="Click Me" onclick="window.alert('Alnokta was here');">
فى المثال السابق نجد سطر هتمل يستعمل علامة اقتباس مزدوجة ليحدد تنصيب التاج . لنتمكن من صنع نافذة مفاجئة popup تعرض ال string "Alnokta was here" نحتاج الى اغلاق ال string بعلامة اقتباس فردية . و بذلك تمت كتابته بحيث تمت ترجمة جملة الجافا سكريبت بأكملها مع المحافظة على فعالية جملة الهتمل .
Backslash ( \ ) & Strings:-
سمى هذا الكائن بهذا الاسم لانه يرجع للخلف ، و يجب علينا ان لا نخلط بين Backslash (\) و Forward slash (/) التى تتقدم الى الامام . ال Backslash لها غرض مميز فى ال strings فى جافا سكريبت . ستكون ملحقة بكائن اخر يمثل شىء فى ال string لا يمكن كتابته على لوحة المفاتيح.
كمثال نحن نريد ان نطبع كلمة "Alnokta" فى السطر الاول و كلمة "was" فى سطر ثانى و كلمة "here" فى سطر ثالث .. فسيكون ال string شيئا كهذا :
CODE
'Alnokta\nwas\nhere'
\n تمثل ضغطة ادخال و سطر جديد ، هذا هو العمليات التى تحدث عندما تبدا سطر جديد فى الالة الكاتبة ، و النتيجة ستكون كهذه :
Alnokta
was
here
مكونات الحروف هذه تسمى متتاليات الهروب او بالمعنى الاصلى (escape sequences) بعض المعتاد منها :-
CODE
\b backspace
\f form feed
\n new line
\r carriage return (بلا سطر جديد)
\t tab
\' علامة اقتباس مفردة
\" علامة اقتباس مزدوجة
اخر اثنين مهمين للغاية ،، و يمكن ان يتم استعمالهم هكذا:-
CODE
'You didn\'t get that done'
او "
CODE
You didn\'t get that done"
و فى تلك الحالة يقول لمترجم جافا سكريبت ان يقوم بطباعة علامة الاقتباس الى الشاشة و ليس اعتبارها محدد كما كان استخدامها فى مثال سابق.
Opening & Closing Brackets (أقواس الفتح و الغلق):-
كمبدأ ،،، اى نوع من الاقواس تقوم بفتحه يجب عليك اغلاقه و هذا فى جميع لغات البرمجة ،،، و ذلك يتضمن كل من ( ) . [ ] . { }
مثال
CODE
if ( x[0] = = 10 )
{
x[0] = 0;
x[1] = 0;
}
هذا النوع من الاقواس { } يستخدم لاحتواء جمل جافا سكريبت مزدوجة . فى المثال السابق x[0] = 0; و x[1] = 0; هما جملتا جافا سكريبت مختلفتان.
أقواس المربعات [ ] هى جزء من نوع معلومات مميز يسمى مصفوفة و المصفوفات كاعادتى سأقول انى سوف اغطيها فى دروس لاحقة .
الاقواس المنحنية ( ) مستعملة لتحتوى على دالة او متغير مستقل (method argument) . و ال arguments المزدوجة تكون مفصولة بفاصلة.
Comments (التعليقات):-
نأتى لاخر جزء فى الدرس و هو عن التعليقات ، يمكنك ان تضع تعليق باستخدام هذه العلامة مزدوجة ( / ) و هى ما تسمى double forward slash
مثال
CODE
//هذا تعليق
ما هي جافا سكريبت ؟
جافا سكريبت هي لغة برمجة طورت من قبل Netscape . عندما تستخدم جافا سكريبت يمكنك بسهولة عمل صفحات ويب تفاعلية . و هذه المقدمة توضح ماذا يمكنك إن تفعل بجافا سكريبت و الأهم كيف تفعله .
جافا سكريبت و ليس جافا !
كثير من الناس يعتقدون جافا سكريبت هي نفسها جافا لتشابه الاسمين. هذا غير صحيح . و سوف تأخذ وقت طويل لشرح الفرق الشاسع بين جافا و جافا سكريبت. لذلك تذكر فقط جافا سكريبت ليست جافا. و لمزيد من المعلومات قم بقراءة المقدمة من Netscape.
تشغيل جافا سكريبت !
ما هو المطلوب لتشغيل ال البرامج المكتوبة بجافا سكريبت ؟ أنت تحتاج متصفح به خاصية جافا سكريبت كمثال : Netscape Navigator بداية من الإصدار 2 . و مايكروسوفت انترنت اكسبلورر بداية من الإصدارة 3 .و لانتشار هذه المتصفحات بين مستخدمين كثر فالكثير من المستخدمين سيكون متاح لهم تشغيل جافا سكريبت . و هذا من النقاط الهامة لاستخدامك في صفحاتك جافا سكريبت. بالطبع ستحتاج معرفة أساسيات لغة HTML لتستطيع قراءة بقية الدروس. و أحسن شيء تقوم بفعله هو البحث عن كلمة هتمل في ياهوو و غوغل (باللغة الإنجليزية طبعا) .
المحتويات :
1- ادخال كود جافا سكريبت في صفحة ويب .
2- تركيب جافا سكريبت(syntax) .
3- التعليقات (comments) .
ادخال كود جافا سكريبت فى صفحة ويب :-
يتم ادخال جافا سكريبت الى صفحة الهتمل ( اى صفحات ويب يمكنك اضافة جافا سكريبت لها) باستعمال تاج (script) ، (لن اترجم كلمة تاج التى اصلها tag، هكذا افضل) . تاجات ال script توضع فى تاج الرأس الخاص بالصفحة (head tag) ، المتصفحات القديمة . الخ .. لا احد يستعمل متصفحات قديمة ، دعنا نترك هذا و هناك شىء واحد عليك معرفته و هو لا تنسى عندما تكتب سكريبت ان تضعه فى تاجات التعليقات فى هتمل .
مثال :
CODE
<! - - code - ->
عندما تستعمل مع جافا سكريبت النهاية ستتغير و ستبدأ بهذه العلامة // التى هى كود جافا سكريبت للتعليق . و ذلك يجعل مترجم (interpreter) جافا سكريبت بان يقوم بتجاهل هذه العبارة و لا يعرضها.
مثال
CODE
<html>
<head>
<title>صفحة ويب بها كود جافا سكريبت</title>
<script language="javascript">
<!-- hide javascript code from non-javascript enabled browsers
--------
هنا يكتب كود جافا سكريبت --------
--------
//end hiding of javascript code -->
</script>
</head> هذا هو تاج الرأس
<body>
صفحة الهتمل
</body>
</html>
و يمكننا ايضا سطر كود او شفرة واحد ملحق بحدث (event) . و التكوين العام يكون هكذا :
<html_tag attibute="option" onevent="كود جافا سكريبت يكتب هنا">الاشياء الموجودة بين بداية و نهاية التاج</html_tag>
تركيب جافا سكريبت : -
الكتابة باى لغة يجب ان تكون تتبع تركيبة و قواعد معينة . فمثلا فى لغتنا العربية الاصيلة يجب ان يكون هناك فعل و فاعل و ان لم يجد فنائب فاعل او ما يدل على ....... هذا يكفى فلن ادخل فى درس قواعد و لكن ما اريد قوله انه لابد من الكتابة بالقواعد المحددة حتى تحصل على معنى ... أليس كذالك... و الان جافا سكريبت لديها بضعة قواعد متبعة فى تركيبها :-
Case-sensitive:-
الحقيقة لم استطع ترجمتها فأى ترجمة ستكون سخيفة على حد علمى و لكن لا تخف ، لقد فهمتها و عليك انت ايضا فهمها ، و معناها ... انها تعامل الكلمات بطريقة مختلفة تماما حتى لو كان الاختلاف حرف ، قارن هذه الكلمات معى .
example
Example
EXAMPLE
هل لاحظت الفرق ، يعنى ممكن تحصل "بلاوى" لو لم تنتبه لما تكتبه .
Semicolons:-
لا احتاج ان اقول اى جملة(statement) تقوم بكتابتها يجب ان تنتهى بهذه العلامة و الا فلن تنتهى فهذه العلامة هى التى تفرق بين جملة و اخرى " ; "
مثال
CODE
Var x = 0; var y = 10;
White Spaces:-
المسافات البيضاء او الخالية ، جافا سكريبت مثل هتمل تتجاهل المساحات الخاوية او الاسطر الجديدة بين الجمل ، و لكن جافا سكريبت تتعرف على المسافات البيضاء و الاسطر الجديد التى هى جزء من Strings و التى سوف اتكلم هنها لاحقا . من خلال دروس اخرى .
مثال
var x=0; هو نفسه var x = 0; هو نفسه var x= 0;
كل هذه الامثلة تخرج لنا نفس النتائج ، و هى فكرة جيدة ان تضع بعض المسافات لكى تجعله برنامج قابلا للقرأة اكثر ، او يمكنك جعل برنامج كومة من الاوامر التى تحتاج وقت كبير لقرأتها . و لكن لا تنسى ان تضع مسافة بين المتغير و اسمه .
Strings And Quotes:-
بحثت عن ترجمة ملائمة و لكن لم تعجبنى واحدة ، لذلك ستكون اسمها كما هى ، اتفقنا .... ال strings هى عبارة عن متتاليات من الصفر او من كائنات اخرى (charcters) داخل علامة اقتباس مزدوجة او مفردة ( 'single' , "double") .
دقق معى جيدا فى هذين المثالين
CODE
('He said, "javascript is a good language" ')
("He said, 'javascript is a good language' ")
هل الاثنين متطابقين ؟ ستقول لى لا . فأرد و اقول لا انهم متطابقين ، فما اريد قوله هو ان علامات الاقتباس المزدوجة ممكن ان تبدأ و تنتهي بعلامات اقتباس مفردة و العكس صحيح ، علامة الاقتباس المفردة يمكن ان تستخدم فى غلق علامات الاقتباس المزدوجة ، و سأقوم بإتباع هذه الطريقة في الدروس اللاحقة .
مثال اخر
CODE
<input type="button" value="Click Me" onclick="window.alert('Alnokta was here');">
فى المثال السابق نجد سطر هتمل يستعمل علامة اقتباس مزدوجة ليحدد تنصيب التاج . لنتمكن من صنع نافذة مفاجئة popup تعرض ال string "Alnokta was here" نحتاج الى اغلاق ال string بعلامة اقتباس فردية . و بذلك تمت كتابته بحيث تمت ترجمة جملة الجافا سكريبت بأكملها مع المحافظة على فعالية جملة الهتمل .
Backslash ( \ ) & Strings:-
سمى هذا الكائن بهذا الاسم لانه يرجع للخلف ، و يجب علينا ان لا نخلط بين Backslash (\) و Forward slash (/) التى تتقدم الى الامام . ال Backslash لها غرض مميز فى ال strings فى جافا سكريبت . ستكون ملحقة بكائن اخر يمثل شىء فى ال string لا يمكن كتابته على لوحة المفاتيح.
كمثال نحن نريد ان نطبع كلمة "Alnokta" فى السطر الاول و كلمة "was" فى سطر ثانى و كلمة "here" فى سطر ثالث .. فسيكون ال string شيئا كهذا :
CODE
'Alnokta\nwas\nhere'
\n تمثل ضغطة ادخال و سطر جديد ، هذا هو العمليات التى تحدث عندما تبدا سطر جديد فى الالة الكاتبة ، و النتيجة ستكون كهذه :
Alnokta
was
here
مكونات الحروف هذه تسمى متتاليات الهروب او بالمعنى الاصلى (escape sequences) بعض المعتاد منها :-
CODE
\b backspace
\f form feed
\n new line
\r carriage return (بلا سطر جديد)
\t tab
\' علامة اقتباس مفردة
\" علامة اقتباس مزدوجة
اخر اثنين مهمين للغاية ،، و يمكن ان يتم استعمالهم هكذا:-
CODE
'You didn\'t get that done'
او "
CODE
You didn\'t get that done"
و فى تلك الحالة يقول لمترجم جافا سكريبت ان يقوم بطباعة علامة الاقتباس الى الشاشة و ليس اعتبارها محدد كما كان استخدامها فى مثال سابق.
Opening & Closing Brackets (أقواس الفتح و الغلق):-
كمبدأ ،،، اى نوع من الاقواس تقوم بفتحه يجب عليك اغلاقه و هذا فى جميع لغات البرمجة ،،، و ذلك يتضمن كل من ( ) . [ ] . { }
مثال
CODE
if ( x[0] = = 10 )
{
x[0] = 0;
x[1] = 0;
}
هذا النوع من الاقواس { } يستخدم لاحتواء جمل جافا سكريبت مزدوجة . فى المثال السابق x[0] = 0; و x[1] = 0; هما جملتا جافا سكريبت مختلفتان.
أقواس المربعات [ ] هى جزء من نوع معلومات مميز يسمى مصفوفة و المصفوفات كاعادتى سأقول انى سوف اغطيها فى دروس لاحقة .
الاقواس المنحنية ( ) مستعملة لتحتوى على دالة او متغير مستقل (method argument) . و ال arguments المزدوجة تكون مفصولة بفاصلة.
Comments (التعليقات):-
نأتى لاخر جزء فى الدرس و هو عن التعليقات ، يمكنك ان تضع تعليق باستخدام هذه العلامة مزدوجة ( / ) و هى ما تسمى double forward slash
مثال
CODE
//هذا تعليق