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

   • Bouton 1 : augmente la hauteur de 10px, si elle dépasse 100px, il remet la hauteur à 10px (utilisez fonction height())
   • Bouton 2 : diminue la hauteur de 10px, si elle est inférieure à 100px, il remet la hauteur à 100px (utilisez fonction height())
   • Bouton 3 : fait disparaître le rectangle
   • Bouton 4 : fait réaparaître le bouton
   • Bouton 5 : change aléatoirement la couleur du rectangle

   un exemple de mise en page avec bootstrap :

   

2. Voici un fichier source qui a son premier élément selectioné (class btn-primary). Il faut faire en sorte que quand on clique sur un autre lien, il devienne actif. Bien évidemment, il faut que l'élément qui était actif se désactive.

   Sur une capture d'écran :

   

3. Ecrire un "plugin" jquery qui permet de rajouter à un tableau une première colonne qui numérote ses lignes. L'appel se fera de la manière suivante :

   $("#matable").numerotation({numLabel:"rang",numClass:"text-success"});

   

4. Le site flickr de partage d'images met à dispostion un certain nombre d'api internet. L'url suivante :

   http://api.flickr.com/services/feeds/photos_public.gne
   

   renvoie une liste du contenu public répondant à certains critères. (la documentation correspondante se trouve ici)

   Le but est d'écrire une petite application qui contient un champ texte pour saisir des mots-clefs (tags), qui va interroger le fil précédent, et afficher les images correspondantes.

   

   Recommandations

   • Pour gagner du temps pour la mise en forme, vous pouvez utiliser un framework css. Par exemple, Bootstrap.
   • Vous utiliserez également jquery pour tous les traitements javascript. En particulier, pour ajax, la méthode
     
     

     $.getJSON

retour à la page d'accueil

retour au sommet