Comment mettre en place un jsFiddle ?

Publié le par

jsFiddle est un outil très intéressant car il permet :

  • de tester un bout de code javascript rapidement et de le sauvegarder (car je vous rappelle, on peut tester du javascript aussi dans la console de son navigateur ou dans « l’ardoise » de firefox),
  • d’inclure les librairies les plus connus très rapidement (ainsi que quelques plugins),
  • de tester du CSS,
  • d’envoyer du HTML, CSS, JS à quelqu’un pour qu’il puisse voir le contexte dans lequel vous êtes
  • et, enfin, tout ça en même temps :-)

Voyons voir comment fonctionne la bête.

Trop long à lire ? Voici le résumé. Cliquez ici pour voir la version longue

  1. Mettez votre HTML (à partir de la balise « body » et si possible uniquement la partie sur laquelle vous avez un soucis) dans la section « HTML »
  2. Mettez votre CSS (sans balise « style ») dans la section « CSS »
  3. Mettez votre code JavaScript ou jQuery (sans balise « script ») dans la section « JavaScript »
  4. Choisissez votre librairie Javascript si besoin est en haut à gauche. (Si vous choisissez jQuery, généralement, vous aurez envie de mettre « onDomReady » dans le champ en dessous et de ce fait, pas besoin de mettre les
    1
    $(document).ready(function(){

    qui est alors entré automatiquement.)

  5. Cliquez sur « RUN » pour voir le résultat et sur « SAVE » (ou « UPDATE » par la suite) pour sauvegarder votre création.
  6. Partagez le en copiant l’URL après avoir sauvegardé

Version longue pour bien comprendre l’outil. Revenir au résumé

L’écran se compose de 5 parties :
jsfiddle

A gauche, une partie fixe permettant de gérer le contexte.
Par défaut, vous vous trouvez sans framework js, et tout code JS entré sera lancé sur l’évènement « onload » du body.
En faisant dérouler, vous verrez que la quantité de librairies proposée est conséquente. Vous n’êtes pas obligé de rester sur l’évènement « onload », vous pouvez aussi choisir « onDomReady » (quand le DOM est prêt) ou alors pas sur un évènement mais en début ou en fin de page avec les conséquances que cela peut provoquer :-)

La plupart du temps, je rajoute jQuery 1.x sur l’évènement « onDomReady », ça couvre la plupart de mes besoins ou de ceux que j’aide.

Les « Fiddle Options » peuvent être utilies, principalement, si vous ne voulez pas tester en HTML5.

« External Ressources » vous permet de rajouter des fichiers CSS ou JS supplémentaires.

« Languages » que j’utilise peu, permet de passer en d’autres langages alternatifs tels que CoffeeScript

« Ajax Request » explique comment simuler AJAX sur jsFiddle. C’est assez déroutant, n’hésitez pas à regarder les exemples. Personnellement, je m’y suis frotté une fois et j’ai passé plus de temps à comprendre qu’à l’utiliser ;-).

À droite, les parties servant à l’édition.
Les 4 autres parties sont assez explicites : L’éditeur HTML, CSS et JS sont indiqués.
L’encart « Result » permet de voir le résultat une fois que vous validez vos codes et contexte en cliquant sur « RUN ». Ce bouton permet de lancer votre essai, sans toutefois sauvegarder ! Pour cela, cliquez simplement sur « SAVE ». Cela vous renverra sur une nouvelle page qui lancera votre code. Attention, chaque clic sur « SAVE » (qui devient « UPDATE » après la 1ère sauvegarde) donne une nouvelle URL incrémentée (donc 1- on peut voir que vous galérez au nombre de sauvegarde, 2- vous pouvez facilement vous y perdre en sauvegardant trop souvent). Je vous conseille de tenter avec « RUN » et de sauvegarder quand vous en avez vraiment finit.
Les 2 autres boutons sont facultatifs, le premier réaligne votre code JS (mais j’aime moyennement le style), le deuxième le valide via JSLint.

Voilà, basiquement comment s’utilise ce formidable outil. D’autres possibilités sont offertes quand vous créez un compte dessus (archivage de vos fiddle, showcase, etc.).

Laisser un commentaire