java_script الدرس 14

java_script الدرس 14


النتائج 1 إلى 3 من 3

الموضوع: java_script الدرس 14

  1. #1

    new java_script الدرس 14



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

    اهلا بكم مجددا اخوانى اسف على التأخير لانى كنت مشغول جدا
    نستكمل حديثنا عن ال 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
    وهو نفس الحدث السابق ويعمل عمله
    ****************
    نستكمل فى وقت اخر ........
    الحمد لله الذى بنعمته تتم الصالحات

    التعديل الأخير تم بواسطة zaizo max ; 06-12-2013 الساعة 04:34 AM

    أنا لا أصدق احدا حتى اتأكد مما يقول
    ليس لضعف ثقــــــــة فيـــــــــــــــه
    ولكن هذا ما علمنى إياه ربى
    _____________________zAiZo_MaX________________

  2. #2

    افتراضي رد: java_script الدرس 14

    لـتـوآصل
    skype: lulz.tn
    صفحتنا في ألفيس بوك


  3. #3

    افتراضي رد: java_script الدرس 14

    بارك الله فيك ننتظر المزيد

المواضيع المتشابهه

  1. java_script الدرس 11
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 4
    آخر مشاركة: 01-21-2016, 12:08 PM
  2. java_script الدرس 13
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 1
    آخر مشاركة: 04-17-2013, 03:07 AM
  3. java_script الدرس 12
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 2
    آخر مشاركة: 04-13-2013, 12:13 PM
  4. java_script الدرس الرابع
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 4
    آخر مشاركة: 04-06-2013, 07:48 PM
  5. java_script الدرس الثانى
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 3
    آخر مشاركة: 04-03-2013, 03:58 AM

الكلمات الدلالية لهذا الموضوع

المفضلات

أذونات المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •