تعلم جافا سكريبت الأن
السلام عليكم
بسم الله الرحمن الرحيم و به نستعين ...
الدرس الأول :-
مقدمة
ما هي جافا سكريبت؟
جافا سكريبت هي لغة برمجة طورت من قبل Netscape . عندما تستخدم جافا سكريبت يمكنك بسهولة عمل صفحات ويب تفاعلية.و هذه
المقدمة توضح ماذا يمكنك إن تفعل بجافا سكريبت و الأهم كيف تفعله.
جافا سكريبت و ليس جافا!
كثير من الناس يعتقدون جافا سكريبت هي نفسها جافا لتشابه الاسمين. هذا غير صحيح . و سوف تأخذ وقت طويل لشرح الفرق الشاسع بين جافا و جافا سكريبت. لذلك تذكر فقط
جافا سكريبت ليست جافا. و لمزيد من المعلومات قم بقراءة المقدمة من Netscape.
تشغيل جافا سكريبت!
ما هو المطلوب لتشغيل ال البرامج المكتوبة بجافا سكريبت؟ أنت تحتاج متصفح به خاصية جافا سكريبت كمثال : Netscape Navigator بداية من الإصدار 2 . و مايكروسوفت انترنت
اكسبلورر بداية من الإصدارة 3 .و لانتشار هذه المتصفحات بين مستخدمين كثر فالكثير من المستخدمين سيكون متاح لهم تشغيل جافا سكريبت . و هذا من النقاط الهامة لاستخدامك في صفحاتك جافا سكريبت. بالطبع ستحتاج معرفة أساسيات لغة HTML لتستطيع قراءة بقية الدروس. و أحسن
شيء تقوم بفعله هو البحث عن كلمة هتمل في ياهوو و غوغل (باللغة الإنجليزية طبعا).
المحتويات:
1- ادخال كود جافا سكريبت في صفحة ويب.
2- تركيب جافا سكريبت(syntax).
3- التعليقات (comments) .
ادخال كود جافا سكريبت فى صفحة ويب:-
يتم ادخال جافا
سكريبت الى صفحة الهتمل ( اى صفحات ويب يمكنك اضافة جافا سكريبت لها) باستعمال تاج (**) ، (لن اترجم كلمة تاج التى اصلها tag، هكذا افضل). تاجات ال ** توضع فى تاج الرأس الخاص بالصفحة (head tag) ، المتصفحات القديمة .... الخ الخ الخ ... لا احد يستعمل متصفحات قديمة ، دعنا
نترك هذا و هناك شىء واحد عليك معرفته و هو لا تنسى عندما تكتب سكريبت ان تضعه فى تاجات التعليقات فى هتمل.
مثال :
CODE
<! - - code - ->
عندما تستعمل مع جافا سكريبت النهاية ستتغير و ستبدأ بهذه العلامة // التى هى كود جافا سكريبت للتعليق . و ذلك يجعل
مترجم (interpreter) جافا سكريبت بان يقوم بتجاهل هذه العبارة و لا يعرضها.
مثال
CODE
<html>
<head>
<title>صفحة ويب بها كود جافا سكريبت</title>
<** language="java**">
<!-- hide java** code from non-java** enabled browsers
--------
هنا يكتب كود
جافا سكريبت --------
--------
//end hiding of java** code -->
</**>
</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, "java** is a good language" )
("He said, java** is a good language "
هل الاثنين متطابقين ؟ ستقول لى لا فأرد و اقول لا انهم متطابقين ، فما اريد قوله
هو ان علامات الاقتباس المزدوجة ممكن ان تبدأ و تنتهي بعلامات اقتباس مفردة و العكس صحيح ، علامة الاقتباس المفردة يمكن ان تستخدم فى غلق علامات الاقتباس المزدوجة ، و سأقوم بإتباع هذه الطريقة في الدروس اللاحقة.
مثال اخر
CODE
<input
type="button" value="Click Me" onclick="window.**(Alnokta was here);">
فى المثال السابق نجد سطر هتمل يستعمل علامة اقتباس مزدوجة ليحدد تنصيب التاج . لنتمكن من صنع نافذة مفاجئة popup تعرض ال string "Alnokta was here" نحتاج الى اغلاق ال string بعلامة اقتباس فردية . و بذلك
تمت كتابته بحيث تمت ترجمة جملة الجافا سكريبت بأكملها مع المحافظة على فعالية جملة الهتمل.
Backslash ( ) & Strings:-
سمى هذا الكائن بهذا الاسم لانه يرجع للخلف ، و يجب علينا ان لا نخلط بين Backslash () و Forward slash (/) التى تتقدم الى الامام . ال Backslash لها غرض مميز فى
ال strings فى جافا سكريبت . ستكون ملحقة بكائن اخر يمثل شىء فى ال string لا يمكن كتابته على لوحة المفاتيح.
كمثال نحن نريد ان نطبع كلمة "Alnokta" فى السطر الاول و كلمة "was" فى سطر ثانى و كلمة "here" فى سطر ثالث .. فسيكون ال string شيئا كهذا :
CODE
Alnoktanwasnhere
n تمثل ضغطة ادخال و سطر جديد ، هذا هو العمليات التى تحدث عندما تبدا سطر جديد فى الالة الكاتبة ، و النتيجة ستكون كهذه:
Alnokta
was
here
مكونات الحروف هذه تسمى متتاليات الهروب او بالمعنى الاصلى (escape sequences) بعض المعتاد منها :-
CODE
b backspace
f form feed
n new line
r carriage return (بلا سطر جديد)
t tab
علامة اقتباس مفردة
" علامة اقتباس مزدوجة
اخر اثنين مهمين للغاية ،، و يمكن ان يتم استعمالهم هكذا:-
CODE
You didnt get that done
او "
CODE
You didnt 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
/*هنا التعليق */
و
هكذا اكون قد انهيت الدرس الاول و ارجو ان تكونوا استفدتم..........
التسجيل
تسجيل الدخول
المنتدى
المجلة
القوانين
أحصائيات
التقويم
مشاركات اليوم
البحث
لا يمكنك الرد على هذا الموضوع
تحميل محتوى الموضوع
عرض نسخة صالحة للطباعة
أرسل هذا الموضوع إلى صديق
تعلم جافا سكريبت الأن 
تعلم جافا سكريبت الأن 
