تحية الى كل زوار المدوة و متابعيها.. مرحبا في درس جديد من دروس الجافاسكريبت المقدمة حصريا على المدونة.. في الدرس السابق تعرفنا على أن الجافاسكربت لغة برمجة تستخدم عادة مع لغة الـHTML . وفي هذا الدرس سوف نتعرف على بنية لغة الجافاسكربن اضانو الى طريقة إدخالها في صفحات الوب ، كما سنتعرف أيضا طريقة عرض نافذة المحاذثة على شاشة المستخدم باستخدام هذه اللغة .
بالنسبة لمحرر النصوص الذي نستخدمه عادةً هو ++NotePad بالنسبة للويندوز ، أما للذين يمتلكون نظام تشغيل اخر فيمكن إستخدام برنامج Vim بالنسبة للـLinux أو برنامج TextWrangler بالنسبة للماك .
الفهرس
1. عرض نافذة المحاذثة .
2. بنية الجافاسكربت .
3. أين أضع الكود في الصفحة .
4. بعض الأفكار .
1.عرض نافذة المحاذثة
Hello World
حفاظا على التقليد الخاص بدروس البرمجة ، سنبدأ أولا بالتعرف على طريقة عرض نافذة محاذثة تحتوي على الجملة الشهيرة Hello World . هذا هو الكود الذي يقوم بعمل النافذة حيث الجافاسكربت توجد داخل العنصر <script> :
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
alert('Hello world!');
</script>
</body>
</html>
أكتب الكود أعلاه في صفحة HTML ، و قم بعرضها على متصفحك بالطريقة المعهودة ، ستفتح لك نافذة صغيرة تقول " Hello World " :
الجديد عندنا
في الكود السابق ، نلاحظ بعض العناصر الجديدة علينا .
قبل كل شيء العنصر <script> موجود ، و هو العنصر الذي نكتب داخله كل لغة الجافاسكربت .
الكود الموجود داخل العنصر <script> هو :
alert('Hello world!');
إنه تعليمة ، أو طلب ، أو أمر ، إنه حذث يقوم الحاسوب بتحقيقه ، فلغات البرمجة عموما تتكون من مجموعة من التعليمات ، مع جمع كل تلك التعليمات في قالب منظم و متراص نحصل على سكربت كامل .
في المثال السابق نرى تعليمة وحيدة فقط : تسمى دالة ()Alert .
نافذة المحاذثة Alert
Alert عبارة عن تعليمة بسيطة ، و هي عبارة عن دالة ( fonction ) ، عمل هذه الدالة هو عرض نافذة محاذثة صغيرة تحتوي على رسالة نصية ، هذه الرسالة النصية تكون بين علامتي ' ' و داخل قوسين ( ) ، و مسألة القوسين و العلامات مهمة في لغة الجافاسكربت .
إلى الان نحن لم نبدأ بالأساسيات الكبيرة للغة جافاسكربت ، لذلك لا تقلق ، فالفقرة السابقة كانت مجرد تقديم ، أو تقليد ، كل ما يجب تذكره هو أن هناك دالة ما تدعى ()alert و هي تقوم بعرض نوافذ المحاذثة .
2. بنية الجافاسكربت
التعليمات
بنية الجافاسكربت بسيطة و سهلة ، هي عبارة عن تعليمات بحيث كل تعليمة يجب أن تنتهي بنقطة - فاصلة ; كما يوضح ما يلي :
instruction_1;
instruction_2;
instruction_3;
نسيان نقطة-فاصلة يعتبر كتطبيق سيء للبرمجة ، و هذا يؤثر على الكود ، في البداية قد تنسى هذه المسألة ، كما حذث لنا جميعا ، لذلك إن لم يشتغل سكربت ما لديك ، فخذ بعين الإعتبار أنك نسيت وضع نقطة-فاصلة في نهاية تعليمة ما .
السكربتات المضغوطة
بعض السكربتات نقول عنها مضغوطة ، فهي مكتوبة بشكل لا يسمح للعين غير المدربة بقرائتها ، حيث تجد التعليمات مكتوبة واحدة تلو الأخرى دون ترك فراغ أو الرجوع إلى السطر ، هذه المسألة تمكن من خفض حجم ملف الجافاسكربت إلى أدنى ما يمكن مما يسرع تحميل صفحات الويب ، ضغط السكربتات لا يتم يدويا فهناك العديد من البرامج التي تقوم بضغط السكربتات ، و لكي أشدد على مسألة النقطة-فاصلة فإننا إن نسينا ولو نقطة-فاصة واحدة فإن كودنا المضغوط لن يشتغل أبدا ، لأن البرامج التي تضغظ السكربتات لا تأخذ بعين الإعتبار مسألة النقطة-فاصلة .
الفراغات
الجافاسكربت ليست حساسة للفراغات ، أي أنه يمكننا ترتيب التعليمات بشكل أحسن باستخدام الفراغات :
instruction_1;
instruction_1_1;
instruction_1_2;
instruction_2; instruction_3;
الترتيب و التقديم
تقديم الكود مهم ، فخلال بعض الفصول القادمة ، سترى أن الكودات أصبحت كبيرة الحجم ، و بالتالي سيصعب إستيعابها ـ خاصة و أن لغة البرمجة لغة موجهة للحاسوب و ليس للإنسان نفسه - و بالتالي فلابد لنا من الإعتماد على الفراغات في بداية السطور ، مسألة الفراغات ليست مهمة جدا ، لكنها مع ذلك تبقى شيئا لا يغتنى عنه ، فيما يلي مثال صغير عن إستخدام الفراغات :
function toggle(elemID) {
var elem = document.getElementById(elemID);
if (elem.style.display == 'block') {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
}
لاحظ أن السطور مزاحة إلى اليمين قليلا بأربع فراغات ، نزيحها بهذه الطريقة لأنها تعليمات فرعية ، ففي الجافاسكربت يوجد بعض التعليمات المركبة التي تحتاج لعملها إلى عدة أسطر ، و لتمييز التعليمة الرئيسية من التعليمات الفرعية نزيح هذه الأخير بأربع فراغات ، قد تجد في بعض السكربتات أن الكاتب يزيح السطور الفرعية بفراغين فقط ، فعدد الفراغات ليس أمرا بتلك الأهمية الكبيرة لأنه و كما قلنا سابقا الجافاسكربت ليست حساسة للفراغات ، كل ما في الأمر أن الفراغات تعطي تقديما أنيقا للكود .
التعليقات
التعليقات هي فظاء يقوم عبره المبرمج بشرح طريقة إشتغال كوده ، أو بهدف إرشاد المبرمجين الاخرين إلى طريقة إستعمال كوده ...
طريقة إدخال التعليقات بسيطة جدا ، شاهد المثال التالي :
/* .................. هنا نضع التعليق .................. */
Instruction_1;
Instruction_2;
كما تلاحظ نضع التعليق بين /* و */ حيث نكتب شرحا أو تقديما أو حتى و في كثير من السكربتات نجد المبرمج يعرف بنفسه من خلال التعليق .
هناك نوع اخر من التعليقات حيث تكتبه بعد العلامتين // ، و لا توجد أي علامة أخرى للإغلاق .
Instruction_1; // ............ تعليق .............
Instruction_2; // ............ تعليق .............
في هذا النوع من التعليقات لا يمكننا الرجوع إلى سطر جديد ، فإذا رجعنا يجب أن تكتب // من جديد و إلا فلن يعتبر الحاسوب أن النص بمثابة تعليق .
3. أين أضع الكود في الصفحة
سكربتات الجافاسكربت توجد دائما داخل العنصر <script> ، يحتوي هذا العنصر على سمة نحدد فيها اللغة التي نقوم بكتابتها ، في حالتنا هذه نقوم بكتابة الجافاسكربت ، أما بصفة عامة فإنه يوجد لغات برمجة أخرى تكتب داخل العنصر <script> كالـVBScript و غيرها .
هذه السمة هي type و هي تأخذ عدة قيم ، في الـHTML 4 و الـ XHTML 1.x ، السمة type ضرورية و لا يمكن أن يشتغل السكربت بدونها ، أما بالنسبة للـHTML 5 و التي نشتغل بها حاليا فلا يهم إن أدخلنا السمة أم لا ، لأن المتصفحات أصبحة متطورة لدرجة أنها تتعرف على اللغة دون الحاجة إلى إخبارها عبر السمة type ، لإدخال كود الجافاسكربت في صفحة الـHTML ، الطريقة سهلة للغاية و لا شك أنك إكتشفتها من أول المقال ، ندخل الجافاسكربت داخل العنصر <script> ، حيث يكون العنصر <script> في رأس الصفحة <head> .
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
// هنا كود الجافاسكربت
</script>
</head>
<body>
</body>
</html>
و كما في الـCSS يمكن كتابة الجافاسكربت في ملف خارجي ثم جلبه إلى صفحة الـHTML ، و هذه الطريقة التي أنصح بها . يمكننا كتابة الجافاسكربت في ملف خارجي ذو إمتداد js.* ثم جلبه بواسطة سمة src يتم إدخالها في العنصر <script> .
نفترض أنه لدينا ملف جافاسكربت بإسم myscript.js ، سيكون عنصر <script> كالتالي :
<script src="myscript.js"></script>
و بالطبع عملية جلب ملف الجافاسكربت تتم بالنسبة لملف الـHTML ، أي أنه إذا كان ملف myscript.js داخل مجلد فرعي scripts فإننا سنكتب :
<script src="scripts/myscript.js"></script>
بالنسبة للعنصر <script> فأحسن مكان له هو في اخر رأس الصفحة ، أي مباشرة قبل وسم الغلق <head/> ، لكن و مع ذلك يمكننا وضعه في أي عنصر شئنا ، يمكن أن نضعه داخل العنصر <body> أو داخل عنصر فرعي كيفما كان .
4. بعض الأفكار
أوراق الغش
مصطلح غريب !! أو ربما مألوف جدا ، أوراق الغش أو cheat-sheet ، هي عبارة عن ملفات PDF أو Word أو حتى HTML تتوفر على أهم العناصر و الدوال و الأساسيات في كل لغة ، فبما أنه لا يمكن تذكر الكم الهائل من عناصر البرمجة و التصميم يتم الجوء إلى هذه الأوراق و إسترجاع كل شيء .
تحتوي هذه الأوراق على جداول منظمة و مرتبة لمختلف عناصر التصميم و البرمجة ، بحيث يمكن أن نجدد عدة أشكال و أنواع من هذه الأوراق ، حسب اللغة ، و حسب مستوى المبرمج أو المصمم ، و حسب العديد من الإعتبارات .
يقدم موقع cheat-sheets.org مجموعة عملاقة من أوراق الغش ، حسب اللغات و بالإصدارات أيضا . يمكنك تحميل ورقة الجافاسكربت من هذه الصفحة .
بالطبع لن تستطيع فهم أي شيء من تلك الأوراق ، لأنها مختصرة بشكل كبير جدا ، لهذا إحفظها في حاسوبك إلى إشعار اخر .
إختبر بسرعة بعض الأكواد
بينما تقرأ هذه الفصول قد تجد بعض الكودات التي تستدعي منك أن تجربها بنفسك ، سنضع أمثلة لبعض الكودات المهمة ، لكننا لن نضع أمثلة لكل شيء ، فبعض الكودات الصغيرة لا تستحق ، لذلك فإن أردت تجريبها بنفسك فيمكنك زيارة الموقع jsfiddle.net . يتيح لك هذا الموقع تجريب الكودات مباشرة دون الحاجة إلى كتابة صفحة HTML كاملة بجميع عناصرها ، و هذا شيء جميل .
