Outils pour utilisateurs

Outils du site


cours2007:poo1:cm:syntaxe

Voir cette page sous forme de diaporama.

Syntaxe JS

Syntaxe
Ensemble des règles permettant l’écriture des instructions d’un programme dans un langage donné.

Objectifs

  • Lire pour pouvoir écrire
  • Comprendre pour pouvoir faire.

Contenus

  • Quoi dans tout langage
  • Éléments de base
  • Structure de base
  • Processus de lecture
  • Bonnes pratiques d'écriture

Exemples

Structure

La programmation n'est qu'un problème de structure. Il faut :

  • Les connaître
  • Les comprendre

Pour pouvoir ensuite : les utiliser.

La suite de ce cours énumère et illustre ces structures.
Il reprend le vocabulaire vu précédemment en essayant de montrer son articulation.

Connaître les structures (de quoi ?)

Il existe deux types distincts de structures :

  • celles du code
  • celles des données

Connaître les structures (complexité)

Il existe plusieurs niveaux de structures :

  • les éléments de base
  • les éléments d'assemblage
    • (permettre de composer des éléments de base)
  • les éléments d'abstraction
    • (permettre de globaliser un concept)

Connaître les structures (vocabulaire)

Abstraction
Action d’isoler une notion des autres par l’esprit.
Concept
Idée générale, représentation mentale et abstraite que l’on a d’un objet

Les niveaux de structures du code

Les éléments de base :

  • Constante littérale
  • Variable (ou référence)
  • Opérateur
  • Expression
  • Affectation
  • Instruction

Les niveaux de structures du code

Les éléments d'assemblage :

  • Block d'instruction
  • Structure de contrôle

Les éléments d'abstraction :

  • Fonction
  • Objets

Structures du code : Base (rappel)

Rappel :
Les éléments de base :

  • Constante littérale
  • Variable (ou référence)
  • Opérateur
  • Expression
  • Affectation
  • Instruction

Structures du code : Base

La brique de base d'un programme est l'instruction.

Exemples d'instructions :

x = 5;
y = 3 * Math.sin(x) + 1;
alert(y);

Rq: une instruction n'est pas nécessairement une affectation, exemple ici alert(y)

Structure d'une instruction

y = 3 * Math.sin(x) + 1;

On peut décomposer une instruction : c'est une expression.

Instruction
Se réfère typiquement à une opération simple
Expression (MATHÉMATIQUE)
Ensemble de nombres et de lettres reliés par des signes indiquant les opérations à effectuer.

Décomposition : affectation

y = 3 * Math.sin(x) + 1;

  • On réalise une affectation.
  • On évalue le membre de droite (expression).
  • La variable de gauche reçoit une référence au résultat de l'évaluation.

Décomposition : affectation

Affectation (ALGORITHMIQUE)
Opération qui permet d'attribuer une valeur à une variable (Rq : toujours une référence en JavaScript)
Variable (MATHÉMATIQUE)
Élément auquel on peut attribuer plusieurs valeurs numériques.
Variable (JavaScript)
Symbole à qui on associe une référence à un objet
Rq : suivant le langage l'affectation peut faire partie d'une expression et être vue comme un opérateur.

Décomposition : expression

Expression (MATHÉMATIQUE)
Ensemble de nombres et de lettres reliés par des signes indiquant les opérations à effectuer.
On évalue une expression en évaluant ses sous-expressions.

Décomposition : expression

3 * Math.sin(x) + 1;

  • On réalise la somme (opérateur +)
  • Entre le résultat de l'évaluation de la sous-expression (3 * Math.sin(x))
  • Et la valeur de la constante littérale 1 (donne un entier : 1)

Expression : sous-expression

Le traitement se répète :

3 * Math.sin(x);

  • On réalise le produit (opérateur *)
  • Entre la valeur de la constante littérale 3 (donne un entier : 3)
  • Et le résultat de l'évaluation de la sous-expression (Math.sin(x))

Décomposition notation pointée

resultat = objet.message(parametre,autre_parametre, ... )

Math.sin(x);

  • On évalue Math (en JavaScript c'est objet particulier qui sert de bibliothèque)
  • On lui demande sa méthode sin
  • On exécute sin avec x comme paramètre
  • Le résultat retourné est la valeur retourne par la fonction sin(x)
    • (évalué dans l'objet ici Math)

Expression : appel de fonction

sin(x);

Pour évaluer une fonction :

  • On évalue ses paramètres
    • ici un seul : la variable x
  • On exécute la fonction en lui passant les résultats de l'évaluation des paramètres (les références aux objets résultants de l'évaluation des paramètres)
  • Le résultat retourné est la valeur retournée suite à l'exécution de la fonction.

Expression : évaluation d'une variable

x

L'évaluation d'une variable retourne la valeur associée à celle-ci.

Une variable contient une référence. Le résultat retourné est l'objet pointé par la référence.

x = 5;
alert(x);

Expression : évaluation d'une variable

x = 5;
alert(x);

Expression : conclusion

Exécuter une instruction, c'est évaluer un arbre d'expression :

y = 3 * Math.sin(x) + 1;

Expression : conclusion

y = 3 * Math.sin(x) + 1;

Décomposition : résumé

x = 5;
y = 3 * Math.sin(x) + 1;
alert(y);

Bloc d'instructions.

Décomposition : résumé

x = 5;
y = 3 * Math.sin(x) + 1;
alert(y);

Instruction

Délimiteur d'instruction

Décomposition : résumé

x = 5;
y = 3 * Math.sin(x) + 1;
alert(y);

Expression

Décomposition : résumé

x = 5;
y = 3 * Math.sin(x) + 1;
alert(y);

Opérandes

Opérateur

Décomposition : résumé

x = 5;
y = 3 * Math.sin(x) + 1;
alert(y);

Sous-expression

Décomposition : résumé

x = 5;
y = 3 * Math.sin(x) + 1;
alert(y);

Constante littérale : valeur notée directement.

Variable : référence à une valeur (préalablement évaluer).

Remarque

J'ai recopier le cours de ruby en changeant 3 mots.

Changer de langage, les bases ne changeront pas, juste des nuances.

Structure de contrôle

if( sexe=="M" ) {
  if ( age<18)  { 
    reponse = "Salut Jh"; 
  } else { 
    reponse = "Bonjour M"; 
  };
} else {
  if (statut=="mariée") { 
    reponse = "Bonjour Md"; 
  } else {
    if ( age<25 ) {
      reponse = "Salut Mlle"; 
    } else { 
      reponse = "Bonjour Md"; 
    };
  };
};

Alternative

if ( condition ) {
  // Si condition vraie
} else {
  // Si condition fausse
};

Alternative

if ( condition ) {
 // Si condition vraie
} else {
  // Si condition fausse
} ;

Instruction

Délimiteur d'instruction

Alternative

if ( condition ) {
  // Si condition vraie
} else {
  // Si condition fausse
};

Mots-clefs

Alternative

if ( condition ){
  // Si condition vraie
} else {
  // Si condition fausse
};

Blocs d'instructions
Une structure de contrôle et une instruction qui compose des instructions.

Expression

Alternative

if ( vraie ) {
  // Si condition vraie
} else {
  // Si condition fausse
};

Si la condition est vraie, on exécute le premier block.

Alternative

if ( fausse ){
  // Si condition vraie
} else {
  // Si condition fausse
};

Si la condition est fausse, on exécute le second block.

Alternative

sexe==“M” age<18 statut==“mariée” age<25
if( sexe==“M” ) { si ? ? ? ?
  if ( age<18 ) { vrais si ? ? ?
    reponse = “Salut Jh”; vrais vrais ? ? (vrais)
  } else { vrais sinon ? ? ?
    reponse = “Bonjour M”; vrais faux ? ?
  }; vrais fin si ? ? ?
} else { sinon ? ? ? ?
  if ( statut==“mariée” ) { faux ? si ? ?
    reponse = “Bonjour Md”; faux ? vrais ?
  } else { faux ? sinon ? ?
    if ( age<25 ) { faux ? faux si ?
      reponse = “Salut Mlle”; faux ? faux vrais
    } else { faux ? faux sinon ?
      reponse = “Bonjour Md”; faux ? faux faux
    }; faux ? faux fin si ?
  }; faux ? fin si ? ?
}; fin si ? ? ? ?

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

3 lignes à décomposer, la décente aux enfers…

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Une seule instruction

Délimiteur d'instruction

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Objet

Operateur recherche d'une propriété sur un objet.

Propriété

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Fonction

Invocation

Paramètres

Exemple

window.addEvent('domready', function(){
<hi Orange>  $('dis_moi_tout').addEvent('click',function() {

    $('message').setText('Bien pas grand-chose');
  });
});

1er paramètre : Constante littérale ⇒ Fin

séparateur de paramètres

2nd paramètre : Expression

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Fonction anonyme

Paramétres à recevoir (ici aucun)

Corps de la fonction (Bloc d'instructions)

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Une seule instruction

Délimiteur d'instruction

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Expression : Doit retourner un Objet

Operateur recherche d'une propriété sur un objet.

Propriété

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Fonction

Invocation

Paramètre : Constante littérale ⇒ Fin

Le tout retourne un objet

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Fonction

Invocation

Paramètres

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

1er paramètre : Constante littérale ⇒ Fin

séparateur de paramètres

2nd paramètre : Expression / Fonction anonyme

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Une seule instruction

Délimiteur d'instruction

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Expression : Doit retourner un Objet

Operateur recherche d'une propriété sur un objet.

Propriété

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Fonction

Invocation

Paramètre : Constante littérale ⇒ Fin

Le tout retourne un objet

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

Fonction

Invocation

Paramètre : Constante littérale ⇒ Fin

Exemple

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

window.addEvent('domready', function(){
  $('dis_moi_tout').addEvent('click',function() {
    $('message').setText('Bien pas grand-chose');
  });
});

FIN !

cours2007/poo1/cm/syntaxe.txt · Dernière modification: 2008/04/24 22:00 (modification externe)