جافا سكريبت وارتباطها ب HTML و CSS

Posted: 28/10/2010 in برمجة, تصميم
الوسوم:, , , , , ,

السلام عليكم ورحمة الله وبركاته

من اكثر ما يميز الجافاسكريبت عن لغات برمجة المواقع الاخرى هي ارتباطها الوثيق بلغتي عرض الصفحات HTML + CSS و سهولة الحصول على مؤتراث كثيرا جدا من خلال التلاعب بخصائص عرض الصفحات .

فكل وسم من وسوم HTML يمكن إدخاله في دالة او معادلة بسيطة للتعديل في طريقة عرضه وحتى إخفائه أو تلاشيه عند حصول حذث معين Event
كمرور الماوس على أحدى العناصر أو وضع مؤقت زمني لأظهار و تلاشي الصور على شكل شرائح Slide Show
وأفضل طريقة لمعرفة اهمية وبساطة  JS هو تنفيد مثال عملي عليه

<h1 style=”color: blue;” onclick=”this.style.color=’blue‘ “>Click Me!</h1>
<h1 style=”visibility: hidden;” onclick=”this.style.visibility=’hidden‘ “>Click Me!</h1>
<h1 style=”opacity: 0.6; background:gray;” onclick=”this.style.opacity=’0.6′,this.style.background=’gray‘ “>Click Me!</h1>

الطريقة السابقة من اسهل الطرق لتطبيق تأثيرات جافا سكريبت على عنصر محدد وفي الامثلة السابقة كان على الوسم H1 و وسم marquee ساشرح الأسطر 1 3 4
في السطر 1 استخدمنا الحذث OnClick داخل الوسم H1 وهذا الحذث يتفعل في حال تم الضغط بالماوس على العنصر الموجود فيه الحذث و هو هنا  النص الموجود بالوسم H1
ناثي الى كود JS وهو  this.style.color حيث this تعني طبق الحدث في العنصر الحالي فقط و style تعني التغيير في خصائص CSS للعنصر و color وتعني اسم خاصية CSS التي سيتم التغيير فيها و بعدها نكتب علامة = متبوعة بعلامة تنصيص ‘ ‘ و نكتب فيها قيمة خاصية عنصر CSS و هو اللون المراد تغييره
السطر 3 توجد ميزة أخرى في اكواد JS و هي القيام باكثر من تأثير على نفس العنصر فقط ضع الفاصلة , و اكتب التأثير  التالي
السطر 4 في هذا المثال قمنا بوضع حدثين مع نفس العنصر و هما onMouseover ( يفعل  عند مرور الماوس على العنصر )
و onMouseout ( يفعل عند ابعاد الماوس على العنصر ) و كذلك نلاحظ قصر الكود حيث يتعامل هنا مع خصائص وسم HTML فقط .
وهي قيمة scrollAmount وتعني سرعة المرور لنص marquee ( وهو وسم HTML يقوم بعرض النصوص والصور بشكل متتابع )
لاحظ انه عن تغيير خاصية العنصر ( تغيير لون النص مثلا ) فإن هذه الخاصية تبقى إلى أن يتم إعادة تحميل الصفحة حيث ترجع جميع العناصر الى قيمها الافتراضية أو أن نضيف حدثاً آخر لأرجاع قيم العنصر .

Advertisements
تعليقات
  1. محسن كتب:

    شكرا لك جميييييييييييل الدرس و انا من محبي جافاسكريبت

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s