المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : java_script الدرس 13



zaizo max
04-17-2013, 03:05 AM
بسم الله الرحمن الرحيم
*******
"اللهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم "

--------------------------------------------------------------------------
تكلمنا فيما سبق عن ال element وال node وال sibling وقولنا كلها تشير الى شئ
واحد الا وهو ال tag وتكلمنا ايضا عن ال object وقولنا انه النسخة من الشئ مع امكانية
التعديل على هذه النسخة وذكرنا ايضا ان عند تعريف متغير من النوع object بذلك قد
مكون عرفنا ان هذا المتغير حصل على كل خصائص properties ال object الذى عرفناه منه
لاحظ


<!DOCTYPE HTML>
<html>
<head>
<title>Return about DOM</title>
</head>

<body>

<b id="bold" style="color: darkblue;" >
بسم الله الرحمن الرحيم
</b>
**********
var x= document.getElementById("bold");
x.style.color="#ff0000";
</script>
</body>
</html>

دعنا نفصل شوية فى الكود السابق !!
فى الكود السابق ادرجنا Tag وهو ال b وكتبنا بداخله
ثم عرفنا متعير x وعرفنا انه object م ال b اذن انت الان عرفت ان
ال x قد حصل على كل خصائص attribute ال b هنا بدليل اذا قمت بتعطيل
السكربت بوضعه بين <!-- --> ستجد ان الخط بالون الازرق
الغامق وبتفعيل الكود بحذف العلامتين السابقتين قبل وبعد السكربت سيتغير اللون الى
االلون الاحمر اذن انت قد فهمت ان ال x قد حصل على نسخة من ال b وتم التعديل عليها

ملحوظة:
ذكرنا كلمتى ( تعطيل وتفعيل ) ماذا نعنى بذلك ؟!!!
فى ال javaScript ما يسمى بال comment او التعليقات ما هى التعليقات ؟
هى الاشياء التى لا يتم تنفيذها بداخل الكود اى يتم تجاهلها كليا حتى وان كانت الالف الاسطر
ودى هتفيدنا بايه ؟!! تفيدنا التعليقات فى شرح الكود وذالك اذا كان الكود طويل ولاسيما اذا
كان معقد ويحتوى على اسطر برمجية كثيرة ودوال وشروط....الخ
كيف اكتب ال comment ؟ لكتابة التعليقات
طريقتين 1 - فى سطر واحد 2- فى اكثر من سطر
1 - لكتابة التعليق فى سطر واحد لابد عليك كتابة //
2 - ~~~~~~~~~~~~~~~~~~~~~~~~~~~ /* هنا يكتب التعليق */



<!DOCTYPE HTML>
<html>
<head>
<title>Return about DOM</title>
</head>

<body>

<b id="bold" style="color: darkblue;" >
بسم الله الرحمن الرحيم
</b>
**********
//var x= document.getElementById("bold");
/*x.style.color="#ff0000";*/
</script>
</body>
</html>

لاحظ انه لن يتم عمل السكربت وذلك لاننا قمنا بكتابته كتعليق


<html>
<head>
<title>Return about DOM</title>
</head>

<body>
<b id="bold" style="color: darkblue;" >
بسم الله الرحمن الرحيم
</b>
**********
function changeContent(){
var x= document.getElementById("bold");
x.innerHTML="<h2>welcom zaizo max</h2>"
}
</script>
<br />
<button onclick="changeContent();"></button>
</body>
</html>

لاحظ فى الكود السابق انه لا يوجد شى جديد عرفنا function وبداخلها متغير من النوع
object يحتوى على كل ما بداخل ال tag b لا شئ جديد لكن هناك شئ مثير جدا هل لاحظته ؟!!!!
الا وهو تغيير كل محتوى ال b خذا هذا الكود سيتم التوضيح عليه اكثر


<!DOCTYPE HTML>
<html>
<head>
<title>Return about DOM</title>
</head>

<body id="bold">
<b style="color: darkblue;" >
بسم الله الرحمن الرحيم
</b>
<p>
لا الله الا الله محمد رسول الله
</p>
**********
function changeContent(){
var x= document.getElementById("bold");
x.innerHTML="<h1>الله اكبر </h1>";
}
</script>
<br />
<button onclick="changeContent();"></button>
</body>
</html>

جربت الكود ؟!! ماذا وجدت ؟!! ظهور عبارة " الله اكبر " لوحدها بالصفحة ماذا حدث؟!!
على الرغم من وجود 2 tags فى الصفحة b & p الا انهم اختفوا لماذا ؟!! احنا قولنا انه
يتم التعديل على ال element ككل ويقوم باستبدال كل محتوياته طيب اذا كانت الصفحة عندى
مليئة بالاكواد وعرفت متغير كالسابق على ال body هل اضيع جميع ما بالصفحة ؟ بالتاكيد لا
طيب ما العمل ؟ للخروج من المشكلة قم بتعرف tag جديد فى الصفحة ولا تضمنه محتويات
وضع ما بالسكربت فى هذا ال tag اذا كنت تريد تضمين شئ جديد للصفحة وتريد ان تظل كل شى كما هو
لاحظ


<!DOCTYPE HTML>
<html>
<head>
<title>Return about DOM</title>
</head>
<body >
<b id="bold" >
بسم الله الرحمن الرحيم
</b>
<p>
لا الله الا الله محمد رسول الله
</p>
<span id="span">

</span>
**********
function changeContent(){
var x= document.getElementById("bold");
var xx= document.getElementById("span");
xx.innerHTML=x.innerHTML;

}
</script>
<br />
<button onclick="changeContent();"></button>
</body>
</html>

لاحظ هنا قمنا بجلب محتويات ال tag b ووضعناه فى span دون ان نغير
محتويات الصفحة
==================================

اللهم لك الحمد اشهد ان لا اله الا الله
واشهد ان محمدا رسول الله

lofe hak
04-17-2013, 03:07 AM
شرح واضح

لاهنت

واااصل

ودي واحترامي