مدونة شيفرة

مثال عن كيفية استخدام جملة switch في ++C

noreply@blogger.com (Shifra) — Thu, 29 Aug 2013 05:54:00 +0000

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

لتحميل المثال اضغط على هذا الرابط : مثال آلة حاسبة بسيطة في لغة ++C .

إذا أردت الاطلاع على الدرس المقترن بهذا المثال انتقل عبر الرابط التالي : جملة switch في لغة ++C .

جملة switch في لغة ++C

noreply@blogger.com (Shifra) — Thu, 29 Aug 2013 05:50:00 +0000

تساعدك جملة switch في اختبار حالات عديدة لمتغير معين في بلوك واحد فقط , وهي تختلف عن الجملة if..else حيث ان جملة if..else تستطيع استخدام المعاملات المنطقية في شروطها أما العبارة switch فلا تستخدم فيها المعاملات المنطقية .

في هذا الدرس سنتناول شرح تفصيلي لجملة switch ,, وقتاً ممتعاً .

قمت باعداد مثال بسيط عن كيفية استخدام العبارة switch ويمكنك الاطلاع عليه من هذا الرابط : مثال عن كيفية استخدام العبارة switch في لغة ++C .

تنسيق النصوص في CSS - الجزء الثاني

noreply@blogger.com (KB) — Fri, 23 Aug 2013 05:51:00 +0000

هذا هو الجزء الثاني من درس تنسيق النصوص في CSS , وللانتقال للجزء الاول استخدم هذا الرابط : تنسيق النصوص في CSS - الجزء الأول .

سادساً : المسافة بين الأحرف

يمكنك زيادة او انقاص المسافة بين الاحرف عن طريق الخاصية letter-spaceing ولتغيير القيم نستخدم وحدة البيكسل px وهناك وحدات اخرى لكن البيكسل اكثرها استخداماً .
لزيادة المسافة نستخدم قيمة موجبة مثل 5px أما لإنقاص المسافة نستخدم قيمة سالبة مثل 4px- , مثال :

h1 { letter-spacing: 3px; }

h2 { letter-spacing: -4px; }

بعد تطبيقك للمثال ستكون النتيجة مشابهة للصورة التالية :

ملاحظة : يمكنك استخدام هذه الخاصية مع النصوص المكتوبة باللغة العربية .

سابعاً : المسافة بين الكلمات

هذه الخاصية تشابه في عملها الخاصية السابقة حيث أنها تمكنك من التحكم بالمسافة بين الكلمات زيادتها أو انقاصها , ويمكنك فعل هذا بواسطة الخاصية word-spacing , ولتغيير القيم نستخدم وحدة البيكسل px .
لزيادة المسافة نستخدم قيمة موجبة مثل 5px أما لإنقاص المسافة نستخدم قيمة سالبة مثل 4px- , مثال :

h1 { word-spacing: 3px; }

h2 { word-spacing: -2px; }

ستصبح النتيجة مشابهة للصورة التالية :

ثامناً : المسافة بين الأسطر

تستطيع زيادة أو انقاص المسافة بين الأسطر في الفقرات بواسطة الخاصية line-height (وتعني ارتفاع السطر) , أما القيمة فتكون بوحدة البيكسل .
لزيادة المسافة نستخدم قيمة كبيرة مثل 30px أما لإنقاص المسافة نستخدم قيمة صغيرة مثل 13px, مثال :

p { line-height: 35px; }

قم بتطبيق المثال وستصبح النتيجة كالصورة التالية :

تاسعاً : تغيير اتجاه النص للعناصر Text Direction

الاتجاه الافتراضي للنصوص في الويب هو من اليسار إلى اليمين , يعني لو كتبت نصاً باللغة العربية ستجد أنه يبدأ من اليسار ويتجه إلى اليمين ولكن يمكنك تغيير اتجاه النص بواسطة الخاصية direction .
لجعل النص يتجه من اليمين إلى اليسار نجعل قيمة الخاصية direction تساوي rtl (يعني right to left) , ولجعله يتجه من اليسار إلى اليمين نجعل قيمة الخاصية direction تساوي ltr (يعني left to right) , مثال :

h1 { direction: rtl; }

h2 { direction: ltr; }

والنتيجة مشابهة للصورة :

عاشراً : إلتفاف النص في العناصر Text Wrapping

للتحكم في إلتفاف النص بداخل أي عنصر (قد يكون هذا العنصر body أو div أو textarea .. وغيرها) , يمكنك هذا بواسطة الخاصية white-space , وهي تحمل قيمتين :

الاولى : wrap

وهي القيمة الافتراضية , هذه القيمة تمكنك من جعل النص يلتف وينتقل إلى أسطر جديدة ولا يخرج عن إطار العنصر , مثال :

p { white-space: wrap; }

ستكون النتيجة كالصورة التالية :

الثانية : nowrap

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

p { white-space: nowrap; }

والنتيجة كالتالي :

مثال آخر يوضح التفاف النص بداخل عنصر textarea :

textarea { white-space: nowrap; }

والنتيجة تشبه الصورة التالية :

أحد عشر : المحاذاة العمودية Vertical Alignment

نستخدم المحاذاة العمودية عندما نضع صورة بداخل النص (مثلاً نضع الوسم img بداخل الوسم p ) عندها نحتاج إلى جعل النص محاذياً لأعلى الصورة او محاذياً لأسفلها أو محاذياً لوسط الصورة , ونستخدم في هذا الخاصية vertical-align .
ملاحظة : لا نطبق الخاصية vertical-align على النصوص!! بل نطبقها مع الصورة التي نريد محاذاة النص معها , يعني الصورة التي وضعناها بداخل النص , والأمثلة ستوضح لك أكثر :

* جعل النص محاذياً لأعلى الصورة :

لفعل هذا نجعل قيمة الخاصية vertical-align للصورة تساوي top , انظر لهذا المثال :

<html>

<head>

<style>

img { vertical-align: top; }

</style>

</head>

<h3>

تمت محاذاة النص مع أعلى الصورة

</h3>

</body>

</html>

والنتيجة كالتالي :

* جعل النص محاذياً لأسفل الصورة :

لفعل هذا نجعل قيمة الخاصية vertical-align للصورة تساوي bottom , انظر للمثال :
قم بتغيير كود CSS في المثال السابق بهذا الكود :

img { vertical-align: bottom; }

والنتيجة كالتالي :

* جعل النص محاذياً لوسط الصورة :

لفعل هذا نجعل قيمة الخاصية vertical-align للصورة تساوي middle , انظر للمثال :
قم بتغيير كود CSS في المثال السابق بهذا الكود :

img { vertical-align: middle; }

والنتيجة كالتالي :

انتهى الجزء الثاني من درس تنسيق النصوص في CSS , وللعودة للجزء الاول استخدم هذا الرابط : تنسيق النصوص في CSS - الجزء الأول .

تنسيق النصوص في CSS - الجزء الاول

noreply@blogger.com (KB) — Fri, 23 Aug 2013 05:49:00 +0000

هذا هو الجزء الاول من درس تنسيق النصوص في CSS , للانتقال للدرس الثاني استخدم هذا الرابط : تنسيق النصوص في CSS - الجزء الثاني .

تحتاج كثيراً لتنسيق النصوص من ألوان أو محاذاة او تشكيل وغيرها , وتوفر لك CSS هذا واكثر عبر العديد من الخصائص التي تناسب احتياجك كمصمم ويب .

أولاً : لون النص Text Color

لتغيير لون النص لأي عنصر في صفحة الويب نستعمل الخاصية color ثم اللون الذي تريد , مثل :

body { color: #dd3c00; }

هناك ثلاث صيغ للألوان في CSS :
1- عن طريق اسم اللون , مثل : "Red" .
2- عن طريق قيمة اللون في النظام الست عشري HEX , مثل : "ca2bcb#" , وتحصل عليها من أي Color Picker (مثل الذي موجود في الفوتوشوب) .
3- عن طريق قيمة RGB (يعني Red, Green, Blue) , مثل : "(202, 43,203)rgb" , وتحصل عليها من أي Color Picker .
انظر للمثال التالي :

<html>

<head>

<style>

h1 { color: Red; }

h3 { color: Blue; }

p { color: Green; }

</style>

</head>

<body>

<p>Green Text</p>

</body>

</html>

والنتيجة كالتالي :

ثانياً : محاذاة النصوص Text Alignment

محاذاة النصوص تعني أن نجعل اتجاه النص يميل لجهة اليمين او اليسار أو أن نجعله في الوسط , انظر للصورة التالية :

يمكننا تغيير محاذاة النصوص بكل بساطة عن طريق الخاصية text-align كالتالي :

* اجعل النص يميل لجهة اليسار :

يمكنك جعل النص يميل لليسار بجعل قيمة الخاصية text-align تساوي left , مثال :

p { text-align: left; }

وستصبح النتيجة مشابهة للآتي :

* اجعل النص يميل لجهة اليمين :

يمكنك جعل النص يميل لليمين بجعل قيمة الخاصية text-align تساوي right , مثال :

p { text-align: right; }

وستصبح النتيجة مشابهة للآتي :

* اجعل النص يقع في الوسط :

يمكنك جعل النص يقع في الوسط بجعل قيمة الخاصية text-align تساوي center , مثال :

p { text-align: center; }

وستصبح النتيجة مشابهة للآتي :

* اجعل النص متناسقاً :

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

مثال على استخدامها :

p { text-align: justify; }

والنتيجة :

ثالثاً : تزيين النص Text Decoration

تساعدك CSS في تغيير تنسيق كلمات معينة أو حتى فقرات بأكملها , وأقصد بالتزيين أن تضع خط تحت كلمة أو أن تضع خط فوقها , وتستطيع فعل هذا باستخدام الخاصية text-decoration كالتالي :

* وضع خط تحت الكلمة :

يمكنك وضع خط تحت الكلمة بجعل قيمة الخاصية text-decoration تساوي underline , مثال :

h3 { text-decoration: underline; }

* وضع خط فوق الكلمة :

يمكنك وضع خط فوق الكلمة بجعل قيمة الخاصية text-decoration تساوي overline , مثال :

h3 { text-decoration: overline; }

* وضع خط وسط الكلمة :

يمكنك وضع خط تحت الكلمة بجعل قيمة الخاصية text-decoration تساوي line-through , مثال :

h3 { text-decoration: line-through; }

* إزالة تزيين الكلمة :

يمكنك إزالة تزيين الكلمة بجعل قيمة الخاصية text-decoration تساوي none , مثال :

h3 { text-decoration: none; }

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

مثال يشرح جميع ماقلته عن الخاصية text-decoration :

<html>

<head>

<style>

h1 { text-decoration: underline; }

h2 { text-decoration: overline; }

h3 { text-decoration: line-through; }

a { text-decoration: none; }

</style>

</head>

<body>

<a href="#">رابط تشعبي قمنا بازالة التزيين منه</a>

</body>

</html>

والنتيجة تبدو كالصورة التالية :

رابعاً : تحويل النصوص Text Transformation

ويعني هذا ان نحول النصوص من أحرف كبيرة UPPERCASE إلى أحرف صغيرة lowercase والعكس , وهي خاصة بالأحرف الانجليزية ونستعمل لهذا الخاصية text-transform :

* تحويل النص إلى أحرف كبيرة UPPERCASE :

لجعل جميع أحرف النص بالشكل الكبير UPPERCASE نجعل قيمة الخاصية text-transform تساوي uppercase , مثال :

p { text-transform: uppercase; }

قم بتطبيقه على أي نص وستكون النتيجة كالصورة التالية :

* تحويل النص إلى أحرف صغيرة lowercase :

لجعل جميع أحرف النص بالشكل الصغير lowercase نجعل قيمة الخاصية text-transform تساوي lowercase , مثال :

p { text-transform: lowercase; }

قم بتطبيقه على أي نص وستكون النتيجة كالصورة التالية :

* جعل كل كلمة في النص تبدأ بحرف كبير :

لكي نجعل جميع كلمات النص تبدأ بحرف كبير نجعل قيمة الخاصية تساوي capitalize , مثال :

p { text-transform: capitalize; }

قم بتطبيقه على أي نص وستكون النتيجة كالصورة التالية :

خامساً : المسافة البادئة للنصوص Text Indentation

يمكنك التحكم بالمسافة البادئة للسطر الأول في الفقرات عن طريق الخاصية text-indent , أما القيمة فتكون بوحدة البيكسل (px) وهناك وحدات اخرى ولكن الأكثر استخداماً هي البيكسل , مثال :

p { text-indent: 50px; }

عند تطبيقه ستصبح كالصورة التالية (لاحظ المسافة في بداية السطر) :

وتذكر أنه كلما زادت القيمة بالبيكسل كلما زادت المسافة البادئة للسطر الأول .

انتهى الجزء الأول من هذا الدرس , للانتقال إلى الدرس الثاني استخدم هذا الرابط : تنسيق النصوص في CSS - الجزء الثاني .

المعرّف الفريد ID في CSS

noreply@blogger.com (KB) — Thu, 15 Aug 2013 21:49:00 +0000

فكرة المعرّف الفريد أو ID تشبه تماماً فكرة الفئات classes إلا أن هناك فرقاً مهماً بينهما فالفئات تستخدم مع عناصر مختلفة ومن أنواع مختلفة , مثلاً :

p.redClass { color: Red; }

h2.redClass { color: Red; }

h6.redClass { color: Red; }

كما رأيت استخدمنا الفئة مع عناصر من انواع مختلفة وهي p و h2 و h6 .
أما المعرّف الفريد id فلا يستخدم إلا مع عنصر واحد فقط , يعني أن لكل عنصر id خاص به , ولاستخدام الـ id نستخدم الرمز # (ويلفظ : هاش) ثم نكتب اسم الـ id الذي نريد :

#header

{

background-color: Blue;

}

ولإستدعاءه في عناصر HTML نستخدم الخاصية id :

انظر لهذا المثال :

<html>

<head>

<style>

#id1 { color: Red; }

#id2 { color: Green; }

#id3 { color: Blue; }

</style>

</head>

<body>

<h3 id="id2">Green ID<h3>

</body>

</html>

والنتيجـــــة كالتالي :

وهل هناك فائدة من الـ id ؟

بالتأكيد هناك فائدة كبيرة فأولها انه يمكنك من تمييز بعض العناصر واعطاءها خواص لها وحدها .
أيضاً له فائدة في لغات برمجة الويب مثل جافاسكريبت و php و غيرها , وفائدته أنه يمكنك من الربط بين العنصر ولغة البرمجة , ويجعلك تتحكم بخواص وقيم العناصر عن طريق لغة البرمجة مثلاً ان تقوم بتغيير ارتفاع العنصر او لونه عن طريق ريط لغة البرمجة مع خواص CSS للعنصر .

جملة If Then في فيجوال بيسك .نت

noreply@blogger.com (KB) — Wed, 14 Aug 2013 18:45:00 +0000

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

تساعدك الجمل الشرطية في بناء برامج ذكية ومرنة ويمكنك تسييرها كيفما شئت , وأول الجمل الشرطية التي سنتناولها هي جملة If Then , والقاعدة العامة لكتابتها كالتالي :

If اختباره تريد الذي الشرط Then

'الشرط تحقق اذا تنفيذها تريد التي الاوامر

ElseIf اختباره تريد الذي الآخر الشرط Then

'الشرط تحقق اذا تنفيذها تريد التي الاوامر

ElseIf اختباره تريد الذي الآخر الشرط Then

'الشرط تحقق اذا تنفيذها تريد التي الاوامر

......

Else

'خاطئة أعلاه الشروط جميع كانت اذا تنفيذها تريد التي الاوامر

End If

كما ترى يجب ان تنتهي عبارة if الشرطية بالكلمة End If وهو يدل على نهاية التركيب الخاص بالجملة If .

تقوم الجملة If Then باختبار الشرط الذي تريده مرة واحدة فقط فإذا كان صحيحاً ستنفذ الأوامر التي تسندها إليها وإذا كان خاطئاً لا تنفذ الاوامر وتتجاوز مباشرة إلى مابعدها .
الجزء الأساسي في عبارة If Then هو الجزء (If) حيث لابد من كتابته , أما الجزئين (ElseIf) و (Else) فهما اختياريان ويمكنك الاستغناء عنهما او كتابتهما وهذا حسب احتياجك في البرنامج .
سنتعرف الآن على أمثلة تطبيقية متنوعة وحالات مختلفة لاستخدام الجملة If :
المثال الأول :
برنامج يطلب من المستخدم ادخال أي رقم فإذا كان الرقم يساوي 5 فإن البرنامج يخبره ان الرقم هو 5 , وإذا كان أكبر من 5 أو أصغر من 5 لا يقوم البرنامج بفعل أي شئ ويتم الخروج من البرنامج .
الحل :
ما سنحتاجه أولاً هو متغير يمثل الرقم الذي سيدخله المستخدم وسنسميه "number" و سيكون من النوع Double .
قد تسأل لماذا اخترت النوع Double ؟ لماذا لم تختر النوع Integer ؟
لأن النوع Double يشمل الأعداد الكسرية أما Integer فيشمل الأعداد الصحيحة فقط , لنفرض أن المستخدم أدخل العدد 5.3 (وهو أكبر من 5) فإذا جعلت المتغير من النوع Integer فإن العدد الذي أدخله المستخدم سيتحول من 5.3 إلى 5 وبالتالي سيعتبره البرنامج مساوياً لـ 5 , وهذا خطأ كبير فالعدد 5.3 أكبر من 5 وليس مساوياً له , لهذا استخدمت النوع Double .
ثانياً يجب ان نقارن الرقم الذي سيدخله المستخدم مع العدد 5 لهذا سنحتاج إلى جملة If وسنستخدم معامل المقارنة (=) لنفحص هل الرقم مساوي لـ 5 أم لا .
كود البرنامج :

Module Module1

Sub main()

Dim number As Double

Console.WriteLine("Enter a number: ")

number = Console.ReadLine() 'الرقم ليدخل المستخدم انتظار

If number = 5 Then '5 يساوي الرقم هل

Console.WriteLine("The number is = 5")

Console.ReadKey()

End If

'البرنامج من الخروج سيتم 5 يساوي الرقم يكن لم اذا

End Sub

End Module

المثال الثاني :
برنامج يطلب من المستخدم ادخال رقم , فإذا كان الرقم أكبر من "5" فإن البرنامج يخبره أن الرقم أكبر من "5", بالمثل اذا كان أصغر من "5" يخبره البرنامج أن الرقم أقل من "5" , ايضاً اذا كان الرقم يساوي "5" فإن البرنامج سيخبره أن الرقم يساوي "5" .
الحل :
أول ماسنفعله أننا سنحجز متغيراً في الذاكرة من النوع Double وهذا المتغير سيمثل الرقم الذي سنطلب من المستخدم ادخاله وسنقوم بمقارنته مع العدد "5" , وسنسميه بالاسم "number" .
ثانياً المطلوب منا هو أن نقارن المتغير بالعدد "5" فإذا كان أكبر من "5" (يعني number>5) نطبع للمستخدم رسالة ان هذا الرقم أكبر من "5" , نفس الشئ اذا كان أصغر من "5" واذا كان يساوي "5" ...

لا تقلق اذا لم تفهم الأمر بعد , فمع كتابتك للكود بنفسك سوف تفهم كل ما قلته :

Module Module1

Sub main()

Dim number As Double

Console.WriteLine("Enter a number: ")

number = Console.ReadLine()

If number > 5 Then

Console.WriteLine("The number is greater than 5")

Console.ReadKey()

ElseIf number < 5 Then

Console.WriteLine("The number is less than 5")

Console.ReadKey()

Else

Console.WriteLine("The number is = 5")

Console.ReadKey()

End If

End Sub

End Module

المثال الثالث :
برنامج يطلب من المستخدم ادخال رقم ثم يقوم بإخباره هل الرقم الذي أدخله سالب (negative) أم موجب (positive) .
الحل :
كيف نعرف أن الرقم سالب أو موجب؟ يكون الرقم موجب إذا كان أكبر من الصفر ويكون سالب إذا كان أصغر من الصفر , إذن فأول ماسنفعله بالتأكيد هو حجز متغير في الذاكرة من النوع Double يمثل الرقم الذي سيدخله المستخدم وسنسميه "testNumber" .
ثانياً سنقارن المتغير testNumber مع العدد "صفر" فإذا كان أكبر من الصفر (testNumber > 0) فإنه موجب وإذا كان أصغر من الصفر فإنه سالب .
كود البرنامج :

Module Module1

Sub main()

Dim testNumber As Double

Console.WriteLine("Enter a number: ")

testNumber = Console.ReadLine()

If testNumber > 0 Then

Console.WriteLine("The number is positive")

Console.ReadKey()

ElseIf testNumber < 0 Then

Console.WriteLine("The number is negative.")

Console.ReadKey()

Else

Console.WriteLine("The number is = 0")

Console.ReadKey()

End If

End Sub

End Module

المثال الرابع :
برنامج يطلب من المستخدم ادخال رقم ثم يخبره أن هذا الرقم زوجي (Even) أو فردي (Odd) .
الحل :
كيف نعرف أن الرقم زوجي أو فردي؟ الرقم الزوجي يقبل القسمة على 2 بدون باقي (يعني باقي القسمة يساوي صفر) , أما الرقم الفردي فلا يقبل القسمة على 2 (يعني يكون للقسمة باقي) , مثلاً العدد 10 يقبل القسمة على 2 لأن 10÷2=5 والباقي "صفر" اذن فهو عدد زوجي , ولكن 13 لا يقبل القسمة على 2 لأن 13÷2=6 والباقي 1 اذن فهو عدد فردي .
لن أقول لك ماذا سنحتاج لبناء البرنامج , فأنت بالتأكيد تعرف ماذا سنحتاج ^_^
كود البرنامج :
في هذا المثال لن نحتاج للعبارة ElseIf لأنه لا حاجة لفحص شروط اضافية فالرقم اذا لم يكن زوجي إذن فهو فردي , لهذا لا حاجة لشروط اضافية .

Module Module1

Sub main()

Dim number As Double

Console.WriteLine("Enter a number: ")

number = Console.ReadLine()

If (number Mod 2) = 0 Then

Console.WriteLine("The number is even")

Console.ReadKey()

Else 'فردي فهو إذن زوجي الرقم يكن لم إذا

Console.WriteLine("The number is odd.")

Console.ReadKey()

End If

End Sub

End Module

الأوامر التي تنفذها جملة If Then لا تقتصر على الطباعة فقط بل يمكنك القيام بأي امر تريد تنفيذه إذا تحقق الشرط , انظر للمثال التالي ..
المثال الخامس :
للوهلة الأولى قد يبدو هذا المثال معقداً وهذا طبيعي , لكن لا عليك فقط اقرأ المثال عدة مرات ثم جهز المتطلبات بنفسك أما انا فسازودك مباشرة بكود البرنامج .
المثال هو : برنامج يطلب من المستخدم ادخال رقمين , فإذا كان الرقم الأول اكبر من الثاني فإنه يقوم بإيجاد الفرق بين الرقمين (يعني ناتج الطرح) , أما اذا كان الرقم الأول اصغر من الثاني فإن البرنامج يقوم بإيجاد ناتج الجمع لهذين الرقمين , أما اذا كان الرقمان متساويان فلا يقوم البرنامج بأي شئ ويتم الخروج من البرنامج .
الحل :

Module Module1

Sub main()

Dim number1, number2, result As Double

Console.WriteLine("Enter the first number:")

number1 = Console.ReadLine()

Console.WriteLine("Enter the second number:")

number2 = Console.ReadLine()

If number1 > number2 Then

result = number1 - number2

Console.WriteLine("resul = " & result)

Console.ReadKey()

ElseIf number1 < number2 Then

result = number1 + number2

Console.WriteLine("resul = " & result)

Console.ReadKey()

End If

'البرنامج من الخروج سيتم الثاني الرقم يساوي الاول الرقم كان إذا

End Sub

End Module

تداخل الجمل الشرطية :

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

Module Module1

Sub main()

Dim number As Double

Console.WriteLine("Enter a number:")

number = Console.ReadLine()

If number > 0 Then

If (number Mod 2) = 0 Then

Console.WriteLine("The number is positive and even")

Console.ReadKey()

Else

Console.WriteLine("The number is not positive or not even")

Console.ReadKey()

End If

Else

Console.WriteLine("The number is not positive or not even")

Console.ReadKey()

End If

End Sub

End Module

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

استخدام الروابط المنطقية مع الجمل الشرطية :

الروابط المنطقية في لغة فيجوال بيسك .نت هي And , و Or , و XOR .
تفيدنا الروابط المنطقية في جملة If Then بأنها تمكننا من فحص اكثر من شرط في وقت واحد وهذا سيوفر علينا كتابة المزيد من السطور البرمجية ومزيد من الجمل الشرطية , انظر للأمثلة :
المثال السابع :
في هذا المثال سنتناول نفس المثال السادس ولكن سنعدل على الكود الخاص به :

Module Module1

Sub main()

Dim number As Double

Console.WriteLine("Enter a number:")

number = Console.ReadLine()

If number > 0 And (number Mod 2) = 0 Then

Console.WriteLine("The number is positive and even")

Console.ReadKey()

Else

Console.WriteLine("The number is not positive or not even")

Console.ReadKey()

End If

End Sub

End Module

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

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

Module Module1

Sub main()

Dim number As Double

Console.WriteLine("Enter a number:")

number = Console.ReadLine()

If number > 0 And (number Mod 2) = 0 Then

Console.WriteLine("The number is positive AND even")

Console.ReadKey()

ElseIf number > 0 Or (number Mod 2) = 0 Then

Console.WriteLine("The number is positive OR even")

Console.ReadKey()

Else

Console.WriteLine("The number is not positive and not even")

Console.ReadKey()

End If

End Sub

End Module

هكذا نكون اتممنا درس جملة If Then وتذكر أن هذا من أهم الدروس فلا يكاد يخلو برنامج من الجمل الشرطية سواء جملة If Then أو غيرها .
تدرب جيداً و قم بالتعديل في الأمثلة السابقة واستخدم معاملات رياضية ومنطقية اخرى فكل هذا كفيل بجعلك تفهم جيداً كيفية عمل الجمل الشرطية .

الجمل الشرطية في ++C - جملة if else

noreply@blogger.com (KB) — Sat, 10 Aug 2013 16:29:00 +0000

ملاحظة يتطلب منك هذا الدرس ان تكون ملماً بالمعاملات الرياضية والمنطقية في ++C , ويمكنك عبر هذا الرابط الانتقال إلى درس المعاملات الرياضية والمنطقية في ++C .
ايضاً يجب أن تكون ملماً بالمنطق الرياضي , أو انتقل إلى درس المنطق الرياضي .

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

القاعدة العامة لكتابة جملة if else هي كالتالي :

if (اختباره تريد الذي الشرط)

{

//الشرط تحقق إذا تنفيذها تريد التي الأوامر

}

else if (اختباره تريد الذي الآخر الشرط)

{

//الشرط تحقق إذا تنفيذها تريد التي الأوامر

}

else if (اختباره تريد الذي الآخر الشرط)

{

//الشرط تحقق إذا تنفيذها تريد التي الأوامر

}

......

else

{

//خاطئة أعلاه الشروط جميع كانت اذا تنفيذها تريد التي الأوامر

}

ملاحظة :
العبارة الأساسية في القاعدة الموضحة أعلاه هي عبارة if فيجب كتابتها وبدونها لن تستطيع اختبار أي شرط أما عبارة else if وعبارة else فهما اختياريتان ويمكنك الاستغناء عنهما وهذا حسب حاجتك في البرنامج , وسيتضح من خلال الامثلة التالية ...
المثال الأول :
برنامج يطلب من المستخدم ادخال أي رقم فإذا كان الرقم يساوي 5 فإن البرنامج يخبره ان الرقم هو 5 , وإذا كان أكبر من 5 أو أصغر من 5 لا يقوم البرنامج بفعل أي شئ ويتم الخروج من البرنامج .
الحل :
ما سنحتاجه أولاً هو متغير يمثل الرقم الذي سيدخله المستخدم وسنسميه "number" و سيكون من النوع float .

قد تسأل لماذا اخترت النوع float ؟ لماذا لم تختر النوع integer ؟

لأن النوع float يشمل الأعداد الكسرية أما integer فيشمل الأعداد الصحيحة فقط , لنفرض أن المستخدم أدخل العدد 5.3 (وهو أكبر من 5) فإذا جعلت المتغير من النوع integer فإن العدد الذي أدخله المستخدم سيتحول من 5.3 إلى 5 وبالتالي سيعتبره البرنامج مساوياً لـ 5 , وهذا خطأ كبير فالعدد 5.3 أكبر من 5 وليس مساوياً له , لهذا استخدمت النوع float .
ثانياً يجب ان نقارن الرقم الذي سيدخله المستخدم مع العدد 5 لهذا سنحتاج إلى جملة if وسنستخدم معامل المقارنة (==) لنفحص هل الرقم مساوي لـ 5 أم لا .
كود البرنامج :

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

float number; /* المستخدم سيدخله الذي الرقم يمثل المتغير هذا */

cout << "Enter a number: ";

cin >> number; /* الرقم ليدخل المستخدم انتظار */

if (number == 5) /* 5 يساوي number هل */

{

cout << "The number is = 5 .";

}

getch();

return 0;

}

المثال الثاني :
برنامج يطلب من المستخدم ادخال رقم , فإذا كان الرقم أكبر من "5" فإن البرنامج يخبره أن الرقم أكبر من "5", بالمثل اذا كان أصغر من "5" يخبره البرنامج أن الرقم أقل من "5" , ايضاً اذا كان الرقم يساوي "5" فإن البرنامج سيخبره أن الرقم يساوي "5" .
الحل :
أول ماسنفعله أننا سنحجز متغيراً في الذاكرة من النوع float وهذا المتغير سيمثل الرقم الذي سنطلب من المستخدم ادخاله وسنقوم بمقارنته مع العدد "5" , وسنسميه بالاسم "number" .
ثانياً المطلوب منا هو أن نقارن المتغير بالعدد "5" فإذا كان أكبر من "5" (يعني number>5) نطبع للمستخدم رسالة ان هذا الرقم أكبر من "5" , نفس الشئ اذا كان أصغر من "5" واذا كان يساوي "5" ...

لا تقلق اذا لم تفهم الأمر بعد , فمع كتابتك للكود بنفسك سوف تفهم كل ما قلته :

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

float number; /* المستخدم سيدخله الذي الرقم يمثل المتغير هذا */

cout << "Enter a number: ";

cin >> number; /* الرقم ليدخل المستخدم انتظار */

if (number > 5) /* 5 من أكبر number هل */

{

cout << "The number is greater than 5 .";

}

else if (number < 5) /* 5 من أصغر number هل */

{

cout << "The number is less than 5 .";

}

else /* اذا لم يكن أكبر من 5 ولا اصغر منه اذن فهو يساويه */

{

cout << "The number is 5 .";

}

getch();

return 0;

}

المثال الثالث :
برنامج يطلب من المستخدم ادخال رقم ثم يقوم بإخباره هل الرقم الذي أدخله سالب (negative) أم موجب (positive) .
الحل :
كيف نعرف أن الرقم سالب أو موجب؟ يكون الرقم موجب إذا كان أكبر من الصفر ويكون سالب إذا كان أصغر من الصفر , إذن فأول ماسنفعله بالتأكيد هو حجز متغير في الذاكرة من النوع float يمثل الرقم الذي سيدخله المستخدم وسنسميه "testNumber" .
ثانياً سنقارن المتغير testNumber مع العدد "صفر" فإذا كان أكبر من الصفر (testNumber > 0) فإنه موجب وإذا كان أصغر من الصفر فإنه سالب .
كود البرنامج :

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

float testNumber;

cout << "Enter any number: ";

cin >> testNumber;

if (testNumber > 0)

{

cout << "The number is positive .";

}

else if (testNumber < 0)

{

cout << "The number is negative .";

}

else /* اذا لم يكن الرقم سالب ولا موجب إذن فهو = صفر */

{

cout << "The number = 0 .";

}

getch();

return 0;

}

المثال الرابع :
برنامج يطلب من المستخدم ادخال رقم ثم يخبره أن هذا الرقم زوجي (Even) أو فردي (Odd) .
الحل :
كيف نعرف أن الرقم زوجي أو فردي؟ الرقم الزوجي يقبل القسمة على 2 بدون باقي (يعني باقي القسمة يساوي صفر) , أما الرقم الفردي فلا يقبل القسمة على 2 (يعني يكون للقسمة باقي) , مثلاً العدد 10 يقبل القسمة على 2 لأن 10÷2=5 والباقي "صفر" اذن فهو عدد زوجي , ولكن 13 لا يقبل القسمة على 2 لأن 13÷2=6 والباقي 1 اذن فهو عدد فردي .
لن أقول لك ماذا سنحتاج لبناء البرنامج , فأنت بالتأكيد تعرف ماذا سنحتاج ^_^
كود البرنامج :
قبل كتابة الكود أود تنبيهك إلى أنه لا يمكنك استعمال معامل باقي القسمة (%) مع الأعداد الكسرية float , بل يستخدم مع النوع integer فقط , لهذا سيكون المتغير الذي سنستخدمه من النوع integer .

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

int number;

cout << "Enter a number: ";

cin >> number;

if ( (number%2) == 0 )

{

cout << "The number is even .";

}

else if ( (number%2) != 0 )

{

cout << "The number is odd .";

}

else

{

cout << "The number is = 0 .";

}

getch();

return 0;

}

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

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

float number1, number2, result;

cout << "Enter the first number: ";

cin >> number1;

cout << "Enter the second number: ";

cin >> number2;

if ( number1 > number2 )

{

result = number1 + number2;

cout << result;

}

else if ( number1 < number2 )

{

result = number1 - number2;

cout << result;

}

getch();

return 0;

}

كما ترى لم نستخدم العبارة else لانه اذا لم يكن الرقم الأول أكبر من الثاني ولا أصغر منه اذن سيكون مساوياً له , لهذا لا حاجة لوضع عبارة else وأنا أريد أن يتم الخروج من البرنامج اذا كان الرقمان متساويان .

تداخل الجمل الشرطية :

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

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

int number;

cout << "Enter a number: ";

cin >> number;

if ( (number%2) == 0 )

{

if (number > 0)

{

cout << "The number is even and positive .";

}
else
{
cout << "The number is not even or not positive .";
}

}

else

{

cout << "The number is not even or not positive .";

}

getch();

return 0;

}

حيث أن جملة if الاولى (الحاضنة) ستفحص اذا كان الرقم زوجي , فإذا كان زوجي سيأتي دور if الثانية (المحضونة) والتي ستفحص إذا كان الرقم موجب أم لا ... ولكن ماذا لو كان الرقم زوجي ولكن ليس موجب؟

هنا سيأتي دور العبارة else التابعة لجملة if الثانية (المحضونة) والتي ستطبع أن "الرقم غير زوجي أو غير موجب" .

استخدام الروابط المنطقية مع الجمل الشرطية :

الروابط المنطقية في لغة ++C هي And (ويمثله المعامل &&) , و Or (ويمثله المعامل ||) .
تفيدنا الروابط المنطقية في جملة if else بأنها تمكننا من فحص اكثر من شرط في وقت واحد وهذا سيوفر علينا كتابة المزيد من السطور البرمجية , انظر للأمثلة :
المثال السابع :
في هذا المثال سنتناول نفس المثال السادس ولكن سنعدل على الكود الخاص به :

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

int number;

cout << "Enter a number: ";

cin >> number;

if ( (number%2) == 0 && number > 0 )

{

cout << "The number is even and positive .";

}

else

{

cout << "The number is not even or not positive .";

}

getch();

return 0;

}

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

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

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

int number;

cout << "Enter a number: ";

cin >> number;

if ( (number%2) == 0 && number > 0 )

{

cout << "The number is even AND positive .";

}

else if ( (number%2) == 0 || number > 0 )

{

cout << "The number is even OR positive .";

}

else

{

cout << "The number is not even and not positive .";

}

getch();

return 0;

}

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

التعامل مع الخلفيات في CSS

noreply@blogger.com (KB) — Tue, 30 Jul 2013 19:05:00 +0000

توفر لك CSS تشكيلة من الخصائص التي تساعد في التعامل بحرية مع خلفيات عناصر الويب , وهي كالتالي :

أولاً : لون الخلفية Background Color

لتحديد لون الخلفية لأي عنصر نستخدم الخاصية background-color .
مثلاً لتحديد لون الخلفية لصفحة الويب بالكامل سنستخدم الخاصية background-color مع العنصر body :

body { background-color: #1cc1c3; }

لتحديد اللون في CSS هناك ثلاث طرق رئيسية :
1- عن طريق اسم اللون , مثل : "Red" .
2- عن طريق قيمة اللون في النظام الست عشري HEX , مثل : "ca2bcb#" , وتحصل عليها من أي Color Picker .
3- عن طريق قيمة RGB (يعني Red, Green, Blue) , مثل : "(202, 43,203)rgb" , وتحصل عليها من أي Color Picker .
أمثلة أخرى :

h1 { background-color: #0de02d; }

p { background-color: rgb(13, 224, 45); }

div { background-color: Orange; }

h3.myClass { background-color: rgb(155, 43, 116); }

ثانياً : صورة الخلفية Background Image

نستخدم الخاصية background-image لتعيين صورة كخلفية لأي عنصر في صفحة الويب .
لتعيين خلفية لصفحة الويب بالكامل نستخدم الخاصية background-image مع العنصر body :

body { background-image: url('myBackground.jpg'); }

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

مثال لخلفية سيئة :

ثالثاً : تكرار الخلفية Background Repeat

بشكل افتراضي فإن الخاصية background-image تقوم بتكرار الصورة بشكل أفقي (على المحور x) وعمودي (على المحور y) , انظر للصورة التالية والتي سأستعملها كخلفية للصفحة وستتكرر بشكل افتراضي :

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

ليست جميلة ,, أليس كذلك؟ ,, اذن مالحل؟
الحل هو ان نستخدم الخاصية background-repeat والتي تساعدنا في التحكم بتكرار الخلفية , وتحمل أربع قيم :
الأولى : repeat-x وهي تسمح بتكرار الخلفية في الاتجاه الأفقي فقط , وتمنع تكرارها في الاتجاه العمودي .
الثانية : repeat-y وهي تسمح بتكرار الخلفية في الاتجاه العمودي فقط , وتمنع تكرارها في الاتجاه الأفقي .
الثالثة : repeat وهي تسمح بتكرار الخلفية في كلا الاتجاهين الأفقي والعمودي .
الرابعة : no-repeat وهي تمنع تكرار الخلفية تماماً في الاتجاهين الأفقي والعمودي .

سنستعمل الخاصية background-repeat في مثالنا السابق :

body { background-image: url('gardient.png');

background-repeat: repeat-x; }

وستصبح الخلفية كالتالي :

وهل هناك فائدة من تكرار الخلفية ؟

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

وسنستخدم معها الخاصية background-repeat لتكرارها :

body {

background-image: url('pattern.png');

background-repeat: repeat; }

والنتيجة كالتالي :

رابعاً : ارتباط الخلفية Background Attachment

لتحديد ارتباط الخلفية نستخدم الخاصية background-attachment , ونقصد بارتباط الخلفية أن نجعلها ثابتة فلا يتم تمريرها عند النزول إلى أسفل الصفحة , وهذه الخاصية تحمل قيمتين :
1- scroll : وهي تسمح بتمرير الخلفية اثناء تمرير الصفحة .
2- fixed : وهي تبقي الخلفية ثابتة وتمنع تمريرها أثناء تمرير الصفحة , انظر للمثال التالي :

body { background-image: url('tree.png');

background-attachment: fixed; }

والنتيجة هي :

خامساً : موقع صورة الخلفية Background Position

الصورة التالية تمثل عنصراً من صفحة الويب وبه المواقع التي يمكنك أن تنقل صورة الخلفية إليها :

الموقع الافتراضي للخلفية هو أعلى يسار العنصر , يعني (left top) .
لتغيير موقع صورة الخلفية لأي عنصر نستخدم الخاصية background-position مع أحد الأماكن المحددة في الصورة أعلاه , مثلاً أريد نقل الخلفية إلى أسفل يمين العنصر سيكون الكود كالتالي :

background-position: right bottom;

او مثلاً رغبت في نقل الخلفية إلى الأسفل ولكن تريد جعلها في المنتصف (لا إلى اليمين ولا إلى اليسار) , سيكون الكود كالتالي :

background-position: bottom;

هناك طريقة أخرى لتغيير موقع صورة الخلفية للعنصر وهي باستخدام الخاصية background-position مع النسب المئوية وهذه الطريقة أكثر دقة ومرونة من الطريقة السابقة .
عرفنا سابقاً أن نقطة الأصل لصورة الخلفية هي أعلى اليسار بالنسبة للعنصر , ومن هذا الأساس سنستخدم النسب لتحديد موقع الخلفية , انظر للكود التالي :

background-position: 20% 50%;

وهذا معناه أن صورة الخلفية تبعد بمقدار %20 عن يسار العنصر , وتبعد بمقدار %50 عن أعلى العنصر , والصورة التالية ستوضح أكثر :

ملاحظة مهمة : لكي تقوم بتغيير موقع الخلفية يجب أن تكون الخلفية غير مكررة , أي أن الخاصية background-repeat قيمتها no-repeat وإلا فلن تستطيع تغيير موقع الخلفية .

الخاصية المختصرة Shorthand Property

لاحظت مما سبق أنه عندما تعاملنا مع الخلفية بمفردها كتبنا الكثير من الخواص (حوالي 4 خواص) , تخيل أنك ستتعامل مع 20 عنصر اذن 4×20 يعني 80 سطر ستقوم بكتابتها لأجل التعامل مع الخلفية فقط !! وهذا كثير جداً .
لاختصار الكود يمكننا أن ندمج جميع الخصائص السابقة في خاصية واحدة فقط هذه الخاصية تسمى "الخاصية المختصِرة" أو "الخاصية المختزِلة" .
الخاصية المختصرة للتعامل مع الخلفيات هي ببساطة "background" , انظر لهذا المثال :

body { background: #ff34cd url('tree.jpg') no-repeat left bottom; }

كما ترى أدرجنا جميع الخواص في سطر واحد فقط! , ولكن هناك ترتيب يجب أن تتقيد به عند استخدامك لقيم الخواص مع الخاصية المختصرة وهو :
1- لون الخلفية background-color
2- صورة الخلفية background-image
3- تكرار الخلفية background-repeat
4- ارتباط الخلفية background-attachment
5- موقع الخلفية background-position
بعبارة أخرى يجب أن تتقيد بهذا الترتيب :

{ background: color image repeat attachment position }

التعامل مع الصور في HTML

noreply@blogger.com (KB) — Sun, 28 Jul 2013 16:59:00 +0000

أعط موقعك الكثير من الحيوية والجمال وذلك باستخدام الصور سواء الثابتة منها أو المتحركة , ويمكنك ادراج الصور باستخدام الوسم </ img> وهذا الوسم ليس له وسم اغلاق , ويأتي مع الوسم img خصائص أهمها :

أولاً : الخاصية src

وهي أهم الخصائص للوسم img فبدونها لن تكون هناك صورة , وفائدة هذه الخاصية تكمن في أنها تخبر متصفح الانترنت أين موقع الصورة التي تريد استخدامها , انظر للمثال التالي :
لدي صورة اسمها Desert وامتدادها jpg , وهي موجودة في نفس المجلد الذي به صفحة الويب الخاصة بي سيكون الكود كالتالي :

مثال آخر لدي صورة اسمها Sky و امتدادها png وهي موجودة على القرص /:D في المجلد pictures سيكون الكود كالتالي :

كما رأيت في الامثلة علينا كتابة موقع الصورة بالكامل مع امتدادها وإلا فلن تظهر الصورة .
يمكنك ببساطة استدعاء صورة من أي مكان على الانترنت وماعليك إلا كتابة الرابط الذي توجد فيه الصورة , فمثلاً لدي صورة على الرابط any-site.com/mypicture.jpg سيكون الكود كالتالي :

ثانياً : الخاصية height

كما يدل اسمها فهذه الخاصية تمكننا من تحديد مقدار "ارتفاع الصورة" بوحدة "البيكسل" (وليس "طول الصورة" لأنه في الويب ليس هناك شئ اسمه طول أو length) , واستخدامها بسيط فقط ضع مقدار الارتفاع الذي تريده , مثال :

ثالثاً : الخاصية width

هذه الخاصية تمكننا من تحديد مقدار "عرض الصورة" بوحدة "البيكسل" , مثال :

رابعاً : الخاصية alt

هي اختصار لكلمة (alternative) وتعني "بديل" , وهذه الخاصية مهمة جداً فيما يتعلق بتحسين محركات البحث أو السيو (Search Engine Optimizations) فهي تخبر محركات البحث عما تدل عليه الصورة التي وضعتها في موقعك فمحركات البحث لا تبحث عن الصور وإنما تبحث عما تدل عليه الصور .
أما بالنسبة لمستخدمي موقعك فهذه الخاصية تظهر نص بدلاً من الصورة وتخبر المستخدم بما تدل عليه الصورة في حال حصل خطأ ولم تظهر الصورة في الموقع , انظر للمثال التالي لتفهم ما أقصده (هذا المثال تعمدت الخطأ فيه بحيث لا أجعل الصورة تظهر للمستخدم ) :

<html>

</body>

</html>

والنتيجة هي الصورة التالية :

كما ترى حصل خطأ ولم تظهر لك الصورة , ولكن الخاصية alt أخبرتك أن هذه هي صورة الكرة الأرضية .

خامساً : الخاصية title

هذه الخاصية تظهر تلميح "Tool Tip" يخبرك بما تدل عليه الصورة عند مرور مؤشر الماوس فوق الصورة , وبالمثال يتضح المقال :

<html>

</body>

</html>

والنتيجة كالتالي :

ملاحظة : الخاصية title هي ليست خاصة بالصور فقط , ولكن يمكنك استخدامها مع عناصر HTML أخرى .

المعاملات الرياضية والمنطقية في فيجوال بيسك .نت

noreply@blogger.com (KB) — Sun, 28 Jul 2013 16:32:00 +0000

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

ماهي المعاملات أو Operators :

المعاملات أو Operators بشكل عام هي تلك الرموز (مثل '+') أو الكلمات (مثل 'New') التي نستخدمها لاداء عملية معينة سواء كانت عملية رياضية كالجمع والطرح أو عملية منطقية وغيرها , ولها أيضاً أغراض أخرى .

أولاً : المعاملات الحسابية Arithmetic Operators

تمكننا لغة فيجوال بيسك .نت من أداء بعض العمليات الحسابية بشكل مباشر وهي : الجمع (+) والطرح (-) والضرب (*) والقسمة (/) وإيجاد الأس (^) وإيجاد باقي القسمة (Mod) .
وهناك معامل آخر للقسمة (\) وهو يقوم بحساب ناتج القسمة الصحيح فقط ولا يعطينا قيمة كسرية .
الجدول التالي يوضع المعاملات الحسابية في لغة فيجوال بيسك .نت :

ثانياً : معاملات المقارنة Comparison Operators

تستطيع بسهولة اجراء عمليات المقارنة بشكل مباشر مع معاملات المقارنة التي عرفتها أيام المدرسة الابتدائية !! وهناك فرق بسيط هو أننا في البرمجة نقرأ الجمل من اليسار إلى اليمين مثلاً الجملة "x>5" نقرأها : هل x أكبر من 5 ؟ وقد تكون صائبة True أو خاطئة False .
معاملات المقارنة الأساسية المعرفة في فيجوال بيسك .نت هي : أكبر من (<) , و أصغر من (>) , و أكبرمن أو يساوي (=<) , و أصغر من أو يساوي (=>) , و يساوي (=) , و لايساوي (<>) .
لا ننسى أيضاً المعامل (Like) المستخدم في مقارنة السلاسل الحرفية (String) - مع استخدامات اخرى - وهو يقارن بينها من ناحية عدد الأحرف وحتى حالة الأحرف فمثلاً السلسلة "khalid" تعتبر مختلفة عن "KHALID" , انظر للمثال :

Dim result As Boolean

result = "Ahmed" Like "Ahmed"

يقوم المعامل AndAlso بنفس وظيفة المعامل And ولكن مع اختلاف بسيط , فالمعامل AndAlso يفحص الشرط الأول فاذا كان صائب يفحص الشرط الثاني ولكن اذا كان الشرط الأول خاطئ فإنه يتوقف مباشرة ولا يفحص الشرط الثاني لأن النتيجة معروفة وهي False فلا داعي لفحص الشرط الثاني , مثال :

Dim result As Boolean

result = 3 > 7 AndAlso 2 < 5

Console.WriteLine(result) 'False

المعامل OrElse

يقوم المعامل OrElse بنفس وظيفة المعامل Or ولكن مع اختلاف بسيط , فالمعامل OrElse يفحص الشرط الأول فاذا كان صائب فإنه يتوقف ولا يفحص الشرط الثاني لأن النتيجة معروفة وهي True فلا داعي لفحص الشرط الثاني , ولكن اذا كان الشرط الأول خاطئ فإنه يفحص الشرط الثاني , مثال :

Dim result As Boolean

result = 3 > 7 OrElse 2 < 5

Console.WriteLine(result) 'True

رابعاً : معاملات الإسناد Assignment Operators :

أول هذه المعاملات هو المعامل المعروف ( = ) والذي نستخدمه لاسناد القيم للمتغيرات بأنواعها وهو غني عن التعريف .
هناك نوع آخر من معاملات الاسناد وهي معاملات تمكنك من القيام بعملية حسابية مع اسناد القيمة في نفس الوقت وهي : معامل الجمع مع الاسناد (=+) ومعامل الطرح مع الاسناد (=-) ومعامل الضرب مع الاسناد (=*) ومعامل القسمة مع الاسناد بنوعيها الاثنين (=/) و (=\) , وأيضاً معامل القوة أو الأس (=^) , وإليك مثال للتوضيح :

Dim x As Integer = 5

x += 3 'x = x + 3

Console.WriteLine(x) '8

مثال آخر :

Dim y As Integer = 4

y ^= 2 'y = y ^ 2

Console.WriteLine(y) ' 16

هناك معامل آخر من معاملات الاسناد وهو المعامل (=&) ويستخدم مع السلاسل الحرفية (String) ووظيفته أنه يقوم باضافة سلسلة حرفية إلى سلسلة حرفية أخرى , مثال :

Dim str1 As String = "Hello"

Dim str2 As String = " World"

str1 &= str2 'str1 = str1 & str2

Console.WriteLine(str1) 'Hello World

مثال آخر :

Dim str1 As String = "Welcome"

str1 &= " to my program"

Console.WriteLine(str1) 'Welcome to my program

هناك معاملات اخرى قد لا نحتاج إليها في الوقت الحالي مثل (=<<) و (=>>) وهي خاصة بالازاحة Arethmatic Shift وسنتطرق لها في وقت آخر بإذن الله .

المنطق الرياضي

noreply@blogger.com (KB) — Sat, 27 Jul 2013 19:29:00 +0000

لماذا المنطق الرياضي ؟

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

انواع الجمل :

الجمل التي نتبادلها يومياً تنقسم إلى نوعين أساسيين :
1- الجمل الانشائية :
وهي التي لا تحمل خبراً معيناً ولاتحتمل الصواب والخطأ , وقد تدل على استفهام مثل : "ما اسمك؟" , أو أمر مثل : "أحضر بعض الماء" , أو نهي مثل : "لا تقطف الأزهار" , أو تعجّب مثل : "ما أجمل السماء!" .
2- الجمل الخبرية : وهي التي تحمل خبراً معيناً للسامع وقد تحتمل الصواب والخطأ , مثل : "عمري عشرون سنة" , "الأرض أكبر من القمر" , ... وغيرها .
ملاحظة : كل جملة خبرية تحتمل الصواب والخطأ تسمى (قضية) أو (قضية منطقية) , والقضايا نوعين :
1- القضية البسيطة : وهي التي تكون على شكل تعبير (Expression) منطقي واحد , مثل : "لغة سي++ طورها بيارن ستروستروب" , وهي تكون إما صائبة True , أو خاطئة False . مثلاً القضية : "رمضان هو الشهر الخامس من الأشهر الهجرية" هي قضية خاطئة False .
2- القضية المركبة : وهي التي تتكون من قضيتين بسيطتين أو أكثر ويربط بينهما برابط منطقي (و 'AND' , أو 'OR' , ...) , مثل : "اسمي خالد و عمري عشرون سنة" , "5 أكبر من 3 أو 6 أصغر من 10" .
نفي القضية : نرمز للنفي بالرمز ( ' ) ويعني "ليس" أو "لا" (بالانجليزية NOT) , فلو رمزنا للقضية "الأرض أكبر من القمر" بالرمز p وهي قضية صائبة True , فسيكون نفيها "الأرض ليست أكبر من القمر" وسنرمز لها بالرمز 'p (ويقرأ not p) وهي قضية خاطئة
False , بشكل آخر :

p = "الأرض أكبر من القمر" (True) .

p' = "الأرض ليست أكبر من القمر" (False) .

اذن فكما تلاحظ فإن نفي القضية يقوم بتغيير حالة الصواب الخاصة بها , إما من خاطئة إلى صائبة أو من صائبة إلى خاطئة .

جدول الصواب Truth Table :

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

أولاً : العملية "NOT"

ويرمز لها بالرمز ( ' ) وهي تعني "نفي القضية" , مثلاً لتكن لدينا القضية المنطقية p فإن نفيها سيكون 'p , وجدول الصواب لها كالتالي :

ثانياً : العملية "AND"

يرمز للرابط المنطقي "AND" بالرمز ( ^ ) وينطق (وَ - AND) وهو يربط بين قضيتين بسيطتين لتكوين قضية مركبة , مثلاً لدينا القضية التالية والتي رمزنا لها بالرمز A :

A = "4>2 and 5<10"

ستلاحظ أنها تتكون من قضيتين بسيطتين وسنرمز لهما بالرمز p و q :

p = "4>2"

q = "5<10"

وبما أنهما مربوطتان بالرابط AND فسنعيد كتابة القضية A كالتالي :

A = p ^ q

ملاحظة : القضية التي نستخدم فيها الرابط AND تكون صائبة في حالة واحدة فقط وهي إذا كانت جميع القضايا المكونة لها صائبة , ويوضح هذا جدول الصواب التالي :

ثالثاً : العملية "OR"

يرمز للرابط OR بالرمز ( v ) وينطق (أو - OR) , مثلاً لو كانت لدينا القضية A وهي :

A = "3<4 or 10>6"

فهي مكونة من قضيتين بسيطتين مربوطتان بالرابط OR , ولتكن p و q :

p = "3<4"

q = "10>6"

اذن القضية A ستكون كالتالي :

A = p v q

ملاحظة : القضية التي نستخدم فيها الرابط OR تكون خاطئة في حالة واحدة فقط وهي إذا كانت جميع القضايا المكونة لها خاطئة , وجدول الصواب يوضح ذلك :

رابعاً : العملية "XOR"

يرمز للرابط XOR بالرمز v , مثلاً لوكان لدينا القضيتين p و q كالتالي :
P = "x>5"
q = "x<12"
اذن ستكون القضية A كما يلي :

A = p v q

ملاحظة : القضية التي تحتوي على الرابط XOR تكون صائبة اذا كان أحد الطرفين صائب والآخر خاطئ , أما اذا كانا صائبين معاً أو خاطئين معاً فإن القضية تكون خاطئة , والجدول المنطقي لها كالتالي :

خامساً : العملية "if ... then"

وهي تعني "إذا كان ... فإن ..." ويرمز لها بالرمز "→" , مثلاً لدينا القضية التالية المكونة من القضيتين "p="x>3 و "q="x>1 :

A = "if x>3 then x>1"

وسنعيد كتابتها كالتالي :

A = p → q

وتقرأ (if p then q)

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

المعاملات الرياضية والمنطقية في ++C

noreply@blogger.com (KB) — Tue, 23 Jul 2013 14:38:00 +0000

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

ماهي المعاملات أو Operators :

المعاملات أو Operators بشكل عام هي تلك الرموز (وقد تكون كلمات مثل new) التي نستخدمها لاداء عملية معينة سواء كانت عملية رياضية كالجمع والطرح أو عملية منطقية أو أي عمليات أخرى , مثلاً معامل الإسناد (assignment operator) '=' الذي استخدمناه لإسناد القيم للمتغيرات :

price = 1000;

أو معامل المقارنة أكبر من (<) الذي يفحص اذا كانت القيمة التي على اليسار اكبر من القيمة التي عن اليمين وسيتخدم في الجمل الشرطية وجمل التكرار .. وغيرها من المعاملات .
الجدول التالي يوضح لك المعاملات الرياضية والمنطقية المستخدمة في لغة ++C :

معاملات الزيادة والنقصان :

هناك معاملات أخرى مثل معامل الزيادة أو Increment Operator (++) ووظيفته أنه يقوم بإضافة واحد إلى المتغير الذي يستخدم معه , ومثله معامل النقصان Decrement Operator (--) الذي يقوم بإنقاص واحد من المتغير الذي يستخدم معه , انظر لهذا المثال :

int x = 10;

x++;

cout << x; // 11

x--;

cout << x; // 10

هناك نوعين من معاملات الزيادة والنقصان , الأول هو Postfix , والثاني هو Prefix , وهما يؤديان نفس الوظيفة اذا استعملتهما بشكل منفرد (كما فعلنا في المثال السابق) ولكن هناك فرقان بينهما :
الفرق الأول : أن Postfix يأتي بعد المتغير (يعني : ++x أو --x) , أما Prefix فيأتي قبل المتغير (يعني : x++ أو x--) .
الفرق الثاني : أن Prefix يزيد المتغير بواحد أولاً ثم يمكنك استعمال المتغير فيما تريد , مثلاً :

int x=0, y=0;

x = ++y; /* x في قيمته يضع ثم أولاً بواحد y يزيد */

cout << x << " " << y; /* 1 1 */

في الكود أعلاه قام معامل الزيادة بزيادة المتغير y بواحد فأصبحت قيمته تساوي 1, ثم جعلنا x تساوي y فأصبحت قيمة x تساوي 1 .

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

int x=0, y=0;

x = y++; /* بواحد y يزيد ثم y يساوي x يجعل */

cout << x << " " << y; /* 0 1 */

في الكود أعلاه جعل أولاً قيمة x تساوي قيمة y فأصبحت قيمة x تساوي 0 , ثم قام معامل الزيادة بزيادة المتغير y بواحد فأصبحت قيمة y تساوي 1 .

معاملات الاسناد :

هناك أربعة معاملات اسناد أخرى وهي : معامل الاسناد والاضافة (=+) ومعامل الاسناد والطرح (=-) ومعامل الاسناد والضرب (=*) ومعامل الاسناد والقسمة (=/) .
وظيفة هذه المعاملات أنها تقوم بعملية حسابية رياضية مع اسناد في وقت واحد , مثلاً لو كان لدي متغير x وقيمته تساوي 10 وأردت اضافة 6 إليه ستصبح قيمة x تساوي 16 , وسيكون الكود كالتالي :

int x = 10;

x = x + 6; /* x = 10 + 6 */

cout << x; /* 16 */

نفس العملية السابقة سنفعلها ببساطة باستخدام المعامل (=+) , سيكون الكود كالتالي :

int x = 10;

x += 6; /* x = x+6 = 10+6 */

cout << x; /* 16 */

مثال آخر :

int i = 9;

i /= 3; /* i = i/3 = 9/3 = 3 */

عليك بالتدرب لفهم هذا الدرس جيداً فهو يعتبر مدخلاً إلى جزء مهم جداً من أساسيات لغة البرمجة وهو الجمل الشرطية مثل جملة if...else وجمل التكرار مثل جملة for .

الادخال والإخراج في فيجوال بيسك .نت

noreply@blogger.com (KB) — Sun, 21 Jul 2013 13:50:00 +0000

أولاً : الاخراج في فيجوال بيسك .نت

للاخراج نستخدم الفئة Console مع الطريقة (الدالة) WriteLine ونضع الجملة التي نريد طباعتها بين علامتي التنصيص " " , مثال :

Console.WriteLine("Welcome to my program")

يمكنك طباعة المتغيرات بنفس الطريقة ولكن لا تضعها بين علامتي التنصيص , مثال :

Console.WriteLine(myVariable)

أيضاً تستطيع طباعة جملة ومتغير في نفس الوقت فقط قم بالربط بينهما باستخدام المعامل '&' , مثال :

Console.WriteLine("My variable is " & myVariable)

بنفس الطريقة يمكنك الربط بين جملتين , مثال :

Console.WriteLine("the first statment " & " the second statment")

أما إن أردت إدراج سطر جديد فيمكنك ذلك ببساطة باستخدام الثابت vbNewLine (هذا الثابت معرف مسبقاً في فيجوال بيسك .نت وهو يقوم بادراج سطر جديد ويستخدم مع السلاسل الحرفية Strings) , ولا تنس استخدام المعامل & :

Console.WriteLine("First line" & vbNewLine & "Second line")

ثانياً : الادخال في فيجوال بيسك .نت

للادخال نستخدم الفئة Console مع الطريقة ReadLine والتي تقوم بقراءة مايكتبه المستخدم وتقوم بحفظه في المتغير الذي تسند إليه , انظر لهذا المثال :

Dim myName As String

myName = Console.ReadLine()

حيث ترجع الدالة ()ReadLine مايكتبه المستخدم (أي أن قيمة الدالة تساوي ما قام المستخدم بكتابته) , ثم بواسطة معامل الاسناد '=' قمنا بوضع قيمة الدالة في المتغير myName .

ثالثاً : التعليقات في فيجوال بيسك .نت

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

'هذا عبارة عن تعليق

'سطر تعليق آخر

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

Module Module1

Dim Name As String 'متغير سلسلة حرفية سنضع فيه الاسم

Dim firstNumber, secondNumber As Double

Dim Result As Double 'متغير سنضع فيه نتيجة الجمع

Sub Main()

Console.WriteLine("What is your name?") 'طلب ادخال الاسم

Name = Console.ReadLine() 'انتظار المستخدم ليدخل الاسم

Console.WriteLine("Welcome " & Name & vbNewLine) 'رسالة الترحيب

Console.WriteLine("Enter the first number:")

firstNumber = Console.ReadLine()

Console.WriteLine("Enter the second number:")

secondNumber = Console.ReadLine()

Result = firstNumber + secondNumber

'طباعة النتيجة

Console.WriteLine("Result = " & Result)

'توديع المستخدم

Console.WriteLine(vbNewLine & "Good Bye " & Name)

Console.ReadKey()

End Sub

End Module

أشباه الفئات في CSS

noreply@blogger.com (KB) — Fri, 19 Jul 2013 20:27:00 +0000

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

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

ماهي أشباه الفئات؟

تسمى أيضاً "الفئة المزيفة" أو Pseudo-Class , وهي في الحقيقة تشبه الفئات في عملها أي أنها تقوم بتغيير خواص العنصر الذي نربطه بها , ولكن الفرق بينها وبين الفئات هو أن أشباه الفئات لا تطبق خصائصها على العنصر إلا في حالات معينة أو عند حصول حدث معين مثل النقر على هذا العنصر أو مرور الماوس فوق هذا العنصر .
القاعدة العامة لاستخدام أشباه الفئات :

selector:pseudo-class { property : value; }

كما يمكن استخدام أشباه الفئات مع الفئات حسب القاعدة التالية :

selector.className:pseudo-class { property : value; }

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

أشباه الفئات المتعلقة بالوصلات التشعبية :

الوصلات التشعبية ماهي إلا العنصر <a> الذي يستخدم لإدراج روابط الانتقال في صفحات الويب , وأشباه الفئات المتعلقة بالروابط هي أربعة وهي :

أولاً : شبه الفئة link

وهي خاصة بالروابط فقط , وهي تطبق الخصائص التي تحددها أنت على الرابط في وضعه الطبيعي عندما تفتح الصفحة لأول مرة والذي لم يتم النقر عليه بعد .

ثانياً : شبه الفئة visited

وهي خاصة بالروابط فقط , وهي تطبق الخصائص التي تحددها أنت على الرابط الذي قد تم النقر عليه أي قد تمت زيارته , ولكن ستختفي تماماً الخصائص التي وضعتها في شبه الفئة link .

ثالثاً : شبه الفئة hover

وهي تطبق الخصائص التي تحددها أنت على الرابط (أو أي عنصر في صفحة الويب) عند مرور الماوس فوقه , ومادام مؤشر الماوس فوق الرابط فإن الخصائص التي في شبه الفئة hover هي التي ستطبق على الرابط .

رابعاً : شبه الفئة active

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

<html>

<head>

<style>

/* الوضع الطبيعي للرابط عند فتح الصفحة لأول مرة */

a:link { color : Blue; }

/* بعد زيارة الرابط */

a:visited

{

color: Red;

}

/* عند مرور مؤشر الماوس فوق الرابط */

a:hover

{

color: White;

background-color: Blue;

}

/* اثناء النقر على الرابط */

a:active

{

font-size: 20pt; /* سيكبر حجم الخط */

color: Yellow;

}

</style>

</head>

<body>

</body>

</html>

المثال التالي يوضح استعمال أشباه الفئات hover و active مع الفئات و عناصر HTML أخرى :

<html>

<head>

.class1:hover

{

color: Yellow;

background-color: Blue;

}

.class2:active

{

color: Blue;

background-color: Yellow;

}

</style>

</head>

<body>

<h1 class="class1">With Hover</h1>

<h2 class="class2">With Active</h2>

</body>

</html>

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

<html>

<head>

<style>

.class1:hover, .class2:active, a:hover

{

color: Yellow;

background-color: Blue;

}

</style>

</head>

<body>

<h1 class="class1">With Hover</h1>

<h2 class="class2">With Active</h2>

<a href="#"> Click Here </a>

</body>

</html>

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

الادخال والإخراج في ++C

noreply@blogger.com (KB) — Thu, 18 Jul 2013 20:15:00 +0000

أولاً : الاخراج في ++C

للإخراج نستعمل الكائن cout مع المعامل >> ونضع مانريد طباعته بداخل علامتي التنصيص " " , كهذا المثال :

cout << "Welcome to my program";

ولطباعة قيمة المتغيرات يجب ألا نضعها بين علامتي تنصيص , كهذا المثال :

cout << myVariable;

ولإدراج سطر جديد نستخدم العبارة endl ولا نكتبها بين علامتي تنصيص " " , مثلاً :

cout << "The first line" << endl;

cout << "The second line";

أو مثال آخر :

cout << "The first line" << endl << "The second line";

أيضاً لادراج سطر جديد نستخدم الرمز n\ ويجب ادراجه بداخل الجمل بين علامتي التنصيص كهذا المثال :

cout << "The first line\n";

cout << "The second line";

أو :

cout << "The first line";

cout << "\nThe second line";

هناك رموز أخرى نكتبها بين علامتي التنصيص وتستخدم لأداء بعض الوظائف , مثل الرمز t\ الذي يقوم بإدراج مسافة كبيرة (مثل المسافة التي ندرجها باستخدام الزر Tab في لوحة المفاتيح) , مثال :

cout << "Befor Tab\tAfter Tab";

أيضاً هناك الرمز a\ والذي يدرج نغمة قصيرة كصوت تنبيه (Beep) , مثال :

cout << "You must hear a beep now\a";

ثانياً : الادخال في ++C

يعني الادخال أن نستقبل بيانات من المستخدم للبرنامج ثم نخزنها في أحد المتغيرات أو السلاسل الحرفية , وللادخال نستعمل الكائن cin (وتنطق سي إن) مع المعامل << , مثال :

cin >> myVariable;

ويمكنك ادخال أكثر من متغير في نفس الوقت المهم وضع المعامل << بعد كل متغير :

cin >> var1 >> var2 >> var3;

طريقة الادخال ستكون كالتالي : يستقبل أولاً المتغير var1 ثم المتغير var2 ثم المتغير var3 .

التعليقات في ++C

التعليقات في البرمجة ماهي إلا ملاحظات يقوم المبرمج بكتابتها ليشرح جزءاً غير مفهوم من الكود البرمجي أو لتكون مرجعاً له عند عودته للكود مرة أخرى , وطرق كتابة التعليقات في لغة ++C هي كالتالي :
الطريقة الأولى باستخدام الرمز // وهي تنفع لاضافة تعليق في سطر واحد فقط , مثال :

//هذا عبارة عن تعليق

//يمكن اضافة أسطر تعليق أخرى

الطريقة الثانية باستخدام الرمزين */ و /* حيث يحصر التعليق بينهما ويمكنك اضافة ماشئت من الاسطر , مثال :

هذا عبارة عن تعليق

يمكنك اضافة أسطر اخرى

يمكنك اضافة ماشئت من الاسطر

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

/* برنامج يقوم بحساب مجموع عددين */

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

//الاعلان عن المتغيرات وحجزها في الذاكرة

float number1, number2;

//الطلب من المستخدم ادخال الرقم الأول

cout << "Enter the first number: ";

//number1 انتظارالمستخدم ليدخل الرقم ومن ثم حفظه في المتغير

cin >> number1;

//الطلب من المستخدم ادخال الرقم الثاني

cout << "\nEnter the second number: ";

// number2 انتظارالمستخدم ليدخل الرقم ومن ثم حفظه في المتغير

cin >> number2;

//اصدار تنبيه صوتي ثم طباعة مجموع الرقمين

cout << "\a" << number1 << " + " << number2 << " = " << number1+number2 << endl;

getch();

return 0;

}

نفرض أننا أدخلنا العدد 6.8 ثم أدخلنا العدد 4.9 ستكون مخرجات البرنامج كالتالي :

Enter the first number: 6.8

Enter the second number: 4.9

6.8 + 4.9 = 11.7

ملاحظة لتفهم عمل الكائنين cin و cout :
البيانات في الادخال والاخراج تتبع ببساطة اتجاه المعاملات (اتجاه الأسهم) << و >> :

cout << "Enter the first number: ";

تذهب البيانات المراد طباعتها إلى الكائن cout والذي يقوم بدوره بطباعتها على الشاشة .

cin >> number1;

يُظهر الكائن cin مؤشراً يومض على الشاشة ينتظر المستخدم ليدخل البيانات فإذا أدخل البيانات وضغط على الزر Enter فإن الكائن cin يستقبل البيانات ويرسلها إلى المتغير number1 فتُحفظ في الذاكرة .

النصوص والتعامل معها في لغة HTML

noreply@blogger.com (KB) — Tue, 16 Jul 2013 10:22:00 +0000

أولاً : العناوين في لغة HTML

للعناوين (headers) ستة أحجام مختلفة (تسمى أيضاً ترويسات) وهي متتالية من h1 إلى h6 , وبكل بساطة ماهي إلى وسوم فكل عنوان له وسم فتح ووسم اغلاق .
مثال :

<html>

<h1>الحجم الأول</h1>

<h2>الحجم الثاني</h2>

<h3>الحجم الثالث</h3>

<h4>الحجم الرابع</h4>

<h5>الحجم الخامس</h5>

<h6>الحجم السادس</h6>

</body>

</html>

ستصبح مشابهة للصورة التالية :

ثانياً : الفقرات

هناك طريقتان لكتابة الفقرات في صفحات الويب , الطريقة الأولى هي أن تكتب ماتريد في الوسم body مباشرة وبدون أي وسوم , مثال :

<html>

<body>

مثال في الفقرات

</body>

</html>

في هذه الطريقة اذا أردت أن تكتب سطراً جديداً فعليك أن تستخدم الوسم <br /> وهذا الوسم ليس له وسم اغلاق .
مثال :

<html>

<body>

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

<br />

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

</body>

</html>

الطريقة الثانية : استخدام الوسم <p>
ببساطة قم بكتابة ماتريد بداخل الوسم <p> , مثال :

<html>

<body>

<p>مثال عن الفقرات</p>

</body>

</html>

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

<html>

<body>

<p>الفقرة الأولى</p>

<p>الفقرة الثانية</p>

</body>

</html>

الخطوط والتعامل معها :

للتعامل مع الخطوط نستعمل الوسم <font> ويأتي مع عدد من الخصائص ومنها خاصيتين مهمتين جداً :

أولاً : الخاصية color

وهي المسؤولة عن تغيير لون الخط لأي نص .
مثال :

<h1><font color="Red">مثال عن الخطوط</font></h1>

مثال آخر :

<h4>مثال عن <font color="Blue">الخطوط</font></h4>

ثانياً : الخاصية face

وهي التي تقوم بتغيير نوع الخط لأي نص .
مثال :

<h3><font face="Tahoma">مثال عن الخطوط</font></h3>

تنسيقات الخطوط :

أولاً : الخط المائل (Italy) , ويتم ادراج خط مائل باستخدام الوسم <i>

ثانياً : الخط العريض (Bold) , ويدرج بواسطة الوسم <b>

ثالثاً : الخط المسطر (underlined) , ويدرج بواسطة الوسم <u>

الوسم BODY

noreply@blogger.com (KB) — Mon, 15 Jul 2013 16:40:00 +0000

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

اولاً : الخاصية background

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

مثال :

حيث تكتب بين علامتي التنصيص " " مسار الصورة بالكامل اذا لم تكن موجودة في المجلد الذي فيه صفحة الويب .

ثانياً : الخاصية bgcolor

وهي اختصار لـ "background color" وهي المسؤولة عن تغيير لون خلفية صفحة الويب , فلو مثلاً حدث خطأ اثناء تحميل خلفية الصفحة فسيبقى المستخدم قادراً على رؤية لون الخلفية الذي تحدده أنت بهذه الخاصية .
مثال :

بداخل علامتي التنصيص " " نكتب اسم اللون أو قيمته في النظام الست عشري (النظام الست عشري هو أحد أنظمة العد في علوم الحاسوب -- باللغة الانجليزية hexadecimal) مثلاً لو رغبنا في تغيير لون الخلفية إلى اللون الأبيض فسنكتب "White" أو "FFFFFF#" , ويمكنك بسهولة الحصول على قيمة اللون في النظام الست عشري عن طريق برنامج الفوتوشوب بواسطة الـ color picker كالصورة التالية :

أو عبر أحد المواقع التي تقدم خدمة الـ color picker مثل موقع colorpicker.com

ثالثاً : الخاصية text

وهذه الخاصية هي المسؤولة عن تغيير لون خط النص في صفحة الويب , وهذا يعني أن جميع عناصر النصوص مثل h1 و p و h5 وغيرها سوف يصبح لونها هو اللون الذي تحدده في الخاصية text .
مثال :

رابعاً : الخاصية dir

وهي اختصار لكلمة "direction" وتعني "اتجاه" وهي تستخدم لتحديد اتجاه الصفحة واتجاه النصوص فيها يعني أن تجعل الكتابة من اليمين إلى اليسار مثل اللغة العربية , أو تجعلها من اليسار إلى اليمين مثل اللغة الانجليزية , وهذه الخاصية تأخذ قيمتين إما "rtl" وتعني "من اليمين إلى اليسار" , أو القيمة "ltr" وتعني "من اليسار إلى اليمين" .
مثال 1 : اتجاه النص من اليمين إلى اليسار :

مثال 2 : اتجاه النص من اليسار إلى اليمين :

هذه هي تقريباً الخواص الأكثر استعمالاً مع الوسم body وتوجد هناك خواص أخرى منها ماهو متعلق بالروابط والوصلات التشعبية وسنتحدث عنها في وقت لاحق , ومنها ماهو متعلق بالحواشي (margins) وسنفهمها في دروس لغة CSS .

انظر للمثالين التاليين لتفهم أكثر الخواص التي ذكرناها :
المثال الأول : خلفية صفحة الويب :
قبل البدء قم بنسخ أي صورة ولصقها في نفس المجلد الذي ستنشئ فيه صفحة الويب , في هذا المثال اسم الصورة التي سأستخدمها هو myBackground.jpg وانت قم باستبدال الاسم باسم صورتك:

<html>

<h1>السلام عليكم</h1>

<h4>مرحباً بكم في موقعي</h4>

</body>

</html>

سترى أن الصورة أصبحت مشابهة للآتي :

المثال الثاني : لون خلفية صفحة الويب :

<html>

<h1>السلام عليكم</h1>

<h4>مرحباً بكم في موقعي</h4>

</body>

</html>

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

التعليقات في لغة HTML :

التعليقات في البرمجة ماهي إلا ملاحظات يقوم المبرمج بكتابتها ليشرح جزءاً غير مفهوم من الكود البرمجي أو لتكون مرجعاً له عند عودته للكود مرة أخرى , وطريقة كتابة التعليقات في لغة HTML هي كالتالي :

التعليقات يتم اهمالها من قبل متصفح الانترنت ولا يقوم بتفسيرها , فمثلاً في الكود السابق لو وضعنا محتويات الوسم h4 بين علامتي التعليق <-- --!> فلن يقوم المتصفح بتفسيرها ولن تظهر في الصفحة :

<html>

<h1>السلام عليكم</h1>

<!--

<h4>مرحباً بكم في موقعي</h4>

-->

</body>

</html>

الآن احفظ الصفحة وستلاحظ أن جملة "مرحباً بكم في موقعي" قد اختفت .

الفئات في CSS

noreply@blogger.com (KB) — Sun, 14 Jul 2013 16:34:00 +0000

ما الذي سيفعله الكود التالي ؟

{

color : Blue;

}

نعم , الكود السابق سيقوم بتغيير لون جميع عناصر h1 في صفحة HTML إلى اللون الأزرق , ولكن ماذا لو أردت أن تغير لون بعض عناصر h1 فقط وليس جميعها؟ مشكلة أليس كذلك؟
من هنا ظهرت الفئات في لغة CSS فهي تضيف للغة مرونة هائلة وأصبح بإمكانك أن تتكيف في خواص العناصر بمرونة كبيرة فمثلاً يمكنك تعديل خواص أحد عناصر h6 مع عدم تعديل خواص باقي عناصر h6 .

الفئات باللغة الانجليزية تعني classes (جمع class) وقد تسمى باللغة العربية "كلاسات - ترجمة حرفية" وتسمى أيضاً "أصناف" وفي مشوارنا التعليمي سنطلق عليها اسم "الفئات" .
القاعدة العامة لاستخدام الفئات هي كالتالي :

selector.className

{

property1 : value;

property2 : value;

}

حيث أن className هو اسم الفئة التي تود ربطها بعنصر HTML , أما selector فهو يمثل عنصر HTML , وليس للفئات تسميات محددة فأنت هو من يحدد تسمية الفئة بأي اسم تريده .
تلميح : عند تسمية الفئة قم باختيار اسم يدل عليها فمثلاً لو أردت صنع فئة تحمل خواص شعار الموقع فقم بتسميتها logo أو site-logo وغيرها , ولا تقم بتسميتها x أو picture أو image وغيرها مع أنه يجوز لك هذا إلا انه قد يسبب لك الارتباك اثناء التصميم .
لنأخذ مثالاً , اكتب الكود التالي :

<html>

<head>

<style>

h3.redColor { color: Red; }

h3.greenColor { color: Green; }

h3.blueColor { color: Blue; }

</style>
</head>
<body>

<h3 class="red">الفئة الحمراء</h3>

<h3 class="green">الفئة الخضراء</h3>

<h3 class="blue">الفئة الزرقاء</h3>

</body>

</html>

كالعادة قم بحفظ الصفحة ثم افتحها بمتصفح الويب , ستكون مشابهة للصورة :

شرح السطر الرابع من الكود السابق وهو :

h3.redColor { color: Red; }

كما ترى استخدمنا الفئة التي سميناها redColor مع العنصر h3 حسب القاعدة العامة التي ذكرناها سابقاً , وهذا يعني ان أي عنصر h3 سوف يصبح باللون الأحمر عندما نربطه مع الفئة redColor وهذا مافعلناه بالضبط في السطر الثامن :

<h3 class="red">الفئة الحمراء</h3>

حيث استدعينا الفئة redColor وربطناها بالعنصر h3 عن طريق الخاصية class .
كل ماذكرته ينطبق أيضاً على الفئتين greenColor و blueColor حيث أن أي عنصر h3 تربطه مع الفئة greenColor سيصبح باللون الأخضر , وأي عنصر h3 يربط مع الفئة blueColor سيصبح باللون الأزرق .

س/ اذا استخدمنا الفئة blueColor التي في المثال السابق مع العنصر h1 , يعني أن نكتب :

<h1 class="blueColor">الفئة الزرقاء</h1>

فهل سيتغير لون العنصر h1 إلى اللون الأزرق ؟
ج/ لا , لن يعمل الكود ولن يتغير اللون إلى الأزرق , لأننا عندما كتبنا h3.blueColor فهذا يعني أننا خصصنا الفئة blueColor لعناصر h3 فقط ولن تتمكن من استخدامها مع أية عناصر اخرى (نفس الشئ ينطبق على الفئتين redColor و greenColor) .

اذن كيف نجعل الفئة متاحة لأي عنصر ؟

لجعل الفئة متاحة لأي عنصر ماعليك إلا أن تكتبها بدون ربطها مع أي عنصر (انتبه أن تحذف النقطة) , مثلاً في المثال السابق سنجعل الفئات redColor و greenColor و blueColor متاحة لأي عنصر HTML سواء h1 أو p او غيره :

.redColor { color: Red; }

.greenColor { color: Green; }

.blueColor { color: Blue; }

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

بدايتك مع CSS

noreply@blogger.com (KB) — Sun, 14 Jul 2013 16:22:00 +0000

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

selector

{

property1 : value;

property2 : value;

property3 : value;

}

حيث أن selector يمثل عنصر HTML الذي نريد تغيير خواصه مثل h3 , وتمثل property الخاصية التي نريد تغييرها مثل width, أما value فهي تمثل قيمة الخاصية التي نريد تغييرها وقد تكون لوناً مثل Red أو رقماً .. إلخ .
ولغة CSS ليست حساسة للمسافات , حيث يمكن كتابة الكود كالتالي :

selector { property1 : value; property2 : value; property3 : value; }

هناك ثلاث طرق لاستخدام أكواد CSS وسنأخذ كل واحدة على حده :
الطريقة الأولى : وضع كود CSS بداخل كود صفحة HTML :
ونفعل هذا باستخدام الوسم <style> الذي يمكن أن نضعه بداخل الوسم <head> , وإليك هذا المثال :

<html>

<head>

<style>

{

background-color: Red;

}

</style>

</head>

<body>

<p> welcome to my page</p>

<p>it's my first page</p>

</body>

</html>

الآن قم بحفظ صفحة HTML ثم افتحها بواسطة المتصفح , سترى أنها أصبحت مشابهة للصورة التالية :

ملاحظة : الخاصية المسؤولة عن التعامل مع الخلفية في لغة CSS هي background ويمكن كتابتها منفردة أو اقرانها بخواص تابعة لها مثل color لتغيير لون الخلفية أو image لتغيير صورة الخلفية .. إلخ , كما يجب ألا تنسى أن خواص CSS تنتهي بالفاصلة المنقوطة .

الطريقة الثانية : وضع كود CSS بداخل عناصر صفحة HTML :
ويتم هذا باستخدام الخاصية style وادراجها في الوسم الخاص بعنصر HTML , وإليك هذا المثال :

<html>

<body>

<p style=" background-color: Red; ">welcome to my page</p>

<p style=" background-color: Yellow; ">it's my first page</p>

</body>

</html>

احفظ الصفحة وستجدها قد أصبحت كالصورة التالية :

ملاحظة : خواص HTML هي تلك التي نجدها بداخل وسوم HTML مثل bgcolor المسؤولة عن تغيير لون الخلفية , و height المسؤولة عن تغيير ارتفاع العنصر وغيرها , أما خواص CSS فهي تختلف بعض الشئ عن خواص HTML .

الطريقة الثالثة : وضع أكواد CSS في ملف خارجي :
ويتم ذلك بوضعها في ملف بالامتداد css. , حيث تسمى هذه الملفات (مستند ورقة أنماط متتالية) , وإليك هذا المثال :
لنقم أولا بانشاء ملف CSS (مستند ورقة الأنماط المتتالية) , افتح المفكرة واكتب الكود التالي :

{

background-color: Red;

color: White;

}

قم الآن بحفظ الملف باسم mystyle.css والأفضل أن تحفظه في نفس المجلد الذي فيه صفحة HTML .
ملاحظة : الخاصية color هي المسؤولة عن تغيير لون الخط في لغة CSS .
لنقم الآن بانشاء صفحة HTML , وسنربط صفحتنا مع ملف CSS بواسطة الوسم link الذي يكتب بداخل الوسم head :

<html>

<head>

</head>

<body>

<p> welcome to my page</p>

<p>it's my first page</p>

</body>

</html>

احفظ الصفحة وافتحها بمتصفح الانترنت , سترى أنها اصبحت هكذا :

ملاحظة : في كود HTML وفي السطر الثالث استخدمنا الوسم link لكي نربط صفحتنا ملف CSS الخارجي , واستخدمنا معه ثلاث خواص كالتالي :
1- الخاصية rel : وهي لتحديد نوع العلاقة بين صفحتنا والملف الخارجي , والعلاقة هي أن الملف الخارجي يمثل ورقة انماط متتالية بالنسبة لصفحتنا .
2- الخاصية type : وهي لتحديد نوع الملف الذي نريد أن نربطه مع صفحتنا ونوع الملف هو ملف CSS نصي .
3- الخاصية href : وهي لتحديد موقع ملف CSS ونكتب فيها مسار الملف مثل "mystyles\mystyle1.css" .

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

قواعد تسمية المتغيرات

noreply@blogger.com (KB) — Sun, 14 Jul 2013 12:01:00 +0000

لتسمية المتغيرات قواعد يجب الاهتمام بها , والاخطاء في تسمية المتغيرات ينتج عنها اخطاء برمجية اثناء وقت الترجمة , وهذه القواعد كالتالي :
1- يجب ألا يبدأ اسم المتغير برقم , ولكن يمكن أن يحتوي على أرقام .
2- يجب ألا يحتوي اسم المتغير على أية رموز , ماعدا الشرطة السفلية ( _ ) .
3- يجب ألا يحتوي اسم المتغير على مسافات , ويمكن استبدال المسافة باستخدام الشرطة السفلية مثل : Khalid_Ali .
4- يجب ألا يكون اسم المتغير هو احدى الكلمات المحجوزة (keywords) لأن هذا سيسبب الارتباك للمترجم اثناء ترجمة البرنامج لهذا منع تسمية المتغيرات بالكلمات المحجوزة , مثلاً لايمكنك تسمية المتغير بالاسم double لانها احدى الكلمات المحجوزة .
5- يجب أن يتكون اسم المتغير من كلمة واحدة فقط , وفي حالة وجود أكثر من كلمتين قم بدمجهما معاً مثل KhalidAli أو الاستعانة بالشرطة السفلية مثل Khalid_Ali .
6- اسماء المتغيرات حساسة لحالة الأحرف , يعني أن المتغير Khalid يختلف عن المتغير khalid ويختلف أيضاً عن khaliD .
7- لا يمكنك تسمية متغيرين بنفس الاسم وعند حصول هذا سيعطيك المترجم رسالة خطأ .

يفضل عند اختيار اسم للمتغير أن يكون موافقاً لدلالة هذا المتغير , مثلاً لو أردت استخدام متغير يدل على الطول فيفضل أن تسميه length أو أي اسم يدل على الطول ولا تقم بتسميته x أو y مع انه يجوز لك هذا إلا أنه قد يسبب الارتباك اثناء محاولة قراءتك أو قراءة الآخرين لبرنامجك .

سوف نرى الآن بعض النماذج لاسماء متغيرات بعضها صحيح و بعضها خاطئ :
1- my name : خاطئ لأنه يحتوي على مسافة .
2- khalid : صحيح .
3- 1st_number : خاطئ لأنه بدأ برقم .
4- first_number : صحيح .
5- my&name : خاطئ لأنه يحتوي على الرمز & .
6- new : خاطئ , لأنه احدى الكلمات المحجوزة .
7- x : صحيح .

المتغيرات في سي++

noreply@blogger.com (KB) — Sun, 14 Jul 2013 11:54:00 +0000

كما عرفنا فالمتغيرات هي أماكن تخزين البيانات في ذاكرة الكمبيوتر وتتيح لنا لغة سي++ التعامل مع كثير من البيانات سواء كانت أرقاماً أو حروفاً أو سلاسل حرفية وغيرها لتستخدم في مختلف العمليات .
القاعدة العامة لتعريف المتغيرات هي كالتالي :

variable_type variable_name = value;

حيث أن variable_type هو نوع المتغير , و variable_name هو اسم المتغير , أما value فهي تمثل القيمة (البيانات) التي نضعها في المتغير .
لنأخذ مثالاً : اذا أردنا أن نصرح عن متغير من النوع integer (عدد صحيح) وأردنا تسميته age و جعلنا قيمته تساوي 20 فسيكون كود سي++ كالتالي :

int age = 20;

حيث ان الكلمة المحجوزة int تشير إلى النوع integer , ويتم تعريف المتغيرات بداخل الاجراء الرئيسي (الدالة الرئيسية main) .

أيضاً يمكنك أن تصرح المتغير أولاً ثم تسند له القيمة لاحقاً :

int age;

age = 20;

لنفهم الموضوع أكثر دعنا نأخذ مثالاً , اكتب الكود التالي الذي يقوم بطباعة قيمة المتغير على الشاشة :

#include <iostream>

#include <conio.h>

using namespace std;

int main ()

{

int age;

age = 20;

cout << "My age is " << age;

getch();

return 0;

}

قم بتشغيل البرنامج , سترى أن المخرجات كالتالي :

My age is 20

س/ في السطر الثامن لماذا لم تضع المتغير age بين علامتي تنصيص " " ؟
ج/ لأنه اذا وضعناه بين علامتي تنصيص لن يطبع البرنامج قيمة المتغير age والتي هي 20 , بل إنه سيطبع لنا اسم المتغير وهو الكلمة age , يعني أن مخرجات البرنامج ستكون كالتالي :

My age is age

وهذا ما لا نريده بالتأكيد بل نريد أن يطبع لنا قيمة المتغير age , لهذا لم نضعه بين علامتي تنصيص " " .

لتسمية المتغيرات قواعد مهمة يجب الاهتمام بها وإلا سيؤدي اهمالها إلى ظهور اخطاء برمجية ويمكنك الاطلاع عليها من هنا : قواعد تسمية المتغيرات.

1: برنامجك الأول في سي++

noreply@blogger.com (KB) — Fri, 28 Jun 2013 22:28:00 +0000

لغة سي++ هي من اللغات عالية المستوى وتستخدم كلمات انجليزية تقريباً بمعناها الأصلي ولهذا تتطلب برنامجاً يسمى مترجم "Compiler" ليقوم بتحويل الأوامر في سي++ إلى لغة الآلة فالكمبيوتر لايفهم اللغات عالية المستوى بشكل مباشر , وهناك أداة اخرى نحتاج إليها وهي المربط أو Linker وهو أداة تقوم بتجميع ملفات .obj الناتج من عملية الترجمة إلى ملف تنفيذي ويكون عادة بالإمتداد exe. أو مكتبات الربط الديناميكية .dll , وأداة أخرى وهي محرر النصوص والذي سنكتب فيه السطور البرمجية مثل برنامج المفكرة الموجود على نظام الويندوز, في الماضي كانت هذه البرامج متوفرة كل واحد على حدة ويتم ربط البرنامج وترجمته عن طريق أسطر أوامر console , أما اليوم فهي موجودة في برنامج واحد يحتوي على محرر النصوص والمترجم والمربط في آن واحد ولهذا يسمونه بيئة التطوير المتكاملة أو Integrated Development Environment (اختصاراً IDE) , ومن أشهرها Borland C++ وبيئة الفيجوال ستوديو Microsoft Visual Studio المقدمة من شركة ميكروسوفت , كذلك يمكنك استخدام برنامج Dev-C++ المقدم من شركة Bloodshed وهو الذي سنستخدمه في جميع دروسنا ويمكنك تحميله من هنا Dev-C++ .
والآن بعد أن قمت بتثبيت البرنامج وأصبحت جاهزاً هيا بنا لنكتب أول برنامج سي++ وهذه ستكون خطوتك الأولى لمعرفة اساسيات اللغة بإذن الله , الآن قم بفتح برنامج Dev-C++ ثم افتح مشروعاً جديداً وذلك من قائمة File ثم New ثم Source File أو بالضغط على Ctrl+N ثم اكتب في محرر النصوص الخاص بالبرنامج الاسطر التالية :

#include<iostream>

#include<conio.h>

using namespace std;

int main ()

{

cout << "Hi C++";

getch();

return 0;

}

والآن لتنفيذ البرنامج اذهب إلى قائمة Execute ثم اختر Compile & Run أو اضغط على F9 سيظهر مربع حوار لحفظ ملف الشيفرة المصدرية اختر المكان الأنسب لك بحيث يمكنك الوصول للملف لاحقاً ثم انقر على Save .
مبروووووك لقد قمت بكتابة أول برنامج بلغة سي++ وستلاحظ أنه ظهرت على الشاشة عبارة Hi C++ , والآن سنشرح أسطر البرنامج الذي كتبناه سطراً سطراً :

#include<iostream>

في هذا السطر استخدمنا الكلمة include# ومعناها "تضمين" (والرمز # يلفظ هاش أو باوند ويعني توجيه) ثم الكلمة iostream وهو ملف رأسي (أي أن مايكتب بين العلامتين <> في العبارة #include <> يسمى ملف رأسي ويسمى أيضاً مكتبة دوال) , ويحتوي الملف الرأسي على دوال جاهزة تساعد على كتابة البرامج , والملف الرأسي iostream يحتوي على دوال الإدخال والإخراج وهو اختصار لـ Input Output Stream وتضمينه اجباري في البرنامج اذا اردنا القيام بالادخال والاخراج .

#include<conio.h>

وهو نفس السطر السابق ولكن بدلاً من iostream كتبنا conio.h وذلك لكي نستخدم الدالة getch والتي كتبناها في نهاية البرنامج (ستعرف بعد قليل فائدة هذه الداله) , والدالة getch لن تعمل وستظهر رسالة خطأ إذا لم نضمن المكتبة conio.h أما .h فهو امتداد الملفات الرأسية في لغة C (عرفنا سابقاً أن لغة سي++ هي امتداد وتطوير للغة سي وتستخدم اغلب مكتباتها) , أما مكتبات سي++ فلاتحتوي على الامتداد .h وهذا ما لاحظته في المكتبة iostream فهي لاتنتهي بالامتداد .h .
اذن في السطرين السابقين قمنا بتوجيه المترجم أن يضمن المكتبتين iostream و conio.h ويمكننا تضمين مكتبات اخرى بنفس الطريقة .

using namespace std;

ومعناها "قم باستخدام فضاء التسمية المسمى std" وتسمى تقنية الحقل المصرح حيث نستخدم فضاءات الاسماء (Namespaces) في برامجنا باستخدام الكلمة المحجوزة using لتخبر المترجم أن الدوال والمتغيرات مصرحة في مكان محدد من (أغلب الدوال التي سنستخدمها موجودة في فضاء التسمية "namespace" المسمى std) واذا حذفت هذه العبارة ستضطر الى أن تضع std:: قبل كل أمر في البرنامج وهذا متعب جداً , و std اختصار لكلمة Standard .

int main()

وهي الدالة الرئيسية في البرنامج وهي التي يبدأ من عندها تنفيذ البرنامج وتكون موجودة في أي برنامج مكتوب بلغة سي++ مهما كان حجمه أو وظيفته ونلاحظ أنها تبدأ بالقوس المعقوف } وتنتهي بقوس اغلاق { , اما int فتعني ان الدالة main سترجع لنا قيمة عددية صحيحة (في بعض المترجمات مثل Dev-C++ يتوجب عليك أن تجعل الدالة ترجع قيمة عددية صحيحة أما في المترجمات الأخرى مثل الفيجوال سي++ فيمكنك أن تجعل الدالة main لاترجع أي قيمة وذلك بأن تستبدل int بـ void وتمحو الجملة return 0) .

cout << "Hi C++";

قمنا بطباعة Hi C++ على الشاشة وهذا باستخدام الكائن cout وتنطق (سي آوت) ونضع الشئ الذي نريد طباعته داخل علامتي الاقتباس " " (جرب أن تضع كلمة اخرى بدلاً من Hi C++ لترى بنفسك), والرموز المستخدمة مثل << تسمى المعاملات أو Operators وسنتعرف عليها لاحقاً , والكائن cout موجود في المكتبة iostream .

getch();

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

return 0;

معنى return أي ارجاع وهذا السطر يحدد القيمة التي سترجعها الدالة main بعد انتهاء تنفيذها ويتوجب ارجاع القيمة 0 اليها لينتهي تنفيذ البرنامج وستظهر رسالة خطأ اذا لم تكتب هذه العبارة .
ويجب عليك الانتباه ان جميع اوامر لغة سي++ تنتهي بفاصلة منقوطة ولكن لاتقلق فمع استمرارك بالتعلم وكتابة المزيد من السطور البرمجية ستتعود على ذلك .
في الدرس القادم ستنعرف على أنواع البيانات في لغة سي++ .

المتغيرات في فيجوال بيسك .نت

noreply@blogger.com (KB) — Thu, 23 May 2013 21:39:00 +0000

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

التصريح عن المتغيرات :

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

Dim variable_name As variable_type = value

لنأخذ مثالاً : اذا اردنا التصريح عن متغير باسم myVariable من النوع Integer ونضع فيه القيمة 20 سنكتب الكود التالي :

Dim myVariable As Integer = 20

ولكن أين نضع هذا الكود ؟؟
يمكنك وضع هذا الكود داخل الوحدة البرمجية وخارج الاجراء Main :

Module Module1

Dim myVariable As Integer = 20

Sub Main()

Console.WriteLine(myVariable)

console.ReadLine()

End Sub

End Module

ويمكنك استخدام هذا المتغير داخل أي اجراء أو تركيب "Block" داخل الوحدة البرمجية المسماة Module1 وهذه تسمى المتغيرات العامة أو المتغيرات على مستوى الوحدة .
أو يمكنك وضعه داخل الاجراء Main :

Module Module1

Sub Main()

Dim myVariable As Integer = 20

Console.WriteLine(myVariable)

console.ReadLine()

End Sub

End Module

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

Module Module1

Dim myVariable As Integer

Sub Main()

myVariable = 20

Console.WriteLine(myVariable)

console.ReadLine()

End Sub

End Module

المتغيرات الديناميكية :

المتغيرات التي شرحناها سابقاً تسمى المتغيرات الديناميكية Dynamic Variables أي أننا نستطيع تغيير قيمتها في أي وقت , وهناك نوع من المتغيرات الديناميكية يسمى المتغيرات الديناميكية المحلية Dynamic Local Variables وهي التي نصرح عنها داخل الاجراءات حيث تكون حياة المتغير داخل هذا الاجراء فقط ولا يمكن استخدامه خارج الاجراء , وهناك نوع آخر وهو Block Level Variables وهي المتغيرات التي تصرح داخل Block او تركيب ( مثلاً جملة تحكم مثل If...End If , أو جملة تكرار مثل For ) وتكون حياة المغير داخل التركيب الذي صرح فيه فقط ولكن يجب الانتباه إلى أن هذا المتغير يحتفظ بقيمته على مستوى الاجراء حتى ولو خرجت من التركيب الذي عرفته فيه , و للتصريح عن المتغير الديناميكي نستخدم الكلمة المحجوزة Dim , مثال :

Dim myVariable As Integer

المتغيرات الستاتيكية :

ينطبق على المتغيرات الستاتيكية Static Variables كل ما ذكرناه عن المتغيرات الديناميكية , إلا أن المتغير الستاتيكي يحتفظ بقيمته ثابتة حتى نهاية البرنامج , وللتصريح عن المتغير الستاتيكي نستخدم الكلمة المحجوزة Static بدلاً من Dim , مثال :

Static myVariable As Integer

الثوابت :

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

Const Pi As Double = 3.14

يمكنك الاطلاع على الجدول أدناه للتعرف على أنواع البيانات في لغة فيجوال بيسك .نت :

(انقر على صورة الجدول لتكبيرها)

أول صفحة ويب بلغة HTML

noreply@blogger.com (KB) — Thu, 23 May 2013 20:48:00 +0000

عرفت سابقاً أن لغة HTML تعتمد على الوسوم "Tags" في تصميم صفحات الانترنت وهنا تكمن سهولة HTML فهي لا تحوي أي تعقيد اطلاقاً .
توجد هناك عدة برامج لتصميم صفحات الويب مثل برنامج دريم ويفر المخصص لهذا الغرض, وكذلك بيئة الفيجوال ستوديو المقدمة من ميكروسوفت وكلاهما يحتوي على محرر نصوص متطور مع مصمم للصفحات وكذلك العديد من المميزات , ولكننا سنستخدم مبدئياً برنامج "المفكرة" المضمن مع نظام التشغيل "ويندوز" , وستقوم الآن بكتابة اول صفحة ويب بلغة HTML فقط قم بفتح برنامج المفكرة واكتب الكود التالي :

<html>

<head>

<title>صفحتي الأولى</title>

</head>

<body>

أهلا بكم في صفحتي الاولى

</body>

</html>

الآن قم بحفظ الصفحة باسم mypage.htm أو أي اسم تريده المهم ان تحفظها بالامتداد .htm , قم بفتح الصفحة بواسطة متصفح الانترنت , ستبدو تماماً كالتالي :

مبرووووك لقد قمت الآن بكتابة أول صفحة HTML , وشرح الكود كما يلي :
- الوسم <html> : وهو أهم وسهم في لغة HTML ويقع محتوى الصفحة بأكمله بداخل هذا الوسم , سواء المحتوى الذي يظهر للمستخدم أو الذي لا يظهر للمستخدم .
- الوسم <head> : وهو الذي يحوي معلومات عن الصفحة كالعنوان الذي يظهر في شريط عنوان المتصفح (أو في علامة تبويب المتصفح) , كما يحوي معلومات عن كاتب الصفحة ومحتوى الصفحة , ايضاً قد يحتوي على اكواد CSS أو Javascript , وبداخله ترى الوسم <title> الذي يمثل عنوان الصفحة الذي يظهر في شريط عنوان المتصفح .

- الوسم <body> : وهو الذي يوضع فيه محتوى الصفحة الظاهر للمستخدم كالصور والنصوص والقوائم والجداول وغيرها .
الصورة التالية تشرح محتوى أي صفحة انترنت :

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

�� ماهذه الرموز ؟!!

حسناً ,, في متصفحي "موزيلا فايرفوكس" و "أوبرا" لا تظهر الكتابة العربية بالشكل المطلوب لأننا حفظنا صفحتنا عن طريق المفكرة بالترميز "ANSI" , وحل هذه المشكلة بسيط جداً وهو عندما تقوم بحفظ الصفحة باسم عليك أن تغير الترميز من ANSI إلى UNICODE كما في الصورة التالية :

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

2: أنواع البيانات في لغة سي++

noreply@blogger.com (KB) — Wed, 22 May 2013 11:26:00 +0000

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

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

ذاكرة الكمبيوتر منظمة وموزعة بواسطة البايتات (Bytes) , والبايت (Byte) هو أصغر وحدة من الذاكرة يمكن أن تديرها (تتحكم فيها) لغة سي++ , البايت الواحد يمكنه نسبياً أن يخزن كمية صغيرة من البيانات مثل حرف واحد أو رقم صغير (عدد صحيح أو رقم بين 0 و 255) ولكن الكمبيوتر يستطيع معالجة بيانات معقدة أكثر من هذا (مثل البيانات التي تنتج من تجميع عدد من البايتات مثل الأرقام الكبيرة او الأعداد غير الصحيحة) .

الجدول التالي يوضح ملخص لأنواع البيانات الأساسية في لغة سي++ ومقدار البيانات التي يمكن أن تحتويها :

الاسم	الوصف	الحجم	المدى
`char`	Character or small integer.	1byte	signed: -128 to 127 unsigned: 0 to 255
`short int` (short)	Short Integer.	2bytes	signed: -32768 to 32767 unsigned: 0 to 65535
`int`	Integer.	4bytes	signed: -2147483648 to 2147483647 unsigned: 0 to 4294967295
`long int` (long)	Long integer.	4bytes	signed: -2147483648 to 2147483647 unsigned: 0 to 4294967295
`bool`	Boolean value. It can take one of two values: true or false.	1byte	`true` or `false`
`float`	Floating point number.	4bytes	+/- 3.4e +/- 38 (~7 digits)
`double`	Double precision floating point number.	8bytes	+/- 1.7e +/- 308 (~15 digits)
`long double`	Long double precision floating point number.	8bytes	+/- 1.7e +/- 308 (~15 digits)
`wchar_t`	Wide character.	2 or 4 bytes	1 wide character

وسنتعرف على المتغيرات وكيفية التعامل معها في الدرس القادم بإذن الله .