Outils pour utilisateurs

Outils du site


cours_2008:bases_de_la_programmation_orientee_objets_et_evenementielle:tp:decomposions_d_expressions

Décompositions d'expressions

Le but de ce TP est d'arriver à décomposer une expression pour en comprendre et documenter chaque étape.

Le contenu de ce TP reflète en partie le contenu de l'interrogation.

Attention : le jour de l'interrogation, il n'est pas garanti que les documents soient autorisés. Si des documents personnels sont autorisés, cela se limitera au document manuscrit. Les photocopies et impressions ne seront en aucun cas autorisées.

Analyse d'expressions

Vous devez être à même d'analyser chaque élément d'un programme pour pouvoir le comprendre.

Le but de cette activité est de vous inculquer cette démarche.

Dans la pratique, on ne raisonne généralement pas à un si bas niveau. Mais il faut être capable de le faire pour résoudre les problèmes qui surviennent quand notre raisonnement se montre défaillant (ce qui arrive assez souvent).

Exemple

document.getElementById("container").style.width = "500px"

Analyse lexicale

Utiliser les diagrammes de syntaxe pour nommer chaque partie de l'expression (ne pas faire figurer les regroupements et l'ordre d'évaluation).

  1. Identifiant.
  2. Identifiant.
  3. Appel d'une fonction.
  4. Délimiteur de chaîne de caractères.
  5. Chaîne de caractères.
  6. Délimiteur de chaîne de caractères.
  7. Identifiant.
  8. Identifiant.
  9. Délimiteur de chaîne de caractères.
  10. Chaîne de caractères.
  11. Délimiteur de chaîne de caractères.

Décomposition en sous-expressions

Utiliser une représentation sous forme boîte figurant les regroupements et l'ordre d'évaluation de l'expression.

Décomposition en sous-expressions

Documentation des sous-expressions

Le but est de retrouver dans une documentation (Javascript/HTML) la définition et le sens de chaque élément qui n'est pas défini par votre programme.

Utiliser la documentation de MDC : JavaScript et DOM.

Documentation des sous-expressions

  1. objet document : DOM
  2. méthode de l'objet document (propriété contenant une fonction).
  3. Paramètre d'appel de la méthode : Une chaîne de caractères.
  4. Retourne l'élément qui à pour identifiant (id) "container"
  5. propriété style d'un objet de type element
  6. Propriété width de l'objet (représentant les déclarations de l'attribut style de l'élément)
  7. Valeur (ici chaîne de caractères) qui sera affecté à la propriété.
  8. Affectation de la valeur à la propriété width de l'objet de type element.style (les styles CSS de l'objet ayant pour id "container").

Valeurs des sous-expressions

En utilisant le fichier d'exemple suivant :

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
  <title>Exemple 1</title>
  <style type="text/css" media="screen">
    #container {
      background-color:#D06137;
    }
  </style>
</head>
 
<body>
  <div id="container">
    Une division ayant pour <code>id "container"</code><br />
    <br />
    <p id="sur_qui_on_click">si l'on click sur moi</p>
  </div>
</body>
</html>

Ouvrir le fichier dans une nouvelle fenêtre : /exemples/cours2008/javascript/tp2/exemple1.html

Dans la console de FireBug, évaluez successivement chacune des sous-expressions :

>>> document
 
>>> document.getElementById
 
>>> document.getElementById("container")
 
>>> document.getElementById("container").style
 
>>> document.getElementById("container").style.width
 
>>> document.getElementById("container").style.width = "500px"
 
>>> document.getElementById("container").style.width

Expression simple

Appliquer la démarche précédente à l'expression suivante :

document.getElementsByTagName("div")[0].firstChild.data = "Houps j'ai fait quoi ?"

Analyse lexicale

Utiliser les diagrammes de syntaxe pour nommer chaque partie de l'expression (ne pas faire figurer les regroupements et l'ordre d'évaluation).

Décomposition en sous-expressions

Utiliser une représentation sous forme boîte figurant les regroupements et l'ordre d'évaluation de l'expression.

Documentation des sous-expressions

Le but est de retrouver dans une documentation (Javascript/HTML) la définition et le sens de chaque élément qui n'est pas défini par votre programme.

Utiliser la documentation de MDC : JavaScript et DOM.

Remarque : element.firstChild retourne un noeud (Node), c-a-d un élément ou du texte. Dans le cas présent c'est du texte.

On ne peut le savoir sans connaître le document :

>>> document.getElementsByTagName("div")[0].firstChild.nodeName
 
>>> document.getElementsByTagName("div")[0].nodeName

Voir un exemple expliquant le DOM 1) (sera développé plus tard en cours).

Valeurs des sous-expressions

Dans la console de FireBug, évaluez successivement chacune des sous-expressions :

(Pour le même document que précédemment /exemples/cours2008/javascript/tp2/exemple1.html)

 

Expression avec fonction comme valeur

Le code suivant met en place un gestionnaire d'événement. Le gestionnaire d'événement est une fonction qui est passée par valeur.

On peut l'écrire en référençant la fonction par une variable.

var quand_on_click = function () {
  document.getElementById("container").textContent = "pas tapez! :)";
};
document.getElementById("sur_qui_on_click").addEventListener("click", quand_on_click , false);

Ou, on peut l'écrire en utilisant une fonction anonyme.

document.getElementById("sur_qui_on_click").addEventListener("click", function () {
  document.getElementById("container").textContent = "pas tapez! :)";
}, false);

Analyse de l'expression mettant en place le gestionnaire d'événement

On se limite au code suivant :

document.getElementById("sur_qui_on_click").addEventListener("click", quand_on_click , false);

Remarque : ne fonctionne pas sous Internet Explorer (voir une référence, sera repris en cours)

Analyse de la fonction servant de gestionnaire d'événement

On se limite au code suivant :

document.getElementById("container").textContent = "pas tapez! :)"

Remarque : textContent ne fonctionne pas sous Internet Explorer (voire une référence)

Page de test

Le but est de faire une page HTML comportant le code précédant pour le tester.

Placer le code javascript en fin de document :

<html>
  <head>
    ...
  </head>
<body>
  ...
  <script type="text/javascript">
    ...
  </script>
</body>
</html>

Analyse d'une expression au sein d'un programme

Sans doute pour le TP suivant. Me demander si vous arriver la.

Le but est de construire votre compréhension d'une expression donnée au sein d'un programme.

Utilisation du débogueur

Placer un point d'arrêt sur la ligne indiqué puis :

Relancer l'exécution :

Inspecter le contenu des variables :

Avancer d'un pas (et inspecter les changements):

Visualiser le déroulement dans l'appel de fonction :

Construction de trace

Utiliser l'instruction de FireBug : console.log( ... ) pour visualiser globalement le déroulement du programme :

 

Compléter le programme

En vous inspirant du code précédant et en utilisant la compréhension que vous avez acquise de sont fonctionnement : compléter le code suivant pour obtenir le comportement désiré.

 

Indices sur les autres questions de l'interrogation

  • Savoir écrire les diagrammes de syntaxe donnée en cours/TD.
  • Écrire un digramme de syntaxe (supposé correct) à partir d'un ou plusieurs exemples de code.

Rappel : toutes copies de documents sera formellement interdite le jour de l'interrogation. Si vous venez avec une copie de ce document le jour de l'interrogation. Fut-il mêlé à d'autres documents, ou rangée dans vos affaires : vous serez exclu directement du contrôle avec un ZERO à la clef.

1) La version initiale de ce document date de 2005
cours_2008/bases_de_la_programmation_orientee_objets_et_evenementielle/tp/decomposions_d_expressions.txt · Dernière modification: 2009/04/08 22:00 (modification externe)