Have an account? Sign in
Login  Register  Facebook
Web Development School
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
Quick Table of Contents
[Edit] الصفات و تعديل إستايل العرض بالجافا سكريبت.
تعلمنا في الدروس السابقة كيف نصل إلى النقاط و كيف نغيرها و كيف نضيف نقاط جديدة إلى صفحة الهيتيمل .لكن لم نتعامل مع الـattributes و التي لها يتحدد من خلالها صفات عنصر الهيتميل فمثلا href في التاج a هي التي تحدد العنوان الذي ستنتقل له بالضغط على الإرتباط التشعبي .في هذا الدرس سنتعلم كيف نصل إلى الـattributes و كيف نغير قيمها بالجافا إسكريبت سنعمل خلال هذا الدرس على الكود التالي ,قم بنسخه و احفظه كملف html . 
<!DOCTYPE ...>
<html>
<head>
<title>DOM learning 2</title>
<style>
.first{
	color: red;
}
.second{
	color: blue;
}	
</style>
</head>
<body>
	<h1>simple page</h1>
<div id="para">
	<p id="first" class="first">first paragraph.</p>
	<p id="second" class="second">second paragraph.</p>
	
</div>
<div id="frm">
	
		<a href="http://www.google.com">Search Engine</a><br/><br />
		<form>
input:<input type="text" name="name" id="name" value="" /><br /><br />
option1:<input type="radio" id="radio1" name="op"  value="x"/><br/><br />
option2:<input type="radio" id="radio2" name="op" value="y"/><br/><br />
agree?<input type="checkbox" />
</form>
</div>
</body>
</html>
عند فتح الملف سيكون شكل الصفحة كالتالي .

الطريقة الأبسط للوصول للصفات هو إستخدام الأداة "." بعد النقطة التي تمثل العنصر الذي تريد أن تصل لصفاته ثم بعد ذلك إسم الصفة . لاحظ المثال التالي للوصول إلى قيمة href في اللنك الموجود في الكود بالأعلى . 
var link=document.getElementsByTagName('a')[0]
link.href
عند تنفيذ هذا الكود في الكنسول سيرجع لك. "http://www.google.com/" يمكنك أيضا تغير القيمة الموضوعه للصفة .فمثلا نغير العنوان من عنوان جوجل لعنوان الياهو كالتالي 
link.href="http://www.yahoo.com/"
ستحد أن العنوان الذي يؤدي له اللنك Search Engine قد تغير من عنوان موقع جوجل لعنوان موقع الياهو . من صفات التاج <input/> الصفة value و التي تحدد النص المكتوب بداخله . أكتب في الصندوق input الكلمة awcore كما بالصورة.

عندما تصل لقيمة الخاصية value ستجد أنها النص المكتوب كالتالي: 
document.getElementById('name').value
عند كتابة الأمر في الكنسول سيرجع "awcore" . يمكنك أيضا تغير القيمة المكتوبه في الصندوق من خلال الجافا سكريبت هكذا. فعند تنفيذ هذا الأمر في الكنسول 
document.getElementById('name').value ="www.awcore.com"
ستجد أن النص في الصندوق تغير إلى www.awcore.com إستخدام هذه الطريقة التي إستخدمناها في الوصول لقيم الصفات ترجع لنا "قيمة محسوبة " و ليس القيم الموضوعه لها في هيتميل .فمثلا بالنسبة للتاج </input> من النوع type="radio" له صفة تسمى checked.مهمة هذه الصفة هي أنك عندما تريد أن يكون علامة الراديو معلم عليها بشكل إفتراضي فأنت تضع لها القيمة "checked" هكذا 
:<input type="radio" id="radio2" name="op" checked="checked" value="y"/>
في الجافا سكريبت عندما تصل للصفة checked كما فعلنا بالأمثلة السابقة فإنه إن كان معلم عليها سيرجع لك true و ليس "checked" أما إن لم يكن معلم عليها فسترجع flase .في المثال الذي نعمل عليه علم على option1 و اكتب في الكنسول 
document.getElementById('radio1').checked
سيرجع true إذا أزلت العلامة و أعدت تنفيذ الكود سيرجع false.و بالطبع القيم true و false تسهل التعامل أكثر في الجافا سكريبت . هناك صفتين في الهيتميل هما calss و for تتفق أساميهم مع كلمات خاصة بالجافا سكريبت و لذلك للوصول لهم بالجافا سكريبت نتسخدم className و htmlFor. 
document.getElementById('first').className
ترجع "first"

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

getAttribute(الصفة):تأتي لك بقيمة الصفة التي تحددها و ترجع القيمة الموجوده في هيتميل و ليس القيمة المحسوبه .

و كتطبيق على الكود الذي نعمل عليه 
document.getElementById('first').getAttribute('class')
سترجع "first" و يتضح أنها ترجع القيم الموجودة في هيتميل و ليس المحسوبه من خلال هذا المثال 
document.getElementById('radio1').getAttribute('checked')
سترجع null و ليس true أو false . ملحوظة :بالنسبة لمتصفح إنترنت أكسبلورر لتأتي بالقيمة الأصلية و ليس المحسوبه نستخدم getAttribute("الصفة", 2);

setAttribute("الصفة", "القيمة"):تستخدم لتغيير قيمة صفة كالتالي:

document.getElementById('name').setAttribute('value','awcore')
عند تنفيذ هذا الأمر ستجد أنه كتب في الصندوق الكلمة awcore.

removeAttribute("الصفة"):تحذف الصفة التي تحددها .مثلا الفقرة الأولى first paragraph. باللون الأحمر لأن لها الclass قيمته red .

و لذا إذا أزلت الصفة class سيرجع اللون إلى اللون الأسود كالتالي: 
document.getElementById('first').removeAttribute('class')
ستجد أن الفقرة الأولى تغير لونها من الأحمر إلى الأسمر .

hasAttribute("الصفة"):تختبر إن كانت الصفة موجوده أم لا .

document.getElementById('first').hasAttribute('href')
سترجع flase لأن الصفة غير موجودة . الآن لنرى كيف يمكننا تعديل الإستايل css بإستخدام الجافا سكريبت. الطريقة الأول بتغيير ال class و بالطبع يمكنك من الإستايل شيت تحديدمواصفات كل كلاس .و لدينا في المثال الذي نعمل عليه كلاسين الأول .first و الثاني .second و مما يتضح من الإستايل شيت أن الأول محدد له أن يكون اللون أحمر أما الثاني فلون الكتابة يكون أزرق .إذ غيرنا الكلاس للفقرة الأولى من first ل second سيتغير اللون من الأحمر إلى الأزرق ونقوم بذلك كالتالي: 
document.getElementById('first').className='second'
و بالطبع بما أنه بإستخدام الكلاس في الإستايل شيت يمكن تحديد عديد من المواصفات للكلاس كل هذه المواصفات ستتغير بتغير الكلاس .أما لتغير شيء واحد كاللون أو حجم الخط مثلا فذلك يتم من خلال الصفة style

الصفة style

و هي صفة ذات ميزات خاصة في الجافا سكريبت.و الميزة الخاصة في الصفة style أنها لها عدد من الخصائص تماثل خصائص الإستايل شيت مثلا في الإستايل شيت تستخدم الخاصية color لتغيير اللون أيضا الصفة style لها خاصية تسمى color يمكن من خلالها تغير اللون فلتغير لون الفقرة الأولى في مثالنا first paragraph يمكن عمل ذلك كالتالي: 
document.getElementById('first').style.color='orange'
عند تنفيذ هذ الأمر في الكنسول سيتغير اللون إلى اللون البرتقالي.

ملحوظة:في الإستايل شيت خصائص تتكون من كلمتين مثل font-family ,في الجافا سكريبت تكون مكتوبة هكذا fontFamily حيث تبدأ الكلمة الثانية بحرف كبير بدلا من الشرطة '-'.

في هيتمل يمكنك إضافة الإستايل شيت بثلاث طرق :
  • من خلال الصفة style في التاج الذي تريد تحديد الإستايل له و تسمي هذه الطريقة بالسطرية (inline) و هذا مثال عليها: 
    • <p style="font-family: monospace; background-color: #fcc;margin-bottom: 10px">Text</p>
  • أو من خلال التاج <style> كالمثال الذي ذكرناه في أول الدرس.
  • أو من خلال ملف خارجي .
و إستخدام style في الجافا سكريبت يغير الإستايل من خلال الطريقة السطرية .فمثلا الفقرة الثانية في المثال لونها أزرق second paragraph. لكن إذا نفذت هذا الكود : 
document.getElementById('second').style.color
سيرجع لك "" نص خالي و ليس 'blue',و ذلك لأن اللون الأزرق محدد للفقرة بإستخدام الطريقة الثانية و ليس الأولى .حيث لا يوجد داخل التاج < p> الصفة style . لتغير اللون إلى اللون الأصفر: 
document.getElementById('second').style.color='yellow'
ما حدث هو أن هذا الكود يضع داخل التاج الصفة ستايل و يحدد من خلالها اللون أي يجعله هكذا: 
<p id="second" class="second" style="color: yellow;">second paragraph.</p>
يمكنك التأكد من هذا بنفسك إذا إنتقلت للقسم html في أداة مطوري المواقع كما بالصورة :

و لذا إذا إستخدمت hasAttribute لتعرف إن كان التاج فيه الصفة style أم لا هكذا: 
document.getElementById('second').hasAttribute('style')
سيرجع لك true أي أنه الصفة موجودة ,حيث تم وضعها عندما قمت بتغير اللون .

و يأتي الآن سؤال آخر كيف يمكننا الوصول لخصائص للإستايل إن كان محدد بالطريقة الثانية أو الثالثة ؟

الإجابة أن هناك دوال مخصصة لعمل ذلك ,لكن يعيبها أن للإنترنت إكسبلورر دالة تختلف عن التي لبقية المتصفحات للقيام بهذه الوظيفة و هذا يضيف جهد إضافي في البرمجه ,كما أن هذه الدوال ترجع القيم محسوبة و ترجعها بشكل يحتاج بعض المعالجة بالجافا سكريبت لكي يمكن الإستفاده منها فمثلا ترجع اللون الأحمر بطريقة rgb هكذا "rgb(0, 0, 255)", و لذا عمليا يفضل إستخدام دوال الـ jquery ,أما الآن فسنذكر دوال الجافا سكريبت لمجرد العلم بها و في الدروس المتقدمه سنعود لنعرف كيف يمكننا في حالة إختلاف الدوال المستخدمه في المتصفحات المختلفة لنفسه المهمة أن نجعل الكود صالح للعمل على جميع المتصفحات و و أيضا قد نتعرض لأمثلة لكيفية معالجة البيانات بحيث تفهمها الجافا سكريبت للغرض الذي نريده. في الإكسبلورر تستخدم 
العنصر .currentStyle("الخاصية");
أما في المتصفحات الأخرى: 
document.defaultView.getComputedStyle(العنصر,null).getPropertyValue("الخاصية");
December 13, 2011