لماذا نحن بحاجة لتمرير المتغيرات عبر التوابع
إن تمرير المتغيرات يمكننا من استخدام التابع من خلال تغيير قيم هذه المتغيرات فقط
التمرير بعد التابع مباشرة عند تعليمة الإظهار:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> muliple </title>
</head>
<body>
<div>
<p>3*2 = </p>
<p id="re"> </p>
</div>
<script>
function multi(a,b) {
return a*b;
}
document.getElementById("re").innerHTML=multi(3,4);
</script>
</body>
</html>
التمرير في نص الـHTML عند الضغط على الزر:
يتم استدعاء التابع عند الحدث onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> hello </title>
</head>
<body>
<button onclick="showtxt('Hello')">show</button>
<p id="re"></p>
<script>
function showtxt(txt)
{
document.getElementById("re").innerHTML=(txt);
}
</script>
</body>
</html>
سنمرر المتحول عند الضغط على الزر ونقوم بعملية الضرب:
يتم استدعاء التابع عند الحدث onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> muliple </title>
</head>
<body>
<div onclick="return multi(4);">
<button> result </button>
<p id="re"> </p>
</div>
<script>
function multi(a) {
document.getElementById("re").innerHTML=a*3;
}
</script>
</body>
</html>
تكبير صورة عند الضغط عليها باستخدام الاستدعاء this
إن الاستدعاء this يأتي بمحتويات العنصر الحالي لذلك فهو هام جدا وكثير الاستخدام
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> zoom in </title>
</head>
<style>
#sh img{
width:10%;
height:100px;
}
#hid {
display:none;
width:400px;
margin:auto;
height:300px;
}
#hid img{
width:100%
}
</style>
<body>
<div id=sh onclick="return showImge(this.innerHTML);">
<img src="http://on5tl.com/edu/wp-content/uploads/2015/07/4500361044.png" />
</div>
<div id="hid">
</div>
<script>
function showImge(x) {
document.getElementById("hid").style.display = "block";
document.getElementById("hid").innerHTML=x;
}
</script>
</body>
</html>
سنقوم بمناقشة التمرين السابق
- نحدد div مخفية ونجعل لها أبعاد مناسبة وهي الـ div التي ستظهر بها الصورة مكبرة
#hid { display:none; width:400px; margin:auto; height:300px; } - الصورة ستظهر ضمن هذه الـ div بنفس أبعاد الـdiv المحدد مسبقا وستأخد كامل المجال :
#hid img{ width:100% } - أما الصورة الصغير التي ستظهر للمستخدم وسيقوم بالضغط عليها لتكبيرها فستكون بأبعاد صغيرة ضمن الـdiv التي أعطيناها اسم sh
#sh img{ width:10%; height:100px; } - التابع سيقوم بإظهار الـdiv بالاضافة إلى وضع محتوى الـdiv الظاهرة sh ضمن الـdiv المخفية ,
سمينا هذا المحتوى برمز x وسنقوم بتمريره عند الاستدعاء كمحتوى للـdiv - أخيرا استدعاء التابع عند الحدث onclick
<div id=sh onclick="return showImge(this.innerHTML);">
