lundi 16 mai 2011

firebug : un ami qui vous veut du bien #javascript

Firebug possède une série d'option très pratique comme par exemple le 'profiler'. Ce dernier permet de mesurer le temps d'exécution de chaque fonction javascript.
Voici une copie d'écran.
Le profiler.
L'utilisation est assez simple:
  • Aller sur le site concerné.
  • Activer firebug (F12) 
  • Vérifier que l'option 'script' de firebug est active.(volet script) 
  • Puis aller dans l'onglet 'console' 
  • Commencer l'opération de profilage en cliquant sur le bouton profile.
  • Naviguer sur la page.
  • Arrêter le profilage en cliquant à nouveau sur le bouton profile. 

Les informations s'affichent dans la fenêtre firebug. Il est possible d’insérer des demandes de profilage dans le code source. (voir lien)

Les autres outils livrés avec firebug.

Les informations de log. En plus du simple console.log(), javascript propose des niveaux de log.
Il est possible d'avoir un affichage différencié en fonction du niveau de log. Celui ci va de debug à error.
Si une des méthodes de console.NIVEAU() est appelée avec un objet en paramètre, un lien hypertexte pointera sur la ligne et l'objet.
Aussi, il est préférable d'écrire console.niveau("ceci est mon message",object) au  lieu d'écrire ("ceci est mon message de log"+object)

  • console.debug(object[, object, ...])
  • console.info(object[, object, ...])
  • console.warn(object[, object, ...])
  • console.error(object[, object, ...])  

Les timers.
Firebug vous donne la possibilité d’insérer des  timers pour mesurer des temps exécution sur des portions de code. 
console.time(nom_timer) ;       //pour démarrer le chronomètre
console.timeEnd(nom_timer);  //pour arrêter le chronomètre

La trace d'un appel de fonction.
En insérant  un console.trace()au sein d'une fonction, la console affichera tous les appels de fonctions avec les paramètres.


Les assertions.
L'ajout de console.assert(condition,objet)  permet de lever une exception  si la condition est fausse. 
Il est donc possible de créer des tests de non régression en javascript     

En conclusion.

Firebug reste avant tout un vrai  débugger. Avec des possibilités d'exécution pas à pas, d'examen des variables ou encore la pose de point d'arrêt.

samedi 14 mai 2011

Cours 102 : les fonctions en javascript

En javascript tout est objet. Il existe certains types de base en javascript comme les Strings, les Dates. Une fonction est aussi un type de base comme un autre. Une fonction est un objet. On put assigner une fonction à une variable.

Ci-dessous des exemples de fonction:
Une fonctino peut etre anonyme , nommée, autoexecutée.
Enfin une fonction peut etre utilisée comme constructeur.




L'exécution donnera :

 node essaifunc.js
je passe par appel de fonc1
je passe par appel de fonc via la varible  b
je passe par appel d une fonction anonyme via la varible  c
je passe
je passe anom
fonction constructeur MyClass
je trouve:nom
 
Pour qu'une fonction soit autoexecutée , sa définition doit se terminer par (); ou (arg);
Ce type de fonction est utile pour lancer des actions dès la déclaration de la fonction (exemple à partir de son chargement dans un navigateur).

Une fonction se rapproche un peu de la notion de méthode dans des langages à base de classe. Mais il y plus de ressemblance avec la notion de bloc en tant que paramètre en Ruby.
 
Une fonction en javascript  accepte m'importe quel nombre de parametre.

 En cas d'absence d'un parametre , il sera assigné à la valeur indéfinie , mais la fonction ne levera pas d'exception.
Les parametres passées en plus sont disponibles dans un tableau arguments.

dimanche 8 mai 2011

cours 101 javascript: apprendre javascript

ce post n'a pas pour vocation d'etre un tutorial javascript,  mais plutot une série de conseil.
Pour apprendre javascript:
Un livre (gratuit) : Eloquent javascript.
Des sites: suivre le lien.



Bon, commençons par le niveau 0 en javascript.

0: Javascript est un langage interprété, orienté objet.


1: Comment tester votre code javacript ?
Le moyen le plus simple est de l'exécuter dans votre navigateur. Tous les navigateurs intègrent un moteur (interpreteur) javascript (dont le fameux V8 de chrome). Vous pouvez aussi utiliser du javascript en ligne de commande. L'exécution d'un javascript dans un terminal se fait  avec 'js'  qui est un interpreteur javascript en JAVA issu du projet Rhino. Le projet spidermonkey de Mozilla propose lui aussi un 'js' en C. Enfin, le projet node.js propose un serveur d'exécution pour du javascript


2: Comment debugger du javascript.
Réponse simple: utilisez firebug qui est une extension  de firefox. Firebug est indispensable pour un  développeur, c'est le couteau suisse de web.

vous pouvez ajouter l'appel à la fonction alert() pour afficher une popup de mise au point. Mais, il faut prendre l'habitude d'écrire  les messages de mise aupoint sur la console par l'appel  à la méthode  console.log() . Vous pouvez ainsi avoir plusieurs messages en sortie. La console est disponible sur tous les navigateurs


3: Faire un javascript affiché par  un navigateur.
Cela commence par la création d'un fichier d'extension html. Cette page sera minimaliste: une balise de page html et une balise pour le script.
 Le test se fera en ouvrant cette page dans un navigateur (fichier/ouvrir) . Cette méthode est suffisante pour commencer. Mais très vite il faudra isoler le javascript dans un fichier différent de celui  la page HTML.



le résultat du script sera visible dans la console.


4: La base: les variables et leur portée (scope).
C'est l'élément clé de tous les langages informatiques. C'est lui qui provoque les effets de bords, les régressions de code et qui engendre des heures de recherche dans le code. On fait souvent la distinction entre  une variable globale et une variable locale. Ce classement ne s'applique pas tel quel à javascript.
Rien de plus facile pour créer une variable globale: il suffit de ne pas la déclarer.
ex:
var a= 10 // variable locale
b=10 // variable globale
 
Mais locale à quoi ?  question épineuse (réponse ultérieusement).
Une variable locale de peut etre locale qu'a l'intérieur d'une fonction.

Aussi : toujours déclarer les variables (c'est une bonne habitude).
Un bloc ({ ..} n'isole pas une variable.



Résultat d'exécution :

root@eric-1001PX:~# node essaiscopenode.js
a avant 5
b avant 1
a dans la fonction 10
b dans la fonction 11
c dans la fonction 3
d dans la sous portee 4
e dans la sous portee 6
d dans la fonction 4
a apres 10
b apres 1
e apres 6




5: Le passage de paramètre à une fonction.
C'est aussi un un point critique de programmation. Javascript utilise le passage par valeur pour certains types  de parametre et le passage par réference pour les autres. Les tableaux et les objets sont passés aux fonctions par référence.

Démonstration:

Résultat :

root@eric-1001PX:~# node essainode2.js 
a avant 5
b avant jesuisunechaine
tab avant 1,2,3
a dans la fonction 9
b dans la fonction chainelocale
tab dans la fonction 1,10,3
a apres 5
b apres jesuisunechaine
tab apres 1,10,3


Pour terminer, il faut savoir qu'il n'y a pas d'espace de nommage natif en javascript, c'est au développeur à le prendre en charge.

Avec ces 6 elements vous avez franchi un niveau dans la maitrise du javascript.

jeudi 28 avril 2011

Nous sommes tous des mauvais programmeurs javascript

Le javascript a longtemps été le vilain petit canard de la programmation. Lancé en même temps que Java, son nom introduit dès le départ une ambiguïté java - javascript. Le choix a été dicté par le souhait des concepteurs de surfer dans le sillage de Java. Les fées n'ont pas été sympa avec lui: un mauvais nom, pas de norme, un moteur lent et des mauvaises habitudes de copier/coller.
Moi, le premier je prenais des morceaux de code javascript sur des sites au petit bonheur la chance. De fait, il y a beaucoup de personnes qui font du javascript SANS connaitre le javascript.

Heureusement les choses changent. Les moteurs javascript ont multiplié leur puissance par 1000 en moins de 5 ans. Le langage est normé. De bons programmeurs font des bons programmes javascripts (exemple jquery). Alors JAVA, Perl , Ruby ,Python ? non Javascript !. Les autres langages ne servent qu'a servir la soupe.
Ci dessous un document illustrant le bon usage du javascript:

Avec quelques bonnes pratiques:

  • Séparer la structure d'une page (HTML) et son comportement (JS)
  • Séparer la structure d'une page (HTML) et sa mise en forme (css)
  • Utiliser des vrais 'ID' (unique)
  • Utiliser  l'attribut 'class' pour le CSS
  • Privilégier les structures hiérarchiques du HTML (H1,H2 etc)  aux DIV
=> Pas de javascript dans le HTML
=> Éviter le css dans le HTML
=> Le CSS en tête de chargement

Et surtout : utiliser firebug !
 

Le moteur pour exécuter du javascript en ligne de commande : spidermonkey.
ou node.js (mais c'est une autre histoire).
Le livre qui va avec tout ca:


Les produits dérivés :

Node.js : déja cité
  is an event-driven I/O framework for the V8 JavaScript engine on Unix-like platforms
 (c'est pas beau ca ?)
C'est un concentré de l'informatique de demain: faire des serveurs qui supportent des milliers de connexions critiques et  'longues' (ex : steaming, flux twitter, informatique embarquée) .

coffeesscript : lien ici. 
Langage à la Ruby pour écrire simplement du javascript.

Rails 3.1 qui embarque jquery dans sa pile de manière très propre : pas de javascript dans le HTML.

mercredi 27 avril 2011

Une platine vinyle hi-tech



Pour tous les nostalgiques amoureux du beau son, il existe un moyen de redonner une deuxième jeunesse à ses disques 33 tours sans faire le lourd achat d'une platine.

Sur cette vidéo, deux jeunes font une démonstration d'une platine construite en Lego.
La partie audio est constituée d'un cornet doublé de papier aluminium garant d'une sonorité 'chaude'. Bien sûr la lecture par une aiguille peut abimer 'légèrement' le disque.


Le matériel


La vidéo:



L'utilisation d'un microcontroleur Arduino pilotant un moteur pas-à-pas permettrait d'obtenir une vitesse stabilisée.

samedi 23 avril 2011

JEE et la bouilloire

La chose la plus intelligente que j'ai lue sur l'énergie nucléaire est ici (suivre ce lien).
L'article titre sur :
Nucléaire : le moyen le plus dangereux pour faire bouillir de l’eau
Tribune de Bernard Laponche, publiée dans Libération le 24/03/2011

Je met en parallèle avec cet article le dernier numéro des Dossiers pour la science.



Lien vers la revue ici.

L'année 2012 sera riche en découverte scientifique grâce au satellite Plank. Et tout ce qu'on sait faire pour produire du courant est de faire tourner une turbine avec de la vapeur (technologie d'avant 1900). Quel gaspillage!.
La france est leader des constructeurs de centrales nucléaires MINITEL.

En faisant une analogie avec l'informatique.

J'ai commencé à faire du Java au début des années 2000, à l'époque des premiers APPLETS.
Puis j'ai enchainé sur les premiers frameworks : struts et spring.
J'ai arreté là, lassé de passer plus de temps à écrire des fichiers de configuration XML que du code.
Avec le recul, je crois que JEE est le moyen le plus complexe de répondre 'hello world' à une requete simple (comme GET /). JEE est bien une espèce de bouilloire.
Et je transpire en pensant que dans leurs bouilloires nucléaires à vapeur, c'est peut etre une autre bouilloire JEE qui supervise l'ensemble.
Le web n'est pas forcement la meilleure solution pour développer des applications métiers et JEE n'est pas la meilleure façon de faire des applications WEB.

samedi 16 avril 2011

Gestion de livre ou ebook

Deux programmes à découvrir pour organiser ses livres

Calibre pour ebook.

Calibre est écrit en python (lien ici) . C'est l'outil de référence pour gérer ses livres au format numérique. Il est capable de convertir les fichiers de PDF en epub.


Alexandria.

Alexandria est un gestionnaire de livre 'papier' lien ici. Par un titre ou par un numéro ISNB, il est possible de d'ajouter automatiquement un ouvrage.
La plupart des grands sites de vente de livre offrent un service de recherche accessible par des programmes.
Alexandria est ecrit en Ruby.





Mes dernières lectures:

  • Lolita de Vladimir Vladimirovich Nabokov.



J'aime énormement le film éponyme de Stanley Kubrick, mais le film est très aseptisé par rapport au livre. C'est un livre assez 'perturbant' et difficile.
Rappel Stanley Kubrick est à la cinémathèque de Paris.

  • Deuxième livre:

L’Attrape-coeurs de J. D. Salinger


C'est un classique, étudié dans les écoles US. Après sa lecture, je n'avais pas envie de tuer John Lennon.(voir article sur wikipédia).

Et enfin, j'ai commencé:

  • Getting Started with Arduino




Et là c'est des heures de plaisir solitaire en perspective.
lien du site arduino.