لماذا نحن بحاجة لتمرير المتغيرات عبر التوابع

إن تمرير المتغيرات يمكننا من استخدام التابع من خلال تغيير قيم هذه المتغيرات فقط

التمرير بعد التابع  مباشرة عند تعليمة الإظهار:

[php]
<!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>
[/php]

التمرير في نص الـHTML عند الضغط على الزر:

يتم استدعاء التابع عند الحدث onclick

[php]
<!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>
[/php]

سنمرر المتحول عند الضغط على الزر ونقوم بعملية الضرب:

يتم استدعاء التابع عند الحدث onclick

[php]
<!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>
[/php]

تكبير صورة عند الضغط عليها باستخدام الاستدعاء this

إن الاستدعاء this يأتي بمحتويات العنصر الحالي لذلك فهو هام جدا وكثير الاستخدام

[php]
<!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>
[/php]

سنقوم بمناقشة التمرين السابق