html-js-css

Injection de code javaScript

Le but ici n'est pas de coder en javaScript, mais d'apprendre à déclarer des fichiers javaScript dans le code html.

Dans l'exercice qui suit, nous allons utiliser 2 fichiers javascript :

  • Une bibliothèque standard utilisée quasiment dans tous les sites web : jQuery.js
    • Cette bibliothèque est une collection de fonctions évoluées écrites en javaScript.
  • Un fichier spécifique, adapté à la page html à laquelle il est rattaché.
    • Dans notre exemple, nous choisissons de l'appeler projet.js

Où placer les déclarations de fichiers javaScript dans le fichier html ?

Les mauvaises habitudes ont la peau dure, c'est pourquoi vous verrez souvent dans la littérature, les tutoriels, etc que les déclarations javaScript doivent se faire dans le "head",  au même endroit que les links css. N'en faites rien !

En effet, si la taille des fichiers javaScript est importante, la page affichée reste blanche devant l'internaute pendant le chargement des fichiers.
La durée est d'autant plus longue que la connexion internet est lente.Dans le cas présent, ce n'est pas bien grave, car jQuery.js ne "pèse" que 250 ko.

La déclaration se fera donc lorsque le navigateur aura reçu l'intégralité du code html, c'est à dire juste avant la fermeture de la balise body.


Comment placer les déclarations de fichiers javaScript dans le fichier html ?

Le code javaScript est un "script", c'est à dire une succession de directives et de fonctions que le navigateur devra interpréter de façon événementielle (un clic, par exemple est un événement).

C'est pourquoi les déclarations se font dans une balise "<script>", de type "text/javascript"

<script src="js/projet.js" type="text/javascript"></script>


Application pratique : Albums photos sélectionnés par menu

album-photo
(Cliquez sur l'image ci-dessus pour afficher cet exemple sur un nouvel onglet)

Indications :

A l'aide du l'assistant Gulp, créez un nouveau projet :

  • Dossier : www\exe003\injection_js
  • Nom : 'Mes albums-photos'
  • Cases cochées :
    • Première page : Seulement livereload.
    • Dernière page, 4 cases :
      • HTML
      • jQuery
      • CSS
      • JS

Codez le fichier html -> 3 éléments :

  1. Le titre dans un h2 (déjà fait par l'assistant Gulp)
  2. Le div de gauche contient toutes les photos.
    • Son id est 'photos' -> <div id='photos'> ... </div>
  3. Le div de droite contient le menu.
    • Son id est 'menu' -> <div id='menu'> ... </div>

Veuillez utiliser exactement ces identifiants, car je fichier projet.js s'en sert dans son code.

Que fait le css ?

Couleurs du menu : repos et survol

Positionnements et tailles :

  • Largeur du menu : 150px
  • Largeur du container : les reste, avec marges gauche et droite de 10px.
  • Les photos : espacées de 10px (aussi bien en horizontal qu'en vertical).
    • Stylisées à votre convenance (ici elles sont rondes).
    • Le curseur est une main -> cursor: pointer;

Que fait le javaScript ?

C'est du code évenementiel.

  • Il attend un clic (c'est un événement) sur un item de menu :
    • Il remplace les 10 photos par 10 autres, correspondant à votre choix.
  • Il attend un clic sur une photo :
    • Il affiche cette photo en plus grand (900x600px), au milieu de la page.
      • ... sur un fond overlay semi-transparent, empêchant de cliquer n'importe où.
  • Lorsque la photo agrandie est affichée, il attend un clic en dehors de cette photo :
    • Il supprime la photo agrandie et son fond overlay.

Ce code se trouve dans le fichier projet.js.
Si vous ouvrez ce fichier, il est quasiment vide.

  • Effacez tout son contenu.
  • Récupérez le code depuis l'exemple du dessus :
    • Affichez l'exemple en cliquant sur l'image.
    • Affichez le code-souce de la page.
    • Cliquez sur projet.js (presque à la fin)
  • Coller tout le contenu dans projet.js
  • Enregistrez, testez.
0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *