إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

خطوتك الأولى في الجافاسكربت

3 تعليقات

كما تعرفنا سابقا ، الجافاسكربت لغة برمجة تستخدم عادة مع لغة الـHTML . سوف نتعرف في هذا الفصل على طريقة إدخال لغة الجافاسكربت في صفحات الوب ، و سنتعرف على بنيتها الأساسية ، كما سنتعرف أيضا طريقة عرض نافذة المحاذثة على شاشة المستخدم باستخدام هذه اللغة .

بالنسبة لمحرر النصوص الذي نستخدمه عادةً هو ++NotePad بالنسبة للويندوز ، أما للذين يمتلكون نظام تشغيل اخر فيمكن إستخدام برنامج Vim بالنسبة للـLinux أو برنامج TextWrangler بالنسبة للماك .

الفهرس
  1. عرض نافذة المحاذثة .
  2. بنية الجافاسكربت .
  3. أين أضع الكود في الصفحة .
  4. بعض الأفكار .

عرض نافذة المحاذثة

Hello World

حفاظا على التقليد الخاص بدروس البرمجة ، سنبدأ أولا بالتعرف على طريقة عرض نافذة محاذثة تحتوي على الجملة الشهيرة Hello World . هذا هو الكود الذي يقوم بعمل النافذة حيث الجافاسكربت توجد داخل العنصر <script> :

<!DOCTYPE html>
<html>
<head>  
    <title>Hello World!</title>
    <script>
        alert('Hello world!');
    </script>
</head>
    <body>

  </body>
</html>

أكتب الكود أعلاه في صفحة HTML ، و قم بعرضها على متصفحك بالطريقة المعهودة ، ستفتح لك نافذة صغيرة تقول " Hello World " :


الجديد عندنا 
في الكود السابق ، نلاحظ بعض العناصر الجديدة علينا .
قبل كل شيء العنصر <script> موجود ، و هو العنصر الذي نكتب داخله كل لغة الجافاسكربت .
الكود الموجود داخل العنصر <script> هو :
alert('Hello world!');
إنه تعليمة ، أو طلب ، أو أمر ، إنه حذث يقوم الحاسوب بتحقيقه ، فلغات البرمجة عموما تتكون من مجموعة من التعليمات ، مع جمع كل تلك التعليمات في قالب منظم و متراص نحصل على سكربت كامل .

في المثال السابق نرى تعليمة وحيدة فقط : تسمى دالة ()Alert .

نافذة المحاذثة Alert
Alert عبارة عن تعليمة بسيطة ، و هي عبارة عن دالة ( fonction ) ، عمل هذه الدالة هو عرض نافذة محاذثة صغيرة تحتوي على رسالة نصية ، هذه الرسالة النصية تكون بين علامتي ' ' و داخل قوسين ( ) ، و مسألة القوسين و العلامات مهمة في لغة الجافاسكربت .

إلى الان نحن لم نبدأ بالأساسيات الكبيرة للغة جافاسكربت ، لذلك لا تقلق ، فالفقرة السابقة كانت مجرد تقديم ، أو تقليد  ، كل ما يجب تذكره هو أن هناك دالة ما تدعى ()alert و هي تقوم بعرض نوافذ المحاذثة .

بنية الجافاسكربت

التعليمات
بنية الجافاسكربت بسيطة و سهلة ، هي عبارة عن تعليمات بحيث كل تعليمة يجب أن تنتهي بنقطة - فاصلة ; كما يوضح ما يلي :
Instruction_1;
Instruction_2; Instruction_3;
Instruction_4;

نسيان نقطة-فاصلة يعتبر كتطبيق سيء للبرمجة ، و هذا يؤثر على الكود ، في البداية قد تنسى هذه المسألة ، كما حذث لنا جميعا ، لذلك إن لم يشتغل سكربت ما لديك ، فخذ بعين الإعتبار أنك نسيت وضع نقطة-فاصلة في نهاية تعليمة ما  .

السكربتات المضغوطة
بعض السكربتات نقول عنها مضغوطة ، فهي مكتوبة بشكل لا يسمح للعين غير المدربة بقرائتها ، حيث تجد التعليمات مكتوبة واحدة تلو الأخرى دون ترك فراغ أو الرجوع إلى السطر ، هذه المسألة تمكن من خفض حجم ملف الجافاسكربت إلى أدنى ما يمكن مما يسرع  تحميل صفحات الويب ، ضغط السكربتات لا يتم يدويا فهناك العديد من البرامج التي تقوم بضغط السكربتات ، و لكي أشدد على مسألة النقطة-فاصلة فإننا إن نسينا ولو نقطة-فاصة واحدة فإن كودنا المضغوط لن يشتغل أبدا ، لأن البرامج التي تضغظ السكربتات لا تأخذ بعين الإعتبار مسألة النقطة-فاصلة .

الفراغات
الجافاسكربت ليست حساسة للفراغات ، أي أنه يمكننا ترتيب التعليمات بشكل أحسن باستخدام الفراغات :
Instruction_1;
    Instruction_1_1;
    Instruction_1_2;
Instruction_2;
Instruction_3;

الترتيب و التقديم
تقديم الكود مهم ، فخلال بعض الفصول القادمة ، سترى أن الكودات أصبحت كبيرة الحجم ، و بالتالي سيصعب إستيعابها ـ خاصة و أن لغة البرمجة لغة موجهة للحاسوب و ليس للإنسان نفسه - و بالتالي فلابد لنا من الإعتماد على الفراغات في بداية السطور ، مسألة الفراغات ليست مهمة جدا ، لكنها مع ذلك تبقى شيئا لا يغتنى عنه ، فيما يلي مثال صغير عن إستخدام الفراغات :

function toggle(elemID) {
     var elem = document.getElementById(elemID);  
     if (elem.style.display == 'none') {
          elem.style.display = 'block';
     }
     else { elem.style.display = 'none'; }
}

لاحظ أن السطور مزاحة إلى اليمين قليلا بأربع فراغات ، نزيحها بهذه الطريقة لأنها تعليمات فرعية ، ففي الجافاسكربت يوجد بعض التعليمات المركبة التي تحتاج لعملها إلى عدة أسطر ، و لتمييز التعليمة الرئيسية من التعليمات الفرعية نزيح هذه الأخير بأربع فراغات ، قد تجد في بعض السكربتات أن الكاتب يزيح السطور الفرعية بفراغين فقط ، فعدد الفراغات ليس أمرا بتلك الأهمية الكبيرة لأنه و كما قلنا سابقا الجافاسكربت ليست حساسة للفراغات ، كل ما في الأمر أن الفراغات تعطي تقديما أنيقا للكود .

التعليقات
التعليقات هي فظاء يقوم عبره المبرمج بشرح طريقة إشتغال كوده ، أو بهدف إرشاد المبرمجين الاخرين إلى طريقة إستعمال كوده ...
طريقة إدخال التعليقات بسيطة جدا ، شاهد المثال التالي :

/* .................. هنا نضع التعليق .................. */
Instruction_1;
Instruction_2;

كما تلاحظ نضع التعليق بين /* و */ حيث نكتب شرحا أو تقديما أو حتى و في كثير من السكربتات نجد المبرمج يعرف بنفسه من خلال التعليق .
هناك نوع اخر من التعليقات حيث تكتبه بعد العلامتين // ، و لا توجد أي علامة أخرى للإغلاق .

Instruction_1; // ............ تعليق .............
Instruction_2; // ............ تعليق .............

في هذا النوع من التعليقات لا يمكننا الرجوع إلى سطر جديد ، فإذا رجعنا يجب أن تكتب // من جديد  و إلا فلن يعتبر الحاسوب أن النص بمثابة تعليق .

أين أضع الكود في الصفحة

سكربتات الجافاسكربت توجد دائما داخل العنصر <script> ، يحتوي هذا العنصر على سمة نحدد فيها اللغة التي نقوم بكتابتها ، في حالتنا هذه نقوم بكتابة الجافاسكربت ، أما بصفة عامة فإنه يوجد لغات برمجة أخرى تكتب داخل العنصر <script> كالـVBScript و غيرها .

هذه السمة هي type و هي تأخذ عدة قيم ، في الـHTML 4 و الـ XHTML 1.x ، السمة type ضرورية و لا يمكن أن يشتغل السكربت بدونها ، أما بالنسبة للـHTML 5 و التي نشتغل بها حاليا فلا يهم إن أدخلنا السمة أم لا ، لأن المتصفحات أصبحة متطورة لدرجة أنها تتعرف على اللغة دون الحاجة إلى إخبارها عبر السمة type ، أما بالنسبة للقيم التي تأخذها السمة 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> أو داخل عنصر فرعي كيفما كان .

بعض الأفكار

أوراق الغش
مصطلح غريب !! أو ربما مألوف جدا  ، أوراق الغش أو cheat-sheet ، هي عبارة عن ملفات PDF أو Word أو حتى HTML تتوفر على أهم العناصر و الدوال و الأساسيات في كل لغة ، فبما أنه لا يمكن تذكر الكم الهائل من عناصر البرمجة و التصميم يتم الجوء إلى هذه الأوراق و إسترجاع كل شيء .
تحتوي هذه الأوراق على جداول منظمة و مرتبة لمختلف عناصر التصميم و البرمجة ، بحيث يمكن أن نجدد عدة أشكال و أنواع من هذه الأوراق ، حسب اللغة ، و حسب مستوى المبرمج أو المصمم ، و حسب العديد من الإعتبارات .
يقدم موقع cheat-sheets.org مجموعة عملاقة من أوراق الغش ، حسب اللغات و بالإصدارات أيضا . يمكنك تحميل ورقة الجافاسكربت من هذه الصفحة .
بالطبع لن تستطيع فهم أي شيء من تلك الأوراق ، لأنها مختصرة بشكل كبير جدا ، لهذا إحفظها في حاسوبك إلى إشعار اخر .

إختبر بسرعة بعض الأكواد
بينما تقرأ هذه الفصول قد تجد بعض الكودات التي تستدعي منك أن تجربها بنفسك ، سنضع أمثلة لبعض الكودات المهمة ، لكننا لن نضع أمثلة لكل شيء ، فبعض الكودات الصغيرة لا تستحق ، لذلك فإن أردت تجريبها بنفسك فيمكنك زيارة الموقع jsfiddle.net . يتيح لك هذا الموقع تجريب الكودات مباشرة دون الحاجة إلى كتابة صفحة HTML كاملة بجميع عناصرها ، و هذا شيء جميل .
مساحة إعلانية

تعليقات بلوجر

  1. موضوع مفيد جدا اريد ان اسألك وارجوا ان تجيبني ماهي لغة تصميم قوالب بلوجر لاني بدي ادرسها يعني بدي اصصم قالب مثل مدونة يونس او مثل مدونتك ما هي اللغة التي يجب علي تعلمها لكي اتقن تصميم القوالب شكرا انتظر ردك

    ردحذف
    الردود
    1. في الواقع لغة قوالب بلوجر هي الـXML ، و هي لا تحتاج إلى إتقان كبير .
      كل ما يجب أن تعرفه هو الـHTML و الـCSS ، و بعض التعليمات في الـXML ستكون كافية

      حذف
  2. عندي سوال لو سمحت ممكن تساعدني فيه هذا هو
    (اكتب برنامجبلغة الجافا سكربة لتحديد ما اذاكان العدد اولي او لا)
    ولك جزيل الشكر

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة