بسم الله الرحمن الرحيم .
(119) وَلَنْ تَرْضَى عَنْكَ الْيَهُودُ وَلَا النَّصَارَى حَتَّى تَتَّبِعَ مِلَّتَهُمْ قُلْ إِنَّ هُدَى اللَّهِ هُوَ الْهُدَى وَلَئِنِ اتَّبَعْتَ أَهْوَاءَهُمْ بَعْدَ الَّذِي جَاءَكَ مِنَ الْعِلْمِ مَا لَكَ مِنَ اللَّهِ مِنْ وَلِيٍّ وَلَا نَصِيرٍ (120)
من سورة البقره .
السلام عليكم و رحمة الله ..
أهلا و سهلا بالجميع .. و مرحبا بكم في دورتي الأولى لتعليم لغة البرمجه جافاسكريبت بإسم ( فـل نتكـلم جافاسـكريـبت)، إن شاء الله بإذنه سوف نقوم اليوم في هذا الموضوع بطرح شرح كامل للغه مع شرح المعطيات الأكثر أهميه .. و إن شاء الله سوف أظيف كل مره درس في نفس الموضوع و نفس المشاركه .. يعني سوف أدمجهم بإذن الله ..
كما أني إن شاء الله سوف أطرح بعض الأسئله لتحريك أدمغتكم شويّ و إن شاء الله تستفيدون منها .. و طبعا ً الأسئله سوف تتعلق بالدرس الذي تمّ طرحه ..
كما أردت أن أشير أن هذه اللغه ليس من الصعب تعلمها بل بالعكس هي سهله إن شاء الله بعض ما تبدأون الدوره و تفهمون المطلوب و كذلك الحال في أي لغه برمجه ..
و أشير أيضا ً أن تعدد اللغات في العقل السليم يعني أنه أسلم من سليم ..
سواء كانت لغه برمجه للويب أو لبرامج الوندوز و الينكس ..
لمذا طرحت هذه الدوره ؟ : سهله، أنت عربي و أنا عربي ، أنت مسلم و أنا مسلم . لديّ عقل و لك عقل .. أنا عضو في إقلاع سوفت ، و أنت كذلك عضو .. إذن ما الذي يجعلني أتماطل في طرح مثل هذه الدروس ؟؟؟ << يجاوب بسآل .
يتجسّم الموضوع أو الدرس التالي :
الدرس 1 .
تعريف بالجافاسكريبت .
قبل البدايه في اللغه .
الفرق بين الجافا و الجافاسكريبت .
كيفية إدراج جافاسكريبت في صفحه ويب عاديه (كلاسيكيه HTML) .
الأجسام أو الكائنات (Objects) في الجافاسكريبت .
الدوال Function (الوظائف)
___________________________
تعريف بالجافاسكريبا .
لغة الجافا سكريبت (JavaScript) تمّ تطويرها من قبل شركة نيتسكيب (Netscape).. ومهمة هذة اللغة هي بثّ الحياة إلى شبكة الإنترنت، حيث تجعل المتصفح أكثر تفاعلية.يوجد نمطين للغة جافا سكربت من حيث التنفيذ Client Side و Server Side ، الاول يقوم بتحيل الكود مع صفحة HTML ومن ثم تصبح العمليات التي يطلبها المستخدم تنفذ على جهازه أي ضم المتصفح الخاص به (client agent) والثانية تجبر المتصفح على الاتصال مع المخدم من اجل تنفيذ الاوامر واعطاء النتيجة إلى العميل (Client agent) ليقوم بعرضها ، تتميز الاولى ببطئ تحيل الصفحة للمرة الأولى ومن ثم سرعة التنفيذ اثناء الجلسة ولكن الثانية تتميز بسرعة التحميل للمرة الاولى والبطئ في الاستجابة بسبب عملية الاتصال مع المخدم لدى كل طلب من الزبونتستخدم الجافا سكريبت كوسيله تفاعليه أكثر سرعه مع المستخدم ، ولكن بعض المبرمجين لا يحبذوا استخدام الجافا سكربت في بعض الأحيان و خاصه ان هناك بعض المتصفحات تتيح للمستخدم الغاء تنفيذ الجافاسكريبت على المتصفح . لكن تبقى دائما اللغه الدينامكيه الأولى ..
و الجافاسكريبت يمكن دمجها في أي صفحه ويب كيف ما كانت . و بأي لغه كانت ..
تعمل لغة JavaScript على إضفاء الحيوية على صفحات الشبكة, و هي تعتمد على:
الكائنات Class
لغة JavaScript لغة تضاف إلى القن المصدريHTML و تعتمد على مفهوم الكائنات Class فمثلا تعتبر الصور, الأزرار و الصفحات كائنات. و كل كائن له خصائص تميزه و طرق عبارة عن دوال يستعملها.
في لغة JavaScript, هناك ثلاث أنواع:
الكائنات المحددة
و تضم:الجداول، الثنائيات, التاريخ, الدوال, الرياضيات, العدد, العلب, الأساليب المنتظمة و الرموز.
كائنات المتصفح
تضم:النافذة, الصفحة, الإطار, المؤرخة, الروابط, الصور... إلى جانب عناصر الترسيمات.
الكائنات الشخصيةالمتغيرات Variables
تعتبر كذاكرات تحفظ قيما و تحمل اسما معينا.
الدوال function
تكمن من جمع عدة تعليمات تحت اسم مرجعي واحد. و تسمى أيضا وظائف.
و يمكن الإتصال بها أو ندائها بطريقه سهله و بسيطه تعتمد على إسم الوظيفه (function)..
سوف أطلعكم عليها في القادم المستقبل .و الدرس الخاص بالدوال function .
التكراريات Loops
تمكن من تنفيذ مجموعة تعليمات بطريقة تكرارية أو دورية.
تكرارية محددةتتم باستعمال
كود:
for(var=0;var<d;var++). و تستعمل في حالة كنا نعرف مسبقا عدد مرات التكرار.
تكرارية غير محددةتتم باستعمال
كود HTML:
while(condition). و تستعمل في حالة كنا لا نعرف مسبقا عدد مرات التكرار.
الشرطية
مجموعة تعليمات تنفذ في حالة تحقق شرط معين.
هذه التعريف تم إستعانة ً بالموسوعه الحرّه ويكيبيديا.
قبل أن نبدأ في قلب اللغه .
يجب عليك أن تعلم أن :
- للإنتهاء من تعريف أي أمر أو دلاله أو شرط أو أي شيء كذا ننتهي في آخر السطر بالرمز ; ..
- يجب أن تعلم أنك من الواجب عليك أن تقوم بالتعامل بجد مع هذه اللغه و تديها وقت من يومك الطويل ..
- أنصح بشدّه استعمال أحد برامج الجافاسكريبت لمساعدتك في صنع صفحاتك الأولى .. مثل برنامج 1st JavaScript Editor .. أو NotePad ++ .. أو أي برنامج أنت تعرفه يقدر يساعدك .
و هذا يعني للمتصفح شيء كبير جداا ..
- يجب أن تعلم أيضا ً أنني سوف أشرح اللغه و لست أكتب هذا الموضوع كي أجعلك تدرس اللغه كلها ..
بل أوجهك و أساعدك لبدايتك في عالم البرمجه بالجافاسكريب ..
- أيضا ً يجب أن تعلم أنك حتى ولو أصبحت يوما ما مبرمج رقم 1 (و هذا ليس صعبا ً) بالجافاسكريبت أنك سوف تبقى دائما مبتدء في عالم البرمجه، و مهما حصل و تعلمت لا تقل أنك إنتهيت بل لقد دخلت عالم أكبر منا أجمعين .. و لله القدره الخارقه و ما احنا إلاّ بشر يعني لدينا عقل محدود .. و ربي يعيننا و يحفظ لنا عقلنا مهما كان بحدود ..
<< هذا كلامي و موجه للجميع .. تقبلوه
الفرق بين الجافاسكريبت و الجافا ..
الجافاسكريبت و كما وضحت بالتعريف هي من إنتاج و دعم شكره نيتسكيب ..
أما لغة الجافا فهي من إنتاج و دعم شركة Sun ..
الفرق بينهم تقنيا سأوضحه كالتالي :
الجافا سكريبت : مفتوحة المصدر . أوامرها مدمجه بالHTML . يمكن تنويعها . يتم التحقق من الأوامر أثناء التشغيل . لا تكتب على القرص الصلب .
الجافا : غير مفتوحة المصدر (يتم ضغطها). أوامرها غير مدمجه بال HTML، يتم إستدعائها ك(Applet).لا يمكن تنويعها (معرفتها محدده) . يتم التحقق من الأوامر أثناء الضغط . لا تكتب على القرص الصلب .
كيف يتم إدخال اللغه في صفحه HTML :
لإدخال سكريبت في صفحه ويب عاديه أي HTML .. نستعمل الطريقه أو الكود التالي :
كود:
<script language="javascript" type="text/javascript">
و هنا أوامر السكريبت
</script>شرح الكود : عندما نطقنا Script .. بدأنا في التعريف للمتصفح بأننا سوف نستعمل سكريبت للغه أخرى غيرك أنت يا HTML ..
ثما قلنا Language .. هنا سوف نحدد للمتصفح أي لغه سوف نستخدم في هذا السكريبت .. ذكرناها على أنها جافاسكريبت .. حلو يعني هو يعرفها .. بعدين حددنا نوعها و قلنا text/javascript ..
ثم نغلق التعريف ب الرمز < .. نأخد سطر جديد ثم نكتب السكريبت المراد إدراجه ..
و لا ننسى المهم و هو عند الإنتهاء من السكريبت نوضح للمتصفح أننا انتهينا طيب و نذكر هذا بالطريقه التاليه : </script> ..
و أنت تكتب السكريت لك سطر أو أسطر للإرتياح أو لإدراج تعليقات حول الأوامر أو ما تريد ..
و نقوم بأخد السطر لنا و لا يتعرف عليه المتصفح ..
لأننا سوف ندرج الرمز التالي // لسطر واحد أو /* لعدة سطور .. و ننتهي بالسطر الأخير الرمز */ ..
كالتالي ..
كود:
var SESSIONURL = "";
//هنا تعليق أو ملاحظه بسطر واحد
var IMGDIR_MISC = "images/misc";
/* و هنا ملاحظه أو تعليق
بسطرين */
var vb_disable_ajax =parseInt("0", 10);الأجسام (Objects) في الجافاسكريبت .
المتصفح حين يقابل سكريبت يقوم بتقسيمه كأجسام لمعرفة المعطيات و الكائنات الموجوده باللغه ..
طريقة التعامل مع الأجسام في الجافاسكريبت هي جد سهله و فعاله كما أنها معقوله و سهلة الدخول للعقل ..
مثلا : لدينا غابه موجوده على الأرض في الغابه لدينا شجره محدده و في الشجره 4 أغصان في أحد الأغصان يوجد عش .
إذن لو أردنا تسليس الأجسام المذكوره سوف نقول :
أرض.شجره(أ).غصن(ج).عش;
لاحضتم أنني وضعت . (نقطه) بين كل جسم و كتبتهم من الأكبر إلى الأصغر أو بمعنى من الكائن الأكبر قدره .. كذلك وضعت الرمز () و بداخله رفم أو عدد .. و يعني هو ال ID الخاص بالجسم ..
لو أردنا مثلا أن نغير لون العش سوف نكتب الأمر بالشكل التالي ..
أرض.شجره(أ).غصن(ج).عش.لون = "أحمر";
الآن لون العش أحمر ..
نقوم بإحياء المثال .
ننشأ صفحه . في داخلها جدول، الID حقه حددناه هو A5 .. لو أردنا تلوين خلفيته بالأخضر ماذا نكتب ؟
كود:
document.getElementById(A5).bgColor= green;هنا ال Document هي الصفحه و ال getElementById هي تطلب الجسم صاحب الإسم (A5) ..
ال bgColor يعتبر من خصائص الجسم A5 ..و من أشهر خصائص الأجسام التي ممكن أن نقوم بتغييرها : القياس، اللون، لون الخلفيه، صوره الخلفيه، الإطار(border)، و العديد ...
الوضائف Function .
هي إحدى الوضائف الأكثر أهميه في أي سكريبت حيث تسهّل علينا الكثير و الكثير .. و هي مكونه أو يمكن تكوينها و تشخيصها بالعديد من الأوامر ..
و يتم النداء عليها في وقت تحدده أنت و بهذا يتم تشغيل الأوامر التي قمت بكتابتها
أولا طريقة كتابتها هي على الشكل التالي ..
كود:
function Tajriba() {
هنا نكتب الأوامر التي نريد أن يتم
تشغيلها أثناء النداء على هذه الوضيفه
}سوف أشرح لكم ، ال Function هنا قلنا للمتصفح أنه لدينا وضيفه سوف يتم التعرف عليها و إبقائها مستعدة للتشغيل في الوقت الذي يتم طلبها ..
Tajriba() هذا إسم الوضيفه يمكن تسمته بالإسم الذي تريد .. أنت حر ّ .. و يلزم دائما إنشاء القوسين في آخر إسم الوضيفه ..
ثم وضعنا القوس الي مشكل هكذا { و هي لبداية السكريبت و الأوامر .. و ننتهي في الأخير بشدّ القوص }
و الآن فل نعرف كيف ننادي على هذه الوضيفه بعد ما أنشائناها ..
يمكن أن ننادي عليها .. أثناء تحميل الصفحه أو أثناء مرور الفأره على شيء محدد .. أو أثناء الضغط على رابط أو زر أو أثناء إنهاء تحميل (أي غلق) شيء محدد ..
و نستعمل الكلمات الثاليه في النداء .. (هذي اللي كاتب أنا هي بعض منها)
كود:
onmousedown=""
onmousemove=""
onmouseout=""
onmouseover=""
onmouseup=""
onclick=""
onunload=""
onsubmit=""
onclick=""و نضع إسم الوضيفه بين ال "" .. مثلا
كود:
<a href="http://google.com" onclick="Tajriba();">إGoto google</a>.
نهاية الدرس رقم 1 ..
أتمنى من كل قلبي أن تتم متابعتكم للدوره .. و أن تنتال إعجابكم و أن تفيدكم ..
و الله وليّ التوفيق ..
نراكم قريبا ً
الثلاثاء مارس 11, 2008 2:29 pm