الزعيم
الجنس : عدد المساهمات : 279 الشكر : 3 تاريخ الميلاد : 26/03/1994 تاريخ التسجيل : 26/07/2010 العمر : 30 اسم الموقع : منتدى ميت محمود
| موضوع: ما هى اكواد JavaScript و [جافا سكربتjQuery الأربعاء يوليو 06, 2011 2:47 am | |
| بسم الله الرحمن الرحيم و به نستعين ... الدرس الأول :- مقدمة ما هي جافا سكريبت؟ جافا سكريبت هي لغة برمجة طورت من قبل 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 /*هنا التعليق */
| |
|