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

ما هي جافاسكريبت، حقاً؟

JavaScript ("JS" للإختصار)هي بشكل كامل لغة برمجة ديناميكية حيت, عندما تطبق على ملف HTML , يمكن أن توفر التفاعل الديناميكي على المواقع. تم اختراعه من قبل بريندان إيتش، المؤسس المشارك لمشروع موزيلا، ومؤسسة موزيلا، وشركة موزيلا.

جافا سكريبت متعددة الجوانب والاستعمالات بشكل لا يصدق. يمكنك البدء صغير، مع دوارات، معارض الصور، مخططات بيانية، والاستجابات لنقرات زر. مع المزيد من الخبرة، عليك أن تكون قادرا على خلق الألعاب، والرسوم المتحركة 2D و 3D الرسومات، تطبيقات شاملة لقاعدة البيانات، وأكثر من ذلك بكثير!

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

  • متصفح واجهات برمجة التطبيقات (APIs)  المدمج في متصفحات الويب، وتوفير وظائف مثل إنشاء HTML ديناميكيا ووضع أنماط CSS، وجمع وتلاعب في دفق الفيديو من كاميرا ويب المستخدم، أو توليد الرسومات 3D وعينات الصوت.
  •  APIs الطرف الثالث  يسمح للمطورين بدمج الوظائف في مواقعهم من موفري المحتوى الآخرين، مثل تويتر أو فاسيبوك.
  • أطر ومكتبات الطرف الثالث التي يمكن تطبيقها على HTML الخاص بك للسماح لك لبناء المواقع والتطبيقات بشكل أسرع.

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

أدناه سوف أعرض لكم لبعض جوانب اللغة الأساسية، وعليك أن تلعب أيضا مع عدد قليل من الميزات API المتصفح أيضا. إستمتع!

مثال "hello world"

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

ومع ذلك، لتصبح مرتاح مع جافا سكريبت أصعب قليلا من أن تصبح مرتاح مع HTML و CSS. قد تضطر إلى أن تبدأ صغيراً وتظل تعمل في خطوات صغيرة منسقة . للبدء، سنعرض لك كيفية إضافة بعض أساسيات جافا سكريبت إلى صفحتك، وإنشاء "hello world!" مثال (المعيار في أمثلة البرمجة الأساسية).

هام: إذا لم تكن متابعاً لبقية الدورة التدريبية، فيمكنك تنزيل شيفرة المثال هذا واستخدامه كنقطة بداية.

  1. أولا، انتقل إلى موقع الاختبار الخاص بك وإنشاء مجلد جديد يسمى 'scripts' (بدون علامات الاقتباس). ثم، داخل مجلد scripts الجديد الذي قمت بإنشائه، إنشاء ملف جديد يسمى main.js. إحفظه في مجلد scripts.
  2. بعد ذلك، في ملف index.html، أدخل العنصر التالي في سطر جديد قبل علامة الإغلاق <body/> مباشرة:
    <script src="scripts/main.js"></script>
  3. هذا بكل بساطة يعمل كما يعمل <link> للـCSS، يقوم بإضافة الجافاسكربت للصفحة، لترى التأثيرات على الصفحة.
  4. الآن اضف هذا الكود الى ملف main.js:
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. الآن تأكد أنك حفظت التعديلات على ملف HTML و الجافاسكربت. ثم قم بفتح ملف الHTML بالمتصفح، ينبغى ان تشاهد نتيجة مماثلة للصورة:

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

مالذي حدث؟

الآن العنوان اصبح "Hello world!" بإستخدام الجافاسكربت. فعلت ذلك بإستخدام دالة تسمى querySelector() لحفظ مرجع للعنوان وحفظه الى متغير يسمى myHeading. هذا قريب جدا لما تفعله بإستخدام CSS، اذا اردت ان تقوم بتعديل احد العناصر يجب اختياره مسبقا.

بعد ذلك، حددت قيمة خاصية textContent  للمتغير myHeading الى "Hello world!"

ملاحظة: جميع الخواص اللاتي استخدمتهن بالأعلى هي جزء من Document Object Model (DOM) API, الذي يسمح لك بالتعديل على الصفحات.

أساسيات اللغة ودورة بسيطة

لنتعلم بعض المميزات الأساسية بلغة الجافاسكربت، لتفهم كيف تعمل. نقطة مهمة هي أن اغلب المفاهيم تتشارك معها اللغات البرمجية الأخرى، لذلك اذا كسبت خبرة بهذه المفاهيم، يمكنك برمجة كل ما تريد!

مهم: في هذا الدرس، جرب بأن تكتب الأكواد في كونسول الجافاسكربت لترى ماذا تعمل. لمعرفة المزيد عن الكونسول القِ نظرة على هذا الدرس Discover browser developer tools.

المتغيرات

Variables هي مثل الصناديق نقوم بتخزين البيانات فيها. تبدأ اولا بتعريف المتغير بإستخدام كلمة var وبعدها تسميها بالإسم الذي ترغب به:

var myVariable;

ملاحظة: الفاصلة المنقوطة بنهاية السطر تعني أن السطر البرمجي ينتهي هنا; لكنها ليست مطلوبة الا اذا احتجت ان تدمج اكثر من سطر برمجي في سطر برمجي واحد. لذلك من الأفضل وما هو متعارف عليه ان تقوم بإضافة الفاصلة المنقوطة نهاية كل سطر برمجي لتفادي الأخطاء البرمجية الغير مقصودة. بالطبع هناك قواعد متى يفضل إستخدامها ومتى لا يفضل، للمزيد يمكنك الإطلاع على Your Guide to Semicolons in JavaScript.

ملاحظة: يمكنك تسمية المتغيرات بالإسم الذي تفضله. لكن هناك بعض الشروط التي ينبغي الإلتزام بها (إطلع على هذا الدرس variable naming rules). إذا ما كنت غير متأكد انه يمكنك استخدام اسم معين ام لا يمكنك إستخدام هذا الموقع يمكنك إستخدام هذا الموقع  للتأكد أن الإسم صالح للإستخدام.

ملاحظة: الجافاسكربت حساسة لحجم الحرف الإنجليزي, مثلا myVariable يعتبر متغير اخر عن myvariable . لذلك دائما اذا واجهت مشكلة تأكد من احجام حروف المتغيرات لديك.

بعد تعريف المتغير يمكنك إسناد قيمة إليه:

myVariable = 'Bob';

يمكنك ايضا أن تعرف المتغير وتسند إليه قيمه بنفس الوقت:

var myVariable = 'Bob';

يمكنك الحصول على قيمة المتغير بإستخدام إسم المتغير:

myVariable;

يمكنك أيضا تغيير قيمة المتغير متى ما أردت:

var myVariable = 'Bob';
myVariable = 'Steve';

بإمكانك تخزين انواع مختلفة من البيانات بالمتغيرات انواع البيانات:

نوع المتغير شرح مثال
String نص محاط بعلامات التنصيص var myVariable = 'Bob';
Number رقم, لاحظ أن الأرقام لا نحيطها بعلامات التنصيص var myVariable = 10;
Boolean قيمة صحيحة  true او خاطئة false هي كلمات خاصة بالجافاسكربت لا تحتاج علامات تنصيص var myVariable = true;
Array قائمة تحتوي على عدة بيانات بإسم متغير واحد var myVariable = [1,'Bob','Steve',10];
بإمكانك إستدعاء كل قيمة بالمصفوفة بهذا الشكل:
myVariable[0], myVariable[1], الخ.
Object بكل بساطة كل شيء بالجافاسكربت عبارة عن كائن. ويمكنك تخزينه بإسم متغير. تذكر ذلك وانت تتعلم var myVariable = document.querySelector('h1');
All of the above examples too.

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

التعليقات

يمكنك كتابة التعليقات كما تفعل بلغة الـCSS:

/*
أي شيء هنا يعتبر تعليق.
*/

اذا كان تعليقك لا يتكون الا من سطر واحد يمكنك إستخدام الطريقة السهلة التالية:

// هذا تعليق

العوامل الحسابية

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

العامل الحسابي شرح الرمز مثال
الجمع يستخدم لجمع الأرقام أو لدمج النصوص مع بعضهم البعض + 6 + 9;
"Hello " + "world!";
الطرح, الضرب, القسمة بالطبع تعمل كما تعمل بالرياضيات -, *, / 9 - 3;
8 * 2; // نستخدم رمز النجمة للضرب
9 / 3;

الإسناد

كما تعلمت مسبقا. نستخدم علامة يساوي واحدة لإسناد قيمة إلى متغير = var myVariable = 'Bob';
المساواة تقوم بإختبار قيمتين. اذا كانو متساويين تقوم بإرجاع قيمة صح true  وإذا كانت خاطئة تقوم بإرجاع قيمة خطأ false === var myVariable = 3;
myVariable === 4;
ليست, لا تساوي

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

!, !==

القيمة هنا صحيحة لأن myVariable تساوي 3 لكنها سترجع خطأ لأننا إستخدمنا علامة !

var myVariable = 3;
!(myVariable === 3);

هنا نجرب "هل المتغير myVariable لا يساوي 3".

لكنه سيرجع قيمة خاطئة لأن myVariable  تساوي 3

var myVariable = 3;
myVariable !== 3;

هناك الكثير للتعلم عن العمليات الرياضية بالجافاسكربت، لكن هذا كافي لهذه المرحلة.إطلع على Expressions and operators للمزيد.

ملاحظة: قد تحصل على نتائج غريبة عند إستخدام اكثر من نوع من البيانات بالعمليات الحسابية. لذلك كن حريص بأن تستخدم المتغيرات بشكل صحيح لتحصل على النتيجة المرادة. على سبيل المثال قم بكتابة "35" + "25" بكونسول الجافاسكربت، نتيجة غريبة أليس كذلك؟ لأن علامات التنصيص تقوم بتحويل الأرقام إلى نصوص لذلك عندما جمعتهم بالفعل انت قمت بدمج نصين وليس بجمع رقمين. لذلك جرب كتابة 35 + 25 بالكونسول وسترى النتيجة الصحيحة.

الشروط

الأكواد الشَرْطِيّة تسمح لك بإختبار شرط محدد فإذا كان صحيحا يقوم بتشغيل اكواد أخرى. وإذا كان خاطئا يقوم بتجاهل الأكواد. من أكثر الأكواد الشَرْطِيّة إستخداما هي if ... else  والمثال عليها:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

الكود الذي بداخل القوسين if ( ... ) هو الإختبار الشَرْطي. يمكنك كتابة الاختبارات بداخله مثال هل المتغير يساوي عدد معين او نص معين. بمالمثال قمنا بإختبار هل المتغير iceCream يساوي القيمة chocolate. بالطبع النتيجة صحيح كما هو واضح امامنا لذلك سيقوم بتشغيل السطور البرمجية بداخل الأقواس {}، لكن ماذا لو كان المتغير لا يساوي chocolate في هذه الحالة ستقوم الجافاسكربت بتشغيل السطور الموجودة بداخل الأقواس {}else.

الدوال

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

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

هذه الدوال, document.querySelector و alert, هي دوال جاهزة بالمتصفح يمكنك إستخدامها متى ما أردت.

إذا رأيت شيئا مشابها للمتغيرات لكنه ينتهي بقوسين () غالبا تعني انها دالّة. الدوال عادة تطلب arguments وهي عبارة عن بيانات تحتاجها الدالة لتأدي عملها المطلوب منها. هذه البيانات تكون داخل القوسين () ونقوم بإرسال عدة بيانات بالتفريق بينهم بعلامة الفاصلة , اذا ما دعت الحاجة لذلك.

على سبيل المثال دالة alert() وهي دالة تقوم بإبراز رسالة منبثقة للمستخدم داخل المتصفح. ونحتاج ان نعطيها النص المراد عرضه للمستخدم.

المميز بالموضوع انه يمكنك كتابة الدوال الخاصة بك. بالمثال التالي سنطلع على كيف يمكنك كتابة الدالة والتي تقبل بأن تأخذ رقمين وتقوم بإرجاع ناتج الضرب بينهم:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

قم بكتابة الكود بالأعلى بكونسول الجافاسكربت ثم قم بتجربة الدالة بإستخدام عدة ارقام، على سبيل المثال:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

ملاحظة: كلمة return تخبر الدالة ماذا ينبغي ان تقوم بإرجاعه اذا قمنا بإستدعائها.

الأحداث

لبناء صفحات ويب تفاعلية فإننا سنحتاج الى ما يسمى بالأحداث (Events). الفكرة بكل بساطة هي بأن تقوم بربط جزء معين من برنامج ليقوم بالعمل عند حدوث حدثٌ معين. أحد اهم الأحداث وأكثرها إستخداما هو حدث click event وهو يحدث عندما تقوم بالضغط على شيء ما بالفأرة. لنأخذ مثال بسيط يشرح حدث الضغط، قم بنسخ الكود التالي ولصقه بكونسول الجافاسكربت الخاص بك ثم قم بالضغط على أي مكان بالصفحة:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

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

لاحظ أن:

document.querySelector('html').onclick = function() {};

مثل:

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

لكنها بصيغة اقصر.

تحسين مثال الموقع الخاص بنا

الآن تعلمنا بعض بعض أساسيات الجافاسكربت، لنقم بإضافة بعض الخصائص الرائعة إلى موقعنا الذي تعلمنا عليه بداية الدرس.

إضافة خاصية إستبدال الصور

في هذا الجزء من الدرس. سنضيف صورة جديدة إلى موقعنا بإستخدام الجافاسكربت و DOM API للتبديل بين الصور عند الضغط على الصورة.

  1. بالبداية إبحث عن صورة تود عرضها بالصفحة. تأكد أن الصورة بنفس حجم الصورة السابقة او اقرب
  2. احفظ الصورة بمجلد images.
  3. غير إسم الصورة إلى firefox2.png.
  4. إفتح ملف main.js, وقم بكتابة الكود التالي بالملف. (إذا كنت تحتفظ بالكود بالأمثلة السابقة يفضل حذفه.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. احفظ جميع الملفات ثم قم بفتح ملف index.html بالمتصفح. الآن عندما تضغط على الصورة يجب ان تتحول إلى الصورة الأخرى!

كما تلاحظ بالكود فقد قمنا بحفظ مرجع إلى الصورة  <img> بإسم متغير myImage، بعد ذلك نقوم بربط حدث  onclick بدالة مجهولة (بدون اسم) لتعمل عن الضغط على الصورة، الدالة تقوم بعمل التالي:

  1. نقوم بجلب قيمة خاصية  src الخاصة بالصورة.
  2. ثم نقوم بالتأكد هل قيمة src الخاصة بالصورة تساوي رابط الصورة الأساسية :
    1. إذا كانت كذلك فنقوم بتغيير قيمة src بقيمة الصورة الثانية ليتم تحميلها بعنصر <img>.
    2.   لكن اذا كانت غير ذلك (بمعنى انه قد قمنا بتغيير القيمة) فسنقوم بإرجاع قيمة src إلى القيمة الأساسية.

إضافة رسالة ترحيبية مخصصة للمستخدم

الآن سنقوم بكتابة بعض السطور البرمجية لتغيير عنوان الصفحة إلى رسالة مخصصة للمستخدم. حيث سيقوم المستخدم بإدخال إسمه ثم نقوم بإضافة إسمه إلى العنوان عندما يقوم بالدخول إلى الصفحة. سنقوم بتخزين إسم المستخدم بخاصية تخزين البيانات الموجودة بالمتصفح التي تسمى Web Storage API. وسنقوم أيضا بإضافة خيار لتغيير إسم المستخدم.

  1. بملف index.html, قم بإضافة هذا السطر قبل عنصر <script>:
    <button>Change user</button>
  2. بملف main.js, قم بإضافة هذا الكود في آخر الملف كما هي، الكود يقوم بتخزين مرجع للزر والعنوان بمتغيرات:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. الآن قم بإضافة هذه الدالة التي تقوم بتخزين إسم المستخدم بقاعدة بيانات المتصفح:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    الدالة كما تلاحظ تقوم بإستخدام دالة  prompt() والتي تقوم بإظهار رسالة منبثقة للمستخدم مشابهه لدالة  alert() لكنها تطلب منه إدخال بعض البيانات. وتقوم بحفظ البيانات المدخلة في متغير اسمه myName عند الضغط على موافق، في هذه الحالة نحن نقوم بالطلب من المستخدم بكتابة إسمه بعد ذلك نقوم بإستخدام خاصية التخزين localStorage والتي تسمح لنا بتخزين وإسترجاع بيانات من المتصفح. نقوم بإستخدام دالة setItem  لإنشاء مفتاح بقاعدة البيانات بإسم name ومن ثم نقوم بتخزين إسم المستخدم بها. وأخيرا نقوم بتتغير نص العنوان لنقوم بإظهار إسم المستخدم به.
  4.  بعد ذلك نقوم بإستخدام دالة شَرطِيّة للتأكد ما اذا كان إسم المستخدم محفوظ مسبقا بقاعدة بيانات المتصفح سنسمي هذه السطور سطور بداية البرنامج لأنها ستعمل مع بداية عمل البرنامج:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    كما ترا الدالة الشرطية تقوم بالتأكد بأنه "لا" يوجد إسم في قاعدة بيانات المتصفح لأننا إستخدمنا علامة التعجب. فإذا لم يجد إسم في قاعدة البيانات فإنه سيبدأ بتشغيل دالة setUserName() التي كتبناها مسبقا ليطلب من المستخدم إسمه وتخزينه في قاعدة البيانات. لكن إذا كان الإسم موجود في قاعدة البيانات فسيتم جلبه بإستخدام دالة  getItem()، بعد ذلك نقوم بعرضه مع .العنوان
  5. أخيرا سنقوم بربط حدث الضغط على الزر onclick الذي قمنا بإنشاءه مسبقا بدالة مجهولة تقوم بتشغيل الدالة setUserName()  التي قمنا بكتابتها، هذه الطريقة تسمح للمستخدم بتغيير إسمه متى ما أراد:
    myButton.onclick = function() {
      setUserName();
    }
    

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

خاتمة

إذا كنت قد تابعت جميع التعليمات التي ذكرناها، فيجب ان تحصل على صفحة مشابهة للصورة بالأسفل (تستطيع تجرب نسختنا من هنا):

إذا واجهت مشاكل، يمكنك مقارنه عملك مع مثالنا المنشور على قيت هب.

إلى الآن لم نقم بتعلم الكثير عن الجافاسكربت ودائما هناك المزيد للتعلم عنها. إذا كنت قد إستمتعت بتعلمها فيمكنك التقدم بمتابعة الدروس، إطلع على دروس الجافاسكربت.

 

في هذا الدرس

 

Document Tags and Contributors

المساهمون في هذه الصفحة: Mohd-PH, zidanlab
آخر مَن حدّثها: Mohd-PH,