دورة javascript للمبتدئين الدرس الثامن عشر


فهاد الدرس الثامن عشر من دورة  javascript  للمبتدئين  غادي نكملو الدورة ديالنا فغادي نشوفوا d'autres événements لي غادي تكون عندهم علاقة بل clavier فغادي نشوفوا كيفاش نستاجبو ل un événement  جانا من clavier عن طريق مجموعة من الأمثلة لي غادي يمكنونا من فهم كل واحد على حدة.


1- ل événement keydown ف javascript

 ل événement keydown ف javascript  هو ملي كيكليكي لمستخدم على شي key فل clavier فالمثال لي عندنا عندي input عطيتها id هي ول bouton منبعد ف javascript كنسترجع ل input بل id ديالها منبعد كنزيدلها ل event keydown لي كينفد ل fonction launchEvent لي فقط كت afficher message hi الكود لي زدت هو :

                                //index.html

    <input type="text" id="input">
    <button id="add">Recherche</button>

//main.js

const input = document.getElementById('input');
input.addEventListener('keydown',launchEvent);
function launchEvent(){
    alert('hi');
}
                            

2- ل événement focus ف javascript

 ل événement focus ف javascript  هو ملي كيحط لمستخدم la souris داخل ل input كنحتفظ بنفس المثال فقط كنغير ل event keydown ل focus الكود لي زدت هو :


                                //index.html

    <input type="text" id="input">
    <button id="add">Recherche</button>

//main.js

const input = document.getElementById('input');
input.addEventListener('focus',launchEvent);
function launchEvent(){
    alert('hi');
}
                            

3- ل événement blur ف javascript

 ل événement blur ف javascript  هو ملي كيكليكي  لمستخدم  داخل ل input ومنبعد كيخرج كنحتفظ بنفس المثال فقط كنغير ل event keydown ل blur الكود لي زدت هو :


                                //index.html

    <input type="text" id="input">
    <button id="add">Recherche</button>

//main.js

const input = document.getElementById('input');
input.addEventListener('blur',launchEvent);
function launchEvent(){
    alert('hi');
}
                            

4- ل événement input ف javascript

 ل événement input  ف javascript  هو أي حاجة دار  لمستخدم  داخل ل input فالمثال لي عندنا كنزيد ل event input لل input منبعد ف launchEvent كنخدم بواحد ل variable لي هي e ولي كتعني event بها كنسترجع القيمة ديال le champ فداكشي لي دخل المستخدم غادي يت afficha ب alert الكود لي زدنا هو : 

                                    //index.html

    <input type="text" id="input">
    <button id="add">Recherche</button>

//main.js

const input = document.getElementById('input');
input.addEventListener('input',launchEvent);
function launchEvent(e){
     alert(e.target.value);
}
                                

5- ل événement submit ف javascript

 ل événement submit  ف javascript  هو ملي المستخدم كي valider ل form فالمثال لي عندنا كاين عندنا form عطيناها id form منبعد كنسترجعها هي ول input ف main.js منبعد فل event submit كنفد ل fonction launchEvent لي فقط كت afficher ل valeur ديال ل input ف ميساج الكود لي زدنا هو: 

                                    //index.html

    <form id="form">
        <input type="text" id="input">
        <button type="submit" id="add">Recherche</button>
    </form>

//main.js

const form = document.getElementById('form');
const input = document.getElementById('input');
form.addEventListener('submit',launchEvent);
function launchEvent(){
     alert(input.value);
}