coffeescript

Mon premier coffeeScript

Nous allons aborder ce sujet par la pratique.

1 - Créer un nouveau projet dans ... www\exe003\coffeescript. Le robot fera 3 choses :

  • Livereload pour actualiser le navigateur automatiquement.
  • Compilation des slim en html
  • Compilation des coffeeScript en javaScript
    • (Pour cet exercice, pas de minification du javascript.)

2 - Préparation de l'atelier pour commencer à programmer :

  • Robot lancé.
  • index.slim et projet.coffee affichés simultanément dans sublime text.
  • index.html affiché dans le navigateur, mode livereload activé ... et vérifié.
  • Organiser les fenêtres à l'écran. Un ou plusieurs écrans supplémentaires sont recommandés.

Fichier "projet.coffee" :

Ce fichier-germe créé par le robot contient très peu de code.

init = ->
    # ...
$(window).load ->
    init()

Nous allons modifier ce code et expliquer tout cela :

  • Remplacer "# ..." par "alert('Bonjour monde cruel !')"
    • Attention, cette ligne commence par une tabulation.
  • Enregistrer. Que constatons-nous ?
    • Le navigateur affiche un message.
init = ->
    alert('Bonjour monde cruel !')
$(window).load ->
    init()

Explication :

  • Le signe -> signifie 'fonction'
  • $(window).load est un événement qui se produit lorsque la fenêtre est chargée.
    • Comprenez par là : lorsque le navigateur a fini de lire tout le code html et a chargé les fichiers connexes (css, js, images, ...)
  • init = ->     signifie "Mon nom est 'init' et je suis une fonction".
    • Les lignes qui suivent sont indentées pour indiquer que j'en suis le propriétaire et décrivent ce que je dois faire.
    • Tant que personne ne m'appelle je ne fais rien.
  • $(window).load ->           signifie "Lorsque la fenêtre sera chargée, le code qui suit sera exécuté"
    • Le code qui suit doit être indenté pour indiquer qu'il appartient à cet événement.

Ce code est lu ligne par ligne par le navigateur, enregistré dans sa mémoire, et prêt à être exécuté quand nécessaire.

Plaçons-nous en lieu et place du navigateur, et faisons comme lui :

  • init = ->      est une fonction ayant pour nom 'init' : je l'enregistre en mémoire (avec son code), mais je ne l'exécute pas.
  • $(window).load ->     est une fonction anonyme : je l'enregistre en mémoire (avec son code), mais je ne l'exécute pas.
  • C'est tout ... rien n'a été fait, mais tout est enregistré et indexé en mémoire.
  • ... une heure plus tard (à l'échelle humaine ... en réalité, quelques millisecondes pour le navigateur), le fichier html a été entièrement téléchargé, ainsi que les fichiers associés (fichiers connexes, appellés parfois 'assets').
  • Dès lors le navigateur (window) produit l'événement 'load'
    • Cet événement est intercepté par $(window).load ->      et le code dont il est propriétaire est exécuté.
    • Quel est ce code ? ... ce code est init() qui signifie "Exécute la fonction 'init', si elle existe. Si elle n'existe pas, envoyer une erreur."
      • Notez les parenthèses qui signifient "Exécuter".
      • Nous verrons plus tard que certaines fonctions nécessitent des paramètres, nommées dans les parenthèses.
        • Par exemple, la fonction
        • multiplier = (a, b) ->
              a * b
        • Qui signifie : renvoyer la valeur de 'a' multipliée par celle de 'b'

Exercice 1 :

  • Plaçons 2 champs de saisie dans la page, ainsi qu'un bouton sur lequel on pourra cliquer.
  • Lorsque l'on écrit du texte dans les 2 champs et que l'on clique sur le bouton, la concaténation s'affiche sur la page, sous le bouton.

Exercice 2 :

  • Même exercice, mais les 2 champs contiendront des nombres.
  • Le résultat devra être la somme des 2 nombres.
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 *