14 décembre : pour quelques scripts de plus

Nous avons découvert ce qu’était javascript la semaine passée, et pour la dernière séance du quadrimestre de ce cours, nous allons voir deux applications avec ou sans jquery : scroller la page doucement, d’une part, et déclencher un son, d’autre part.

Déclencher un son

La balise audio est une des nouveautés de HTML5. Une balise faite sur mesure pour contenir un son, et qu’il est possible de piloter à travers javascript. Coder un lecteur son peut être un travail un peu compliqué (vous pouvez allez voir ici ou encore ici si vous voulez voir à quoi ça ressemble) mais on utilisera lors de ce cours un code minimal pour déclencher un son court.

Vous trouverez un tutoriel et ses quelques lignes de code ici.

Scroller doucement

Scroller doucement achèvera les exemples montrés. Nous allons ajouter au système de navigation par ancre que nous avons mis en place lors de cours précédent, et y adjoindre un code permettant de faire bouger la page lentement jusqu’à sa destination, plutôt qu’opérer une saute brusque.

Le code est déjà sur ce site, ici, il ne reste plus qu’à le mettre en place. Il utilise jQuery, on veillera donc à ce que la librairie soit en place...

  1. <script>
  2.     $(document).ready(function() {
  3.         $('nav a').on('click', function() { // Au clic sur un élément
  4.             var page = $(this).attr('href'); // Page cible
  5.             var speed = 750; // Durée de l'animation (en ms)
  6.             $('html, body').animate( { scrollLeft: $(page).offset().left }, speed );                    
  7.             return false;
  8.         });
  9.     });
  10. </script>

Télécharger

L’épreuve théorique de janvier

Tant qu’on y est, on parlera de l’épreuve de janvier, qui sera un oral en plus de la remise des exercices qui doivent être déposés en FTP.

Le contenu de cette épreuve, pratique et théorique, est ici.