البحث في الموقع
المحتوى عن 'مجال'.
تم العثور على 3 نتائج
-
ما الذي تعنيه كلمة "مجال" برأيك؟ قد تبدو من اسمها بأنّها تشير إلى جزءٍ من شيفرة التّطبيق، ربّما تم عملها لنتجنّب استخدام المجال العام الذي يسبّب العديد من المشاكل. يبدو أنّ الأمر بسيط، وإنّه لمن الحكمة أن يقوم إطار العمل بتطبيق شيءٍ كهذا، ربّما ليس علينا التّفكير في أمر المجالات أكثر من ذلك، هل يمكننا الانتقال للفصل التالي؟ ليس بهذه السّرعة، لن يكون هذا الفصل طويلًا ولكنه سيغطي أمرين شديدي الأهمّيّة: وراثة المجالات، وهرميّة المجالات، فقد يحوي تطبيق Angular نموذجيًّا على العشرات، المئات وربّما الآلاف من المجالات. قبل أن نبدأ، لنقم بإعداد البيئة لتُلائم أمثلة هذا الفصل. التهيئةفي فصل المبادئ، تعلّمنا كيف نقوم بإضافة التّوجيه ng-app إلى العنصر الذي نرغب بأن تقوم Angular بمعالجته. <body ng-app="app"> <!-- الأمثلة هنا --> </body>الوسيط الذي نمرره إلى التّوجيه ng-app هو اسم الوحدة التي تشكل جذر التطبيق الحالي (في المثال قمنا باستخدام الاسم app على سبيل الاصطلاح). سنقوم بتغطية الوحدات بعمق في فصل لاحق. أما الآن فاعتبر السّطور التّالية مجرّد شيفرات اصطلاحية يمكنك نسخها دون فهم محتواها. angular.module('app', []); angular.module('app').config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]);والآن بعد كتابة تلك الشّيفرات الخارجة عن الدّرس، يمكننا الدخول في الموضوع. scope$في الفصل الماضي، المتحكمات، تعلّمنا كيفيّة تحضير النّموذج عن طريق ربط العناصر (الخصائص properties) إلى المرجع scope$. لنقم بتكرار التمرين ثانيةّ. function NameController($scope) { $scope.name = "First"; }باستخدام التّوجيه ng-controller يمكننا استدعاء تابع التّحكم المكتوب أعلاه، وذلك ضمن سياق أحد عناصر المستند، وعندها ستكون أيّ بيانات قمنا بإسنادها للمجال متاحةً للاستخدام داخل العنصر. <p ng-controller="NameController"> {{name}} </p>الناتج Firstعناصر المستند التي تقع خارج العنصر الذي قمنا باستدعاء المتحكّم NameController فيه، لن تكون قادرةً على الوصول إلى العناصر المرتبطة بالمتحكّم، لنجرّب ذلك. <div> <p> Outside the scope: {{name}} </p> <div ng-controller="NameController"> <p> Inside the scope: {{name}} </p> </div> </div>الناتج Outside the scope: Inside the scope: Firstوهذا المثال يوضّح ارتباط عمل المتحكّم والمجال معًا، والآن لننظر إلى الحالة المعاكسة، تطبيق Angular بمجال واحد. rootScope$تحاول Angular جاهدةً أن تتأكد من ابتعادنا عن المشاكل أثناء استخدام المجالات، لذا تقوم بإنشاء مجالٍ جديد لكلّ متحكّم. يتمّ بناء المجالات وفق بنيةٍ هرميّة، ويتربّع في جذر هرم المجالات في كلّ تطبيقات Angular مجالٌ أبٌ وحيدٌ لجميع المجالات، يمكننا الوصول إلى هذا الجذر باستخدام الوسيط ذو الاسم المخصص rootScope$ داخل المتحكّم، واستخدامه بدلًا من المرجع المعتاد (والمستحسن) scope$. function RootNameController($rootScope) { $rootScope.name = "First"; }الشّيفرة واضحة وليس فيها صعوبة، وهي تعمل بشكل طبيعي. <p ng-controller="RootNameController"> {{name}} </p>الناتج Firstولكنّ المشاكل تبدأ بالظّهور عندما نحاول الوصول إلى عنصر له الاسم نفسه من متحكّم آخر. function SecondRootNameController($rootScope) { $rootScope.name = "Second"; }هذا لا يبشّر بالخير، فالمرجع rootScope$ وحيد (singleton) داخل التّطبيق، ولا يمكن أن يكون هناك سوى عنصر واحد له الاسم name. <p ng-controller="RootNameController"> {{name}} </p> <p ng-controller="SecondRootNameController"> {{name}} </p>الناتج Second Secondمن الواضح أنّ المتحكّم SecondRootNameController قد استبدل القيمة التي أسندها RootNameController للعنصر name. حسنًا، هذه هي مشكلة المتغيرات العامة، أليس كذلك؟ العزلتقدم Angular لنا بيئة آمنة عن طريق إنشاء مجالٍ خاصّ بكلّ متحكّم، لنقم بإعادة كتابة المتحكّمات السّابقة لتقوم بتهيئة النّموذج تهيئةً صحيحة، باستخدام المرجع scope$ بدلًا من rootScope$، وحاول مقارنة ذلك مع المثال السّابق الذي استخدمنا فيه rootScope$ لتعرف سبب إنشاء مجال لكلّ متحكّم، سنستخدم المتحكّمين التاليين: function SecondNameController($scope) { $scope.name = "Second"; }<p ng-controller="NameController"> {{name}} </p> <p ng-controller="SecondNameController"> {{name}} </p>الناتج First Secondأظهر المثال المخرجات الصحيحة، القيمة الصحيحة للعنصر name لكلا المتحكّمين. هذا العزل هو النّتيجة التي نحصل عليها عندما لا يكون أيٌّ من المتحكّمين ابنًا للآخر، أيّ أننا لم نقم بتعريف أحد المتحكّمين داخل عنصر في المستند محتوًى داخل متحكّمٍ آخر. ما الذي سيحدث لو قمنا بجعلهم متداخلين بدلًا من ذلك؟ المجالات المتداخلةبتعديلٍ صغيرٍ على المثال السابق، سنقوم بتحريك SecondNameController إلى عنصرٍ ابن للعنصر div الذي يقوم بتحميل المتحكّم NameController، وهذه الحالة هي ما يسمّى بالمجالات المتداخلة (nested). <div ng-controller="NameController"> <p> {{name}} </p> <p ng-controller="SecondNameController"> {{name}} </p> </div>الناتج First Secondالأمور تسير على ما يُرام، ولا يزال العنصر name معزولًا في كلا المجالين، ماذا لو قمتَ بعكس ترتيب العنصرين p في المثال السابق؟ هيا قم بتجربة ذلك، يُفترض بأنك سترى أنّ العنصرين name قد انعكس ترتيبهما. في الحقيقة، لا يعني ذلك بأنّ المجالين معزولين، فـAngular تقوم بتنظيم المتحكّمات في بنية هرميّة بالاعتماد على موضع المتحكّم في بنية المستند، والمتحكّم الابن يرث عناصر وخصائص أبيه. يرجع السبب في عدم حدوث تغيير في قيمة العنصر name في المثال السابق، إلى خاصّيّة التظليل، حيث يقوم العنصر name في الابن بتظليل قيمة العنصر name في الأب. لنجرّب الحصول على دليلٍ على هذا السلوك عن طريق تغيير اسم العنصر في المتحكّم الابن. function ChildController($scope) { $scope.childName = "Child"; }سنحاول إخراج قيمتي العنصرين في كلا المجالين، الأب والابن. <div ng-controller="NameController"> <p> {{name}} and {{childName}} </p> <p ng-controller="ChildController"> {{name}} and {{childName}} </p> </div>الناتج First and First and Childمن الواضح أنّ المتحكّم الأب NameController لا يملك صلاحيّةً للوصول إلى عناصر المتحكّم الابن، بينما يمكن للمتحكّم الابن ChildController أن يصل إلى عناصره وعناصر أبيه. بما أنّ العنصر name هو عنصر موروث من الأب، لا بدّ من أنّ التغيير على قيمته في مجال المتحكّم الابن سيؤدّي إلى تغيير قيمته في مجال الأب. سنضيف خانة إدخال ونربطها بالعنصر name. <div ng-controller="NameController"> <p> {{name}} </p> <p ng-controller="ChildController"> {{name}} </p> <input type='text' ng-model='name'> </div>إذا حاولت تعديل قيمة العنصر name في المثال السابق، ستجد أنّه يعمل كما هو متوقّع، فقيمة العنصر name تتغيّر في كلا المجالين، ولكن لاحظ بأنّنا نقوم بالتّغيير ضمن مجال الأب فقط. الوراثةقد ترغب أيضًا بتغيير قيمة العنصر name أيضًا في مجال الابن، ربّما تظنّ بأنّ هذا التغيير يجب أن ينعكس أيضًا على المتغير name في مجال الأب، لنجرّب ذلك، سنقوم بإضافة خانة إدخال لتسمح لنا بتعديل العنصر name في مجال الابن أيضًا. في العرض الخاصّ بالمثال، قم بالخطوات التالية بنفس الترتيب الذي سأذكره لك:أوّلًا، غيّر القيمة في خانة الإدخال العليا، ستلاحظ أنّ جميع القيم المرتبطة بالعنصر name قد تمّ تحديثها.ثانيًا، غيّر القيمة في خانة الإدخال السّفلى. <div ng-controller="NameController"> <p> name: {{name}} <br> <input type='text' ng-model='name'> </p> <p ng-controller="ChildController"> name: {{name}} <br> <input type='text' ng-model='name'> </p> </div>هل فاجَأَتك النّتيجة؟ تستخدم Angular طريقة JavaScript في وراثة الهيكل الخارجي (prototypal inheritance) هذا جيّدٌ إن كنت متمرّسًا فيها، فليس عليك تعلّم أيّ شيءٍ جديدٍ هنا، ولكنّه سيّءٌ لمن لم يواجه هذا النّوع من الوراثة من قبل، ففهمه ليس أمرًا بديهيًّا. تقول القاعدة: “إنّ تغيير قيمة عنصر ما في كائن في JavaScript، يؤدّي إلى إنشاء هذا العنصر في الكائن”، وهذه القاعدة البسيطة تشكّل مشكلةً أثناء التّعامل مع العناصر الموروثة التي تكون مظلّلة بالعنصر الخاص بالكائن الابن. حدث الأمر كالتّالي: في البداية لم يكن هناك أيّ عنصر اسمه name داخل الابن، ولكن عندما قمنا بتعديل النّصّ في خانة الإدخال السّفلى قامت Angular بإسناد النّص إلى العنصر name في الابن حيث تمّ إنشاء هذا العنصر في الابن، وعند حدوث ذلك، قام هذا العنصر بتظليل العنصر name في الأب، ومن ثمّ لم يعُد بإمكاننا الوصول إليه من الابن. كيف يمكننا التّعامل مع هذا الأمر في Angular، بحيث نتمكّن من تعديل بيانات النّموذج في مجالٍ موروث؟ لن يكون ذلك صعبًا، سيكون علينا فقط نقل العنصر name إلى داخل كائنٍ آخر. function InfoController($scope) { $scope.info = {name: "First"}; }function ChildInfoController($scope) { $scope.info.childName = "Child"; }<div ng-controller="InfoController"> <p> {{info.name}} and {{info.childName}} <br> <input type='text' ng-model='info.name'> </p> <p ng-controller="ChildInfoController"> {{info.name}} and {{info.childName}} <br> <input type='text' ng-model='info.name'> </p> </div>لاحظ أن ChildInfoController يعتمد على أبيه في إنشاء الكائن info، ما الذي سيحدث لو قمنا بتعديل شيفرة المتحكّم ChildInfoController واستبدلنا جسم التابع بالعبارة: scope.info = {childName: "Second$"};جرّب ذلك، سترى بأننا عدنا إلى إنشاء عنصرٍ جديد في الابن، مع تأثير التظليل الذي رأيناه سابقًا. scope.$watchتتعامل Angular أثناء عمليات الربط ثنائيّ الاتجاه مع العناصر في المجال بالطريقة التالية: عندما تستخدم خانة الدّخل المرتبطة للقيام بأيّ تغيير، يتمّ تحديث واجهة المستخدم في كلّ مكان، وهذا يختلف عن “الخصائص المحسوبة”(computed properties) وهي البيانات المأخوذة من مجال بيانات آخر. في المثال التالي، العنصر sum هو خصيصة محسوبة. function SumController($scope) { $scope.values = [1,2]; $scope.newValue = 1; $scope.add = function() { $scope.values.push(parseInt($scope.newValue)); }; // Broken -- doesn't trigger UI update $scope.sum = $scope.values.reduce(function(a, b) { return a + b; }); }يتم حساب قيمة العنصر sum فعليًّا عن طريق عملية بسيطة تستخدم التابع reduce في العبارة الأخيرة في المتحكّم SumController. في القالب الخاص بهذا المثال، سنستخدم أداة الدّخل select للسّماح للمستخدم باختيار الرّقم (2،1 أو 3) لإضافته إلى نهاية المصفوفة values.(كنقطة جانبيّة: لاحظ أنّ المتحكّم يعطي قيمةً ابتدائيّة للمتغيّر newValue, ولو لم نقم بذلك لكانت Angular ستضيف الاختيار الفارغ للقائمة في العنصر select، وذلك لتجنّب القيمة العشوائيّة التي يخزّنها newValue للخيار الأوّل المولّد عن طريق التّوجيه ng-options. هذا السلوك لا علاقة له بالمجالات ولكنّ العلم به أمرٌ مفيد.) <p ng-controller="SumController"> <select ng-model="newValue" ng-options="n for n in [1,2,3]"></select> <input type="button" value="Add" ng-click="add()"> The sum of {{values}} is {{sum}}. </p>عند النقر على Add ستتغيّر القيمة المعروضة لـsum، ولكن للأسف، الشّيفرة الخاصة بالمتحكّم تحتوي على أخطاء، ولن يعمل المتحكّم كما توقّعنا. لنقم الآن بتصحيح الخطأ، وذلك بنقل العبارة التي تقوم بالحساب الحقيقي للقيمة sum إلى تابع استدعاءٍ خلفيّ (callback). وعندما سنمرر هذا التابع كوسيط إلى scope.$watch$ مع وسيط آخر يمثّل عبارة المتابعة (في هذه الحالة هو اسم العنصر الذي يتم حساب sum منه)، سيؤدّي ذلك إلى جعل sum يتمّ إعادة حسابها كلّما تغيّر values. function SumController($scope) { $scope.values = [1,2]; $scope.newValue = 1; $scope.add = function() { $scope.values.push(parseInt($scope.newValue)); }; $scope.$watch('values', function () { $scope.sum = $scope.values.reduce(function(a, b) { return a + b; }); }, true); }والآن ستتغيّر قيمة العنصر sum ديناميكيًّا عند إضافة العناصر للمصفوفة. scope.$applyجميع التّوجيهات المدمجة في Angular والخاصة بعمليّة الربط ثنائيّ الاتجاه كاملة المزايا، ولكنّك قد تجد من فترة إلى أخرى سلوكًا تحتاج إلى إضافته. مثلًا، ماذا لو أردنا أن يقوم المستخدم بمسح الحالتين الحالة الحاليّة لخانة الدخل النّصّيّة و الحالة المرتبطة بها وذلك عندما يضغط زرّ esc؟ كيف يمكننا كتابة شيفرة التّعامل مع هذا الحدث؟ <div ng-controller="EscapeController"> <input type="text" ng-model="message"> is bound to "<strong ng-bind="message"></strong>". Press <code>esc</code> to clear it! </div>يجب علينا أوّلًا أن نصرّح عن المتغيّر ذو الاسم المخصّص element$ وتمريره كوسيط للمتحكّم، وذلك للسّماح لـAngular بحقن مرجعٍ في العنصر المرتبط بالمتحكّم. يمكننا استخدام التابع bind لتسجيل استدعاء خلفيّ لحدث keyup الذي يختبر ضغط الزّرّ esc، وداخل تابع الاستدعاء الخلفيّ هذا، سنقوم بتحديث عنصر المجال. قم بتجربة المثال التالي، اكتب شيئًا ثم اضغط esc. function EscapeController($scope, $element) { $scope.message = ''; $element.bind('keyup', function (event) { if (event.keyCode === 27) { // esc key // Broken -- doesn't trigger UI update $scope.message = ''; } }); }ليس بعد، بما أنّنا نتعامل مباشرةً (تقريبًا) مع عناصر المستند، سنحتاج إلى إخبار Angular عندما نريد أن تقوم بإعادة رسم العرض. نقوم بذلك عن طريق تغليف التّغييرات التي نقوم بها بتابع استدعاءٍ خلفيّ نمرّره إلى scope.$apply$. function EscapeController($scope, $element) { $scope.message = ''; $element.bind('keyup', function (event) { if (event.keyCode === 27) { // esc key $scope.$apply(function() { $scope.message = ''; }); } }); }جرّبها الآن، بعد أن أخبرنا Angular بما نريد، سيعمل كلّ شيء كما يجب. خلاصةإن حاولت تطبيق مفاهيم نموذج-عرض-متحكم (Model-view-controller (MVC على Angular، ستكون المجالات لغزًا بالنّسبة لك، قد تظنّ بأنّ الأمر بسيط، وأنّ المجالات هي جزءٌ من طبقة النّموذج، ولكن في Angular لا يكون الكائن نموذجًا حتّى يكون قابلًا للوصول إليه كعنصرٍ في المجال. ولكنّ القصّة تصبح أكثر إثارةً عندما ترى طريقة ارتباط المجالات بالمستند عن طريق المتحكّمات والتّوجيهات. بوضع سؤالنا الأكاديميّ جانبًا، فإن المجالات بديهيّةٌ وسهلة الاستخدام كما بيّنت أمثلة هذا الفصل. ترجمة وبتصرّف للفصل الرابع من كتاب: Angular Basics لصاحبه: Chris Smith. -
.png.bd832e7239af652b1e7356f30e5a179d.png)
طلبت منك في الفصل السابق (المبادئ) أن تكبح جماح JavaScript بداخلك ريثما نستكشف القيمة الحقيقيةّ التي تقدّمها Angular، وهي تقديم امتدادات قويّة لـHTML لمطوّر النّهاية الأمامية front-end. لا تنتهي قصّة Angular هنا بالطّبع، والمنهج في مشاريع Angular هو تخصيص السّلوكيات عن طريق JavaScript، فإذا كنت تتحرّق شوقًا في الفصل الأوّل للبدء بكتابة شيفرات حقيقيّة فقد حان الوقت لذلك، إنه وقت كتابة شيفرات JavaScript. أكثر الطرق شيوعًا لتعديل العرض في Angular باستخدام JavaScript هي عن طريق استخدام متحّكم، وأبسط طريقة لكتابة متحكّم هي باستخدام تابع بناء (constructor) بسيط. لنبدأ بمثالٍ بسيط لنفهم تمامًا ما الذي يحدث، المثال التّالي لا يقوم بأي شيء، ولا يطبع "!Hello World" حتّى. ها هو متحكّمنا البسيط. function EmptyController() { };سنحتاج إلى تضمين مكتبة Angular ضمن الصفحة لتتم معالجة خصائص المجال التي تم تحضيرها عن طريق المتحكّم، ولذا يجب نسخ الشّيفرة التّالية ولصقها داخل العنصر head في كلّ الأمثلة. <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script> </head> <body ng-app="app"> <!-- كل الأمثلة توضع هنا --> </body> </html>يجب علينا ضبط إعدادات تطبيق Angular داخل مستند HTML ليقوم بتحميل الوحدة app، فقد تعرفّنا في الوحدة الأولى المبادئ على التّوجيه ng-app الذي نضيفه لأيّ عنصر في المستند لتقوم Angular بمعالجة ما بداخله، انظر الآن إلى استخدام ng-app في المثال التّالي، هل يمكنك الانتباه إلى الإضافة الجديدة؟ <body ng-app="app"> </body>يُمكن تعريف المتحكّمات كتوابع بناء معرّفة في المجال العام (global scope)، وهذه هي الطّريقة التي سنستخدمها في أمثلتنا في هذا الفصل. كان الشكل البسيط للمتحكّمات مدعومًا في Angular حتى النسخة 1.3 لتسهيل انطلاق المطوّرين مع المكتبة، ولكنّ ذلك يتطلب الآن إنشاء وتسمية وحدة للتطبيق. سنناقش تفاصيل استخدام angular.module في الفصول القادمة الوحدات، حقن التابعة، والخدمات. يمكنك التعامل مع المثال التّالي على أنّه شيفرة معياريّة مطلوبة: angular.module('app', []); angular.module('app').config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]);والآن بعد كتابة هذه الشّيفرة الخارجة عن سياق الحديث، لنعد إلى متحكّمنا عديم الفائدة. ng-controllerكالعادة، الطّريقة التي سنتّبعها للقيام بأيّ شيء، هي استخدام الموجّهات، سنستخدم الموجه ng-controller الذي يقوم بالعثور على التّابع الذي يتمّ تمرير اسمه إليه ثم استدعائه. <p ng-controller="EmptyController"> </p>وكما توقّعتَ، لن يقوم هذا التّابع بأيّ شيء، والآن إذًا ما هي هذه المتحكّمات وكيف نستخدمها؟ بناء النموذجينصّ المرجع الرسمي في النظرة العامة للمفهوم على أنّ وظيفة المتحكّم هي "الكشف عن المتغيرات والوظائفيّة للعبارات والتّوجيهات" وتشير كلمة "الوظائفية" إلى توابع الاستدعاء الخلفي (callback)، وسنتطرق إليها قريبًا، أمّا الآن فسنتكلّم عن تهيئة "المتغيّرات"، أو بعبارة أخرى تحضير النّموذج. أرجو منك أن تبقي في ذهنك أنّ وحدة Angular ليست سوى JavaScript عاديّة يمكن الوصول إليها ضمن مجال عبارة ما، وبذلك سيكون تحضير النّموذج أمرًا سهلًا للغاية. سنتمكّن من كتابة JavaScript عاديّة دون أيّ قيود، لنقم بإضافة عنصر إلى المتحكّم الفارغ، وليكن هذا العنصر سلسلة نصّيّة. function MessageController() { this.message = "This is a model."; }أمرٌ بسيط، أليس كذلك؟ هل قمنا الآن بإنشاء وحدة؟ ماذا تتوقّع؟ الإجابة هي "تقريبًا"، فعندما يكون بإمكاننا الوصول إلى العنصر message ضمن مجال العرض، ستكون هذه وحدةً بالفعل. أحد طرق القيام بذلك هي الكشف عن كامل المتحكّم كعنصرٍ بداخل المجال، ولن يكون هذا صعبًا كما تظنّ، كلّ ما عليك معرفته هو التركيب النحويّ المناسب للقيام بذلك. Controller as propertyNameيشرح توثيق المكتبة بالنّسبة للتّوجيه ng-controller بأنه يمكنك تمرير عبارة Controller as propertyName كوسيط للتّوجيه ng-controller، وهذه الميزة متاحة في النسخة 1.2 فما فوق. <p ng-controller="MessageController as controller"> {{controller.message}} </p>الناتج This is a model.رائع، لقد قمنا للتّو بتحضير بيانات النّموذج باستخدام متحكّم. صحيحٌ بأنّ هذه الطّريقة في ربط الخاصّية بالمرجع this مباشرة وليس فيها الكثير من التّعقيد، إلّا أنها تعطي انطباعًا خاطئًا بأنّ المتحكّم جزءٌ من النّموذج، وهذا غير صحيح، فالمتحكّم في الحقيقة يقوم بـتحضير النّموذج فقط. سيكون اختبار الشّيفرة وتتبّع أخطائها أكثر سهولةً عندما يتم الحدّ من الوصول إلى البيانات بمقدار ما يحتاج إليه العمل لا أكثر، كما أنّ الطّريقة السّابقة تضيف بعض الضجّة إلى شيفرة العرض، فجميع العناصر سيتم الوصول إليها عبر مرجع (reference) للمتحكّم. شيفرة العرض هي المكان الأكثر حساسيةً للضجيج في تطبيق ويب، فهي أوّل مكانٍ قد نبدأ فيه بفقد القدرة على فهم الهدف من الشّيفرة بلمحة سريعة. أخيرًا، المتحكّمات تعمل يدًا بيد مع المجال، لذا ولأهدافٍ تعليميّة سيكون من الأفضل رؤية مرجع (reference) للمجال وامتلاك القدرة على التّحكم به، ومع متحكّم كهذا سيكون بإمكاننا الكشف عن العناصر التي نحتاجها في العرض فقط، بدل الكشف عن المتحكّم بما فيه، وسنتّبع في هذا الكتاب هذه الطّريقة بالكشف الصّريح عن العناصر المستخدمة في العرض داخل المتحكّم. أوّل سؤالٍ يتبادر إلى الذّهن الآن هو: "كيف سنحصل على مرجعٍ للمجال؟"، هل سننشئ واحدًا عن طريق new أم سنطلب الحصول على واحدٍ بطريقة ما؟ حقن التابعيةسنحصل عليه عن طريق حقن التابعية، ربما تكون قد لاحظت أيضًا أنني لم أكتب أي شيفرة لإنشاء المتحكّم مثل: var controller = new MessageController(); مثلًا، فمن الذي يقوم بإنشاء المتحكّم المستخدم في العرض إذًا؟ Angular هي من يقوم بذلك طبعًا، فـAngular هي حاوية لتبادل التحكم Inversion of Control تدير دورة حياة مكونات التّطبيق، فعندما نحتاج إلى متحكّم جديد أو إلى مكوّنٍ آخر، ستقوم Angular ببنائه تلقائيًّا، وهذا يوفر الجهد، ولكنّ الأمر الأكثر أهمية هو أنه يسمح لـAngular بـحقن المصادر، أو التّبعيّات إلى المكوّن الجديد. scope$يحتاج متحكّمنا فقط إلى مُعامل يُسمّى scope$ وذلك بفضل إطار العمل الذي يُدار عن طريق حقن التّابعية، كما أنّ تسمية هذا المُعامل هامّة جدًّا. ويجب عليك أن تعرف خطورة تقصير شفرة JavaScript داخل مشروعك، فهذا قد يؤدي إلى تدمير آلية عمل حقن التّابعية. (ولكن لا تقلق، فهناك حلّ التفافيّ لهذه المشكلة، سنتطرّق إليه في فصل حقن التابعية). function MessageController($scope) { $scope.message = "This is a model."; }بإضافتنا للمعامل scope$ إلى تابع البناء نكون قد أخبرنا Angular بحاجتنا إلى مرجع لمجال العرض، والآن بدلًا من تعريف العنصر message داخل this (أي داخل المتحكّم)، قمنا بتعريفه مباشرةً داخل المجال. في المثال التّالي، قمنا بإزالة as controller من التّوجيه ng-controller، كما أنّ العبارة controller.message أصبحت فقط message وهي العنصر الوحيد الذي قمنا بربطه بالمجال. <p ng-controller="MessageController"> {{message}} </p> الناتج This is a model.رغم أن الطّريقتين تعملان بشكل صحيح، إلا أننا سنستخدم طريقة المرجع scope$، فكما ترى، حقن التّابعية هو جزء مكمّل لاستخدام Angular، ويجب أن يصير مألوفًا لنا. النموذج-العرض-المتحكم MVCيشير تعريف المتحكّم في المرجع الرسمي إلى أنّه يكشف “الوظائفيّة” للعرض، وقبل أن ننتقل إلى هذا الجزء يجدر بنا الحديث عن الفرق بين متحكّمات Angular وبين نموذج MVC التقليدي.(قد ترغب في تجاوز هذه الفقرة). تنصّ ويكيبيديا في مقال النّموذج-العرض-المتحكّم (MVC) على أنّ المتحكّم “يستلم المدخلات ويحوّلها إلى أوامر للنموذج أو للعرض.”، قد تكون عبارة “أوامر للنّموذج أو للعرض” صعبة الفهم في سياق الحديث عن Angular، فـAngular قامت بتبسيط نموذج MVC الخاص بها، باستخدام النّماذج الضّعيفة (anemic models) التي لا تحوي منطقًا برمجيًّا فيها. النّمط السّائد في Angular هذه الأيّام هو وضع كل منطق العمل، أو ما يُعرف أيضًا بمنطق النّطاق (domain logic) داخل المتحكّم. بعبارةٍ أخرى، تتّجه Angular نحو نموذج نحيل ومتحكّم سمين. إذا كنت تألف بعض الأنماط مثل نموذج النطاق الغنيّ (rich domain model) فربّما تجد طريقة Angular متخلّفةً بعض الشيء، أما أنا فأرى الأمر مجرّد طريقة لترتيب الأولويّات. فعند برمجة طرف المستخدم يكون الفرق الأكثر أهمّية هو بين شيفرة العرض التّريحية الموجّهة نحو المستند من جهة، وبين شيفرة JavaScript التي تتبع أسلوب الأوامر والمقادة بالبيانات والتي تعالج منطق العمل والبنية التحتية للتطبيق من جهة أخرى. أنا سعيدٌ لأن Angular ركّزت على ذلك فهذا انتصارٌ كبيرٌ لها، وقد يصبح ذات يومٍ فصل منطق العمل عن باقي مسؤوليات المتحكّم هو الأمر الأكثر أولويّة، وقد نرى توجّهات نحو نموذج أغنى. التوابعلنقم بكتابة متحكّم يكشف عن تابع بسيطٍ جدًّا، فقط لنختبر إمكانية استدعاء التوابع داخل العرض. لا بد من أنّك تذكر من الفصل الماضي أن Angular لا تسمح بتعريف التوابع داخل العرض. المتحكّم التّالي يقوم بإسناد تابع بسيط إلى عنصرٍ في العرض. function CountController($scope) { $scope.count = function() { return 12; } }ويمكننا استدعاء التّابع في العرض بكتابة شيفرة JavaScript عاديّة، اسم العنصر مع أقواس، فقط. <p ng-controller="CountController"> There are {{count()}} months in a year. </p>الناتج There are 12 months in a year.لاحظ أن التّابع لم يتم استدعاؤه ونسيانه بعد ذلك ببساطة، بل تمّ ربطه بالنّموذج. ما الذي يعنيه ذلك؟ ربّما بدأت بالتسليم بأن البنية التحتية في Angular هي الربط (binding)، ومرّة أخرى سأكرّر: لا تقوم Angular باستدعاء التّابع فقط عندما يتم إخراج العرض للمرة الأولى فقط، بل في أيّ وقتٍ يتم فيه تغيير النّموذج المرتبط، لنتمكّن من رؤية ذلك أثناء العمل سيتوجّب علينا كتابة تابع يستخدم عنصرًا من النّموذج. يستخدم التّابع add في المثال التّالي عنصرين في النّموذج، تم تعريفهما في المجال، وهما operand1 و operand1. ستقوم Angular باستدعاء التّابع وإخراج النتيجة كلّما تغيّر أحد العنصرين أو كليهما. function AdditionController($scope) { $scope.operand1 = 0; $scope.operand2 = 0; $scope.add = function() { return $scope.operand1 + $scope.operand2; } $scope.options = [0,1,2,3,4]; }لقد قمنا في الفصل الماضي بتغطية العديد من الأمثلة عن التّوجيه input في Angular، لذا سنستخدم الآن التّوجيه select لتغيير قيم النّموذج. لا بدّ من أنك لاحظت السّطر الأخير في الشّيفرة السابقة، حيث تمّ فيه تحضير نموذج خيارات options، وسنستخدم هذا النّموذج لبناء سلسلة داخل وسيط التّوجيه ng-options. سنستخدم العبارة x for x في بناء السّلسلة، ورغم أنها قد تبدو بلا فائدة لأنها تعيد عناصر السلسلة الأصلية كما هي، إلا أن التّوجيه يحتاج إلى كتابتها على أي حال.(عندما يكون النّموذج مكوّنًا من مصفوفة كائنات objects وهو الأكثر شيوعًا، يمكنك كتابة بانٍ للسّلسلة يقوم بإخراج العنصر name من الخيار المحدد، وذلك باستخدام x.name for x. <p ng-controller="AdditionController"> <select ng-model="operand1" ng-options="x for x in options"></select> + <select ng-model="operand2" ng-options="x for x in options"></select> = {{add()}} </p> إنه يعمل بشكل جيّد، ولكن بإمكاننا تحسين تصميم التّابع add عن طريق التّعميم، الذي سيكون مفيدًا إن أردنا استخدام التّابع مع وسطاء غير operand1 و operand2. فلنبدأ إذا بتعديل الشفرة ولنقم باستخراج الوسطاء من التابع. function AdditionController($scope) { $scope.number = 2; $scope.add = function(operand1, operand2) { return operand1 + operand2; } }يمكنك تمرير العناصر والقيم الفوريّة داخل العبارات، كما في JavaScript المعتادة. <p ng-controller="AdditionController"> {{add(number, 2)}} is not the same as {{add(number, "2")}} <br> 2 + 2 + 2 + 2 = {{add(2, add(2, add(2, 2)))}} </p>الناتج 4 is not the same as 22 2 + 2 + 2 + 2 = 8لنقم الآن بالكشف عن تابع استدعاء خلفي (callback) يمكنه معالجة عملٍ ما. الاستدعاءات الخلفية (Callbacks)في الفصل السابق، قمنا بتمرير عبارة إلى التّوجيه ng-click واستخدمناها للتّقليب بين قيمتين بوليانيتين للعنصر authorized، حيث قمنا بتهيئة القيمة الابتدائية للنموذج authorized باستخدام التّوجيه ng-init ثم تلاعبنا بقيمته عن طريق استدعاء خلفيّ سطريّ، فكتبنا "ng-click="authorized = !authorized، لنقم الآن بتعديل المثال عن طريق نقل التهيئة ووضع المتغيّر في مكانه الصحيح، في المتحكّم. function AuthController($scope) { $scope.authorized = true; $scope.toggle = function() { $scope.authorized = !$scope.authorized }; }والآن صار التّابع toggle متاحًا للاستخدام داخل المجال، والوسيط الذي سيتمّ تمريره للتوجيه ng-click سيبدو كأنه استدعاء للتابع: ()toggle ولكنه ليس كذلك كما ذكرنا سابقًا، إنها فقط سلسلة نصّيّة سيتم معالجتها لاحقًا عندما يقوم المستخدم بالنقر على الزر. <div ng-controller="AuthController"> <p> The secret code is <span ng-show="authorized">0123</span> <span ng-hide="authorized">not for you to see</span> </p> <input class="btn btn-xs btn-default" type="button" value="toggle" ng-click="toggle()"> </div>لا يزال المثال يعمل، والآن صار منطق التّابع toggle البسيط في مكانٍ أفضل. تشرح الكتب عادةً تقنيّاتٍ لإدارة التعقيدات باستخدام أمثلة شديدة البساطة لإيصال الإحساس العام بفائدة هذه التقنية، وقد قمنا بذلك هنا أيضًا. لقد طلبت إليك في الفصل الماضي أن تؤجّل حكمك على استخدام العبارات داخل نصوص HTML، فإذا كنت الآن قد أحببت طريقة Angular في تحسين نصوص HTML مع سلوك تفاعليّ، فقد تتساءل لم هذا التعقيد الزائد في المتحكّمات. أحد الأسباب التّقليدية لنقل الشّيفرة من سياقٍ معقّد(كالقالب) إلى واحدٍ أبسط (كالمتحكّم) هو تسهيل الاختبار وتصحيح الأخطاء لاحقًا. تتضح الفائدة من تسليم التعامل مع سلوك المستخدم إلى المتحكّم عندما نحتاج إلى كتابة شيفرات معقّدة، مثل مزامنة بيانات النّموذج مع المخدّم البعيد. خلاصةتعرفنا في هذا الفصل على JavaScript بداخل Angular، مكتوبة على شكل متحكّمات، والتي تتحمل مسؤولية تحضير البيانات للعرض كما ينصّ نمط MVC. تجعل المتحكّمات البيانات متاحةً للعرض عن طريق التصريح عن العناصر في كائن المجال scope$. في الفصل القادم سنأخذ نظرة أقرب لكائنات المجال، وسنتعرّف على كيفيّة تنظيمها في بنيةٍ هرميّة تتبع تقريبًا بنية الجزء الذي نعالجة في تطبيقنا ضمن مستند. ترجمة وبتصرّف للفصل الثالث من كتاب: Angular Basics لصاحبه: Chris Smith. -
تعرّفنا في الدّرس السّابق على جداول التّقطيع Hash وكيفيّة التعامل معها والدوال الخاصّة بها. سنتعرّف في هذا الدّرس على نوع آخر من المجموعات Collections وهو المجالات Ranges. تعدّ المجالات شكلًا آخر من المصفوفات Arrays التي تحدّثنا عنها في الدّرس الخامس إلا أنّها متسلسلة على نحوٍ محدّد وأسهل بكثير من حيث الإنشاء عن المصفوفات. أمثلة على المجالات، الأعداد من 0 لـ 9، الأيّام من السبت إلى الجمعة وغيرها من الأمثلة التي تقدّم مجالات محدّدة ومتسلسلة. إنشاء مجال سنتعرّف الآن على كيفيّة إنشاء المجالات في سطر أوامر روبي التفاعليّ. يمكن استخدام المجال لتمثيل متسلسلة من القيم بترتيب معيّن. ربّما تكون قد لاحظت استخدامنا للمجالات في دروس سابقة مثلما فعلنا عند البحث عن مصفوفة جزئيّة Subset من مصفوفة أخرى في درس المصفوفات. أوّلاً إحدى طرق إنشاء مجال هي نفس الطريقة التي استخدمناها لإنشاء مصفوفات وجداول التّقطيع من قبل عن طريق استخدام دالّة new. numbers = Range.new(1, 10) انتبه إلى أنّ دالّة new في حالة المجالات يجب أن تستقبل معطيات تمثّل بداية ونهاية المجال ولا يمكن إنشاء مجال فارغ مثلما كان ممكنًا إنشاء مصفوفات أو جداول تجزئة فارغة. جرّب كتابة الأمر السّابق مع عدم إعطاء روبي بداية ونهاية المجال، ماذا حدث؟ طبعت روبي رسالة خطأ Error تخبرك بأنّ عدد المعطيات خاطئة حيث أنّك زوّدت الدّالّة بلا شيء رغم انتظارها لمعطيين أو ثلاثة. المعطى الثالث exclude_end وهو لإخبار روبي هل عليها تضمين نهاية المجال بالمجال أم لا. إذا لم نعطي روبي ذلك المعطى الثّالث أو كانت قيمته false فستقوم روبي بتضمين النهاية بالمجال، أمّا في حالة غير ذلك فسيتمّ عدم تضمين النهاية. يمكنك إنشاء مجال عن طريقة الفصل بين بداية المجال ونهايتها باستخدام نقطتين كالتّالي: numbers = 1..10 سيقوم الأمر السّابق بإنشاء مجال من كلّ الأرقام الموجودة بين 1 و 10 مشتملة على 1 و 10 أيضًا وتعيينها إلى المتغيّر numbers. على الجانب الآخر فإنّه إذا استخدمنا ثلاث نقاط بدلاً من اثنتين ستقوم روبي بإنشاء مجال من العناصر من 1 إلى 9 مع تجاهل 10. 1...10 إذا فنستخدم النقطتان إذا أردنا أن يشتمل المجال على نقطة النّهاية وثلاث نقاط إذا لم نرده ذلك. يسمّى النّوع الأوّل Inclusive والثّاني Exclusive. يمكننا أيضًا إنشاء مجال محدّد من الأحرف. فمثلاً يمكننا إنشاء مجال للأبجديّة الإنجليزيّة مكوّن من الأحرف الصغيرة Lower Case ثمّ تعيينها إلى المتغيّر alphabet عن طريق كتابة الشيفرة البرمجيّة أدناه: alpahabet = "a".."z" إذًا لدينا المتغيّر alphabet والذين قمنا بتعيين المجال إليه. ومجالنا المحدّد هنا هو الأحرف من a إلى z مع تضمين z في المجال. الوصول إلى قيم بالمجال لاحظ كيف قامت روبي في كلّ مرّة بإرجاع المجال بالشّكل التي أُنشئت عليه دون طباعة عناصر المجال. هذا هو أحد الأمور المثيرة للاهتمام حول المجالات، فمتى أردت إظهار المجال حتّى ولو باستخدام الأمر puts فلن تحصل على شيء غير الهيئة التي أنشأت المجال عليها. قد تتساءل ولكن ماذا لو أردت استخدام عناصر المجال؟ للأسف لا يمكنك الوصول إلى العناصر أو القيم الموجودة في المجال مثلما كان بإمكانك مع المصفوفات والتجزئات. فمثلاً إذا أردت معرفة ما هو الحرف الموجود في الموقع الثّاني من المجال وكتبت [alphabet[2 مثلما كنت تفعل مع المصفوفة ستقوم روبي بإرجاع رسالة خط إليك. لأنّ هذه الدّالّة ليست دالّة للوصول إلى قيم مفردة في المجال. ولكن لحسن الحظ فهناك دالّة تسمّى to_a والتي تعني To Array. يمكن لهذه الدّالّة تحويل المجال الخاصّ بنا إلى مصفوفة ومن ثمّ يمكننا الوصول إلى العناصر بسهولة. alphabet_array = alphabet.to_a إذًا الآن لدينا المتغيّر alphabet_array والذي سيحتوي على المصفوفة الجديدة الناتجة عن تحويل المجال alphabet إلى مصفوفة باستخدام دالّة to_a. لاحظ كيف قامت روبي بإرجاع مصفوفة تحتوي على جميع الأحرف من a إلى z على هيئة عناصر من نوع سلسلة String. الآن يمكنك استخدام جميع الدوال الخاصّة بالمصفوفات والتي من بينها الوصول إلى العناصر. alphabet_array[2] ستقوم روبي بعد تنفيذ هذا الأمر بإرجاع "c". هذا لأنّه كما ذكرنا سابقًا أنّ المصفوفات تقوم بالعدّ بدءًا من 0 وليس 1. إذًا فباستخدامنا 2 فإنّنا قد قمنا بالبحث عن العنصر الثالث في المصفوفة. لمعرفة إذا كان المجال يحتوي على قيمة معيّنة أو لا يمكننا استخدام الدّالّة المنطقيّة ?include. numbers.include?(5) # true ستقوم روبي بإرجاع true حيث أنّ المجال (قمنا بإنشائه سابقًا في البداية) يحتوي بالفعل على القيمة 5. فأنت هنا تسأل روبي هل القيمة 5 موجودة في المجال numbers؟ لمعرفة إذا كان المجال الخاصّ بنا يتضمّن نهاية المجال مع القيم أم لا يمكننا فعل ذلك عن طريق دالّة ?exclude_end حيث تقوم بإرجاع true إذا لم يشتمل المجال على النّهاية وfalse إذا كان العكس. numbers.exclude_end? استخدامات المجالات تستخدم المجالات في كثير من الأحيان في المقارنة أو التكرار. مثال على المقارنة، التحقّق من وجود قيمة معيّنة في مجال محدّد من القيم. مثال على التكرار، تنفيذ حلقة Loop لفعل أمر ما 10 مرّات. يمكن إنشاء مجال باستخدام أيّ نوع من البيانات ولكن في أغلب الأحيان ستجد نفسك تستخدم المجالات من نوع السلاسل أو الأرقام فقط. السبب وراء ذلك هو قدرة روبي على ترتيب القيم في هذين النّوعين. فمثلاً، من السّهل إنشاء مجال 1 إلى 10، التحقّق من ما إذا كانت قيمة معيّنة موجودة في هذا المجال وأيضًا من السّهل طباعة كلّ رقم في المجال. الأمر ذاته مشابه مع السلاسل. تعرّفنا سابقًا أنّه بإمكاننا إنشاء مجال من الأرقام الصحيحة Integer من 0 إلى 10. الأمر الجيّد أيضًا أنّه بإمكاننا إنشاء مجالات من الأعداد العشريّة Float فمثلاً لو أردنا إنشاء مجال لنظام المعدّل التراكمي GPA فيمكننا إنشاؤه كالتّالي: gpa = 0.0..4.0 الآن إذا أردنا معرفة إذا كانت قيمة عشريّة معيّنة موجودة في هذا المجال أو لا (لنفرض مثلاً 2.5) فيمكننا فعل ذلك باستخدام دالّة ?include كالتّالي: gpa.include?(2.5) تطبيق عملي لا يبدو مثال المعدّل التراكمي السّابق مفيدًا كثيرًا، أليس كذلك؟ يمكننا جعله أكثر إفادة بتحديد مجال من 0 إلى 2 بحيث يكون هذا المجال هو مجال الإنذار كالتّالي: gpa_warning = 0.0..2.0 الآن لنطبّق ما تعلّمناه في درس العبارات الشرطيّة يمكننا إنشاء برنامج لاستقبال المعدّل التراكمي للطالب ومن ثمّ معالجة البيانات وطباعة معلومات عنها. افتح ملفًّا جديدًا واحفظه باسم gpa.rb أو أيّ اسم من اختيارك مع التأكّد من وجود rb. في نهاية اسم الملفّ. لنبدأ أوّلاً بطباعة التعليمات الخاصّة بالبرنامج، سنطلب من المستخدم إدخال المعدّل التراكمي الخاصّ به واستقبال المعدّل التراكمي كالتّالي: gpa_warning = 0.0...2.0 puts "Please Enter your GPA (0.0 to 4.0)" gpa_entry = gets.to_f في السّطر الأوّل قمنا بتعريف متغيّر باسم gpa_warning وقمنا بتعيين المجال 0 إلى 2 إليه، حيث هذا المجال هو مجال التنبيه لأيّ طالب حاصل على معدّل تراكمي بين 0 و2. بعد ذلك في السطر الثّاني طبعنا رسالة على الشّاشة تسأل المستخدم أن يدخل قيمة المعدّل التراكمي الخاصّ به بين 0 و 4. في السطر الثّالث أنشأنا متغيّر باسم gpa_entery وهو المتغيّر الذي ستقوم روبي بحفظ القيمة التي سيدخلها المستخدم إلى البرنامج به. أمر gets يتيح للمستخدم إدخال بيانات، دالّة to_f تستخدم لتحويل المُدخلات Inputs من سلاسل إلى أرقام عشريّة، حيث أنّ أيّ مدخل يتمّ اعتباره افتراضيًّا أنّه سلسلة (اسم الدّالّة نفسها هو اختصار لـ get string). قد تتساءل هنا، لماذا لم نضِف دالّة chomp إلى gets لحذف السطر الذي تضيفه روبي إلى المدخل عند الضغط على Enter؟ الإجابة هي أنّ السطر الزائد يتمّ حذفه بالفعل عند تحويل المُدخل إلى عدد عشري. الآن لدينا ما نحتاج للحصول على مُدخل من المستخدم. الجزء الثّاني من البرنامج هو أن نقوم بالتعامل مع هذه البيانات بحيث تقوم بطباعة شيء محدّد بناءً على ما يدخله المستخدم. if (gpa_entry < 0.0 || gpa_entry > 4.0) puts "False entery. Please enter a numberic value between 0 and 4." elsif (gpa_warning.include?(gpa_entry)) puts "Your GPA is too low! You need to do something about it." else puts "Congratulations! Your GPA is good. No warnings." end ماذا فعلنا هنا؟ أوّلاً، عبارة if الأولى تقوم بالتحقّق إذا كان ما أدخله المستخدم أصغر من 0 أو أكبر من 4 وهذه حالات غير متوقّعة في المعدّل التراكمي. إذا كان المُدخل يحقّق أحد الشرطين سيقوم البرنامج بإخبار المستخدم أنّ عليه إدخال رقم ما بين 0 و 4. عبارة elsif تتحقّق هل يحتوي المجال الموجود في المتغيّر gpa_warning على قيمة المتغيّر gpa_entery والذي هو القيمة التي أدخلها المستخدم. إذا تحقّق شرط العبارة فهذا يعني أن المعدّل التراكمي الذي تمّ إدخاله سيكون بين 0 و2 وفي هذه الحالّة سيقوم البرنامج بطباعة رسالة التنبيه للمستخدم. في حالة إذا كان المعدّل التراكمي غير ذلك، أي أنّه ليس أقل من 0 أو أكبر من 4. وأيضًا ليس بين 0 و2 فسيقوم البرنامج بإخبار المستخدم أنّ معدّله التراكمي جيّد وأنّه لا توجد أيّ تنبيهات له. الآن إذا قمت بتجربة البرنامج ستجده يعمل بشكلٍ جيّد ولكن ماذا يحدث عندما تُدخل سلسلة نصيّة؟ يقوم البرنامج بطباعة رسالة التنبيه بأنّ المعدّل التراكمي منخفض، أعلم أنّك لم تتوقّع ذلك. تقوم دالّة t_f بتحويل ما نستدعيها عليه إلى عدد عشري وإذا كان المُدخل هو نصّ عادي فتقوم بتحويل قيمته إلى 0.0 وهي القيمة الموجودة لدينا بالفعل في المجال. والآن حان دورك، هل يمكنك حلّ هذه المشكلة بحيث أنّه عند إدخال المستخدم أحرفًا وقيمًا ليست بالأرقام يطبع له البرنامج أنّ عليه إدخال أرقام؟ خاتمة تعرّفنا في هذا الدّرس والدّروس الماضية على أنواع المجموعات المختلفة في روبي مثل المصفوفات، جداول التّقطيع والمجالات. يمكنك قراءة توثيق روبي حول المجالات لمعرفة المزيد عنها. جرّب تحسين البرنامج الموجود بقسم التطبيق العملي بأن يقوم بطباعة بيانات أخرى حول المعدّل التراكمي بناءً على إدخال المستخدم وموقع هذا المعدّل بالنسبة للمجال المحدّد. إذا كنت تودّ إضافة معلومة عن المجالات أو واجهتك مشاكل أو لديك تساؤل حول الدّرس فلا تتردّد في السؤال بقسم التعليقات أدناه.
