Block 1 (50.4 MB)

Block 2 (5.9 MB)

Block 3 (6.8 MB)

شرح لغة جافاسكربت للمبتدئين ، كتبه Learner

الشرح على ملف بصيغة pdf

لتحميل البرامج التي تم شرحها

أنصح بقراءة الشرح من ملف الـ pdf لأن تنسيقه أفضل من الشرح الموجود في هذه الصفحة

قائمة المحتويات:

1. المقدمة
2. من أساسيات البرمجة: تقييم المعادلات والمقارنات
3. من أساسيات البرمجة: or , and , not
4. المتغيرات Variables
5. من أساسيات البرمجة: if…else , while , for
6. جافاسكربت و HTML
7. بعض الأوامر الشائعة
   1. document.write()
   2. window.prompt()
   3. window.alert()
   4. window.confirm()
   5. Math.round()
8. كتابة التعليقات والملاحظات
9. البرنامج رقم 1: تصنيف البيض لعدة مقاسات بحسب الوزن
10. البرنامج رقم 2: لعبة التخمين
11. البرنامج رقم 3: إيجاد القاسم المشترك الأكبر بين رقمين
12. String methods
13. المصفوفات Arrays
14. الدوال Functions
    1. البرنامج رقم 4: دالّة لتقريب الأرقام إلى خانتين عشرية
    2. البرنامج رقم 5: دالة لحساب المساحة بالمتر المربع
15. البرنامج رقم 6: حساب متوسط التكاليف الشهرية
16. HTML Graphical User Interface
17. البرنامج رقم 7: التحويل من لتر إلى جالون
18. البرنامج رقم 8: البحث عن رمز الاتصال الدولي لدول العالم

1- المقدمة :

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

لغة الجافاسكربت تتطلب فهم ومعرفة اللغة الأساسية لصفحات الانترنت وهي HTML ، فإذا لم تكن لديك خلفية عنها ، أنصحك بعدم إكمال قراءة هذا الملف والتوجه إلى شرح لغة الـ HTML والموجود في هذا الرابط:
http://aoum150.wordpress.com/2009/07/05/html_lesson

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

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

لغة جافاسكربت تختلف كلياًّ عن لغة الجافا ولا توجد علاقة بينهم ، ولكن أحياناً يتم استخدام كلا اللغتين في بعض تطبيقات وبرامج الانترنت.

كل لغة برمجة لها قوانين وقواعد لكتابتها تسمى syntax ، إذا لم نتّبع هذه القوانين بشكل صحيح وصارم فإن احتمال عدم عمل البرنامج ، أو عمله بغير الشكل الذي نريده ونتوقعه أمر وارد بشكل كبير ، لذلك معرفة قوانين وقواعد كتابة اللغة من أهم الأساسيات التي يتعلّمها المبرمج في لغات البرمجة.

لغة الجافاسكربت – وإن لم يخب ظني جميع لغات البرمجة المشهورة – تكون حسّاسة بالنسبة للأحرف الكبيرة والصغيرة ، بمعنى أنها ستعامل الكلمات if – IF – If – iF كأنها أربع كلمات مختلفة ، فيجب التنبه لذلك.

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

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

في جميع لغات البرمجة ، يتم تنفيذ الأوامر بالترتيب ، بمعنى أن الكمبيوتر سيبدأ بتنفيذ الأمر الموجود في السطر الأول ، ثم السطر الثاني … وهكذا حتى ينتهي من تنفيذ الأمر الموجود في آخر سطر في البرنامج ، ثم سينتهي.

العودة لقائمة المحتويات

2- من أساسيات البرمجة: تقييم المعادلات والمقارنات

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

في الكمبيوتر ، كل حرف أو رمز يكون له قيمة رقمية خاصة تابعة للترميز العالمي ASCII code أو Unicode . فعندما نعمل مقارنات بين أحرف أو رموز أو بين أحرف وأرقام مثلاً ، فإن الكمبيوتر في الواقع يعمل مقارنة بين قيمة هذه الأحرف أو الرموز في ترميز ASCII وليس بالحرف أو الرمز نفسه.
الفرق بين ترميز آسكي ويونيكود هو أن الثاني يحتوي على حروف وأشكال للغات أكثر بكثير من الأول ، فاليونيكود يحتوي على 65536 مابين أرقام وحروف ورموز مختلفة لعشرات اللغات ومن ضمنها العربية ، بينما يحتوي ترميز آسكي على 128 فقط! مابين أحرف وأرقام ورموز.
قيمة أي حرف أو رمز في الترميزين هي نفسها ، لذلك لا داعي للتساؤل عن قيمة حرفٍ أو رمزٍ ما في كلا النوعين.
القيم في ترميز آسكي متسلسلة بشكل ثابت مع تسلسل الأحرف والأرقام والرموز ، وبشكل عام نتائج التقييم في هذا الترميز ستكون كالتالي:

. < 0 < 1 < 2 < … < 9 < A < B < … < Z < a < b < … < z

آلية تقييم العمليات الحسابية في الكمبيوتر:

العمليات الحسابية في أجهزة الحاسب يتم تنفيذها حسب قوانين معينة تسمى أولويات التنفيذ على النحو التالي:
أولاً: تنفيذ مابين الأقواس.
ثانياً: تنفيذ عمليات الضرب والقسمة.
ثالثاً: تنفيد عمليات الجمع والطرح.

• في حالة تشابه العمليات سيتم التنفيذ ابتداءً من اليسار ثم سيتجه لليمين حتى ينتهي.
• في بعض لغات البرمجة (الجافاسكربت ليست من ضمنها) سيتم تقييم المعادلات من اليسار لليمين بغض النظر عن نوع العمليات الموجودة.

مثال:

2 – 5 +3 * 6 / (2 +1)

كم تعتقد ستكون نتيجة هذه المعادلة من وجهة نظر الكمبيوتر؟
سنأخذها بالأولويات السابقة ونحلل المعادلة خطوة خطوة ..
أولاً : سنبحث عن الأقواس إن وجدت ونقوم بتنفيذها:

2 – 5 + 3 * 6 / 3

ثانياً : سنبحث عن عمليات الضرب والقسمة وننفذها ابتداءً من اليسار ثم ننتقل لليمين حتى ننتهي:

2 – 5 + 18 / 3

2 – 5 + 6

ثالثاً : سنبحث عن عمليات الجمع والطرح وننفذها من اليسار لليمين:

-3 + 6
3

طيب بما أننا عرفنا الآن آلية تقييم المعادلات سننتقل لمرحلة المقارنات ..
نتائج المقارنات دائماً إما أن تكون المقارنة صحيحة أو خاطئة لايوجد خيار ثالث، سأقسم المقارنات إلى ثلاثة أقسام:

1- مقارنة أرقام بأرقام:

مقارنة الأرقام هي الأسهل، وهي تعتمد على أولويات تنفيذ العمليات الحسابية التي شرحتها قبل قليل.

مثال: قيم العبارة التالية:

15 – (3 + 3) * 2 < 3 * 3 + 1

سنحلل كل طرف ثم نقيّم الناتج النهائي للطرفين هل هو صحيح أم خاطئ:

15 – (3 + 3) * 2 < 3 * 3 + 1
15 – 6 * 2 < 9 + 1
15 – 12 < 10
3 < 10

العبارة صحيحة لأن 3 أصغر من 10 !

2- مقارنة أحرف بأحرف:

كما ذكرت سابقاً ، الكمبيوتر يتعامل مع الأحرف والرموز بقيمتها التابعة لترميز ASCII ، لذلك عندما نعمل مقارنة أرقام مع أحرف سيتم مقارنة قيمهم التابعة لهذا الترميز ، وكما ذكرت في المقدِّمة ، قاعدة هذا الترميز هي كالتالي:

. < 0 < 1 < 2 < … < 9 < A < B < … < Z < a < b < … < z

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

مثال: قيم العبارة التالية:

‘elephant’ < ‘mouse’

المقارنة ستتم بين الحرفين e و m ..
وفي ترميز آسكي ، قيمة e أقل من قيمة m ، لذلك العبارة صحيحة !

طيب لو غيرنا أول حرف من إحدى الكلمات وجعلناه كبيراً:

‘elephant’ < ‘Mouse’

المقارنة ستكون بين e و M ..
النتيجة هنا خاطئة ، لأن حرف M الكبير قيمته أكبر من قيمة حرف e الصغير.

لو كان أول حرفين في الطرفين متشابهين ، ستتم المقارنة بين الحرفين الذين بعدهم ، مثال:

‘cat’ < ‘cave’

هنا الحرفين الأولين في الكلمتين متشابهين ، لذلك ستتم المقارنة بين t و v ..
والعبارة صحيحة لأن t أصغر من v !

أحب التنويه هنا بأن العلامة ‘ التي تحيط بالكلمات ، تدلّ على أن المقارنة بين string و string آخر ، وسيتم توضيحها لاحقاً في قسم المتغيّرات Variables.

3- مقارنة أرقام بأحرف أو العكس:

تعتمد على نفس المبدأ والقاعدة، مثال:

‘7′ < ‘a’

النتيجة صحيحة ، لأن قيمة الرقم 7 أقل من قيمة الحرف a.

مثال آخر:

7 == ‘7′

أحب أذكركم هنا بأن الكمبيوتر يتعامل مع قيم الأرقام والأحرف وليس بشكلها ، والآن في هذا المثال يوجد رقم 7 في طرف وفي الطرف الثاني 7 على شكل string لأنها بين قوسين.
وفي كلا الحالتين ، سيقوم الكمبيوتر بتحويل الطرفين إلى قيمتهم الفعلية ثم سيقارن بين القيم ، لذلك المقارنة صحيحة هنا.

نقطة أخيرة بخصوص مقارنة الأرقام والأحرف، المقارنات التالية:

7 < ‘a’
7 > ‘a’
7 == ‘a’
!كلها خاطئة

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

أحب أن أذكر هنا بأن علامة أكبر من أو يساوي في لغات البرمجة تكتب علامة يساوي في اليمين وعلى يسارها أكبر من متصلين ببعض، مثلاً لو أردنا كتابة 3 ≥ 2 نكتبها على الشكل التالي في البرنامج:

3 >= 2

ولو أردنا كتابة 5 ≥ 3 :

5 >= 3

واذا أردنا كتابة 5 تساوي 5 نكتبها على الشكل التالي:

5 == 5

علامتين يساوي وليست واحدة.

وإذا أردنا كتابة 5 لاتساوي 4 نكتبها على الشكل التالي:

5 != 4

علامة التعجب تفيد النفي ، أي أنه لايساوي.

وللتلخيص هذا جدول لإشارات المقارنة مع معانيها:

وفي الجدول التالي توضيح لإشارات العمليات الحسابية بافتراض أن y = 5 و x = 10 :

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

21 % 7 = ?

هي تعتمد على القسمة أولاً ..
يعني نقسم 21 على 7 والنتيجة رقم 3
لذلك لايوجد باقي للقسمة فتكون نتيجتها 0

21%7 = 0

20 % 3 = ?

هنا نقسم 20 على 3 والنتيجة 6.67
لكن هنا لانريد عدداً غير صحيح ، لذلك سنأخذ الرقم 6 فقط
3 ضرب 6 تساوي 18
معناها باقي قسمة 20 على 3 يساوي 2

20%3 = 2

10%3 = ?

نفس الشي نقسم 10 على 3 .. النتيجة ستكون 3.33
نأخذ 3 بدون الكسر ونضربها في 3 ، وبعدها نحسب الفرق بين النتيجة وبين رقم 10 وستكون هي باقي القسمة
يعني باقي القسمة ستكون: (3*3) – 10

10%3 = 1

لو كانت قسمة الرقمين على بعض عدد صحيح ستكون نتيجة باقي القسمة صفر..

20%5 = ?

نقسم 20 على 5 ، والنتيجة ستكون 4 بدون كسور وأرقام عشرية. لذلك لن يكون هناك باقي للقسمة.

20%5 = 0

مثال أخير:

12%7 = ?

نقسم 12 على 7 والنتيجة هي 1.71 تقريباً .. نأخذ 1 ونترك الكسر ، ثم نضربه في 7 ، ونحسب الفرق بين النتيجة وبين رقم 12 . الفرق هو 5 .. لذلك :

12 % 7 = 5

العودة لقائمة المحتويات

3- من أساسيات البرمجة: or , and , not :

هذه العبارات تستخدم لربط عدة مقارنات مع بعض وهي مفيدة جداً وأعتقد بأنه لايوجد برنامج يخلو منها.

1- or :

تكتب or في البرمجة على شكل || ، والزر الخاص بهذا الرمز موجود في لوحة المفاتيح على يسار زر الإدخال (إنتر) ويجب الضغط في نفس الوقت على زر shift.

هذه الأداة وظيفتها تخيير المتصفح بين مقارنتين أو أكثر، فلو كانت إحداهما صحيحة ستكون النتيجة النهائية صحيحة، أي أنه لن تكون النتيجة النهائية خاطئة – إذا كانت جميع العلاقات مربوطة بهذه الأداة – إلا اذا كانت كل المقارنات نتيجتها خاطئة.

في الجدول التالي توضيح أكثر ، بافتراض وجود مقارنتين ، وسنرمز لهم بـ A , B :

معنا السطر الأول كالتالي: إذا كانت المقارنة الأولى صحيحة أو المقارنة الثانية صحيحة فالنتيجة النهائية صحيحة.
معنا السطر الثاني كالتالي: إذا كانت المقارنة الأولى صحيحة أو المقارنة الثانية خاطئة فالنتيجة النهائية صحيحة.
وهكذا لبقية الأسطر ..

2- and :

تكتب and على شكل && ، وهي تربط بين أكثر من معادلة أو مقارنة ، ونتيجتها لا تكون صحيحة ، إلّا إذا كانت جميع المقارنات – التي تربط بينها – صحيحة. وللتوضيح أكثر انظر للجدول التالي:

معنى السطر الثاني: إذا كانت المقارنة الأولى صحيحة و والمقارنة الثانية خاطئة فالنتيجة النهائية خاطئة.
الخ …

3- not :

تكتب في البرمجة على شكل علامة تعجب ! وتفيد بعكس نتيجة المقارنة ، أي أنه إذا كانت نتيجة المقارنة صحيحة فالأمر هذا يعكس النتيجة إلى خاطئة ، كما في الجدول:

في الجدول التالي ، تطبيق لجميع الأوامر: or || , ! not , && and :

مثال:

سؤال أتى لنا في الاختبار النهائي ، يقول أثبت عن طريق جداول Truth tables أن:

NOT (A AND B) = NOT A OR NOT B

أو ممكن تكتب بالشكل التالي:

! (A && B) = !A || !B

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

الذي عملته هنا ثابت لحل أي مسألة من هذا النوع ، حتَّى نشمل جميع الاحتمالات للمعادلات.
طيب الآن نرجع للمعادلة التي في السؤال ، ونحلل كل جزء فيها ..
الجزء الأيسر: حتّى نصل له لابد من إيجاد أجزائه الصغيرة أولاً ..

! (A && B)

أول شيء لازم نحسب نتائج A&&B حتّى نستطيع حساب نتائج (A&&B)! ، لذلك سنضيف عمودين على الجدول ، كل عمود خاص بواحدة ، وسنضع النتائج في صفوفها كما تعلّمنا:

كذا نكون انتهينا من الجزء الأيسر، فننتقل للجزء الأيمن ونحلله بنفس الطريقة ..

!A || !B

أول شيء ، لازم نحسب نتائج A! و B! حتّى نستطيع حساب نتائج A||!B! ..
فالآن سنقوم بإضافة ثلاثة أعمدة للجدول ، عمود لـ A! و عمود لـ B! وعمود لـ A || !B! :

وبهذا نكون أثبتنا أن الطرفين يتساوون في جميع الحالات ، وهذا الجدول هو الحل للسؤال.

قاعدة:

دائماً يتم تنفيذ ! قبل && أو || ، مثل الجزء الأيمن في المثال A || !B! . لكن إذا كانت && أو || داخل أقواس مثل الجزء الأيسر في المثال (A && B)! ، نقوم بتنفيذ مابداخل القوس أولاً.

العودة لقائمة المحتويات

4- المتغيرات Variables :

المتغيِّر هو معرِّف له اسم وله نوع معيّن (يحددهما المبرمج) ، هذا المتغيِّر يرتبط بقيمة معينة مخزنة في ذاكرة الحاسب ، هذه المتغيرات يمكن أن تكون قيمتها الموجودة في الذاكرة عبارة عن أرقام أو كلمات أو جُمل ، فمن الممكن أن تكون مثلاً تكاليف مالية ، أو أسماء طلّاب ، أو درجات طلّاب ، أو أرقام هواتف ، أو عناوين ، أو أي شيء آخر ممكن أن يفيدنا في تحقيق الهدف من البرنامج. وسميَّت متغيرات ، لأننا نستطيع تغيير قيمها في أثناء عمل البرنامج.

في الجافا سكربت ، كلُّ المتغيرات باختلاف أنواعها المشروحة في المنهج تكون من نوع واحد – بعكس باقي لغات البرمجة – ولكن يوجد شيء بسيط يجب الانتباه له ، وهو إذا أردنا أن نتعامل مع جُمل أو كلمات أو أرقام سرية أو أي شيء لا يصلح أو لانريد استعماله في عمليات الحساب الرياضية (مثل الجمع ، الضرب .. الخ) يجب علينا تمييزه عن الأرقام عن طريق وضعه بين علامات ‘التنصيص’ عند تعريفه ، وهو يسمى في البرمجة String.

فالمتغير له اسم وقيمة ، فمثلاً من الممكن أن يكون لدينا متغيِّر اسمه userName وقيمته هي ‘Learner’ ، أو يكون اسمه discount وتكون قيمته 0.20 ، أو يكون اسمه studentGrade وتكون قيمته 95 ، لاحظوا بأن القيمة الأولى وضعتها بين علامتي ‘تنصيص’ لأني أريد التعامل معها على شكل string ، أو بمعنى آخر لا أريد أن أعدِّل على هذه القيمة أو أستعملها في المعادلات الرياضية ، ولكن القيمتين الثانية والثالثة جعلتها وحيدة بدون علامات ‘التنصيص’ لأني أريد أن أستخدم هذه الأرقام في معادلات رياضية مختلفة ، فمثلاً أريد من البرنامج أن يقوم بمقارنة درجة الطالب حتى يقوم بوضع معدَّل مكانها حسب القوانين التي وضعتها في برنامج ، وبالنسبة لسعر الخصم ، أريد أن يتم ضربه في الأسعار الأصلية ومن ثم يعرض لي السعر بعد الخصم.

المتغيرات يتم عملها في مرحلتين ، مرحلة الإعلان declare ، ومرحلة الإنشاء أو البدء initialize.
1- المرحلة الأولى declare : نقوم بإخبار الكمبيوتر عن طريق كتابة أمر معيَّن بأننا قمنا بعمل متغيِّر ونريده أن يحجز مكان له في ذاكرة الحاسب. في لغات البرمجة الأخرى تعتمد المساحة التي حجزها الكمبيوتر لهذا المتغيِّر على نوع المتغيِّر ، فكما قلت في اللغات الأخرى توجد عدّة أنواع للمتغيرات.
2- المرحلة الثانية initialize : سنقوم هنا بوضع قيمة للمتغيِّر الذي عملناه في المرحلة الأولى ، وسيقوم البرنامج بوضع هذه القيمة في مكان الذاكرة الذي تم حجزه في المرحلة الأولى.

تعريف المتغيرات أو الإعلان عنها في الجافاسكربت يكون ببساطة عن طريق كتابة var ثم اسم المتغيِّر ، فلو أردنا تعريف متغير باسم stundentGrade نكتبه كالتالي:

var studentGrade;

ولو كنّا نريد تعريف متغيّر من نوع string باسم studentName سيكون الأمر كالتالي:

var studentName = new string();

نلاحظ بأن الإعلان عن متغيِّر من نوع string يتكون من جزأين ، الجزء الذي بعد علامة اليساوي يخبر البرنامج بأن هذا المتغير سيكون من نوع string.

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

نستطيع أن نقوم بالإعلان عن أكثر من متغيّر في نفس الأمر ، مثل:

var studentName, studentGrade, studentSection;

المرحلة الثانية وهي إنشاء المتغيِّر ، تكون عن طريق وضع قيمة للمتغيِّر باستخدام علامة يساوي ، مثل:

studentGrade = 95;

وللمتغيرات من نوع string ستكون كالتالي:

studentName = ‘Learner’;

علامة التنصيص كما ذكرت ، تبيِّن لنا وللبرنامج بأن هذا المتغير هو string.

قيم المتغيرات ، ممكن أن تكون قيم لمتغيرات أخرى ، مثلاً لو قمنا بتعريف متغير في بداية البرنامج باسم grade وأعطيناه قيمة 92 ، ومن ثم قمنا بتعريف متغير جديد وسميناه studentGrade ، إذا أردنا أن نجعل قيمة المتغير الثاني تساوي قيمة المتغير الأول ، نكتبها كالتالي:

studentGrade = grade;

وستكون الآن قيمة المتغير الثاني تساوي 92 ، ونفس الكلام ينطبق على المتغيِّرات من نوع string.

يمكننا اختصار مرحلتي الإعلان والإنشاء – وهذا هو المتعارف عليه لدى المبرمجين – كالتالي:

var studentGrade = 95;
var studentName = ‘Learner’;

نلاحظ بأن الفرق الوحيد الذي يميز المتغيرات من نوع string عن باقي المتغيرات هو علامتي ‘التنصيص’ فقط.

شروط و قوانين تسمية المتغيرات:

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

هذه الشروط خاصَّة بلغة الجافاسكربت ، وهي في الغالب تتشابه مع باقي لغات البرمجة المختلفة.

• الحرف الأول: يجب أن يكون حرف كبير أو صغير أو علامة underscore _ أو رمز الدولار $. ومن المفضل أن لايكون الحرف الأول حرف كبير.
• بقية الأحرف: يجب أن تكون حرف كبير أو صغير أو علامة underscore _ أو رمز الدولار $ بالإضافة إلى إمكانية استعمال الأرقام.
• إذا كان الاسم يتكون من أكثر من كلمة ، لاتستعمل المسافات أبداً ، واجعل جميع أحرف الكلمات صغيرة باستثناء الحرف الأول من الكلمة الثانية والثالثة والرابعة .. الخ ، مثل: studentGrade ، schoolStudentGrade ، carModelSerialNumber
• أو يمكنك فصل الكلمات عن بعض بعلامة underscore _ إذا أردت.
• يجب تسمية المتغيرات بأسماء تدلّ على فائدة المتغيّر ، بمعنى إذا أردت أن تعمل متغير ليحمل اسم مستخدم ، اجعل اسمه userName ، ولا تقم بتسميته u1 مثلاً أو un ، لأنك إذا أردت مراجعة الكود بعد زمن ، ستجد صعوبة في معرفة فائدة هذا المتغير إذا لم تقم بتسميته بشكل صحيح وواضح.
• يجب أن تتأكد من أن الاسم لايعتبر كلمة محجوزة في الجافاسكربت (reserved word). وللاطلاع على الكلمات المحجوزة في الجافاسكربت شاهد هذه الصفحة.

العودة لقائمة المحتويات

5- من أساسيات البرمجة: if..else , while , for :

في البرمجة يوجد نوعين من الأوامر الهامة:

1- أوامر التكرار مثل for, while :

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

2- أوامر الشرط أو الاختيار مثل if…else :

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

1- for :

يتكون هذا الأمر من ثلاثة نقاط أساسية يجب أن يحتوي عليها:

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

لو أردنا عمل برنامج يكتب رمز $ عشر مرات في سطر واحد في المتصفح ستكون طريقة كتابة هذا الأمر كالتالي:
أولاً : سنكتب الجزء الأول وهو إعلان وإنشاء المتغير – الذي سيتحكم بعدد مرات تكرار أمر الكتابة – مع قيمة يبدأ منها العد كالتالي:

var count = 1

ثانياً : سنكتب معادلة أو مقارنة لإيقاف أمر التكرار بعدما تتم كتابة الرمز عشر مرات:

count <= 10

لماذا جعلناها أصغر من أو يساوي؟
افترض بأننا وضعناها count = 10 .. هذه المقارنة ستكون خاطئة منذ بداية البرنامج لأن قيمة المتغير في البداية ستكون 1.
افترض بأننا وضعناها count > 10 .. هذه المقارنة ستكون خاطئة منذ بداية البرنامج لأن قيمة المتغير في البداية ستكون 1.
افترض بأننا وضعناها count < 10 .. هذه المقارنة ستكون صحيحة إلى أن تصبح قيمة count تساوي 9 وبعدها ستكون المقارنة خاطئة ، أي أن التكرار سيكون 9 مرات فقط ، ونحن نريده أن يتكرر 10 مرات.

ثالثاً : سنكتب معادلة لزيادة قيمة المتغير بواحد:

count = count + 1

ويمكننا كتابتها أيضاً هكذا:
count += 1 أو ++count

وطريقة الكتابة الأكثر استعمالاً في عالم البرمجة هي ++count .
هذه المعادلة ستزيد من قيمة المتغير برقم واحد بعد تنفيذ كل عملية (كتابة رمز $) حتى تصبح قيمة المتغير 11 ، وسيتوقف بعدها أمر التكرار لأن الشرط والمقارنة ستصبح خاطئة.

طيب الآن سنكتب أمر لكتابة الرمز $ (هذا الأمر غير صحيح ولكنه للتوضيح فقط) :

write $;

طيب الآن نجمع الأجزاء السابقة مع بعض:

for (var count=1; count<=10; count++)
write $;

طريقة تنفيذ هذا الأمر ستكون كالتالي:
سيقوم البرنامج بالذهاب للجزء الأول ثم سينتقل للجزء الثاني وإذا كانت نتيجة المقارنة صحيحة سينتقل إلى الأمر الذي نريد تنفيذه (المحتوى). ثم سينتقل للجزء الثالث ليزيد قيمة المتغيّر count ، ثم سيعود للجزء الثاني ، وهكذا …

وإذا كانت نتيجة المقارنة خاطئة لن يتم تنفيذ الأمر وسيتم انهاء البرنامج ، أو الانتقال لأمر آخر إذا كان البرنامج يحتوي على أوامر أخرى.
طبعاً الأجزاء الثلاثة التي يتكوّن منها أمر for تفصل بينها فاصلة منقوطة ; ويكونون جميعهم في داخل (قوسين) .
نقطة أخيرة.. الأمر أو الأوامر التي نريد تنفيذها في داخل أمر التكرار يجب أن نضعها بين قوسين {} لأنها تبين للبرنامج أين يبدأ محتوى for أو while أو if وأين ينتهي، يعني للمثال الذي كتبته ، المفروض نكتبه بالشكل التالي:

for (var count=1 ; count<=10 ; count++)
{
write $;
}

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

طريقة عمل الأمر السابق موضحة في الرسم التالي:

إذا كانت طريقة عمل أمر for واضحة ، ستكون بقية الأوامر سهلة إن شاء الله ، لأنها هي الأكثر تعقيداً من بينهم.

2- while :

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

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

مثلاً لو أردنا كتابة الرمز $ عشر مرات عن طريق while ، سنكتبه بالطريقة التالية:

while (count <= 10)
{
write $;
count++ ;
}

نلاحظ أن while و for يحتوون على نفس الأجزاء ، ولكن أماكنها تختلف.
تبقَّى الجزء الأول؟ صحيح ، الجزء الأول يجب أن نكتبه قبل بداية أمر while ، لأننا لو كتبناه في داخلها ، سيصبح المتغير الذي يتحكم بعدد مرات التكرار count بنفس قيمته في كل دورة جديدة. فالمفروض يكون المثال السابق كالتالي:

var count=1;
while (count <= 10)
{
write $;
count++ ;
}

وطبعاً كما ذكرت في مقدمة هذا الكتيِّب ، الأوامر يتم تنفيذها بالترتيب ، بمعنى أن البرنامج هذا سيقوم بكتابة علامة $ ثم سيزيد قيمة المتغير count.
نستنتج مما سبق ، أن البرنامج هذا:

for (var count=1 ; count<=10 ; count++)
{
write $;
}

والبرنامج هذا:

var count=1;
while (count <= 10)
{
write $;
count++ ;
}

يقومون بنفس العمل ، ونتيجتهم ستكون واحدة.

توجد حالات ، استخدام أمر for فيها سيكون أسهل من while ، وحالات أخرى العكس ، فإذا فهمتم طريقة عمل كل أمر بشكل جيد وبعدما تبدأون في التطبيق والبرمجة الفعلية ، ستعرفون بأنفسكم ماهو الأمر الأنسب للاستعمال في الحالات المختلفة.
وأكرر: “ بشكل عام ، أمر for سنستخدمه إذا كنّا سنكرر عمليةٍ ما بعدد مرات معروفة مسبقاً ، لكن لو كنّا نرغب مثلاً في أخذ رقم سري من المستخدم وسنقوم بتكرار إظهار نافذة الإدخال حتى يقوم بكتابة الرقم السري بشكل صحيح ، سنستخدم أمر while ، لأننا لا نريد تحديد عملية التكرار بعدد معيّن ، وإنما سنحدده بشرط تطابق الرقم السرّي المُدخل مع الرقم السري الموجود لدينا مسبقاً.”

3- if..else :

هذا الأمر يجعل البرنامج يختار بين حالات أو أشياء مختلفة ، مثال:

if (شرط أو مقارنة
{
إذا كانت نتيجة الشرط صحيحة سيتم تنفيذ هذا الأمر أو الأوامر
}
else
{
إذا كانت نتيجة الشرط خاطئة سيتم تنفيذ هذا الأمر أو الأوامر
}

يحتوي أمر if على شرط أو مقارنة ، إذا كانت المقارنة صحيحة سيتم تنفيذ الأمر أو الأوامر الموجودة في محتوى if ، وإذا كان الشرط خاطئ ، سيتم تنفيذ الأمر أو الأوامر الموجودة في محتوى else.

نلاحظ هنا أن الأمر else لايحتوي على مقارنة أو شرط ، وهذا لأنه مرتبط بالمقارنة الموجودة مع if ، وأيضاً استعملنا الأقواس {المتعرجة} لمحتوى ل الأمرين ، حتى يستطيع البرنامج أن يعرف أين يبدأ محتوى كل أمر و أين ينتهي.

أمر else لانحتاج لوجوده دائماً ، وإذا لم نكتبه سيعمل البرنامج بشكل عادي وطبيعي ، فلذلك وجوده من عدمه يعتمد على هدفنا في البرمجة ، هل سنحتاج إليه أم لأ لتحقيق الهدف من البرنامج ، فمثلاً في بعض الحالات سنريد تنفيذ أمر في حالة معينة ، وإذا لم تتحقق هذه الحالة لا نريد البرنامج أن يقوم بشيء آخر.
ولكن لو أردنا كتابة else لابد أن نكون كتبنا قبله if ! فأمر else مرتبط بـ if ولا يمكنه أن يتخلّى عنه ، ولكن if غير مرتبط بـ else ، ويمكنه أن يكون وحيداً بدونه.

مثال:

if ( 10 < 20 )
{
write True
}
else
{
write False
}

هذا البرنامج سيكتب لنا كلمة True ، لأن الشرط صحيح ، لذلك سينفذ محتوى if.

ويمكننا أن نستعمل في برامجنا أكثر من if وأكثر من else بحيث تكون متداخلة مع بعض ، وتسمى nested if…else وسنرى مثال عليها في البرنامج رقم 1 في هذا الكتاب.

هكذا نكون انتهينا من شرح هذا القسم ، وأتمنّى أن يكون الشرح واضح وبسيط ، لأن البرمجة بمختلف لغاتها تعتمد على فهم هذه الأوامر وطريقة عملها. فكل لغات البرمجة توجد فيها if و for و while وكلّها تعمل بنفس الطريقة التي شرحتها.

العودة لقائمة المحتويات

6- جافاسكربت و HTML :

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

<html>
<head>
<title> </title>
</head>

<body>
</body>
</html>

شفرات وأكواد الجافا سكربت ممكن أن نكتبها في داخل <head> أو في داخل <body> .
الفرق بين المكانين هو كالتالي، المكان الأول <head> سيتم تنفيذ الأكواد اذا قمنا باستدعائها بأكواد خاصة في داخل شفرة <body> ، والمكان الثاني <body> سيتم تنفيذ الأكواد الموجودة فيه مباشرةً بمجرد وصول البرنامج (المتصفح) لها ، تذكرون بأن الأوامر يتم تنفيذها بالتسلسل ، صح؟
مصدر المعلومة.

وشفرات وأكواد جافا سكربت تكتب في داخل هذا الكود الرئيسي:

<script language =”JavaScript”>
هنا نكتب أوامر جافاسكربت
</script>

ووظيفتها هي أنها تخبر المتصفِّح بأن مابينها هي أكواد جافاسكربت وليست أكواد HTML.
فأكواد الجافاسكربت ستكون في أحد المكانين ، إما الأحمر أو الأزرق أو الإثنين معاً ، بحسب حاجتنا:

<html>
<head>
<title> </title>
<script language =”JavaScript”>
هنا نكتب أوامر جافاسكربت
</script>
</head>

<body>
<script language =”JavaScript”>
هنا نكتب أوامر جافاسكربت
</script>
</body>
</html>

للأمانة حسب ماقرأت في المنهج كتابتهم لأكواد جافاسكربت كان في المكان الأحمر دائماً !

العودة لقائمة المحتويات

7- بعض الأوامر الشائعة :

document.write() -1

الأوامر عادةً تتكون من ثلاثة أقسام ، فلو أخذنا هذا الأمر على سبيل المثال:

document.write(‘Hello’);

الجزء الأول document وهو يسمّى أوبجكت object
الجزء الثاني write وهو يسمى مثود method لهذا الأوبجكت
ودائماً يتم وصل الأوبجكت والمثود بنقطة . فقط ، أي أننا لانضع أي مسافة بينهم لأنها ستتسبب في عدم عمل البرنامج !
ويجب الانتباه إلى حجم الأحرف لأسماء الأوبجكت والمثود ، لأن لو كتبنا حرف كبير بدلاً من حرف صغير ، لن يعمل البرنامج !
الجزء الثالث يسمى argument وهو عبارة عن قوسين تحمل في داخلها parameters ، وفي مثالنا كلمة ‘Hello’ هي البارامتر.

هذا الأمر وظيفته هي الكتابة في المتصفِّح ، ففي المثال جعلناه يكتب كلمة Hello ، ووضعناها بين علامات ‘التنصيص’ لأنها string نريدها أن تظهر كما كتبناها بالضبط ، فلو أضفنا بعدها على سبيل المثال مسافة ، ستظهر هذه المسافة أيضاً في المتصفِّح.

لو كان لدينا برنامج ، يحتفظ باسم المستخدم في متغيِّر اسمه userName ، ومن ثم أردنا أن نكتب رسالة ترحيبية للمستخدم باسمه المخزَّن مسبقاً في البرنامج ، سنكتب الأمر التالي:

document.write(‘Hello ‘ + userName);

نلاحظ هنا أن اسم المتغيِّر userName لايوجد حوله علامات ‘تنصيص’ ! تذكَّروا الفرق بين المتغير العادي والـ string ، المتغير هو كلمة تدل على قيمة معيّنة ، فنحن لانريد أن نتعامل مع اسم المتغيِّر ، ولكن نريد أن نتعامل مع قيمته ، فلو وضعنا اسم المتغير هنا بين ‘علامات التنصيص’ ستكون النتيجة في المتصفِّح كالتالي:

Hello userName

لكن إذا لم نضع حوله علامات التنصيص ، سيعرف البرنامج بأن هذه الكلمة لها قيمة معينة ، ولذلك سيقوم بالبحث عن هذه القيمة ومن ثم سيستعملها بدلاً من اسم المتغيِّر userName. فلو كان هذا المتغيِّر يحمل اسم ‘Learner’ كقيمة له ، ستكون نتيجة الأمر على المتصفح هي:

Hello Learner

علامة + هنا وظيفتها هي الجمع بين الـ string واسم المتغير الذي نريد البرنامج أن يكتبه ، وإذا أردنا أن نضيف كلام آخر بعد المتغيِّر (اسم المستخدم) يجب أن نضع علامة + أخرى للدمج بينهم ، مثلاًِ لو أردنا إضافة علامة تعجب بعد اسم المستخدم سنكتب:

document.write(‘Hello ‘ + userName + ‘ !’);

وأيضاً أحب أن أنوِّه هنا على المسافتين الموجودة بعد كلمة Hello وقبل علامة التعجّب ، لأننا إذا لم نضع هذه المسافات ستتلاصق الكلمات وعلامة التعجّب مع بعضها البعض ، فيجب الانتباه لها.

لو افترضنا بأن قيمة المتغيِّر userName الموجودة في البرنامج هي ‘Learner’ ، ستكون نتيجة الأمر الأخير هي:

Hello Learner !

window.prompt() -2

window هو الأوبجكت ، و prompt هو المثود لأوبجكت window
مثل الأمر السابق، يتكون من ثلاث أجزاء ، فائدة هذا الأمر بأنه يُظهِر نافذة صغيرة للمستخدم ، النافذة تحتوي على جزأين ، الأول هو رسالة (نكتبها نحن) ونريدها أن تظهر في النافذة ، والجزء الثاني سيكون مربع فارغ حتى يدخل المستخدم فيه قيمة معينة ، كما في الصورة التالية :

هذه النافذة هي نتيجة للأمر التالي:

window.prompt(‘Please enter your name:’, ‘ ‘);

نلاحظ أن الجزء الثالث في الأمر يحتوي على جزأين كما ذكرت قبل قليل ، الجزء الأول خاص بالرسالة التي نريدها أن تظهر في النافذة ، وفي هذه الحالة الرسالة هي Please enter your name . والجزء الثاني وضعنا علامتي تنصيص فارغة وهي خاصة بالمربع الأبيض أو المكان الذي سيكتب فيه المستخدم ، لو كتبنا شيء بين علامتي التنصيص مثل: اكتب هنا، ستظهر جملة اكتب هنا في المربع الأبيض. والجزأين يفصل بينهم فاصلة عادية ,

سؤال: كيف نأخذ القيمة التي سيدخلها المستخدم؟
جواب: عن طريق إنشاء متغير ، ونعطيه القيمة التي سيدخلها المستخدم.
سؤال: طيب كيف؟
جواب: تابع معي المثال التالي:
لو أردنا عمل برنامج يقوم بأخذ قيمة بالريال السعودي ويحولها إلى دولار أمريكي. في البداية سنقوم بتعريف متغيِّر ، وسنجعل اسمه money على سبيل المثال:

var money;

بعدها ، نعطي القيمة المدخلة عن طريق المستخدم للمتغير الذي أنشأناه بالشكل التالي:

money = window.prompt(‘please enter a value in S.R:’, ‘ ‘);

هنا أحب أن أذكر نقطة مهمة، عندما نستعمل هذه الطريقة فإن جميع القيم التي سيدخلها المستخدم سيتم اعتبارها string ، ونحن أحياناً لانريد هذا الشيء لأننا سنحتاج في كثير من الأحيان إلى استخدام البيانات المدخلة من قبل المستخدم في معادلات رياضية وعمليات حسابية مختلفة ، مثل المثال الذي نطبقه الآن.
فإذا أردنا تحويل القيم المُدخلة من قبل المستخدم من string إلى متغيِّر عادي نستطيع أن نتعامل معه في العمليات الحسابية ، يجب علينا أن نستخدم الأمر ()parseFloat ، واستخدامه يكون ببساطة كالتالي:

money = parseFloat(money);

يعني لو كانت القيمة التي أدخلها المستخدم هي 100 على سبيل المثال، ستكون القيمة الموجودة في المتغيِّر money هي ‘100′ ، وبعدما نستعمل مثود ()parseFloat كما في الأمر الأخير ، ستصبح قيمتها 100 ، أي أنها تحوّلت من string إلى متغيِّر عادي.

الآن القيمة الموجودة في المتغيِّر money قابلة للاستخدام في المعادلات الرياضية ، فنستطيع الآن أن نكتب معادلة رياضية لتحويل المبلغ من ريال سعودي إلى دولار أمريكي كالتالي:

money = money * 3.75;

أو يمكننا اختصار كتابتها كالتالي:

money *= 3.75;

الآن قيمة المتغير الجديدة ستكون نفس المبلغ الذي أدخله المستخدم ولكن بالدولار بدلاً من الريال.
نستطيع الآن أن نظهر نتيجة التحويل للمستخدم عن طريق الأمر:

document.write(money + ‘ $’);

window.alert() -3

window هو الأوبجكت ، و alert هو مثود لأوبجكت window. وهو يستخدم لإظهار النافذة التالية:

الأمر الذي كتبته لإظهار هذه النافذة هو:

window.alert(‘لقد حدث خطأ’);

وفائدته هي إظهار رسائل للمستخدم في حالات معينة لنخبره بأي شيء ، مثل حدوث خطأ أو أنه قام بإدخال قيمة غير صحيحة وغيرها من رسائل التنبيه المختلفة.

window.confirm() -4

window هو الأوبجكت ، و confirm هو مثود لأوبجكت window. وهو يستخدم لإظهار النافذة التالية:

الأمر الذي استعملته لإظهار هذه النافذة هو :

window.confirm(‘هل أنت متأكد؟’);

إذا قام المستخدم هنا بالضغط على OK سيعود الأمر بقيمة True ، وإذا ضغط على Cancel سيعود الأمر بقيمة False.

طبعاً فائدة هذا الأمر كبيرة ولانستطيع الاستغناء عنه لأننا عن طريقه نستطيع أن نتأكد من أن المستخدم قام بعملية معينة ، يعني ممكن نستخدم أمر if بأنه إذا كانت قيمة هذه النافذة True ، نفذ أمر معيّن ، وإذا كانت False افعل شيء آخر.

Math.round() -5

Math هو الأوبجكت ، و round هو المثود. هذا الأمر وظيفته هي تقريب الرقم إلى أقرب رقم صحيح ، بمعنى لو كان لدينا على سبيل المثال رقم 9.3 ، عن طريق هذا الأمر نستطيع تقريبه إلى 9.

طبعاً عملية التقريب للتذكير تكون كالتالي:
إذا كان الرقم الذي بعد الفاصلة بين 0 و 4 سيتم تقريبه إلى الرقم الأصغر ..
وإذا كان الرقم الذي بعد الفاصلة بين 5 و 9 سيتم تقريبه إلى الرقم الأكبر ..

بمعنى:

Math.round(9.4) = 9
Math.round(9.0) = 9
Math.round(9.5) = 10
Math.round(9.9) = 10

فائدة هذا الأمر كبيرة ، وعلى سبيل المثال في عمليات القسمة التي تحدث في البرنامج (إن وجدت) تكون نتيجتها تحتوي على أعداد عشرية كثيرة ، على سبيل المثال لو قسمنا 10 على 3 ستكون النتيجة في البرنامج 3.33333333333334
وفي بعض الحالات نحن نريد البرنامج أن يعرض لنا الرقم الناتج عن العمليات الحسابية في المتصفح ، ولكن عرضه بهذا الشكل وبأرقام عشرية كبيرة غير جيد المنظر وغير مقبول للمستخدم ، لذلك نستعمل هذا الأمر للتقريب إلى أقرب رقم صحيح أو إلى عدد خانات عشرية نحدده نحن بإضافة بسيطة على الأمر حتى يصبح شكل الرقم المعروض مقبول لدى المستخدم.

الآن تعلمنا كيف نقرب الأرقام إلى أقرب رقم صحيح ( بدون خانات عشرية) ، سننتقل للتقريب إلى عدد خانات عشرية محددة ..

أرجو التركيز في النقطة التالية:
لو أردنا عن طريق هذا الأمر أن نقرب رقم إلى خانتين عشرية فقط ، كيف نعملها بواسطة هذا الأمر ؟
مثلاً لو كان لدينا الرقم 9.456456 ونريد تقريبه إلى خانتين عشريتين ، ليصبح 9.46

أولاً: نضرب الرقم في 100:

9.456456 * 100 = 945.6456

ثانياً: نعمل تقريب لأقرب رقم صحيح:

Math.round(945.6456) = 946

أو يمكننا أن نجعل ما بداخل القوس هو نفس العملية الأساسية:

Math.round(9.456456 * 100) = 946

ثالثاً: نقسم الناتج على 100:

946 / 100 = 9.46
أو
Math.round(9.456456 * 100) / 100 = 9.46

وهذه هي النتيجة التي نريدها 9.46

مثال ثاني للتقريب إلى ثلاث خانات عشرية حتى تثبت المعلومة وتتضح أكثر ..
إذا أردنا تقريب الرقم 9.368921 إلى ثلاث خانات عشرية حتى يصبح 9.369

أولاً: نضرب الرقم في 1000 (بنفس عدد الخانات التي نريدها)

9.368921 * 1000 = 9368.921

ثانياً: نعمل تقريب لأقرب رقم صحيح:

Math.round(9368.921) = 9369
أو
Math.round(9.368921 * 1000) = 9369

ثالثاً: نقسم الناتج على 1000

9369 / 1000 = 9.369
أو
Math.round(9.368921 * 1000) / 1000 = 9.369

وهذه هي النتيجة التي نريدها 9.369

وهكذا لباقي الحالات ..

العودة لقائمة المحتويات

8- كتابة التعليقات والملاحظات :

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

كتابة التعليقات والملاحظات يكون بأحد طريقتين:
الأولى اسمها تعليق سطر واحد one line comment:

// هذا تعليق ولن يظهر في الصفحة

الثانية اسمها تعليق لعدة أسطر multi-line comment:

/*
وهذا تعليق آخر لن يظهر في الصفحة ولا يمكن رؤيته إلا في ملف الأوامر
Source codeأو مايسمى بـ
*/

طبعاً هذه التعليقات يجب أن تكون من ضمن أكواد <’script language=’JavaScript> و <script/> ، لأنها لو كانت خارجها ، سيعتبرها المتصفح من ضمن لغة HTML وبالتالي سيقوم بكتابتها في الصفحة كما هي ، لأن لغة HTML لايوجد فيها وسم أو شفرة مشابهة لها.
وطبعاً التعليقات لاتظهر أبداً في المتصفحات ، وفائدتها الرئيسية هي للمبرمج نفسه وبقية المبرمجين الذي سيقرأون الكود البرمجي.

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

في أحد البرامج الصغيرة الذي كنت أعمل عليه ، استخدمت فيه عدة أوامر ومن ضمنها أمر if ، وطبعاً المبرمج إذا تعوَّد على لغة البرمجة ستصبح كتابته سريعة جداً مثل كتابة اللغة العادية ، فاحتمال وجود الأخطاء الإملائية كبير.
المهم أني بعد ما انتهيت من كتابة البرنامج وقمت بتشغيله لأرى النتيجة لم يظهر شيء ، قلت عادي أكيد خطأ بسيط كالعادة ، سأقوم بتصحيحه الآن لتجربة البرنامج. جلست ما يقارب الأربعين دقيقة ولم أستطع معرفة مكان الخطأ!!!
بعدها فكّرت بطلب مساعدة التعليقات ، فقمت بتقسيم البرنامج الصغير إلى ثلاثة أقسام:
الأول جعلته خاص بالمتغيرات وتعاريفها الموجودة في البداية.
الثاني خاص بالمعادلات وأوامر الاختيار والتكرار وهي في منتصف البرنامج.
الثالث خاص بعرض نتائج البرنامج في المتصفِّح وهي في آخر البرنامج.

فقمت الآن بوضع تعليقات حول الجزأين الثاني والثالث ، ووضعت أمر كتابة في المتصفِّح في الجزء الأول ، جعلته يكتب كلمة OK ، بعدها قمت بتشغيل البرنامج وظهرت لي كلمة OK في المتصفِّح ، وهذا يعني أن الجزء الأول لاتوجد به مشاكل.
بعدها أزلت التعليقات من الجزأ الأخير لأتأكد منه ، وبعد التجربة اتّضح لي بأن المشكلة ليست فيه.

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

هل تعلمون ماذا كان الخطأ؟
في أحد أوامر if ، قمت بكتابة القوس المحيط بالشرط هكذا: { ، والمفترض أن يكون: (
خطأ تافه ، ولكن الأخطاء في البرمجة – خاصة بدون استعمال برامج اكتشاف وتحديد الأخطاء – لاترحم ، ولا تفرِّق بين الخطأ الكبير والصغير ، وستتسبب في ضياع وقت كبير إذا لم نعرف كيف نكتشفها بسرعة. فلو استخدمنا التعليقات بذكاء ستحل لنا مشاكل كثيرة في تصحيح الأخطاء.

العودة لقائمة المحتويات

9- أمثلة تطبيقية :

البرنامج رقم 1: تصنيف البيض لمقاسات بحسب الوزن

هذا المثال هو السؤال الرابع في TMA02 لسنة 2008 ، السؤال يشمل عدة نقاط هامّة ولذلك استخدمته كمثال.

السؤال: اكتب برنامج بلغة جافاسكربت يقوم بالآتي:
أولاً: يظهر نافذة للمستخدم تطلب منه إدخال وزن البيض.
ثانياً: يقوم بكتابة الوزن – الذي أدخله المستخدم – في الصفحة للتأكيد.
ثالثاً: يقوم بتصنيف مقاس البيض بحسب العوامل التالية:

• إذا كان الوزن أقل من 53 جرام ، يُعتبر صغير.
• إذا كان الوزن يساوي أو أكبر من 53 و أقل من 63 جرام ، يكون وسط.
• إذا كان الوزن يساوي أو أكبر من 63 و أقل من 73 ، يكون كبير.
• إذا كان الوزن يساوي أو أكبر من 73 ، يكون كبير جداً.

السؤال يحتوي على ثلاث فقرات مساعدة للحل ، سنمشي عليها كلها.

الفقرة الأولى:

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

declare a variable for the weight تعريف متغير
get a value from the user and assign it to the variable أخذ وزن من المستخدم وتعيينها للمتغير الذي عرفناه
display a confirmation message with the value إظهار رسالة تأكيد بالوزن الذي أدخله المستخدم

هكذا نكون انتهينا من أول خطوتين وهي أخذ قيمة من المستخدم ووضعها في متغير ، وإظهار الوزن المُدخل في الشاشة للتأكيد.
ننتقل للخطوة الثالثة ، وهي التي عليها الكلام ..

نبدأ بأول تصنيف وهو إذا كان الوزن أقل من 53 يكتب لنا أن البيض صغير:

if ( the weight is smaller than 53)
display a message (The egg size is small)

انتيهنا الآن من اذا كان البيض صغير ، فننتقل للي بعده ، وهو اذا كان الوزن أكبر من أو يساوي 53 و أصغر من 63 يكتب لنا ان مقاس البيض وسط:

else
if (the weight is larger than or equal to 53 AND less than 63)
display the message (The egg size is medium)

انتهينا من الحالة الثانية ، ننتقل للحالة الثالثة ، وهي اذا كان الوزن أكبر من أو يساوي 63 وأقل من 73 يكتب لنا ان المقاس كبير ، وهي نفس طريقة الحالة الثانية:

else
if ( the weight is larger than or equal to 63 AND less than 73)
display the message (The egg size is large)

الآن نجي للحالة الرابعة والأخيرة ، وممكن تحل بطريقتين:
1- أن نضيف أمر else ونكتب داخلها أمر كتابة في الصفحة بأن الحجم كبير جداً ، وسنكتبها كالتالي:

else
display the massage (The egg size is very large)

2- أن نكتب else وبعدها if لإذا كان الوزن أكبر من أو يساوي 73 اكتب في الشاشة أن المقاس كبير جداً ، وسنكتبها هكذا:

else
if ( the weight is larger than or equal to 73 )
display the massage (The egg size is very large)

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

الفقرة الثانية:

المطلوب هنا هو تحويل الأوامر الموجودة في الفقرة السابقة إلى كود حقيقي وقابل للاستعمال ..
أولاً سنجهز مكان أكواد الجافاسكربت ، يعني سنقوم بعمل أكواد HTML الرئيسية في البداية ، وسنضع أكواد الجافا السكربت في مكان الاستفهامات:

<html>
<head>
<title> </title>
<script language=’JavaScript’>???????</script>
</head>
<body>
</body>
</html>

في السؤال طلب مننا وضع عنوان للصفحة باسم Egg sizes ، والعنوان يتم كتابته بين شفرات <title> .
ولابد من تنسيق الكود والأوامر بشكل جيد ، حتى يكون الكود سهل القراءة للمدرِّس أو لغيره. المقصود بالتنسيق هو زيادة المحاذاة عن الطرف الأيسر باستخدام زر tabs في الكيبورد ، حتى نبيِّن الأوامر والشفرات ونميّزها عن بعض.

سنفترض أن القيمة المدخلة من المستخدم ، ستكون أرقام أو مدخلات صحيحة ، فلا داعي أن نضع أوامر للتأكد من أن المستخدم لم يقم مثلاً بكتابة أحرف أو غيرها.

الآن نرجع لحلنا في الفقرة الأولى ، وسنمشي عليه أمراً أمراً ، حتى نحول جميع الأوامر إلى أكواد فعليَّة.
أولاً ، عملية تعريف المتغير الذي سنحفظ فيه مدخلات المستخدم:

declare a variable for the weight

سنسمي المتغيِّر weight ، ولذلك سيكون الأمر:

var weight;

انتهينا من الأمر الأول: تعريف المتغير.

الأمر الثاني هو عملية أخذ قيمة من المستخدم وتعيين القيمة للمتغير weight :

weight = window.prompt(‘Please enter the weight of the egg in grams.’, ”);

الآن الكمبيوتر إذا أخذ أي قيمة من المستخدم راح يعتبرها string مثل ماشرحنا في الأقسام السابقة ، لذلك سنقوم بتحويل القيمة إلى متغيِّر نستطيع التعامل معه في المعادلات والمقارنات عن طريق parseFloat :

weight = parseFloat(weight);

ننتقل للخطوة التي بعدها ، وهي كتابة أمر تأكيد بالوزن الذي أدخله المستخدم ، وسيكون مثل: “وزن البيض هو … جرام”
مكان النقط … سنضع اسم المتغير weight الذي يحمل الوزن الذي أدخله المستخدم. فيكون الأمر كالتالي:

document.write(‘The weight of the egg is ‘ + weight + ‘ grams.<br/>’);

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

if ( the weight is smaller than 53)
display a message (The egg size is small)

هذا هو التخطيط الذي كتبناه في حل الفقرة السابقة ، ولتحويله إلى كود جافاسكربت نكتب:

if (weight < 53) {
document.write(‘The egg size is small.<br/>’);
}

القوسين {المتعرجة} التي كتبناها ضرورية لتعريف البرنامج متى تبدأ الأوامر المتعلقة بـ if ومتى تنتهي. وهذا الأمر سيتم تنفيذه فقط إذا كان الوزن الذي أدخله المستخدم أقل من 53.
ننتقل للحالة الثانية ، اذا كان وزن البيض أكبر من أو يساوي 53 و أقل من 63:

else
if (the weight is larger than or equal to 53 AND less than 63)
display the message (The egg size is medium)

هذا هو التخطيط الذي كتبناه في حل الفقرة السابقة ، ولتحويله إلى كود جافاسكربت نكتب:

else {
if ( weight >= 53 && weight < 63 ) {
document.write(‘The egg size is medium.<br/>’);
}

هذا الأمر سيتم تنفيذه في حالة كان الوزن أكبر من أو يساوي 53 وفي نفس الوقت أقل من 63.
ونتَّبع نفس الطريقة للحالتين الثالثة والرابعة:

else {
if ( weight >= 63 && weight < 73 ) {
document.write(‘The egg size is large.<br/>’);
}
else {
document.write(‘The egg size is very large.<br/>’);
}
}
}

بالنسبة للأقواس {المتعرِّجة} :
نفتح القوس بعدما نكتب الأمر (سواء if أو else أو for أو while) ، ونغلقه بعد نهاية الأوامر التي تتعلق بالأمر.
ففي الكود الخاص بالحالة الثانية ، نلاحظ أنني فتحت قوس بعد أمر else ولكني أم أقم بإغلاقه! السبب هو أن كل الأوامر المتبقية ستكون من ضمن هذه الـ else ، فلذلك قمت بإغلاقه بعد كتابة الحالتين الثالثة والرابعة.
فكروا فيها بالمنطق .. في البداية قلنا: “إذا كان وزن البيض أقل من 53” ، والآن كتبنا: “غير ذلك” ، هذا يعني بأن “غير ذلك” هذه ستحتوي على كل الأوزان التي تزيد عن 53 . وللتوضيح أكثر سأضع الأقواس على التخطيط بالفقرة الأولى ، وسألون فقط أقواس else المرتبطة ببعض بنفس اللون ، لأن أقواس if في برنامجنا هذا تنتهي بعده مباشرة:

if ( the weight is smaller than 53) {
display a message (The egg size is small)
}
else {
if (the weight is larger than or equal to 53 AND less than 63) {
display the message (The egg size is medium)
}
else {
if ( the weight is larger than or equal to 63 AND less than 73) {
display the message (The egg size is large)
}
else {
display the message (The egg size is very large)
}
}
}

النتيجة النهائية للبرنامج ستكون بالشكل التالي:

<html>
<head>
<title>Egg sizes</title>
<script language=’JavaScript’>
var weight;
weight = window.prompt(‘Please enter the weight of the egg in grams.’, ”);
weight = parseFloat(weight);
document.write(‘The weight of the egg is ‘ + weight + ‘ grams.<br/>’);

if (weight < 53) {
document.write(‘The egg size is small.<br/>’);
}
else {
if ( weight >= 53 && weight < 63 ) {
document.write(‘The egg size is medium.<br/>’);
}
else {
if ( weight >= 63 && weight < 73 ) {
document.write(‘The egg size is large. <br/>’);
}
else {
document.write(‘The egg size is very large. <br/>’);
}
}
}
</script>
</head>
<body>
</body>
</html>

في النهاية ، نأخذ هذا الكود وننسخه في برنامج تحرير نصوص مثل notepad ونحفظ الملف بأي اسم ، ولكن الصيغة أو النوع يجب أن تكون html . يعني الملف النهائي يجب أن يكون نوعه أو امتداده html وليس doc أو txt مثلاً!
ولتشغيل البرنامج نفتح الملف عن طريق متصفِّح الانترنت ، سواء انترنت إكسبلورر أو فايرفوكس أو غيرها وستظهر لنا نتيجة البرنامج.

الفقرة الثالثة:

يقول كيف نتأكد من أن البرنامج يعمل بشكل صحيح ولا توجد به أخطاء؟

حتَّى نتأكد من أن البرنامج صحيح ولا توجد به أخطاء ، يجب أن نختبر جميع الحالات الموجودة في البرنامج ، وبرنامجنا هذا فيه أربع حالات ، وهي: إما صغير إذا كان < 53 ، أو وسط إذا كان >=53 و <63 ، أو كبير إذا كان >=63 و <73 ، أو كبير جداً إذا كان >73.

الأرقام ممكن تختلف من شخص لآخر ، ولكن هذه الأرقام – من وجهة نظري – هي الأفضل والأضمن:

• رقم 52 ، حتى نختبر الحد الأعلى للحالة الأولى وهي الحجم الصغير.
• رقم 53 ، حتى نتأكَّد من الحد الأعلى للحالة الأولى ، وأيضاً نختبر الحد الأدنى للحالة الثانية وهي الحجم المتوسط.
• رقم 63 ، حتّى نتأكد من الحدّ الأعلى للحالة الثانية ، وأيضاً نختبر الحد الأدنى للحالة الثالثة المتعلقة بالحجم الكبير.
• رقم 73 ، حتّى نتأكد من الحدّ الأعلى للحالة الثالثة ، وأيضاً نختبر الحد الأدنى للحالة الرابعة المتعلقة بالحجم الكبير جداًّ.

لتحميل البرنامج

العودة لقائمة المحتويات

البرنامج رقم 2: لعبة التخمين

هذا سؤال أتى لنا في الاختبار النهائي:

قم بتخزين رقم في البرنامج بين 1 و 1000 واجعل المستخدم يحاول أن يقوم بتخمينه أو معرفته عن طريق إدخال رقم بين 1 و 1000 ..
إذا أدخل المستخدم رقم أكبر من الرقم المخزّن أظهر له رسالة تخبره بأنه فوق الرقم الصحيح ودعه يحاول مرة أخرى.
إذا أدخل المستخدم رقم أصغر من الرقم المخزّن أظهر له رسالة تخبره بأنه تحت الرقم الصحيح ودعه يحاول مرة أخرى.
وفي النهاية اذا أدخل الرقم الصحيح سنكتب له بأنه استطاع تخمين الرقم الصحيح بعد عدد المحاولات التي قام بها.

طريقة الحل لأي سؤال في البرمجة هو فهم السؤال ومن ثم تقسيمه وتحليله إلى خطوات ، طبعاً التقسيم والتحليل سيكون في عقلنا لأن في الاختبار لايوجد مكان كافي للكتابة !

أولاً: سنعمل ثلاثة متغيرات ، المتغير الأول سنسميه ourNumber وسنضع له قيمة نختارها ولنفرض انها 501 ، والمتغير الثاني سنسميه userNumber وسنجعله يحمل القيمة التي يدخلها المستخدم ، والثالث سنسميه count وستكون مهمته حساب عدد المحاولات التي قام بها المستخدم.

ثانياً: سنقارن بين الرقم الذي وضعناه والرقم الذي أدخله المستخدم:

• إذا كان الرقم الذي أدخله أكبر ، سنقوم بإظهار رسالة تخبره بأنه فوق الرقم الصحيح وسنجعله يحاول مرة أخرى.
• إذا كان الرقم الذي أدخله أصغر ، سنقوم بإظهار رسالة تخبره بأنه تحت الرقم الصحيح وسنجعله يحاول مرة أخرى.

ثالثاً: إذا استطاع تخمين الرقم الصحيح:
سنكتب رسالة له نخبره بأنه استطاع تخمين الرقم الصحيح بعد عدد المحاولات التي قام بها.

نحول الخطوات إلى أكواد ..
أولاً:

var ourNumber, userNumber, count;
ourNumber = 501;
userNumber = window.prompt(‘Enter a number between 1 and 1000′, ”);
userNumber = parseFloat(userNumber);
count = 1;

السطر الأول ، عرَّفنا ثلاثة متغيرات.
السطر الثاني ، وضعنا رقم 501 في المتغير الخاص بنا.
السطر الثالث ، جعلنا المتغيِّر الخاص بالمستخدم يأخذ القيمة من المستخدم.
السطر الرابع ، قمنا بتحويل الـ string إلى variable يمكن التعامل معه في المقارنات والمعادلات.
السطر الخامس ، وضعنا قيمة 1 للمتغير الخاص بعد عدد المحاولات ، وبدأ بـ1 لأن المستخدم بدأ فعليّاً بأول محاولة في السطر الثالث.

ثانياً:
سنستعمل لهذا الجزء أمر while ، وسنجعل الشّرط: إذا لم يتطابق الرقم الذي أدخله المستخدم مع الرقم 501 :

while (ourNumber != userNumber) {

}

إذا لم يتطابق الرقمين ستكون لدينا حالتين: إما أن يكون رقم المستخدم أكبر 501 أو يكون أصغر من 501 ، لذلك سنضيف في داخل محتوى while أوامر if و else وسنجعل if لإذا كان رقم المستخدم أكبر من 501 وسنعرض له رسالة تخبره بأن رقمه أكبر من الرقم الصحيح ، و else ستكون لحالة إذا كان رقم المستخدم أصغر من 501 وسنعرض له الرسالة المناسبة :

while (ourNumber != userNumber) {
if (userNumber > ourNumber) {
window.alert(‘You are above the right number!’);
}
else {
window.alert(‘You are below the right number!’)
}
}

بعدما قمنا بإخبار المستخدم بأنه إما فوق أو تحت الرقم الصحيح ، نريد إضافة أمر حتى يحاول مرة أخرى ، وسنضيف تحته مباشرة أمر آخر لزيادة المتغيِّر الخاص بعد عدد المحاولات:

while (ourNumber != userNumber) {
if (userNumber > ourNumber) {
window.alert(‘You are above the right number!’);
}
else {
window.alert(‘You are below the right number!’)
}

userNumber = window.prompt(‘Try again :’, ”);
userNumber = parseFloat(userNumber);
count = count + 1;
}

طبعاً بداخل أمر while يوجد خيارين فقط ، وهي إما أن يكون الرقم أصغر من 501 أو يكون أكبر منه ، لايمكن أن يكون يساويه لأن شرط while هو أنهم غير متساويين ، فبالتالي لو كان الرقمين متساويين لن يتم تنفيذ محتوى while.

تبقّى لنا الجزء الثالث والأخير ، وهو إذا قام المستخدم بإدخال الرقم الصحيح ، وبالطبع لو كان الرقم المدخل يساوي الرقم 501 لن يتم تنفيذ while وإنّما سيتم تنفيذ مابعدها من أوامر إن وجدت ، فسنكتب هذه الجزئية بعد while كالتالي:

document.write(‘You guessed the right number after ‘ + count + ‘ tries!’);

سيقوم البرنامج بكتابة لقد قمت بتخمين الرقم الصحيح بعد عدد المحاولات المخزنة في المتغير count.
الآن نجمع الأجزاء الثلاثة مع بعض:

var ourNumber, userNumber, count;
ourNumber = 501;
userNumber = window.prompt(‘Enter a number between 1 and 1000′, ”);
userNumber = parseFloat(userNumber);
count = 1;

while ( ourNumber != userNumber)
{
if (ourNumber < userNumber)
{
window.alert(‘You are above the right number!’);
}
else
{
window.alert(‘You are below the right number!’);
}

userNumber = window.prompt(‘Try again :’, ”);
userNumber = parseFloat(userNumber);
count = count + 1;
}
document.write(‘You guessed the number after ‘ + count + ‘ tries!’);

وهذا هو البرنامج المطلوب بشكل كامل إن شاء الله.

لتحميل البرنامج (البرنامج لن يتوقف عن العمل إلا إذا أدخلت رقم 501 )

العودة لقائمة المحتويات

البرنامج رقم 3: إيجاد القاسم المشترك الأكبر بين رقمين

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

المشكلة الرئيسية هي في طريقة إيجاد العامل المشترك الأكبر لأنها تحتاج وقت للتفكير والتجريب حتى نستطيع إيجادها لأول مرة.
العامل المشترك الأكبر بين رقمين المقصود فيه هو أكبر رقم ممكن أن نقسم عليه الرقمين ويكون الناتج عدد صحيح.
مثلاً لو أردنا العامل المشترك الأكبر ل 6 و 3 الناتج هو 3 لأنه أكبر رقم نستطيع أن نقسم عليه الرقمين ونحصل على رقم صحيح.
ولو أردنا العامل المشترك الأكبر ل 50 و 40 سنبحث عن أكبر رقم ممكن أن نقسم عليه هذين الرقمين ونحصل على رقم صحيح في الحالتين، والإجابة في هذه الحالة ستكون 10 لأنه أكبر رقم نستطيع أن نقسم عليه الرقمين والنتيجة ستكون عدد صحيح.
ولو أردنا العامل المشترك الأكبر للرقمين 20 و 15 سيكون الناتج 5 لنفس السبب.

طيب المشكلة الآن هي كيف نحول هذا الكلام إلى أكواد وأوامر برمجية؟!
الحل ممكن يكون بأكثر من طريقة وسأشرح لكم طريقتي في حله ( طبعاً بعد الاختبار حليته )
طريقتي هي أنني أنشأت متغير غير المتغيريين الذين أدخل المستخدم فيهم أرقاماً ، وجعلت المتغير هذا يأخذ قيمة أصغر رقم فيهم ، يعني إذا كان الرقم الأول أصغر من الثاني ستصبح قيمة المتغير الذي عرفته تساوي الرقم الأول والعكس.

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

بافتراض أن الرقم الأول موجود في متغيِّر اسمه x والرقم الثاني في متغيِّر اسمه y ، والمتغيِّر الذي سيحمل قيمة الرقم الأصغر سأسمّيه GCD ، اختصاراً لـ Greatest Common Divisor بمعنى القاسم المشترك الأكبر ، سيكون الشرط كالتالي:

while ( x % GCD != 0 || y % GCD != 0 )
{
GCD = GCD – 1;
}

بصراحة الشرط صعب بالنسبة للمبتدئين لذلك حاولوا أن تركزوا في شرحي له الآن:
القاسم المشترك الأكبر بين رقمين هو إذا كان باقي قسمة الرقمين عليه تساوي صفر ، مثل الأمثلة التي طبقناها قبل قليل ، لذلك وضعنا الشرط بأنه إذا كانت باقي قسمة أي من الرقمين على المتغير لا تساوي صفر معناها بأننا لم نصل بعد للقاسم المشترك الأكبر للرقمين ونحتاج لتنقيص قيمته بواحد حتى تصل قيمته إلى رقم يحقق الشرط الموجود وهو رقم القاسم المشترك الأكبر.

أولاً: سنقوم بتعريف ثلاث متغيرات، الأول سيحمل الرقم الأول الذي سيدخله المستخدم ، والثاني سيحمل الرقم الثاني الذي سيدخله المستخدم ، والثالث سنجعله يحمل قيمة الرقم الأقل منهم.
حتى نختصر الشرح والوقت ، سنحذف فقرة إدخال الأرقام من المستخدم ، وسندخل رقمين من لدينا مباشرةً للتسهيل.

سنفرض أن الرقمين هم 40 و 30 ، وسنضعهم في المتغيرين x و y على التوالي:

var x = 40;
var y = 30;

سنضع المتغير الثالث ليحمل قيمة العدد الأصغر ، وهو y في هذه الحالة:

var GCD = y;

الآن نكتب أمر while مع الشّرط الذي شرحته قبل قليل:

while ( x % GCD != 0 || y % GCD != 0 ) {
GCD = GCD – 1;
}

اذا استبدلنا المتغيرات بقيمها (للتوضيح) سنحصل على:

while ( 40 % 30 != 0 || 30 % 30 != 0 ) {
GCD = GCD – 1;
}

بمعنى اذا كان باقي قسمة 40 على 30 لا تساوي صفر أو اذا كانت باقي قسمة 30 على 30 لا تساوي صفر قم بإنقاص قيمة المتغير GCD بواحد.

طيب البعض يمكن يتساءل: لماذا لم نستعمل && بدلاً من || ؟
لو نتذكر طريقة عمل كل واحد منهم سنعرف السبب ..
لو استخدمنا && ، لن يتم تنفيذ محتوى while ، إلا إذا كان كل الطرفين – الموجودين في الشرط – صحيحين ، أي أن كل الرقمين باقي قسمتهم على المتغيّر لا تساوي صفر.
يعني في المثال الأخير ، لو استعملنا && في الشرط ، لن يدخل في محتوى while ، لأن 0=!30%40 ستكون True ، ولكن 0=!30%30 ستكون False ، لذلك لن يتم تنفيذ محتوى while.

ولو استخدمنا || ، سيتم تنفيذ محتوى while في جميع الحالات ، إلا إذا كان كل الطرفين False ، يعني كل الطرفين باقي قسمتهم على المتغيّر تساوي صفر ، وهذا معناه بأن المتغير أصبح الآن يحمل قيمة العامل المشترك الأكبر.
أرجو أن أكون وفِّقت في توضيح الفكرة و المعلومة.
بما أننا الآن عرفنا كيف نوجد القاسم المشترك الأكبر ، الباقي بسيط ان شاء الله وسأجعله واجب لكم ، أكملوا حل السؤال وإذا واجهتكم مشكلة اكتبوها ، وسنتعاون في حلِّها سويةً إن شاء الله.

ولمن يريد أن يزيد استيعابه لهذه المسألة ، أرفقت مع ملف الشّرح برنامج لحلها في ثلاث حالات: الأولى إذا كان الرقم الأول أكبر من الرقم الثاني ، والثانية إذا كان الرقم الأول أصغر من الثاني ، والثالثة إذا كان الرقمين متساويين. وقمت بحلّ الحالة الأولى عن طريق أمر for ، والحالة الثانية عن طريق أمر while للتنويع .

لتحميل البرنامج

العودة لقائمة المحتويات

String methods -10 :

الآن نحن نعلم بأن 95 يعتبر متغيِّر عادي ، و ‘95′ أو ‘Learner’ يعتبرون string. في البرمجة توجد methods تعطينا إمكانيات للتحكّم و التعامل مع الـ strings ، وفي المنهج تم شرح ثلاثة منها وسأقوم بتفصيلها الآن.

قبل أن أبدأ بها ، أحب أن أوضّح نقطة بسيطة: الآن لو افترضنا بأن لدينا string يحتوي على كلمة Learner ، هذا الـ string -وأي string غيره – يكون له طول ، الطول يكون عدد الأحرف الموجودة فيه ، يعني على مثالنا سيكون طول الـ string هو 7 لأن عدد الأحرف كلها 7.
وأيضاً كل حرف في الـ string سيكون له مركز أو ترتيب ، الترتيب عادي ولكن الاختلاف فقط هو في بداية الترتيب ، لأن أول حرف سيكون ترتيبه 0 وليس 1 كما هو متعارف عليه في الواقع.

يعني بالنسبة لحرف L في كلمة Learner سيكون ترتيبه أو مركزه هو 0 ، وحرف n مثلاً سيكون ترتيبه 4.
وفي الجدول التالي توضيح أكثر:

1- ()charAt :

هذا المثود المفترض أن نضع بين القوسين التابعة له رقم ، وهو سيعطينا الحرف المقابل لهذا الرقم. لو ترجمت الأمر باللغة العادية سيكون كأننا نقول: أعطنا الحرف الموجود في هذا المركز.

لنفرض أننا قمنا بتعريف المتغير التالي ونوعه string :

var userName = ‘Learner’;

لو كتبنا مثلاً:

userName.charAt(0);

ستكون نتيجة هذا الأمر L

نلاحظ أن طريقة كتابة الـ method تكون عن طريق كتابة اسم المتغيِّر الذي نوعه string ، ثم نقطة . ثم كتبنا اسم المثود.
يجب الانتباه إلى حرف A الكبير الموجود في المثود ، لأننا لو كتبنا بدلاً منه حرف a الصغير لن يعمل البرنامج!
لو وضعنا هذا الأمر الأخير في داخل أمر الكتابة في المتصفح كالتالي:

document.write(userName.charAt(0));

سيكتب لنا في المتصفح L ، ولو استبدلنا الصفر برقم 6 سيكتب لنا r .

فائدة هذا الأمر هو اننا نستطيع أن نعرف مما يتكون الـ string ، مثلاً لو عملنا برنامج ومن ضمنه مكان لتسجيل اسم مستخدم وكلمة سر خاصة بالمستخدم ، نستطيع عن طريق هذا الأمر أن نتأكد مثلاً من أن أول خانة لا تكون رقم ، أو أن تتكون كلمة السر من أحرف وأرقام مختلطة ببعض ، وغيرها …

2- length :

هذا المثود مهمّته هي أن يعطينا ويحدد لنا طول الـ string ، وهو لايحتاج إلى argument مثل باقي الـ methods ، فهو يستطيع العمل بدونها.

لو كان لدينا هذا الـ string في البرنامج:

var userName = ‘Learner’;

ثم كتبنا هذا الأمر لنعرف طول الكلمة:

userName.length;

ستكون النتيجة 7 ..

طيب لو كان الـ string الذي لدينا كالتالي:

var sentence = ‘Hello World’;

ثم كتبنا:

sentence.length;

ستكون النتيجة 11 لأن المسافة محسوبة أيضاً مع الأحرف! وأي شيء سيكون متواجد في الـ string سواءً كان رمزاً أو حرفاً أو رقماً أو أي شيء ، سيتم احتسابه أيضاً ومعاملته كالحروف.

فائدة هذا الأمر تكون عندما نأخذ كلمة من المستخدم ، عن طريقه نستطيع أن نعرف طول الكلمة ، لو أردنا مثلاً عمل برنامج لتسجيل اسم مستخدم و كلمة سر خاصة بالمستخدم ، نستطيع عن طريق هذا الأمر أن نحدد أدنى طول لكلمة السر ، مثل أن لاتقل عن 6 خانات.

3- ()indexOf :

هذا الأمر نقوم بكتابة حرف في داخل الأقواس وسيقوم بتحديد مكان أو مركز الحرف. فلو كان لدينا الـ string التالي:

var userName = ‘Learner’;

ثم قمنا بكتابة الأمر التالي:

userName.indexOf(‘L’);

ستكون النتيجة 0

ولو غيرنا القيمة كالتالي:

userName.indexOf(‘n’);

ستكون النتيجة 4

ولو غيرناها لـ :

userName.indexOf(‘e’);

نلاحظ انه يوجد حرفين مشابهين لهذا الحرف في الـ string ، والنتيجة ستكون مكان أول حرف وهو 1.

طيب لو كان الـ string الذي لدينا:

var sentence = ‘Hello World’;

وكتبنا هذا الأمر:

sentence.indexOf(‘World’);

سيعطينا البرنامج مكان أول حرف في هذه الكلمة وهو 6.

مثال تطبيقي على ماسبق:

لو جاء لنا سؤال يقول: اعمل برنامج يقوم بأخذ اسم المستخدم ، ثم يقوم البرنامج بعرض كل حرف من أحرف الاسم في سطر مستقل.

أولاً: سنقوم بتعريف متغير ونجعل المستخدم يكتب اسمه ، وسنحفظ الاسم في هذا المتغير:

var userName = window.prompt(‘Please enter your name:’, ”);

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

charAt(0)
charAt(1)
charAt(2)
charAt(3)
إلى أن ينتهي عدد الأحرف

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

لذلك سنستغل قوة أمر for ، وسنضع فيه متغير يبدأ من الصفر ثم يزيد بواحد في كل دورة حتى يتم طباعة كل الأحرف ، هذا المتغيِّر سنستخدمه بدلاً من الأرقام في داخل مثود ()charAt ، وسيكون الشرط عبارة عن: قيمة المتغيَّر تكون أصغر من طول الاسم ، لأنه كما تعلّمنا: مركز آخر حرف في الـ string يكون أقل من طول الـ string بواحد ، فلو كان طول الـ string هو 7 ، سيكون مركز آخر حرف فيها هو 6.

for (var i=0; i<userName.length; i=i+1) {
}

مرة أخرى: i ستحل محل الأرقام في داخل أمر ()charAt ، وكما رأينا قبل قليل ، فائدة أمر length هي أنه يعطينا عدد الأحرف الموجودة في الـ string. مثلاً لو كان عدد أحرف الـ string يساوي 7 ، المتغيِّر i ستزيد قيمته سبع مرات بواحد ، حتى يصل إلى رقم 6 وهو مركز آخر حرف في string طوله أو عدد أحرفه 7.
وبالطبع لايمكننا أن نجعل المتغيِّر i يبدأ من رقم 1 مثلاً! لأننا هكذا سنتجاوز الحرف الأول في الـ string وسنبدأ من الحرف الثاني.

طيب ، الآن سنكتب أمر طباعة كل حرف في سطر مستتقل في داخل محتوى أمر for :

for (var i=0; i<userName.length; i=i+1) {
document.write(userName.charAt(i) + ‘<br/>’);
}

سأشرح أول دورتين أو عمليتي تكرار حتى تتضح لكم الصورة أكثر بافتراض أن الـ string طوله 7 ..
أولاً ستبدأ i وقيمتها 0 ، ثم ستتم عملية المقارنة 7 > 0 ، والنتيجة صحيحة لذلك سيدخل في المحتوى ، وسيقوم بتنفيذ هذا الأمر:

document.write(userName.charAt(0) + ‘<br/>’);

ثم سيذهب للجزء الثالث وسيزيد قيمة i بواحد لتصبح قيمتها تساوي 1
ثم سيرجع للقسم الثاني ويتحقق من الشرط وسيكون الشرط صحيح ، لذلك سيدخل للمحتوى مرة أخرى وسينفذ هذا الأمر:

document.write(userName.charAt(1) + ‘<br/>’);

هكذا نكون طبعنا الحرف الثاني في السطر الثاني ، وسيستمر البرنامج بالعمل حتى يقوم بكتابة كل الأحرف السبعة ، كل حرف في سطر مستقل. وهذا هو الكود بعد تجميعه:

var userName = window.prompt(‘Please enter your name:’, ”);

for (var i=0; i<userName.length; i=i+1)
{
document.write(userName.charAt(i) + ‘<br/>’);
}

هذه الفكرة والطريقة مهمة جداً في عالم البرمجة وتساعد على معرفة قوة أمر for وفوائده ، لذلك حاول أن تفهمها بشكل جيِّد.

العودة لقائمة المحتويات

11- المصفوفات Arrays :

المصفوفات أو مايسمّى بـ Arrays هي متغيّرات تسمح لنا بتخزين أكثر من قيمة فيها ، وكل قيمة نستطيع الحصول عليها من خلال مركزها أو ترتيبها في المصفوفة. مثلاً لو كنا نريد أن نحفظ تكاليف الأشهر للسنة في برنامج لنقوم بأخذ متوسط التكاليف الشهرية ، بدلاً من أن نقوم بحفظ تكلفة كل شهر في متغير خاص ، نستطيع أن ننشئ مصفوفة واحدة حجمها 12 (عدد الأشهر) ثم نضع تكاليف الأشهر في المصفوفة.

توجد أكثر من طريقة لإنشاء المصفوفات وسنستعرضها جميعها إن شاء الله. لو افترضنا بأننا نريد أن ننشئ مصفوفة تحتوي على أسماء أشهر السنة الميلادية:

الطريقة الأولى:

var monthsArray = new Array(12);
monthsArray[0] = ‘January’;
monthsArray[1] = ‘February’;
…
حتى نصل إلى آخر شهر
monthsArray[11] = ‘December’;

هنا قمنا بإنشاء مصفوفة اسمها monthsArray . وفائدة new Array هي إخبار البرنامج بأن المتغير الذي أنشأناه هو لمصفوفة وليس متغيِّر عادي (مثل طريقة تعريف الـ string). رقم 12 المكتوب بين القوسين يدل على أن حجم المصفوفة (يعني عدد عناصرها) هو 12.
هذه الطريقة استخدامها قليل ، لأنه توجد طرق أخرى أسهل وأسرع في الكتابة.

طبعاً أول عنصر في المصفوفة رقمه أو ترتيبه يكون 0 مثل رقم أول حرف في الـ string ، لذلك أول عنصر في مصفوفتنا هذه سيكون رقمه 0 وآخر عنصر سيكون رقمه 11 .

الطريقة الثانية:

var monthsArray = ‘January’,'February’,'March’,'April’,'May’, ‘June’,'July’ ,’August’,'September’,'October’,'November’,'December’];

نلاحظ ان هذه الطريقة أسهل بكثير من الطريقة الأولى وأيضاً نلاحظ بأن أسماء الأشهر مكتوبة بين علامتي تنصيص (للدلالة على أنها string) ، وتفصل بينهم فاصلة عادية , ووضع العناصر بين القوسين [] يخبر البرنامج بأنهم عناصر مصفوفة ، يعني بدلاً من كتابة new Array كما في الطريقة الأولى ، قمنا بإضافة العناصر مباشرة بين القوسين [] للتعريف بالمصفوفة.

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

var monthsArray = new Array();

وبعده بإمكاننا كتابة عناصر المصفوفة بنفس الطريقة الأولى ، وبإمكاننا أن نجعل المستخدم يكتب العناصر أيضاً عن طريق كتابة
اسم المصفوفة ومركز العنصر وبعدها علامة يساوي وبعدها أمر ()window.prompt ، مثل:

monthsArray[0] = window.prompt(‘Enter the first month name:’, ”);

وعندما يدخل المستخدم اسم الشهر الأول سيتم تخزينه في المركز 0 في هذه المصفوفة.

طيب الآن عرفنا كيف نعرِّف وننشئ المصفوفة ، وكيف نضع قيم فيها، لذلك سننتقل إلى بعض الـ methods الهامّة والتي تساعدنا في التعامل مع المصفوفات.

1- ()indexOf :

نفس الأمر الذي استعملناه مع الـ string ، وكانت وظيفته هي تحديد مكان الحرف في الـ string . في المصفوفات وظيفته هي تحديد مركز مابين القوسين في داخل المصفوفة. على سبيل المثال لو كان لدينا مصفوفة أشهر السنة:

var monthsArray = ‘January’,'February’,'March’,'April’,'May’,'June’,'July’, ‘August’,'September’,'October’,'November’,'December’];

إذا استعملنا الأمر التالي:

document.write(monthsArray.indexOf(‘January’));

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

2- length :

أيضاً نفس الأمر الذي استعملناه مع الـ strings ، ووظيفته هنا هي تحديد حجم أو عدد عناصر المصفوفة. مثلاً مصفوفة الأشهر:

var monthsArray = ‘January’,'February’,'March’,'April’,'May’,'June’,'July’, ‘August’,'September’,'October’,'November’,'December’];

لو كتبنا هذا الأمر:

document.write(monthsArray.length);

سيكتب في المتصفح رقم 12 لأن عدد عناصر المصفوفة هو 12 .

سؤال: كيف نعمل برنامج فيه مصفوفة لأسماء أشهر السنة ، ونجعل المستخدم يدخل أسماء الأشهر ؟
جواب: تتذكرون الطريقة التي استعملناها لطباعة كل حرف في الـ string في سطر مستقل بواسطة أمر for ؟
سنستعمل نفس الفكرة بالضبط ..

أولاً ننشئ مصفوفة ونسميها ونحدد حجمها 12 لأن عدد الأشهر 12

var monthsArray = new Array(12);

ثانياً نعمل أمر for ، لإظهار رسالة لأخذ اسم الشهر وتخزينها في المكان المناسب في المصفوفة ، وسنعرِّف متغيِّر i حتى يتحكّم بعدد مرات التكرار:

for (var i=0; i<monthsArray.length;i++) // i=i+1 is the same as i+=1 and i++
{
monthsArray[i] = window.prompt(‘Enter the month name:’, ”);
}

في الدورة الأولى في هذا الأمر ستكون قيمة i = 0 ، أي أن الأمر الموجود في محتوى for سيكون كالتالي:

monthsArray[0] = window.prompt(‘Enter the month name:’, ”);

وفي الدورة الثانية أو التكرار الثاني ستكون قيمة i = 1 ، وسيكون الأمر الموجود في محتوى for كالتالي:

monthsArray[1] = window.prompt(‘Enter the month name:’, ”);

وسيستمر بالتكرار حتى تصبح i=12 ، وعندها سيصبح الشرط الموجود خاطئ ولن يتم تنفيذ المحتوى ، لأن monthsArray.length يساوي 12 … وبالتالي سيكون الشرط 12 > 12 ، والنتيجة False.

لو وضعنا بدلاً من علامة (أصغر من) علامة (أصغر من أو يساوي) سيكون الشرط صحيح وسيكون الأمر الموجود في المحتوى كالتالي:

monthsArray[12] = window.prompt(‘Enter the month name:’, ”);

وهذا معناه انه طلب من المستخدم كتابة اسم شهر رقم 13 (لأننا بدأنا من 0) وهذا يعني أن النهاية لابد أن تكون 11 حتى تكتمل الاثني عشر شهراً ، وإذا أكملنا ل12 مثل ماعملنا في آخر أمر ، سيكون معناه بأننا طلبنا كتابة اسم الشهر رقم 13 !
هذا الكلام هو لزيادة توضيح فائدة أمر for لمثل هذه الأشياء.

للتلخيص هذا جدول يلخِّص الـ methods الخاصة بالمصفوفات وطريقة عملها:

العودة لقائمة المحتويات

12- الدَّوال Functions :

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

توجد دوال معرفة في الجافاسكربت تلقائياً مثل دالّة parseFloat ، والتي تقوم بتحويل المتغيِّر من نوع string إلى متغيّر عادي ، وتوجد دوال نحن نقوم بإنشائها ، وسنتحدَّث عنها في هذا القسم إن شاء الله.

البرنامج رقم 4: دالّة لتقريب الأرقام إلى خانتين عشرية

لو كان لدينا البرنامج البسيط التالي:

var numOne = 7;
var numTwo = 3;
var divideOneOnTwo = numOne / numTwo;
var divideTwoOnOne = numTwo / numOne;

divideOneOnTwo = Math.round(divideOneOnTwo * 100) / 100;
divideTwoOnOne = Math.round(divideTwoOnOne * 100) / 100;

البرنامج عبارة عن تعريف متغيرين: الأول قيمته 7 والثاني قيمته 3 ، وبعدها عرفنا متغيرين: الأول عبارة عن قسمة قيمة أول متغير على ثاني متغير ، والثاني عبارة عن قسمة ثاني متغير على أول متغير.

وبعدها قمنا بتقريب قيمة المتغيرين الجديدين إلى خانتين عشرية عن طريق أمر ()Math.round ، طبعاً طريقة التقريب تمّ شرحها بالتفصيل عندما شرحت أمر ()Math.round في قسم “بعض الأوامر الشائعة”.

طيب الآن بدل ما أكتب أوامر تقريب الرقم إلى خانتين عشرية في كل مرة أحتاج إلى تقريب رقم ، سأقوم بكتابة دالّة خاصة بهذه العملية ، وسأستدعيها كلّما احتجت إليها في البرنامج. سأسمّي الدّالة twoDPs ، اختصاراً لـ Two Decimal Places :

function twoDPs(anyNumber)
{
return Math.round(anyNumber * 100) / 100;
}

بالنسبة لأول كلمة function ، هي كلمة محجوزة وتدل على وجود دالّة.
ثاني كلمة twoDPs ، هي اسم الدّالة.
بالنسبة لكلمة anyNumber الموجودة بين القوسين هي بمثابة دليل ، أي أن أي رقم سيأتي في داخل القوسين ، سيتم وضعه في مكان هذه الكلمة الموجود في أمر ()Math.round .
مثلاً لو استدعينا الدالة ، ووضعنا في داخل القوسين هذا الرقم 9.76543 ، سيتم التعويض بهذا الرقم في محتوى الدالة لتصبح:

return Math.round(9.76543 * 100) / 100;

وطبعاً يمكننا تسميته بأي اسم نرغب فيه ولكن يفضّل بأن يدل الاسم على القيمة التي من المفترض أن يحتوي عليها. إذا لم تتضح فائدة هذه الكلمة تابعوا معي وستتضح إن شاء الله بعد قليل.

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

الآن عملنا الدّالة ، لو افترضنا بأننا نريد استعمالها في نفس البرنامج الذي كتبناه في البداية ، سيتحوّل البرنامج إلى:

var numOne = 7;
var numTwo = 3;
var divideOneOnTwo = numOne / numTwo;
var divideTwoOnOne = numTwo / numOne;

divideOneOnTwo = twoDPs(divideOneOnTwo);
divideTwoOnOne = twoDPs(divideTwoOnOne);

فقط نقوم بكتابة اسم الدالة وفي داخلها القيمة التي نريد تقريبها. دعونا نتتبّع الخطوات التي سيعملها البرنامج ابتداءً من أول أمر ، وانتهاءً بآخر أمر لتتضح لكم الصورة:
السطر الأول والثاني: أنشأنا متغيرين الأول قيمته 7 والثاني قيمته 3
السطر الثالث: أنشأنا متغير قيمته تساوي قسمة 7 على 3 ، يعني:

divideOneOnTwo = 2.3333333333

السطر الرابع: أنشأنا متغير قيمته تساوي قسمة 3 على 7 ، يعني:

divideTwoOnOne = 0.4285714286

السطر الخامس: طلبنا تغيير قيمة المتغيِّر divideOneOnTwo عن طريق دالّة twoDPs ، أي أننا نريد تقريب قيمته السابقة إلى خانتين عشرية. وسيكون الأمر كالتالي:

divideOneOnTwo = twoDPs(2.3333333333);

في السطر الخامس ، قمنا باستدعاء دالّة ، لذلك سنذهب الآن للدالّة التي استدعيناها قبل تنفيذ مافي السطر الخامس. وستكون الدّالة بهذا الشكل:

function twoDPs(2.3333333333)
{
return Math.round( 2.3333333333 * 100) / 100;
}

هل اتّضحت لكم فائدة كلمة anyNumber الآن ؟
الآن الدالّة ستعود للمكان الذي استدعيناها فيه – لأننا طلبنا منها ذلك عن طريق أمر return – بنتيجة العمليات الحسابية التي قامت بها ، وستضع النتيجة في مكانها. يعني السطر الخامس سيتحوّل بعد عمل الدّالة إلى:

divideOneOnTwo = 2.33 ;

الآن سينتقل البرنامج للسطر السادس ، وسيفعل نفس مافعله مع السطر الذي سبقه. وسيكون شكل الأمر كالتالي:

divideTwoOnOne = twoDPs(0.4285714286);

بعدها سيذهب البرنامج إلى الدالة ومعه الرقم 0.4285714286 ، وثم سيعود بالنتيجة الحاصلة من عمل الدالة وهو الرقم 0.43 ، وسيضعه في المكان الذي استدعينا فيه الدالة:

divideTwoOnOne = 0.43 ;

يعني لو أضفنا بعد آخر أمر في هذا البرنامج أوامر لكتابة هذين المتغيرين في المتصفح ، ستكون النواتج 2.33 و 0.43 على التوالي.
والكود الكامل للبرنامج سيكون:

function twoDPs(anyNumber)
{
return Math.round(anyNumber * 100) / 100;
}

var numOne = 7;
var numTwo = 3;
var divideOneOnTwo = numOne / numTwo;
var divideTwoOnOne = numTwo / numOne;

document.write(divideOneOnTwo + ‘ and ‘ + divideTwoOnOne + ‘ before rounding.<br/>’);

divideOneOnTwo = twoDPs(divideOneOnTwo);
divideTwoOnOne = twoDPs(divideTwoOnOne);

document.write(divideOneOnTwo + ‘ and ‘ + divideTwoOnOne + ‘ after rounding.);

طبعاً هنا أضفت أمرين لكتابة قيم المتغيرين قبل التقريب وبعد التقريب حتى تتّضح لكم الصورة أكثر. وستكون نتيجة هذا البرنامج المكتوبة في الصفحة هي:

2.3333333333333335 and 0.42857142857142855 before rounding.
2.33 and 0.43 after rounding.

لتحميل البرنامج

العودة لقائمة المحتويات

البرنامج رقم 5: دالّة لحساب المساحة بالمتر المربّع

لو أردنا عمل برنامج يأخذ من المستخدم طول وعرض لمكان معين، وسيقوم البرنامج بحساب مساحة المكان عن طريق دالّة. وللتذكير المساحة تساوي الطول ضرب العرض!

أولاً ننشئ متغيرين وندع قيمتهم ليدخلها المستخدم:

var length = window.prompt(‘Enter the length’, ”);
var width = window.prompt(‘Enter the width’, ”);

ثانياً نعمل دالة لتقوم بعملية ضرب الطول في العرض وتعيد النتيجة لنا:

function getArea(length, width)
{
return length * width;
}

نلاحظ هنا أن بين القوسين يوجد اسمين، بمعنى حتّى تعمل هذه الدالة ، يجب أن نرسل لها رقمين ، وهي في حالتنا طول وعرض. ومن الممكن أن يكون داخل القوسين عدد لانهائي من القيم ، فهو شيء يعتمد على حاجتنا وغرضنا من كتابة الدّالة.

ثالثاً نضع أمر لكتابة النتيجة بالشكل التالي:

document.write(‘The area is ‘ + getArea(length, width) );

نلاحظ هنا ان الدّالة استدعيناها في داخل أمر الطباعة وهو شيء عادي ، وأحببت أن أوضح لكم فيه أن استدعاء الدالة ممكن أن يكون في أي مكان في البرنامج.
والـ arguments التي وضعناها بين القوسين ، هي قيم الطول والعرض التي أدخلها المستخدم.

البرنامج سيكون كالتالي:

function getArea(length, width)
{
return length * width;
}

var length = window.prompt(‘Enter the length’, ”);
var width = window.prompt(‘Enter the width’, ”);

document.write(‘The area is ‘ + getArea(length, width) );

طبعاً الدّوال يتم كتابتها غالباً بين وسمي <head> ، بعكس أمر document.write مثلاً ، الذي من المفترض أن نكتبه بين وسمي <body> ، وإنشاء المتغيرات وتعريفها ممكن يكون في أي من المكانين.

طيب نمشي مع برنامجنا الأخير خطوةً خطوةً ، على افتراض أن المستخدم أدخل رقم 10 للطول و 7 للعرض:

length = 10
width = 7

سيذهب البرنامج الآن إلى أمر الكتابة في المتصفح وسيكتب في المتصفح:

The area is

ثم سيجد الدالة getArea وفيها قيمتين 10 و 7 على التوالي. سيذهب البرنامج الآن للدالة التي استدعيناها بالرقمين 10 و 7 لتصبح بالشكل التالي:

function getArea(10, 7)
{
return 10 * 7;
}

ثم سيعود بنتيجة عمل الدالة وهو رقم 70 إلى أمر الكتابة في المتصفح الذي توقف عنده ، وسيكمل الكتابة وسيكتب 70 بجانب الكلام الذي كتبه مسبقاً لتكون نتيجة الكتابة النهائية:

The area is 70

لتحميل البرنامج

إن شاء الله تكون وضحت لكم فوائد الدّوال وطرق استخدامها.

العودة لقائمة المحتويات

البرنامج رقم 6: حساب متوسِّط التكاليف الشهرية

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

سنمشي خطوة خطوة ، أولًا سنقوم بإنشاء مصفوفة لتحمل التكاليف الشهرية و حجمها 12 :

var costsArray = new Array(12);

الآن سنجعل المستخدم يقوم بإدخال التكاليف في هذه المصفوفة باستخدام أمر for :

for ( var i = 0 ; i < costsArray.length ; i++ ) {
costsArray[i] = window.prompt(‘Enter the month cost’, ”);
}

هذا الأمر ناقص .. هل تذكرون بأن أي قيمة يقوم بإدخالها المستخدم تكون عبارة عن string ؟
إذن ، لابد أن نقوم بإضافة أمر parseFloat حتى نستطيع التعامل مع الأرقام المُدخلة ، كالتالي:

costsArray[i] = parseFloat(window.prompt(‘Enter the month cost’, ”));

الآن نفذنا أول خطوة ، وستظهر عن طريقها رسالة 12 مرة للمستخدم ، ليدخل فيها التكاليف الشهرية.
الآن الرسالة التي ستظهر للمستخدم في كل مرة ستكون: Enter the month cost ، بمعنى أدخل تكاليف الشهر. لو افترضنا بأن المستخدم قام باستقبال مكالمة هاتفية أثناء إدخاله للتكاليف ، هل تعتقدون بأنه سيتذكر ماهو آخر شهر أدخل تكاليفه؟
غالباً لن يتذكر ، والبرنامج لايوجد فيه شيء يذكّره باسم أو رقم الشهر الذي توقف عنده.

لذلك سنقوم بتعديل بسيط على الكود ، حتى يظهر رقم الشهر في الرسالة. التعديل بسيط جداًّ ، سنقوم بإضافة المتغير i في الرسالة ، ولكننا سنزيد قيمته بواحد ، لأننا لا نريده أن يقول للمستخدم أدخل تكاليف الشهر 0 ! ، نريده أن يقول 1 لأن المستخدم غالباً لن يفهم هذه الأرقام والأساسيات البرمجية.
لذلك سنغير أمر الطباعة ليصبح بالشكل التالي:

costsArray[i] = window.prompt(‘Enter the monthly cost for month number ‘ + (i+1), ”);

لاحظوا أني وضعت i+1 في داخل قوس ، وهذا يجعل البرنامج يجمع قيمتهم قبل أن يقوم بإظهار الرسالة. وإذا لم نضع القوسين ، سيقوم البرنامج بإظهار قيمة i ، وبعده رقم 1 ، فهو سيعتقد بأن علامة الزائد هنا هي للجمع بين متغيرات مختلفة وليست العملية الرياضية. بمعنى لو جعلناهم بدون قوسين ، ستكون أول رسالة على الشكل التالي:

Enter the monthly cost for month number 01

والرسالة الثانية ستكون:

Enter the monthly cost for month number 11

بمعنى أنه قام بكتابة قيم i ومن ثم كتب رقم 1. ولكن اذا وضعناهم داخل قوسين سيتم جمع قيمتهم أولاً ثم سيكتب المجموع ، وهو 1 في المرة الأولى و2 في المرة الثانية.

طيب لو أردنا أن نستبدل الأرقام بأسماء الأشهر، كيف طريقتها؟ نفس الفكرة ، ولكن سنحتاج إلى كتابة مصفوفة تحتوي على أسماء الأشهر:

var monthsArray = ['January','February','March','April','May','June','July', 'August','September','October','November','December'];

وسنقوم بالتعديل على أمر إظهار النافذة ليصبح بالشكل التالي:

costsArray[i] = parseFloat(window.prompt(‘Enter the monthly cost for ‘ + monthsArray[i], ”));

للتوضيح ، في أول عمليّة تكرار ، ستكون قيمة i = 0 ، وسيكون المحتوى كالتالي:

costsArray[0] = parseFloat(window.prompt(‘Enter the monthly cost for ‘ + monthsArray[0], ”));

والرسالة التي ستظهر في هذا الأمر هي:

Enter the monthly cost for January

الآن انتهينا من أمر إظهار رسالة للمستخدم بشكل منسّق ومرتّب ليقوم بإدخال التكاليف الشهرية في المصفوفة. وللتذكير هذا ماقمنا بعمله حتى الآن:

var costsArray = new Array(12);
var monthsArray = ['January','February','March','April','May','June','July' ,'August','September','October','November','December'];

for ( var i = 0 ; i < costsArray.length ; i++ )
{
costsArray[i] = parseFloat(window.prompt(‘Enter the monthly cost for ‘ + monthsArray[i], ”));
}

الآن نريد أن نقوم بكتابة اسم كل شهر وتكلفته في سطر منفصل ، ببساطة سنقوم بإضافة أمر الكتابة في داخل محتوى for بالشكل التالي:

document.write(monthsArray[i] + ‘ : ‘ + costsArray[i] + ‘<br/>’);

أعتقد أن الأمر واضح إذا كنّا فهمنا طريقة استعمال المتغيِّر i بهذا الشكل. سيتغير الآن محتوى for ليصبح:

for ( var i = 0 ; i < costsArray.length ; i++ )
{
costsArray[i] = parseFloat(window.prompt(‘Enter the monthly cost for ‘ + monthsArray[i], ”));

document.write(monthsArray[i] + ‘ : ‘ + costsArray[i] + ‘<br/>’);
}

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

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

تبقى لنا الآن عملية حساب المتوسط للتكاليف الشهرية ، وكما نعرف المتوسط سيساوي مجموع التكاليف على عددها ، يعني سنحتاج الآن إلى إضافة أمر يقوم بجمع التكاليف الشهرية. لذلك سننشئ متغيِّر جديد – ليحسب مجموع التكاليف – باسم sum وستكون قيمته الأوليّة 0 .

var sum = 0;

طيب الآن كيف نستطيع إضافة هذا المتغيِّر في داخل محتوى for حتى يجمع كل تكلفة جديدة يدخلها المستخدم؟
للتبسيط ، نريد أن تكون قيمة هذا المتغيِّر في كل تكرار جديد تساوي قيمتها السابقة زائد التكلفة التي أدخلها المستخدم.
يعني لو افترضنا أن المستخدم أدخل 1500 كأول تكلفة ، نريد sum تساوي 0 + 1500 .
ولو أدخل 2000 للتكلفة الثانية ، تكون sum تساوي 1500 + 2000 .
الأمر بسيط ولا يختلف عن الفكرة الأساسية لأمر for ، وسيكون بالشكل التالي:

sum = sum + costsArray[i] ;

الأكواد التي كتبناها حتى الآن هي كالتالي:

var costsArray = new Array(12);
var monthsArray = ['January','February','March','April','May','June','July' ,'August','September','October','November','December'];

var sum = 0;

for ( var i = 0 ; i < costsArray.length ; i++ )
{
costsArray[i] = parseFloat(window.prompt(‘Enter the monthly cost for ‘ + monthsArray[i], ”));

document.write(monthsArray[i] + ‘ , ‘ + costsArray[i] + ‘<br/>’);

sum = sum + costsArray[i] ;
}

الآن تبقا لنا المتوسط ، وسنقوم بعمل دالّة للقيام بالمهمة وسنستدعيها في أمر الكتابة في المتصفح:

function getAverage(total, number)
{
return total / number;
}

سمّينا الداة getAverage ، ووضعنا لها قيمتين لن تعمل بدونهم ، الأولى هي المجموع والثانية هي العدد. طبعاً المجموع الآن أصبح جاهزاً في المتغيِّر sum ، وبالنسبة للعدد ، نستطيع إمّا أن نكتب رقم 12 عند استدعاء الدّالة ، أو نستطيع استخدام خاصية length لمصفوفة التكاليف.

يعني أمر كتابة المتوسط للتكاليف الشهرية سيكون بالشكل التالي:

document.write(‘The monthly costs average is ‘ + getAverage(sum,costsArray.length));

أين سنكتب هذا الأمر الأخير؟ في داخل محتوى for ؟ هل نريده أن يتنفَّذ أكثر من مرّة ؟ أم نريده أن يتنفّذ مرة واحدة فقط ؟
طبعاً نريد تنفيذه مرة واحدة فقط ، وذلك في نهاية البرنامج ، ولذلك سنكتبه بعد أمر for .
والكود الكامل سيكون بهذا الشكل:

function getAverage(total, number)
{
return total / number;
}

var costsArray = new Array(12);
var monthsArray = ['January','February','March','April','May','June','July' ,'August','September','October','November','December'];

var sum = 0;

for ( var i = 0 ; i < costsArray.length ; i++ )
{
costsArray[i] = parseFloat(window.prompt(‘Enter the monthly cost for ‘ + monthsArray[i], ”));

document.write(monthsArray[i] + ‘ , ‘ + costsArray[i] + ‘<br/>’);

sum = sum + costsArray[i];
}

document.write(‘The monthly costs average is ‘ + getAverage(sum,costsArray.length));

لو افترضنا بأن الأرقام التي أدخلها المستخدم هي بالترتيب التالي:

111 112 113 311 256 654 223 123 545 234 233 111

مجموع هذه الأرقام هو 3026 ..

والنتيجة المكتوبة في المتصفح ستكون كالتالي:

January , 111
February , 112
March , 113
April , 311
May , 256
June , 654
July , 223
August , 123
September , 545
October , 234
November , 233
December , 111
The monthly costs average is 252.16666666666666

شكل المتوسِّط لم يعجبكم صح؟
نستطيع هنا أن نستعمل الدّالة التي كتبناها سابقاً لتقريب الرقم إلى خانتين عشرية. الدّالة سنضعها في الأعلى مع الدالة الأولى ، وسنقوم باستدعائها هذه المرة في داخل الدّالة التي تقوم بحساب المتوسط:

function twoDPs(anyNumber)
{
return Math.round(anyNumber * 100) / 100;
}

والآن نقوم بالتعديل على دالة حساب المتوسط ، وسنستدعي هذه الدالة في داخلها لتصبح بالشكل التالي:

function getAverage(total, number)
{
return twoDPs(total / number);
}

الآن إذا افترضنا أن المستخدم أدخل الأرقام السابقة ، سيكون المجموع هو 3026 والعدد طبعاً 12
يعني ستكون دالة حساب المتوسط كالتالي:

function getAverage(3026, 12)
{
return twoDPs(3026 / 12);
}

أول شيء ستتم عملية قسمة 3026 على 12 والناتج هو 252.16666666666666
ثم سينتقل هذا الناتج إلى دالّة تقريب الرقم إلى خانتين عشرية ، لتصبح دالة تقريب الأرقام بالشكل التالي:

function twoDPs(252.16666666666666)
{
return Math.round(252.16666666666666 * 100) / 100;
}

وفي النهاية النتيجة التي سترجع من هذه الدالة هي 252.17 ، وسترجع هذه القيمة إلى دالة حساب المتوسط وليس إلى أمر الطباعة!
ودالّة حساب المتوسط ستقوم بدورها بإعادة هذه القيمة إلى المكان الذي استدعينا فيه الدالة.

الآن وبحمد الله اكتمل البرنامج معنا ، وهذا هو الكود النهائي:

function getAverage(total, number)
{
return twoDPs(total / number);
}

function twoDPs(anyNumber)
{
return Math.round(anyNumber * 100) / 100;
}

var costsArray = new Array(12);
var monthsArray = ['January','February','March','April','May','June','July', 'August','September','October','November','December'];
var sum = 0;

for ( var i = 0 ; i < costsArray.length ; i++ )
{
costsArray[i] = parseFloat(window.prompt(‘Enter the monthly cost for ‘ + monthsArray[i], ”));

document.write(monthsArray[i] + ‘ , ‘ + costsArray[i] + ‘<br/>’);

sum = sum + costsArray[i] ;
}
document.write(‘The monthly costs average is ‘ + getAverage(sum,costsArray.length));

وإذا أدخلنا فيه نفس الأرقام السابقة ستكون النتيجة المكتوبة في المتصفح كالتالي:

January , 111
February , 112
March , 113
April , 311
May , 256
June , 654
July , 223
August , 123
September , 545
October , 234
November , 233
December , 111
The monthly costs average is 252.17

لتحميل البرنامج

العودة لقائمة المحتويات

13- HTML Graphical User Interface :

سنتحدث هنا عن بعض أدوات واجهة المستخدم الخاصة بلغة HTML ، سأشرحها من ضمن الجافاسكربت لأنها لاتوجد لها فائدة إذا لم نستعملها مع أحد السكربتات كالجافاسكربت.

1- صناديق الكتابة Text boxes :

هي تحل محل النوافذ التي نظهرها للمستخدم لأخذ البيانات منه ، أي أنها تعتبر بديل لأمر ()window.prompt ، وهي من وجهة نظري أكثر أناقة من النوافذ ، وتساعد على تنظيم وترتيب صفحة الانترنت أكثر من النوافذ التي تعلمنا عليها سابقاً.

2- الأزرار Buttons :

ووظيفتها هي تنفيذ أمر عند الضغط عليها من قبل المستخدم.

والأزرار وصناديق الكتابة يعتبرون مكملين لبعض ، لأنه غالباً سنقول للبرنامج أن يفعل شيء معين بالكتابة أو القيمة الموجودة في الـ text box عند الضغط على الزر.
الأزرار وصناديق الكتابة يجب أن تكون في داخل فورم ، ووسمه أو شفرته هي <form> </form> وهي أكواد HTML ، ولكل صندوق كتابة أو فورم اسم خاص به ، وسنرى فائدة كل هذا الآن.

لعمل صناديق الكتابة نستعمل الأكواد التالية:

<input type=”text” name=”anyName” value=”"/>

هذا الكود لو وضعناه في صفحة HTML ، سيظهر لنا في الصفحة مكان أو صندوق للكتابة.
ولكن حتى الآن لاتوجد له فائدة لأننا لم نضع أوامر أو أكواد حتى تأخذ القيم المدخلة في هذا الصندوق. ونلاحظ بأنه يحتوي على ثلاثة عناصر هامة:
1- “type=”text : يدل على أن النوع اللذي اخترناه هو “صندوق للكتابة” لأنه توجد أنواع أخرى مثل الأزرار وغيرها.
2- “name=”anyName : هو اسم نضعه لهذا المربع وفائدة الاسم هي اذا أردنا أن نقوم بالتعامل مع هذا المربع عن طريق جافاسكربت سنذكر اسم المربع الذي نريد التعامل معه، ستتضح أكثر بعد قليل ان شاء الله.
3- “”=value : هذا العنصر هو فائدة صندوق الكتابة الرئيسية ، غالباً سنترك قيمته فارغة ، والقيمة التي سيدخلها المستخدم في هذا الصندوق سيكون مكانها في هذا العنصر ، أي أننا إذا أردنا الحصول على ماقام المستخدم بكتابته في هذا الصندوق سنقوم بكتابة عنوان القيمة الموجودة هنا.

وفي النهاية قمنا بإغلاق هذا الكود بـ / ، لأنه ليس له شفرة إغلاق (مثل كود عرض الصور).

طيب دعونا ننتقل لطريقة عرض الأزرار الآن ، ثم سنشرح طريقة التعامل مع الاثنين.

لعرض زر في الصفحة ، سنستعمل الكود التالي:

<input type=”button” value=”Click here” onclick=”"/>

1- “type=”button : يدل على أن النوع اللذي اخترناه هو “زر أو button”
2- value=”Click here” هو الكلام الذي نريده أن يظهر على الزر ، مثل اضغط للتحويل أو اضغط هنا.
3- “”=onclick : هذا هو أهم عنصر في الأزرار ، الأمر الذي سنكتبه هنا سيقوم بتنفيذه عندما يضغط المستخدم على الزر. وغالباً سيكون الأمر الموجود هنا عبارة عن استدعاء لدالّة.

ومثل سابقه .. في النهاية قمنا بإغلاق هذا الكود بـ / ، لأنه ليس له شفرة إغلاق (مثل كود عرض الصور).

إذا جمعنا الأمرين السابقين لعرض صندوق الكتابة والزر ، ووضعناهم بداخل فورم <form> ، وسمينا هذا الفورم بأي اسم ، سيكون الكود كامل كالتالي:

<form name=”formName”>
<input type=”text” name=”anyName” value=”"/>
<input type=”button” value=”Click here” onclick=”"/>
</form>

لو قمنا الآن بوضع هذا الكود في داخل ملف HTML بين شفرتي <body> </body> ، وفتحنا الملف بالمتصفِّح ، سنرى النتيجة التالية:

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

العودة لقائمة المحتويات

البرنامج رقم 7 : التحويل من لتر إلى جالون

سنقوم بعمل برنامج يقوم بأخذ قيمة باللتر من المستخدم (عن طريق صناديق الكتابة) ومن ثم يحوِّلها إلى جالون ، مع العلم بأن الجالون يساوي 0.21998 لتر.

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

فنكتب الأكواد الخاصة بعرض صندوقي الكتابة والزر كالتالي:

<form name=”converter”>
Enter the value in litres:
<br/>
<input type=”text” name=”litres” value=”" />
<br/>
<br/>
<input type=”button” value=”Convert” onclick=”" />
<br/>
<br/>
The equivalent value in gallons is:
<br/>
<input type=”text” name=”gallons” value=”" />
</form>

أولاً: كتبنا شفرة <form> وسميناه converter ، حتى نضع في داخله صندوقي الكتابة وزر التّحويل.
ثانياً: كتبنا أمر لعرض صندوق كتابة ، حتى يقوم المستخدم بكتابة الكمية باللتر في هذا الصندوق (ولذلك تركتنا قيمته value فارغة).
ثالثاً: كتبنا أمر لعرض زر ، حتى يقوم بعملية التحويل ، وتركنا العنصر الثالث فارغاً الآن وسنعود له بعد قليل.
رابعاً: كتبنا أمر لعرض صندوق كتابة ، نريد من البرنامج أن يقوم بعرض نتيجة التحويل فيه (ولذلك تركنا قيمته value فارغة).
إذا استعرضنا نتيجة هذا الكود في المتصفِّح ، ستكون كالتالي:

الآن كل ما قمنا بعمله هو مجرَّد منظر ، فهو لن يقوم بأي استجابة للمستخدم ، لأننا لم نضف له أي كود أو أمر جافاسكربت.

الآن سنعمل دالة تقوم بتحويل الكميات من لتر إلى جالون ، وسنسميها litresToGallons :

function litresToGallons(litres) {
return litres * 0.21998;
}

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

document.converter.litres.value

document : ثابت ولا يتغير.
converter : هو الاسم الذي أعطيناه للفورم الذي يحتوي على صندوق الكتابة، وضحت فائدة الاسم الآن؟
litres : هو اسم صندوق الكتابة الذي سنتعامل معه ، لأن مثل حالتنا يوجد صندوقي كتابة ، وعن طريق الاسم نستطيع التمييز بينهم.
value : هو المكان الذي كتب فيه المستخدم القيمة باللتر.

يعني صندوق الكتابة الثاني ، سيكون عنوان القيمة الخاصة فيه هو:

document.converter.gallons.value

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

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

ببساطة أكثر ، نريد هذه الدّالة أن تقوم بتنفيذ هذا الأمر:

document.converter.gallons.value = litresToGallons(document.converter.litres.value)

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

بمعنى لو قام المستخدم بكتابة 20 في صندوق الكتابة الأول ، سيكون الأمر بالشكل التالي:

document.converter.gallons.value = litresToGallons(20)

بعدها سينتقل البرنامج إلى دالة التحويل من لتر إلى جالون ، بمعنى انه سيضرب رقم 20 في 0.21998 وستكون النتيجة 4.3996 ، وسيعود بهذه النتيجة وسيضعها في العنوان الخاص بصندوق الكتابة الثاني.

الآن سنكتب هذه الدالة:

function convert() {
document.converter.gallons.value = litresToGallons(document.converter.litres.value);
}

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

<form name=”converter”>
Enter the value in litres:
<br/>
<input type=”text” name=”litres” value=”" />
<br/>
<br/>
<input type=”button” value=”Convert” onclick=”convert()” />
<br/>
<br/>
The equivalent value in gallons is:
<br/>
<input type=”text” name=”gallons” value=”" />
</form>

هذه الأكواد ستكون بين شفرتي <body> </body>.
وأكواد الدّوال سنضعها في داخل شفرات <head> </head>.

فإذا جمعنا كل ماقمنا به ، ووضعناه في ملف HTML كامل ، سيكون بالشكل التالي:

<html>
<head>
<title> Litres to Gallons Converter </title>

function litresToGallons(litres)
{
return litres * 0.21998;
}

function convert()
{
document.converter.gallons.value = litresToGallons(document.converter.litres.value)
}
</head>
<body>
<form name=”converter”>
Enter the value in litres:
<br/>
<input type=”text” name=”litres” value=”" />
<br/>
<br/>
<input type=”button” value=”Convert” onclick=”convert()” />
<br/>
<br/>
The equivalent value in gallons is:
<br/>
<input type=”text” name=”gallons” value=”" />
</form>
</body>
</html>

فإذا كتبنا رقم 20 في المربع الأول ، ثم ضغطنا على زر التحويل ، ستظهر لنا النتيجة التالية:

طبعاً أهم شيء هنا ، هو أن نكون عرفنا كيف أخذنا القيمة التي كتبها المستخدم في مربع الكتابة ، وكيف جعلنا الزر يقوم بشيء معيَّن.

القيمة التي كتبها المستخدم في صندوق الكتابة ، أخذناها عن طريق هذا العنوان:

document.converter.litres.value
ثابت.اسم صندوق الكتابة.اسم الفورم.ثابت

وبالنسبة للزر ، كل ما قمنا بعمله هو استدعاء دالّة في عنصر onclick ، هذه الدّالة تقوم بأخذ القيمة من صندوق الكتابة الأول ، وتقوم بتحويلها أو التعديل عليها ، ومن ثم عرضها في صندوق الكتابة الثاني.

عنوان صندوق الكتابة الثاني هو:

document.converter.gallons.value
ثابت.اسم صندوق الكتابة.اسم الفورم.ثابت

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

للتلخيص صناديق الكتابة والأزرار كلهم يحتاجون إلى ثلاث عناصر:
1- type : صناديق الكتابة نوعها text ، و الأزرار نوعها button .
2- صندوق الكتابة له اسم name ، و الأزرار لها value وتكون عبارة عن نص يظهر فوق الزر.
3- صندوق الكتابة له value وهو المكان الذي سيحمل القيمة الموجودة في الصندوق ، و الأزرار لها onclick ، وهي ستنفذ الأمر الموجود فيه عند الضغط على الزر.

لتحميل برنامج التحويل من لتر إلى جالون

العودة لقائمة المحتويات

البرنامج رقم 8: البحث عن رمز الاتصال الدولي لدول العالم

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

1. أن يكتب اسم دولة ليحصل على رمز الهاتف الدولي الخاص بها.
2. أن يكتب رمز اتصال دولي ليعرف اسم الدولة التابعة له.

وهذه هي واجهة البرنامج:

في هذا البرنامج لن أشرح شيء ، ولكن سأكتب فكرة عمل البرنامج ، وللمعلومية ، نحن غير مطالبين بكتابة مثل هذا البرنامج ، فهو محاولة إجتهادية مني ، ولكن من يريد الاستفادة والتأكد من أنه فهم كل ماتم شرحه في الأقسام السابقة يجب أن يفهم طريقة عمل هذا البرنامج.

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

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

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

طبعاً البرنامج يوجد فيه عيب، وهو أن المستخدم إذا أراد أن يبحث عن رمز الاتصال الدولي لدولة معينة مثل United States ، يجب أن يكتب نفس الاسم – وحجم الأحرف – بالضبط ، فلو كتب united states أو USA مثلاً ستكون النتيجة undefined لأن هذه الكلمات غير موجودة في المصفوفة.

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

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

لتحميل برنامج البحث عن رمز الاتصال الدولي

العودة لقائمة المحتويات

تمَّ بحمد الله
أتمنَّى أن أكون وفِّـقت في شـرح هـذه اللغـة الجـميـلـة بـبـسـاطـة وسهـولـة.
في حال وجود أخطاء إملائية أو قواعدية أو في الشرح أتمنى أن تنبهوني عليها.
أخوكم : المعتصم

Posted in شروحات Tagged: Learner, M150A, unit-7, unit-8, جافاسكربت ]]> http://aoum150.wordpress.com/2009/08/08/javascript_lesson/feed/ 1 المعتصم إشارات المقارنة الإشارات الحسابية في البرمجة A_or_B A_and_B not_A or_and_not A_B A_and_B_not_A_and_B notA_and_notB for نتيجة أمر window.prompt نتيجة أمر window.alert نتيجة أمر window.confirm String_index_length_sum Array_methods_sum TextBox_button Litres_to_gallons Litres_to_gallons_after InternationalDialingCodes http://aoum150.wordpress.com/2009/07/05/html_lesson/ http://aoum150.wordpress.com/2009/07/05/html_lesson/#comments Sun, 05 Jul 2009 18:11:40 +0000 المعتصم http://aoum150.wordpress.com/?p=228 ]]>

لتحميل الشرح على ملف بصيغة pdf

أنصح بقراءة الشرح من ملف الـ pdf لأن تنسيقه أفضل من الشرح الموجود في هذه الصفحة

قائمة المحتويات:

1. ماهي لغة HTML ؟
2. مثال تطبيقي
3. ملخص لأهم الشفرات المستخدمة في لغة HTML
4. التعليقات والملاحظات
5. عيوب لغة HTML
6. مقدمة عن لغة XML

1- ماهي لغة HTML ؟

HTML هي اختصار لجملة HyperText Markup Language ، وهي لغة وشفرات برمجية يتم كتابتها يدوياً أو عن طريق برامج متخصصة ، ومن ثم يتم ترجمة هذه الأكواد والشفرات عن طريق متصفحات الانترنت (مثل انترنت اكسبلورر وفايرفوكس وغيرها) وتحويلها إلى صفحات انترنت منسقة ومرتبة على حسب اختيار ورغبة مصمِّم الصفحة.

يتم كتابة شفرات وأكواد هذه اللغة بإحدى الطريقتين التالية:

1- WYSIWYG :

هي اختصار لـ What You See Is What You Get ومعناها ماتشاهده هو ماستحصل عليه. وهي عبارة عن استخدام برامج متخصصة في كتابة هذه اللغة (مثل فرونت بيج ومحرر النصوص وورد و دريم ويفر وغيرها) لتقوم بعمل صفحة انترنت بدون الحاجة لمعرفة وكتابة الشفرات البرمجية الخاصة بهذه اللغة، بمعنى أنه إذا أردنا مثلاً أن نكتب كلمة بلون معين ، كل ماعلينا هو كتابة الكلمة ثم نقوم بتظليلها في البرنامج ومن ثم نذهب إلى قائمة الألوان لنختار اللون الذي نريده، وهكذا لباقي عمليات التنسيق المختلفة، والبرنامج سيقوم بالنيابة عنا بتحويل ماعملناه إلى أكواد وشفرات HTML.
برنامج مايكروسوفت وورد هو أوضح مثال على مثل هذه البرامج ، حيث يمكننا عن طريقه عمل صفحة انترنت بالتنسيق الذي نريده – وكأننا ننسق مستند نصي عادي – وبعدها نقوم بحفظ الملف على شكل صفحة ويب ، وسنجد الملف الناتج يحمل امتداد html وهو الامتداد الخاص بصفحات الانترنت التي نستطيع فتحها ومشاهدتها بواسطة المتصفح.
يفضل استعمال هذا النوع لغير المحترفين في مجال عمل صفحات الانترنت أو لمن لايريد تعلمها لأنها ليست على علاقة مع
تخصصه أو مجال عمله. ويميز هذا النوع بأنه يسمح لنا برؤية عملنا مباشرة في البرنامج، وأيضاً لايتطلب معرفة شفرات اللغة البرمجية.

Explicit Markup -2 :

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

2- مثال تطبيقي :

الصورة التالية أتت لنا في الواجب الثاني لسنة 2008/2009 وسأستخدمها كمثال وسأضيف عليها شعار منتديات طلاب الجامعة العربية المفتوحة في الأعلى حتى يصبح المثال شاملاً لجميع الشفرات الأساسية لعمل صفحة انترنت.

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

أولاً: أي صفحة انترنت مهما كان حجمها ومهما كان نوعها يجب أن تحتوي على الأكواد التالية:

<html>
     <head>
          <title> عنوان الصفحة </title>
     </head>
     <body> محتوى الصفحة </body>
</html>

<html> يدل على أن صفحة الانترنت تبدأ من هنا.
<head> يحتوي على شفرة عنوان الصفحة وشفرات أخرى متقدمة لسنا مطالبون بمعرفتها حالياً مثل شفرات لغة XML ولغة الجافاسكربت.
<title> يحتوي على عنوان الصفحة الذي نريده أن يظهر في أعلى المتصفح كاسم وعنوان للصفحة.
<title/> هو شفرة الإغلاق لشفرة العنوان والذي يخبرنا بأنها شفرة نهاية أو إغلاق هو رمز / الموجود قبل الكلمة.
وأحب أن أذكر هنا بأن أي شفرة أو وسم يجب علينا إغلاقها بعد انتهاؤنا منها مثلما عملنا هنا في إغلاق شفرة العنوان بعد كتابة العنوان الذي نريده.
<head/> إغلاق للشفرة السابقة لأننا لم نعد نريد إضافة شيء في داخلها.
<body> بعد هذه الشفرة سنضع كل شفرات ومحتويات صفحة الانترنت التي نريد عملها.
<body/> هذه الشفرة تدل على أن محتوى الصفحة التي صممناها انتهى هنا.
<html/> يدل على أن ملف صفحة الانترنت ينتهي هنا.

بعض الملاحظات الهامة:

• الأكواد والشفرات يجب أن نكتبها كلها إمما بأحرف كبيرة مثل <HTML> أو كلها بأحرف صغيرة مثل <html> ، ويجب الثبات على هذا الشيء في جميع أكواد الملف. ويفضل التعوُّد على الكتابة بالأحرف الصغيرة دائماً.
• يجب علينا المحافظة على ترتيب الشفرات البرمجية المختلطة أو المتداخلة مع بعض، كمثال:
  <p> <center> Hello! </p> </center>
  الطريقة هذه خاطئة وسيتم إنقاص درجات منك إذا قمت بعملها، المفترض أن نكتبها بالشكل التالي:
  <p> <center> Hello! </center> </p>
  قاعدة: آخر شفرة نكتبها هي أول شفرة نغلقها.
• زر إدخال أو إنتر لايوجد له أي تأثير على النتيجة النهائية للأكواد البرمجية، يعني لوكتبنا الشفرات والمحتوى كله بدون أن نضغط زر إنتر لتصبح جميع الشفرات والأكواد موجودة في سطر واحد ، أو قمنا بالضغط على زر إنتر لتصبح الشفرات موزعة على عدة أسطر ، النتيجة ستكون نفسها للطريقتين.
• استعمال زر المسافة سيتم احتسابه مرة واحدة فقط سواء ضغطنا عليه مرة واحدة أو خمس مرات، النتيجة واحدة.
• الأوامر البرمجية يتم تنفيذها بالتسلسل ، ابتداءً من أول أمر موجود في الأعلى ، وانتهاءً بآخر أمر موجود في الأسفل.

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

<img src=”…”>

مكان النقط نضع رابط الصورة التي نريد عرضها، وهنا يجب أن نذكر بأنه توجد حالتين لعرض الصور:

الأولى: وهي إذا كانت الصورة موجودة في صفحة انترنت أخرى ونريد أن نعرضها في صفحتنا – وهذه الطريقة مكروهه لأنها تقوم بسرقة تحميل البيانات من الموقع الآخر وتقوم بتضليل برامج حساب عدد الزوار وغيرها – وفي هذه الحالة نقوم بوضع رابط الصورة كاملاً في مكان النقاط وفي حالتنا هذه لن نستخدم هذه الطريقة لأن الصورة ستكون محلية وليست من رابط خارجي.

الثانية: إذا كانت الصورة موجودة لدينا في الحاسب أو في السيرفر الذي سنرفع عليه صفحة الانترنت، وطريقتها يجب أن نضع الصورة في نفس المجلد الذي توجد فيه صفحة الانترنت ، مثلاِ لو كان ملف صفحة الانترنت الذي نقوم بتصميمه موجود في سطح المكتب يجب أن نضع الصورة في سطح المكتب أيضاً ، ولو كان الملف موجود في المستندات يجب أن نضع الصورة معه في المستندات.

الآن بعد ماوضعنا الصورة والملف في نفس المجلد نأخذ اسم الصورة مع امتدادها ونضعها مكان النقط الحمراء ، الصورة في حالتنا هذه اسمها aoua.jpg. لذلك نعيد كتابة شفرة عرض الصورة لتصبح بالشكل التالي:

<img src=”aoua.jpg”>

طيب الآن عرفنا كيف نعرض الصورة ، ولكن تبقا أن نجعلها تظهر في وسط الصفحة ..
الشفرة الخاصة بالتوسيط هي <center> .
لذلك نضيفها مع شفرة إغلاقها على شفرة عرض الصورة السابقة ، لتصبح بالشكل التالي:

<center> <img src=”aoua.jpg”> </center>

طبعاً هذه الشفرة نكتبها في مكان المحتوى الذي حددته في الشفرات الأساسية ، ليصبح عملنا حتى الآن كالتالي:

<html>
     <head>
          <title>My first web page!</title>
     </head>
     <body>
          <center> <img src=”aoua.jpg”> </center>
     </body>
</html>

الآن انتهينا من أول خطوة في الصفحة، الخطوة القادمة هي كتابة عنوان القطعة Luke Howard
العناوين توجد لها ست مقاسات أو أحجام ، وتكتب شفرتها كالتالي:

<h1>عنوان كبير جداً</h1>

<h2>عنوان كبير</h2>

<h3>عنوان متوسط</h3>

<h4>عنوان أصغر</h4>

<h5>عنوان صغير</h5>

<h6>عنوان صغير جدا</h6>

كلما كبر الرقم كلما صغر حجم العنوان ..

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

<h1>Luke Howard</h1>

وفي هذه الحالة العنوان متواجد على الجهة اليسرى لذلك لانحتاج إلى شفرة لتحديد المكان لأن المكان الافتراضي هو اليسار.
الشفرة السابقة نضيفها بعد شفرة عرض الصورة، لأننا لو وضعناه قبلها سيظهر العنوان قبل الصورة ونحن لانريد ذلك.
سيصبح ماقمنا بعمله حتى الآن كالتالي:

<html>
     <head>
          <title>My first web page!</title>
     </head>
     <body>
          <center> <img src=”aoua.jpg”> </center>
          <h1>Luke Howard</h1>
     </body>
</html>

الآن ننتقل للخطوة التالية وهي كتابة القطعة النصية التالية وتنسيقها حتى تصبح مشابهة للصورة التي لدينا:

Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.

Howard gave three “modifications” of clouds

• Cumulus (from the Latin for heap)
• Stratus (from the Latin for a layer)
• Cirrus (from the Latin for a curl)

To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.

Howard’s scheme was first published in a paper he gave to the Askesian Society in 1802.

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

الطريقة الأولى:

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

<p> النص سيكون هنا </p>

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

<p>Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.</p>

<p>Howard gave three “modifications” of clouds</p>

Cumulus (from the Latin for heap)
Stratus (from the Latin for a layer)
Cirrus (from the Latin for a curl)

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p>

<p>Howard’s scheme was first published in a paper he gave to the Askesian Society in 1802. </p>

طيب الآن وضعنا الأجزاء النصية في شفراتها وتبقّى لدينا القائمة، القوائم في هذه اللغة تنقسم لقسمين; قوائم مرتبة (أو مرقمة) وقوائم عشوائية (أو غير مرتبة):

1. القوائم المرتبة شفرتها هي <ol> ، وهي اختصار لـ Ordered List .

• القوائم الغير مرتبة شفرتها <ul> ، وهي اختصار لـ Unordered List .

في حالتنا هذه نريد استخدام القوائم الغير مرتبة ، لذلك نضع الشفرات حول القائمة الموجودة لدينا:

<ul>
Cumulus (from the Latin for heap)
Stratus (from the Latin for a layer)
Cirrus (from the Latin for a curl)
</ul>

ما قمنا به لايكفي لعرض القوائم ، لأنه يجب علينا تحديد كل عنصر في القائمة بشفرة <li> ، حتى يميز البرنامج كم عنصر يوجد في هذه القائمة ، لذلك سنقوم بوضع شفرة عناصر القائمة على العناصر الثلاثة الموجودة لدينا لتصبح بالشكل التالي:

<ul>
     <li>Cumulus (from the Latin for heap)</li>
     <li>Stratus (from the Latin for a layer)</li>
     <li>Cirrus (from the Latin for a curl)</li>
</ul>

اذا جمعنا ماقمنا به حتى الآن سنحصل على التالي:

<html>
     <head>
          <title>My first web page!</title>
     </head>
     <body>
          <center> <img src=”aoua.jpg”> </center>
          <h1>Luke Howard</h1>
          <p>Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.</p>

          <p>Howard gave three “modifications” of clouds</p>

          <ul>
               <li>Cumulus (from the Latin for heap)</li>
               <li>Stratus (from the Latin for a layer)</li>
               <li>Cirrus (from the Latin for a curl)</li>
          </ul>

          <p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p>

          <p>Howard’s scheme was first published in a paper he gave to the Askesian Society in 1802. </p>
     </body>
</html>

الطريقة الثانية:

هي أن نضع كل الكلام الموجود في الصورة في داخل شفرة <p> واحدة، وعند الرغبة في نزول سطر نستعمل شفرة <br> ، هذه الشفرة مهمتها هي مثل أمر إنتر في برنامج تحرير النصوص ، يعني ستجعل النص ينزل لسطر جديد.

لو قمنا الآن بحفظ الملف وثم فتحناه بمتصفح انترنت سنحصل على النتيجة التالية:

الآن تقريباً قطعنا ثلثي المشوار وتبقا الثلث. تبقى أن نقوم بالعمليات التنسيقية التالية حتى نجعل عملنا يتطابق مع الصورة الأولى:
1.تغيير نوع الخط لـ Luke Howard الموجودة في القطعة الأولى لتكون بالخط السميك.
2.تغيير نوع خط الأرقام (1864 – 1773) الموجودة في القطعة الأولى لتصبح بالخط المائل.
3.تغيير نوع الخط لكلمة modifications الموجودة في القطعة الثانية لتصبح بالخط السميك.
4.إضافة رابط لصفحة انترنت أخرى على كلمات Askesian Society الموجودة في القطعة الأخيرة.

نبدأ بالعملية الأولى، ولجعل نوع الخط يكون بالخط السميك نستعمل الشفرة <b> اختصاراً لكلمة bold.
لذلك نضيفها على الكلمات لتصبح بالشكل التالي:

<b>Luke Howard</b>

طبعاً الكلمتين موجودين في مكانهم بين شفرتهم الأساسية <p> ، وأضفنا قبلهم وبعدهم شفرات لجعل الخط سميك.

العملية الثانية بنفس الطريقة، وشفرة تغيير الخط ليصبح مائل هي <i> اختصاراً لكلمة italic.
نضيفها على الأرقام لتصبح بالشكل التالي:

<i> (1773–1864) </i>

العملية الثالثة هي نفس الأولى، فيصبح لدينا:

<b>modifications</b>

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

<a href=”…“> الكلام الذي نرغب أن نضع عليه رابطاً لصفحة انترنت أخرى </a>

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

<a href=”Askesian.html”>Askesian Society</a>

الآن انتهينا من تنسيق النص، والنتيجة الكاملة لما قمنا به هي:

<html>
     <head>
          <title> My first web page! </title>
     </head>
     <body>
          <center> <img src=”aoua.jpg”> </center>
          <h1>Luke Howard</h1>
          <p><b>Luke Howard</b> <i>(1773-1864)</i> was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.</p>

          <p>Howard gave three “<b>modifications</b>” of clouds</p>

          <ul>
               <li>Cumulus (from the Latin for heap)</li>
               <li>Stratus (from the Latin for a layer)</li>
               <li>Cirrus (from the Latin for a curl)</li>
          </ul>

          <p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p>

          <p>Howard’s scheme was first published in a paper he gave to the <a href=”Askesian.html”>Askesian Society</a> in 1802. </p>
     </body>
</html>

ولو قمنا الآن بحفظ الملف باسم first_web_page.html على سبيل المثال ، وثم قمنا بفتح الملف عن طريق متصفح الانترنت سنحصل على هذه النتيجة:

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

لتحميل الصفحة التي صممناها مع الملفات المستخدمة في الشرح

أحب أن أذكر هنا بأن تنسيق كتابة الشفرات لأي لغة برمجة شيء ضروري جداً لسببين:
1.لأنها تجعل قراءة الشفرات أسهل بكثير لمن أراد الاطلاع عليها (كالمدرس).
2.لأنها تسهل علينا تصحيح الأخطاء إذا حدثت أو تطوير الشفرات فيما بعد.

على سبيل المثال ، انظر لهذه الأكواد:

<html><head><title> My first web page! </title></head><body><center> <img src=”aoua.jpg”> </center><h1>Luke Howard</h1><p><b>Luke Howard</b> <i>(1773-1864)</i> was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.</p><p>Howard gave three “<b>modifications</b>” of clouds</p><ul><li>Cumulus (from the Latin for heap)</li><li>Stratus (from the Latin for a layer)</li><li>Cirrus (from the Latin for a curl)</li></ul><p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p><p>Howard’s scheme was first published in a paper he gave to the <a href=”Askesian.html”>Askesian Society</a> in 1802. </p></body></html>

وانظر لهذه الأكواد:

<html>
     <head>
          <title> My first web page! </title>
     </head>
     <body>
          <center> <img src=”aoua.jpg”> </center>
          <h1>Luke Howard</h1>
          <p><b>Luke Howard</b> <i>(1773-1864)</i> was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.</p>

          <p>Howard gave three “<b>modifications</b>” of clouds</p>

          <ul>
               <li>Cumulus (from the Latin for heap)</li>
               <li>Stratus (from the Latin for a layer)</li>
               <li>Cirrus (from the Latin for a curl)</li>
          </ul>

          <p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p>

          <p>Howard’s scheme was first published in a paper he gave to the <a href=”Askesian.html”>Askesian Society</a> in 1802. </p>
     </body>
</html>

أي الاثنين أريح للعين وأسهل للقراءة والفهم؟
بالتأكيد الثاني لأنه منسق بشكل واضح ، مع العلم بأن كل الشفرتين سيعرضون نفس النتيجة بالضبط! لأني كما ذكرت سابقاً: الضغط على زر إنتر أو مسافة أو حتى استخدام زر tabs لا يؤثر على النتيجة النهائية للعمل.
وللتنسيق أنصح باستخدام زر Tabs لزيادة وانقاص المحاذاة بين الشفرات والجهة اليسرى بدلاً من زر المسافة.

3- ملخص لأهم الشفرات المستخدمة في لغة HTML

الشفرتين الملونتين بالأخضر مرتبطتين ببعض وسأذكر طريقة عملهم باختصار..
في بعض صفحات الانترنت ، تكون الصفحة طويلة جداً وتحتوي على عدة عناوين ونقاط، للتسهيل على القارئ يفضل وضع قائمة بالمحتويات في أعلى الصفحة وفي حالة الضغط على أحد العناوين الموجودة في القائمة سينزل المتصفح مباشرة إلى العنوان الذي ضغطنا عليه. لرؤية مثال مباشر على هذه الطريقة زوروا هذا الرابط:
http://aoum150.wordpress.com/2009/08/08/javascript_lesson

لو أخذنا عنوان المقدمة كمثال ، فأنا ذهبت إلى عنوان “المقدمة” – وليست الكلمة الموجودة في قائمة المحتويات – ووضعت عليها علامة باسم introduction ، فأصبح الكود الخاص بها بهذا الشكل:

<a name=”introduction”>المقدمة</a>

الآن انتهيت من الخطوة الأولى وهي وضع علامة في المكان الذي أريد أن أنتقل إليه. الخطوة التالية هي الذهاب لكلمة “المقدمة” الموجودة في قائمة المحتويات ، ومن ثم أضع عليها رابط ينتقل إلى المكان الذي وضعت فيه العلامة قبل قليل ، بهذا الشكل:

<a href=”#introduction”>المقدمة</a>

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

نصيحة:
في العلامات وأسماء صفحات HTML لاتستعملوا المسافات قدر الإمكان ، واستعملوا بدلاً منها – dashes أو _ underscores.

4- التعليقات والملاحظات :

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

التعليقات في هذه اللغة نكتبها بالطريقة التالية:

<!– هذا الكلام لن يظهر في المتصفح وسيعتبر تعليق أو ملاحظة –>

5- عيوب لغة HTML :

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

6- مقدمة عن لغة XML :

كلمة XML هي اختصار لـ eXtensible Markup Language ، وهي لغة تم ابتكارها لتساعد على تخطي عيوب لغة HTML. فهذه اللغة قادرة على معرفة محتويات صفحات الانترنت ، وبالتالي تستطيع أن تعطي محركات البحث والمتصفحات معلومات كافية عن صفحات الانترنت.
فمثلاً لو كان لدينا موقع لبيع الكتب ، طبعاً كل كتاب سيحتوي على معلومات كثيرة مثل: اسم الكتاب ، اسم الكاتب ، سعر الكتاب ، دار النشر ، تاريخ الطبعة ، عدد الصفحات ، وغيرها. لو استعملنا لغة HTML لوحدها في تصميم هذا الموقع ، فإن محركات البحث لن تستطيع أن تميز بين اسم الكتاب وبين اسم المؤلف على سبيل المثال ، أو بين سعر الكتاب وبين عدد صفحاته. لكن عن طريق لغة XML أصبح بإمكان المتصفح ومحركات البحث التمييز بين أسعار الكتب وبين عدد صفحاتها والأرقام الأخرى التي تتعلق بها ، وبالتالي أصبحت نتائج البحث حالياً أكثر دقة وفعالية ، حيث أصبحت قادرة على وضع مقارنة بين الأسعار وخيارات لترتيب الكتب حسب حداثتها وغيرها من الميزات الأخرى.

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

للمعلومية، المنهج ذكر بأننا غير مطالبين بتعلم تفاصيل هذه اللغة:

“You are not expected to learn the details of XML.”
Source: M150, Unit 4, Section 6, Page 54

تمَّ بحمد الله
أتمنَّى أن أكون وفِّـقت في شـرح هـذه اللغـة الجـميـلـة بـبـسـاطـة وسهـولـة.
في حال وجود أخطاء إملائية أو قواعدية أو في الشرح أتمنى أن تعذروني وتبلغوني عنها حتى أقوم بتصحيحها.
أخوكم المعتصم

Moore’s law
قانون مور

جوردون مور هو أحد مؤسسي شركة إنتل المختصة بتصنيع المعالجات وتطويرها
جوردون مور توقع في عام 1968 بأن عدد الترانزستورس transistors الموجودة في المعالجات سيتضاعف في كل سنة

بعدها لاحظوا بأن عدد الـ transistors صار يتضاعف كل 18 شهر !!
عشان كذا نلاحظ ان المعالجات صارت قوتها وسرعتها تتشاعف في فترات قصيرة، مايمدينا نشتري كمبيوتر فرحانين فيه وبقوة معالج الا وينزل كمبيوتر قوة معالجه تكون الضعف تقريباً!

لاحظوا أسماء المعالجات الحديثة من انتل
core due
core 2 due
core quad due

quad يعني رباعي
ولاحظوا متى تم انتاج كل نوع.. كلها في فترات متقاربة

Open System Interaction – OSI

عملية تنقل البيانات في الشبكات تمر في سبعة مراحل أو طبقات ، هذه السبع مراحل تسمى OSI مودل

الأخت علو الهمة جزاها الله خير نقلت شرح له في هذا الموضوع:
http://www.aoua.com/vb/showthread.php?t=164123

باختصار، البيانات تمر عبر سبع مراحل، وهي:

1- physical layer
ويختص بالأشياء والأجهزة المحسوسة، مثل الكيابل والتوصيلات وغيرها

2- data link layer
تحتوي على البروتوكلات التالية:
CAN bus, ATM, StarLAN, LocalTalk, HDLC

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

3- Network layer
* تقوم بتعيين العناوين وطرق إرسال الـ packets
الـ packet هو جزء من الرسائل اللي نرسلها عن طريق الشبكة، بمعنى ان الرسائل يتم تجزئتها إلى أكثر من packet ومن ثم يتم تجميع هذه الـ packets عند الطرف المستقبل
* هذه المرحلة أو الطبقة تقوم باستلام طلبات من طبقة الـ transport (الرابعة) وتقوم بطلب خدمات من طبقة data link (الثانية)
* PDU اختصار لـ Protocol Data Unit يسمى في هذه الطبقة Packet

4- Transport layer
* أحد البروتوكلات الموجودة في هذه الطبقة هو TCP Transmission Control Protocol
* هذه المنطقة يتم فيها تصحيح البيانات واستعادتها والتحكم بتدفقها
* هذه المرحلة أو الطبقة تقوم باستلام طلبات من طبقة الـ session (الخامسة) وتقوم بطلب خدمات من طبقة network (الثالثة)
* PDU اختصار لـ Protocol Data Unit يسمى في هذه الطبقة Segment

5- Session layer
* أحد بروتوكولات هذه الطبقة هو NetBIOS
* يقوم بإنشاء طلبات الاتصال، ومسؤول عن الأمن Security و الـ authentication
* مثل الطبقات السابقة، يقوم باستلام طلبات من الطبقة اللي فوقه (السادسة) ويطلب خدمات من الطبقة اللي تحته (الرابعة).
* PDU اختصار لـ Protocol Data Unit يسمى في هذه الطبقة Data

6- Presentation layer
* في هذه الطبقة يتحدد كيف يتم عرض البيانات في الكمبيوتر، هل تعرضها بصيغة gif مثلاً أو jpeg ؟
* مثل الطبقات السابقة، يقوم باستلام طلبات من الطبقة اللي فوقه (السابعة) ويطلب خدمات من الطبقة اللي تحته (الخامسة).
* PDU اختصار لـ Protocol Data Unit يسمى في هذه الطبقة Data

7- Application layer
هذه أعلى طبقة، يتم في هذه الطبقة إنشاء أو ترجمة البيانات وتحويلها إلى معلومات، وتتم أيضاً عمليات التشفير وفك التشفير في هذه الطبقة.

الجزء الثاني:

ردة فعل الناس على التقنية

يصنف الناس لثلاثة أصناف بناء على ردة فعلهم على التقنية:

١- المتفائلين the optimists
هؤلاء يرون الآت والتقنية على أنها أشياء تساعد على تحرير البشر من الأعمال الشاقة (مثل الحفر) أو الأعمال الروتينية المملة (مثل تصنيع السيارات) وتساعدهم على زيادة القدرة الإنتاجية
بشكل عام ينظرون للكمبيوتر نظرة إيجابية على انه مفيد للحياة للبشرية
المتفائلين “بزيادة” يسمون technophiles

٢- المتشائمين the pissimists
يرون بأن التقنية تقلل من حرية الأفراد لأنها تزيد من قدرة الحكومة على مراقبة الناس (مثلاً عن طريق الجوال)
وينظرون للكمبيوتر نظرة تشاؤمية بشكل عام زنهم لايرون منه إضافة للحياة البشرية
المتشائمين “بزيادة” يسمون technophobes

٣- الواقعيين the realists
يرون بأن التقنية تساعدهم على زيادة الكفاءة في الإنتاج والعمل، ولكن كفاءة الكمبيوترات والتقنية محدودة بسبب طبيعتها الرقمية وبسبب عدم فهمنا لمشاكلنا ولأنفسنا بشكل كافي :s
يعني هم الناس اللي ينظرون للكمبيوتر بشكل متوسط، مفيد في أشياء وخطر في أشياء أخرى

Captology

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

* كل مازادت معرفة الشخص بالكمبيوتر، كل ماقلت ثقته فيه أو في النواتج اللي تطلع منه.
* كل ماقلت معرفة الشخص بالكمبيوتر، كل ماقلت ثقة الشخص فيه. (لو جبنا شخص من البادية غير متعلم، ماينفع نقول له الكمبيوتر يقول ان مجموع مصاريفنا على الإبل في السنة تساوي مليار، ماراح يقتنع لأنه مايعرف وش هذا الكمبيوتر اللي أتكلم عنه ووش يقدر يسوي)
*طيب مين اللي يثق فيه أجل؟؟ … اللي يثقون في الكمبيوتر بشكل كبير هم عادة اللي معلوماتهم ومعرفتهم عنه متوسطة، مو كبيرة ولا قليلة.

الـ captology هو العلم أو الدراسة اللي تهتم باستخدام الكمبيوتر كوسيلة اقناع بحيث يتم التأثير على تصرفات الناس عن طريقه
وهي اختصار لـ Computer As Persuasive Technology

الجزء الثالث:

ماهي المشاكل اللي ممكن تحدث في الكمبيوتر وتطبيقاته ؟

- الاتكالية والمخاطرة:
الآن أصبحنا نعتمد على الكمبيوتر تقريباً في كل شيء، من استثمار، وطيران، وطب، وتعليم، وغيرها
اذا حصلت مشكلة في الكمبيوتر أو أحد برامجه، احتمال كبير أن تتعطل أشياء كثيرة في حياتنا، أو ممكن يؤدي إلى الإفلاس (في حال تعطل سوق أسهم) أو إلى الموت لاقدر الله (في تعطل كمبيوتر الطائرة) أو إلى تأجيل الاختبار لليوم الثاني (في حال انقطاع الكهرباء عن الجامعة العربية )

- hardware failure:
مثل خراب الأجزاء الداخلية للكمبيوتر من معالج أو هارد دسك أو محول الطاقة .. أو خراب الأقمار الصناعية بسبب اشعاعات كونية .. أو خراب أي شيء آخر يتعلق بالكمبيوتر لأي سبب كان (والأسباب كثيرة)

- مشكلة برمجية، مثل التي حدثت عام 2000 (المبرمجين في السابق لم يفكروا بأن التواريخ ستتغير من خانتين 99 إلى أربع خانات 2000 وكانوا يخافون وقتها بأنه ستحدث كارثة في برامج الشركات لأنهم لايعرفون كيف سيتعامل البرنامج مع هذا التغير بالأخص البرامج المالية وبرامج الملاحة، حتى انهم كانوا يحذرون من ركوب الطائرات في ذاك الوقت)

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

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

- صعوبة التجارب:
اذا كان النظام كبير، وهذا النظام الكبير يدخل في عمل بيئة كبيرة، سيكون من الصعوبة تجريب النظام واختباره، وبعض الأحيان سيكون هذا الشيء مستحيل، ولكن ممكن أن يتم تجربة واختبار جزء صغير من النظام فقط.

- Inadequate Models
بمعنى عدم اكتمال النماذج، في برامج المحاكاة اللي يتم عملها على الكمبيوتر، تمثيل هذه البرامج للحياة وللواقع يكون محدود وبسيط، لأن مصمم البرنامج سيقوم بتصميمه لأغراض معينة تتعلق بالهدف من هذا البرنامج. فلذلك تكون هذه البرامج غير آمنة ودقيقة بشكل كبير لأنها غير مطابقة للواقع.
مثال على هذه البرامج، مثلاً ألعاب السيارات اللي تكون على البلي ستيشن ، أو برامج تعليم الطيران (لايوجد مباني مرتفعة مثلاً) وغيرها

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

maintenance هي عملية التعديل والتغيير على النظام بعد الانتهاء منه ومعناها صيانة

توجد ثلاث أنواع maintenance

1- corrective maintenance
وهي لتصحيح الأخطاء الموجودة في النظام

2- perfective maintenance
وهي لتحسين أداء النظام وتطويره
لا توجد أخطاء في هذا النوع، فهو مجرد الرغبة في جعل النظام أفضل

3- adaptive maintenance
هذا النوع نقوم فيه بالتعديل على النظام لأننا مطالبين بإضافة خصائص جديدة تتناسب مع المتطلبات ومع البيئة

ماهي الأشياء التي لايستطيع الكمبيوتر القيام بها؟

- ليس كل شيء قابل للقياس، ولكن …
يعني بأنه ليس كل الأرقام التي يتم ادخالها ومعالجتها عن طريق الكمبيوتر من الممكن أن تعطينا نتائج صحيحة

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

- models لاتشبه الحياة الواقعية
وهذي شرحتها قبل شوي في فقرة Inadequate Models

- لايستطيع الكمبيوتر أن يحل محل البشر (بالروبوتات)
المقصد هنا بأن الكمبيوترات (الروبوتات) لايمكن أن تعمل مثل الإنسان، لأن الروبوت يتم برمجته على أشياء معينة ومحددة يمشي عليها، ولكن الإنسان لايمشي على مثل هذه القوانين المحددة

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

- أنه لايستطيع فهم اللغة الطبيعية للبشر
في هذه النقطة يقول بأنه لايستطيع الكمبيوتر أن يتواصل معنا (البشر) بنفس الطريقة اللي نتواصل فيها مع بعض (البشر مع بعض)

ماهي الأشياء التي لايجب على الكمبيوتر القيام بها؟

- إزالة البشر من دورة التحكم في المعلومات (information loop)

- أن تستبدل علم البشر وخبراتهم

- أن تأخذ دور الإنسان

Ethics and computing
الأخلاقيات وعالم الكمبيوتر ..

الأخلاقيات تعني تقرير أو تحديد ماهو الشيء الصحيح الذي يجب عمله بغض النظر عن أي ظرف خارجي يؤثر على القرار

* في مجتمع الشبكة العالمية (الانترنت) يجب أن تكون هناك قوانين وأنظمة مثل أي مجتمع آخر حتى لايكون المجتمع فوضوي وعشوائي.

* cyberspace هو المجتمع العالمي المرتبط ببعضه البعض عن طريق شبكات الكمبيوتر

* المبرمج يستطيع ببرامجه أن يحدث نتائج جيدة أو مؤذية، أو من الممكن أن يسمح للمستخدمين بأن يعملوا أشياء جيدة أو مؤذية بواسطة برنامجه.

* توجد عشر أوامر (أو أسس) لأخلاقيات استخدام الكمبيوتر Ten Commandments of Computer Ethics، درسناها في البارت الأول .. عشان كذا ماراح أعيدها.

* Terms of Service Agreement هي شروط الاستخدام، يجب الموافقة عليها عند الرغبة بشراء منتج أو خدمة من شركة معينة
هذي موجودة في كل مكان في النت، مثل اذا جينا نسجل في منتدى بنلقى شروط لازم نحط صح اننا موافقين عليها، واذا جينا نسوي ايميل نفس الشي، وموجودة حتى في غير النت.
هذي الشروط لازم نقرأها عشان نعرف الأشياء المسموح لنا نعملها (الأشياء اللي تعتبر صحيحة أخلاقياً) والأشياء اللي ممنوعة وممكن تتسبب في الغاء الاتفاقية أو حتى تعريضنا للعقوبة من الجهات الرسمية.

لذلك توجد ثلاث أقسام أخلاقية تعتبر كدليل لمستخدمي الكمبيوتر ومبرمجيه:
١- Personal morality
الأخلاق الشخصية: وهي الأخلاقيات الطبيعية والمبادئ التي تربينا عليه. مثل: عدم الكذب، عدم السرقة، عدم الغش، … الخ

٢- Profession morality
أخلاق العمل أو المهنة: وهنا يلتزم الناس بأن لايؤدوا أعمال من الممكن أن تتسبب في إيذاء الآخرين.

٣- Software development morality
أخلاقيات تطوير وعمل البرامج: يجب أن يلتزم المبرمج بأن يكون عمله والمنتج النهائي جودتها عالية.

في النهاية رجع تكلم عن captology مرة ثانية (تم شرحها في الوحدة 16)
الشيء الوحيد اللي لفت نظري هو ..

القاعدة الذهبية للإقناع .. The Golden Rule of Persuassion
القاعدة: لاتقم بإقناع شخص أو أشخاص لعمل شيء، أنت لن تقتنع به إذا حاول الغير إقناعك به.
(يعني لا ترضا للغير مالا ترضاه لنفسك)

هذي هي النقاط اللي لفتت نظري في هذا الجزء

الوحدة 15:

الجزء الأول: مقدمة نظرية بسيطة

Morality
المبادئ الأخلاقية لدى الشخص، والتي يقرر على أساسها الصح من الخطأ

Ethics
الاختيار بين التصرفات التي تعتبر صحيحة أو خاطئة وفقاً للمبادئ الأخلاقية

بالنسبة لي، لغوياً كل الكلمتين لها نفس المعنى وهو الأخلاق أو المبادئ الأخلاقية، بس هذي تعاريفها الموجودة في المنهج

كان مستخدمي الانترنت في بداياته يرون الانترنت على انه منتدى يمكن أن نقول فيه أي شيء (سواء كان جيد أو سيء)

الجزء الثاني: كلام نظري بسيط

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

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

الجزء الثالث:

Spam

أحياناً السبام يسمى UCE اختصاراً لـ Unsolicited Commercial Email بمعنى الإيميلات التجارية الغير مرغوب فيها
وأيضاً تسمى Junk email
باختصار هي رسائل البريد المزعجة التي تأتي للبريد الالكتروني بدون طلب ورغبة من صاحب البريد

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

ماذا تتضمن رسائل السبام عادةً ؟
- ادعاءات بأنه يمكنك تحقيق المال بسهولة
- عروض وهمية لقروض بفوائد منخفضة
- عرض برامج لتجميع عناوين بريد الكتروني (مافهمت هالنقطة :s)
- عرض حصص أسهم في شركات جديدة وغير معروفة
- منتجات طبية وعلاجية
- برامج مقرصنة غير شرعية

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

* أغلب الناس لايحبون رؤية هذه الرسائل ولافتحها، لذلك أصبح السبامرز يستملون بعض الحركات لجعل المستخدم يفتح الرسائل، أمثلة على هذه الحركات:
- جعل العنوان لايدل على انه عنوان لرسالة إعلانية أو دعائية.
- وضع مسافات بين أحرف الكلمات في العنوان أو استعمال كلمة ترحيب متعارف عليها في العنوان مثل hi ، حتى لايقوم فلتر السبام بحذف الرسالة تلقائياً ونقلها إلى مجلد الرسائل المزعجة.
- انتحال الشخصية البريدية لشخص أو شركة معروفة. (مثل الرسائل التي تأتي من عنوان مايكروسوفت وهي رسائل مزعجة)

Cookies

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

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

* الكوكيز لاتستطيع إيذاء الكمبيوتر الخاص بك. ولا تقوم بإرسال معلومات سرية لأي طرف ثالث.

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

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

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

Data flow
تدفق البيانات
يقصد به عملية تجميع المعلومات من مصادر مختلفة، ودمجها والتعديل عليها، وعادة يتم إرسالها إلى الغير لأهداف تجارية.

trusted third parties and key escrow

شركات بطاقات الائتمان تعتبر طرف ثالث موثوق فيه. فالمشتري يثق في أن شركة بطاقة الائتمان ستقوم بالدفع للبائع نيابة عنه. والبائع يثق في أن شركة بطاقة الائتمان تملك المال الكافي لاعطائه مستحقاته. وشركة الائتمان تثق في المشتري بأنه سيقوم بدفع هذا الدين في وقت لاحق.

Key escrow
درسنا في الوحدة 14 بأن المفتاح الخاص private key لايصح أن يعرفه أحد غير صاحبه فقط!
لكن في بعض الحالات، هذا المفتاح يجب أن يعطى للشرطة أو لجهة حكومية بغرض التحقيق أو غيره، ونحن نثق بأن مثل هذه الجهات هي جهات موثوقة ولاخوف منها.
عملية إعطاء المفتاح الخاص لمثل هذه الجهات الموثوقة تسمى key escrow

The Clipper Chip

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

هذا المعالج يحتوي على ثلاث خصائص:
١- كل معالج له مفتاح يتكون من 80-bit خاااص به. يعني لايوجد معالجين لهم نفس هذا المفتاح. ويسمى هذا المفتاح بـ unit key.
٢- يوجد مفتاح يسمى family key هو نفسه في جميع المعالجات.
٣- كل معالج له رقم تسلسلي خاااص به

باختصار كل المعالجات تحتوي على family key متشابه.
وكل معالج يحتوي على unit key و serial number خاااص به.

الـ unit key يتم تقسيمه إلى نصفين، ويتم إرسال كل نصف إلى جهة مختلفة (حتى يضمن الخصوصية ولاتستطيع أي جهة فك تشفير الرسائل بمفردها)

عملية التشفير عن طريق هذا المعالج:
١- أول شيء عندما يرغب طرفين بالتواصل مع بعض، يتم إنشاء مفتاح اسمه session key ويحتفظ كل طرف بهذا المفتاح.
٢- بعدين يقوم المرسل بتشفير الرسالة عن طريق الـ session key

ركزوا في الخطوتين الجاية ..

٣- بعدها يقوم المعالج للطرف المرسل (الـclipper chip) بتشفير الـ session key بالـ unit key الخاص به
٤- بعدها يتم إضافة بعض المعلومات على الـ session key (اللي تشفر في الخطوة السابقة) وبعدين يتم تشفير هذا الناتج عن طريق الـ family key اللي يشتركون فيه جميع المعالجات

الناتج من الخطوة الأخيرة يسمى LEAF اختصار لـ Law Enforcement Access Field

الآن النتيجة عندنا شيئين، رسالة مشفرة (من الخطوة الثانية) والـ LEAF (من الخطوة الرابعة)

- الآن يقوم المرسل بإرسال الرسالة المشفرة والـ LEAF إلى الطرف الآخر
عادة المستقبل يشتقبل الرسالة المشفرة فقط (بدون الـ LEAF)

- يقوم المعالج الخاص بالمستقبل (clipper chip) بفك تشفير الرسالة عن طريق الـ session key الذي تشاركوه في أول خطوة. ومن ثم يتم التخلص من هذا المفتاح.

طيب الحين وش فائدة الـ LEAF اللي سويناه ؟؟؟؟
فائدتها هي انه إذا مثلاً الشرطة حبت تعرف محتوى رسالة ما ، لازم تحصل على هذا الـ LEAF وتفك تشفيره عن طريق الـ family key

يعني عملية إنتاج الـ LEAF يقوم بعملها المرسل للرسالة وهي كالتالي:
١- session key
٢- تشفير الـ session key بواسطة unit key
لدينا الآن session key مشفر
٣- تشفير الـ session key المشفر عن طريق الـ family key
الآن نتج لدينا الـ LEAF (عبارة عن session key مشفر مرتين)

وعملية تفكيك الـ LEAF تتم عن طريق المباحث أو الشرطة للحصول على الـ session key الأصلي اللي يستطيع فك تشفير الرسالة وهي عكس عملية الانتاج:
١- فك تشفير الـ LEAF عن طريق الـ family key

الآن لدينا الـ session key المشفر، عشان نحصل على الـ session key الأصلي لازم نحصل على الـ unit key
ومثل ماذكرت فوق كل clipper chip له unit key خاص فيه ، والـ unit key يتم تقسيمه لنصفين ويتم حفظ كل نصف لدى طرف مختلف لضمان الخصوصية.
فالآن الشرطة ممكن تأتي بأمر من المحكمة أو أي أمر رسمي وتقدمه للطرفين اللي عندهم أجزاء الـ unit key عشان تقدر تحصل عليه

٢- بمجرد حصولهم على الـ unit key يقومون بفك تشفير الـ session key المشفر عن طريقه لينتج الـ session key الأصلي وعن طريقه يستطيعون فك تشفير الرسالة

أووف والله معقدة
ان شاء الله تكون وضحت

عموماً هذا الشيء البثر المسمى بـ clipper chip ، انتهى من الوجود لأن الناس عارضته واعتبروه مخالف لحقوق الإنسان، بالإضافة إلى انهم اكتشفوا انه ممكن فك تشفير الرسائل بدون الحاجة للـ unit key اللي أزعجونا فيه

Owning and Controlling Information
السيطرة والتحكم في المعلومات

بعض الأسباب التي تجعل الناس يرغبون بنشر المعلومات:
- لكسب المال، مثلاً عن طريق بيع المعلومات لمن يهمه الأمر.
- هواية (وباللهجة المحلية لقافة )
- لعمل إعلان لمنتج أو خدمة لشركة أو شخص معين.
- للتشهير بشخص.

Trade Mark
العلامة التجارية هي عبارة قانونية تعني بأن اسم أو شعار أو عبارة مسجلة بأنها تخص شركة معينة ولا يمكن استعمالها عن طريق أي جهة أخرى.

العلامات التجارية يجب أن تسجل لدى الجهة المعنية (وزارة التجارة مثلاً) ويجب أن يتم تجديدها كل فترة، ويجب الدفاع عنها قانوناً.

في بداية الانترنت، بعض الناس قاموا بحجز أسماء نطاقات لشركات كبيرة، وأيضاً لأسماء قرى ومدن وعوائل وأسماء كبيرة، بهدف أن يقوموا ببيع هذه النطاقات على أصحابها بمبالغ مالية كبيرة.
هذه العملية تسمى cyber-squatting

المقصود بالنطاقات هو مثلاً www.aoua.com

Digital Piracy
القرصنة الرقمية

انتشرت القرصنة الرقمية أكثر من الـ analogue لأن النسخ الرقمية جودتها مشابهة للنسخة الأصلية بعكس الـ analogue
مثلاً اذا قمنا بتسجيل شريط كاسيت عادي ستكون النسخة جودتها أقل من النسخة الأصلية
لكن اذا قمت بعمل نسخ لملف mp3 وقمت بلصقه في مكان آخر ستكون جودة النسخة الجديدة نفس الأصلية

MP3 يسمى صديق القراصنة لأنه سهل عليهم عمليات نسخ الملفات الصوتية بشكل غير شرعي
mp3 اختصار لـ Moving Picture expert group audio layer 3
ممكن يجي بشكل سؤال اختيارات عن الـ layer الخاص بالـ mp3
والإجابة هي layer 3

كيف نحسب كم عدد الـ bits اللي نحتاجها لتخزين ثانية صوتية واحدة على cd ؟

لازم نعرف بأن الـ frequency rate في الـ cd هو 44100 نموذج (في الثانية)
كل نموذج يتكون من 16 bit
والنموذج يكون خاص بسماعة وحدة بس (بعد شوي توضح) يعني اذا بنستخدم سماعتين 2 channels أو stereo بنضرب في 2

إجابة السؤال بتكون 44100 ضرب 16
عشان نعرف كم بت نحتاج لتخزين صوت لمدة ثانية على cd
لكن هذا اذا كان لسماعة وحدة (يعني الصوت راح يشتغل في سماعة وحدة بس)
اذا نبغا على سماعتين نضرب النتيجة في 2
اذا نبغا على الأنظمة المتطورة خمس سماعات مثلاً نضرب في خمسة وهكذا

يعني النتيجة بتكون
= 44100 * 16 * 2
= 1411200 bits

طيب لو قال ان فيه cd يحتوي على 74 دقيقة صوتية .. كم عدد الـ bits اللي مخزنة على هذا السي دي؟

لازم نفهم الفكرة الأساسية ..
الحين احنا عرفنا بأن في الثانية الصوتية الواحدة بنحتاج لـ 1,411,200 بت
أول شي نسويه للحل هو تحويل الدقائق الـ 74 إلى ثواني
فنضرب 74 في 60 وبيطلع الناتج 4440 ثانية
يعني الـ 74 دقيقة تساوي 4440 ثانية

بعدين نضرب عدد الثواني في عدد الـ bits اللي نحتاجها لكل ثانية (نتيجة السؤال اللي قبل)
يعني = 1411200 * 4440
= 6,265,728,000 bits

لو طلب في السؤال الـ byte بدل bits
نحل بنفس الطريقة وبعد مانعرف الbits نقسمها على 8
لأن البايت يحتوي على 8 بتس

فيه بعض المسائل الرياضية تختص بفقرة الـ digital piracy ياليت تتطلعون عليها من السلايدات واذا فيه وحدة غير واضحة اسألوني عنها وان شاء الله بشرحها

Compression

عملية ضغط الملفات فائدتها هي تقليل حجم الملف وتسمى lossless compression ومثال عليها الضغط بنوع zip أو rar

يمكن زيادة ضغط الملف عن طريق التخلص من بعض المعلومات، وهذه الطريقة تسمى lossy algorithms
وهذه مستخدمة في الصور من نوع jpeg لتقليل حجم الصور عن طريق التخلص من بعض البكسلات والألوان التي لاتؤثر تأثير كبير على جودة الصورة وتساعد على تقليل حجمها

mp3 هو مثال على lossy algorithms
لأنه يقوم بحذف الموجات الصوتية المنخفضة جداً أو العالية جداً والتي لايؤثر حذفها على جودة الملف الصوتي
وأيضاً في حالة تواجد صوتين في نفس الوقت، طبيعة الإنسان ستجعله يستمع للصوت الأعلى، فالـ mp3 سيحذف الصوت الواطي لأنه لن يؤثر على الجودة.

هذه العملية تسمى perceptual encoding

الملفات الصوتية الموجودة على cd اذا تم تحويلها إلى mp3 سينخفض حجمها إلى عشر (واحد على عشرة) حجمها الأصلي

ripper هو برنامج يساعد على تحويل الأغاني والصوتيات الموجودة على السي دي إلى نوع mp3

Napster

هو برنامج لمشاركة ملفات الـ mp3
طريقته هو انه يبحث في الكمبيوتر الخاص بالمستخدم عن ملفات mp3 ثم يبحث عن بيانات هذه الملفات (مثل اسم المغني واسم الأغنية وغيرها) ثم يضيف في قاعدة البيانات بأن هذه الأغنية لهذا المغني موجودة عند هذا المستخدم
إذا قام شخص آخر بالبحث عن هذه الأغنية سيبحث البرنامج في قاعدة البيانات ثم سيجد بأنها موجودة لديك، وسيتأكد بأنك متصل بالانترنت، اذا كنت متصل يستطيع الطرف الثاني من تحميل الأغنية من جهازك.

هذه العملية تسمى file sharing أو file swapping
هذا البرنامج هو مثال على peer-to-peer network بمعنى ان الاتصال في هذا البرنامج يتم بين المستخدمين بشكل مباشر بدون الحاجة إلى سيرفرات

FreeNet

* هو برنامج أو نظام يساعد أي شخص يريد إرسال معلومات بأن يخفي هويته
* الملفات الخاصة بفري نت لايمكن مشاهدتها عن طريق متصفح الويب العادي (مثل انترنت اكسبلورر)
* لمشاهدة الملفات الخاصة بفري نت يجب تحميل برنامج خاص نستطيع من خلاله قراءة الملفات والبحث في الملفات الخاصة بالنظام
* كل ملف يتبع لهذا النظام له رقم تسلسلي خاص به يسمى GUID اختصاراً لـ Global Unique Identifier
* اذا أراد المستخدم البحث عن ملف معين، يقوم البرنامج بالبحث عن الرقم التسلسلي GUID الخاص بهذا الملف.
* يعني لو ملف معين خاص بالنظام تغير مكان تخزينه، النظام مايتأثر، لأن رقمه التسلسلي هو نفسه والنظام يحتاج بس للرقم التسلسلي عشان يبحث عن الملفات.
* يوجد شيء اسمه node بمعنى عقدة أو نقطة تقاطع الشبكات، كل node يحتوي على أرقام تسلسلية لملفات فري نت بالإضافة لجدول يحتوي على بقية النقاط nodes والأرقام التسلسلية اللي تحتوي عليها. يعني الآن البرنامج بيبحث عن رقم 222 على سبيل المثال ، راح يذهل لأقرب node في الشبكة وعشان يحدد وين مكان الملف صاحب هذا الرقم، لو ماكان الملف موجود في هذا الـ node راح يشوف في الجدول اللي يحتوي على بقية الـ nodes ومحتوياتها عشان يعرف وين يروح لأي node
* جدول الـ nodes ومحتوياتها يسمى routing table بمعنى جدول التوجيه. لأنه يوجه البرنامج للمكان اللي يبغا يوصل له.
* إذا تمت إضافة ملف فري نت جديد للنظام، يتم تشفير محتويات هذا الملف ومن ثم يتم توزيع رقمه التسلسلي على عدة nodes في النظام.
* فري نت هو مثال على شبكة peer-to-peer

Digital Rights Management – DRM
إدارة الحقوق الرقمية

هذا المفهوم يعني بأن صاحب أو منتِج أي شيء رقمي (كتاب ، ملف صوتي ، ملف مرئي .. الخ) يستطيع التحكم بكيف ممكن أن يستخدم الناس منتجه
مثال عليه (غير موجود في المنهج) ، شركة أبل تبيع أغاني عن طريق برنامج iTunes الخاص فيها، هذي الأغاني كانت محمية بالـ DRM ، والحماية تمنع أي شخص يشتري أغنية عن طريق البرنامج بأنه ينقل الأغنية لكمبيوتر آخر أو لعدة أجزة آي بود وغيرها.
قبل شهر أو شهرين أعلنوا أبل بأن الأغاني ستكون DRM free بمعنى انهم سيزيلون الحماية التي كانت موجودة

أكثر تقنية تستعمل هذا المبدأ هي SDMI اختصاراً لـ Secure Digital Music Initiative
وهي خاصة بحماية الأغاني والملفات الموسيقية

Digital Watermarks
الـ digital watermark هي لحماية حقوق أصحاب الملفات الرقمية (أياً كان الملف) ، يعني أصحاب الصور نلقاهم يحطون اسمهم أو شعارهم على الصورة ، وأصحاب الكتب نلقاه حاط اسمه على الصفحات أو إيميله على كامل الصفحة مثل ملخصات المهندس أيمن

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

لذلك ال digital watermarks لتقنية SDMI تكون عبارة عن بيانات bits مدموجة مع الـ bits الخاصة بالملف. وطبعاً لا يمكن رؤيتها بشكل مباشر، ولكن يمكن الحصول عليها عن طريق برامج متخصصة.

SDMI استعملت نوعين watermarks في كل ملف:
1- الأول اسمه the robust watermark
وهذا لا يتأثر من عملية ضغط الملفات أو فك الضغط أو تغيير امتداد الملف أو نسخ الملف إلى عدة كمبيوترات
2- اسمه the fragile watermark
وهذا يختفي في حالة ضغط الملف أو نسخه أو التعديل عليه

* اذا حاولنا تشغيل ملف صوتي (أغنية مثلاً) تحتوي على حماية SDMI ولكن ملف الأغنية لايحتوي على fragile watermark لن تشتغل الأغنية.
يعني اذا اشتريت أنا أغنية محمية بهذي التقنية وبعدين قمت بنسخ الأغنية لكمبيوتر ثاني (هنا راح يختفي الووتر مارك الثاني لأني سويت نسخ) مشغل الأغاني (مثل برنامج آي تونز) ماراح يشغل هذي الأغنية لأنه عرف انها منسوخة أو تم قرصنتها.

* بعض مشغلات الأغاني القديمة (البرامج القديمة) لم يتم برمجتها وتعريفها على هذه التقنية، فممكن أن نقوم بتشغيل هذي الأغاني المنسوخة عليها.

* المنظمة اللي صممت هذي التقنية كانت واثقة من كفاءتها بشكل كبير، فقاموا بعمل تحدي مع البرمجين في شهر سبتمبر عام 2000 يتحرونهم انهم يزيلون الـ watermark من الملفات.
* في شهر أكتوبر عام 2000 (بعد شهر) قدروا المبرمجين يشيلون الـ watermark خخخخخ

*طبعاً في حالة القدرة على إزالة الـ watermark راح يكون الملف غير محمي وممكن نشغله في أي مكان وزمان.

* مايكروسوفت قامت بإضافة خاصية DRM لبرنامج ويندوز ميديا بلاير، وتفكر بإضافتها إلى جميع نسخ ويندوز المستقبلية.
* هذا المشروع يسمى Next-Generation Secure Computing Base (NGSCB)
* ويهدف هذا المشروع للسماح لأصحاب البرامج بالتحكم في كيفية معالجة المعلومات عن طريق برامجهم
* بمعنى لو تم تطبيق هذا المشروع على نظام الويندوز، لن نصبح قادرين على تشغيل برنامج غير مصرح لنا باستخدامه (لم نشتريه مثلاً) ، يعني الويندوز راح يراسل موقع البرنامج للتأكد من أني مرخص لاستعمال البرنامج أو لأ

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

الوحدة 14: Security

الجزء الأول:

crackers: هم ناس يبحثون عن ثغرات أمنية، عادة لأغراض إجرامية

Hackers: هم ناس لديهم مهارات برمجية عادةً يستخدمونها بشكل نظامي وشرعي

يعني غلط اننا نقول الهاكرز يخترقون أجهزتنا وهم اللي يسوون كراكات للبرامج
المفروض نقول كراكر …

بعض المخاطر الأمنية:
1- False authority syndrome

2- list linking

3- roll your own credit cards

4- web attack

5- money transfer

6- internet worm

الجزء الثاني: التشفير

cryptography هي ببساطة دراسة أو علم إخفاء الكتابة إلى كتابة غير مفهومة

steganography هو القيام بتغيير مظهر الشيء (المحسوس) إلى مظهر آخر حتى نخفيه

plain text هو النص الأصلي الطبيعي قبل التشفير

cipher text هو نص مشفر

encryption هي عملية تحويل النص العادي إلى نص لايمكن فهمه إلا عن طريق معرفة طريقة التشفير

decryption هي عملية إرجاع الكتابة المشفرة إلى صيغتها الأصلية والطبيعية

symmetric key encryption
نفس مفتاح التشفير يستخدم في فك التشفير

asymmetric key encryption
يوجد مفتاحين في هذي الطريقة، مفتاح للتشفير ومفتاح لفك التشفير

التشفير بطريقة قيصر Caesar cipher encryption

طريقة قيصر تتكون من 25 مفتاح (بعد شوي نعرف ليه 25) ، لو نبغا نشفر مثلاً كلمة aou بمفتاح واحد، راح نزيد كل حرف فيها بواحد
يعني الa تصير b .. وال o تصير p وال u تصير v

يعني اذا بنشفر كلمة aou بمفتاح واحد بطريقة قيصر بتصير الكلمة بعد التشفير bpv

طيب اذا بنشفرها بمفتاحين؟
الـ a تصير c .. والـ o تصير q .. والـ u تصير w

يعني كلمة aou بعد التشفير بطريقة قيصر بمفتاحين تكون cqw

طبعاً لازم نكون عارفين الأحرف الانجليزية وترتيبها عشان نعرف نشفر أو نفك التشفير بهذي الطريقة!

طيب لو كان المطلوب العكس .. يعطينا كلمة مشفرة بطريقة قيصر ويطلب مننا نفكها .. في هذي الحالة راح ناخذ الكلمة المشفرة ونضيف عليها مفتاح وبعدين مفتاحين وبعدين ثلاثة … حتى نوصل للمفتاح 25 .. يعني راح نكتب 25 كلمة وبعدين ندور على كلمة من ضمن الكلمات اللي كتبناها تكون معروفة ولها معنى

مثلاً لو قال الكلمة cqw هي كلمة مشفرة بطريقة قيصر Caesar cipher .. المطلوب فك شفرة الكلمة
طيب أول شي احنا عرفنا اننا لازم نضيف 25 مفتاح على الكلمة المشفرة عشان نكتب كل الاحتمالات، وبعدين نقرر ايش هي الكلمة قبل التشفير
فنبدأ بإضافة مفتاح على الكلمة، فتصير drx
نضيف مفتاح ثاني، فتصير esy
تكملة الحل في هذا الجدول:

لاحظي ان الكلمة الأساسية عندها صفر، يعني ماغيرنا فيها شي .. بعدين كل مازدنا مفتاح، كل حرف راح ينتقل للحرف اللي بعده
أسهل طريقة لكتابة مثل هالجدول، هو اننا نمسكها حرف حرف، يعني الحين أنا جيت للحرف الأول c بعدين جلست أكتب الحروف في العمود الخاص فيه بسرعة d e f g h i j k l m n o p q r s t u v w x y z
وبعده انتقلت للحرف الثاني وسويت نفس الشي، وبعدين الثالث

لاحظي في الجدول يوم وصلنا للمفتاح 26 اننا رجعنا للكلمة الأساسية اللي جنبها 0
لأننا كذا مرينا على كل الأحرف ورجعنا من جديد
فعشان كذا المفتاح 26 هو كأننا نقول الكلمة ماتتغير
ولو قلنا مفتاح 27 بيصير كأننا نزيد مفتاح واحد، لأن كلهم نفس النتيجة مثل ماهو واضح في الجدول
ومفتاح 28 يعني كأننا نقول مفتاح 2 لأنها نفس النتيجة

عشان كذا عدد المفاتيح في هذي الطريقة هو 25 بس
لكن احتمال انهم يقولون لنا مفتاح أكثر من 25 .. وفي هذي الحالة راح نطرح الرقم من 26 (عدد الأحرف) عشان نعرف كم المفتاح الصحيح
يعني مثلاً مفتاح 28 اذا طرحنا منه 26 الناتج بيكون 2

نرجع للمثال .. الحين كتبنا كل الاحتمالات للكلمة قبل التشفير
نجي نشوف الكلمات اللي تكونت عندنا وناخذ الكلمة المفهومة واللي لها معنى
وفي حالتنا الكلمة هي aou عند المفتاح رقم 24

مثال ثاني، لو قال الكلمة spwwz هي كلمة مشفرة بطريقة قيصر ، المطلوب فك شفرة الكلمة
أول شي نسويه اننا نكتب كل الاحتمالات مثل هذا الجدول:


طبعاً المفتاحين 26 و 27 ماله داعي نكتبها، بس أنا كتبتها هنا عشان أوضح لكم ليه عدد مفاتيح الطريقة هو 25 بس

عاد الكلمة قبل التشفير بخليها عليكم تمرين

هذا التشفير سهل الكسر ، ومعرفة الكلمة المشفرة مسألة وقت فقط

one-time pad
بصراحة ماعرفت كيف أشرحها
بس الأمثلة اللي في سلايدات الأستاذة جمانة واضحة فيها ان شاء الله

enigma machine

هذي مكينة معقدة، وظيفتها تشفير وفك تشفير الكلام بطريقة معينة معقدة (يحددها مستخدم المكينة) ، المكينة هذي كانوا يستخدمونها الألمانيين في الحرب العالمية الثانية في تشفير رسائلهم، فكانوا مسوين لهم كتاب يسمى code book في داخل هذا الكتاب توجد طريقة إعداد المكينة عشان تقدر تفك تشفير الرسائل الخاصة بالجيش الألماني
طبعاً هذا يدل على ان فك التشفير صعب جداً بعكس الطريقة الأولى، والعدو راح يصعب عليه انه يفك تشفير رسائل الألمان بواسطة المكينة لأنه مايعرف الإعدادات اللي هم يستخدمونها، فما فيه طريقة لفك تشفير هذي الرسائل الا اذا قدر العدو انه يسرق نسخة من كتاب الـ code book وهذا اللي صار مع الألمان في الحرب العالمية الثانية

هي تعتمد على symmetric key بمعنى ان مفتاح التشفير هو نفسه مفتاح فك التشفير
ولكن مفتاح التشفير في هذي الآلة معقد لأن الkey يتم ضبطه في الآلة بطريقة معقدة
هذي الطريقة تكون مكتوبة في كتاب اسمه code book كل الطرفين يكون عندهم نسخة منه

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

Data Encryption Standard (DES)
هو نوع تشفير تم تطويره من قبل شركة IBM و وكالة الأمن الوطني لحكومة الولايات المتحدة عام 1976
التشفير في هذه الطريقة يعتمد على مفتاح واحد للتشفير وفك التشفير symmetric key

brute force attack هو عبارة عن ادخال النص المشفر في الكمبيوتر، وسيقوم الكمبيوتر بتجربة كل المفاتيح المحتملة لفك التشفير حتى يحصل على نتيجة لها معنى
عن طريق هذه الطريقة تم فك تشفير النص المشفر عن DES

تستعمل هذه الطريقة أسلوبين للتشفير وهي:
1- تبديل أماكن الأحرف، يعني كلمة hello تخليها مثلاً بالعكس olleh
2- إضافة مفتاح قيصر لتشفير النص بعد تبديل أماكن الأحرف، مثلاً يتم تشفير الناتج من الخطوة الأولى بمفتاح واحد.

وتسمى أساليب التشفير في هذه الطريقة: permutation, swapping and function application

جميع طرق التشفير المذكورة في الأعلى تستعمل نفس المفتاح للتشفير ولفك التشفير symmetric key، وهذا سبب في ضعفها وعدم فعاليتها
لأن بمجرد معرفة المفتاح نستطيع فك التشفير

لذلك تم ابتكار طرق تشفير من نوع asymmetric key
هذا النوع طريقته كالتالي:
لنفرض ان لدينا شخصين محمد وعبدالله يريدون تبادل رسائل مشفرة حتى لايراها أحد غيرهم
يأتي محمد عن طريق برنامج معين (المتصفح في حالة SSL) ويقوم بإنتاج مفتاحين “مرتبطين ببعض” مفتاح عام public ومفتاح خاص private
بعدها يرسل محمد المفتاح العام لعبدالله عن طريق أي وسيلة (لا يهم اذا اطلع عليه أحد)
يأتي عبدالله بهذا المفتاح ويقوم بتشفير الرسالة التي لديه عن طريق المفتاح العام public key اللي أرسله محمد
وبعدين يرسل الرسالة المشفرة لمحمد
بعدها محمد يفك شفرة الرسالة عن طريق المفتاح الخاص الموجود عنده والمرتبط بالمفتاح العام

المفتاح الخاص مافيه أحد يطلع عليه غير الشخص اللي يبغا يفك التشفير

وممكن بعدين محمد يشفر رسالة بواسطة المفتاح الخاص private key وعبدالله يفك تشفير الرسالة عن طريق المفتاح العام public key

RSA هي طريقة للتشفير وتعتمد على طريقة المفتاحين العام والخاص asymmetric key

لو كانا نرغب في عمل تشفير لصفحات انترنت مثلاً وحجمها كان كبير جدّاً ، يفضل استعمال نوع DES بدلاً من RSA

لأن الأول يستعمل في تشفيره مفتاح واحد بعكس الثاني ، وبالتالي الوقت والموارد الحاسوبية (المعالج والذاكرة وغيرها) المستهلكة في التشفير عن طريق DES ستكون أقل بكثير من RSA وبالتالي سيكون DES أكثر فعالية للاستخدام في مثل هذه الحالات.

الجزء الثالث:

SSL (Secure Sockets Layer)
هذا التشفير هو الشائع في عالم الانترنت
يستعمل كل النوعين symmetric و asymmetric keys
الـsymmetric key يستعمل مرة واحدة فقط

SSL أكثر كفاءة من RSA

كيف نعرف اذا الموقع اللي دخلناه يستعمل تقنية ال SSL للتشفير ؟
فيه طريقتين:
الأولى، عنوان الصفحة اللي في المتصفح راح يتغير إلى https بدلاً من http الموجود في المواقع العادية
الثانية، هي ظهور صورة قفل صغير في أسفل المتصفح
وممكن تظهر رسالة في بعض المتصفحات تخبرنا بأن الصفحة التي دخلناها هي صفحة آمنة

Digital Signature
هذا شرحي لها من مناقشة الواجب:

أول شي خلونا نتعرف على التوقيع الالكتروني (digital signature)
التوقيع الالكتروني هو عبارة عن توقيع الكتروني ، فايدته انه يقوم بتعريف الناس في الشبكات الالكترونية، يعني مثل التوقيع العادي مهمته تعريف الشخص (كل شخص يتميز بتوقيع خاص) ، التوقيع الالكتروني نفس الشيء.

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

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

على سبيل المثال ملخص الرسالة بشكل بسيط ممكن يكون عبارة عن عدد جميع أحرف الرسالة، أو عدد الأرقام الموجودة في الرسالة، أو عدد الرموز الموجودة مثل (!❊#$٪^& الخ)

الطريقة الأولى المذكورة في السؤال راح يكون ملخص الرسالة (message digest) عبارة عن اما كلمة true أو false
يعني احتمال كبير جداً ان رسائل كثيرة فيها راح يكون فيها الـ message digest نفسه، وبالتالي ماراح تكون آمنة في هذي الطريقة أبداً لأن تمييز أصحاب الملفات فيها عن بعض ماراح يكون دقيق وفعّال

الطريقة الثانية وهي حساب عدد مرات تكرار حرف a في الرسالة ، وهذي الطريقة أكيد آمن من الطريقة الأولى لأن احتمال تواجد رسالتين يحتوون على نفس عدد مرات تكرار حرف a فيها قليل مقارنة مع الاحتمال اللي في الطريقة الأولى

فالطريقة الثانية هي الآمن ، لأن الطريقة الأولى احتمال 50% ان رسالتين يملكون نفس الmessage digest لكن الثانية الاحتمال أقل بكثير، وبالتالي راح يزيد أمنها عن الأولى، لأنها تساعد على تمييز الرسائل عن بعض بشكل أكبر

لازم الكلام اللي نكتبه يوضح للمصحح اننا فاهمين فكرة الdigital signature و الـ message digest
فاللي ماستوعبها أنصحه يرجع للكتاب ويقرأ عنهم في الوحدة 14 صفحة 25 و 26

Digital Certificate
هي شهادة رقمية تقدمها منظمة موثوق فيها (عادة تكون منظمة حكومية أو رسمية) تثبت فيها صحة شخصية الموقع
يعني مثلاً راح تشهد ان موقع amazon.com هو صحيح ويتبع للشركة التجارية المعروفة
غالباً هذي الشهادة تكون عبارة عن بانر صغير موجود في الصفحة الرئيسية في المواقع الغير مشهورة، عشان يخلون الناس تثق فيهم وتتعامل معهم

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

الفايروول يقدم مرحلتين حماية للسيرفرات
1- عن طريق الراوتر (الاسم كامل screening router) ويتم في هذي المرحلة ماهي وحدات البيانات التي سيسمح بمرورها سواء من السيرفر إلى الانترنت أو العكس
2- bastion host وعادة يسمى proxy gateway
بصراحة مافهمت الثانية 100% لذلك أعتذر عن شرحها

SET (Secure Electronic Transaction)
هو standard في أمن المعلومات ، وظيفته حماية معلومات البطاقات الائتمانية في التجارة الالكترونية

مميزاتها:
1- Security of data
معلومات صاحب البطاقة ومعلومات عملية الدفع تكون سرية عن طريق تشفيرها بطريقة DES

2- Integrity of data
تستعمل ملخصات الرسائل message digest للتأكد من ان الرسائل لم يتم التعديل عليها أثناء الانتقال من طرف لآخر

3- Cardholder Authentication
تستعمل الشهادات الرقمية digital certificate للتأكد من أن صاحب البطاقة هو صاحبها ولديه حساب فعّال

4- Merchant Authentication
تستعمل الشهادات الرقمية للتأكد من شخصية الموقع التجاري ، وللتأكد من انه يقبل البيع بواسطة بطاقات الائتمان

الجزء الرابع:

المشاكل الأمنية والتي لايفيد فيها التشفير:

1- Denial of Service Attack
هذي الهجمة تم شرحها في الأعلى ولكن بطريقة أخرى
الآن شرحها يقول هو عبارة عن برنامج يقوم باستهلاك ذاكرة الجهاز بشكل كبير حتى يتوقف عن الاستجابة
كل الشرحين لهم نفس المعنى، الشرح الأول بيتم استهلاك الذاكرة عن طريق عدد كبير من الإيميلات، والثاني عام شوي لكن كلهم نفس المعنى

2- Viruses
لها ثلاث أنواع:
- executable viruses
- data viruses
- start-up file viruses

3- Non technical Attacks
الهجمات الغير تقنية، مثل تخمين الباسوورد أو أي طريقة مالها علاقة بالأشياء التقنية

بعض الحلول للثغرات الأمنية الغير تقنية:
- التأكد من أن الدخول للمبنى أو للمكان الذي يحتوي على معلومات سرية غير ممكن لغير المصرح لهم.
- عدم رمي المخلفات التي تحتوي على معلومات سرية مع المخلفات العامة، مثلاً الأوراق المكتوب فيها بيانات سرية يتم تمزيقها بواسطة آلات خاصة.
- التأكد من أن العاملين يستخدمون أرقام سرية آمنة.

الجزء الخامس: الانترنت غير آمن

Spams
هي رسائل البريد المزعجة والغير مرغوب فيها
مرسلي السبامز يستعملون برامج تسمى address harvesters تقوم بدخول مواقع الانترنت وتحفظ الإيميلات الموجودة فيها وبعدين يقومون بإرسال رسائل إعلانية لهذي الإيميلات

Scams
اللي فهمته منها انها تكون على شكل هرمي

privacy violations
انتهاك الخصوصية، المواقع اللي يزورها المستخدم تقدر تجمع عنك معلومات كثيرة مثل نوع نظام التشغيل و الصفحة اللي أتيت منها والصفحة اللي انتقلت لها بعدها وبعض المعلومات التقنية الأخرى

بعض الاحتياطات لاتقاء خطورة الانترنت:

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

انتهينا من الوحدة 14 ولله الحمد
اعذروني على الأخطاء الإملائية ان وجدت، مافيه وقت أراجعها

الوحدة 13:

الجزء الأول:

Sensational computing
استخدام حاستي السمع واللمس في تمثيل المعلومات

Digital Divide
هو فجوة المعلومات الموجودة بين الدول المتقدمة والدول النامية
يعني ان الدول المتقدمة لديها تقنية معلومات قوية تساعدها على الحصول على المعلومات بشكل سهل وسريع
والعكس لدى الدول النامية
الفرق بين توفر المعلومات في الدول المتقدمة والنامية هو المقصود بالـdigital divide
أو ممكن نقول ان سكان المدن يستطيعون الوصول للمعلومات بشكل أسهل وأسرع من سكان البادية بسبب عدم توافر وسائل الاتصالات في البادية

أيضاً ممكن يكون من الأسباب اللي تؤدي لهذه الفجوة هو الفقر أو ارتفاع أسعار الكمبيوترات أو غيره
أو عدم توفر الكهرباء لدى بعض المناطق
وبعض الدول النامية تكون لغاتهم ليس لها قواعد لكتابتها (يعني اللغات تنطق بس ولكن لا تكتب) وهذا سبب في عدم قدرتهم على التواصل عن طريق شبكات المعلومات
وبعض اللغات لا يدعمها الكمبيوتر، وهذا من ضمن الأسباب اللي تؤدي لمثل هذه الفجوة

Simputer (Simple Inexpensive Multilingual People’s Computer)
Simple يعني بسيط
Inexpensive يعني رخيص الثمن
Multilingual يعني متعدد اللغات
people’s computer يعني كمبيوتر لكل الناس

هذا الجهاز (السمبيوتر) هو حل لسد مثل هذه الفجوة (الـdigital divide)
هذا الجهاز من صنع وتطوير علماء ومهندسين من الجنسية الهندية
الهدف من صنع هذا الجهاز، هو لمساعدة الناس في الدول النامية و “الغير متعلمين” بأن يستطيعوا المشاركة في عصر المعلومات
هذا الجهاز يقوم بقراءة صفحات الانترنت “بالصوت” باللغات الهندية حتى يستطيع من لايعرف القراءة أن يشارك في عصر المعلومات
تم استعمال نظام تشغيل linux في السمبيوتر حتى يكون سعر الجهاز رخيص لأن لينكس هو نظام تشغيل مفتوح المصدر

السمبيوتر يحتوي على شيء اسمه IML اختصاراً لـ Information Mark-up Language
الـ IML هو اللي يقرر ماهو النص اللي يجب قراءته في الصفحة، وكيف يتم عرض الصفحة على السمبيوتر
IML هو من تطبيقات الـ XML

الجزء الثاني: Speech Audio Interfaces

أهمية الواجهات الصوتية:
١- تساعد الذين لايستطيعون القراءة
٢- تساعد الذين لايستطيعون الرؤية “العميان”
٣- تساعد في حالة عدم تواجد الكيبورد ، أو في حالة عدم قدرة العين على قراءة مافي الشاشة

Speech recognition
هو عملية التعرف على الكلام بواسطة الكمبيوتر

فوائده:
1- dictation
بمعنى الإملاء: تحويل الكلام “الصوتي” إلى نص مكتوب

2- computer control
بمعنى التحكم بالكمبيوتر: التحكم بالكمبيوتر وبرامجه عن طريق أوامر صوتية

دورة تحويل الكلام الصوتي إلى نص مكتوب:
1- المايك يقوم بالتقاط الصوت ويقوم بتحويل الموجات الصوتية إلى analogue signal
2- يتم تحويل الanalogue signal إلى موجة رقمية digital signal بواسطة Analogue to digital converter الموجود في الكمبيوتر
3- يتم تقسيم الموجة الرقمية إلى كلمات; اذا كانت الموجة منخفضة يعرف الكمبيوتر بأن هذا المكان هو فاصل بين الكلمات
4- يتم التعرف على الكلمات بواسطة نظام التعرف على الصوت speech recognition system

speech recognition is NOT a speech understanding
أتوقع تجي صح وخطأ
بمعنى التعرف على الصوت لايعتبر فهم للصوت والكلمات

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

عيب الـcommon sense انه يحتاج لملايين من المعلومات والأوامر البرمجية وطاقات كمبيوتر عشان تعمل بالشكل الصحيح

Speech synthesis
هو القدرة على نطق الكلمات والأحرف

يتم عمل هذا الشيء عن طريق تخزين كلمات كثيرة بشكل منفصل، وبعدين يتم تركيبها وتكوين جمل منها على حسب الحاجة
مثال: عند الاتصال ب961 “على أيامه” كان يعطينا الساعة والدقيقة والثانية بالصوت

توجد ثلاث أساليب تستعمل لإنتاج الصوت:
1-phonemes
عبارة عن نطق كل حرف على حده، وبعدين يتم جمع نطق كل الأحرف لتنتج الكلمة.
هذا مشكلته ان نطق الكلمة ماراح يكون سلس لأنه تقريباً بتكون فيه فواصل “بسيطة” بين الأحرف

2- diphones
هنا النطق راح يكون من منتصف الحرف إلى منتصف الحرف اللي بعده
فائدة هذا النوع ان النطق بيكون سلس لأن الفواصل بين الأحرف راح تختفي

3- model-based speech synthesis
هذا النوع شبيه بنطق الإنسان، لأنه يعمل محاكاة لكيفية نطق الإنسان للكلمات. وهو أكثر نوع متقدم ومتطور بين الأنواع الثلاثة

الجزء الثالث:

أقسام الصوت (غير الكلام):
الموسيقى – أصوات التنبيه – أصوات التحذير – أصوات مزعجة

1- Music
sampling: هو عبارة عن تحويل الـ analogue sound إلى digital
الأصوات الرقمية يتم تخزينها على cd أو بصيغة mp3

التسجيل على الـcd يتميز بـ higher fidelity
التسجيل بصيغة mp3 يتميز بحجم صغير

طريقة أخرى لتخزين وتعديل الموسيقى هي عن طريق استخدام واجهة MIDI اختصار Musical Instrument Digital Interface

باختصار، أي شيء له علاقة بالآلات الموسيقية من تسجيل أو تعديل أو تشغيل أو غيره، يتم عن طريق midi

الجزء الرابع:
التعرف على الكتابة handwriting recognition

الصعوبات في التعرف على الكتابة:
1- تعدد اللغات، كل لغة لها نظام مختلف سواء في اتجاه الكتابة (يمين يسار أو يسار يمين) أو غيره
2- كل شخص يكتب الحرف بشكل مختلف عن الآخر
3- بالنسبة للأشخاص، التمييز مثلاً سهل بين رقم 5 وحرف الـ S ، لكن توجد صعوبة في برمجة الكمبيوتر للتمييز بينهم
4- الإنسان يعتمد على البديهة أثناء القراءة، فنحن مثلاً لانتوقع أن يتواجد رقم 5 في وسط كلمة ولكن هذا شيء صعب بالنسبة للكمبيوتر

وسائل وطرق لتسهيل عملية التعرف على الكتابة:
1- وضع قوانين للحد من كثرة الأحرف والأشكال التي يمكن استخدامها، مثلاً نقول بأنه مسموح الكتابة بالأحرف الكبيرة فقط (للغة الإجليزية)
2- أن يتم كتابة كل حرف في مربع ، يعني يتم تقسيم مكان الكتابة إلى مربعات، نكتب في كل مربع حرف حتى يسهل على الكمبيوتر التعرف على كل حرف بسهولة
3- عدم الكتابة أحرف متصلة مع بعض

تقنية شبكات الخلايا العصبية هي حل لهذه المشاكل، أغلب أنظمة التعرف على الكتابة تستعمل هذه التقنية
باختصار هي عبارة عن أوامر برمجية تحاول تقليد ومحاكاة خلايا النظام العصبي لدى الإنسان
هذه التقنية تحتاج للتدريب، فعندما تكون إجابتها خاطئة يتم إعادة المحاولة حتى تنتج إجابة صحيحة

أحد الأمثلة على هذه التقنية هو Newton messagePad التي أنتجته شركة أبل عام 1993
توجد ميزتين في هذه التقنية: ١- لاحاجة لتغيير خطك. ٢- ستتعلم مع الوقت طريقة كتابتك
اذا كتب المستخدم كلمة، سيحاول النظام البحث عن كلمة مطابقة في القاموس الخاص بالنظام، اذا وجدت مطابقة ستعتمد الكلمة، وإذا لم تجد كلمة مطابقة يستطيع المستخدم أن يضيف ماكتبه إلى القاموس الخاص بالنظام حتى يتعرف عليها النظام مستقبلاً

المشكلة الموجودة في هذا النظام، هي أن مثل هذه الأنظمة التي تعمل على الأجهزة الكفيّة pocket pc تحتاج إلى ذاكرة تخزين عالية وتحتاج إلى معالج سريع وقوي
وفي حال توفير ذاكرة عالية ومعالج قوي سيتم استهلاك بطارية الجهاز بشكل سريع

الحل لهذه المشكلة هو Glyphs أو وحدات الكتابة
شركة palm عملت نظام تعرف على الكتابة اسمه graffiti يعتمد على نظام وحدات الكتابة glyphs
المستخدم يحتاج أنه يتعلم على النظام عشان يقدر يستخدمه

شرح النظام بصراحة غير واضح في المنهج بالنسبة لي، عشان كذا بأكتفي بهذي المعلومات ، وان شاء الله انها كافية

الجزء الخامس:
Tangible computing
هي التعامل مع المعلومات بشكل حسّي، مثل أجهزة الـPDA ممكن تعرض لنا المعلومات وممكن نتحكم أو نعدل على المعلومات بواسطة اللمس مثلاً

Gesture computing
هي عملية فهم حركات جسد المستخدم من قبل الكمبيوتر
وهي غالباً تكون في حالة الحاجة لاستخدام الكمبيوتر بدون تواجد الكيبورد والشاشة أو في حالة “الصم والبكم”
الهدف منه هو تصميم نظام يستطيع التعرف على لغة الإشارة للصم والبكم
تصميم مثل هذا النظام صعب، بعض الحلول لتجواز الصعوبة:
1- ان المستخدم يلبس قفازات خاصة، تساعد الكمبيوتر على تمييز اليد من الخلفية اللي وراء اليد
2- ان يلبس المستخدم حساسات على يده تساعد الكمبيوتر على معرفة مكان اليد وحركاتها واتجاهاتها

كل النظامين السابقين يسمون haptic computing
الـhaptic computing ثنائي الاتجاه، بمعنى ممكن يكون human to computer interaction أو computer to human interaction

توجد أبحاث هذه الأيام تحاول عمل نظام يتعرف على حركة العين

Ubiquitous Computing
مفهوم يعني بأن الكمبيوترات ستكون منتشرة بشكل كبير وستصبح صغيرة جداً واستخداماتها كثيرة وستكون غير مرئية بالنسبة للمستخدم

الوحدة 12:

User Interface – UI
واجهة المستخدم

واجهة المستخدم هي الغلاف الخارجي اللي يغطي شغل المبرمج وأكواده بشكل جميل ولطيف
مثلاً الويندوز واجهة المستخدم فيه تحتوي على سطح المكتب ومجلدات مرتبة وشكلها يفتح النفس

واجهة المستخدم الجميلة، هي اللي تساعد المستخدم على تنفيذ مهامه بسهولة وسرعة وفعالية عالية.

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

مثال على أضرار واجهات الاستخدام السيئة:
- في أحد الدول حدث عطل في مضخات المياه، وبسبب سوء واجهة استخدام النظام، لم يستطع العاملون التعرف على السبب، وكاد أن ينفجر أحد المفاعلات النووية بسبب هذا الخلل.

- موقع boo.com لبيع المنتجات الرياضية، كان تصميم الموقع سيء جداً وصعب الاستخدام، وبالتالي خسر عملاءه، وبعد 6 شهور فقط أغلق نشاطه التجاري.

HCI اختصاراً لـ Human and Computers Interaction هي دراسة عن كيفية تفاعل البشر مع الكمبيوتر وتطبيقاته. وهي تخبرنا بكيفية بناء واجهات استخدام تكون: سهلة ، وكفاءتها عالية، وآمنة، واستخدامها يكون ممتع، وبالتأكيد تكون تعمل!

* المستخدم يتواصل مع الكمبيوتر عن طريق واجهة المستخدم UI

* يعني واجهة الاستخدام تعتبر وسيط بين الكمبيوتر والمستخدم.

* مماسبق نستنتج بأن أكثر شيء يهم المستخدم في النظام هو واجهة الاستخدام. لأنه لايهتم بمايحدث في داخل النظام. فالنظام بالنسبة للمستخدم هو واجهة المستخدم UI.

تتميز واجهات المستخدم الجيدة بالتالي:
- أن تكون سهلة الاستخدام.
- أن يكون فهمها سهل من قبل المستخدم.
- أن تلبي متطلبات المستخدمين للنظام.
- أن تدعم المستخدمين في المهام التي يريدون تنفيذها.

* مصمم واجهات الاستخدام الممتاز، دائماً يفكر بالمستخدم واحتياجاته ورغباته، وليس برغباته الشخصية. ويهتم بسهولة استخدام Usability الـ UI بالنسبة للمستخدم.

ما المقصود بسهولة الاستخدام Usability ؟
يقصد بها النظام الذي يسمح للمستخدم أن يحقق أهداف معينة في مجال استخدام معين عن طريق تحقيق الثلاث عوامل التالية:
effectiveness – Efficiency – Satisfaction

Effectiveness : يقصد بها أن يتم تحقيق الأهداف والمهام بشكل كامل ودقيق
Efficiency : يقصد بها الموارد المستخدمة من قبل النظام في سبيل تحقيق الأهداف
كل ماقلت الموارد المستخدمة .. كل ماكان النظام أفضل، والموارد يقصد فيها مثلاً استهلاك ذاكرة الجهاز أو البطارية (لو كان برنامج للجوال) أو غيرها.
Satisfaction : يقصد بها مدى رضا وراحة المستخدم في استخدام النظام

* سهولة استخدام Usability النظام يقصد بها سهولة استخدام الـ UI أو واجهة استخدام النظام.

* المنظمات اللي تعتمد على الكمبيوتر في عملها، صعوبة استخدام النظام poor usability ممكن تؤدي إلى تقليل انتاجية المنظمة، وعدم رضا الموظفين، وغيرها من المشاكل الكثيرة.

* مدى سهولة أو صعوبة استخدام النظام في أي منظمة، يحدد مدى كفاءة وانتاجية هذه المنظمة. بمعنى كل ماكان النظام سهل الاستخدام كل مازادت كفاءة المنظمة وإنتاجيتها.

* لايقصد بسهولة الاستخدام الواجهات الفخمة أو الفلاشية أو غيرها، يعني سهولة الاستخدام Usability لاتعتمد على المنظر الخارجي وشكل للنظام.

User-centered Design

لتصميم واجهة مستخدم UI جيدة ، يجب أن نعرف أربع أشياء هامة:
- من هم المستخدمون الذين سيستخدمون النظام.
- ماهي خبرات المستخدمين؟
- ماهي المهارات التي يمتلكونها؟
- ماهي أهدافهم أو المهام التي يريدون تحقيقها من خلال استخدام النظام.

إذا كانت واجهة النظام التي سنصممها ستكون بديلة لواجهة نظام سابق (مثل تغيير تصميم موقع) يجب أن نعرف المعلومات التالية:
- ماهي توقعات المستخدمين؟
- كيف يقوم المستخدم في النظام القديم بتحقيق أهدافه؟
- كيف سيؤثر النظام الجديد على تحقيق أهداف المستخدمين ومهامهم؟

User Interface Design Principles
مبادئ تصميم واجهة المستخدم

UI widgets هي عبارة عن كل شيء موجود في واجهة المستخدم، مثل القوائم والأزرار والرسائل التنبيهية والأيقونات وغيرها

توجد سبع مبادئ لتصميم واجهات الاستخدام:

1- Visibility
هذا المبدأ يعني، أن نجعل عمل وفائدة كل عنصر من عناصر واجهة المستخدم واضحة عند رؤية العنصر.
مثال: الريموت الخاص بالفيديو نقدر نعرف زر التشغيل عن طريق العلامة اللي تشبه المثلث الموجودة فوق الزر، ونقدر نعرف رز الإيقاف بنفس الطريقة.

2- Feedback
يعني هذا المبدأ، أن نقوم بتوضيح مالذي قمنا بعمله بعد استخدام أي عنصر من عناصر واجهة المستخدم.
مثال: عند الضغط على أي زر في الجوال، نسمع صوت تنبيه صغير يخبرنا بأننا ضغطنا على الزر.

3- Affordance
معناه، أن نجعل فائدة استخدام كل عنصر واضحة للمستخدم.
مثال: عندما نرى في الويب كلمات لونها أزرق وتحتها خط نعرف بأن الضغط عليها سينقلنا إلى صفحة ويب أخرى.

4- Simplicity
جعل الأشياء بسيطة بأكبر شكل ممكن
مثال: توجد أزرار لعملية حفظ الملف أو فتح ملف جديد في كل البرامج في مكان واضح. لأن هذه العمليات هي من العمليات الشائعة لدى المستخدمين فمن المفترض أن نجعلها واضحة وسهلة الوصول.

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

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

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

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

Recoverability
التعافي من الأخطاء

الـ error recovery ينقسم لقسمين
backward error recovery و forward error recovery

backward error recovery مثال عليه هو إذا جينا نسجل مستخدم جديد في المنتدى وكتبنا اليوزر والباسوورد لكن نسينا نكتب إيميل
اذا ضغطنا على زر إتمام التسجيل راح يرجعنا لنفس الصفحة وبنلاقي مكتوب انه لم يتم تعبئة جميع البيانات وبنلاقي علامة عند مكان الإيميل عشان نعرف وين الخطأ
هذا معناه انه ماحولنا على طريقة ثانية للتسجيل ولكنه رجعنا ورنا ونبهنا على الخطأ اللي صار

forward error recovery لو افترضنا ان نظام المنتدى بدل مايرجعنا لنفس الصفحة ويوضح لنا الخطأ اللي صار فتح لنا صفحة جديدة على الهوت ميل يطلب مننا نسوي تسجيل دخول في الإيميل واذا تم تسجيل الدخول بنجاح المنتدى راح يكمل عملية التسجيل بالإيميل اللي دخلنا فيه في الهوت ميل
هنا النظام مارجعنا للصفحة نفسها ولكنه حولنا للهوت ميل عشان يقدر يعرف الإيميل الخاص فينا ويستعمله في التسجيل

شكلي بدال ما أوضحها عقدتها أكثر بهالأمثلة اللي مثل وجهي

Visual Representation of Data

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

عملية أخذ المعلومات بهذه الطريقة (عن طريق الرسومات البيانية) تسمى information visualization

الكتابة النصية هي أكثر طريقة متعارف عليها لعرض المعلومات لأنها الطريقة الطبيعية.

لذلك يجب علينا أن نجعل النص قابل للقراءة Readable ، و سهل القراءة Legible

قابل للقراءة readable تعني بأن نختار نوع نص واضح (مثل arial) ونجعل حجم الخط مناسب للشاشة (لا يكون كبير جداً ولا صغير جداً)

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

أنواع الرسومات البيانية:
1- line graph

2- bar chart

عبارة عن أعمدة أو bars وكل عمود يمثل شيء مختلف. هذا النوع يستعمل إذا أردنا المقارنة بين أكثر من شيء، مثل انتاجية موظفين.

3- pie chart

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

عموماً تحديد نوع الرسمة المستخدمة يعتمد بشكل كبير على الهدف من الرسمة. يعني لازم نعرف الغرض من الرسمة عشان نقدر نحدد أي نوع هو المناسب.

في الرسومات البيانية توجد ثلاثة أشياء:
1- data-ink
هي أهم شيء في الرسمة البيانية، وهي الجزء الذي يساهم في تحويل البيانات إلى معلومات كما هو مطلوب.

2- non-data ink
هي عكس الأولى، هي أي شيء في الرسمة البيانية لايضيف أي شيء مفيد للمستخدم، بل على العكس هي تشتت المستخدم عن التركيز على مايريد.

3- redundant data-ink
هو الجزء الذي يعرض بيانات، ولكنه لايضيف معلومات.

* الرسومات البيانية يجب أن تكون كلها أو الجزء الأكبر منها من نوع data-ink

Chart junk
هذا يعتبر عدو الـ simplicity لأنه يشتت القارئ عن التركيز على هدفه.
مثل:في بعض مواقع الانترنت، الخلفيات والزخرفة الزائدة أو الصور الغير مفيدة والتي لاتضيف شيء للقارئ والخطوط الغريبة والتي يصعب قراءتها.

في عملية عرض المعلومات information visualization يوجد شيئين هامين:
1- selection:
وهي عملية اختيار البيانات data الأكثر ملاءمة للقارئ ولهدفه من رؤية هذا العرض أو الرسمة.

2- representation:
وهي طريقة العرض،مثل أن يستخدم لون معين لربط الأشياء المرتبطة مع بعض وغيرها من الحركات لتسهيل تحقيق الهدف للقارئ.

Designing for the Web
التصميم للويب

توجد سبع قواعد لتصميم مواقع الانترنت:

1- إذا أردنا أن نصمم موقع، يجب أن نفكر فقط بالأشياء المفيدة للقارئ والتي تهمه. (user-centered design)

2- يجب تحديث الموقع بشكل مستمر، ويجب أن يعرف المستخدم متى آخر مرة تم تحديث الموقع.

3- القاعدة الثالثة:
consistent layou: كلما كان تصميم الموقع ثابت في جميع الصفحات، كلما زادت سهولة استخدام الموقع.

simple structure: اذا كان تخطيط الموقع بسيط، سيساعد ذلك على إبراز عناصر موقع وأقسامه بشكل أكبر.

4- قم بلفت نظر المستخدم للأشياء التي تعتقد بأنها تهمه وتفيده. ممكن عملها عن طريق الألوان أو الخلفيات أو الأيقونات أو حجم الخط.

5- يجب أن يتيح الموقع للمستخدم أن يحقق أهدافه بسهولة وبدون أخطاء.

6- يجب أن يضيف الموقع بمحتوياته شيء جديد إلى عالم الويب. لأنه لن تكون لموقعك فائدة اذا كان محتواه موجود في مواقع أخرى!

7- يجب أن تهتم بسرعة تحميل صفحات الموقع. ولتسريع تحميل الصفحات (أو فتحها) يجب أن نقوم بإزالة الصور التي لاتضيف شيء مفيد للقارئ لأنها تزيد الحجم بدون فائدة. وأيضاً أن نستبدل الصور المصغرة thumbnails بدلاً من الصور الكبيرة. والابتعاد عن استخدام الفلاش لأنه يؤدي إلى تبطيء تحميل الصفحة.

* أصعب صفحة للتصميم هي الصفحة الرئيسية، لأنها هي التي يحكم من خلالها المستخدم على موقعك.

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

عند تصميم الصفحات الداخلية interior pages للموقع يجب الانتباه للنقاط التالية:
- المعلومات يجب أنت تكون على علاقة بهدف الزائر Relevant، وموثوقة Credible ، ومفيدة Useful وجديدة أو محدثة up-to-date.
- المحتوى يجب أن يكون معروض بترتيب جميل ومنظم.
- الصفحات الداخلية يجب أن تحتوي على محتوى أكثر ، ومعلومات تعريفية بالموقع أقل.
- التنسيق يجب أن يكون ثابت (حجم العناوين والألوان ونوع الخط وغيرها).
- يجب أن تحتوي جميع الصفحات الداخلية على رابط ينقلنا للصفحة الرئيسية.
- يجب الاهتمام بالأخطاء الإملائية والقواعد بقدر الإمكان حتى لو كانت بسيطة، لأنها تقلل من جودة موقعك.

* المحتوى الهام وروابط الموقع من الأفضل أن تكون واضحة للمستخدم بدون أن يحتاج إلى النزول في الصفحة Scrolling.

* يجب أن تراعي في تصميم الموقع الناس الذين لديهم مشاكل في النظر، أحد الحلول الممكنة هي استخدام حجم أكبر للنص. شخصياً أختلف مع هالنقطة كلياً، لأن المتصفحات نفسها صارت فيها ميزة تكبير الخط، وغير كذا هم قالوا قبل شوي اننا نستعمل حجم خط مناسب (غير كبير ولا صغير!)

الوحدة 11:

Wildness

أي نظام يسمى wild إذا كان :
1- unpredictable يعني لايمكن توقع ماسيفعل
2- uncontrollable يعني لايمكن التحكم فيه
3- irrational غير منطقي أو غير عقلاني

نظام سوق الأسهم هو مثال على مثل هذه الأنظمة اللي تسمى wild

أمثلة على wildness لها علاقة بالكمبيوتر:
- الفايروسات viruses
- رسائل البريد المزعجة spams لأنه لايمكن التحكم فيها والسيطرة عليها
- الروبوتات robots لأنها أحياناً لايمكن لنا توقع ماستفعله والتحكم فيها يكون صعب أحياناً.
- الشبكات العصبية الصناعية Artificial neural networks والتي تحاكي عمل عقل الإنسان.
- اللوغاريتمات الجينية Genetic logarithms لأنها نتائجها تكون غير متوقعة.

الانترنت والويب هي أفضل مثال على wildness بسبب:
- حركة البيانات، لايمكن توقعها أو التحكم فيها ولاتعتبر منطقية.
- عملية الاتصال بين المعلومات ، والتي تعني بكيف يتم ربط صفحات الويب مع بعضهم البعض.

The Four Dimensions of Reach

- البشر يتواصلون مع بعضهم البعض عن طريق الإدراك (عن طريق الحواس الخمس) والفعل في زمان ومكان محددين.

يعني مجالات التواصل هي:
- Perception ويعني الإدراك
- Action ويعني الفعل
- Time وقت أو زمان
- Space مكان أو فضاء أو مساحة

* يعني الإدراك والفعل لابد أن يحدثوا في زمان ومكان.
* التقنية سمحت لنا بتطوير قدراتنا على التواصل، بمعنى انها زادت من قوة إدراكنا وفعلنا

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

Action
بالنسبة للفعل له نوعين:
- الأفعال التي لاتدخل فيها التقنية Technologically unaided action
في هذا النوع لايتم الاستعانة بأي آلة أو أداة في أفعالنا.

- الأفعال التي تكون بمساعدة التقنية Technologically enhanced action
مثل استخدامنا للتلسكوب لرؤية الأشياء البعيدة

Space
* التلسكوب والصواريخ ساعدتنا على الوصول للفضاء الخارجي outer space
* المايكروسكوب ساعدنا على الوصول للفضاء الصغير (فضاء المايكروبوات الدقيقة)
* الكمبيوترات ساعدت على إنشاء مساحات جديدة، مثل:
- مساحة الهارد دسك والسي دي.
- المساحات اللي تكون في البرامج. مثل برنامج إكسل.
- المساحة اللي نتجت بسبب الانترنت والويب. Cyberspace or virtual space

* الانترنت والويب يعتبرون cyberspaces ولايعتبرون virtual space

Time
مافيه شيء هام من وجهة نظري يستحق الذكر بالنسبة للوقت.
كلنا نعرف ان الوقت مهم، صح؟

Humans and Computers as Agents

* اذا أردنا حجز مقعد على طائرة للسفر، نحتاج للتواصل مع وسيط أو وكيل للسفر والرحلات، هذا الوسيط يسمى agent

* العامل المشترك بين الوسطاء، هو انهم يفعلون أشياء عن قصد لأنفسهم أو بالنيابة عن أشخاص آخرين.

* أفعال الوسطاء يمكن تنفيذها عن طريق الانترنت.

Avatars
تعريفها في الكتاب:
Avatars are computer agents that act for human agents in virtual environments.
معناها: الآفاتار هو وسيط آلي يقوم بالعمل نيابة عن الوسيط البشري في البيئات الافتراضية.

مادري أحس التعريف غير واضح صراحة، فهمي للآفاتار هو انها أشياء يستخدمها الناس في الكمبيوتر والانترنت لتمثيلهم، مثل الصور الرمزية مثلاً، الناس يحطونها كتمثيل لصورتهم.

توجد خاصيتين للوسطاء أو الوكلاء:
- Autonomy
بمعنى ان الوسيط يجب أن أن تكون أفعاله وفقاً لمبادئه الشخصية وأن تحقق أفعاله الأهداف اللي يطمح لتحقيقها أو الأهداف اللي مطالب بتحقيقها (من قبل المدير مثلاً).

- Identity
معناها الشخصية، بمعنى ان كل وسيط أو وكيل تكون له شخصية مختلفة عن الآخر.

Computing as Interaction

توجد أربع أنواع في عملية التواصل بين البشر والكمبيوتر:

- من الإنسان إلى الكمبيوتر : مثل أن يقوم المستخدم بتشغيل برنامج.

- من الكمبيوتر إلى الكمبيوتر : مثل تنبيه نظام التشغيل بأنه يجب إغلاق برنامج معين.

- من الكمبيوتر إلى الإنسان : إختفاء صفحة من الشاشة (نتيجة لضغط المستخدم على زر الإغلاق)

- من الإنسان إلى الإنسان : عملية تواصل شفهية عادية (سوالف وكلام بين الناس)

قوانين الأخلاقيات تقول: بأن مصمم البرامج لايجب أن يكون مسؤول عن عملية إيذاء أو ضرر حدث بسبب برامجه في هذه الحالات:
- إذا كان الضرر الحاصل غير مقصود من قبل المبرمج. Unintentional
- إذا كان حدوث الضرر صعب التوقع. Not reasonably predictable
- إذا كان الضرر نتيجة لسوء استخدام من قبل شخص آخر. unethical use of the computer by another

يعني في هذي الحالات الثلاثة المبرمج يعتبر بريء في حالة حدوث ضرر من برنامجه.

لكن لو مثلاً كان الضرر مقصود من المبرمج أو كان حدوثه سهل التوقع فالمبرمج يعتبر مسؤول عن الضرر الذي حصل.

Delegation
هي عملية الثقة في شخص أو كمبيوتر للقيام بمهمة معينة

Trust
هي الثقة بشكل عام. وهي تكتسب مع الوقت.
غالباً الناس يثقون في شخص حتى يستطيعون تنفيذ أشياء مهمة بالنسبة لهم.
حتى نثق في شخص يجب يكون جدير بالثقة reliable

Delegating a task to a computer is done through programming
عندما نريد إعطاء مهمة للكمبيوتر لتنفيذها، تكون عن طريق البرمجة

Universal Computer
عندما نعطيه ذاكرة ووقت كافيين وبرنامج مناسب، يستطيع محاكاة (أو تقليد) أي كمبيوتر آخر.

* نحن نعطي الكمبيوتر مهام لينفذها لأننا نثق به. ونحن نثق به لأننا نعتقد بأنه جدير بالثقة.

* الكمبيوتر هو جدير بالثقة لأنه دائماً يعطي نفس النتيجة المطلوبة منه مهما كانت الظروف.

* كلما فهمنا وتعرفنا على طريقة عمل الكمبيوتر ، كلما زادت ثقتنا فيه.

The Currency of Computing
اذا صحت الترجمة ممكن نقول: مجالات استخدام الحاسب

المجالات ممكن تكون:
- مجال لتبادل المعلومات.
- مجال لتخزين المعلومات.
- أو كوحدة قياس.

المجالات الأساسية في عالم الحاسب هي:
البيانات data
والمعلومات information

يعني عن طريق البيانات و المعلومات راح تتم عملية الاتصال بين الكمبيوتر والناس.

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

المعلومات information : هي اللي تعطينا معلومة مفيدة ، وهي تتكون من عدة بيانات data مدموجة مع بعض بحيث انها تعطينا شيء مفيد ومفهوم، مثل لو قلت 45 ريال هو سعر البترول. هذي معلومة مفيدة وتتكون من عدة بيانات.

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

- من الإنسان إلى الإنسان: الناس كيف يتواصلون مع بعض؟ ببيانات؟ ولا معلومات؟ ولا كلهم؟
أكيد نتواصل مع بعض بمعلومات، لازم تكون الجمل اللي نقولها لبعض مفهومة ومفيدة وتدل على شيء.
لذلك هنا بيكون مجال التواصل information to information

دائماً الإنسان يتعامل مع المعلومات information والكمبيوتر يتعامل مع بيانات data

فلو جينا لنوع ثاني مثل .. من الكمبيوتر إلى الإنسان .. الكمبيوتر يتعامل مع بيانات والإنسان مع معلومات، لذلك هنا بتتم عملية تحويل البيانات إلى معلومات وتسمى بالانجليزي Expansion of data into information
بمعنى توسعة البيانات إلى معلومات

والنوع من الإنسان إلى الكمبيوتر .. هنا نحتاج لتحويل المعلومات إلى بيانات، بالانجليزي contraction of information into data أو reduction of information into data
بمعنى تحليل المعلومات إلى بيانات

وفي النوع الأخير .. من كمبيوتر إلى كمبيوتر .. راح تكون العملية عبارة عن نقل بيانات إلى بيانات أخرى
Transformation of data into other data

هذي العمليات اللي ذكرتها تسمى information loop
بمعنى دورة المعلومات

Emergence
يقصد بهذا المصطلح، أي عملية ظهور جديد لظاهرة من ظواهر wildness
أمثلة عليها:
- الانترنت وعملية تنقل البيانات فيه.
- نظام البريد الالكتروني.

* البشر هم أكثر من يتسبب في ظواهر wildness .. وبسبب اتصال البشر بعالم الكمبيوتر فهو معرض لإحدى هذه الظواهر في أي وقت.
بمعنى انه ممكن يجي واحد ويسوي فايروس يتسبب مثلاً في تخريب الانترنت بشكل كامل! هذي من ظواهر wildness وسببها إنسان.

قام بكتابة هذ الموضوع .. الطالبة ][LAMAR][ من منتديات طلاب الجامعة العربية المفتوحة .. جزاها الله خيراً

الاختصارات ومعانيها – بصيغة word

الاختصارات ومعانيها – بصيغة pdf