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

مقدّمة نظرية كائن جافاسكريبت هو كيان لديه خاصيّات. كلّ خاصيّة عبارة عن زوج مفتاح وقيمة. المفتاح هو اسم الخاصيّة. يمكن أن تكون قيمة الخاصيّة بيانات (عددا، سلسلة محارف، …إلخ.) أو دالة. يُطلَق على الخاصيّة عندما تكون قيمتها دالة الاسم تابع 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.

نظام MediaWiki هو برنامج مفتوح المصدر ومجاني يخضع لاتفاقية GPL، وقد طُوِّر بالأساس من أجل تلبية احتياجات الموسوعة الحرة ويكيبيديا في عام 2002، بالإضافة إلى تخديم المشاريع الأخرى التي تعمل ضمن مبدأ ويكي. يحوي البرنامج على أكثر من 900 خيار للإعدادات وأكثر من 2000 إضافة متاحة للتحميل لزيادة ميزات نواة البرنامج، وبذلك يمكن القول بأن البرنامج قادر على التعامل مع أحجام ضخمة من البيانات تقدر بعدة تيرابايت، إضافة إلى أنه يستطيع تخديم الآلاف من طلبات محتوى الصفحات من الخادوم خلال ثانية واحدة. نبذة تاريخية عندما انطلقت الويكيبيديا في الشهر الأول من عام 2001 كانت تستخدم برنامج ويكي صغير يسمي UseModWiki حيث طُوّر بلغة بيرل وقام بتخزين جميع الصفحات ضمن ملف نصي. ولكن سرعان ما تَبيّن مدى محدودية هذا البرنامج من ناحية الأداء والقدرة التشغيلة، لذلك قام ماغنوس مانسكي والذي كان محرر في ويكيبيديا بالعمل على نسخة جديدة من البرنامج لتحل مكان UseModWiki ولتعمل تحديدًا مع الويكبيديا، وبذلك قام بتطوير برنامج مكتوب بلغة PHP يخزن المعلومات ضمن قاعدة بيانات MySQL وتم إطلاقه للعمل على النسخة الإنكليزية من الويكبيديا في بداية عام 2002 كما تزامن مع القيام تدريجيًا بتوزيعه للعمل على اللغات الأخرى التي تُستخدم في الويكيبيديا، وقد تم الإشارة إلى هذا البرنامج بكلمات مثل "المرحلة الثانية من UseModWiki" في شهر حزيران من عام 2003 أعلن رسميًا عن ميدياويكي كبرنامج إدارة محتوى يحل محل UseModWiki، وفي شهر تموز من العام نفسه اقترح المساهم في ويكيبيديا دانييل ماير اسم MediaWiki للبرنامج. طريقة تثبيت ميدياويكي لتثبيت أي نظام إدارة محتوى على جهازك يجب أن يكون لديك خادوم أولًا، وقد شرحت طريقة تثبيت خادوم WAMP هنا سابقًا. بعد الانتهاء من عملية تثبيت الخادوم على الحاسب الشخصي، سأبدأ بتثبيت نظام ميدياويكي وفق مجموعة من الخطوات المتسلسلة: 1- نحتاج أولًا للتأكد من أن الخادوم الذي قمنا بتثبيته WAMP يعمل، ويتم التأكد من ذلك من خلال رؤية أيقونة الخادوم باللون الأخضر في شريط المهام 2- نبدأ عملية تحميل نظام ميدياويكي من الموقع الرسمي للنظام https://www.mediawiki.org/wiki/Download حيث نختار النسخة المستقرة stable من النظام 3- ننتقل إلى مجلد www الموجود بالخادوم من خلال النقر على أيقونة WAMP واختيار www directory من القائمة 4- ننسخ الملف الذي قمنا بتحميله في الخطوة 2 إلى مجلد www ونقوم بفك ضغطه ثم نغير اسمه إلى mediawiki 5- نفتح صفحة إعدادات النظام من خلال الرابط http://localhost/mediawiki/mw-config/index.php 6- ستظهر لدينا أولًا خيارات اللغة للنظام وسنبقيها على اللغة الانجليزية ونضغط على continue 7- بعدها تظهر لدينا رسالة ترحيبية تحوي معلومات عن تنسيق النظام واتفاقية شروط استخدامه وبالنقر على زر continue تعني الموافقة على سياسة الموقع 8- تظهر لدينا الآن الاتصال مع قاعدة بيانات، حيث يوضح الموقع أنواع قواعد البيانات التي يمكن استخدامها مع نظام ميدياويكي، سنختار نوع قاعدة البيانات MySQL 9- لبناء قاعدة بيانات الموقع نقوم بفتح صفحة التحكم الخاصة بالخادوم عبر الرابط http://localhost/phpmyadmin/ وندخل اسم المستخدم root أما كلمة المرور تترك فارغة ملاحظة: هذه الصفحة تطلب مرة واحدة فقط عند أول دخول لصفحة إعدادات الخادوم خلال الجلسة. 10- بعد الدخول إلى صفحة إعدادات الخادوم ننقر على زر new الموجود في القائمة الجانبية وندخل في المربع create database اسم قاعدة البيانات الخاصة بالموقع مثل my_wiki ثم ننقر على زر create 11- نعود لصفحة إعدادات قاعدة البيانات التي ظهرت لدينا في الخطوة 8 ونكمل الإعدادات من خلال كتابة اسم قاعدة البيانات والمضيف واسم المستخدم ثم ننقر زر continue 12- ستظهر صفحة إعدادات قاعدة البيانات، نبقى على الاختيارات الافتراضية لهذه الصفحة لأن هذه الخيارات هي الأفضل بالنسبة للإدخال باللغة العربية، وبعدها نضغط على continue 13- ستظهر صفحة تنصيب المشروع حيث ندخل اسم موقعنا واسم المستخدم وكلمة المرور وفي النهاية يمكن اختيار النمط القياسي في التنصيب من خلال الضغط على خيار just install the wiki ثم continue 14- وفي صفحة install نختار continue أيضًا 15- عند انتهاء عملية تثبيت النظام سيقوم تلقائيًا بتحميل ملف localSettings.php والمطلوب هو نسخ هذا الملف والاحتفاظ به ضمن مجلد mediawiki داخل مجلد www بحيث يكون ملف index.php و localSettings.php في نفس المجلد 16- للدخول إلى صفحة الموقع الخاص بنا نختار http://localhost/mediawiki/index.php حيث نلاحظ أن شكل الموقع الخاص بنا يشبه تمامًا شكل صفحات ويكيبيديا. وبهذا نكون قد انتهينا من عمليت تثبيت النظام ويمكننا الآن البدء ببناء محتوى خاص بالموقع ونشره. بناء موقع باستخدام ميدياويكي سأبدأ الآن بعملية بناء محتوى صفحات ويب من خلال ميدياويكي، ولكن أولًا سأضيف اللغة العربية إلى النظام. أولًا: تغيير النظام إلى اللغة العربية لتغيير إعدادات النظام إلى اللغة العربية نحتاج أولًا إلى إضافة مجموعة من المكونات الخاصة باللغات المتعددة إلى النظام ثم تغيير إعداداتها لتناسب اللغة العربية وذلك وفق الخطوات التالية: 1- نقوم بتحميل إضافة تسمى UniversalLanguageSelector من خلال الرابط https://www.mediawiki.org/wiki/Special:ExtensionDistributor/UniversalLanguageSelector فيظهر لدينا شاشة لاختيار رقم نسخة ميدياويكي حيث نختار MediaWiki 1.3 2- يبدأ تحميل الإضافة بصيغة ZIP تلقائيًا، ثم ننسخ الملف إلى المسار C:\wamp64\www\mediawiki\extensions وننسخ إليه ملف الإضافة عند الانتهاء من تحميله ثم نفك ضغطه داخله. 3- نرجع إلى المسار C:\wamp64\www\mediawiki ونفتح منه الملف LocalSettings.php ثم نضيف في نهايته سطر الرماز wfLoadExtension( 'UniversalLanguageSelector' ); 4- نقوم بتسجيل الدخول كـ admin إلى النظام من خلال النقر على زر Log in الموجود في الأعلى 5- بعد أن تظهر الصفحة الرئيسية ننقر على رابط preferences فينتقل إلى صفحة الإعدادات حيث سنقوم بالتعديل داخل قسم Internationalisation حيث نختار more language setting 6- ستظهر لدينا لوحة تحكم خاصة باللغة فقط ونلاحظ وجود اللغة العربية ضمن الاقتراحات حيث يقوم النظام بإظهار مجموعة من خيارات اللغة التي قام باستنتاجها من خلال الاعتماد على تخصيصات الحاسب ومنطقتنا 7- عند اختيار اللغة العربية سينتقل عرض المتصفح فورًا إلى اللغة العربية 8- لتغيير لغة الإدخال إالى العربية نبقى داخل قسم “تفضيلات” الذي يظهر لدينا وننقر على رابط “المزيد من إعدادات اللغة” 9- سيظهر لدينا في الأسفل “إعدادات الإدخال” نختار من “إدخال” العربية ثم ننقر على “طبق الإعدادات” وعند فتح الصفحة الرئيسية للموقع ستظهر لدينا باللغة العربية ثانيًا: اختيار القوالب يوجد قوالب قياسية تم اعتمادها من قبل ميدياويكي يمكن استخدامها، حيث يمكن اختيارها من خلال الدخول إلى “تفضيلات” ثم “الواجهة”. نلاحظ الخيار المعلم هو القالب الحالي، نختار القالب الذي نريد ثم ننقر على حفظ حيث ينتقل الموقع مباشرة إلى الشكل الجديد له. ثالثًا: إضافة محتوى إن الموقع الذي قمنا ببنائه باستخدام ميدياويكي يحاكي بشكل كامل موقع ويكيبيديا وبالتالي فإن عملية إضافة محتوى في موقعنا الخاص هنا تشابه عملية إضافة محتوى على الويكيبيديا، حيث يتم ذلك بالخطوات التالي: 1- في قائمة البحث في الأعلى ندخل اسم المقال التي نريد كتابتها ونضغط على زر البحث (او go في الويكيبيديا) 2- سيظهر في نتائج البحث أنه لايوجد مقالة بهذا العنوان وبالتالي أختار "أنشئ الصفحة (لمحة عن ميدياويكي)" 3- تظهر الآن صفحة إنشاء المقالة حيث نكتب المقالة التي نريد ضمن العرض ثم نختار احفظ الصفحة 4- سنجد الآن أن المقالة قد تم إضافتها إلى الموقع ملاحظة: في حال أبقينا لغة العرض باللغة الإنجليزية سيظهر لدينا محرر المقالة بشكل أفضل حيث يحوي العديد من الأزرار التي تمكننا من تحرير المقالة دون الحاجة إلى استخدام الرموز يعتبر ميدياويكي هو نظام لإدارة محتوى صفحات الويكي، ولذلك فإن أغلب المواقع التي صممت من خلاله تعتمد على مبدأ الويكي ومنها الويكيبيديا أضخم موسوعة حرة تمتلك الملايين من المقالات بمختلف لغات العالم Conservapedia أيضًا موسوعة ولكنها تمتلك معايير كبيرة بحيث لا تسمح بأي تشويه للحقيقة Wikiquote موسوعة تضم العديد من الأقوال منقولة عن مشاهير، أفلام، أو من الأدب WikiTravel موسوعة تضم أشهر أمكان السفر والسياحة حول العالم Wikihow موقع ضخم يملك أكبر عدد من المقالات عن “how to” أو “كيف” حول العالم Wikicars أكبر موسوعة تحوي معلومات عن السيارات Wikisummaries موسوعة تحوي على عدد من ملخصات الكتب Game Programming Wiki أحد أفضل الموارد لمطوري الألعاب حيث يحوي العديد من المقالات التعليمية وأسطر code لبرمجة ألعاب الفيديو