Outils pour utilisateurs

Outils du site


cours_2008:bases_de_la_programmation_orientee_objets_et_evenementielle:tp:bases_de_javascript

Bases de Javascript

Cette activité a pour but la prise en main de la console de FireBug et l'expérimentation des bases du langage Javascript.

FireBug

FireBug permet de déboguer le HTML, le CSS et surtout le Javascript !

L'installer si ce n'est déjà fait. Comme tout logiciel, il n'est jamais inutile de lire la documentation.

Question : quels sont les raccourcis claviers de la ligne de commande (c.-à-d. console) ?

La console

La console de FireBug est un ce que l'on appelle une boucle d'interprétation où en anglais REPL.

Comme indiqué sur Wikipédia, cela permet de tester interactivement des commandes.

Remarque : vous connaissez le proverbe, “les bons ouvriers ont de bons outils”. Ce n'est donc pas un hasard si tous les navigateurs WEB ont maintenant des outils du style de FireBug :

Mise en oeuvre

Pour des raisons de performance, les fonctionnalités de FireBug ne sont pas activées par défaut. Vous pouvez l'activer de différentes façons :
Activer FireBug

Fonctionnalités de base

Il existe deux modes de saisis, suivant que vous vouliez saisir une ou plusieurs lignes :
FireBug saisie sur une ligne

FireBug saisie sur plusieurs lignes

Il n'est pas interdit de connaître les raccourcis clavier. Une fonctionnalité bien pratique en mode simple ligne, est que vous pouvez éditer les commandes précédentes en utilisant les touches de curseur Haut et Bas.

Interaction avec HTML et les objets Javascript

Voir la documentation.

A cela s'ajoute :

  • La possibilité d'interagir avec les résultats :

FireBug click sur résultatFireBug après click sur résultat

  • La possibilité d'interagir avec les éléments HTML préalablement inspectés :
    • Inspecter un élément dans l'onglet HTML.
    • Utiliser la variable $0 dans la console.

FireBug inspecterFireBug Inspecter dans la console

Essayer la commande : $0.style.display = "none"

Affichage de messages

Quand FireBug est installé, vous pouvez incorporer des commandes pour afficher des messages :
FireBug console.log

Cette fonctionnalité est également disponible sous Safari. On peut penser que cela deviendra un standard (window.opera.postError comme palliatif sous Opera).

Les avantage de console.log :

  • On peut “inspecter” les résultats affichés
  • Cela ne bloque pas l'exécution du script.
  • Pendant le débogage, vous pouvez laisser les messages.

Si vous laissez les instructions console.log dans des scriptes publiquement accessibles, penser à gérer l'absence de cette fonction.

if (typeof console == "undefined") {
  var console = { log: function() {} };
}

Ne chercher pas à comprendre le code ci-dessus, c'est juste pour vous monter qu'il n'existe aucune raison de ne pas utiliser console.log.

Donc par pitié, n'utilisez JAMAIS alert dans vos scripts.
Remarque : si vous tenez à utiliser alert, je peux vous trouver une copie de Netscape 4 à installer.

Débogage

Petits bouts de javascript

Le but est d'essayer des commandes simples pour découvrir les éléments de base de Javascript.

Taper les commandes qui suivent dans la console de FireBug.

  • »> représente l'invite de commande. Ce qui le suit est la commande.
  • >>> // ou un commentaire.

Ce que c'est : typeof

La documentation est votre amie !

Le but n'est pas directement d'utiliser typeof, mais de faire un tour rapide des types reconnus par Javascript.

>>> typeof "Chaîne"
"string"
>>> typeof "TOUTES Chaînes"
 
>>> typeof 123
 
>>> typeof 123.45e-6
 
>>> typeof NaN
 
>>> typeof Infinity
 
>>> typeof true
 
>>> typeof false
 
>>> typeof {"key1":"val1", "key2":"val2"}
 
>>> typeof [1, 2, 3, 4]
 
>>> typeof null
 
>>> typeof (new Date())
 
>>> typeof undefined
 
>>> typeof (function () {})
 
>>> typeof Math.pow
 
>>> Math.pow(2,3)
 
>>> typeof (Math.pow(2,3))
 
>>> typeof truc_qui_n_est_pas
 
>>> var un_nombre = 10
>>> typeof un_nombre

Ce qu'il faut retenir :

  • Les types reconnus par Javascript sont :
    • Les chaînes de caractères
    • Les nombres
    • Les booléens
    • Les objets
    • Les fonctions
    • Et "undefined", ce qui n'existe pas.
  • Attention :
    • un tableau [] est un "objet" !

Ce qui est faux

%%==%% a tout faux

Attention : ne cherchez pas à comprendre ce qui suit. Le but est simplement de montrer pourquoi vous ne devez JAMMAIS utiliser == mais toujours ===

Pris de Javascript the good parts (a lire quand vous serez grand):

>>> '' == '0'
 
>>> 0 == ''
 
>>> 0 == '0'
 
>>> false == 'false'
 
>>> false == '0'
 
>>> false == undefined
 
>>> false == null
 
>>> null == undefined
 
>>> ' \t\r\n' == 0

Il est bien sûr conseillé de refaire les mêmes comparaisons avec ===, pour avoir des résultats plus logiques !

Vrai ou faux ?

>>> vrai_ou_faux = function (val) { if (val) {return "Vrai";} else {return "Faux";}}
 
>>> vrai_ou_faux(true)
 
>>> vrai_ou_faux(false)
 
>>> vrai_ou_faux(0)
 
>>> vrai_ou_faux(1)
 
>>> vrai_ou_faux(-1)
 
>>> vrai_ou_faux('vrai')
 
>>> vrai_ou_faux('faux')
 
>>> vrai_ou_faux('false')
 
>>> vrai_ou_faux('')
 
>>> vrai_ou_faux(NaN)
 
>>> vrai_ou_faux(null)
 
>>> vrai_ou_faux(undefined)
 
>>> vrai_ou_faux({})
 
>>> vrai_ou_faux([])

Calcul d'expressions

Décomposer dans la console :

  • ( A OU (NOT( B ) ET C ))
  • ( NOT( A ) OU ( B OU (NOT( B ) ET C )))

Voir l'exemple (cours algo).

cours_2008/bases_de_la_programmation_orientee_objets_et_evenementielle/tp/bases_de_javascript.txt · Dernière modification: 2009/04/01 22:00 (modification externe)