JavaScript

Correction exercices les évènements en JavaScript Série01

Un cours complet pour maîtriser Correction exercices les évènements en JavaScript Série01.

0 chapitres 0 QCM Accès gratuit

Exercice 01

Énoncé

Solution

Fichier html

<!DOCTYPE html>
<html>
<head>
    <title>Changement d'image au survol du lien</title>
    <link rel="stylesheet" type="text/css" href="style01.css">

</head>
<body>
  <div class="container">
    <a href="#" id="lien">
        <div class="centered">
            <img src="image1.png" alt="Image 1" id="image">
        </div>
    </a>
</div>
<script src="script01.js"></script>
</body>
</html>

Fichier js

 // Fonction pour changer l'image
 function changerImage(action) {
  const image = document.getElementById('image');

  if (action === 'survol') {
      // Changer l'image lors du survol du lien
      image.src = 'image2.png'; // Remplacez 'image2.png' par le chemin de votre nouvelle image
  } else if (action === 'quitter') {
      // Revenir à l'image d'origine lorsque la souris quitte le lien
      image.src = 'image1.png'; // Remplacez 'image1.png' par le chemin de votre image d'origine
  }
}

// Ajouter des gestionnaires d'événements pour le survol et la sortie du lien
const lien = document.getElementById('lien');

lien.addEventListener('mouseenter', function () {
  changerImage('survol');
});

lien.addEventListener('mouseleave', function () {
  changerImage('quitter');
});

Fichier CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0; /* Couleur de fond */
}

.container {
    width: 300px;
    height: 300px;
    border: 5px solid #333; /* Bordure solide de 5px */
    border-radius: 50%; /* Bordure arrondie pour créer un cercle */
    perspective: 1000px; /* Crée un effet de profondeur en 3D */
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#image {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain; /* Ajuster l'image pour tenir dans le conteneur */
    transition: transform 0.5s; /* Animation de transformation pour l'effet 3D */
}

#lien:hover #image {
    transform: rotateY(180deg); /* Rotation de 180 degrés au survol */
}

Exercice 02

Énoncé

Solution

Fichier html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nouvelle Fenêtre</title>
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <h1>Compteur :</h1>
    <div id="counter" class="blue">20</div>
    <script src="script01.js"></script>
</body>
</html>

Fichier js

document.addEventListener('DOMContentLoaded', function () {
  // Création de la première fenêtre
  const nouvelleFenetre1 = window.open('', '_blank', 'width=400,height=300');
  if (nouvelleFenetre1) {
      nouvelleFenetre1.document.write('Fenêtre 1');
      nouvelleFenetre1.document.write('Cette fenêtre se déteruira elle-même ');
  }
  // Compteur
  const counterElement = document.getElementById('counter');
  let counterValue = 20;

  function updateCounter() {
      counterElement.textContent = counterValue;
      
      if (counterValue === 5) {
          counterElement.classList.remove('blue');
          counterElement.classList.add('red');
      }
      if (counterValue > 0) {
          counterValue--;
      } else {
          if (nouvelleFenetre1) {
              nouvelleFenetre1.close();
          }
          clearInterval(counterInterval);
      }
  }

  const counterInterval = setInterval(updateCounter, 1000); // Utilisation de setInterval

  updateCounter(); // Appel initial
});

Fichier CSS

body {
    text-align: center;
    font-family: Arial, sans-serif;
}

.blue {
    color: blue;
    font-size: 48px; /* Taille de la police augmentée */
}

.red {
    color: red;
    font-size: 48px; /* Taille de la police augmentée */
}

Exercice 04

Énoncé

Solution

Fichier html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Déplacement du Bloc</title>
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <div id="block"></div>
    <label for="xSpeed">Vitesse de déplacement sur l'axe X:</label>
    <input type="number" id="xSpeed" value="5">
    <label for="ySpeed">Vitesse de déplacement sur l'axe Y:</label>
    <input type="number" id="ySpeed" value="5">
    <script src="script01.js"></script>
</body>
</html>

Fichier js

const block = document.getElementById('block');
const xSpeedInput = document.getElementById('xSpeed');
const ySpeedInput = document.getElementById('ySpeed');

let xPosition = 0;
let yPosition = 0;

document.addEventListener('keydown', function (event) {
    // Récupérer le code de la touche
    const keyCode = event.keyCode;
    
    // Afficher le code de la touche et le caractère ASCII correspondant
    console.log(`Code touche (Scan code): ${keyCode}, Caractère ASCII: ${String.fromCharCode(keyCode)}`);
    
    // Déplacer le bloc en fonction de la touche appuyée
    if (keyCode === 37) { // Touche gauche (ArrowLeft)
        xPosition -= parseInt(xSpeedInput.value);
        block.style.left = `${xPosition}px`;
        console.log('Déplacement vers la gauche');
    } else if (keyCode === 38) { // Touche haut (ArrowUp)
        yPosition -= parseInt(ySpeedInput.value);
        block.style.top = `${yPosition}px`;
        console.log('Déplacement vers le haut');
    } else if (keyCode === 39) { // Touche droite (ArrowRight)
        xPosition += parseInt(xSpeedInput.value);
        block.style.left = `${xPosition}px`;
        console.log('Déplacement vers la droite');
    } else if (keyCode === 40) { // Touche bas (ArrowDown)
        yPosition += parseInt(ySpeedInput.value);
        block.style.top = `${yPosition}px`;
        console.log('Déplacement vers le bas');
    }
});

// Afficher les coordonnées de la souris dans la barre d'état
document.addEventListener('mousemove', function (event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;
    window.status = `Coordonnées de la souris: X=${mouseX}, Y=${mouseY}`;
});

Fichier CSS

body {
    margin: 0;
    overflow: hidden;
}

#block {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    border: solid 2px yellow;
}

input {
    margin: 10px;
}

Les événements en javascript

Sommaire du cours JavaScript

Sommaire du cours JavaScript

Correction exercices les évènements en JavaScript Série01

Sommaire du cours

Autres catégories

Exercice 01

Énoncé

Solution

Fichier html

Fichier js

Fichier CSS

Exercice 02

Énoncé

Solution

Fichier html

Fichier js

Fenêtre 1

Fichier CSS

Exercice 04

Énoncé

Solution

Fichier html

Fichier js

Fichier CSS

Sommaire du cours JavaScript