بدايتك في لغة الجافاسكربت Javascript

تحية الى كل زوار المدوة و متابعيها.. مرحبا في درس جديد من دروس الجافاسكريبت المقدمة حصريا على المدونة.. في الدرس السابق تعرفنا على أن الجافاسكربت لغة برمجة تستخدم عادة مع لغة الـ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 كاملة بجميع عناصرها ، و هذا شيء جميل .

شكرا لزيارتك

بدايتك في لغة الجافاسكربت Javascript

0 التعليقات:

اذكر الله

اكثر المواضيع تصفحا خلال هذا الشهر

المتابعون

اكثر المواضيع تصفحا خلال هذا الاسبوع