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

الأحد، 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 و هي:

getElementsByTagName(tagName) -

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

getElementById(id) -

تستخدم هذه الدالة للوصول إلى الوسوم الخاصة بـ 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) الخاص به. و شكل الصفحة سوف يكون كالتالي: