لوحة المتصدرين

تعد مكتبات بايثون إحدى أبرز نقاط قوة هذه اللغة، ومن أبرز المقولات الشهيرة التي تخص عالم برمجة البايثون هو أن المطورين والمبرمجين يدخلون عالم لغة بايثون من أجل تعلم هذه اللغة لسهولتها ولكنهم يبقون عالقين فيها بسبب مجتمع مطوريها الذي يوفر الكثير من المكتبات المفيدة والغنية بالمميزات. وهذا صحيح بالنسبة لأغلبنا فالأمر الذي يربطنا بلغة بايثون ويجعلنا نقتنع بها ونتمسك ببرمجة مشاريعنا باستخدامها هو مدى السهولة والبساطة التي نجدها عندما نحاول أن ننفذ أي فكرة لنا ونرى قدرًا هائلًا من المكتبات المساعدة التي يقدمها لك مجتمع مطوري البايثون والتي تمكننا من إنجاز أي فكرة بسرعة بالغة وتوفر علينا الكثير من الوقت الذي كنا سنسنتغرقه في حال جربنا تطوير نفس الفكرة بدون استخدام هذه المكتبات أو بلغة برمجة أخرى! في هذا المقال سنعرفك على أهم مكتبات بايثون التي يستخدمها معظم المطورين أثناء تطوير مشاريعهم وتطبيقاتهم ونعطيك فكرة موجزة عن أهمية كل مكتبة منها وأبرز المميزات التي تقدمها لك. ما معنى مكتبة بايثون؟ قبل أن نتعرف على أهم مكتبات بايثون دعنا بداية نوضح لك مفهوم كلمة مكتبة library في البرمجة. المكتبة هي مجموعة من التعليمات البرمجية الجاهزة التي تقوم بمهام شائعة يحتاجها معظم المطورين ويمكن إعادة استخدامها بدلًا من إعادة كتابتها من جديد، وتوجد المكتبات في العديد من لغات البرمجة لكن تتميز لغة بايثون بوفرة مكتباتها التي تتضمن صفوف ودوال ووحدات نمطية مفيدة لأداء العديد من المهام المتنوعة التي تسهل عمل أي مطور. تخدم مكتبات بايثون معظم مجالات البرمجة فنظرًا لكونها لغة برمجة مفتوحة المصدر open source لذا يساهم الكثير من المطورين المتطوعين في تطوير هذه المكتبات وإتاحتها للاستخدام عبر الإنترنت وكل ما تحتاجه كمستخدم إلى تثبيت المكتبة واستيرادها في كود مشروعك وسيتاح لك الوصول إلى كل وظائفها. كي تدرك أهمية المكتبات دعنا نستعرض مثالًا بسيطًا، لنفترض أنك تريد كتابة برنامج لحساب المتوسط الحسابي لمجموعة من الأرقام في حال فكرت بكتابة هذا البرنامج بدون استخدام أي مكتبات مساعدة سيكون الكود مشابهًا للتالي: num = [2, 4, 1, 5, 9] n = len(num) get_sum = sum(num) mean = get_sum / n print("Average = ",mean) الآن لو أردنا لاستعانة بإحدى المكتبات التي توفر دالة جاهزة لحساب المتوسط سنجد العديد منها مثل مكتبة statistics و NumPy، على سبيل المثال سنستورد مكتبة NumPy في بداية الكود البرمجي كما يلي import numpy بعدها سنتمكن من كتابة الكود المكافئ للكود السابق لحساب المتوسط الحسابي بتعليمات أقل كما يلي: num = [2, 4, 1, 5, 9] mean = numpy.average(num) print("Average = " ,mean) هذا بالنسبة لبرنامج بسيط فما بالك بالتطبيقات الضخمة التي تحتاج إلى آلاف الأسطر من التعليمات البرمجة تخيل حجم العمل الذي يمكن أن توفره بالاعتماد على مكتبات بايثون. أهم مكتبات بايثون للمشاريع الصغيرة دعنا الآن نتعرف على أهم عشر مكتبات في لغة بايثون يمكنك استعمالها في المشاريع البرمجية المتنوعة: Dataset Beautiful Soup Requests Click Python Slugify Pluggy Datasette Envparse Pillow Tkinter لنتعرف على مزيد من التفاصيل حول كل مكتبة من هذه المكتبات ونتعرف على وظيفتها الأساسية. Dataset: مكتبة بايثون لحفظ البيانات في قاعدة البيانات بشكل سريع تُستخدم مكتبة Dataset ععندما نحتاج إلى جمع البيانات وحفظها في قاعدة البيانات قبل أن نكتشف ما هو الشكل النهائي لجداول قاعدة البيانات. حيث تُعتبر Dataset بسيطة ولكنها مع ذلك توفر API قوي يقدم طريقة سهلة لحفظ البيانات داخلها ثم تصنيفها لاحقًا. بنيت مكتبة Dataset فوق SQLAlchemy ويمكن استخدامها ضمن إطار عمل جانغو Django من خلال تعليمات الإدارة inspectdb المبنية داخل جانغو. Beautiful Soup: مكتبة لاستخراج البيانات من صفحات الويب تستخرج مكتبة Beautiful Soup المعلومات من صفحات HTML كما أنها تستخدم في تحويل البيانات غير المنظمة أو غير المهيكلة unstructured data في HTML إلى بيانات مهيكلة structured data، كما أنها تعمل بشكل رائع مع بيانات XML صعبة القراءة. Requests: مكتبة بايثون للعمل مع طلبات HTTP يمكن القول أن مكتبة Requests هي من أفضل المكتبات المعيارية التي تعمل على محتوى بروتوكول HTTP وتجعل جعل طلبات HTTP أبسط، ففي أي وقت تحتاج لطلب صفحة HTML أو حتى واجهة برمجة تطبيقات API في مشروعك ستقوم مكتبة Requests بتغليف هذا الطلب وتوثيقه بشكل جيد ومفهوم. Click: مكتبة لكتابة الأوامر الخاصة بسطر الأوامر command-line تعد مكتبة Click من المكتبات المفضلة عندما تحتاج لكتابة نص برمجي بلغة بايثون ضمن سطر الأوامر command-line، حيث توفر هذه المكتبة واجهة برمجة تطبيقات API بسيطة ومدروسة جيدًا فهي لا تحتوي إلا القليل من النماذج التي نحتاج لتذكرها بالإضافة إلى أنها تمتلك مستندات توثق طريقة عملها بشكل جيد وهذا يسهل عليك عملية البحث عن الميزات المتقدمة ضمن المكتبة. Python Slugify: مكتبة لتسمية الأشياء ضمن مشروع بايثون تقدم مكتبة Python Slugify خدمة تسمية الأسماء وفلترتها وتمكنك من تحويل العناوين أو الأوصاف إلى مُعرِّفات مميزة. وهي ضرورية بشكل خاص لمطوري الويب ففي حال كنت تعمل على مشروع ويب يمكنك استخدامها لتحويل روابط URL لصفحات موقعك إلى روابط صديقة لمحركات البحث SEO فهي تجعل عملية التسمية أمرًا سهلًا ومباشرًا. Pluggy: مكتبة بايثون للعمل مع الإضافات تعد مكتبة Pluggy من مكتبات بايثون الحديثة نسبيًا ولكنها من أفضل وأسهل الطرق لإضافة الإضافات أو الملحقات plugins إلى تطبيقك الحالي من أجل تعديل جوانب معينة منه أو إضافة ميزات جديدة له، وفي حال تعاملت سابقًا مع إطار اختبار pytest في بايثون فإنك بالتأكيد استخدمت مكتبة Pluggy من دون أن تعرف. Datasette: مكتبة بايثون لتحويل ملفات CSV إلى API تعتبر مكتبة Datasette من مكتبات بايثون الرائعة وسهلة الاستخدام لتحويل ملفات CSV إلى تطبيقات REST JSON كاملة المميزات ولكنها تكون تطبيقات قراءة فقط وتمتلك هذه المكتبة الكثير من الميزات المهمة بما في ذلك المخططات والخرائط التفاعلية، وهي سهلة التطبيق ضمن البرامج باستخدام حاوية container أو مضيف ثالث في الويب. Envparse: مكتبة للتعامل مع متغيرات البيئة في بايثون في حال كنت تحتاج إلى تفسير متغيرات البيئة environment variables مباشرة لأنك لا تريد حفظ مفاتيح API أو أي معلومات أخرى هامة عن قاعدة البيانات ضمن الشيفرات البرمجية للتطبيق source code، عندها تحتاج إلى استخدام مكتبة Envparse التي تعد واحدة من أفضل مكتبات بايثون التي تعالج متغيرات البيئة وملفات ENV وأنماط المتغيرات، وتساعدك كذلك في إجراء المعالجات المسبقة Preprocessors واللاحقة Postprocessors لهذا المتغيرات عند الضرورة. Pillow: مكتبة بايثون قوية لعرض ومعالجة الصور توفر مكتبة Pillow ميزات رائعة للتعامل مع الصور في بايثون فإذا كنت تحتاج إلى معالجة وفتح وحفظ ملفات الصور في مشروعك أنصحك بتجربة هذه المكتبة التي تدعم تنسيقات مختلفة للصور كما تدعم الكثير من التعديلات والفلاتر على الصور مثل تغيير حجم الصورة وتدويرها وتعديل الألوان وتحسين تباينها. Tkinter: مكتبة بايثون قياسية لبناء الواجهات الرسومية تفيد مكتبة Tkinter القياسية أي مطور يحتاج لطريقة سهلة وسريعة لإنشاء واجهة مستخدم رسومية GUI في بايثون وتوفر العديد من عناصر الواجهة الرسومية الاحترافية كالأزرار ومربعات النصوص والقوائم ...إلخ وما يميزها عن غيرها من مكتبات الواجهة الرسومية هو أنها متوافقة مع أنظمة التشغيل الأساسية ويندوز ولينكس وماك أو إس، كما أناه تعرض عناصر الواجهة باستخدام عناصر نظام التشغيل الأساسي لذا ستبدو التطبيقات التي تم إنشاؤها باستخدامها وكأنها تنتمي إلى النظام الأساسي الذي يتم تشغيلها فيه دون الحاجة لأي تعديلات في الشيفرة لكل نظام على حدا. كانت هذه بعض من مكتبات بايثون وهناك بالطبع العديد من المكتبات الغنية بالميزات لكننا سنكتفي بهذه المكتبات العشر ونترك لك حرية اكتشاف العديد منها على متجر مكتبات بايثون الرسمي PyPI. نصائح لاختيار مكتبات بايثون الأنسب لمشروعك كما ذكرنا سابقًا يمكن أن تجد العديد من المكتبات التي تخدم غرضك عندما تعمل على مشروع برمجي معين وتتساءل أي مكتبة علي أن اختار؟ إليك يلي بعض الأمور الهامة التي عليك مراعاتها عند اختيار مكتبة ما: تأكد من توافق المكتبة مع إصدار بايثون الذي تستخدمه. إذا كنت تستخدم عدة مكتبات في مشروعك، تأكد من أنها غير متعارضة مع بعضها البعض. تحقق من أن وظائف المكتبة تتوافق مع الهدف الأساسي المطلوب من المشروع البرمجي فإذا كان مشروعك في مجال تحليل البيانات على سبيل المثال ركز على مكتبات توفر وظائف تحليل البيانات وإدارة البيانات وتمثيل البيانات مرئيًا. اختر مكتبة تتناسب مع ميزانية مشروعك فهناك عدد كبير من مكتبات بايثون مفتوحة المصدر التي يمكنك استخدامها مجانًا لكن قد تضطر لشراء مكتبة مدفوعة إذا لم تجد ما يناسب متطلبات مشروعك. الخلاصة سلطنا الضوء في مقال اليوم على أهم 10 مكتبات مفيدة في بايثون والتي تعتبر بمثابة كنز لأي مبرمج والتي تسرع عمله بشكل كبير وتبسط عملية كتابة الأكواد وإنجاز الوظائف المطلوبة في المشاريع المختلفة. هل تستخدم أيًا مكتبات بايثون التي استعرضناها في الأعلى أو غيرها؟ شاركنا باسم هذه المكتبة وعرفنا على أبرز الفوائد التي جنيتها من استخدامك لها في مشاريعك البرمجية؟ ترجمة وبتصرّف للمقال 8‎ great Python libraries for side projects‎‎‎ لصاحبيه Lacey Williams Henschel و Jeff Triplett. نشر المقال بتاريخ 06/01/2019 وجرى تحديثه.

تعتبر المخططات والجداول البيانية charts طريقة لعرض المعلومات information المُستخرجة من البيانات الخام data بشكل بصري يساهم في تقديم المعلومة بشكل سهل للمستخدم ويجعل تحليل الأجزاء الكبيرة من البيانات أكثر سهولة، بالإضافة إلى الجاذبية التي تضيفها هذه المخططات على الموقع بسبب الطريقة التفاعلية التي تُقدَّم بها المعلومات. تُؤمّن مكتبات الجافا سكربت لنا تضمين المخططات إلى موقعنا، والتي تمتاز بسهولة الفهم والتعامل، حيث سنتكلم في هذه المقالة عن أهم 3 مكتبات مفتوحة المصدر مكتوبة بلغة الجافا سكربت ومتخصصة في المخططات البيانية. في هذه المقالة سنتعلم عن أهم 3 مكتبات مفتوحة المصدر متخصصة في المخططات في الجافاسكربت مكتبة chart.js إن مكتبة chart.js هي مكتبة مفتوحة المصدر مكتوبة بالجافا سكربت تسمح لنا ببناء مخططات بيانية جميلة متحركة وتفاعلية نستخدمها في تطبيقات الويب، وهي متاحة تحت ترخيص MIT. يمكن يمكن من خلال هذه المكتبة بناء العديد من المخططات والرسوم البيانية المثيرة للإعجاب بمافيها مخططات الأعمدة bar charts، المخططات الخطية line charts، مخططات المساحة area charts، المقاييس الخطية linear scale، المخططات البيانية المبعثرة scatter charts. تمتاز المخططات المبنية بواسطة هذه المكتبة بأنها متجاوبة بشكل كامل مع غالبية الأجهزة، حيث يتم استدعاؤها وتضمينها في صفحة الويب باستخدام عناصر HTML5. سنطرح مثالًا توضيحيًا لطريقة رسم مخطط أعمدة باستخدام هذه المكتبة، حيث سنُضمِّمن مكتبة chart.js الموجودة في content delivery Network (اختصارًا CDN)، مع العلم أن البيانات المذكورة في المثال توضيحية فقط. <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> </head> <body> <canvas id="bar-chart" width=300" height="150"></canvas> <script> new Chart(document.getElementById("bar-chart"), { type: 'bar', data: { labels: ["North America", "Latin America", "Europe", "Asia", "Africa"], datasets: [ { label: "Number of developers (millions)", backgroundColor: ["red", "blue","yellow","green","pink"], data: [7,4,6,9,3] } ] }, options: { legend: { display: false }, title: { display: true, text: 'Number of Developers in Every Continent' }, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> </body> </html> كما نرى في المثال، يتم إنشاء المخطط وتسمية نوعه عندما أسندنا القيمة bar إلى type (يمكن اختيار نوع المخطط هنا مثلًا يمكن تغيير نوع المخطط إلى horizontalBar) نسند قيم ألوان الأعمدة من خلال مصفوفة إلى backgroundColor ونلاحظ أن كل لون أسند إلى اسم العمود الذي يحمل نفس رقم الفهرسة في مصفوفة labels وسيكون الخرج بالشكل التالي: مكتبة Chartist.js مكتبة Chartist.js هي هي مكتبة تحريك بسيطة مكتوبة بلغة جافا سكربت تُستخدم لبناء مخططات وتصميمات جميلة متجاوبة وقابلة للتخصيص، وهي مكتبة مفتوحة المصدر تندرج تحت ترخيص MIT و WTFPL. صممت هذه المكتبة من قبل مجموعة من المطورين الذين كانوا غير راضيين عن الأدوات التي تُستخدم لتصميم المخططات، لذلك قاموا ببناء هذه المكتبة التي توفر ديناميكية رائعة للمصممين والمطورين. للبدء باستخدام هذه المكتبة ضمن تطبيقنا، نحتاج أولًا لتضمين ملف المكتبة Chartist.js والملف CSS، ويمكننا بعدها البدء ببناء العديد من أنواع المخططات والرسوم البيانية مثل مخططات الأعمدة، المخططات الخطية، بالإضافة إلى أنها إضافة بعض التحريك animation، حيث تقوم باستخدام SVG لاستدعاء وتحريك المخططات ديناميكيًا. سنطرح هنا مثالًا عن طريقة استخدام هذه المكتبة لبناء مخطط الفطيرة pie chart: <!DOCTYPE html> <html> <head> <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" /> <style> .ct-series-a .ct-slice-pie { fill: hsl(100, 20%, 50%); /* filling pie slices */ stroke: white; /*giving pie slices outline */ stroke-width: 5px; /* outline width */ } .ct-series-b .ct-slice-pie { fill: hsl(10, 40%, 60%); stroke: white; stroke-width: 5px; } .ct-series-c .ct-slice-pie { fill: hsl(120, 30%, 80%); stroke: white; stroke-width: 5px; } .ct-series-d .ct-slice-pie { fill: hsl(90, 70%, 30%); stroke: white; stroke-width: 5px; } .ct-series-e .ct-slice-pie { fill: hsl(60, 140%, 20%); stroke: white; stroke-width: 5px; } </style> </head> <body> <div class="ct-chart ct-golden-section"></div> <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> <script> var data = { series: [45, 35, 20] }; var sum = function(a, b) { return a + b }; new Chartist.Pie('.ct-chart', data, { labelInterpolationFnc: function(value) { return Math.round(value / data.series.reduce(sum) * 100) + '%'; } }); </script> </body> </html> تتيح لنا هذه المكتبة استخدام العديد من الأنماط Style المُعرَّفة مسبقًا في ملفات CSS التي قمنا بتضمينها في البداية بدلًا من كتابة الأنماط بشكل كامل يدويًا حيث يمكننا استخدام هذه الأنماط في التحكم بشكل المخطط الذي قمنا ببنائه. يُستخدم الصف .ct-chart المبني مُسبقًا في CSS لبناء حاوية container للمخطط، ويستخدم الصف .ct-golden-section للحصول على النسبة aspect ratios المستخدمة في تكبير وتصغيير التصميم ليتلائم مع التصميم المتجاوب responsive design وبالتالي يخفف عنا حساب الأبعاد. واستخدمنا الصف الافتراضي .ct-series-a لتحديد شكل الأقسام الموجودة في المخطط، حيث يمكن استبدال الحرف a للحصول على أشكال أخرى مبنية مُسبقًا. وقد استخدمنا التابع Chartist.Pie لبناء مخطط الفطيرة، وفي حال كنا نريد بناء شكل نوع آخر من المخططات مثل المخطط الخطي يمكن استخدام التابع Chartist.Line وسيكون الخرج لهذا الكود بالشكل: مكتبة D3.js تُعتبر المكتبة D3.js مكتبة أخرى مهمة مفتوحة المصدر مكتوبة بالجافا سكربت. وهي متاحة تحت رخصة BSD. وتقوم هذه المكتبة التي توفر أيضا تحريك ثلاثي الأبعاد 3D animation باستخدام HTML5، SVG، و CSS كإطار لعملها ضمن صفحة الويب. تقوم هذه المكتبة على على مبدأ أساسي في العمل وهو بناء مستند (Document Object Model) DOM ثم معالجته بالاعتماد على التوابع والبيانات المتوفرة داخله لنحصل منها على المخطط البياني الذي نريد بناؤه من خلال إحداث تغييرات في المستند. سنطرح هنا مثال عن مخطط الأعمدة باستخدام هذه المكتبة: <!DOCTYPE html> <html> <head> <style> .chart div { font: 15px sans-serif; background-color: lightblue; text-align: right; padding:5px; margin:5px; color: white; font-weight: bold; } </style> </head> <body> <div class="chart"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script> <script> var data = [342,222,169,259,173]; d3.select(".chart") .selectAll("div") .data(data) .enter() .append("div") .style("width", function(d){ return d + "px"; }) .text(function(d) { return d; }); </script> </body> </html> حيث قمنا أولًا ببناء وسم style يحوي جميع اختياراتنا لشكل المخطط ويتم ربطها مع عقدة DOM لمعالجتها بنفس الطريقة التي يعمل بها jQuery. بعد حفط البيانات في المستند document يقوم التابع .enter() بالإذن ببدء التطبيق invoke لبناء العقدة الجديدة التي تحمل البيانات بالنسبة لجميع وكل التوابع التي تلي التابع .enter() فسيتم استدعاؤها من أجل كل عنصر من البيانات. وسيكون الخرج بالشكل التالي: الخلاصة توفر مكتبات المخططات في الجافا سكربت أدوات فعالة لإظهار البيانات بشكل بصري في الموقع الالكتروني الخاص بك، وهذا يزيد من جمالية وتفاعل الموقع. ترجمة وبتصرّف للمقال 3 top open source JavaScript chart libraries لصاحبه Dr. Michael J. Garbade

مقدّمة نظرية كائن جافاسكريبت هو كيان لديه خاصيّات. كلّ خاصيّة عبارة عن زوج مفتاح وقيمة. المفتاح هو اسم الخاصيّة. يمكن أن تكون قيمة الخاصيّة بيانات (عددا، سلسلة محارف، …إلخ.) أو دالة. يُطلَق على الخاصيّة عندما تكون قيمتها دالة الاسم تابع Method. يُنشَأ كائن حرفي Object literal في جافاسكريبت بتحديد خاصيّاته ضمن زوج من الأقواس المعكوفة. const myObject = { property1: value1, property2: value2, // ... , method1(/* ... */) { // ... }, method2(/* ... */) { // ... } // ... }; myObject.property1 = newValue; // يعيّن القيمة الجديدة للخاصيّة property1 في الكائن myObject console.log(myObject.property1); // يعرض قيمة الخاصيّة property1 في الكائن myObject myObject.method1(...); // استدعاء التابع method1 في myObject تمثّل الكلمة المفتاحية this في تابع الكائن الذي يُستدعَى فيه التابع. تعرّف لغة البرمجة سلفا كائنات عدّة للاستفادة منها مثل console و Math. مقدّمة ما هو الكائن؟ انظر إلى الكائنات في معناها غير البرمجي، مثل قلم. يمكن أن يكون للقلم ألوان عدّة، يصنعه أشخاص متعدّدون، أطراف متنوّعة وخاصيّات أخرى كثيرة. على نحو مشابه، الكائن في البرمجة هو كيان لديه خاصيّات. تعرّف كل خاصيّة ميزة في الكائن. يمكن أن تكون الخاصيّة بيانات مرتبطة بالكائن (لون القلم) أو إجراء (قدرة القلم على الكتابة). ما علاقة هذا بالشفرة؟ البرمجة كائنية التوجّه Object-oriented programming (أو OOP اختصارا) هي طريقة لكتابة البرامج باستخدام الكائنات. يكتُب المبرمج - عند اتّباع هذه الطريقة - الكائنات، ينشئها ويعدّل عليها؛ تشكلّ الكائنات البرنامج. ** تغيّر البرمجة كائنية التوجّه الطريقة التي تُكتَب وتُنظَّم بها البرامج. كتبنا في الفصول السابقة برامج تعتمد على الدوالّ، وهي طريقة برمجيّة تُسمَّى البرمجة الإجرائية Procedural programming. فلنكتشف الآن كيف نكتب شفرة كائنية التوجّه. جافاسكريبت والكائنات تدعم جافاسكريبت، مثل لغات برمجة أخرى، البرمجة بالكائنات. كما توفّر كائنات معرَّفة مسبقا مع إتاحة الفرصة لإنشاء كائنات جديدة. إنشاء كائن في ما يلي تمثيل جافاسكريبت لقلم حبر جاف أزرق اللون علامته التجارية Bic. const pen = { type: "حبر جاف", color: "أزرق", brand: "Bic" }; يمكن إنشاء كائنات جافاسكريبت، كما ذكرنا سابقا، بسهولة بتعيين خاصيّات الكائن ضمن زوج أقواس معكوفة {...}. كلّ خاصيّة هي زوج من المفاتيح والقيم. يُسمَّى الكائن المعرَّف سابقا بالكائن الحَرْفي Object literal. ملحوظة: النقطة الفاصلة ; بعد زوج الأقواس اختيارية، إلا أنه من الآمن إضافتها على كلّ حال. تعرِّف الشفرةُ أعلاه متغيّرا يُسمَّى pen قيمته كائن، يمكننا القول إذن إن pen كائن. لهذا الكائن ثلاث خاصيّات هي: type (النوع)، color (اللون) وbrand (العلامة التجارية). لكلّ خاصيّة اسمٌ وقيمة، كما أنها متبوعة بفاصلة لاتينية , (ما عدا الخاصيّة الأخيرة) الوصول إلى خاصيّات الكائن يمكن الوصول إلى قيم الخاصيّات بعد إنشاء الكائن بالتنويت النقطي Dot notation مثل myObject.myProperty. const pen = { type: "حبر جاف", color: "أزرق", brand: "Bic" }; console.log(pen.type); // "حبر جاف" console.log(pen.color); // "أزرق" console.log(pen.brand); // "Bic" الوصول إلى خاصيّة كائن هو عبارة Expression تنتج قيمة. يمكن تضمين هذه العبارة في عبارات أكثر تعقيدا. يوضّح المثال التالي كيفية عرض خاصيّات القلم السابق في تعليمة واحدة: const pen = { type: "حبر جاف", color: "أزرق", brand: "Bic" }; console.log(`أكتب بقلم ${pen.type} لونه ${pen.color} وعلامته التجارية ${pen.brand}`); التعديل على كائن يمكن تعديل قيم الخاصيّات في كائن بعد إنشائه بالصيغة myObject.myProperty = newValue. const pen = { type: "حبر جاف", color: "أزرق", brand: "Bic" }; pen.color = "أحمر"; // تغيير لون القلم console.log(`أكتب بقلم ${pen.type} لونه ${pen.color} وعلامته التجارية ${pen.brand}`); توفّر جافاسكريبت إمكانية الإضافة الديناميكية لخاصيّات جديدة لكائن أنشأته قبْلا: const pen = { type: "حبر جاف", color: "أزرق", brand: "Bic" }; pen.price = "2.5"; // تعيين خاصية لسعر القلم console.log(`يبلغ سعر قلمي ${pen.price}`); البرمجة بالكائنات تعلّم الكثير من الكتب والدورات البرمجة كائنية التوجّه عبر أمثلة عن الحيوانات، السيّارات أو الحسابات المصرفية. فلنجرّب أمرا ألطف ولننشئ لعبة تقمّص أدوار Role playing game مصغَّرة باستخدام الكائنات. تُعرَّف كلّ شخصية في ألعاب تقمّص اﻷدوار بصفات مميَّزة عدّة مثل القوّة، القدرة على التحمّل والذكاء. في ما يلي لقطة شاشة للعبة تقمّص أدوار شهيرة على الإنترنت. سيكون للشخصيّات - في مثالنا الأبسط كثيرا - ثلاثُ صفات مميّزة: الاسم Name، الصّحة Health (عدد نقاط الحياة)، القوة Strength. مثال ساذج فلنقدّم أورورا، الشخصيّة الأولى في لعبتنا لتقمّص الأدوار: const aurora = { name: "أورورا", health: 150, strength: 25 }; للكائن aurora ثلاث خاصيّات: health، name وstrength. ملاحظة: يمكن - كما ترى في المثال أعلاه - إسناد أعداد، سلاسل محارف وحتى كائنات أخرى إلى خاصيّات الكائنات. تستعدّ أورورا للبدء في سلسلة من المغامرات العظيمة التي ستحدّث بعض منها خاصيّات الشخصيّة. تأمل المثال التالي: const aurora = { name: "أورورا", health: 150, strength: 25 }; console.log(`يوجد لدى ${aurora.name} نقاط قوة قدرها ${aurora.health} وقوة تبلغ ${aurora.strength}`); // أصاب سهم أورورا وبالتالي تقل نقاط الحياة aurora.health -= 20; // تتجهّز أورورا بقلادة قوة aurora.strength += 10; console.log(`يوجد لدى ${aurora.name} نقاط قوة قدرها ${aurora.health} وقوة تبلغ ${aurora.strength}`); التعريف بالتوابع احتجنا في الأمثلة السابقة إلى كتابة تعليمات console.log طويلة في كلّ مرة نريد عرض حالة الشخصية. توجد طريقة أنسب للوصول إلى هذا الغرض. إضافة تابع لكائن تأمل المثال التالي: const aurora = { name: "أورورا", health: 150, strength: 25 }; // ترجع وصف الشخصية function describe(character) { return `يوجد لدى ${character.name} نقاط صحة قدرها ${character.health} وقوة تبلغ ${character.strength}`; } console.log(describe(aurora)); معامل الدالة describe() هو كائن. تصل الدالة إلى خاصيّات الكائن وتنشئ سلسلة المحارف التي تصف الشخصية. أدناه مقاربة بديلة تستخدم الدالة describe() داخل الكائن. const aurora = { name: "أورورا", health: 150, strength: 25, // ترجع وصف الشخصية function describe(character) { return `يوجد لدى ${character.name} نقاط صحة قدرها ${character.health} وقوة تبلغ ${character.strength}`; } }; console.log(aurora.describe()); يتوفّر الكائن الآن على خاصيّة جديدة: describe(). قيمة هذه الخاصيّة دالة تُرجِع وصفا نصيًّا للكائن. نتيجة التنفيذ مطابقة تماما لما سبق. تُسمّى خاصيّة كائن عندما تكون قيمتها دالة بالتابع. تُستخدَم التوابع لتعريف إجراءات على كائن. يضيف التابع سلوكا إلى الكائن. استدعاء تابع في كائن فلنتأمل السطر الأخير من المثال السابق: console.log(aurora.describe()); نستخدم العبارة aurora.describe() لعرض وصف الشخصية بدلا من describe(aurora)، وهنا فرق جوهري. تستدعي العبارة describe(aurora) الدالة describe() مع تمرير الكائن aurora في المعطيات. الدالة خارجة عن الكائن. هذا مثال على البرمجة الإجرائية. تستدعي العبارة aurora.describe() الدالة describe() في الكائن aurora. الدالة خاصيّة من خاصيّات الكائن: تابع. هذا مثال على البرمجة كائنية التوجه. صيغة استدعاء التابع myMethod() في myObject هي myObject.myMethod(). تنبيه: تذكّر الأقواس، حتى وإن كانت خاوية، عند استدعاء تابع. الكلمة المفتاحية this تأمل جيّدا متن التابع describe() في المثال التالي: const aurora = { name: "أورورا", health: 150, strength: 25, // ترجع وصف الشخصية describe() { return `يوجد لدى ${this.name} نقاط صحة قدرها ${this.health} وقوة تبلغ ${this.strength}`; } }; سترى كلمة مفتاحية جديدة: this. تُعيَّن هذه الكلمة المفتاحية تلقائيا داخل تابع في جافاسكريبت وتمثّل الكائن الذي استُدعِي فيه التابع. لا يستقبل التابع describe() أي معاملات. يستخدم التابع this للوصول إلى خاصيّات الكائن الذي استُدعِي فيه. الكائنات المعرَّفة مسبقا في جافاسكريبت تتوفّر جافاسكريبت على كائنات عدّة معرَّفة مسبقا تخدم أغراضا متفرّقة. رأينا في ما مضى بعضا منها: يمنح الكائن console الوصول إلى بيئة الطرفية. التعليمة console.log() هي في الواقع استدعاء لتابع. يحوي الكائن Math خاصيّات رياضية كثيرة. على سبيل المثال، تُرجع الخاصيّة Math.PI قيمة تقريبية للعدد π، ويرجع التابع Math.random() عددا عشوائيا بين 0 و1. حان وقت كتابة الشفرة! إضافة تجربة الشخصية حسّن برنامج لعبة تقمّص الأدوار بإضافة خاصيّة التجربة؛ على أن يكون اسمها xp وقيمتها الابتدائية 0. يجب أن تظهر التجربة ضمن وصف الشخصية. // للإنجاز: إنشاء الكائن character هنا. // أصاب سهم أورورا وبالتالي تقل نقاط الحياة aurora.health -= 20; // تتجهّز أورورا بقلادة قوة aurora.strength += 10; // تعلّمت أورورا مهارة جديدة aurora.xp += 15; console.log(aurora.describe()); نمذجة Modeling كلب أكمل البرنامج التالي لإضافة تعريف بالكائن dog (كلب). // للإنجاز: أنشئ الكائن dog هنا console.log(`${dog.name} كلب نوعه ${dog.species} يبلغ طوله ${dog.size}`); console.log(`انظر هرّة! ${dog.name} ينبح: ${dog.bark()}`); نمذجة دائرة أكمل البرنامج التالي لإضافة تعريف الكائن circle (دائرة). يُدخل الزائر قيمة شعاع الدائرة const r = Number(prompt("أدخل قيمة شعاع الدائرة:")); // للإنجاز: أنشئ تعريف الدائرة هنا console.log(`يبلغ محيط الدائرة ${circle.circumference()}`); console.log(`تبلغ مساحة الدائرة ${circle.area()}`); نمذجة حساب مصرفي أنشئ برنامجا ينشئ كائن account يمثّل حسابا مصرفيا لديه الميزات التالية: خاصيّة name قيمتها “أحمد”. خاصيّة balance قيمتها 0. تابع credit تضيف القيمة (سالبة أو موجبة) المُمرَّرة في المعطى إلى رصيد الحساب balance. تابع describe يُرجع وصف الحساب. استخدم هذا الكائن لعرض وصف حساب مصرفي، أضف 250 إلى رصيده، اسحب منه 80 ثم اعرض وصفه مرة أخرى. تحصُل على الآتي عند عرض وصف البرنامج في المرة الأولى: “المالك: أحمد، الرصيد: 0” وعلى ما يلي في المرة الثانية: “المالك: أحمد، الرصيد: 170” ترجمة - بتصرّف - للفصل Create your first objects من كتاب The JS Way.