jQuery

Correction TP3-1 jQuery

Un cours complet pour maîtriser Correction TP3-1 jQuery.

0 chapitres 0 QCM Accès gratuit

Objectifs
- Après la réalisation du TP3 jQuery vous serez capable de manipuler les événements souris et clavier en jQuery.
- Avant de commencer les exercices visitez la page et la page

Exercice 01

Énoncé

Solution

<!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Filtre de base First</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
        /*function enleverLiens() {alert("ffff"); } */ 
        function enleverLiens(){$('#contenu a').remove(); }
        function enleverGras() { $('#contenu strong,#contenu b').remove(); } 
        function enleverltalique() { $('#contenu em,#contenu i').remove(); } 
        function enleverDecor() { $('#contenu *:not(html):not(body):not(p):not(button)').remove(); } 
        function viderBoutons() { $('#contenu button').empty(); }
        function voirCode() { $('#contenu p').text($('p').html()); } 
        function liensEnBoutons() { $('#contenu a').wrap('<button></button>'); } 
        function dupliquerTexte() { $('p').clone().appendTo('#contenu'); } 
        function regrouperLiens() { $('#contenu a').wrapAll('<div></div>'); } 
        function mettreTitres() { $('.titre1').wrap('<h3></h3>');
                                  $('.titre2').wrap('<h4></h4>');} 
        function regrouperTitres() { $('#contenu h3').wrapAll('<div></div>');
                                     $('#contenu h4').wrapAll('<div></div>');} 
        function colorer() { $('.rouge').wrap('<span style="color:red"></span>');
                             $('.vert').wrap('<span style="color:green"></span>');
                             $('.orange').wrap('<span style="color:orange"></span>');
                             $('.bleu').wrap('<span style="color:blue"></span>');} 
        function semantique() { $('.italique').wrap('<i></i>');
                                $('.gras').wrap('<b></b>');
                                $('.souligne').wrap('<u></u>');
                                $('.barre').wrap('<del></del>');} 
</script>
  <style>
  .idDiv{
    border: 1px solid #007bff;
    border-radius: .25rem;
  }
  </style>
  </head>
  <body>
  </br>
    <div class="container">
      <div class="row">
        <div class="col-md-3 mr-2">
          <div class="btn-group-vertical">
          <button class="btn btn-outline-primary" onclick="enleverLiens()">Enlever les liens</button> 
          <button class="btn btn-outline-warning" onclick="semantique()">Organiser sémantiquement le texte</button> 
          <button class="btn btn-outline-secondary" onclick="colorer()">Colorer le texte</button> 
          <button class="btn btn-outline-success" onclick="mettreTitres()">Mettre des titres</button> 
          <button class="btn btn-outline-danger" onclick="liensEnBoutons()">Transformer les liens en boutons</button> 
          <button class="btn btn-outline-warning" onclick="dupliquerTexte()">Dupliquer le texte</button> 
          <button class="btn btn-outline-info" onclick="regrouperTitres()">Regrouper les titres</button> 
          <button class="btn btn-outline-success" onclick="regrouperLiens()">Regrouper les liens</button> 
          <button class="btn btn-outline-dark" onclick="viderBoutons()">Vider les boutons</button> 
          <button class="btn btn-outline-secondary" onclick="enleverGras()">Enlever le texte en gras</button> 
          <button class="btn btn-outline-success" onclick="enleverltalique()">Enlever le texte en italique</button> 
          <button class="btn btn-outline-danger" onclick="enleverDecor()">Enlever le texte décoré</button> 
          <button class="btn btn-outline-info" onclick="voirCode()">Voir le code</button> 
          </div>
        </div>
        <div class="col-md-8 idDiv">
         <span class="titre1">Le framework jQuery</span>
         <p id="contenu">
          Comme son nom l’<i>indique</i>, c’est quelque-chose, <i>une</i> <a href="/les-elements-dun-formulaire-html/">action</a> plus précisément, qui survient à la suite d’un déclencheur spécifique.
          La notion d’événements, ou <b>events</b>, est donc très répandue en programmation, on parle même de programmation événementielle…
          Avec un petit code vous pouver modifier les attribut CSS d’un site en un seul clique, ce qui apporte un peu de réactivité à la page. Changer en <span class="rouge">rouge</span> -  Changer en <span class="bleu">bleu</span> - Changer en <span class="vert">vert</span>  -  Changer en <span class="orange">orange</span>
          Ces <a href="/les-elements-dun-formulaire-html/">action</a>s vont généralement provenir soit du navigateur lui même, soit des utilisateurs. Les événements load et ready se déclenchent lorsque la page complète est chargée ou lorsque le DOM de la page est chargée tandis que l’événement click se déclenche lorsqu’un utilisateur clique sur un élément de la page.
          En <a href="/javaScript/">JavaScript</a>, on va pouvoir gérer des événements de trois manières différentes :
          En utilisant les <strong>attributs</strong> d’événements HTML ;
          En utilisant des gestionnaires <b>inline</b><em>inline</em> de type "on-event"
          En utilisant la <strong>addEventListener()</strong>.
        </p> 
        <span class="titre2">Le framework jQuery</span>
        <ul id="contenu">
        <li>C’est une bibliothèque <span class="gras" >javascript</span> open-source et <span class="italique">multibrowser</span>.</li>
<li>Elle permet de parcourir et de manipuler très facilement <span class="souligne">le DOM</span> des pages Web avec la syntaxe fortement similaire à celle d’XPath.</li>
<li>JQuery permet par exemple de changer / ajouter une classe CSS, créer des animations, <span class="barre">modifier</span> des attributs, etc.</li>
       </ul> 
</div>
      </div>
    </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body></html>

Exercice 02

Énoncé

Solution

calculatrice.html

<!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Calculatrice en jquery</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="Calculatrice.css">
  </head>
  <body>
<div class="calc">
  <form name="form">
    <input class="calc-display" autofocus>
  </form>
  <table>
    <tr>
      <td><input type="button" value="C" onclick="c()"></td>      
      <td><input type="button" class="fa fa-chevron-circle-left" value="&#xf137;" onclick="del()"></td>
      <td><input type="button" value="/" onclick="insert('/')"></td>
      <td><input type="button" value="x" onclick="insert('*')"></td>
    </tr>
    <tr>
      <td><input type="button" value="7" onclick="insert(7)"></td>
      <td><input type="button" value="8" onclick="insert(8)"></td>
      <td><input type="button" value="9" onclick="insert(9)"></td>
      <td><input type="button" value="-" onclick="insert('-')"></td>
    </tr>   
    <tr>
      <td><input type="button" value="4" onclick="insert(4)"></td>
      <td><input type="button" value="5" onclick="insert(5)"></td>
      <td><input type="button" value="6" onclick="insert(6)"></td>
      <td><input type="button" value="+" onclick="insert('+')"></td>
    </tr>
    <tr>
      <td><input type="button" value="1" onclick="insert(1)"></td>
      <td><input type="button" value="2" onclick="insert(2)"></td>
      <td><input type="button" value="3" onclick="insert(3)"></td>
      <td rowspan="2"><input type="button" value="=" onclick="eql()" style="height: 158px;background-color: orange;"></td>
    </tr>
    <tr>
      <td><input type="button" value="+/-" onclick="insert('-')"> </td>
      <td><input type="button" value="0" onclick="insert(0)"> </td>
      <td><input type="button" value="." onclick="insert('.')"></td>
    </tr>
  </table>
</div>
<script type="text/javascript" src="calculatrice.js"></script>
  </body></html>

calculatrice.js

$(document).ready(function() {
  $(window).keydown(function(event){
      if(event.keyCode == 13) {
          eql();
          event.preventDefault();
          return false;
      }
      else if(event.keyCode == 8) {
        del();
        event.preventDefault();
        return false;
      }
      else if(event.keyCode == 46) {
        c();
        event.preventDefault();
        return false;
      }
  });
});  
function insert(num){
  $('.calc-display').val($('.calc-display').val()+num);
}
function eql(){
  $('.calc-display').val(eval($('.calc-display').val()));
}
function c(){
  $('.calc-display').val('');
}
function del(){
  value=$('.calc-display').val();
  $('.calc-display').val(value.substring(0,value.length -1));
}

calculatrice.css

*{
  margin: 0;
  padding: 0;
  font-size: 35px;
  font-family: 'Orbitron',sans-serif;
}
.calc{
  width: 324px;
  margin: auto;
  background-color: #39383d;
  padding: 20px;
  border-radius: 8px;
}
.calc-display{
  width: 100%;
  height: 75px;
  border: none;
  background-color: #a2af77;
  margin-bottom: 10px;
  border-radius: 8px;
  padding-left: 6px;
}
input[type=button]{
  width: 75px;
  height: 75px;
  margin: 2px;
  color: #fff;
  border: none;
  border-radius: 8px;
  background-color: #58595b;

}

Sommaire du cours jQuery

Correction TP3-1 jQuery

Sommaire du cours

Autres catégories

Objectifs

Exercice 01

Énoncé

Solution

Exercice 02

Énoncé

Solution

calculatrice.html

calculatrice.js

calculatrice.css

Sommaire du cours jQuery