أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.
الدرس الأول :- مقدمة ما هي جافا سكريبت؟ جافا سكريبت هي لغة برمجة طورت من قبل 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 /*هنا التعليق */