دورة مجانية: تعزيز المهارات الرياضية لمطوري الواجهة الأمامية

هل تسعى لتصبح مطورًا أكثر كفاءة من خلال تحسين مهاراتك الرياضية الأساسية، دون الحاجة إلى تعقيدات حسابات وكالة ناسا؟ لا داعي للبحث بعيدًا! يسعدنا في منصة Scrimba أن نعلن عن دورتنا الجديدة والمثيرة: ‘الرياضيات العملية لمطوري الواجهة الأمامية’، والتي تقدم لك بالضبط ما تحتاجه.

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

خلال هذه الدورة، سنقوم ببناء ثلاثة مشاريع عملية ومتكاملة:

• سلة تسوق (Shopping Cart): حيث نقوم بإنشاء قائمة بالمنتجات، وحساب السعر الإجمالي للمنتجات، وتطبيق معدل ضريبة.
• جدول أسبوعي (Weekly Schedule): نتعرف فيه على كائن Date في JavaScript، ونقوم بمعالجة التخطيط (layout manipulation)، ونتعلم عن دالة reduce.
• ورقة مصاريف شهرية (Monthly Expense Sheet): يجمع هذا المشروع كل ما تعلمناه ويقدم لنا بعض النصائح والحيل المفيدة لتتبع وإدارة المصاريف.

المحاضر: ريان غونيون (Ryan Gonyon)

يقدم هذه الدورة ريان غونيون، الذي يمتلك قنواته الخاصة على Twitch و YouTube. بفضل خبرته التي تزيد عن 5 سنوات في تطوير الويب، ودرجة البكالوريوس في علوم الحاسوب، وخبرته في تدريس الرياضيات للمراحل التعليمية المختلفة (من الروضة حتى الجامعة)، يُعد ريان المعلم المثالي لهذه الدورة. توجه إلى Scrimba لترى ما يقدمه!

تخطيط التطبيق ودالة calc() في CSS

في هذا الجزء من الدورة، يوضح لنا ريان كيفية بناء الهيكل الخارجي لتطبيقاتنا عن طريق تحديد الحجم الصحيح لوسوم <header> و <footer> و <main> باستخدام متغيرات CSS ودالة calc(). هذه الدالة القوية تسمح لنا بإجراء عمليات حسابية مباشرة داخل قيم خصائص CSS، مما يوفر مرونة كبيرة في تصميم الاستجابة. كما نستخدم خاصية overflow-y: auto لضمان أن محتويات وسم <main> لا تتجاوز حدود التذييل (footer)، مما يحافظ على تصميم نظيف ووظيفي.



انقر على الصورة للوصول إلى الدورة.

* {
  --headerFontSize: 2rem;
  --headerPadding: 0.5rem;
  --footerFontSize: 1rem;
  --footerPadding: 1rem;
}

header {
  font-size: var(--headerFontSize);
  padding: var(--headerPadding);
}

main {
  font-size: 1.5rem;
  height: calc(100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(--footerFontSize) - (2 * var(--footerPadding)));
  overflow-y: auto;
}

footer {
  font-size: var(--footerFontSize);
  padding: var(--footerPadding);
}

دالة roll(): توليد البيانات العشوائية

في مرحلة ما من رحلتك كمطور واجهة أمامية، ستجد أنه من المفيد جدًا توليد بيانات عشوائية لاختبار تخطيطاتك وتصاميمك. دالة roll() تقوم بهذا بالضبط. يعرض هذا الجزء أيضًا كيفية استخدام وحدة Math ودالة random() في JavaScript لتوليد أرقام عشوائية ضمن نطاق محدد، وهو أمر أساسي في العديد من التطبيقات الديناميكية.

function roll(min, max, floatFlag) {
  let r = Math.random() * (max - min) + min;
  return floatFlag ? r : Math.floor(r);
}

مشروع سلة التسوق: توليد البيانات وبناء التخطيط

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

انقر على الصورة للوصول إلى الدورة.

let products = [...Array(5)].map((_, i) => {
  return {
    index: i,
    title: possibleProducts[roll(0, possibleProducts.length)],
    price: roll(1, 10, 1).toFixed(2),
    count: roll(1, 6),
  };
});

مشروع سلة التسوق: حساب الإجمالي وتطبيق معدل الضريبة

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

let cartTotal = products
  .reduce(
    function (accumulator, product) {
      console.log(accumulator, product);
      return accumulator + parseFloat(product.price) * product.count;
    },
    0
  )
  .toFixed(2);

على طول الطريق، نتدرب على تحليل القيم العشرية (float) وتقريبها إلى عدد محدد من الأرقام بعد الفاصلة العشرية، وهي مهارة حيوية في التعامل مع البيانات المالية.

let taxRate = roll(5, 9, 1).toFixed(1);

تحدي إضافي لسلة التسوق: الأوزان

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

استكشاف موجز لأشكال CSS

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

انقر على الصورة للوصول إلى الدورة.

.triangle {
  height: 0;
  width: 0;
  border-left: 5.5rem solid transparent;
  border-right: 5.5rem solid transparent;
  border-bottom: 5.5rem solid black;
  margin: 1rem;
  position: relative;
}

.triangle:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-left: 4.5rem solid transparent;
  border-right: 4.5rem solid transparent;
  border-bottom: 4.5rem solid red;
  left: -4.5rem;
  top: 0.6rem;
}

مشروع الجدول الأسبوعي: استخدام Date() لبناء الأسبوع وتوليد المهام

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

function getNextDay(day) {
  let nextDay = new Date(day);
  nextDay.setDate(day.getDate() + 1);
  return nextDay;
}

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

مشروع الجدول الأسبوعي: بناء التخطيط وعرض البيانات

في هذا الجزء، يوضح لنا ريان كيفية استخدام دالة calc() في CSS لعرض البيانات التي تم إنشاؤها في الجزء السابق بطريقة منظمة وجذابة. يتم التركيز على كيفية دمج الحسابات الرياضية في CSS لإنشاء تخطيطات مرنة تتكيف مع محتوى مختلف.

انقر على الصورة للوصول إلى الدورة.

--mainHeight: calc(100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(--footerFontSize) - (2 * var(--footerPadding)));

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

مشروع ورقة المصاريف الشهرية: توليد وعرض الشهر

بعد ذلك، نستخدم المفاهيم التي تعلمناها في الأجزاء السابقة لبناء شيء أكثر تعقيدًا – وهو متتبع المصاريف الخاص بنا. في هذا المشروع، نقوم بتوليد البيانات، وعرض الأشهر، ورسم شبكة (grid) لعرض الأيام والمصاريف بشكل منظم.

انقر على الصورة للوصول إلى الدورة.

function displayMonth(month) {
  // <div class="day">3</div>
  let monthHtml = month.reduce(function (accumulator, day) {
    return accumulator + `<div class="day"> ${day.date.getDate()} </div>`;
  }, "");
  document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

مشروع ورقة المصاريف الشهرية: توليد وعرض وتتبع المصاريف

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

انقر على الصورة للوصول إلى الدورة.

function displayMonth(month, budget, netValue) {
  let monthHtml = `<div class="monthly-summary"> Budget: \$ ${budget.toFixed(2)} | Net Value: \$ ${netValue.toFixed(2)} </div>` + month.reduce(function (accumulator, day) {
    return accumulator + `<div class="day"> ${day.date.getDate()} </div>`;
  }, "");
  document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

الخلاصة التقنية

تهانينا على إكمال هذه الدورة! نأمل حقًا أن تكون قد تعلمت بعض النصائح والحيل المفيدة التي يمكنك تطبيقها في مغامراتك البرمجية المستقبلية. هذه الدورة لا تقتصر على تعليمك أساسيات الرياضيات فحسب، بل تمكنك من دمجها بسلاسة في مشاريع تطوير الواجهة الأمامية، مما يعزز قدرتك على بناء تطبيقات ويب أكثر قوة ومرونة. إن فهمك لدوال مثل calc() في CSS، وكائن Date، ودالة reduce في JavaScript، بالإضافة إلى القدرة على توليد البيانات ومعالجتها، سيضعك على طريق التميز في مجال تطوير الويب. استمر في التعلم والتجريب، فالمعرفة هي مفتاح الابتكار في هذا المجال المتطور باستمرار. تعلم سعيد! ؛)

إذا قرأت حتى الآن، اشكر المؤلف لإظهار اهتمامك. قل شكرًا.

تعلم البرمجة مجانًا. لقد ساعد منهج freeCodeCamp مفتوح المصدر أكثر من 40,000 شخص في الحصول على وظائف كمطورين. ابدأ الآن.