الدرس الثالث فى الجافا سكريبت

Events and Functions

1-events:

وهى عبارة عن احداث موجودة فى اكواد ال(HTML)تعمل كحلقة وصل بين لغتى (HTML,javascript) لتنفيذ دالة او مهمة معينة واهم الاحداث التى نستخدمها هى:

الشرح

events

هذا الحدث يستخدم لتنفيذ مهمة معينة عند الضغط على زر مثلا.

onclick

هذا الحدث يستخدم لتنفيذ مهمة معينة عند تحميل صفحة الويب.

onload

هذا الحدث يستخدم لتنفيذ مهمة معينة عند تغير الحالة التى يكون عليها الكود.

onchange

هذا الحدث يستخدم لتنفيذ مهمة معينة عند الوقوف بالماوس على جزء فى الموقع.

onmouseover

هذا الحدث يستخدم لتنفيذ مهمة معينة عند ابعاد الماوس على جزء فى الموقع.

onmouseout

والمثال التالى يشرح اهم حدث نستخدمة بكثرة وهو حدث (onload):

<!DOCTYPE html>

<html>

<body>

<h1 onclick=”this.innerHTML=’wellcome'”>click me</h1>

</body>

</html>

– جرب بنفسك المثال السابق حيث عند الضغط على كلمة (click me) يتغير النص ويصبح (wellcome).

– واستخدمنا(this.innerHTML) فى المثال السابق حيث كلمة (this) تشير الى تاج<h1> اما كلمة (innerHTML) تشير الى النص المكتوب داخل تاج <h1> اى تشير الى كلمة( click me).

2-function:

– وهى عبارة عن كود او مجموعة من الاكواد يتم وضعها داخل دالة بشكل معين سنتعرف عليه للقيام بمهمة معينة عند استدعائها عن طريق الاحداث(events) والشكل العام لها كما يلى:

function functionname()
{
code
}

حيث (functioname) هو اسم الدالة التى تسميها انت كما ان (code) هو الكود او مجموعة الاكواد التى تكتبها وتوضع بين القوسين { } والمثال التالى يوضح استخدامها:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert(“Hello World!”);
}
</script>
</head>

<body>
<button onclick=”myFunction()”>Try it</button>
</body>
</html>

جرب المثال بنفسك.

-Calling a Function with parameters:

ويمكن عند عمل الدالة ان نمرر لها قيم حيث يطلق على هذة القيم البارمترات وتستخدم داخل الدالة وتكون كالتالى:

function myFunction(var1,var2)
{
code
}

ويمكن استخدم بارمتر واحد او اكثر من بارمتر لكن المهم ان تضع فاصلة فى حالة استخدمت اكثر من بارمتر.

والمثال التالى يوضح استخدامها:

<!DOCTYPE html>

<html>

<body>

<script>

function myFunction(name,job)

{

alert(“Welcome ” + name + “, the ” + job);

}

</script>

<button onclick=”myFunction(‘ali’,’teacher’)”>click me</button>

</body>

</html>

حيث لهذة الدالة بارمترين هما الاسم والوظيفة ويتم تمرير قيم لهما من الدالة هكذا (‘myFunction(‘ali’,’teacher ثم تخرج برسالة تحذيرية بها الاسم والوظيفة التى ادخلتها للدالة.

-Functions With a Return Value :

يمكن تخزين داتا داخل الدالة واستخدامها عن طريق كلمة(return)كالتالى:

function myFunction()
{
var x=5;
return x;
}

– مثال:

<!DOCTYPE html>

<html>

<body>

<script>

function myFunction(a,b)

{

return alert(a*b);

}

</script>

<button onclick=”myFunction(4,6)”>click me</button>

</body>

</html>

وهى عبارة عن دالة تاخذ رقمين وترجع بحاصل ضربهما.

ملاحظة هامة:المتغير الموجود داخل الدالة لا يمكن استخدامة الا على مستوى هذة الدالة ويعرف بالمتغير المحلى (local) اما المتغير الموجود خارج الدالة فيمكن ان تستخدمة اى دالة قمت بانشائها ويسمى بالمتغير العام (global).

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: