الدرس الأول :-
مقدمة
ما هي جافا سكريبت؟
جافا
سكريبت هي لغة برمجة طورت من قبل Netscape . عندما تستخدم جافا سكريبت
يمكنك بسهولة عمل صفحات ويب تفاعلية.و هذه المقدمة توضح ماذا يمكنك إن تفعل
بجافا سكريبت و الأهم كيف تفعله.
جافا سكريبت و ليس جافا!
كثير
من الناس يعتقدون جافا سكريبت هي نفسها جافا لتشابه الاسمين. هذا غير صحيح .
و سوف تأخذ وقت طويل لشرح الفرق الشاسع بين جافا و جافا سكريبت. لذلك تذكر
فقط جافا سكريبت ليست جافا. و لمزيد من المعلومات قم بقراءة المقدمة من
Netscape.
تشغيل جافا سكريبت!
ما هو المطلوب لتشغيل ال البرامج
المكتوبة بجافا سكريبت؟ أنت تحتاج متصفح به خاصية جافا سكريبت كمثال :
Netscape Navigator بداية من الإصدار 2 . و مايكروسوفت انترنت اكسبلورر
بداية من الإصدارة 3 .و لانتشار هذه المتصفحات بين مستخدمين كثر فالكثير من
المستخدمين سيكون متاح لهم تشغيل جافا سكريبت . و هذا من النقاط الهامة
لاستخدامك في صفحاتك جافا سكريبت. بالطبع ستحتاج معرفة أساسيات لغة HTML
لتستطيع قراءة بقية الدروس. و أحسن شيء تقوم بفعله هو البحث عن كلمة هتمل
في ياهوو و غوغل (باللغة الإنجليزية طبعا).
المحتويات:
1- ادخال كود جافا سكريبت في صفحة ويب.
2- تركيب جافا سكريبت(syntax).
3- التعليقات (comments) .
ادخال كود جافا سكريبت فى صفحة ويب:-
يتم
ادخال جافا سكريبت الى صفحة الهتمل ( اى صفحات ويب يمكنك اضافة جافا
سكريبت لها) باستعمال تاج (script) ، (لن اترجم كلمة تاج التى اصلها tag،
هكذا افضل). تاجات ال script توضع فى تاج الرأس الخاص بالصفحة (head tag) ،
المتصفحات القديمة .... الخ الخ الخ ... لا احد يستعمل متصفحات قديمة ،
دعنا نترك هذا و هناك شىء واحد عليك معرفته و هو لا تنسى عندما تكتب سكريبت
ان تضعه فى تاجات التعليقات فى هتمل.
مثال : CODE
عندما
تستعمل مع جافا سكريبت النهاية ستتغير و ستبدأ بهذه العلامة // التى هى
كود جافا سكريبت للتعليق . و ذلك يجعل مترجم (interpreter) جافا سكريبت بان
يقوم بتجاهل هذه العبارة و لا يعرضها.
مثال CODE
صفحة ويب بها كود جافا سكريبت
هذا هو تاج الرأس
صفحة الهتمل
و يمكننا ايضا سطر كود او شفرة واحد ملحق بحدث (event) . سأقوم بشرح الاحداث لاحقا . و التكوين العام يكون هكذا
الاشياء الموجودة بين بداية و نهاية التاج
تركيب جافا سكريبت:-
الكتابة
باى لغة يجب ان تكون تتبع تركيبة و قواعد معينة . فمثلا فى لغتنا العربية
الاصيلة يجب ان يكون هناك فعل و فاعل و ان لم يجد فنائب فاعل او ما يدل على
....... هذا يكفى فلن ادخل فى درس قواعد و لكن ما اريد قوله انه لابد من
الكتابة بالقواعد المحددة حتى تحصل على معنى ... أليس كذالك... و الان جافا
سكريبت لديها بضعة قواعد متبعة فى تركيبها :-
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
فى
المثال السابق نجد سطر هتمل يستعمل علامة اقتباس مزدوجة ليحدد تنصيب التاج
. لنتمكن من صنع نافذة مفاجئة 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
//هذا تعليق
و لعمل اكثر من تعليق واحد يمكنك استخدام هذه الطريقة من غير كلام كثير .... CODE
/*هنا التعليق */
