Exemple Question li tat7to f Javascript EFF theorique

Exemple Question li tat7to f Javascript EFF theorique

Source:http://coursdewebdesign.com

-------------------------Ex1------------------------

Créé un texte qui s'agrandit au clic. Si on reclique dessus, il reprend sa taille d'origine. Pour pouvoir faire cela, il va falloir que tu mette la taille de police initiale dans une variable.

Solution:http://coursdewebdesign.com/javascript/exercices/exercice1.html

-------------------------Ex2------------------------

Créé 5 boutons et un rectangle. Chaque bouton provoque une action sur le rectangle.

• Bouton 1 : augmente la hauteur de 10px, si il dépasse 100px, il remet la hauteur à 10px 
  (tu auras besoin de la fonction height())
• Bouton 2 : met le rectangle en vert
• Bouton 3 : remet les couleurs initiales
• Bouton 4 : fait disparaître le rectangle
• Bouton 5 : fait réaparaître le rectangle
• 
  
• Solution http://coursdewebdesign.com/javascript/exercices/exercice2.html#

-------------------------Ex3------------------------

1. Créé un lien et une liste (ul) que tu cache en CSS et met plusieurs élements (li) dedans. Au clic sur le lien, fais apparaître la liste.
2. Si tu as réussi, tu as fait ton premier menu déroulant. Maintenant, on va le rendre un peu plus complexe.

<ul id="menu">
  <li>
    <a href="#">Menu 1</a>
    <ul style="display:none;">
      <li>Sous-menu 1</li>
      <li>Sous-menu 2</li>
      <li>Sous-menu 3</li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 2</a>
    <ul style="display:none;">
      <li>Sous-menu 1</li>
      <li>Sous-menu 2</li>
      <li>Sous-menu 3</li>
    </ul>
  </li>
</ul

solution http://coursdewebdesign.com/javascript/exercices/exercice3.html>

-------------------------Ex4------------------------

1. Crée un champ de texte dans un formulaire avec une valeur "Rechercher" et une classe "placeholder" qui met le texte en gris.
2. Crée une fonction qui permet au clic d'enlever le texte
3. Si on clique en dehors de la zone de texte et que le champ est toujours vide, on remet le texte "Rechercher" avec la classe "placeholder"
4. Tu auras besoin des fonctions attr(), hasClass(), addClass() & removeClass()
5. Si tu veux voir un exemple, regarde le fonctionnement du champ rechercher de Facebook.

solution :

1. -------------------------Ex5----------------------
   crée un carré sexy et un champ de saisie de texte dans un formulaire sur lequel tu devras mettre ton curseur. Puis...

1. 1. Lorsque tu appuies sur une touche, déplace le bloc de 10px vers le bas
   2. Maintenant, il faut que cela marche que si tu appuies sur la touche du bas
   3. Plus puissant, il faut que ça marche si tu appuies plusieurs fois
   4. Puis, il faut pouvoir le remonter avec la touche du haut (toujours de 10px)
   5. Pour avoir la grande classe, quand le bloc atteint le bas de la page, il doit réaparaître en haut
   Aide, c'est cadeau :

   // permet de lancer une action lorsqu'on appuie sur une touche et qu'on est sur l'élement #champ
   $('#champ').keydown(function(evenement) {
     // permet de récupérer le code de la touche
     alert(evenement.keyCode);
   
     // Si le code de la touche est égale au code de la touche du bas,
     // on fait descendre vers le bas
   });