Back

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

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

  1. Exercice 01

    1. Énoncé
    2. Solution

      1. Fichier html

          2. <!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>

      2. Fichier js

          3.  // 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');
});

      3. Fichier CSS

          4. 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 */
}





  2. Exercice 02

    1. Énoncé
    2. Solution

      1. Fichier html

          2. <!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>

      2. Fichier js

          3. 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
});

      3. Fichier CSS

          4. 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 */
}

  3. Exercice 04

    1. Énoncé
    2. Solution

      1. Fichier html

          2. <!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>

      2. Fichier js

          3. 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}`;
});

      3. Fichier CSS

          4. 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
author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Exercices les évènements en JavaScript : Série 01
8 octobre, 2022

La syntaxe de base de Javascript Les variables en JavaScript Les opérateurs en JavaScript Les événements en javascript Exercices les opérateurs en JavaScript : Série 01 (Correction) Exercices les évènements en JavaScript : Série 01 (Correction) Exercices les évènements en …

Correction Exercices les Fonctions en Javascript Série 01
7 mai, 2021

Les fonctions en Javascript Les fonctions, Expressions et fonctions fléchées en Javascript Exercices les fonctions en javascript Série 01 (Correction) Correction Exercices les Fonctions en Javascript Série 01 Exercice 01 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution Rappel Une …

Les fonctions, Expressions et fonctions fléchées en Javascript
6 mai, 2021

Les fonctions en Javascript Les fonctions, Expressions et fonctions fléchées en Javascript Exercices les fonctions en javascript Série 01 (Correction) Les fonctions, Expressions et fonctions fléchées en Javascript Objectifs Créez et comprenez les fonctions en Javascript! Présentation Une fonction est …