java_script الدرس 14

**zaizo max** · 06-12-2013, 04:32 AM

بسم الله الرحمن الرحيم
============
" اللهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم "
==================

اهلا بكم مجددا اخوانى اسف على التأخير لانى كنت مشغول جدا
نستكمل حديثنا عن ال javaScript توقفنا DOM وقولنا انها اختصار ل Document Object Model
وهى تتحكم فى كل ما يخص ال Document او ال project بتاعك سواء HTML او PHP مع JQuery
وغيرها من المكتبات على كلا بصراحة كنت عاوز اخليها مراجعة لكن قولت نستكمل .......

احداث الجافا سكربت javaScript Event
===========================
ما هو الحدث ؟ وما هى انواعه وكيف يتم ؟
الحدث بصفة عامة : هو الفعل المرتبط بمؤثر لوقوع نتيجة معينة يعنى ايه الكلام ده مثلا انت بتلعب كورة ضربت الكورة فى الحيط ردت عليك
تانى التفسير : انت لما عملت (فعل) " انك ضربت الكورة " اللى هى ( المؤثر ) " حصلت على نتيجة " انها رجعتلك تانى " ودا بيكون بهدف
التسلية لما تكون لوحدك . طيب تمام فهمنا دلوقت معنى الحدث ايه بقى انواعه اللى يهمنا من جميع الاحداث اللى خلقها ربنا هما نوعين
احداث الفأرة mouse events واللوحة keyBoard events طيب كيف تعمل الاحداث دى ؟!!! كل حاجة وليها عملها المخصص بس
الحاجة المشتركة فى الغالب ان احداث النوعين بيتم عن طريق ال Function وتتغير هذه الاحداث من tag او element الى اخر بمعنى
ان مش كل الاحداث مثلا فى ال P هى نفسها فى ال form او ال body

احداث الفارة mouseEvents
===================
اول حدث بطيبعة الحال هيكون النقر Click سواء النقر بالزر الايمن او الايسر . طبعا انت بتحدد العنصر اللى انت عاوز تنقر عليه واللى
اكيد انت مش هتنقر عليه بلا هدف اكيد انت بتكلك عليه علشان منتظر نتيجة معينة . هنا بيختلف النقر بالزر الايمن او الايسر عادة الايمن
مبيستخدمش بكثرة الا اننا هنذمره فى موضوع متقدم شوية قدام ان شاء الله
لاحظ الكود التالى :-

كود HTML:

<html>
<head>
</head>

<body>
<script type="text/javascript">
function max()
{
    var x =document.getElementById("txt1");
    x.value="لقد قمت بالضعط على الزر ";
}
</script>
<form action="" method="post">
    <input type="text" name="txt" id="txt1" />
    <input type="button" name="sub" value="changeTxtValue" onclick="max();"  />
</form>
</body >
</html>

فى الكود السابق عرفنا x بانه object من text box وعند الضغط على الزر تم تغيير قيمتها وهى النتيجة المطلوبة
تانى حدث هو dblClick هو نفس السابق الا ان هذا الحدث لا يعمل من ضغطة واحدة ولكن ضغطتين متتاليتين على العنصر ليتم الحدث
وتظهر النتيجة
لاحظ :-

كود HTML:

<html>
<head>
</head>

<body>
<script type="text/javascript">
function max()
{
    var x =document.getElementById("txt1");
    x.value = Date();
    
}
</script>
<form action="" method="post">
    <input type="text" name="txt" id="txt1"   />
    <input type="button" name="sub" value="changeTxtValue" ondblclick="max();" />
</form>
</body >
</html>

بتغيير الحدث الى دبل كلك جرب انك تضغك مرة واحدة على الزر فتلاحظ انه لا يعمل ولكن اذا قمت بالضغط مرتين على الزر بسرعة ستحقق
النتيجة المرجوة
الحدث mouseMove وتحدث النتيجة عندم يتم تحريك مؤشر الفارة على العنصر
لاحظ :-

كود HTML:

<html>
<head>
</head>

<body>
<script type="text/javascript">
function max()
{
    var x =document.getElementById("txt1");
    alert(x.innerHTML);
    
}
</script>
<h2 id="txt1" onmousemove="max();"> Move Here</h2>
</body >
</html>

لاحظ هذا الحدث لا يحتاج الى ضغط بازار الفارة وانما يكتفى بتحريك فقط فوق العنصر اى عن المرور عليه

الحدث mouseOver
وهو نفس الحدث السابق ويعمل عمله
****************
نستكمل فى وقت اخر ........
الحمد لله الذى بنعمته تتم الصالحات