بالتأكيد انك سمعت كثيرا عن هذه اللغة ،وأعتقد انك أحببت تعلمها إما لشهرتها أو لإمكانياتها ،على أية حال نحن نبشرك فلغة ألجافا سكريبت لغة سهلة وبسيطة وتستطيع ان تتعلمها حتى لو كنت هاويا(لست مبرمجا) اما ان كنت مبرمجا وتعرف في لغات أخرى مثل السي++ أو ألجافا فلن تواجه أدنى صعوبة في فهم والسيطرة على هذه اللغة فور اطلاعك على هذه الدروس الأساسية ، فلنبدأ إذن .
الجافا سكربت ما هي إلى لغة برمجة صممتها شركة النتسكيب لتغطية بعض العيوب التي عجزة لغة (الأتش تي ام أل) عن تحقيقها مثل العمليات الحسابية او تصميم النماذج او القوائم وغيره من مزايا الجافا سكربت ،ويجب ان نميز هنا بين الجافا سكربت و الجافا والتي هي من إصدار شركة (صن مايكروسِستمز)ومن أهم الفروق الهامة هو ان الجافا تترجم تجميعيا و الجافا سكريبت تترجم فوريا و اللغات المترجمة تجميعيا يتم ترجمتها مرة واحدة لتتحول إلى البرنامج المطلوب للتنفيذ وهذا هو سبب سرعتها ولكن البرامج التي تترجم فوريا تتحول الى البرنامج التنفيذي فقط أثناء التنفيذ وكل مرة يتم فيها التنفيذ وذلك سطر بسطر كما في لغة جافا سكربت إلا ان اللغات التي تترجم فوريا دائما تكون اسهل واقل تعقيداً من تلك اللغات التجميعية ،ليس هذا الفارق فقط فلغة الجافا العادية لا يمكن تضمينها داخل صفحات الويب بعكس الجافا سكربت التي تجد في صفحات الويب بيتها الوحيدة .
ملاحظات هامة :
1- الجافا سكربت تدعهما متصفحات نيتسكيب وميكروسوفت انترنت اكسبلور، مع ان النتسكيب اكثر دعما له لأنها لغته الأم ،على اية حال فالفرق بينهما قليل جدا ويكاد يكون معدوما .
لنفرض انك تستخدم انترنت اكسبلورر وتريد ان تضيف الجافا سكربت التي قمت بكتابتها في صفحتك اذهب الى القائمة الرئيسة لاكسبلور ثم اختر العرض ثم المصدر او في الانجليزية :
كود PHP:
View ---------source
هكذا تكون قد فتحت (ألأتش تي أم أل) الخاص بصفحتك كل ما عليك ان تضع كود الجافا سكربت بين وسمي ال
كود PHP:
<HTML>
<HEAD>
قد يوضع هنا
كود PHP:
</HEAD>
<BODY>
أو هنا
كود PHP:
</BODY>
</HTML>
و لإعلام المتصفح أن هذا الجزء من الصفحة هو جافا سكريبتس يتم ذلك بوضع :
(سطر تعريف المتصفح بأن هذه جافا سكربت)
<Script language="JavaScript"> توضع في بداية أي برنامج جافا سكربت
الكود هنا
</Script> تدل على انتهاء البرنامج
وقد نجد في كثير من الأحيان في اول البرنامج وبعد سطر التعريف اشارة :
<!--
وهي لتنبيه المتصفحات القديمة ، وتلك التي لاتدعم الجافا سكريبتس الى تلافي السطور القادمة ، وبدون هذه العلامة ، سيظهر السكريبت على الصفحة كتبابةً! ويجب إضافتها الى كل كود حتى لاتشوه شكل صفحتك .
اعرف انك على عجلتٍ من امرك تريد ان تتعلم بسرعة اذن لنقم بعمل برنامج بسيط يقوم بعرض رسالة الى المستخدم عند دخوله للصفحة :
<SCRIPT LANGUAGE=”JAVASCRIPT”>
<!--hide JavaScript code from browsers that are not JavaScript enabled JavaScript enabled
alert (“welcome in my my first java Program”)
//end hiding of JavaScript code-- >
</SCRIPT>
اعتقد انك لاحظت شيئاً جديدا في الكود السابق إنها اشارة // اذن لننتقل لنتعرف ما قصة هذه الإشارة لننتقل لموضوع جديد :
الملاحظات والتعليقات
تستخدم تماما كما تستخدم في سي بلس بلس
الملاحظات ذات السطر الواحد تستخدم الشرطتين
// this is a comment
// this is another comment
// thank u for reading my comments
لابد من وضع هذه العلامة امام كل سطر ملاحظات اما اذا مللت من وضعها فيمكن استخدام علامة اخرى للملاحظات ذات السطور المتعددة وهي ايضا مطابقه لما يستخدم في لغة سي بلس بلس
\*
this is a comment
just comment you but it as you like
it used from careerists
*/
أساسيات وقواعد اللغة
لكل لغة من لغات البرمجة قواعد يجب ان تتبع ولنرى بعض القواعد المتبعة مع جافا سكريبت:
تهتم لغة الجافا بحالة الحروف اي ان المتغير ذو الحروف الكبيرة يختلف عنه اذا كتب بحروف صغيرة وهذا ما يسمى ب :
case sensitive language .
يجب ان ينتهي سطر الاوامر بفاصلة منقوطة مثل لغة سي بلس بلس خاصة عند كتابة اكثر من امر بسطر واحد.
لاتهتم جافا سكربت بالفراغات والمسافات الخالية بين اجزاء الامر .
ستقابلك أثناء الكتابة بالجافا أقواس عدة ، على إختلاف أنواعها ، يجب عليك بعد فتح أي قوس من هذا الأقواس غلقة ، تتابعيا ، القوس الأخير فالذي يليه لكي لايخلق لك ذلك أية مشاكل أثناء تنفيذ البرنامج ، ولاننسى أي مشكلة معناها توقف البرنامج عن العمل .
يتم وضع النص المطلوب عرضه بين علامات اقتباس اما فردية او مزدوجه
“double”
‘single’
الشرطة المائلة الخلفية تستخدم لاغراض عدة عندما تتبع بحرف
\n
معناها مطابق تماما لاستخدامها في لغة سي بلس بلس وهو الانتقال لسطرجديد
My\nname\nis\nBashar
ستكون نتيجة العرض
My
Name
is
Bashar
وهذه بعض من استخداماتها مع الحروف الاخرى
\b
backspace
جافا سكريبت لاتهتم بنوع المتغير سواء كان حرفيا او عدد صحيح او عدد عشري وهو ما قد يروق للكثير من المبتدئين لانها تترجم وقت التنفيذ فهي لاتهتم بذلك، فقط يسبق المتغير بالامر
var
امثلة
كود PHP:
var x;
var X;
var y;
var ww10;
ويمكن كتابة عدة متغيرات على سطر واحد
كود PHP:
var x , X , y , ww10;
ويمكن تخصيص قيم ابتدائية للمتغيرات
كود PHP:
var x = 5 , X = 7 , y = 17;
المعاملات الحسابية
- الطرح
++ الزيادة
-- النقصان
* الضرب
/ القسمة
% باقي القسمة
+ الجمع
المعاملات المنطقية
! النفي
< اصغر من
> اكبر من
<= اصغر من اويساوي
>= اكبر من او يساوي
= يساوي
!= لا يساوي
&& و
|| أو
?: شرط
الدوران والقفز بشروط بعض تطبيقات ماسبق ذكره من المعاملات
اليك المثال التالي
كود PHP:
if ( (x == 6 ) && (y == 3)) {
Sum = b + w;
}
لاحظ المعاملات المظلة بالخضر وارجع الى الجدول لمعرفة استخدامها
المثال يفترض شرط هو ان اذا كانت x تساوي 6 وفي نفس الوقت y تساوي 3 طبق شروط معينه داخل البلوك
كلمة في نفس الوقت التي استخدمتها انا وربما يكون التعبير كلغة عربية رديئا الى حد ما عبرت عنه لغة الجافا سكريبت بالمعامل &&
شروط الدوال والمتغيرات
جافا سكريبت معظم القواعد المتبعة مع معظم اللغات
· الحرف الاول يجب ان يكون حرف ويمكن ان يليه ارقام
· لايوجد مسافة خالية داخل المتغير او اسم الدالة
· لايمكنك استخدام الاوامر المحجوزة للغة كاسم لمتغير او لدالة
مثال لاسماء متغيرات ودوال
كود PHP:
X
Xxx
X1345
_XX
xx_yy_bb
واليك الآن قائمة بالاسماء المحجوزة وهي اوامر اللغة
لابد من تعريف الوظائف قبل إستخدامها ، وتوضع تعريفات الوظائف عادة في مقدمة وثائق لغة الترميز النصية ، بالرغم من أن هذا المكان ليس إلزاميا ، ولكن ذلك يضمن التعريف قبل الإستخدام . والصيغة العامة لتعريف الوظائف هي كمايلي :
function FuncitonName(v1,v2,v3....){
الأوامر هنا
}
إسم الوظيفه FunctionName هو الإسم الذي يستخدم للإشارة الى الوظيفة أثناء إستدعائها ، والمعاملات v1,v2.... هي أسماء المتغيرات التي تمرر الى الوظيفة عند إستدعائها ، وهذه المتغيرات تسمى Arguments وأخيرا ، يتم تنفيذ الجمل المحصورة داخل الأقواس {} نتيجة لإستدعاء أي وظيفة .
{ تشير الى علامة البداية للوظيفة او الإجراء
} تشير الى نهاية الوظيفة او الاجراء
إذا ، دعنا نعرف الآن الوظيفة addone .
كود PHP:
function addone(value){
newvalue = value + 1
return newvalue
}
الأمر RETURN يعيد القيمة التي أسندت إلى newvalue
والآن دعنا نعرف وظيفة أخرى ،لاتعيد أية قيم وإنما تقوم بعمل ما showit
كود PHP:
function showit(what){
alert (what)
}
إذا تنشيط الوظيفة يعتبر عادة جزءاً من تعبير ما . فمثلا الجمله التاليه تستدعي وتنشط الوظيفه addone مع تمرير القيمة 6 إليها :
كود PHP:
value=addone(6)
إذا في المثال السابق يفترض أن تعيد الوظيفة قيمة تسند الى المتغير value ولكن ، قد لاتعيد الوظيفة قيمة ، بل تقوم بطباعة شيء على الشاشة أو أي تنفيذ آخر ، حينها يتم إستدعاء الوظيفة بالطريقة التاليه :
كود PHP:
showit("hi there")
في المثال السابق تم تمرير القيمة Hi There الى الوظيفة showit ، ولم ينتج عن الوظيفة أية قيمة ، إذا ، كان الإستدعاء بدون إسناد القيمة الى متغير آخر .
ينبغى ملاحظة العديد من الأشياء هنا ، من بينها أن القيم التي تعرف بداخل الداله لاتحمل قيمتها في خارج الداله . والعكس غير صحيح . بالإضافة الى أن القيم ستسند الى المتغير الجديد في سطر تعريف الداله ، في الحالة السابقة تم إسناد القيمة Hi There الى المتغير what في داخل الدالة فقط ، ولن يتم التعامل مع المتغير بنفس القيمة في الخارج إلا إذا تم إسناد القيمة إليه من الخارج ، وأيضا في حالة تعريف المتغير في وسط الوظيفة كمتغير محلى ، ولو كان المتغير معرف خارج الوظيفة فسيتم التعامل معه من داخل الوظيفة وخارجها . وستتغير قيمته من داخل الوظيفة وخارجها .
بالإضافة لما سبق ، قد يكون للمتغيرات المحلية نفس أسماء المتغيرات العامة . بالإعلان عنها داخل وخارج الوظيفة ( يتم الإعلان عن المتغيرات كما ذكرنا سابقا في درس آخر بإستخدام الأمر var ) ، إذا يمكن الإعلان عنها بالداخل والخارج ، وستكون كل الإشارات الى المتغيره وتغيير قيمها بداخل الوظيفه لايغير قيمتها خارج الوظيفة .
وأخيرا ، يمكن تضمين الوظائف العديد من الأوامر ، ويتم إستدعائها متى إحتجت إليها
هناك دوال تعطيها لك اللغة وهي دوال جاهزة لاجراء عمليات معينه سوف نتعرض لها فيما بعد والدوال الاخرى وهي الاكثر استخداما هي التي سوف تنشئها انت بنفسك
كود PHP:
function multi (x , y)
{
var q ;
q = x * y;
return q;
}
هذه الدالة يمرر اليها عددين وتقوم بحساب حاصل ضربهم ثم تعيد النتيجة الى جزء البرنامج الذي استدعى الدالة وهي بسيطة جدا بغرض التوضيح ولكن يمكن ان تحتوي على عمليات حسابية معقدة وكبيرة او قد تحتوي مربعات حوار او اي عمليات يتم عملها بمجرد استدعاء اسم الدالة في اي جزء من اجزاء البرنامج مع تمرير المتغيرات لها اذا كانت مصممة لاستقبال متغيرات وفوائدها تقليل كود البرنامج بدلا من اعادة كتابة الكود كل مرة نرغب في عمل هذه العمليات .
الدوران والقفز بشروط بعض تطبيقات ماسبق ذكره من المعاملات
اليك المثال التالي
كود PHP:
if ( (x == 6 ) && (y == 3)) {
Sum = b + w;
}
لاحظ المعاملات المظلة بالخضر وارجع الى الجدول لمعرفة استخدامها
المثال يفترض شرط هو ان اذا كانت x تساوي 6 وفي نفس الوقت y تساوي 3 طبق شروط معينه داخل البلوك
كلمة في نفس الوقت التي استخدمتها انا وربما يكون التعبير كلغة عربية رديئا الى حد ما عبرت عنه لغة الجافا سكريبت بالمعامل &&
مزيدا من اوامر الشروط والتفرع
switch
ولنرى المثال التالي يليه الشرح
كود PHP:
switch (n) {
case 1:
نفذ هذه الاوامر
break;
case 2:
نفذ هذه الاوامر
break;
case 3:
نفذ هذه الاوامر
break;
case 4:
نفذ هذه الاوامر
break;
default :
نفذ هذه الاوامر
break;
}
يقوم الامر باختبار قيمة المتغير n عندما تكون مساوية لواحد تنفذ الاوامر التي وضعتها حتى الامر break ويتم بعدها الخروج من البلوك ونفس الحال للقيم حتى 4 ويمكنك ان تزيد وتفترض قيمة الاختبار واذا لم تساوي اي من القيم التي افترضتها يتوجه التنفيذ الى الاوامر التي تلي الامر
default
While الدوران
الدوران هو الهدف منه تكرار اجزاء من البرنامج مرات ومرات حسب الشرط العددي وذلك لاختصار كتابة جزء كبير من التعليمات
اليك المثال التالي
كود PHP:
var x = 1;
while (x <= 10)
{
x ++;
}
لاحظ استخدام المعاملات وارجع الى الجدول لمعرفة استخدامها ونعود الى مثالنا الامر
while
يقوم بعمل تكرار لبلوك اوامر بشرط ان تكون قيمة المتغير x اصغر من او تساوي 10
والبلوك المطلوب تكراره عبارة عن زيادة قيمة المتغير x بمقدار واحد ثم يقوم امر التكرار بالكشف ثانية على القيمة حتى تصل الى الشرط الذي ينهي عملية التكرار
جملة FOR
for
نفس الوظيفة السابقه ولكن تحدد القيمة صراحة المطلوب انهاء التكرار عنده
اليك المثال الذي يوضح ذلك
كود PHP:
var x ;
for (x = 1; x <= 10 ; x++)
{
نفذ هذه الاوامر
}
ومعنى المثال ابدء العد من 1 حتى تصل القيمة الى قيمة اصغر من او تساوي 10 وفي كل مرة زيد قيمة المتغير x بمقدار 1 وملخص ذلك كرر مابداخل البلوك 10 مرات.
تستخدم جافا سكريبت المصفوفات مثل باقي لغات البرمجه وتختلف عنها فقط في ان نوع المصفوفة يمكن ان تحوي انواع مختلفة من البيانات سواء كانت اسماء او ارقام صحيحه او عشريه اما اللغات الاخري فيجب ان المصفوفه تحتوي نوع واحد مخصص لها من البيانات
ولكن لمن لا يعرف علينا ان نوضح معنى المصفوفه
دارسي الرياضيات يستطيعوا بسهوله فهم معنى المصفوفه وهي اي المصفوفه مفيده في تقليل حجم الكود المكتوب للبرنامج وهي بالطبع حيز تخزين لنفرض اننا نريد تخزين اسماء التلاميذ وعددهم 100 تلميذ ولو فرضنا انك ستستخدم المتغيرات لتخزينها وهي طريقه غير عملية بالطبع فسيكون الكود كما يلي
كود PHP:
var student1 , student2 , student 3 ,
وتظل تكتب المتغير حتى تصل الى رقم
كود PHP:
student99,student100;
هذا بالطبع شئ ممل جدا اضف الى ذلك عدم امكانية استخدام التكرار والعدادات التي سبق وان تحدثنا عنها والمصفوفات تقوم بحل هذه المشكلة
كود PHP:
var student = new array ();
student [0] = “Bashar”;
student [1] = “Shammah”;
اظن ان المثال الاخير قد اوضح تماما فكرة المصفوفه
الاحداث
الوندوز هو محيط رسائلي يتم ارسال رسالة عند حدوث حدث مثل مرور الماوس فوق صورة او فوق زر معين او التركيز على نافذه او ضغط الزر الايمن او الايسر او الاوسط للماوس وهكذا نستغل هذه الاحداث لتنشيط جزء او كل من برنامج جافا سكريبت ليقوم بعمل وظائفه المصمم من اجلها
ولسنتعرض معا بعض الامثلة والاحداث لشرح الفكرة
onClick ()
استجابة لضغط زر يتم تحديده عندها ينفذ جزء من الكود مثال
كود PHP:
<INPUT TYPE = “Button” VALUE = “Send”
onClick = “window.alert (‘Message has been sent’);”>
في المثال السابق تم الاستجابة للضغط على زر يسمى Send باظهار الرسالة الموضحة في نافذه مستقلة
onSubmit()
تستخدم كثيرا استجابة لضغط الماوس او لوحة المفاتيح على زر ارسال النماذج
كود PHP:
<Form action = http://www.bashar.cjb.net
onSubmit = “return CheckForm();”>
عند الضغط على الزر المذكور سيتم تنفيذ الدالة المكتوب اسمها حيث يوجد فيها كود لاختبار القيم التى وضعها المستخدم بالنموذج
onMouseOver()
هو حدث مرور الماوس فوق عنوان او وصلة
كود PHP:
<a href= “http://bashar.cjb.net “
onMouseOver= “window.status=’thank u for visiting my web page’;
return true;”> My web page</A>
ستجد وصلة مكتوبة بالانجليزية موقعي على الانترنت وعند تحرك الماوس فوقها ستتغير الى شكرا لزيارة موقعي
onMouseOut()
حدث تحريك الماوس بعيدا عن وصلة
يمكن عكس المثال السابق ليؤدي الرسالة عند ابعاد الماوس عن الوصلة
onFocus
حدث وضع الماوس على حقل مدخلات معينه ويمكن ان يستغل في اعطاء رسالة بفرض التحرك لحقل كتابة الاسم
كود PHP:
<INPUT TYPE=”TEXT” NAME “YourName”
onFocus = “window.status=(‘Enter your name’);return true;”>
عند تحركك الى حقل ادخال الاسم ستجد رسالة على سطر الحالة السفلي تقول ادخل اسمك
onChange
حدث تغير قيمة معينه لحقل
كود PHP:
<INPUT TYPE=”TEXT” NAME “YourName”
onChange = “window.status=(‘The name has changed’);return true;”>
عندما تدخل لحقل الاسم وتكتب فمعنى ذلك حدوث تغيير وعليه ستظهر الرسالة التي كتبنها استجابة للحدث على سطر الحالة
onBlur
حدث ترك حقل بيانات بدون تغيير يمكن استخدامها او السابقه لادراك عملية اكمال البيانات ولا تستخدمهما معا
onLoad
حدث انتهاء متصفح الانترنت من تحميل الصفحة الحالية يمكن الاستفاده من الحدث في عرض رسالة ترحيب مثلا
كود PHP:
<BODY onLoad = “alert(‘Welcome to Bashar home Page);”>
onUnload
حدث الخروج من الصفحة الحالية الى اخرى يمكنك الاستفادة منها في عرض رسالة وداع او شكر
كود PHP:
<BODY onUnLoad = “alert(‘Welcome to my WebSite’);”>
ارتبط الهدف في السطر ذو الخلفية الخضراء بمتغير للحصول على طول الاسم وارتبط بداله على السطر ذو الخلفية الصفراء لتحويل مجموعة الحروف الى احرف انجليزية طويلة المتغير MyName تم الاعلان عنه في السطر الاول كهدف من نوع string واصبح ينوب عن الهدف الاصلي في استخدام دواله ومتغيراته
بالطبع جافا سكريبت تحوي الحديد من الاهداف مع دوالها ومتغيراتها مثل الهدف
كود PHP:
math
للعمليات الرياضية ومعه مجموعة من الدوال التي تخدم هذه العمليات مثل
كود PHP:
min(),max(),sin(),cos()
وهناك الهدف
كود PHP:
date
الخاص بالتعامل مع الوقت والتاريخ وايضا له ملحقاته من دوال ومتغيرات
مع ملاحظة ان الاهداف السابق التحدث عنها مع المصفوفات والتي سنتحدث عنها فيما بعد يجب ان تعلن باستخدام الامر او المعامل
كود PHP:
new
الوثائق
الصفحة التي يعرضها متصفح الانترنت هي الوثيقه الهدف يستخدمها ويعرف بها لتوجيه المخرجات اليها اي الكتابة عليها واستقبال الاوامر والمدخلات منها
مثال
كود PHP:
window.document.Forms[0]
الكود السابق يعني توجيه البرنامج الى النموذج الاول في الوثيقه سوف نتحدث عن النماذج فيما بعد ولكن من الجدير بالذكر ان النماذج تعمامل كالمصفوفات وعليه لو وجد اكثر من نموذج بالوثيقه فسوف يبدء الترقيم من صفر ثم يتصاعد وذلك للنداء على الوثائق
مثال
كود PHP:
window.document.Forms1
تم التعامل في الكود السابق مع النموذج بالنداء عليه باسمه مباشرة
كود PHP:
window.document.Forms1.YourName.value
صيغه اخرى للتعامل مع حقول النموذج مباشرة فقد تم التعامل مع حقل يسمى YourName بالنموذج الذي اسمه Form1