Lujain

الأعضاء
  • المساهمات

    331
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • Days Won

    24

السُّمعة بالموقع

179 Excellent

المعلومات الشخصية

  • النبذة الشخصية بكالوريوس علم الحاسوب Computer Science
    خبيرة بتطوير البرمجيات ومواقع الويب
    عندي إلمام بالتقنية ومهتمّة بشكل كبير بتطوير محتوى الويب العربي.
  • الموقع

4 متابعين

آخر الزُوّار

1,995 زيارة للملف الشّخصي
  1. تعرّفنا في الجزء الأول من هذا الدرس على ما يقدّمه نظام التخطيط الشبكي Grid layout في CSS وقدّمنا ماهيّة الشبكة Grid ومساراتها Tracks. نكمل في هذا الجزء المفاهيم الأساسيّة لنظام التخطيط الشبكي. خطوط الشبكة Grid Lines تجدر الإشارة إلى أنه عندما نعرّف شبكة فإن ما نحدّده هو مسارات هذه الشبكة، وليس الخطوط. تعطينا الشبكة بعد تعريفها خطوطًا مرقمة لاستخدامها عند تحديد مواقع العناصر. على سبيل المثال في الشبكة أدناه، المكوَّنة من ثلاثة أعمدة وصفيْن تكون لدينا أربعة خطوط أعمدة Column lines. تُرَقَّم خطوط الأعمدة وفقًا لوضع الكتابة في المستند. في اللغات التي تتّجه كتابتها من اليسار إلى اليمين Left to right (الإنكليزية مثلا)، يكون السطر الأول على الجانب الأيسر من الشبكة. في اللغات ذات اتجاه الكتابة من اليمين إلى اليسار Right to left (العربية مثلا)، يصبح السطر 1 على الجانب الأيمن من الشبكة. يمكن أيضًا تسمية الخطوط، سوف ننظر في كيفية فعل بذلك في درس لاحق من هذه السلسلة. وضع العناصر وفق الخطوط سنكتشف وضع العناصر على أساس الخطوط Line-based placement بتفصيل كامل في درس لاحق. يوضح المثال التالي كيفية القيام بذلك بطريقة بسيطة. عند وضع عنصر نستهدف السطر، بدلا من المسار. في المثال التالي وضعنا العنصرين الأوليْن على ثلاثة مسارات أعمدة Column track، وذلك باستخدام الخصائص grid-row-start ،grid-row-end grid-column-start وgrid-column-end. بالعمل من اليسار إلى اليمين، يوضَع العنصر الأول (box1) على خط العمود 1، ويمتد إلى خط العمود 4 الذي يوجد في حالتنا أقصى يمين الشبكة. يبدأ هذا العنصُر في خط الصف 1 (في الأعلى) وينتهي في خط الصف 3؛ وبالتالي يمتد على اثنين من مسارات الصفوف Row tracks. يبدأ العنصر الثاني (box2) على خط عمود الشبكة 1، ويمتد على مسار واحد. هذا هو الوضع المبدئي، لذا لسنا بحاجة إلى تحديد خط النهاية. كما أنه يمتد على اثنين من مسارات الصفوف ابتداءً من خط الصف 3 إلى خط الصف 5. والعناصر الأخرى تضع نفسها في المساحات الفارغة على الشبكة. <div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } لا تنس أنه يمكنك استخدام Grid Inspector في أدوات مطوري فايرفوكس لترى كيف توضع العناصر على خطوط الشبكة. خلايا الشبكة Grid Cells خلية الشبكة هي أصغر وحدة على الشبكة، من الناحية النظرية تشبه خليةَ جدول: هي المسافة بين صفّين متجاورين وعمودين متجاورين من خطوط الشبكة. كما رأينا في الأمثلة السابقة، عند تعريف الشبكة على عنصُر فإن العناصر المتفرّعة من هذا العنصُر ستتموضع في الشبكة بواقع عنصر لكل خليّة. تظهر في الصورة أدناه شبكة الخلايا مع تحديد الخليّة الأولى في الشبكة مناطق الشبكة Grid areas يمكن أن تمتد العناصر على خلية واحدة أو أكثر، إما أن تمتد عن طريق الصف أو عن طريق العمود، وهذا ينشئ منطقة شبكة. يجب أن تكون مناطق الشبكة مستطيلة، ليس من الممكن إنشاء منطقة على شكل حرف L على سبيل المثال. في الصورة تمتد منطقة الشبكة المميزة باللون الأخضر على مساريْ صفوف ومساريْ أعمدة. المزاريب Gutters يمكن إنشاء المزاريب أو الأزقة بين خلايا الشبكة باستخدام الخاصيّتين grid-column-gap وgrid-row-gap، أو بالخاصيّة المختصرة grid-gap. في المثال التالي أنشأنا فجوة gap بقياس 10 بكسل بين الأعمدة و 1em بين الصفوف. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 1em; } <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> تُحسَب المساحة التي تأخذها الفجوات قبل إسناد المساحة إلى المسارات ذات القياس المرن (الوحدة fr). تعمل الفجوات لأغراض التحجيم مثل مسارات الشبكة العادية ، ولكن لا يمكنك وضع أي شيء في الفجوات. بالنسبة للتموضع وفقا لخطوط الشبكة فإن التعامل مع الفجوات يكون على أساس أنها خطّ ثخين. الشبكات المتداخلة Nesting grids يمكن لعنصر في شبكة أن يصبح حاوية لشبكة أخرى. لدينا في المثال التالي شبكة أنشأناه سابقا، وتتكوّن من ثلاثة أعمدة وصفَّين، مع عصرَين مُتموضعَيْن (box1 وbox2)؛ إلا أن العنصر الأول في المثال أدناه يحتوي على عناصر فرعية. وبما أن هذه العناصر ليست متفرّعة مباشرةً عن العنصر الذي عرّفنا عليه الشبكة فإنها لا تشارك في تخطيط الشبكة. <div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> <div class="nested">c</div> </div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div> إذا طبّقنا الخاصيّة display: grid على الصّنف box1 فإنه سيكون بإمكاننا تعريف مسارات على عنصر الصنف ويصبح هو الآخر شبكة، تتموضع داخلها العناصر. .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-columns: repeat(3, 1fr); } في هذه الحالة الشبكة المتداخلة ليس لها علاقة بالشبكة الأم parent. كما ترون في المثال أن grid-gap لم ترث من الشبكة الأم وخطوط في الشبكة المتداخلة لم يتم محاذاتها مع الخطوط في الشبكة الأم. وضع العناصر في طبقات باستخدام z-index يمكن أن تشغل عناصر الشبكة نفس الخلية. إذا عدنا إلى مثالنا مع العناصر التي وضعت باستخدام رقم السطر، يمكننا تغيير هذا لجعل اثنين من العناصر تتراكب كما في المثال التالي: <div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; } العنصر box2 الآن متداخل مع العنصر box1. يظهر العنصر box2 فوق العنصر box1 لأنbox2 يأتي بعد box1في ترتيب العناصر. التحكم في الترتيب يمكننا التحكم في ترتيب العناصر التي تتراكب باستخدام خاصية z-index تمامًا كما هو الحال مع تموضع العناصر. إذا أعطينا قيمة أقل للخاصيّة z-index في box2 من box1 فسيُعرَض تحت box1. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; z-index: 2; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; z-index: 1; } كان هذا الدرس والدرس الذي قبله نظرة سريعة جدا على المفاهيم الأساسيّة لنظام التخطيط الشبكي Grid Layout. تمعّن في أمثلة التعليمات البرمجية وجرّب التغيير في القيم والخصائص لكي تتبلور في ذهنك المفاهيم الأساسية في التعامل مع نظام التخطيط الشبكي في CSS. ترجمة - بتصرّف - للمقال Basic concepts of grid layout الذي اشترك في كتابته مساهمو موزيللا Mozilla contributors.
  2. يضيف التخطيط الشبكي Grid layout في CSS نظامَ شبكةٍ ثنائي الأبعاد إلى الأنماط لاستخدامه في تخطيط مساحة رئيسية لصفحة ويب أو عناصر صغيرة في واجهة المستخدم. سنتعرّف في هذه المقالة على نظام التخطيط الشبكي في CSS مع شرح أمثلة عملية للمفاهيم الأساسية في بناء هذا التخطيط. سنتطرَّق إلى المفاهيم المذكورة في هذا الدرس بتفصيل أكثر في دروس قادمة. ماهي الشبكة Grid؟ هي مجموعة متقاطعة من الخطوط الأفقية والعمودية، مجموعة تمثل الصفوف وأخرى تمثل الأعمدة، توضع عناصر الشبكة وفقًا لخطوط الأعمدة Columns والصفوف (الأسطُر) Rows. لدى نظام التخطيط الشبكي الميزات التالية: قياسات مسار Track ثابتة وقياسات مرنة: يمكنك إنشاء شبكة بقياس وحجم مسارات ثابت Fixed track sizes - باستخدام وحدة القياس بكسل Pixel مثلًا، ويمكنك إنشاء شبكة باستخدام قياسات مرنة اعتمادًا على النسبة المئوية أو باستخدام وحدة fr الجديدة المصممة لهذا الغرض. تموضع العنصر: يمكنك وضع العناصر في موقع دقيق على الشبكة باستخدام أرقام الأسطر، الأسماء أو عن طريق استهداف منطقة من الشبكة. تحوي الشبكة أيضًا على خوارزمية للتحكم في وضع العناصر التي لم يُحدَّد موضعها بصراحة على الشبكة. إنشاء مسارات إضافية للاحتفاظ بالمحتوى: يمكنك تعريف شبكة على نحو صريح عن طريق تخطيط الشبكة ولكن نظام تخطيط الشبكة يتعامل أيضًا مع المحتوى المضاف خارج الشبكة المعلن عنها، بإضافة صفوف وأعمدة إضافية حسب الحاجة. تُضمَّن ميزات مثل “إضافة أعمدة ما دام في العنصر الحاوي Container مساحة لاستقبالها” في نظام تخطيط الشبكة. التحكم بالمحاذاة Alignment: تحتوي الشبكة على ميزات المحاذاة للتحكم في كيفية محاذاة العناصر مرة واحدة في مساحة الشبكة، وكيف تُحاذى الشبكة بالكامل. التحكم في المحتوى المتداخل Overlapping Content: يمكن وضع أكثر من عنصر واحد في خلية الشبكة، أو يمكن أن تتداخل المناطق جزئيًا. ويمكن بعدها التحكم في هذه الطبقات باستخدام الخاصيّة z-index. تخطيط الشبكة نظام تخصيص قوي وعندما تُدمَج مع أجزاء أخرى من CSS مثل Flexbox، يمكن أن تساعدك على إنشاء تخطيطات كان من المستحيل في السابق بناؤها في CSS. كل ذلك يبدأ من خلال إنشاء شبكة ضمن حاوية شبكة. حاوية الشبكة Grid Container تُنشَأ حاوية شبكة بتعيين الخاصيّة display بالقيمة grid أو inline-grid على عنصر. وبمجرد فعل ذلك تصبح جميع العناصر المتفرّعة مباشرة عن العنصر المذكور عناصر شبكة. لدينا في المثال أدناه عنصر div يُطبَّق عليه الصنف wrapper. يحوي هذا العنصر بداخله خمسة عناصر أبناء. <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> لنجعل جميع العناصر التي يُطبَّق عليها الصنف .wrapper حاوية شبكة، بإعطائه الخاصيّة display: grid: .wrapper { display: grid; } جميع العناصر المتفرّعة مباشرة من العنصر div السابق هي الآن عناصر شبكة. في متصفح الويب، لن ترى أي فرق في كيفية عرض العناصر مقارنة بحالتها قبل تحويلها إلى شبكة، حيث إن الشبكة قد أنشأت عمود شبكة واحدًا للعناصر. عند هذه النقطة، قد تجد أنه من المفيد العمل على إصدار فايرفوكس للمطورين، والذي يتيح أداة Grid Inspector في أدوات مطور الويب. إذا عرضت هذا المثال في فايرفوكس وتفحصت الشبكة التي أنشأتها في المثال فستشاهد رمزًا صغيرًا بجوار قيمة الشبكة. عند النقر عليه فإن المتصفّح سيرسُم شبكة على العنصر في الصفحة. تعطيك هذه الأداة فكرة أفضل عن مايحدث مع الشبكات الخاصة بك بصريًا. مسارات الشبكة Grid Tracks تُعرَّف الصفوف (الأسطر) والأعمدة على الشبكة باستخدام الخصائص grid-template-rows وgrid-template-columns التي تحدد مسارات الشبكة. مسار الشبكة Grid track هو المسافة أو البعد بين أي خطَّيْن متجاوريْن على الشبكة. في الصورة أدناه يمكنك أن ترى مسارًا محدّدًا باللون الأخضر: هذا هو مسار الصف الأول في الشبكة. لنضف مسارًا إلى مثالنا السابق عن طريق إضافة الخاصية grid-template-columns ثم نحدّد قياس مسارات الأعمدة Column tracks. في المثال أدناه أنشأنا شبكة من ثلاثة مسارات أعمدة، قياس كل منها 200 بكسل. تتموضع العناصر الأبناء على هذه الشبكة بواقع عنصر واحد في كل خلية. <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } وحدة القياس fr يمكن تعريف المسارات باستخدام أي وحدة قياس. تقدّم الشبكة أيضًا وحدة قياس إضافية لمساعدتنا على إنشاء مسارات مرنة Flexible tracks. وهي وحدة fr الجديدة التي تمثل جزءًا من المساحة المتاحة في العنصُر الحاوي للشبكة. يُنشئ المثال التالي ثلاثة مسارات متساوية العرض تزداد وتتقلص وفقًا للمساحة المتاحة. <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } في المثال التالي، عرّفنا شبكة من مسار بقياس 2fr ثم مسارين بقياس 1fr. تُقسَّم المساحة المتاحة إلى أربعة. يُعطَى جزآن للمسار الأول وجزء واحد لكل من المسارَيْن الآخريْن. .wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; } في المثال الأخير، سوف نمزج بين استخدام وحدة القياس الثابتة pixel مع وحدات الأجزاء fr. المسار الأول هو 500 بكسل. تُؤخذ قيمة هذا العرض الثابت من المساحة المتاحة. وتُقسَّم المساحة المتبقية إلى ثلاثة أجزاء وتُخَصص بالتناسب مع اثنين من المسارات المرنة fr. .wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; } إنشاء مسارات باستخدام التعليمة ()repeat لإنشاء شبكات كبيرة مع الكثير من المسارات يمكن استخدام التعليمة ()repeat لتكرار عناصر المسارات أو أجزاء منها. يمكن أن تُكتَب الشبكة التاليّة: .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } بالطريقة أدناه: .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } يمكن تطبيق التعليمة ()repeat على جزء من عناصر المسار. ننشئ في المثال التالي شبكة بمسار ابتدائي على 20 بكسل، ثم ننشئ الجزء الموالي من الشبكة بتكرار مسار ذي قياس 1fr ست مرات ثم ننشئ في الأخير مسارا قياسه 20 بكسل. .wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; } يمكن استخدام التعليمة ()repeat لإنشاء نمط من المسارات المتكرّرة. ننشئ في المثال التالي شبكة من عشرة مسارات وذلك بتكرار النمط “مسار بقياس 1fr يليه مسار بقياس 2fr” خمس مرات. .wrapper { display: grid; grid-template-columns: repeat(5, 1fr 2fr); } الشبكة الضمنية Implicit والشبكة الصريحة Explicit عرّفنا في الأمثلة السابقة لإنشاء الشبكات مسارات الأعمدة باستخدام الخاصية grid-template-columns، ولكن لندع الشبكة تنشئ صفوفًا حسب الحاجة للمحتوى. تُنشَأ هذه الصفوف في الشبكة الضمنية. تتكون الشبكة الصريحة من الصفوف والأعمدة التي نحددها باستخدام grid-template-rows وgrid-template-columns. إن أضفت محتوى خارج الشبكة المحدَّدة تلك، أو إن احتجت لمسارات جديدة في الشبكة نظرا لكميّة المحتوى؛ فإن الشبكة ستُنشئ الصفوف والأعمدة في الشبكة الضمنية. تأخذ هذه المسارات مبدئيًّا قياسا تلقائيا Auto-sized، لذا سيعتمد القياس على المحتوى الموجود بها. يمكنك أيضا تعيين قياس محدد للمسارات التي تُنشَأ في الشبكة الضمنية باستخدام خاصتيْ grid-auto-rows وgrid-auto-columns. في المثال التالي، استخدمنا grid-auto-rows لضمان أن المسارات التي تُنشَأ في الشبكة الضمنية ذات ارتفاع 200 بكسل. <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; } قياس المسارات و ()minmax قد نرغب، عند إعداد شبكة صريحة أو تحديد قياس الصفوف أو الأعمدة التي أُنشِئت تلقائيًّا،في منح المسارات قياسًا أدنى؛ مع التأكد من أنها ستتوسّع لتتناسب مع أي محتوى يُضاف إليها. على سبيل المثال، قد أرغب في ألا تتقلص الصفوف إلى أقلّ من 100 بكسل، ولكن إذا كان المحتوى الخاص بي يمتد إلى 300 بكسل في الارتفاع، فأود أن يمتد الصف إلى هذا الارتفاع. الحل هو استخدام الدّالة ()minmax. في المثال التالي استخدمنا الدّالة ()minmax قيمةً للخاصيّة grid-auto-rows. ستُنشَأ الصفوف تلقائيا بحد أدنى يبلغ 100 بكسل طولًا، وحد أقصى تلقائي auto. يعني استخدام auto أن الحجم سوف يبدو في حجم المحتوى ويمتد لإعطاء مساحة لأطول محتوى في خلية موجودة في هذا الصف. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); } <div class="wrapper"> <div>One</div> <div>Two <p>I have some more content in.</p> <p>This makes me taller than 100 pixels.</p> </div> <div>Three</div> <div>Four</div> <div>Five</div> </div> ألقينا في هذا الدرس نظرة عامّة على الشبكة في نظام التتخطيط الشبكي ومساراتها وكيفية تعريفها. سنكمل في الدرس الموالي حديثنا عن نظام التخطيط الشبكي ونتعرَّف على خطوط الشبكة واستخداماتها. ترجمة - بتصرّف - للمقال Basic concepts of grid layout الذي اشترك في كتابته مساهمو موزيللا Mozilla contributors. حقوق الصورة الصورة البارزة محفوظة لـ Freepik
  3. قدّمنا في الدرس السابق جافاسكريبت وذكرنا تموضعها في الوِب بالنسبة لـHTML وCSS، كما تحدّثنا عن واجهات برمجة التطبيقات الخاصّة بالمتصفّح وتلك القادمة من طرف ثالث. سنبدأ في هذا الجزء من الدرس النظر في بعض التعليمات البرمجية، وأثناء ذلك، يمكنك استكشاف ما يحدث فعليًا عند تشغيل شفرة جافاسكريبت في صفحتك. ما الذي تفعله جافاسكريبت على صفحتك؟ لنلخص بإيجاز قصة ما يحدث عند تنزيل صفحة وِب في المتصفح. عندما يُنزّل المتصفّح الشفرة التي كتبتها، والمكوّنة من وسوم HTML، أنماط CSS وتعليمات جافاسكريبت فإنه يشغّلها داخل بيئة تنفيذ (علامة تبويب Tab في المتصفح). تشبه هذه العملية المصنع الذي يأخذ المواد الخام (الشفرة) ويُخرج المنتح (صفحة وِب). يُنفّذ معالج جافاسكريبت JavaScript engine الموجود في المتصفّح تعليمات جافاسكريبت بعد أن تُجمَّع HTML وCSS وتوضعان في صفحة وِب. يضمن انتظار التجميع أنّ بنية الصفحة وتنسيقها موجودان بالفعل عند بدء تشغيل جافاسكريبت، أي أنه عند تشغيل جافاسكريبت تكون جميع تعليمات HTML وCSS موجودة ونفّذها المتصفّح. يعدّ هذا الأمر جيّدًا، إذ أن استخدام جافاسكريبت الشائع هو تعديل HTML و CSS ديناميكًيا لتحديث واجهة المستخدم، من خلال واجهة برمجة التطبيقات DOM التي تحدّثنا عنها في الدرس السابق؛ فإن نُزِّلت تعليمات جافاسكريبت وحاول المتصفّح تشغيلها قبل أن يكون هناك HTML و CSS فستحدث أخطاء. أمان المتصفح تعدّ كل علامة تبويب Tab في المتصفح دلوًا منفصلًا لتشغيل الشفرة (تسمى هذه الدلاء “بيئات التنفيذ” Execution environments من الناحية التقنية). يعني هذا أنه في معظم الحالات تُشغَّل الشفرة في كل علامة تبويب منفصلة عن الشفرات في بقية التبويبات، ولا يمكن للتعليمات البرمجية في علامة تبويب واحدة أن تؤثر مباشرة على التعليمات البرمجية في علامة تبويب أخرى - أو على موقع وِب آخر. هذا إجراء أمني جيد. لو لم يكن هذا هو الحال، لكان بإمكان القراصنة كتابة صفحات وِب مهمّتها سرقة المعلومات من المواقع الأخرى التي يزورها المتصفّح، وغيرها من هذه الأشياء السيئة. ملاحظة: هناك طرق لإرسال التعليمات البرمجية والبيانات بين مواقع وِب / علامات تبويب مختلفة بطريقة آمنة، ولكن هذه تقنيات متقدمة لن نغطيها في هذا الدرس. جافاسكريبت قيد التشغيل عندما يواجه المتصفح كتلة تعليمات برمجية من جافاسكريبت، فإنه يعمل بالترتيب، من أعلى إلى أسفل. وهذا يعني أنك تحتاج إلى توخي الحذر في الترتيب الذي تضعه فيه. على سبيل المثال، في شفرة جافاسكريبت التي شاهدناها في المثال الأول: var para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() { var name = prompt('Enter a new name'); para.textContent = 'Player 1: ' + name; } قمنا باختيار فقرة نصية (السطر 1)، ثم استدعينا مستمع الحدث Event listener بتطبيق التابعaddEventListener على الفقرة النصية المُخزَّنة في المتغيّر para (السطر 3)؛ لذا عندما يُنقر على النص تُشغَّل كتلة التعليمات البرمجية في الدالة updateName(). تُسمّى كُتلة التعليمات البرمجية القابلة لإعادة الاستخدام باستدعاء اسمها “وظائف” أو “دوال” Functions. يُطلب من المستخدم اسم جديد ثم يُدرَج هذا الاسم في الفقرة لتحديث العرض. إذا بدّلت ترتيب أول سطرين من التعليمات البرمجية، فإن الشفرة البرمجية لن تعمل . ستحصُل بدلا من ذلك خطأ في وحدة تحكم المتصفح الخاصة بالمطورين Console: -TypeError: para is undefined. وهذا يعني أن الكائن para غير موجود بعد، لذلك لا يمكننا إضافة مستمع الحدث إليه. ملاحظة: هذا خطأ شائع جدًا. يجب أن تكون حذرًا أن الكائنات Objects المشار إليها في التعليمات البرمجية موجودة قبل محاولة استخدامها. الفرق بين التعليمات البرمجية المفسَّرة Interpreted و المُترجَمة Compiled لابد وأنك سمعت في سياق البرمجة بمصطلحيْ التفسير Interpretation و الترجمة Compilation. جافاسكريبت هي لغة مفسَّرة. تُشغَّل تعليمات جافاسكريبت البرمجية من أعلى إلى أسفل وتُرجَع نتيجة تشغيل التعليمات البرمجية على الفور. لست بحاجة لتحويل التعليمات البرمجية إلى شكل مختلف قبل أن يقوم المتصفح بتشغيلها. من ناحية أخرى، تُحوَّل الشفرة البرمجية للغات المترجمة إلى شكل آخر قبل أن يشغّلها الحاسوب. على سبيل المثال تُجمَّع C / C ++ في لغة Assembly التي يُشغّلها الحاسوب. لكلّ من المنهجيْن ميزات، لكنّها خارج نطاق هذا الدرس. جانب الخادوم Server Side و جانب العميل Client Side لابد وأنك سمعت بمصطلحي من جانب الخادوم وجانب العميل، خاصة في سياق تطوير الوِب: الشفرة من جانب العميل Client side هي شفرة تُشغَّل على حاسوب المستخدم. يُنزّل العميل التعليمات البرمجية التي ينفّذها المتصفّح ليعرض صفحة الوٍب. سنتحدّث في هذا الدرس عن جافاسكريبت من جانب العميل. من ناحية أخرى تُنفَّذ شفرة جانب الخادوم على الخادوم، ثم تُرسَل نتيجة التنفيذ إلى المتصفّح ليعرضها. مثال على لغات الوِب الشائعة من جانب الخادوم PHP وبايثون وروبي و ASP.NET. وجافاسكريبت! يمكن أيضا استخدام جافاسكريبت كلغة من جانب الخادوم، على سبيل المثال في بيئة Node.js الشائعة. يُستخدم مصطلح ديناميكي Dynamic لوصف كل من جافاسكريبت من جانب العميل واللغات من جانب الخادوم. تشير كلمة ديناميكي إلى القدرة على تحديث عرض صفحة الوِب أو التطبيق لإظهار أشياء مختلفة في ظروف مختلفة، وتوليد محتوى جديد حسب الطلب. تُنشِئ الشفرة من جانب الخادوم ديناميكيا محتوى جديدًا على الخادوم، سحب بيانات من قاعدة بيانات على سبيل المثال؛ في حين أن جافاسكريبت من جانب العميل تُنشِئ ديناميكيا محتوى جديدًا داخل المتصفح (العميل)، على سبيل المثال إنشاء جدول HTML جديد، وإدراج البيانات المطلوبة من الخادوم في ذلك الجدول، ثم عرض الجدول في صفحة وِب للمستخدم. يعمل المنهجان معًا عادة. يشار إلى صفحة الوِب التي لا يوجد بها محتوى ديناميكي بأنها ثابتة Static، حيث يظهر دائما نفس المحتوى بغضّ النظر عن الزائر. كيف تضيف جافاسكريبت إلى صفحتك؟ يتم تطبيق جافاسكريبت على صفحة HTML بطريقة مشابهة لـ CSS. في حين تستخدم CSS عناصر <link> لتطبيق الأنماط الخارجية وعناصر <style> لتطبيق الأنماط الداخلية على HTML، تحتاج جافاسكريبت إلى صديق واحد فقط في عالم HTML، العنصر <script>. دعونا نتعلم كيفية العمل. جافاسكريبت داخلي أنشئ مستند HTML بالمحتوى التالي <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <title>مثال تطبيقي لجافاسكريبت</title> </head> <body> <button>انقر هنا</button> </body> </html> </html> استعرض الملف في متصفح الوِب وفي محرر النصوص. سترى أن HTML أنشأت صفحة وِب بسيطة تحتوي على زر قابل للنقر. بعد ذلك، انتقل إلى محرر النصوص وأضف ما يلي مباشرة قبل وسم الإغلاق <body/>: <script> // سنضع تعليمات جافاسكريبت هنا </script> سنضيف الآن بعض جافاسكريبت داخل عنصر <script> لجعل الصفحة تفعل شيئا أكثر إثارة للاهتمام. أضف الشفرة التالية أسفل السطر // سنضع تعليمات جافاسكريبت هنا مباشرة: function createParagraph() { var para = document.createElement('p'); para.textContent = 'لقد نقرت على الزرّ!'; document.body.appendChild(para); } var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); } احفظ الملف في محرّر النصوص ثم حدّث الصفحة على المتصفح. يجب أن الآن أن تظهر فقرة جديدة أسفل الزّر عند النقر عليه. ملاحظة: إذا لم يعمل المثال الخاص بك، راجع الخطوات مرة أخرى وتحقق من أنك فعلت كل شيء بشكل صحيح. هل حفظت الملف بامتداد html (مثلا lesson1.html)؟ هل أضفت العنصر <script> بعد علامة <body/> مباشرة؟ هل أدخلت جافاسكريبت تماما كما هو موضح؟ جافاسكريبت حساسة لحالة الأحرف +(صغيرة Lowercase أو كبيرة Uppercase)، لذلك تحتاج إلى إدخال الشفرة تماما كما هو مبين، وإلا فلن تعمل. جافاسكريبت خارجي ماذا لو أردنا وضع جافاسكريبت لدينا في ملف خارجي؟ دعونا نستكشف هذا الآن. أولا، أنشئ ملفًا جديدا في نفس المجلّد الذي يوجد به ملف HTML وسمّه script.js. تأكد من أنه يحتوي على امتداد اسم الملفjs، وهذه هي الطريقة التي يُتعرَّف بها على أننا أمام ملف يحوي شفرات برمجية مكتوبة بجافاسكريبت. بعد ذلك، انسخ كل النص البرمجي من الوسم <script> في ملف HTML (تلك التعليمات الموجودة في الخطوة 4 من الفقرة السابقة) وألصقه في الملف script.js ثم احفظ هذا الملف. الآن استبدل العنصر الحالي <script> بما يلي. <script src="script.js"></script> يصبح محتوى الملف HTML على النحو التالي: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <title>مثال تطبيقي لجافاسكريبت</title> </head> <body> <button>انقر هنا</button> <script src="script.js"></script> </body> </html> احفظ الملفّ ثم حدّث صفحة الوِب في المتصفح. ويجب أن تحصُل على نفس النتيجة تمامًا! ولكن الآن لدينا جافاسكريبت في ملف خارجي. يعدّ هذا عموما أمرا جيّدًا من حيث تنظيم التعليمات البرمجية الخاصة بك، وجعلها قابلة لإعادة الاستخدام عبر ملفات HTML متعددة. بالإضافة إلى HTML تصبح أسهل للقراءة دون وجود قطع ضخمة من السكربت ملقاة فيها. شفرات جافاسكريبت المضمنة في وسوم HTML تُكتَب شفرة جافاسكريبت أحيانا داخل HTML على النحو التالي: function createParagraph() { var para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); } <button onclick="createParagraph()">Click me!</button> استعرض المثال على Jsfiddle لهذا العرض التوضيحي نفس الوظائف التي عرضناها في الحالتيْن أعلاه، إلا أن عنصر <button> يتضمن خاصيّة onclick مضمنة لتشغيل وظيفة الدالة عند الضغط على زر. رجاءً لا تضمّن شفرات جافاسكريبت في وسوم HTML فهذه الطريقة من الممارسات السيئة (خلط HTML مع جافاسكريبت)، كما أنها غير فعالة لأن عليك أن تدرج الخاصيّة onclick="createParagraph()" على كل زر تريد تطبيق جافاسكريبت عليه. أما باستخدام شفرة جافاسكريبت منفصلة عن HTML فيمكنك تحديد كافة الأزرار باستخدام تعليمة واحدة. الشفرة التي استخدمناها أعلاه لهذا الغرض تبدو كما يلي: var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); } قد يبدو هذا الأمر أطول قليلا من الخاصيّة onclick، ولكنه سيعمل على جميع الأزرار بغض النظر عن عدد الأزرار الموجودة في الصفحة وعدد العناصر التي أُضيفت أو أزيلت، فلا يلزم تغيير جافاسكريبت. ملاحظة: جرب تعديل ملف HTML وإضافة بضعة أزرار أخرى في الملف. عند إعادة التحميل، يجب أن تجد أن جميع الأزرار عند النقر عليها سوف تُظهر فقرة. هذا رائع أليس كذلك؟ التعليقات Comments كما هو الحال مع HTML و CSS، يمكنك كتابة تعليقات في شفرة جافاسكريبت وسيتجاهلها المتصفح. تُستخدم التعليقات لتقديم توضيحات لزملائك المطورين عن كيفية عمل الشفرة، كذلك تمثل مرجعًا لك عن التعليمات البرمجية التي كتبتها عندما تعود مثلًا بعد 6 أشهر لتتذكر مالذي فعلته. التعليقات مفيدة جدًا، ويجب عليك استخدامها في كثير من الأحيان، وخاصة بالنسبة للتطبيقات الكبيرة. هناك نوعان من التعليقات: تعليقات من سطر واحد، وتُكتَب بعد عموديْن مائليْن؛ مثلا: // هذا تعليق تعليق متعدّد الأسطر. يُكتَب بين المحارف / * و * / على النحو التالي: /* هذا تعليق هو الآخر */ تطبيق التعليقات على تعليمات جافاسكريبت السابقة: // دالة تنشئ فقرة جديدة وتضيفها إلى نهاية متن الصفحة function createParagraph() { var para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); } /* 1. نحصُل على مراجع بجميع الأزرار الموجودة في الصفحة ونضعها في مصفوفة 2. نمرّ على جميع الأزرار ونضيف إلى كلّ منها مستمعًا لحدث النقر تُنفَّذ الدالة ()createParagraph عندما ينقر على زرّ في الصفحة. */ var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); } كانت هذه خطوتك الأولى في عالم جافاسكريبت. لقد بدأنا بالمفاهيم النظرية فقط لجعلك تفهم لماذا تُستخدم جافاسكربت وما الأشياء التي يمكنك القيام بها باستخدام هذه اللغة. تعرّفت في هذا المقال على بضعة أمثلة من التعليمات البرمجية وتعلّمت كيفية تتفاهم لغةُ جافاسكريبت مع بقية التعليمات البرمجية على موقع الوِب. قد تبدو الآن جافاسكريبت شاقة بعض الشيء، ولكن لا تقلق - في هذه السلسلة من الدروس سوف نأخذك في خطوات بسيطة تمكّنك من المضي قدمًا في عالم جافاسكربت. ترجمة - بتصرف - للمقال What is JavaScript? الذي اشترك في كتابته مساهمو موزيللا.
  4. سنتعرّف في هذا الدّرس على لغة البرمجة جافاسكربت من منظور عامّ وسنجيب على تساؤلاتك ماهي جافاسكربت؟ وما الذي تقوم بعمله في صفحات الوِب؟ و نتأكد من أن مفهوم جافاسكريبت قد أصبح واضحًا لديك. ملحوظة: يتوجَّه هذا الدرس، والدروس التي تليه - إلى من لديهم معرفة سابقة بأساسيّات التطوير للوِب: HTML وCSS. التعريف العام لجافاسكريبت تُعرَّف جافاسكريبت بأنّها لغة برمجة تسمح لك بتنفيذ أشياء معقدة على صفحات الوِب، تعدّ صفحات الوِب الحديثة أكثر من مجرد موقع يُظهر لك معلومات ثابتة تتصفحها، فهي - مثلًا - تعرض تحديثات المحتوى المباشرة، أو تعرض الخرائط التفاعلية، أو الرسومات المتحركة ثنائية أو ثلاثية الأبعاد، أو تمرّر ملفات الفيديو المصورة، وما إلى ذلك. تمثّل جافاسكريبت الطبقة الثالثة من طبقات تقنيات الوِب القياسية. الطبقتان الأوليان هما HTML وCSS. HTML هي لغة توصيف Markup نستخدمها لإنشاء محتوى الوِب وإضفاء معنى عليه، مثل تعريف الفقرات، العناوين وجداول البيانات أو تضمين الصور ومقاطع الفيديو في الصفحة. CSS هي لغة تعرّف قواعد الأنماط Style rules التي نستخدمها لتطبيق التصميم على المحتوى الذي تصفه HTML، على سبيل المثال، تعيين ألوان وخطوط الخلفية، ووضع محتوى ما في أعمدة متعددة. Javascript هي لغة برمجة تمكّنك من إنشاء محتوى حيوي وديناميكي، التحكم في الوسائط المتعددة، وتحريك الصور وأمورا وكل شيء آخر. حسنًا، ليس كل شيء، ولكن من المدهش ما يمكنك تحقيقه مع بضعة أسطر من شفرة جافاسكريبت. سنأخذ مثالًا يوضح كيفية بناء هذه الطبقات الثلاث فوق بعضها بشكل لطيف. لنأخذ تسمية نص بسيط كمثال. سنضع علامة عليه باستخدام HTML لإعطائه هيكلًا وغرضًا: <p>Player 1: Chris</p> النتيجة حتى الآن. سنضيف تحسينات على الشكل باستخدام CSS: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor:pointer; } أصبحت النتيجة الآن كالتالي. وأخيرًا، نضيف بضعة تعليمات جافاسكريبت لتنفيذ السلوك الديناميكي. var para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() { var name = prompt('Enter a new name'); para.textContent = 'Player 1: ' + name; } غرضنا الآن ليس شرح التعليمات السابقة (سنفعل ذلك لاحقا) ولكن توضيح ما يمكن أن تضيفه جافاسكريبت لـHTML وCSS. عند النقر على النص تظهر نافذة تطلُب إدخال اسم ثم عند إدخال الاسم في النافذة المنبثقة والنقر على زر OK تأخذ النص وتطبعه أمام الجملة Player 1. استعرض المثال على Jsfiddle. الشفرة المصدرية الكاملة للمثال. التشغيل المباشر. يمكن لجافاسكريبت أن تفعل أكثر من ذلك بكثير؛ دعونا نستكشف مزيدًا من التفاصيل. مالذي يمكن لجافاسكريبت فعله حقا؟ تتكون لغة جافاسكريبت الأساسية من بعض ميزات البرمجة الشائعة التي تسمح لك بفعل أشياء مثل: تخزين قيم مفيدة داخل متغيرات Variables. في المثال السابق على سبيل المثال، نطلب من المستخدم ادخال اسم جديد ثم يُخزَّن هذا الاسم في متغير يسمى name. العمليات على أجزاء من النص (المعروفة باسم سلاسل المحارف Strings في البرمجة). في المثال أعلاه، نأخذ سلسلة المحارف Player 1: ونضمها إلى متغير الاسم المذكور أعلاه لإنشاء الجملة الكاملة، على سبيل المثال Player 1: Chris. تشغيل التعليمات البرمجية ردًا على أحداث معينة تحدث على صفحة وِب. في المثال أعلاه استخدمنا الحدث click الذي يخبرنا أن المستخدم نقر على النصّ ثم نشغّل الشفرة التي تعمل على تحديث النص. والكثير! ولكن ما هو أكثر إثارة هو وظيفة بُنيت على لبّ لغة جافاسكريبت الأساسي. تسمى APIs وهي اختصار لـ Application Programming Interface واجهات برمجة التطبيقات. تتيح لك واجهات برمجة التطبيقات (APIs) المزيد من القوة لاستخدامها في شفرة جافاسكريبت. تُعرّف واجهات برمجة التطبيقات (APIs) على أنها مجموعات جاهزة من الشفرات البرمجيّة تسمح لمطور البرامج بتنفيذ برامج سيكون من الصعب أو المستحيل تنفيذها من دون استخدام واجهة برمجة التطبيقات. لأوضح لك الفكرة، تخيل أنك تريد عمل رف خشبي للكتب، سيكون الأمر أسهل بكثير لو توافرت لك الألواح الخشبية والمسامير بالمقاسات المناسبة وما عليك سوى تجميعها معًا لعمل رف الكتب. في حين سيكون الأمر أصعب بكثير لو توجّب عليك أنت العثور على الخشب المناسب وتقطيعه إلى الحجم والشكل الصحيح وإيجاد قياس المسامير المناسب ومن ثم تجميعها معًا لعمل رف الكتب. هذا ما تسهل عمله واجهات برمجة التطبيقات. تنقسم واجهات برمجة التطبيقات (APIs) عمومًا إلى فئتين. واجهات برمجة التطبيقات الخاصّة بالمتصفّح Browser APIs: تُدمَج واجهات برمجة تطبيقات في المتصفّح لإعطائه القدرة على عرض البيانات من بيئة الحاسوب المحيطة به، أو القيام بأشياء معقدة مفيدة. فمثلا: تسمح لك واجهة برمجة تطبيقات DOM وهي اختصار لـ Document Object Model بمعالجة HTML و CSS، إنشاء، إزالة وتغيير HTML ، تطبيق أنماط Styles جديدة ديناميكيًّا على صفحتك، وما إلى ذلك. في كل مرة تُعرَض فيها نافذة منبثقة تظهر على صفحة، أو يُعرَض محتوى جديد -كما رأينا أعلاه في مثالنا السابق- فواجهة DOM هي المسؤولة عن ذلك. تستعيد واجهة برمجة التطبيقات Geolocation API معلومات الموقع الجغرافي، ممّا يفسّر كيف يمكن لخرائط جوجل Google Maps أن تعثُر على موقعك الجغرافي وترسمه على الخريطة. تسمح لك واجهات برمجة تطبيقات اللوحة Canvas و WebGL بإنشاء رسومات متحركة ثنائية الأبعاد وثلاثية الأبعاد. يقوم الأشخاص بأشياء مدهشة باستخدام تقنيات الوِب هذه. تسمح لك واجهات برمجة التطبيقات الصوتية والمرئية مثل HTMLMediaElement و WebRTC بالقيام بأشياء مثيرة للاهتمام حقًا مع الوسائط المتعددة، مثل تشغيل الصوت والفيديو مباشرة في صفحة وِب أو التقاط الفيديو من كاميرا الوِب الخاصة بك وعرضها على جهاز كمبيوتر شخص آخر (جرب العرض التوضيحي snapshot) ملاحظة: لن تعمل العديد من العروض التوضيحية المذكورة أعلاه في متصفح أقدم. عند التجربة، من الأفضل استخدام متصفح حديث مثل فايرفوكس أو كروم أو Edge أو Opera لتشغيل الشفرة. واجهة برمجة التطبيقات الخاصّة بطرف ثالث Third party APIs. لا تُضمَّن هذه الواجهات في المتصفح مبدئيًّا. وعليك عمومًا الحصول على التعليمات البرمجية والمعلومات من مكان ما على الوِب. فمثلا: تتيح لك واجهة برمجة تطبيقات تويتر Twitter API إجراء أشياء مثل عرض أحدث التغريدات على موقعك الإلكتروني. تسمح لك واجهة برمجة التطبيقات لخرائط غوغل Google Maps API بتضمين الخرائط المخصصة في موقعك على الوِب، وغير ذلك من الوظائف. ملاحظة: واجهات برمجة التطبيقات هذه متقدمة، ولن يتم تغطية أي منها في هذه الدّروس، ولكن الروابط الواردة أعلاه توفّر وثائق شاملة إذا كنت مهتمًا بمعرفة المزيد. يوجد الكثير لتعلّمه، لا تفقد حماسك. دراسة جافاسكريبت لمدة 24 ساعة لن تعطيك القدرة على بناء فيسبوك، خرائط غوغل أو إنستغرام. هناك الكثير من الأساسيات التي يجب تغطيتها أولًا. وهذا هو السبب في أنك هنا. سنكمل في الدرس السابق حديثنا عن جافاسكريبت وستكون فرصة على للنظر الفعلي في شفرات برمجية. ترجمة - بتصرف - للمقال What is JavaScript? الذي اشترك في كتابته مساهمو موزيللا.
  5. يمنح استخدام windows form application مرونة أكبر للتطبيق بالتعامل مع واجهات المستخدم UI، في حين أن تطبيقات Console لا توفر واجهات للمستخدم ويتم التفاعل مع التطبيق عن طريق تنفيذ أوامر في الواجهة Console. مثلًا تطبيق جمع رقمين صحيحين يتم في تطبيق Console بإظهار رسائل على التوالي للمستخدم يُطلب فيها إدخال العدد الصحيح الأول ثم العدد الثاني فيحصل على النتيجة. أما في تطبيق windows form application يمكن توفير واجهة للمستخدم تشبه الحاسبة تحوي أزرار يقوم المستخدم بالضغط على الأرقام التي يريد جمعها ثم الضغط على زر النتيجة.
  6. جرّب هذه الطريقة lv1=(ListView)findViewById(R.id.ListView01); lv1.setAdapter(new ArrayAdapter<String>(this,R.layout.list_item, lv_arr)); lv1.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view,int position, long id) { if (lv1.getItemAtPosition(position)=="test 1") { MediaPlayer mp = MediaPlayer.create(getApplicationContext(),R.raw.sound1); mp.start(); mp.setOnCompletionListener(new OnCompletionListener() { public void onCompletion(MediaPlayer mp) { mp.release(); } }); } if (lv1.getItemAtPosition(position)=="test 2") { MediaPlayer mp = MediaPlayer.create(getApplicationContext(),R.raw.sound2); mp.start(); mp.setOnCompletionListener(new OnCompletionListener() { public void onCompletion(MediaPlayer mp) { mp.release(); } }); } //And the rest of the sounds 3,4,5. } }); بالتوفيق
  7. تأكد من أن HAXM installer مثبّت في الـ SDK Manager، بعد تحميله وتشغيله ستجده في المسار التالي: {SDK_FOLDER}\extras\intel\Hardware_Accelerated_Execution_Manager\intelhaxm.exe ملحوظة: في آندرويد استديو تم تغيير الأمر "intelhaxm.exe" إلى "intelhaxm-android.exe". في حال تلقيت خطأ أثناء عملية التثبيت قم بتعطيل Hyper-V من خصائص الويندوز أو عن طريق تنفيذ الأمر التالي: dism.exe /Online /Disable-Feature:Microsoft-Hyper-V بالتوفيق
  8. @javaهذا السطر فقط لأخزن عملية الاختراق التي قام بها المستخدم وهي من نوع SQLHaker حيث RSecurity هو صنف class قمت بإنشاءه ويحوي على الدوال المسؤولة عن أمور الأمان في الموقع ومنها التابع logAction الذي يسجل جميع العمليات التي تحدث على الموقع.
  9. مرحبا قمت بإنشاء ملف Sass كيف يمكنني استخدامه بحيث أعطي اسم الـ selector لعنصر في HTML؟ هل يجب ترجمته لملف CSS إن كان كذلك ماهي الطريقة؟ شكرًا
  10. يعتمد تعبئة الـ Grid View على إنشاء تابع يقوم بملء الـ GridView باستخدام Ajax ليتم عمل append للـ Grid View وفق قيمة data المررة للـ Ajax code من التابع ready حيث يتم أخذ قيمة القائمة المنسدلة وإسنادها لمتحول أو عنصر كـ Label مثلًا في التابع ready كما في المثال التالي: $(document).ready(function () { $('#DropDownList1').change(function () { var SelectedText = $(this).find(":selected").text(); var SelectedValue = $(this).val(); $('#country').text(SelectedText); $('#Value').text(SelectedValue); BindGridView(); }); }); إنشاء التابع BindGridView: <!DOCTYPE html> <html> <head runat="server"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> function BindGridView() { $.ajax({ type: "POST", url: "Index.aspx/GetData", contentType: "application/json;charset=utf-8", data: {}, dataType: "json", success: function (data) { $("#grdDemo").empty(); if (data.d.length > 0) { $("#grdDemo").append("<tr><th>Username</th> <th>Firstname</th> <th>Lastname</th> <th>EmailID</th></tr>"); for (var i = 0; i < data.d.length; i++) { $("#grdDemo").append("<tr><td>" + data.d[i].Firstname + "</td> <td>" + data.d[i].Lastname + "</td> <td>" + data.d[i].Username + "</td> <td>" + data.d[i].EmailID + "</td></tr>"); } } }, error: function (result) { //alert("Error login"); } }); } </script> </head> النموذج: <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:listitem value="1">Australia</asp:listitem> <asp:listitem value="2">India </asp:listitem> <asp:listitem value="3">Singapore</asp:listitem> <asp:listitem value="4">South Africa</asp:listitem> </asp:DropDownList> <br /> <asp:Label ID="country" runat="server"></asp:Label> <br /> <asp:Label ID="Value" runat="server"></asp:Label> <asp:GridView ID="grdDemo" runat="server"> </asp:GridView> </div> </form> </body> Bind Data to GridView Using jQuery
  11. يُشير مصطلح performance envelope أو flight envelope بشكل عام إلى قدرات التصميم من حيث السرعة، عامل الحمولة أو الإرتفاع، يُطبّق هذا المصطلح على الكثير من المجالات مثل قدرة طائرة على المناورة عندما ترتفع سرعة الطائرة بشكل كبير لتتجاوز حد معيّن هنا يطلق مصطلح أن الطائرة تطير خارج المغلف "outside the envelope" وهو الحد الخطر الذي لا يجب تجاوزه. من هنا يمكننا استنتاج أن لأي تطبيق مهما كان يتمتع بأداء ممتاز لابد أن يكون له حد أعلى يقف عنده ولا يمكن تجاوزه لأنه سيعود بنتائج سيئة. وكما يقول المثل "ما زاد عن حده انقلب الى ضده". لنسقط الفكرة هنا ونأخذ لمحة بسيطة عن مفهوم نظام HDFS وهي اختصار لـ Hadoop Distributed File System وتعني نظام الملفات الموزّع وهو نظام محمول وقابل للتطوير مكتوب بلغة جافا. يقوم نظام HDFS بتوزيع البيانات المخزّنة عبر الخوادم وتخزين نسخ متعددة من البيانات على خوادم مختلفة لضمان عدم ضياع أي من البيانات في حال فشل أحد الخوادم (يوفّر نظام ملفات Hadoop قدرات توافر عالية). يعتمد أداء تطبيقات Hadoop على عدّة عوامل بما في ذلك التكوين الذي قمت بعمله، مواصفات الحاسب، تكوين الذاكرة وإعدادات JVM (Java Virtual Machine). كذلك لا يحتسب الوقت اللازم لبدء تشغيل JVM من ضمن سرعة الأداء. وبما أن Hadoop يوفر مجموعة من الخيارات لضبط الأداء Performance فيما يتعلق بوحدة المعالجة المركزية، القرص الصلب والذاكرة فإنه يتم النظر إلى تحسين استخدام هذه الموارد وخاصة الذاكرة والقرص الصلب لرفع مستوى أداء التطبيق دون أن يتجاوز عتبة "المغلف".
  12. برأيي الطريقة الأمثل هي بناء ويب سيرفيس تقوم هي بالاتصال بقاعدة البيانات وجلب البيانات لعرضها والتعامل معها في التطبيق. الأمر الآخر أن مايكروسوفت طرحت مؤخرا مفهوم الـ Universal App أصبح بإمكانك بناء تطبيق ويندوز يعمل كتطبيق Windows Store ، Windows Phone أو ويندوز تابلت في نفس الوقت. الفكرة الرائعة الآن هي إنشاء Cross Platform باستخدام Xamarin بحيث تتيح لك بناء تطبيق يعمل على Android ، iOS و Universal App بلغة C# و بنفس طريقة بناء ال Universal App.
  13. توفر تقنية MD5 إمكانية تشفير النصوص بطريقة لا يمكن فيها الرجوع للنص الأصلي بحيث تتم المقارنة بين النصوص بعد التشفير ولا يتم التعامل مع النصوص بصيغتها الأصلية. يتم تشفير النصوص باستخدام الصف MD5 في C# وإنشاء غرض منه من النوع MD5CryptoServiceProvider: كما في المثال التالي: MD5 md5 = new MD5CryptoServiceProvider(); ومن ثم استدعاء الدالة CopmuteHash وتمرير معامل Argument وهو النص المراد تشفيره باستخدام ASCIIEncoding.ASCII.GetBytes(text). //compute hash from the bytes of text md5.ComputeHash(ASCIIEncoding.ASCII.GetBytes(text)); بعد ذلك قم بأخذ القيمة من الغرض md5 عن طريق الدالة Hash حيث أن القيمة المرتجعة هي عبارة مصفوفة من byte. byte[] result = md5.Hash; في النهاية أنشئ StringBuilder واعمل append للنتيجة كما في المثال التالي: public static string MD5Hash(string text) { MD5 md5 = new MD5CryptoServiceProvider(); //compute hash from the bytes of text md5.ComputeHash(ASCIIEncoding.ASCII.GetBytes(text)); //get hash result after compute it byte[] result = md5.Hash; StringBuilder strBuilder = new StringBuilder(); for (int i = 0; i < result.Length; i++) { //change it into 2 hexadecimal digits //for each byte strBuilder.Append(result[i].ToString("x2")); } return strBuilder.ToString(); } تشفير نصوص باستخدام MD5
  14. أتذكّر أنني قمت بعمل تطبيق استخدمت فيه media element لتشغيل رابط فيديو من اليوتيوب جرّب الطريقة التالية: Youtube Video Sample - Windows Phone 8