الرئيسية / الأرشيف للـ يناير 2017

الأحد، 29 يناير 2017

تصميم صفحة ويب ديناميكة باستخدام جافا سكربت javascript



جافا سكربت (javascript) هي لغة برمجة تعمل على جانب العميل (client side).
فائدة جافا سكربت أنها تمككنا من إنشاء صفحات ويب ديناميكية كما تُمكن للمستخدم التفاعل مع صفحات الويب. سوف نستخدمها في التحكم في بعض خصائص وسم HTML 
لا توجد علاقة بين لغة البرمجة المعروفة java و لغة javascript


أولاً سوف نصمم صفحة HTML بسيطة
و الكود الازم لتصميم هذه الصفحة هو:

<html>



 <head>



  <title>



   جافا سكربت



  </title>



 </head>



 <body>



  <div id="myDiv">



   <h1>



    This is my Div.



   </h1>



  </div>



 </body>



</html>

و هذه الصفحة  تحتوي على وسم (div) يحمل الـ (id) التالي:

id="myDiv"
سوف نستخدم هذا الـ (id) حتى نتمكن من الوصول للوسم و التحكم فيه

 و للتحكم في عناصر HTML يمكن استخدام احدى الدوال التالية و التي توفرها لغة javascript و هي:

تستخدم هذه الدالة للوصول إلى الوسوم الخاصة بـ HTML عن طريق تمرير اسم الوسم. 

تستخدم هذه الدالة للوصول إلى الوسوم الخاصة بـ HTML عن طريق تمرير الـ id الخاص بالوسم المحدد لهذه الدالة مثلا:

document.getElementById("myDiv");

و يتم كتابة أكواد جافا سكربت داخل صفحة الويب داخل وسم script. سوف نضيف وسم script بعد نهاية وسم body 

 <script>



  var d = document.getElementById("myDiv");



  d.style.color = "red";



 </script>
قمنا بتعريف متغير (d) حتى يسهل علينا الكود و يجعله قابلاً للقراءة بدلاً عن كتابة الكود بالصورة التالية:

document.getElementById("myDiv").style.color = "red";

ما نريده هو تغيير الشكل الخاص بالوسم المحدد. يتم كتابة الخاصية المطلوبة بعد (style) ثمّ تحديد الخاصية المراد التحكم فيها، و هنا هي الخاصية (color) و من ثمة اسناد القيمة المناسبة.

 للتعامل مع الخصائص المختلفة يجب اتباع النمط التالي عند كتابة الخاصية بعد (style):
كتابة الكلمة الأولى بالحروف الصغيرة (small letters) و من ثمة كتابة الحرف الأول من الكلمة التي تليها بالحروف الكبيرة (capital letters) بدون الفصل بين الكلمتين بمسافة 
مثلاً للتعامل مع حجم الخط:

document.getElementById("myDiv").style.fontSize = "25px";

و لأن صفحة الويب هي عبارة عن مستند HTML نلاحظ أن يتم الوصول للعناصر عن طريقة كتابة (document) ثم استخدام الدوال المتاحة.


و عند عرض الصفحة مرة أخرى سوف يتم تنفيذ أكواد جافا سكربت (javascript) و تغيير لون الوسم المحدد و هو الوسم div الذي تمكنا من الوصول إليه باستخدام الـ (id) الخاص به. و شكل الصفحة سوف يكون كالتالي:

تمّ النشر بـ أضف تعليق

الاثنين، 23 يناير 2017

تصميم قائمة منسدلة باستخدام HTML و jQuery


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


الخطوة الأولى: تصميم هيكل الصفحة


<html>

<head>

<title>

قائمة منسدلة

</title>

</head>

<body>

<h2>

<span id="clickToShow">



          < 



</span>

مقالات

</h2>

<ul class="menu" >

<li>

برمجة

</li>

<li>

ويب

</li>

</ul>

</body>

</html>

محتوى الصفحة بسيط جداً، فداخل الوسم body نجد الوسم h2 و بداخله الوسم span ، و فائدة الوسم span هي في أنه لا يقوم بملء المساحة التي يوجد بها كما في الوسم div، بل إن الوسم span يقوم يحجز المساحة المناسبة له و أيضا الفائدة الثانية هي حتى يسهل علينا التحكم في عملية الضغط على (>).


الخطوة الثانية: إضافة أكواد الـ CSS

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

تتيح لنا CSS عبر الخاصية display التحكم في عملية ظهور العناصر.
أولاً يجب علينا تحديد عنصر الـ HTML الذي نريد تطبيق أكواد CSS عليه. و يمكننا الوصول لعناصر HTML عن طريق اسم الوسم، او باستخدام الـ (كلاس class) و الذي يمكننا من التعامل مع أكثر من وسم او عن طريق الـ (id) و الذي يتيح لنا التعامل مع وسم واحد فقط و لا يمكن ان يتكرر نفس الـ id لأكثر من وسم.
و هنا سوف نقوم بالوصول للوسم الخاص بالقائمة عن طريقة استخدام الكلاس، و للوصول للكلاس يجب إضافة اسم الكلاس مسبوقاً بنقطة ( . )
و للوصول للوسم باستخدام الـ id يتم كتابة الـ id المعين مسبوقاً بعلامة ( # )
بعد ذلك سوف نخبر المتصفح أن يقوم بإخفاء القائمة عن طريقة اسناد القيمة none للخاصية display كالتالي: 

<style>



 .menu{



  display:none;



 }



</style>
بعد إعادة تحميل الصفحة نلاحظ اختفاء القائمة.



الخطوة الثالثة: إضافة أكواد jQuery

ببساطة (جيه كويري jQuery) هي مكتبة تمّ تطويرها باستخدام لغة جافا سكربت، و هي مبسطة و أسهل من جافا سكربت.
في هذه الخطوة نريد عند الضغط على (>) أن تظهر القائمة و عند الضغط مرة ثانية عليها أن تختفي.

 يجب تحميل ملف jQuery أولاً من الموقع الرسمي الخاص بـ jQuery

بعد ذلك يتم تضمين الملف ضمن ملفات صفحة الويب و ربطه مع صفحة الويب عن طريق الوسم script و يمكننا كتابته دخل الوسم head كالتالي:
<script type="text/javascript" src="jquery-1.11.1.min.js"> </script>
و لكتابة الأكواد اللازمة لتنفيذ ما نريده يتم كتابة الاكواد الخاصة بـ jQuery داخل وسم script و هنا سنقوم باضافته بعد نهاية الوسم body

 

<script>



  $(function(){



   $("#clickToShow").click(



    function(){



     $("ul").toggleClass("menu");



    }



   );



  });



</script>

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

$("#ClickToShow")
و من ثمة يتم تحيد الحدث الذي عن حدوثه يجب تنفيذ الدالة و هو الحدث click ( أي عند الضغط ). و بعد تحديد الحدث المناسب يجب علينا الإعلان على الدالة التي يجب تنفيذها.

كما هو معلوم أن الخاصية display هي التي تستخدم في عملية عرض عناصر HTML و هذه الخاصية يتم تطبيقها على الوسوم الذي يحمل الكلاس (menu) فإذا ما قمنا بإزالة هذا الكلاس هذا يعني أنه لن يتم تطبيق هذه الخاصية. و هذا هو ما تقوم به الدالة ()toggleClass فهي تقوم بإزالة الكلاس المحدد إذا كان موجوداً و العكس، أي إذا لم يكن الكلاس موجوداً سوف تقوم بإضافته للوسم ul.



تمّ النشر بـ أضف تعليق

الأحد، 15 يناير 2017

إضافة أيقونة إلى صفحة ويب | Favicon

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


لتحديد الشعار (الأيقونة) يجب إضافة الوسم link 
<link rel="shortcut icon" href="fb.png" />
و الذي يحتوى على الخصائص:

  • rel

     لتحديد نوعية الملف الذي نريد ربطه بالصفحة المحددة، و هنا تمّ اسناد                      القيمة shortcut icon لأننا نريد إضافة شعار لصفحة الويب.

  • href

     لتحديد مسار الصورة التي نريدها كشعار لصفحة الويب مع تحديد إمتداد تلك الصورة.

و سوف يكون الكود كالتالي:

و نلاحظ وجود شعار فيسبوك بجانب عنوان الصفحة





تمّ النشر بـ 4 تعليق
الاشتراك في: الرسائل (Atom)