21/02/2024
اساسيات جافا سكريبت للمبتدئين

اساسيات جافا سكريبت للمبتدئين شرح مبسط باللغة العربية

شرح مبسط باللغة العربية لاساسيات البرمجة بالجافا سكريبت JavaScript للمبتدئين، حيث بتعلمك للجافا سكريبت سيسهل عليك بعد ذلك تعلم أي لغة برمجة بسرعة كبيرة. لأن غالبية لغات البرمجة متشابهة من حيث الوظائف وطريقة كتابة الكود. ولغة جافا سكريبت مرنة جداً في التعامل وسهلة التعلم كما ذكرنا.

في هذا المقال “اساسيات جافا سكريبت للمبتدئين” وقبل تعلم الجافا سكريبت يجب أن يكون لديك معرفة متوسطة بكل من HTML و CSS.
يمكنك تعلم البرمجة بلغة HTML و CSS من هنا

أين تتم كتابة أكواد جافا سكريبت؟

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

الطريقة الأولى: داخل ملف HTML.

يتم ذلك بوضع الكود بين وسمي الفتح والإغلاق للعنصر script، كما يوضح الكود التالي:

<script>
        document.getElementById('test').innerHTML="I am a javascript programmer";
</script>

الكود السابق يقوم بتغيير محتوى العنصر الذي يحمل id باسم test إلى النص I am a javascript programmer.

اساسيات جافا سكريبت للمبتدئين

من الممكن وضع كود جافا سكريبت في أي مكان بين عناصر الصفحة في ملف Html. لكن يفضل كتابته في نهاية الصفحة كما هو موضح في الصورة السابقة لضمان عدم تعطل الصفحة في حالة حدوث أي أخطاء.

توضيح:

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

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

الطريقة الثانية: وضع كود جافا سكربت في ملف خارجي External file

في الواقع هذه الطريقة تعتبر الطريقة المفضلة خاصة إذا كانت الأكواد كبيرة جداً. في هذه الحالة تحتاج إلى إنشاء ملف بامتداد js ووضع الكود بداخله وحفظه في مسار خارجي. واستدعاء هذا الملف داخل صفحة Html، كما توضح الخطوات التالية:

على افتراض أننا سنقوم بوضع كافة أكواد جافا سكريبت في ملف باسم main.js موجود في نفس مسار ملف الـHTML.

  1. نقوم بمناداة ملف الجافا سكريبت في HTML، يتم ذلك بكتابة مسار ملف الجافا سكريبت ضمن الواصفة src للوسم script كما يلي:
<script src="main.js"></script>
اساسيات جافا سكريبت للمبتدئين

ننشئ ملف جديد بامتداد js، في مثالنا هذا أنشأنا ملف باسم main.js وهو نفس اسم الملف الذي تم تحديده في الكود السابق، ثم وضعنا الكود التالي داخل هذا الملف.

document.getElementById('test').innerHTML="I am a javascript programmer";
ملحوظة:

لاحظ أن كتابة الأكواد في الملف الخارجي للجافا سكريبت تتم بشكل مباشر، دون الحاجة لإضافة الأكواد بين وسمي:

<script></script>

كما يجب الانتباه إلى مسار الملف جيداً، فالملف السابق يجب وضعه جنباً إلى جنب مع ملف HTML. أما عند وضع الملف داخل مجلد آخر باسم script مثلاً، فإن اسم الملف الممرر داخل ملف HTML سيكون عندها بالشكل التالي:

<script src="script/main.js"></script>

طرق عرض البيانات أو المخرجات في الجافا سكريبت JavaScript Output:

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

1- داخل عناصر HTML أو ما يعرف باسم DOM

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

يطلق على عناصر HTML اسم DOM اختصاراً لـ Document Object Model والتي تعني عناصر Html في الصفحة مثل (head, body, p, div) وأي عنصر آخر داخل الصفحة.

من أمثلة وطرق التعديل على عناصر HTML عن طريق DOM:

  • element.innerHTML ← تستخدم لتغير عناصر Html داخل عنصر أب
  • element.innerText ← تستخدم لتغيير النصوص داخل العناصر
  • element.style.property ← لتغيير ستايل أو مظهر أي عنصر يتم تغيير كلمة property بأي عنصر css مثل color أو background…. إلخ
  • document.createElement(element) ← لإنشاء عنصر جديد في الصفحة. يتم تغيير كلمة element بالعنصر المراد إنشاؤه مثل div أو p أو … إلخ
  • document.appendChild(element) ← لوضع عنصر جديد داخل عنصر أب
  • document.write(text) ← لتغيير جميع محتوى الصفحة بنص جديد
  • document.getElementById(id) ← للبحث عن عنصر يملك id معين
  • document.getElementsByClassName(name) ← للبحث عن عنصر يملك class معين.

مثال توضيحي:

document.getElementById("test").innerHTML = "New text!";

الكود السابق يغير عناصر HTML داخل العنصر الذي يحمل id بالقيمة test. وتجدر الإشارة إلى أن كلمة document هي أحد عناصر الـ DOM وتعني الصفحة بالكامل (المستند)، وكلمة getElement أحد عناصر DOM وتعني جلب العنصر، وكلمة ById تعني بواسطة الـ id.

توضيح:

إذا ترجمنا الكود السابق نصياً فإنه يكون كالتالي، ابحث في كامل الصفحة وهو ما يشير إليه document، عن العنصر الذي يحمل id معين وهو ما يشير إليه getElementById(“test”)، وغير محتوى هذا العنصر وهو ما يشير إليه innerHTML.

يمكن تغيير innerHTML بـ innerText لتغير النص المعروض داخل العنصر فقط. أما innerHTML فهي تغير جميع ما في العنصر بما في ذلك أكواد HTML وليس النصوص فقط.

يمكن أيضاً جلب العنصر بواسطة اسم الكلاس Class الخاص به وذلك باستبدال تعليمة getElementById بالتعليمة getElementsByClassName كما يمكن اختيار العنصر أيضاً باستخدام نفس طريقة اختيار العناصر في CSS كما يوضح المثال التالي:

document.querySelector('#id')

بحيث يمكنك كتابة id أو class العنصر بدل كلمة #id مثلها تماماً مثل اختيار أي عنصر في CSS. بحيث يكون الاختيار بالـ id كما وضحنا، والاختيار عن طريق الـ class بالشكل التالي:

document.querySelector('.class')
ملحوظة:

في حالة getElementById أو getElementsByClassName نكتب id أو class العنصر بشكل مباشر بدون علامة (#) أو (.)
أما في حالة querySelector فإننا يجب أن نوضح فيما إن كان العنصر يحتوي على id أو class بواسطة (#) في حالة id و (.) في حالة class.

2- في مربع تنبيه Alert

مربع alert هو مربع تنبيه حواري يظهر أعلى الموقع لينبهك بحدث معين. ويحتوي على زر للموافقة OK، يتم تمثيل كود مربع التنبيه بالشكل التالي:

 window.alert("New text");

أو يمكن اختصاره بالشكل التالي:

alert("New text");

3- في كامل صفحة HTML

هذه الطريقة تقوم بحذف جميع العناصر الموجودة بالصفحة وتطبع فقط الجملة أو العناصر الموجودة بالكود. ويتم تمثيل الكود بالشكل التالي:

document.write("New text");

4- في وحدة تحكم المتصفح Console (اساسيات جافا سكريبت للمبتدئين)

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

console.log("New text");

للوصول إلى وحدة تحكم المتصفح، انقر بزر الماوس الأيمن على أي صفحة، ثم اختر Inspect. ثم اختر التبويب console كما توضح الصورة التالية:

المتغيرات Variables والثوابت – اساسيات جافا سكريبت للمبتدئين

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

  • var ← تستخدم للتصريح عن متغير جديد ويمكن إعادة تغيير قيمته أو إعادة التصريح عنه مرة أخرى.
  • let ← وهي كلمة جديدة تم إضافتها في إصدار ES6 (2015) وتعد بديلاً لسابقتها إلا أنها لا تمكنك من إعادة التصريح عن المتغيرات بنفس أسماء المتغيرات المستخدمة بها مرة أخرى.
  • const ← وتستخدم للتصريح عن الثوابت التي لا تحتاج لأن تتغير قيمها خلال البرنامج.

أمثلة توضيحية على المتغيرات (اساسيات جافا سكريبت للمبتدئين):

على اعتبار أن لدينا منتج يتم عرضه في 10 صفحات، هذا المنتج له سعر، ونسبة ضرائب وسعر للشحن. فإذا أردنا تغيير سعر المنتج فهل يتوجب علينا تغيير السعر في 10 صفحات؟

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

الكود التالي يوضح المهمة:

var prodPrice = 20;
var tax = 3;
var dlvryCost = 2;
 document.getElementById('test').innerHTML= prodPrice + tax + dlvryCost;

إذا جربت الكود السابق فإن الناتج سيكون: 25

توضيح:
  • في السطر الأول قمنا بتعريف متغير prodPrice لتخزين سعر المنتج ووضعنا فيه أو أسندنا له القيمة 20.
  • وفي السطر الثاني عرفنا متغير آخر tax لتخزين قيمة الضريبة وأسندنا له القيمة 3.
  • وفي السطر الثالث عرفنا متغير لسعر الشحن وهوdlvryCost وأسندنا له القيمة 2.
  • وفي السطر الأخير أضفنا كود ليخرج نتيجة جمع الثلاث متغيرات معاً وطباعة النتيجة في عنصر الـHTML الذي يملك id باسم test.

بالطبع يمكنك استخراج النتائج بأحد طرق الإخراج الأخرى التي وضحناها بالأعلى. كما يمكن على سبيل المثال استخدام رسالة التنبيه alert لعرض النتيجة بدلاً من innerHTML بالشكل التالي:

alert(prodPrice + tax + dlvryCost);

ستكون النتيجة في هذه الحالة كما توضح الصورة بالأسفل:

اساسيات جافا سكريبت للمبتدئين

طريقة استخدام المتغيرات في الجافا سكريبت (اساسيات جافا سكريبت للمبتدئين):

  1. التصريح عن المتغير/أو الثابت باستخدام الكلمة المحجوزة التي تعبر عن المتغيرات كما وضحنا وهي إما var أو let أو const بحسب الحاجة. يفضل استخدام let للمتغيرات و const للثوابت التي تحتوي على معلومات لن تتغير أبدًا.
  2. كتابة اسم للمتغير، اسم المتغير في جافا سكريت أن يبدأ بحروف أو _ أو- أو$ فقط. ويمكن أن يحتوي اسم المتغير على أرقام في وسطه أو آخره فقط.
  3. مع ضرورة الانتباه أن أسماء المتغيرات حساسة لحالة الأحرف فالمتغير myname لا يساوي المتغير myName.
  4. إسناد قيمة للمتغير، يمكن إسناد قيمة إلى أي متغير باستخدام علامة (=) التي تعرف باسم معامل الإسناد (Assignment operator) ثم كتابة القيمة المطلوبة. تجدر الإشارة أنه من الممكن التصريح عن المتغير في البداية دون إسناد قيمة له بالشكل التالي:
    var prodPrice
  5. ثم بعد ذلك يتم إسناد القيمة له لاحقًا في أي مكان من الكود، بحيث يمكن للمتغير الواحد أن يخرج مخرجات مختلفة بحسب المطلوب منه. حيث يمكن إسناد قيمة للمتغير بعد التصريح به مثل حالتنا هذه بالشكل التالي:
    prodPrice = 20
  6. لاحظ أننا لم نكتب الكلمة المحجوزة var في أخر سطر كود كتبناه، لأننا سبق وصرحنا عن المتغير. فالتصريح عن المتغير يتم مرة واحدة فقط في كل object.
  7. وتذكر أننا في حال قمنا بالتصريح عن نفس المتغير مرة أخرى باستخدام let فسوف نحصل على خطأ يوضح أن المتغير سبق وأن تم التصريح عنه من قبل.
تأكد من إنهاء السطر بوضع علامة الفاصلة المنقوطة Simicolon (;)

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

لعرض القيمة المخزنة في المتغير:

نقوم بكتابة اسمه مباشرة دون أي علامات تنصيص مفردة أو مزدوجة، كما يمكن دمجه أو جمع قيمته مع قيمة متغير آخر باستخدام علامة (+) التي تسمى معامل الجمع (Addition operator). ليس ذلك فحسب بل يمكن إجراء كافة العمليات الحسابية عليه بسهولة باستخدام معاملات الحساب العادية المعروفة مثل (- للطرح و * للضرب و / للقسمة).

أنواع البيانات في جافا سكريبت JavaScript Data Types

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

النصوص Strings – اساسيات جافا سكريبت للمبتدئين

لإسناد نص إلى متغير يجب كتابة النص المطلوب بين علامتي التنصيص المزدوجة (“TEXT HERRE”) أو المفردة (‘TEXT HERE’) كما يوضح المثال التالي:

var myText = "TEXT HERE";

أو

var myText = 'TEXT HERE';

الأرقام Numbers، لإسناد رقم لأي متغير يتم كتابة الرقم مباشرة، دون علامتي التنصيص المفردة أو المزدوجة كالتالي:

var myNum = 20;

ملحوظة: إذا تم وضع الرقم بين علامتي تنصيص فإنه في هذه الحالة يعتبر نصًا string وليس رقمًا number ولن تتمكن من إجراء العمليات الحسابية عليه إلا بعد تحويله لرقم.

القيم المنطقية Booleans – اساسيات جافا سكريبت للمبتدئين

في جافا سكريبت -وجميع لغات البرمجة الأخرى- هناك قيمتان منطقيتان لا غير. فإما أن يكون العنصر صحيحًا (TRUE) وإما أن يكون خاطئًا (FALSE).
ولتمثيل ذلك في مثالنا السابق:

var prodPrice = 20;
var tax = 3;
 alert(prodPrice === tax);

العلامة (===) تسمى معامل المقارنة (Comparison operator) وهي تستخدم للمقارنة بين قيمتي متغيرين وترجع قيمة منطقية إما true في حالة تساوي القيمتين في القيمة وفي نوع البيانات، أو false في حالة عدم التساوي. وهي مختلفة عن علامة الإسناد (=) التي ترفق قيمة جديدة إلى متغير.

عندما يتم تنفيذ الكود السابق فإن النتيجة ستكون false، لأن الكود السابق يختبر فيما إذا كانت قيمة المتغير prodPrice تساوي قيمة المتغير tax، أو بالأحرى نقول له هل 20 تساوي 3. لاحظ صورة نتيجة تشغيل الكود السابق:

ملاحظة:

هناك معامل مقارنة آخر يستخدم للمقارنات المنطقية هو المساواة الثنائية (==) وهو يعتبر أقل صرامة من المعامل (===) فإذا كانت القيم المتغيرة من أنواع مختلفة ولها نفس القيمة مثلاً العدد 38 والنص “38” فإن القيم تعتبر متساوية وسنحصل على النتيجة true إذا قارنها باستخدام المعامل (==)

المصفوفات Arrays – اساسيات جافا سكريبت للمبتدئين

المصفوفة هي متغير من نوع خاص، يمكن أن يحتوي على أكثر من قيمة في وقت واحد. يمكن التصريح عن المصفوفات بعدة طرق لكن الطريقة المفضلة هي استخدام الأقواس المربعة [] بالصيغة التالية:

لإنشاء مصفوفة ثابتة تخزن أسماء الأصدقاء سأكتب التالي:

const myFriends = ["ahmed", "mahmoud", "aly", "khadija"];
 alert(myFriends);

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

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

تفهرس المصفوفات في جافا سكربت على أساس صفري ( zero-based) بمعنى أن العنصر الأول ahmed له index يساوي 0 والعنصر الثاني mohamed له index يساوي 1..وهكذا إلى آخر المصفوفة.

وبالتالي تسمح لك قيمة الفهرس بالوصول إلى كل عنصر من العناصر داخل المصفوفة الخاصة بك. حيث يمكن استخراج قيمة العنصر الموجود في أي دليل بوضع [index] بعد اسم المصفوفة.

ففي المثال السابق يمكننا طباعة كل قيمة من القيم المخزنة في مصفوفتنا myFriends في سطر مستقل من خلال الكود التالي:
const myFriends = ["ahmed", "mahmoud", "aly", "khadija"];
 document.getElementById('test').innerHTML = myFriends[0] + "</br>";
 document.getElementById('test').innerHTML += myFriends[1] + "</br>";
 document.getElementById('test').innerHTML += myFriends[2] + "</br>";
 document.getElementById('test').innerHTML += myFriends[3] + "</br>";

لاحظ أننا استخدمنا هنا عنصر الـ DOM الذي تحدثنا عنه innerHTML لطباعة النتيجة في صفحة HTML داخل العنصر الذي يحمل id باسم test. لاحظ أيضاً أننا استخدمنا العلامة (+=) التي تسمى معامل إسناد الإضافة (Addition assignment) بعد عرض أول نتيجة لأن (=) فقط تقوم بحذف محتويات العنصر السابقة وإسناد القيمة الجديدة فقط أما (+=) فإنها تضيف القيمة الجديدة إلى عنصر HTML دون حذف المحتوى السابق منه.

يستخدم الرمز br لإضافة سطر جديد في HTML. ولدمج أي قيمتين معاً نستخدم علامة الجمع (+) فإن كانت القيم أرقام يتم جمعهم معاً. أما إن كانت قيماً نصية فيتم دمج القيم معاً. نتيجة المثال السابق تكون كالتالي:

بالطبع يفضل طباعة عناصر المصفوفات Arrays باستخدام أحد حلقات التكرار (for loop، forEach، While، Do While) التي توفر لنا طرقًا متنوعة للتنقل عبر عناصر المصفوفة. كما سنوضح ذلك بعد قليل عند شرح البنى التكرارية في جافا سكريبت.
الكائنات Objects

تعتمد جافا سكريبت كما ذكرنا في المقدمة مبدأ البرمجة الشيئية OOP

حيث تمكننا من تعريف كائنات أو أغراض (Objects) ضمن البرنامج. حيث يتألف الكائن من مجموعة من الخصائص. بحيث أن كل خاصية تكون بشكل زوج مكون من (مفتاح أو اسم الخاصية Key، وقيمة الخاصية Value)

كما تلاحظ الكائنات تشبه إلى حد ما المصفوفات Arrays (في الواقع المصفوفات هي نوع خاص من الكائنات) إلا أن الكائنات يتم تمثيلها بين قوسين متعرجين {} ويكون لكل عنصر من عناصرها مفتاح وقيمة. وبدلاً من كتابة الدليل index يتم كتابة المفتاح Key متبوعًا بنقطتين (:) ثم قيمة هذا المفتاح.

أيضا لغة جافا سكريبت تحتوي على عدد من الكائنات المعرفة مسبقًا والتي يمكن إستخدامها مباشرة (مثل كائن التاريخ Date، وكائن المصفوفة Array كما ذكرنا..) بالإضافة إلى ذلك، يمكنك إنشاء وتعريف الكائنات الخاصة بك. على سبيل المثال لإنشاء كائن يمثل المستخدم user ويملك 4 خصائص هي (الاسم والكنية والعمر والجنس) نكتب الكود التالي:

const user = {firstName:"Mahmoud", lastName:"Hassan", age:31, gender:"Male"};
 document.getElementById('test').innerHTML = "Name: " + user.firstName + " " + user.lastName + "</br>";
 document.getElementById('test').innerHTML += "Age: " + user.age + "</br>";
 document.getElementById('test').innerHTML += "Gender: " + user.gender + "</br>";

لاحظ أننا استخدمنا علامتي [] للتعبير عن المصفوفات Arrays، في حين استخدمنا علامتي {} للتعبير عن المتغيرات . لاحظ أيضاً أن الكائن object يجب أن يكون له مفاتيح keys تعبر عن القيمة المخزنة فيه مثل firstName و lastName و age و gender.

ولعرض قيمة أي مفتاح من تلك المفاتيح يتم كتابة اسم الكائن object وهو في مثالنا user متبوعاً بنقطة (.) ثم المفتاح key. في المثال السابق لمعرفة اسم الشخص يتم تمثيل ذلك كما يلي:
user.firstName

تكون نتيجة تنفيذ الكود السابق كما يلي:

ملحوظة:

يمكن أن تكون قيمة الخاصية دالة Function بدلاً من أن تكون متغيرًا. وسنشرح لك بالتفصيل مفهوم الدوال في جافا سكريبت في الفقرة التالية.

أعتقد أنك الآن تفهم الفرق بين كل من المصفوفات Arrays والكائنات Objects، وتعرف أن علامة الجمع (+) تستخدم للجمع في حالة كانت القيم أرقام وللدمج في حالة كانت القيم شيء آخر. وأن علامتي (+=) تضيف قيمة جديدة إلى العنصر دون حذف القيم القديمة أما علامة (=) فإنها تستبدل القيمة القديمة بقيمة جديدة، وعلامة تستخدم (===) للمقارنة بين عنصرين.

ملحوظة:

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

document.getElementById('test').innerHTML = typeof(user);

ستكون النتيجة: object

تدريب: قم بكتابة متغيرات تحمل أنواعًا مختلفة من البيانات واعرف كل نوع متغير باستخدام typof كما تعلمت. فمعرفة نوع البيانات مهم جداً في أي لغة برمجة كما أن الكائنات Objects والمصفوفات Arrays من أهم ما يجب تعلمه. فالجافا سكريبت تعتمد عليهم بشكل أساسي. حتى النصوص يتم التعامل معها بنفس المبدأ أيضاً. بحيث أن كل حرف في أي سلسلة نصية يكون له رقم index يمكن تغييره أو حذفه بواسطته.

حلقات التكرار Loop – اساسيات جافا سكريبت للمبتدئين

الغرض من حلقات التكرار هو تكرار تنفيذ مجموعة من التعليمات عدة مرات. كما أنها تستخدم بشكل أساسي مع المصفوفات والكائنات بهدف الوصول لكافة عناصر هذه المصفوفات والكائنات. كأن تقوم بعمل حلقة تستخرج جميع الصور في الموقع. أو تستخرج جميع النصوص التي تحتوي على كلمة معينة. يمكن أيضا تقوم بعمل سلايدر متحرك يكرر عرض مجموعة من الصور أو الرسومات. أو تقوم بجلب محتوى الصفحة من api باستخدام ajax أو json وغيرها من المهام..

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

حلقة التكرار البسيطة for loop:

إن أبسط شكل لأي حلقة هو تكرار الاوامر بعدد محدد من المرات ( من رقم محدد، إلى رقم محدد آخر).
على سبيل المثال لطباعة الأرقام من 0 إلى 10 نقوم بكتابة كود الطباعة باستخدام حلقة التكرار for loop كما يلي:

for(let i =0; i <= 10; i++){
    output.innerHTML += i + '<br>';
}

الكود السابق بسيط جداً في البداية نبدأ بكتابة كلمة for ثم يليها القوسين () داخل القوسين يتم التصريح عن متغير وإعطاؤه قيمة ابتدائية ليبدأ منها (يسمى هذا المتغير عداد الحلقة) وفي حالتنا أنشأنا متغير باسم i وأسندنا له الرقم 0 ليكون بداية حلقة التكرار ثم وضعنا فاصلة منقوطة (;).

في الجزء الثاني داخل القوسين وضعنا شرط إنهاء الحلقة أو توقفها عن العمل. وهو عندما تكون i أصغر أو تساوي 10.
بعد ذلك طلبنا أن تتم زيادة عداد الحلقة i بقيمة محددة وهي هنا 1 وذلك عند كل تكرار أو دورة للحلقة. وهو ما تعبر عنه علامتا الزائد بعد عداد الحلقة i++ (يمكن أيضاً استخدام 1+i كلاهما صحيح). ثم فتحنا قوسين معكوفين {} وطلبنا طباعة قيمة i في كل دورة داخل ملف HTML كما وضحنا سابقاً.

ملحوظة:

من المهم جداً تحديد نقطة النهاية لكل حلقة. وإلا لن تتوقف الحلقة وسيكون لدينا حلقة لا نهائية (infinite loop) تسبب تجمد المتصفح وربما الجهاز بالكامل.

أليس ذلك رائعًا، افترض أن لديك عنصر select في HTML يعبر عن قائمة منسدلة تمكن المستخدم من تحديد عام ميلاده. وتريد إضافة مجموعة أعوام محددة إليها (من عام 1900 إلى عام 2021). هل ستقوم بكتابة كود الإضافة يدوياً من أجل كل عام؟ بالطبع إن فكرت على طريقة المبرمجين فإن الإجابة ستكون حتماً لا. لكن يمكنك بدلاً من ذلك تنفيذ الكود التالي لتتم عملية الإضافة بكل بساطة كالتالي:

let output = document.getElementById('date-of-birth');
for(let i =1900; i <= 2021; i++){
    output.innerHTML += '<option value="'+i+'">' +i+ '</option>';
}

الصورة التالية توضح شكل كود HTML:

اساسيات جافا سكريبت للمبتدئين

الصورة التالية توضح نتيجة تنفيذ الكود:

بالعودة إلى المصفوفات . هل تذكرت أخر ما قلناه في شرح المصفوفات Arrays . وهو أن أفضل طريقة للوصول لعناصر المصفوفة هي من خلال حقات التكرار. كما شرحنا سابقًا فإن المصفوفة تحتوي على مجموعة من العناصر أو القيم التي قمنا بتمريرها داخل علامتي [] . وكل عنصر من هذه العناصر يكون له index يدل على موقعه في المصفوفة. فالعنصر الأول يحمل الدليل 0 والثاني الدليل 1 …. إلخ.

وبالرجوع لمثال المصفوفات فإن أفضل طريقة لاستخراج أو عرض كل القيم التي تحتويها مصفوفتنا myFriends هو باستخدام حلقة التكرار for loop.

لاحظ المثال التالي:
let output = document.getElementById('test');
const myFriends = ["ahmed", "mahmoud", "aly", "khadija"];
for(let i=0; i < myFriends.length; i++){
    output.innerHTML += myFriends[i] + '</br>';
}

الكود السابق سيقوم بإخراج أو عرض جميع العناصر في المصفوفة myFriends كما فعلنا سابقاً. ولكن كان الكود السابق طويلاً جدًا.

لاحظ هنا أن العبارة myFriends.length تعطينا طول المصفوفة فكلمة length هي خاصية هامة من خصائص المصفوفات وستحتاجها بشكل متكرر لمعرفة طول المصفوفات والسلاسل النصية وما إلى ذلك. وقد استخدمناها هنا لنخبر حلقة التكرار أن تتوقف عندما تصبح قيمة عداد المصفوفة i أصغر تمامًا من طول المصفوفة (لماذا لم نقل أصغر من أو يساوي؟)

لأن طول المصفوفة عبارة عن عدد عناصرها وهو في مثالنا يساوي 4. بينما دليل index المصفوفة يبدأ برقم 0 أي أن العنصر رقم 1 يكون له دليل أو index يساوي 0 والعنصر رقم 2 له دليل 1 وهكذا.. وبالتالي دليل آخر عنصر سيكون عبارة عن طول المصفوفة ناقص 1.

حلقة التكرار for in – اساسيات جافا سكريبت للمبتدئين

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

لفهم الفرق بين هذين الحلقتين لاحظ كيفية تنفيذ المثال السابق:

let output = document.getElementById('test');
const myFriends = ["ahmed", "mahmoud", "aly", "khadija"];
for(let i in myFriends){
    output.innerHTML += myFriends[i] + '</br>';
}

ستكون نتيجة تنفيذ هذا الكود مماثلة تماماً للكود السابق، وهي كالتالي:

حلقة التكرار for of – اساسيات جافا سكريبت للمبتدئين

مثل سابقتيها إلا أنها تكتب بشكل أكثر اختصارًا، وهي كذلك تقوم بالالتفاف حول النصوص، المصفوفات، الكائنات وأي عنصر قابل للتكرار. ويتم تمثيلها بالشكل التالي:

let output = document.getElementById('test');
const myFriends = ["ahmed", "mahmoud", "aly", "khadija"];
for(let i of myFriends){
    output.innerHTML += i + '</br>';
}

لاحظ أننا وضعنا في هذه الحالة المتغير i في تعليمة الطباعة فقط ليخرج قيمة العنصر لأن i في هذه الحالة لا تأخذ قيمة الدليل أو المفتاح وإنما تأخذ القيمة الفعلية المخزنة في المصفوفة أو الكائن. لهذا السبب لم نضع اسم المصفوفة كما في حلقتي التكرار for و for in. (مع الممارسة والتدريب ستكتشف أن كل حلقة تكرار لها ميزات وأماكن تسهل العمل وتبسط الكود).

حلقة التكرار While – اساسيات جافا سكريبت للمبتدئين

تقوم while بتنفيذ الكود بداخلها طالما أن الشرط الممررللحلقة متحقق. الشكل العام لها يكون كالتالي:

while (condition) {
    // code here
  }

هذا الكود يعني: طالما أو بينما الشرط Condition متحقق أو يساوي القيمة المنطقية true كرر تنفيذ الكود المكتوب بين {}. ومن الأمثلة على حلقة التكرار while:

let output = document.getElementById('test');
let i = 0;
while (i < 10) {
    output.innerHTML += i + '</br>';
    i++;
  }

الكود السابق يقوم بطباعة الأرقام من 0 إلى 9. ويمكن ترجمة الكود نصياً كما يلي: طالما أن قيمة عداد الحلقة i أصغر من 10 قم بطباعة i ثم أضف أو اجمع عليها العدد 1. لاحظ أننا أنشأنا المتغير i وأسندنا له قيمة مبدئية 0 لتبدأ الحلقة من عنده.

ملحوظة:

يجب أن يحتوي الكود المنفذ ضمن حلقة While دومًا على تعليمة ما تقوم بتغيير قيمة عداد الحلقة. بحيث يصبح الشرط في تكرار ما غير محقق (false) وإلا سنحصل على حلقة لا نهائية.

هناك شكل آخر من أشكال حلقة التكرار while والذي يسمى do while. الفرق بينهما أن الأولى تختبر الشرط أولاً ثم تنفذ الكود والثانية تنفذ الكود أولاً ثم تختبر الشرط.

ولتنفيذ الكود السابق بحلقة التكرار do while فإن الكود يكون كالتالي:

let output = document.getElementById('test');
let i = 0;
do {
    output.innerHTML += i + '<br>';
    i++;
  }
  while (i < 10);

الكود السابق يقوم بتنفيذ الكود المكتوب بداخل {} بعد do طالما أن i أصغر من 10.

الدوال Functions – اساسيات جافا سكريبت للمبتدئين

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

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

ويمكن للدالة الوصول إلى جميع المتغيرات العامة global scope أي التي يتم وضعها في صفحة الكود دون تعليب Encapsulation، أو تلك التي يتم وضعها في الدالة الأب أو كما في مبدأ الوراثة Inheritance.

طريقة كتابة الدوال في جافا سكريبت

يتم التصريح عن الدوال في جافا سكريبت بكلمة function متبوعة باسم الدالة ثم قوسين () متبوعين بقوسين معقوفين {}، بين هذين القوسين يتم كتابة التحقيق (Implementation) لهذه الدالة. والتحقيق هو الكود البرمجي الذي يؤدي الوظيفة أو المهمة المطلوب من الدالة تحقيقها. كما يوضح الكود التالي:

function myFristFunc(){
    alert('Hello world');
 }

الكود السابق عبارة عن دالة بسيطة وظيفتها كتابة جملة Hello world في مربع تنبيه alert. مع ذلك! إذا قمت بتشغيل الكود فإن الدالة لن تعمل أبداً لأنك لم تنادي عليها أو تقوم باستدعائها (Calling) أو بمعنى آخر لم تطلب منها أن تعمل وتنفذ مهمتها.

لمناداة الدالة السابقة كل ما عليك فعله هو كتابة اسمها متبوعاً بالقوسين () فالكود السابق يكون شكله النهائي كما يلي:

function myFristFunc(){
    alert('Hello world');
}
myFristFunc();

نتيجة الكود التالي ستكون كما توضح الصورة بالأسفل:

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

بارامترات أو معاملات الدوال functions parameters

المعاملات أو البارامترات parameters هي عبارة عن المتغيرات التي يتم تعريفها داخل أقواس الدالة () عند الحاجة. وهي تعبر عن عدد ونوع القيم التي تحتاجها الدالة لتنفيذ عملها. ويجب تمريرها قيم فعلية لهذه البارامترات داخل أقواس الدالة () عند استدعائها أو مناداتها.

على سبيل المثال الدالة التالية تقوم بحساب الجذر التربيعي لأي رقم ممرر لها كبرامتر:

function getSquareRoot(number) {
    for (var i = 0; i * i <= number; i++) {
        if (i * i === number)
            return i;
   }
   return number;
}
alert(getSquareRoot(81));

الكود السابق يخرج الرقم: 9

الدالة هنا تقوم بكل بساطة بعمل حلقة تكرارية باستخدام for loop، بحيث تبدأ من الرقم 0. تضرب الرقم 0 في نفسه فإن كان يساوي الرقم الممر للدالة (parameter) ترجع إليك الرقم الجديد وإلا فإنها تضرب الرقم 1 في نفسه فإن لم تساوي المعامل تضرب 2 في نفسه… وهكذا حتى تجد رقمين عند ضربهم في بعض يعطي قيمة المعامل وهي في مثالنا 81.

ستظل الدالة تضرب الأرقام في بعضهم بالترتيب 0 ثم 1 ثم 2 ثم 3 ثم…. إلخ حتى تصل للرقم 9 وعندما تضرب 9 في نفسه فإنه يعطي 81 وهو ما تهدف الدالة للوصول إليه.

أليس ذلك رائعاً! إنها قوة البرمجة يا صديقي عليك أن تجد الفكرة وستفعل العجب.

الجملة الشرطية if هنا (والتي سيتم توضيحها في القسم التالي) تقوم بإيقاف حلقة التكرار وتعيد الرقم عندما تحصل عليه. وإلا ستعمل الحلقة إلى ما لا نهاية وتتسبب في تجميد المتصفح كما وضحنا في قسم حلقات التكرار.

بعدها قمنا بمناداة الدالة أو استدعائها باستخدام: getSquareRoot(81) ومررنا القيمة 81 كمعامل للدالة، وأظهرنا النتيجة في مربع تنبيه alert الذي تحدثنا عنه في قسم المخرجات output. جرب الدالة بتغيير 81 إلى أرقام أخرى وشاهد بنفسك، ثم حاول عمل أشياء أخرى باستخدام الدوال.

يمكن وضع أكثر من معامل parameter في الدالة بالفصل بينهم باستخدام الفاصلة (,) كما يوضح المثال التالي:

function MultiplyNumbers(num1, num2, num3) {
    return num1 * num2 * num3;
 }
 
 alert(MultiplyNumbers(5, 6, 7));

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

الأحداث Events – اساسيات جافا سكريبت للمبتدئين

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

من أمثلة الأحداث التي تقع في HTML:
  • عند النقر onclick، وهو الحدث الذي يقع عندما ينقر المستخدم على أي جزء في صفحة HTML وليس مقتصرًا على النقر على الأزرار في الصفحة فقط كما يعتقد البعض.
  • عند النقر مرتين على زر الماوس ondblclick، هذا الحدث يقع عند النقر مرتين متتاليتين على زر الماوس الأيسر مثلما يحدث عند النقر على أيقونات سطح المكتب في نظام التشغيل ويندوز.
  • عند تحميل الصفحة onload، ، هذا الحدث يقع عندما يكتمل تحميل صفحة HTML. ويفضل دائماً تنفيذ أكواد جافا سكريبت بعد اكتمال تحميل الصفحات حتى لا تتسبب في تعطيل الموقع في حالة حدوث أي خطأ. ويتم ذلك من خلال وضع الكود في نهاية الصفحة كما وضحنا سابقاً. أو من خلال استدعاء الكود داخل هذا الحدث.
  • عند تمرير الماوس onmouseover، هذا الحدث يقع عندما تمرر الماوس فوق عنصر معين مثل نص، رابط، صورة أو أي شيء آخر موجود داخل صفحة HTML.
  • بعد ابتعاد الماوس عن العنصر onmouseout، يتم استدعاء هذا الحدث بعد خروج الماوس من عنصر معين مثل ابتعاد الماوس من على صورة أو نص.
  • عند تغير قيمة العنصر onchange، ، هذا الحدث يقع عند تغير حقل الإدخال عندما يكتب المستخدم شيء ما فيه، كأن يكتب المستخدم في مربع البحث قيمة ما فتظهر اقتراحات البحث.
  • عند تنشيط الحقل onfocus، وهو ما يحدث عند النقر على أي حقل إدخال input لبدء الكتابة.
  • عند النقر على أي زر onkeydown، هذا الحدث يقع عند النقر على أزرار لوحة المفاتيح. تجدر الإشارة إلى أن لكل زر في لوحة المفاتيح رقم معين على سبيل المثال زر الإدخال له الرقم 13.
  • عند رفع يدك من على الزر onkeyup، هذا الحدث يقع عند رفع يدك من على الزر في لوحة المفاتيح. على عكس الحدث السابق الذي يتم استدعاؤه بمجرد النقر على الزر.
هذا على سبيل المثال وليس الحصر:

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

كيفية تنفيذ أي كود عند وقوع حدث في الجافا سكريبت

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

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

1- داخل attribute في عناصر HTML

بحيث ينادي الحدث بمجرد وقوعه على دالة معينة لتنفيذها، كما يوضح الكود التالي:

let output = document.getElementById('square-root-value');
let input = document.getElementById('get-square-root');
function getSquareRoot() {
    let number = input.value;
        for (var i = 0; i * i <= number; i++) {
            if (i * i === number)
                return i;
                
       }
       output.innerHTML = '<p> الجذر التربيعي للرقم '+ input.value + ' = ' + (i - 1);
}

الصورة التالية توضح صفحة HTML وكيف نادينا على الدالة getSquareRoot عندما وقع حدث النقر على الزر:

اساسيات جافا سكريبت للمبتدئين

لاحظ أننا أضفنا في ملف HTML واصفة أو خاصية جديدة attribute للزر باسم onclick بحيث يتم استدعاء الدالة getSquareRoot عند النقر عليه. وفي ملف جافا سكريبت قمنا باستخدام 3 متغيرات في الدالة وهي:

  • المتغير input وهو حقل الإدخال الذي يقوم المستخدم بكتابة الرقم فيه. لاحظ أن كلمة value تعيد القيمة داخل أي حقل إدخال.
  • المتغير الثاني هو output وضعنا فيه العنصر الذي سيتم عرض النتائج بداخله.
  • أما المتغير الثالث وهو number لجلب القيمة التي يدخلها المستخدم بمجرد استدعاء دالة حساب الجذر التربيعي.

لاحظ السطر الأخير في الكود كيف أخرجنا النتيجة من for loop بعد طرح 1 منها كون الحلقة ستقوم بعمل دورة أخرى قبل إيقاف الكود.

نتيجة الكود السابق تكون كما يلي بعد وضع رقم 112 في حقل الإدخال والنقر على زر احسب الجذر التربيعي:

اساسيات جافا سكريبت للمبتدئين

2- داخل ملف الجافا سكريبت

في هذه الحالة ننشئ ملف خارجي ونكتب فيه أكواد HTML بدون كتابة أي شيء داخل عناصر HTML فقط نستدعي الملف بالطريقة المعتادة. في هذه الحالة يتم تنفيذ الكود السابق كالتالي:

let output = document.getElementById('square-root-value');
let input = document.getElementById('get-square-root');
let btn = document.getElementById('calc');
btn.onclick = function getSquareRoot() {
    let number = input.value;
        for (var i = 0; i * i <= number; i++) {
            if (i * i === number)
                return i;
                
       }
       output.innerHTML = '<p> الجذر التربيعي للرقم '+ input.value + ' = ' + (i - 1);
}

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

احفظ الكود السابق في ملف باسم main.js وقم باستدعائه في ملف HTML كالتالي:
اساسيات جافا سكريبت للمبتدئين

ملحوظة: يمكن عمل الكود السابق بالطريقة التالية، فهي الطريقة الجديدة في الإصدارات الحديثة للجافا سكريبت):

let output = document.getElementById('square-root-value');
let input = document.getElementById('get-square-root');
let btn = document.getElementById('calc');
btn.addEventListener('click', () => {
    let number = input.value;
        for (var i = 0; i * i <= number; i++) {
            if (i * i === number)
                return i;
                
       }
       output.innerHTML = '<p> الجذر التربيعي للرقم '+ input.value + ' = ' + (i - 1);
    
})

لاحظ أننا استخدمنا كلمة addEventListener ثم أرفقنا لها الحدث click. وبعدها مررنا الدالة بشكل مباشر بفصل الحدث عن الدالة بالفاصلة (,) مع وضع الحدث داخل علامتي تنصيص (مزدوجة أو مفردة). لاحظ أيضاً أننا لم نكتب كلمة function واكتفينا بالأقواس ثم رمز =< وبعدها القوسين المعكوفين {} ثم القوس الأخير لكلمة addEventListener.

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

جميع الأحداث الأخرى يتم تحقيقها بالطريقة السابقة، بمعنى أنه يمكنك استبدال onclick بأي حدث من الأحداث التي تم ذكرها بالأعلى.

العبارات الشرطية if و if else و else

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

if(true){
    //do something
}else{
    //do something else
}

ويتم ترجمة الكود نصياً بالشكل التالي: إذا كان الشرط متحقق قم بتنفيذ شئ ما، غير ذلك أو else نفذ شيء آخر.

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

let currentOur = new Date().getHours();
if( currentOur >= 00 && currentOur  <= 12){
    alert('صباح الخير، الساعة الآن: ' + currentOur);
}else{
    alert('مساء الخير، الساعة الان: ' + currentOur);
}

لاحظ أن الرمز && معناه AND أي أنه يجب أن يتحقق الشرطان معاً لتنفيذ الكود، نتيجة الكود السابق تكون كالتالي:

اساسيات جافا سكريبت للمبتدئين

أعتقد أن الكود يشرح نفسه، لكن أود توضيح أن المتغير currentOur يحمل الساعة في الوقت الحالي (ساعات فقط) وهو ما تعبر عنه new Date().getHours() وهي أحد دوال الجافا سكريبت الجاهزة لجلب ساعة الجهاز في الوقت الفعلي.

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

let currentOur = new Date().getHours();
if( currentOur >= 00 && currentOur  <= 12){
    document.body.style.background = 'black';
}else{
    document.body.style.background = 'green';
}

الكود السابق يقوم بتغيير خلفية الموقع إلى اللون الأسود إذا كانت الساعة من 12 ليلاً (00 تدل على الساعة 12 صباحاً) إلى 12 ظهراً. وإلى اللون الأخضر باقي اليوم.

لاحظ أن التعليمة document.body.style.background تقوم باختيار العنصر body من ملف HTML ثم تضع له تصميم Style للخلفية backgruond ويمكن إضافة أي ستايل لأي عنصر HTML بطريقة مماثلة.

مثال متقدم على if و else if و else

على افتراض أن موقعنا يدخله ثلاثة فئات من المستخدمين:

  1. الأطفال حتى 18 سنة.
  2. البالغين من 18 حتى 21 سنة.
  3. الكبار أكبر من 21 سنة.

ولدينا 3 أنواع من المحتوى في الموقع، ونريد أن يتغير محتوى الموقع بحسب عمر كل مستخدم. فكيف يتم تنفيذ ذلك برمجياً؟ الكود التالي يوضح أبسط طريقة لتنفيذ الفكرة وبالرجوع للمثال المرفق في الكائنات object عرفنا كائن user كما يلي:

let children = document.getElementById('children');
let adults = document.getElementById('adults');
let elderly = document.getElementById('elderly');
const user = {firstName:"Mahmoud", lastName:"Hassan", age:31, gender:"Male"};
if(user.age <= 18){
    adults.remove();
    elderly.remove();
}else if(user.age > 18 && user.age <= 21){
    children.remove();
    elderly.remove();
}else{
    children.remove();
    adults.remove();
}

سيكون ملف HTML عبارة عن 3 عناصر div لكل منهم لون مختلف، خصصنا عنصر للأطفال باللون الأخضر، وعنصر للبالغين باللون الأصفر، وآخر للكبار باللون الأحمر. الصورة التالية توضح ملف HTML:

اساسيات جافا سكريبت للمبتدئين

في الوضع العادي بدون تشغيل الكود تكون النتيجة كالتالي:

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

const user = {firstName:"Mahmoud", lastName:"Hassan", age:31, gender:"Male"};

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

يمكنك أيضاً عرض محتوى مخصص بحسب جنس كل عضو، مثلاً إذا كان عمر العضو 20 أو أكبر وكان ذكر Male تعرض له محتوى مخصص. وإن كان العضو مؤنث تعرض له محتوى آخر. (تحدثنا عن الكائنات مسبقاً وتعرفنا على كيفية استخراج البيانات منها).

if (user.age > 18 && user.age <= 21) 

الكود السابق يعني أن الشخص يجب أن يكون أكبر من 18 وفي نفس الوقت أصغر من 21. فعلامة && تعني And وتسلتزم جوب تحقق الشرطين.

معامل آخر للتحقق من وقوع أحد الشرطين وهو || ويسمى OR

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

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

element.style.display = 'none';

لكن في مثالنا هذا يفضل استخدام remove لمنع التلاعب بالكود وإظهار المحتوى بالكامل. فالطريقة style.display يمكن تغيرها بسهولة لإظهار كامل المحتوى. كما أن الكود السابق توضيحي فقط أما في حالة أردت إخفاء أو عرض أي محتوى فإنه يجب أن يتم ذلك من جانب السيرفر.

في الختام:

نذكرك هنا في هذا الموضوع “اساسيات جافا سكريبت للمبتدئين” بأن جافا سكريبت لغة كبيرة جداً وتحتاج إلى مئات الصفحات للإلمام بها بشكل كامل. لكننا حرصنا في هذا الدليل على أن نوضح أهم الأساسيات التي تؤهلك لفهم اللغة كي تتمكن من استخدامها في موقعك.

اقرأ أيضا …

اخطاء يقع فيها الكثير من المبرمجين المبتدئين التي قد تمنع تقدم مساره المهني وتحقيق أهدافه
تعرف على جافا سكريبت Javascript واستخداماتها
موقعك بالصفحة الأولى في جوجل بـأكثر من 10 طرق SEO مجانية

admin

المشرف العام على موقع gaawy

View all posts by admin →