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