Ignorer la navigation

III. D'autres fonctions à travers des exemples

Les événements Javascript (clic de la souris, déplacement de la souris, frappe au clavier, ….)

 
Exemple 1 : methode  addEventListener

Soit le code suivant :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Le titre de la page</title>
       
    </head>
 
    <body>
    <div id="position"></div>
 
    <script>
        var position = document.getElementById('position');
       
        document.addEventListener('mousemove', function(e) {
        position.innerHTML = 'Position X : ' + e.clientX + 'px<br />Position Y : ' + e.clientY + 'px';
        }, false);
    </script>
</body>
</html>

Essayez ce code et décrivez ce qu'il fait.

 

Exemple 2 : JavaScript Events


Soit le code suivant :

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>essai onclick</title>
       
    </head>
<body>
 
<p>Click sur le bouton</p>
 
<button onclick="displayDate()">On est le ?</button>
 
<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
 
<p id="demo"></p>
 
</body>
</html>

Essayez ce code et décrivez ce qu'il fait.

 

Exemple 3 :

Soit le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>des carrés à déplacer</title>
  </head>
 
  <body>
 
    <style type="text/css">
        .draggableBox {
            position: absolute;
            width: 80px; height: 60px;
            padding-top: 10px;
            text-align: center;
            font-size: 40px;
            background-color: #222;
            color: #CCC;
            cursor: move;
        }
    </style>
 
    <div class="draggableBox">1</div>
    <div class="draggableBox">2</div>
    <div class="draggableBox">3</div>
 
    <script>
        (function() { // On utilise une IIFE pour ne pas polluer l'espace global
            var storage = {}; // Contient l'objet de la div en cours de déplacement
 
            function init() { // La fonction d'initialisation
                var elements = document.getElementsByTagName('div'),
                    elementsLength = elements.length;
 
                for (var i = 0 ; i < elementsLength ; i++) {
                    if (elements[i].className === 'draggableBox') {
 
                        elements[i].addEventListener('mousedown', function(e) { // Initialise le drag & drop
                            var s = storage;
                            s.target = e.target;
                            s.offsetX = e.clientX - s.target.offsetLeft;
                            s.offsetY = e.clientY - s.target.offsetTop;
                        }, false);
 
                        elements[i].addEventListener('mouseup', function() { // Termine le drag & drop
                            storage = {};
                        }, false);
                    }
                }
 
                document.addEventListener('mousemove', function(e) { // Permet le suivi du drag & drop
                    var target = storage.target;
 
                    if (target) {
                        target.style.top = e.clientY - storage.offsetY + 'px';
                        target.style.left = e.clientX - storage.offsetX + 'px';
                    }
                }, false);
            }
 
            init(); // On initialise le code avec notre fonction toute prête.
        })();
    </script>
 
  </body>
</html>


Essayez ce code et décrivez ce qu'il fait.




Exemple 4 :  un jeu en javascript et HTML

récupérez l'archive "serpent html.zip" et essayez le jeu réalisé en Javascript

Créé avec eXeLearning (Nouvelle fenêtre)