دروس حول HTML5

الدرس الأول :

مقدمة فى HTML5

1. HTML5 و HTML .
2. تاريخ HTML5 .
3. لماذا HTML5 ؟
4. دعم المتصفحات .
5. حلول لدعم الخواص الأساسية ل HTML5 فى كل المتصفحات .
6. مناقشة الدرس .

---

1. HTML5 و HTML

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

للبدء فى سلسلة دروس HTML5 تحتاج لأن يكون لديك :

• خبرة و لو متوسطة فى لغة جافاسكربت (javaScript).
• خبرة فى لغتى HTML , CSS .

---

2. تاريخ HTML :

فى عام 1995 تم الإعلان عن أول إصدارة قياسية من HTML و هى الاصدارة الثانية و كانت تهدف اساساً إلى وضع قواعد محددة لتنظيم كتابة الكود الخاص بصفحات الويب و لكنها لم تُحدث تغييراً ملحوظاً و ظل تجاهل مبرمجي صفحات الويب لقواعد تنظيم كتابة الكود قائماً .
ثم فى عام 1997 تم إصدار HTML 3.2 و كانت أول إصدارة قياسية تُعتمد من قبل منظمة W3C , و لكن هذه المرة تم تجاهلها من قبل مطورى متصفحات الانترنت و بدأ كل متصفح يتجه نحو إصدار أكواد خاصة به , و قد مَثل هذا مشكلة كبيرة لمطوري مواقع الانترنت حيث اضطروا لكتابة نسخ متعددة من الكود لتلائم كل متصفح .
و فى عام 1998 بدأ مجموعة من المطورين بما يسمى “مشروع قواعد الويب” بهدف وضع قواعد محددة لكتابة صفحات الويب باستخدام HTML و إيجاد الحلول التنظيمية و إعادة هيكلة مشروع W3C , و خلال عام تم إصدار HTML 4 و التى تعتبر أفضل إصدارة من HTML تنظم كتابة صفحات الويب بشكل كبير و تم اعتمادها فى معظم متصفحات الانترنت .
و فى عام 2000 تم اصدار 1.0 XHTML و كانت تهدف بشكل اساسي لبدء الإنتقال نحو إجبار مطورى الويب على كتابة الكود بشكل معين كلغة XML و فى نفس العام بدأ العمل فى XHTML 2.0 و لكن بسبب رفض مطوري الويب لها و تجاهل متصفحات الانترنت لهذه القواعد المحددة لكتابة صفحات الويب فقررت منظمة W3C إيقاف العمل على الإصدارة الثانية من XHTML فى عام 2004.
و بعد الفشل فى تطوير XHTML 2.0 , بدأت مجموعة تسمى Web Hypertext Application Technology Working Group (WHATWG) – و هى تمثل مجموعة من المبرمجين من شركات أبل و موزيلا و أوبرا -فى مشروع لإعادة هيكلة HTML , و فى عام 2007 قامت منظمة W3C باعتماد هذا المشروع و أطلقت عليه , و فى عام 2009 قامت منظمة W3C بإلغاء XHTML 2.0 بشكل كامل , و أخيراً فى عام 2010 قامت الكثير من متصفحات الانترنت بدعم HTML5 بشكل جزئي و كذلك عدد من الشركات الكبرى كشركتى أبل و جوجل بإستخدام HTML5 حيث استخدمتها جوجل بشكل مستمر فى شعارها فى مختلف المناسبات و قامت شركة أبل بالاعتماد عليها بشكل أساسى كبديل للFlash فى نظام iOS .

---

3. لماذا HTML5 ؟

• HTML5 مستقبل الويب : حيث يُتوقع أن يتم الإعتماد الكامل على لغة HTML5 و بشكل أساسي بحلول عام 2022 و بالتالى مستقبل الويب و تطبيقاته تعتمد بشكل كبير على هذه اللغة .
  
• تحكم أفضل : حيث تشتمل هذه اللغة على مجموعة متميزة من الواجهات البرمجية (API) توفر الوصول للصوت و الكاميرا و المكان و غيرها لتسمح للمبرمج ببناء تطبيقات تفاعلية متميزة .
  
• التصفح بدون إتصال و تخزين البيانات : حيث يمكن من خلالها تخرين صفحات الويب على الجهاز لتصفح المواقع بدون إتصال و هذه الميزة جعلت جوجل توقف العمل على مشروع Google gears , و الإتجاه نحو HTML5 بهدف الاستغناء عن إجبار الزائر على تركيب الإضافة و كذلك لبساطة و سرعة هذه الميزة فى HTML5 مقارنة ب Gears .

• دعم الوسائط المتعددة : حيث يمكنك إضافة الصوت و الفيديو بدون الحاجة لأى إضافة ك» Flash , silverlight  .
• السرعة و الدمج مع المتصفحات : فهى تأتى مع المتصفحات بشكل تلقائي , و بالتالى لن يحتاج زائر الموقع إلى تركيب أى اضافة .
• الرسم و التأثيرات : مكتبات WebGL , SVG , Canvas توفر أدوات لا حصر لها للرسم و تحريك العناصر « بل و هناك برامج ك Adobe Edge  و radiapp تسمح بتحريك الرسومات باستخدام HTML5 من خلال واجهة رسومية و بدون كتابة كود .
• كما أن HTML5 تدعم الإصدارات السابقة من HTML بشكل كامل و بدلاً من إجبار مطوري صفحات الويب على قواعد معينة فإنها تقوم بمعالجة و تجميع الأخطاء فى الكود فحسب لتسمح للمطور بتعديله و تطويره بدون الإضطرار لإعادة كتابته بشكل كامل .
• إمكانية تطوير تطبيقات للأندرويد و الأيفون و العديد من الأجهزة المحمولة باستخدام Titanium او phonegap , سأتطرق لهذه الميزة بالتفصيل فيما بعد .
• المزيد من الوسوم (tags) ك article, footer, header, nav, section ,calendar, date, time, email, url, search بهدف تنظيم الكود بشكل أكبر و تبسيطه لمصممى المواقع .

توضيح : SVG , WebGL , CSS3 , Geolocation , Web sockets لا تمت بصلة للغة HTML5 نفسها و لكن ارتبطت بها فى بناء تطبيقات الويب .

---

4. دعم المتصفحات ؟

بدايةً يجب أن أوضح أن لغة HTML5 ليست كتلة واحدة و انما مجموعة من الخواص و يختلف دعم هذه الخواص من متصفح لآخر * , فمعظم الخواص الأساسية ك canvas , Geolocation , app cache , video , indexedDB, workers مدعومة بشكل كامل فى كل المتصفحات الحديثة تقريباً كالفايرفوكس و كروم و سفاري و أوبرا و انترنت اكسبلورر 9 . كما أن الاحصائيات تشير إلى تسابق كبير بين المتصفحات لدعم المزيد من خواص HTML5 فى الآونة الأخيرة , و كذلك تشير إلى اتجاه مستخدمى الويب نحو المتصفحات الحديثة التى تدعم HTML5 بشكل كبير جداً كما هو موضح فى هذا الرسم البيانى :

* جدول تفصيلي يوضح دعم المتصفحات لخواص HTML5 , CSS3

---

5. حلول لدعم الخواص الأساسية ل HTML5 فى كل المتصفحات

فى الآونة الأخيرة ظهرت العديد من المشاريع التى تهتم بدعم HTML5 فى كل المتصفحات و لعل أبرز هذه المشاريع :

•   مشروع HTML5 Media و الذى يهدف لدعم الصوت و الفيديو فى كافة المتصفحات و يمكن استخدامه بكل بساطة من خلال اضافة هذا السطر

  1 2 3

  <script src="http://api.html5media.info/1.1.4/html5media.min.js"> </script>

•  مشروع ExplorerCanvasو الذى يهدف لدعم canvas فى متصفح انترنت اكسبلورر IE و يمكن استخدامه من خلال إضافة هذا السطر

  1 2 3

  <!--[if IE]> <script src="excanvas.js"></script> <![endif]-->

---

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

سوف تتم مناقشة هذا الدرس بالتفصيل عبر #IRC و skype خصوصاً النقاط التالية :

• عيوب و مزايا بناء تطبيقات أندرويد و ايفون باستخدام HTML5 , و لن تتم مناقشة كيفية بناء هذه التطبيقات حيث سيتم شرحها فى وقت لاحق .
• كيفية عمل مشاريع HTML5MEDIA و explorercanvas .
• مناقشة عامة عن استخدام المتصفحات و دعمها ل HTML5.
• كفاءة البرامج التى تقوم بعمل رسوم متحركة باستخدام HTML5 ك edge , radiapp .

و إذا كنت تود المشاركة فى هذا النقاش :

1. يجب أن تكون لديك فكرة عامة عن هذا الدرس , و كذلك النقاط التى سيتم مناقشتها .
2. إضافة تعليق على هذا المقال مع كتابة #IRC أو skype فى نهاية التعليق على حسب الوسيلة التى تُفضلها .
3. التأكد من صحة البريد الإلكترونى فى التعليق حيث سيتم إرسال الدعوات عليه .

====================================================
الدرس الثانى :

صفحتُك الأولى باستخدام HTML5

• الدرس الثانى :
  1. مقدمة .
  2. نوع المستند (DOCTYPE) .
  3. ترميز المستند (CHARSET) .
  4. الوسوم البنائية فى HTML5 (Structural Tags)
     • رأس الصفحة (header)
  5. مناقشة الدرس

---

تحدثتُ فى الدرس الأول عن مقدمة سريعة فى HTML5 , و فى هذا الدرس سأتحدث عن نوع المستند (DOCTYPE) و ترميز الصفحة (CHARSET) و كذلك مقدمة فى الوسوم البنائية الجديدة (Structural tags) فى HTML5 .

---

استخدام هذا الرمز يعني أن السؤال مطروح للمناقشة فى التعليقات , و كذلك لاحقاً عبر Skype و#IRC .

باختصار ….

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

---

نوع المستند (DOCTYPE)

فى HTML5 لم تعد تحتاج سوى لهذا السطر البسيط لتعريف المتصفح بنوع المستند DOCTYPE و كذلك نظام عرض الصفحة و التى ستكون Standards

1	<!DOCTYPE html>

و ستلاحظ أنها أبسط مما تعودت عليه فى HTML 4.0 و XHTML 1.0 .

ترميز الصفحة (CHARSET)

و بالنسبة لكود ترميز الصفحة (CHARSET) و الذى كان يُكتب هكذا

1 2	<meta http-equiv="content-type"   content="text/html;charset=utf-8" />

تم استبداله بالجزء الذى يهم المتصفح فقط و هو أقل عدد من الحروف يحتاجها المتصفح ليقرأ ترميز الصفحة , و صار كما يلي :

1	<meta charset="utf-8">

(SCRIPT && LINK)

و بالإضافة الى DOCTYPE و ترميز الصفحة (CHARSET) , فتم تبسيط الوسوم Script , link أيضاً بحذف الصفة التى تحدد نوع الملف أو المحتوى و هى type

1 2	<script type="text/javascript" src="file.js"></script>  <link rel="stylesheet" type="text/css" href="file.css">

ب

1 2	<script src="file.js"></script>  <link rel="stylesheet" href="file.css">

و كما نلاحظ فإن HTML5 تهدف إلى تبسيط الكود بقدر الإمكان على مطور الويب .

~

---

والآن لنبدأ :

نوع المستند (DOCTYPE)

من لديه خبرة فى HTML يذكر انها لطالما احتاج لنسخ ولصق السطر الاول من الكود و هو نوع المستند (DOCTYPE) , لاستحالة حفظه , و قد كان أحد الأشكال التالية و يختلف على أساس إصدارة HTML المستخدمة فى كتابة الصفحة و كذلك نظام عرض الصفحة فى المتصفح .
فى HTML5 تم حل هذه المشكلة و تبسيط نوع المستند (DOCTYPE) لهذا السطر فقط !! “بدون مسافات قبل !DOCTYPE أو بعد html “
و هذا التغيير يطرح سؤالين :

1. السؤال الأول و هو لماذا تم حذف إصدار HTML من نوع المستند (DOCTYPE) ؟
2. و السؤال الثانى أى نظام عرض سيتم تنشيطه بالمتصفح عند استخدام هذا DOCTYPE الجديد ؟

بالنسبة للسؤال الأول فمن وجهة نظرى استخدام إصدار HTML فى DOCTYPE ليس له أى قيمة حيث يتم عرض الصفحة من قبل المتصفح بنفس الطريقة مع كل أنواع DOCTYPE و حتى بدون كتابته , فوظيفة DOCTYPE الوحيدة هى تحديد نظام عرض المتصفح للصفحة لا أكثر و لا أقل , و بالنسبة للسؤال الثانى وقبل الإجابة أوضح أولاً ما هو نظام عرض المستند بالمتصفح , فهناك نوعان من أنظمة عرض المستند بالمتصفح :

نظام Standards : لعرض الصفحات المكتوبة طبقاً للشروط القياسية حتى و لو حدثت مشكلة أثناء عرض الصفحة .

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

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

إحصائية المواقع العربية تمت على حوالى 2800 موقع مختلف من خلال نتائج محرك البحث جوجل لحروف الأبجدية العربية و أشهر كلمات البحث العربية من أول 10 صفحات لكل منهم .

هل تعنى هذه الإحصائية أن 24% من المواقع العربية مكتوبة بمراعاة كاملة للشروط القياسية لكتابة صفحات الويب حيث أن نظام عرضها بالمتصفح هو Standrads ؟

لمعرفة نظام عرض المتصفح لأى صفحة من خلال الفايرفوكس , قم بالضغط على الزر الأيمن للماوس فى أى مكان بالصفحة و اختر View Page Info , الجزء Render mode هو الذى يوضح نظام عرض الصفحة كما هو موضح بالصورة .

ملحوظة : يجب كتابة (DOCTYPE) فى السطر الأول و بدون أى مسافات أو سطور تسبقه و إلا سيتم تنشيط نظام Quirks فى المتصفح كما فى موقع بوابة الحكومة المصرية حيث تمت كتابة DOCTYPE فى السطر الثانى .

---

ترميز المستند (CHARSET)

و الآن نأتى للخطوة التالية وهى تحديد ترميز الصفحة , و الذى يعني باختصار طريقة عرض و معالجة الحروف داخل الصفحة . و أشهر هذه الترميزات و الذى شهد نمواً كبيرا فى الويب فى الآونة الاخيرة هو الترميز العالمى utf-8 و الذى يدعم معظم اللغات المتداولة على الانترنت تقريباً
و كما نرى فى هذه الإحصائية فإنها تشير إلى اتجاه عالمى نحو الترميز utf-8 , و مع ذلك فإن نسبة كبيرة جداً من المواقع العربية لازالت تستخدم الترميز windows-1256 الذى لا يدعم سوى الحروف العربية و الانجليزية فقط !!

إحصائية ترميز المواقع تمت على حوالى 2800 موقع مختلف من خلال نتائج محرك البحث جوجل لحروف الأبجدية العربية و أشهر كلمات البحث العربية من أول 10 صفحات لكل منهم .

لماذا تتوقع استمرار المواقع العربية فى استخدام الترميز windows-1256 بالرغم من مشاكله المتعددة و قصوره الشديد فى دعم اللغات ؟

---

ولتعريف المتصفح بترميز الصفحة ليتم عرضها بطريقة صحيحة فى HTML4.0 و XHTML 1.0 كان يتم كتابة هذا السطر و الذى يحوى معلومات كثيرة غير مفيدة للمتصفح حيث أنه حتى لو تمت كتابته بشكل خاطئ سيتعرف المتصفح على الترميز كما أنه يصعب حفظه على مطوري الويب
فى HTML5 تم حذف كل المعلومات التى لا يحتاجها المتصفح و استبداله ب

---

و كما نلاحظ فإن HTML5 تعتمد منهج البساطة فى كتابة الكود و الاتجاه لعدم الاعتماد على أى محرر WYSIWYG او نسخ و لصق أى اجزاء من الكود لصعوبة حفظها .
و هذا هو كود الصفحة حتى الآن

1 2 3 4 5 6 7 8

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> </body> </html>

---

الوسوم البنائية فى HTML5 (Structural Tags)

قبل أن أقوم بتعريف الوسوم البنائية الجديدة فى HTML5 و التى سأتطرق لها فى الدرس القادم بالتفصيل , سأبدأ بشرح أحد هذه الوسوم و هو الوسم header

رأس الصفحة (header)

و لنبدأ الآن بكتابة محتوى الصفحة داخل الوسم <body> و كما نعرف فان أول ما يتم كتابته فى معظم صفحات الويب هو رأس الصفحة (header) و الذى قد يحوى شعار الموقع و نص تعريفي و مربع البحث فى الموقع . و قد اعتاد مطوري الويب على استخدام div ليحوى هذا الجزء من الصفحة و إضافة الرمز التعريفي (id) ا header او top او topper أو اى كلمة تدل على الجزء الأعلى من الصفحة

1	<div id="header"></div>

و لكى أوضح الامر فإن هذا الجزء من مهاويس الموضح بالصورة هو الheader

فى HTML5 تم استبدال div التى تشير لرأس الصفحة بالوسم الوصفى الجديد header

1	<header></header>

بدايةً تعريف هذا الوسم طبقاً لوثائق HTML5 الرسمية

هو رأس أى جزء من الصفحة أو المقال و هو الذى يحتوى على العناوين الرئيسية h1-h6 , ليس هذا فحسب بل يمكن أن يحوى عناصر أخرى كشعار الصفحة أو مقدمة أو بحث فى الموقع .

و كما هو واضح من تعريف header فانه يمكن استخدامه أكثر من مرة فى نفس الصفحة سواء لرأس الصفحة الكامل أو لرأس المقالات او التدوينات او أجزاء الصفحة و بالطبع يشترط ان يحوى هذا الوسم على الوسم h1-h6 . و الآن سنقوم باضافة الوسم header و نكتب بداخله عنوان أول صفحة باستخدام HTML5

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> <html> <head> <title>أول صفحة باستخدام HTML5</title> <meta charset="utf-8"> </head> <body> <header> <h1>أول صفحة باستخدام HTML5</h1> </header> </body> </html>

و لإضافة ستايل لهذا الوسم نقوم باستخدام

1	header { display:block;}

و الآن و بعد أن وضحت الوسم header , من وجهة نظرك ما هو تعريف الوسوم البنائية و ما أهميتها فى حين يمكن استخدام div بدلاً منها ؟!!

---

سوف تتم مناقشة هذا الدرس بالتفصيل عبر #IRC و skype خصوصاً النقاط التالية :

• اقتراحات لتحسين كود المواقع العربية .
• جدوى استخدام الوسوم البنائية بدلاً من div
• المشاكل المتوقعة لاستخدام هذه الوسوم البنائية مع المتصفحات التى لا تدعم HTML5

و إذا كنت تود المشاركة فى هذا النقاش :

1. يجب أن تكون لديك فكرة عامة عن هذا الدرس , و كذلك النقاط التى سيتم مناقشتها .
2. إضافة تعليق على هذا المقال مع كتابة #IRC أو skype فى نهاية التعليق على حسب الوسيلة التى تُفضلها .
3. التأكد من صحة البريد الإلكترونى فى التعليق حيث سيتم إرسال الدعوات عليه .

هذا المقال باعداد الزميل : عبد الله ضياء

سكالا … الدرس الأول

• الدرس الأول:

1. ما هي سكالا (Scala) ؟
2. Hello World
3. المتغيرات
4. الدوال Functions
5. اللاجمل
6. LOOPS
7. المجموعات Collections
8. خريطة سكالا

---

ما هي سكالا (Scala) ؟

Scala مشتقة من Scalable , ومعناها أن اللغة قادرة على التوسع و النمو بسبب بساطة ال syntax الأولى الخاص بها وذلك لأنها مصممة بشكل جيد جداً على قواعد قليلة , و لكنها تسمحُ بتمدد اللغة و خلق أدوات جديدة لغرض خاص لم تكن موجودة فى اللغة من قبل (أمثلة على ذلك لاحقاً) .
Scala أيضاً تستطيع التعامل مع كود java بكفاءة شديدة فتستطيع استيراد java libraries و ترث من java classes وهكذا .. وهي تعتمد عل java virtual machine (JVM)فى عملها لذلك فهى تكاد تضاهي لغة الجافا فى السرعة.
تتميز لغة سكالا (Scala) بالعديد من الملامح المميزة لها و التي سيتم شرحها بالتفصيل مثل: (Type Safe – Object-Oriented – Functional Language – …).
مصمم لغة سكالا (Scala) ومطور Generic Java هو مارتن أودرسكي Martin Odersky (باحث في معهد EPFL – متخصص في تصميم لغات البرمجة كما أنه مدير مشروع مدير مشروع LAMP!!)

البرمجة فن قبل أن تكون علم !!

عبارة دائماً ما كنت أقرأها و أكتبها على صفحات المدونات و المنتديات و لكني لم أشعر بمعناها الحقيقي بهذا القدر إلا عندما بدأت دراسة لغة سكالا (Scala) والتعمق في المصطلحات البرمجية الفلسفية و البحث عن أصل الأفكار و الثوابت … و لم كانت في الأصل ثوابت ؟!
إذا كنت لا تفضل البداية بالتعمق في بعض المصطلحات و المفاهيم, أو كنت في اشتياق الي بداية كتابة الكود… يمكنك تخطي هذة الفقرة :) !!
دعنا ننعش الذاكرة بمناقشة بعض المفاهيم العلمية الخاصة بالبرمجة و التي نادراً ما تجد أحد من المطورين الجدد و أحياناً المحترفين ليسوا على دراية كافية بها :
1- Static Types و Dynamic Types :

	Dynamic Type	Static Type
التعريف	في حالة ال Dynamic Type يتم التعرف تلقائيا على نوع القيمة أو المتغير وقت التنفيذ و ذلك عن طريق نوع القيمة المسندة الي المتغير لحظة استخدامه او لحظة اسناد القيمة.	في حالة اللغات البرمجية ال Static Type يتم تعريف القيم و المتغيرات في وقت كتابه الكود من قبل المبرمج و يتم تلقين المفسر – Compiler نوع القيمة المخزنة في المتغيرات.
المميزات	- حجم كود أقل و بالتالي سرعة أكبر في كتابة الكود	- قدر أكبر من الامان في الكود – Type Safety - سرعة في التنفيذ.
العيوب	- أقل بكثير من حيث Type Safety - بطئ التنفيذ بعض الشئ نتيجة للجهد المبذول في استنتاج نوع القيم وقت التنفيذ.	-حجم كبير للكود !!

4- Mutable و Immutable :

	Immutable	Mutable
التعريف	تطلق على أنواع المتغيرات التي لا يمكن تغيير قيمتها لاحقا.بمجرد تمرير قيمة للمتغير … لا يمكن تغير قيمته في أي جزء من الكود.	تطلق على أنواع المتغيرات التي يمكن تغيير قيمتها في أي جزء من أجزاء الكود.

5- Statement و Expression :

	Expression	Statement
التعريف	هي التعليمات البرمجية التي تنتج قيمة أو تعادل قيمة منطقية.مثلX > 5فهي ترجع قيمة منطقية إماTrue OR False	و هي التعليمات البرمجية التي لا ينتج عنها قيمة أو لا تعادل قيمة بحد ذاتهامثل For Statement , If Statement.في لغات مثل Java, C++, C# .

إذا كنت قد قرأت الفقرة السابقة… أعتقد انه يدور في بالك أحد هذة التعليقات الثلاثة:

1. “جميل جدا !”
2. “ما علينا… كمل :s”
3. “كلام فارغ !!”

في الحالات الثلاثة أعدك بأن تكون سكالا – Scala في الفقرة القادمة… أكثر تشويقا !!

---

سكالا (Scala)

أعتقد ان لغة البرمجة سكالا (Scala) قد وجدت إستجابة للكثير من شكاوى المبرمجين على وجه الكرة الأرضية :), فهي كما سنرى تجمع العديد من المزايا المختلفة التي كان يعتقد مسبقاً أنها لا تجتمع في أداه برمجية واحدة.
يمكننا الآن الدخول مباشرة في كتابة بعض الكود والبدء بعبارة :

1 2	Scala> println("Hello, world!") Hello, world!

بالرغم انه سطر واحد إلا انه يوجد العديد من الاسئلة :

1. أين يتم كتابة هذا الكود؟
2. هل سكالا (Scala) لغة compiled أم interpreted ؟

أخبرتكم من قبل أن سكالا (Scala) تجمع العديد من المزايا المدهشة التي لا تجتمع في أي لغة تقليدية أخرى!!.

سكالا (Scala) لغة تقبل العمل بنظام Compiled كما انه يمكن استخدامها في إطار Interpreted.

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

اذا بعد ما انتهينا من المثال التاريخي Hello World دعنا نتعمق أكثر و أكثر!!

ولكن أولاً قبل التعمق لنجرب حيلة صغيرة و هي إستخدام سطر الاوامر كآلة حاسبة… يمكنك كتابة :

1 2	Scala> 1+2 res0: Int =3

الحقيقة انا لم اذكر هذا الامر بغرض إستخدام الآلة الحاسبة… فأنت لن تتعلم لغة برمجة لإجراء حاصل جمع رقمين لكن هناك ملحوظة أود ان أوضحها وهي:

1	res0: int = 3

يقوم سطر الاوامر بحجز متغير و تعيين له اسم –res0- و يضع به ناتج الامر السابق ، اي انه يمكنك إستخدام الناتج الخاص بالعملية السابقة بالشكل التالي:

1 2	Scala> res0 * 3 res1: Int =9

---

المتغيرات

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

أما ان كانت هذة أولى الاسطر البرمجية لك فموضوع المتغيرات يمكن التعبير عنه ببساطة أنها أماكن في الذاكرة ينسب لها أسماء معينة حتى يسهل التعامل معها أو مع القيم المخزنة بها و تختلف فيما بينها حسب نوعها و طبيعتها كما سنرى لاحقا.

يمكنك الإعلان عن متغير معين بالشكل التالي:

1	Scala> val msg = "Hello, world!"

في هذا السطر تم الإعلان عن متغير اسمة “msg” عن طريق الامر val و تم وضع القيمة “Hello world” به

لقد تكلمنا سابقا عن ان سكالا – Scala تتبع نظام Static Types في معالجة المتغيرات و لكننا لم نعلن نوع المتغير – راجع تعريف المصطلحات –

من أهم مزايا سكالا – Scala هو نظام Type Inference: وهو نظام مسؤل عن استنتاج نوع المتغير تلقائيا وقت كتابة الكود و يتم تعيين نوعه وقت التصميم و ليس أثناء التنفيذ ، وبذلك تكون سكالا – Scala قد جمعت بين تقليل حجم الكود و ال Type Safety .!

وبالرغم من وجود نظام Type Inference إلا ان سكالا – Scala لم تحرمنا من امكانية الاعلان عن المتغيرات بشكل مباشر و صريح حيث يمكنك الإعلان عن المتغير بالشكل التالي:

1 2	Scala> val msg3: String = "Hello yet again, world!" msg3: String = Hello yet again, world!

حيث String هو نوع المتغير

الان يمكننا تجربة شئ آخر مع المتغيرات…

ما رأيك بالسطر التالي

1 2	Scala> var msg3: String = "Hello yet again, world!" msg3: String = Hello yet again, world!

هل تلاحظ اين الاختلاف … نعم انه var بدلا من val … و لكنها نفس النتيجة!! ما الفائدة إذا !!؟

تحدثنا سابقا عن مصطلحين Mutable , Immutable !!

تستخدم val لتعريف متغيرات من نوع immutable و التي لا يمكن نغييرها بعد وضع قيمة بها!

اما var فهي للأنواع ال Mutable و التي يمكنك تغيرها لاحقا !!

مثال :

1 2 3 4 5 6 7 8 9 10 11 12

Scala> val msg: String = "Hello yet again, world!" msg: String = Hello yet again, world!   Scala> msg = "Goodbye cruel world!" 6: error: reassignment to val msg = "Goodbye cruel   Scala> var greeting = "Hello, world!" greeting: java.lang.String = Hello, world!   Scala> greeting = "Leave me alone, world!" greeting: java.lang.String = Leave me alone, world!

---

الدوال Functions

كيفية التصريح بدالة how to declare a function ؟

فلنتأمل هذا المثال:

1 2 3

Scala> def max(x:Int, y:Int):Int = {     | if(x > y)return x else return y } max: (Int,Int)Int

عند طلب الدالة Function call :

1 2	Scala> max(4,5) res0: Int = 5

ملاحظات :-

1. لو لا تقوم بارجاع قيمة اقدر احذف = و تسمي unit مش دالة
2. كتابة نوع ال return value ليس ضروري يعني ممكن لا يكتب و يفهمه ال type inference
3. كتابة نوع ال parameters ضروري .
4. يمكن الاستغناء عن كلمة return
5. يمكن الاستغناء عن {} فى حالة اذا كان جسم الدالة سطر واحد

بالتالى يمكن كتابة الدالة كالاتي:

1	Scala> def max(x:Int, y:Int)=if(x > y) x else y

6. اذا كانت الدالة لا تاخذ parameters يمكن حذف () الفارغين اثناء الطلبcall وبالتالى تقدر تعاملها كـمتغير

1 2 3 4 5 6 7 8

Scala> def teet()=5 teet: ()Int   Scala> teet res3: Int = 5   Scala> teet() res4: Int = 5

7. اذا كانت الدالة يمكن ان ترجع اكثر من نوع من القيم حسب احتمالات مختلفة يقوم ال type inference بجعل نوع القيمة ِAnyVal حتي يسمح باي قيمة

مثال:

1 2	Scala> def func(x:Int)=if(x > 0)1 else 0.1 func: (Int)AnyVal

لانه يمكن ان ترجع Int أو double .

8. طريقة اخري للتصريح بدالة Literal function

هذه الطريقة تسمح بالتصريح بدالة بدون اسم (ع الطاير) و سيكون لها استخدامات كثيرا مستقبلا فى higher order functions

1 2	Scala> (x:Int) => x+x res9: (Int) => Int =

---

اللاجمل

تعودنا فى لغات البرمجة على عنوان كبير فى اي كتاب ألا و هو الجمل او Statements و تشمل if conditions و loops مثل for و while

لكن هنا فى سكالا يوجد اختلاف فى المعاملة فسكالا تعامل تقريبا كل شئ كتعبير expression وليس كجملة statement

لذلك علينا أولا معرفة ما الفرق بينهما ؟؟

• الجملة: هي كل ما يفعل شئ و ليس له قيمة فى حد ذاته مثل conditions التى تحدد ما تقوم به بناء على شروط سابقة و loops التي تكرر ما تفعله لمده معينة محددة بشروط ايضا
• التعبير: هو كل ماله نتيجة اي يمكن ان يوضع على الجانب الايمن لعلامة = (assign operator) اي يمكن تخزين قيمته فى متغير

في سكالا كل شئ تعبير يمكن ان يرجع قيمه

مثال:

1 2	Scala> val x=if(5 >6)11 else 12 x: Int = 12

فى هذا المثال تم تعيين القيمة x لناتج الجملة/التعبير if

---

LOOPS

مثال على while loop تطبع ال arguments التي تكتب بجانب اسم البرنامج فى سطر الاوامر:

1 2 3 4 5

Scala> var i = 0 while (i < args.length) { println(args(i)) i += 1 }

نلاحظ هنا loop عادية جدا ولكن كما قلنا سابقا ان في functional programming يفضل عدم استخدام المتغيرات و loops فما الحل ?

• هذا حل مبدأي تخلصنا فيه من المتغير و لكن بقيت loop

1	Scala> for (arg println(arg)

• هذا الحل النهائي يخلصنا من المتغير و ال loop بأن نستخدم داله foreach تاخذ argument عبارة عن دالة اخري تاخذ كل عنصر من عناصر args على حده كـ argument وتطبق عليه println

1	Scala> args.foreach(arg => println(arg))

• و يمكن اختصارها ايضا هكذا :

1	Scala> args.foreach(println)

حيث ان دالة foreach لا ترجع الا قيمة واحدة و هى عناصر args .

---

المجموعات Collections

اولا الصفوف Arrays :-

• التصريح بصف جديد:

1 2	Scala> val GreetStrings = new Array[String](3) GreetStrings: Array[String] = Array(null, null, null)

• طريقة اخري للتصريح بصف :

1 2	Scala> val x=Array("ahmed","mohamed") x: Array[String]= Array(ahmed, mohamed)

• استرجاع قيمه معينة وفي هذه الحالة null :

1 2	Scala> GreetStrings(0) res0: String = null

ملاحظة مهمة جدا : الحقيقة ان الـ syntax السابق هو اختصار لـ

1 2	Scala> GreetStrings.apply(0) res3: String = null

وهذا يعني ان عملية استرجاع قيمة من صف ما هي الا دالة function ولكن يمكن حذف اسمها تبعا لقواعد الـ syntax الخاص بسكالا و مثل تلك القواعد البسيطة هو ما يعطي لسكالا قدرتها على التوسع و التشكل.

• تعيين قيمة فى صف :

1	Scala> GreetStrings(0)="Hello"

كالعاده سيكون اختصار لداله و هي :

1	Scala> GreetStrings.update(0,"Hello)

مثال اخر على قدرة سكالا على التشكل:

1 2 3 4

Scala> for (i <- 0 to 2) println(GreetStrings(i)) Hello null null

هذا الـ genetartor هو ايضا اختصار لدالة و هي :

1 2	Scala> 0.to(2) res7: Range.Inclusive = Range(0, 1, 2)

القاعدة: هي ان فى سكالا عند طلب دالة call a function يمكن حذف النقطة و استبداله بمسافة space .

و يمكن ايضا حذف الاقواس () اذا كان لها parameter واحد فقط و استبدالهم بمسافة

ثانيا : القوائم Lists :

• التصريح بقائمة :

1 2	Scala> val x=List(1,2,3,4) x: List[Int] = List(1, 2, 3, 4)

• الفرق بين الصف و القائمة :

1. الصف mutable و القائمة immutable .
2. الصف عدد عناصره ثابت اما فى القائمة فعدد العناصر قابل للزيادة.

• الاضافة للقائمة :

فلنتأمل الامثلة التالية

1 2 3 4 5 6 7 8 9 10 11

Scala> val onetwo=List(1,2) onetwo: List[Int] = List(1, 2)   Scala> val threefour=List(3,4) threefour: List[Int] = List(3, 4)   Scala> onetwo :: threefour res22: List[Any] = List(List(1, 2), 3, 4)   Scala> onetwo ::: threefour res23: List[Int] = List(1, 2, 3, 4)

سنلاحظ الفرق بين :: و :::

- :: بياخذ قبله اي نوع و بعده قائمة و يضع ما فبله كـ عنصر اول فى القائمة و لذلك يمكن ان يستخدم فى التصريح بقائمة عن طريق اضافة عنصر لقائمة فارغة.

1 2	Scala> 1::List res24: List[Int] = List(1)

أو يمكن استخدام Nil لتعبير عن قائمة فارغة

1 2	Scala> 1::Nil res27: List[Int] = List(1)

- ::: يأخذ قبله قائمة و بعده قائمة و يقوم باضافتهم لبعضهم البعض concatenation

ملاحظة هامة جدا :

نلاحظ هنا ان :: و ::: ما هم الا دوال و اننا نستخدم نفس القاعدة الخاصة باستبدال النقط و الاقواس بمسافات مع قاعدة اخري صغيرة ألا و هي : -

• اذا انتهي اسم الدالة بـ : تُنفذ من اليمين لليسار بمعني اخر فى حالة

1	Scala> 1::Nil

تعتبر Nil هى parameter الاولى للدالة و 1 هو ال parameter الثانية.

بعض الدوال الخاصة بالقوائم :

1 2	Scala> val x=List(1,2,3,4) x: List[Int] = List(1, 2, 3, 4)

سنلاحظ هنا اننا نقوم بعمل دالة ع الطاير تحوي اختبار معين كـ argument لدالة تانية لتقوم بتنفيذ هذا الاختبار بطريقة معينة

تطبق هذا الاختبار علي كل عناصر القائمة و اذا كان موجود ترجع true

1 2	Scala> x.exists(s => s==3) res32: Boolean = true

ترجع قائمة بها العناصر التى تنطبق مع الاختبار فقط

1 2	Scala> x.filter(s=> s>3 res33: List[Int] = List(4)

تقوم بتنفيذ مهمة ما على كل عناصر القائمة

1 2 3 4 5 6 7 8

Scala> x.map(s=> s*2) res34: List[Int] = List(2, 4, 6, 8)   Scala> x.isEmpty res36: Boolean = false   Scala> x.length res37: Int = 4

تحويل القائمة لـ string و وضع بين عناصرها الفاصل المطلوب و فى هذه الحالة مجرد مسافة

1 2	Scala> x.mkString res39: String = 1 2 3 4

ترجع اول عنصر فى القائمة

1 2	Scala> x.head res40: Int = 1

ترجع باقى عناصر فى القائمة بدون العنصر الاول

1 2	Scala> x.tail res41: List[Int] = List(2, 3, 4)

ترجع اخر عنصر فى القائمة

1 2	Scala> x.last res43: Int = 4

ترجع true فقط اذا كان الاختبار true على كل عناصر القائمة

1 2 3 4 5

Scala> x.forall(s=> s>3) res42: Boolean = false   Scala> x.reverse res44: List[Int] = List(4, 3, 2, 1)

تحذف اول عنصرين فى القائمة

1 2	Scala> x.drop(2) res47: List[Int] = List(3, 4)

تحذف اخر عنصرين فى القائمة

1 2	Scala> x.dropRight(2) res48: List[Int] = List(1, 2)

ثالثا : Tuples

تشبه القوائم و لكنها تختلف فى انها يمكن ان تحتوي على أنواع مختلفة من القيم على عكس القوائم التى تحتوي على نوع واحد فقط ولها حد اقصى من حيث عدد العناصر و هو 22

• التصريح بـ Tupule

1 2	Scala> val pair=(99,"EgyptAir) pair: (Int, java.lang.String) = (99,EgyptAir)

• استرجاع قيمة

1 2 3 4 5

Scala> pair._1 res49: Int = 99   scala> pair._2 res50: java.lang.String = egypt

رابعا : المجموعات Sets :

هي عبارة عن قائمة ذات عناصر فريدة أي لا تسمح بالتكرار

• التصريح بها:

1 2	Scala> val test=Set(1,1,3,4,5,6,6) test: scala.collection.immutable.Set[Int] = Set(5, 3, 1, 6, 4)

• هي ايضا immutable و لكن يمكن جعلها mutable عن طريق تنفيذ هذا الأمر قبل التصريح بها

1 2 3 4

Scala> import scala.collection.mutable.Set import scala.collection.mutable.Set Scala> val test=Set(1,1,3,4,5,6,6) test: scala.collection.mutable.Set[Int] = Set(5, 3, 1, 6, 4)

خامسا : Maps :

• التصريح به :

1 2	Scala> val x=Map("name"->"ahmed", "age"->55) x: scala.collection.immutable.Map1 = Map(name -> ahmed, age -> 55)

• استرجاع القيمة :

1 2	Scala> x("name") res51: Any = ahmed

خريطة سكالا

و هكذا نصل الي نهاية اليوم الأول و أرجو أن أكون قد وُفِقت فى نقل معلومة جديدة و بشكل جديد

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

سابقا تم نشر عبارات عن زيارة العالم ريتشارد ستالمان الى جامعة النجاح الوطنية وبعد النشر كان يتابع السيد عباس العلي ما كتب ويرد على الطروحات بحكمة لكن بعد عدة ايام قائم المسؤولون عن المدونة بحذف ما تم تعليقة 

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

وهذا التعليق الذي كتبة السيد عباس العلي ومن ثم تم حذفة  

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