Outils pour utilisateurs

Outils du site


cours2007:poo1:cm:fonctions_objets

Voir cette page sous forme de diaporama.

Éléments de Structurations : Fonctions et Objets

Objets : POO

Paradigme ?

Paradigme
est une représentation du monde, une manière de voir les choses, un modèle cohérent de vision du monde qui repose sur une base définie

JavaScript et POO

Attention !

JavaScript se base sur le concept de programmation orientée prototype.

En général les autres langages utilisent des objets qui sont des instances d'une Classe.

ECMAScript 4, JavaScript 2.0 et aujourd'hui ActionScript 3.0 ; évolue vers la programmation basée sur des Classes.

Objet ?

Objet [INFORMATIQUE]
Module structuré et limité constitué d’un ensemble de données et de procédures qui décrivent leur manipulation.
Ensemble unitaire d’informations, créé à l’aide d’une application, qu’on peut manipuler au moyen de ses propriétés et insérer dans un autre document.

POO et JavaScript

Classe en JavaScript

Il est possible d'émuler la création d'objet basé sur des Classes en utilisant des librairies en JavaScript :

exemple avec MooTools

var Cat = new Class({
    initialize: function(name){
        this.name = name;
    }
});
var myCat = new Cat('Micia');
alert(myCat.name); //alerts 'Micia'

Éléments de Structurations

Rappel, 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)

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

Les Fonctions

JavaScript est un langage de programmation fonctionnelle.

Une fonction est un ensemble d'instructions :

  • réalisant une certaine tâche.
  • prends zéro, un ou plusieurs paramètres et retourne une valeur.

Déclaration de fonctions

function nomFonction(param,autreParam,...){
  // corps de la fonction
  return resultat;
};
var nomFonction = function (param,autreParam,...){
  //corps de la fonction
  return resultat;
};

Les deux formes sont équivalentes.

Déclaration de fonctions

function nomFonct(param,autreParam,..){
  // corps de la fonction
  return resultat;
};

function : mots-clefs déclarant une fonction.
nomFonct : nom de la variables à qui est affecté la fonction (optionnel).
param,autreParam,… : paramètres de la fonction (optionnel).
// corps de la fonction : bloc de code exécuter par la fonction.

Paramètres d'une fonction

  • Un paramètre de fonction et une donnée fournie au code de la fonction.
  • Une fonction permet de réemployer un comportement.
    • Les paramètres permettent d'adapter ce comportement.
  • Les paramètres sont passé par références en JavaScript.

Une fonction peut avoir :

nombre de paramètres :

  • zéro : function uneFonction(){};
  • un : function uneFonction(unParametre){};
  • deux : function uneFonction(premierParam,secondParam){};;
  • plein : function uneFonction(a,b,c,d,e,f){};;

une fonction est un objet

function uneFonction(){};
var autreVariable = uneFonction;
alert(autreVariable===uneFonction); // true

L'invocation (exécution) d'une fonction se fait en ajoutant des parenthèses au nom de variable qui la référence.

uneFonction(); // exécute la fonction
autreVariable(); // exécute la même fonction

zéro paramètre

function uneFonction(){ 
  alert("dans une fonction");
};
uneFonction();

un paramètre

function uneFonction_1(unParametre){ 
  alert("dans une fonction avec : "+unParametre);
};
uneFonction_1("une valeur");

deux paramètres

function uneFonction_2(premierParam,secondParam){ 
  alert("dans une fonction avec : \n"+
         premierParam+" et "+secondParam);
};
uneFonction_2("une valeur","une autre valeur");

pleins de paramètres

function uneFonction_6(a,b,c,d,e,f){ 
  alert("dans une fonction avec : \n"+
         a+","+b+","+c+","+d+","+e+","+f);
};
uneFonction_6(6,5,4,3,2,1);

Nombre de paramètres variables

function uneFonction_1(unParametre){ 
  alert("dans une fonction avec : "+unParametre);
};
uneFonction_1("une valeur","sera ignoré")

Les paramètres surnuméraires sont tout simplement ignorés (pas de message d'erreur)

Nombre de paramètres variables

function uneFonction_2(premierParam,secondParam){ 
  alert("dans une fonction avec : \n"+
         premierParam+" et "+secondParam);
};
uneFonction_2("une seule valeur");

La variable vaut alors undefined, qui peut provoquer une erreur si on l'utilise.

Idiome : Valeur par défaut

function uneFonction_1_1(premierParametre,optionnel){ 
  optionnel = optionnel || "valeur par défaut";
  alert("dans une fonction avec : \n"+
         premierParametre+" et "+secondParametre);
};

optionnel valant undefined, le “ou” retourne “valeur par défaut”.

uneFonction_1_1("une valeur");

Pour information

Nombre de paramètres variables :

function utiliseArguments () {
   alert("dans une fonction applé avec "+
     arguments.length+" arguments :\n"+
     arguments[0]+","+arguments[1]+","+arguments[2]);
}
utiliseArguments("un seul");
utiliseArguments(6,5,4,3,2,1);

Résumé

  • Une fonction est un Objet.
    • Variable pointant vers une fonction.
    • Exécution de la fonction du fait des parenthèses.
  • Le nombre d'arguments est variable.
    • Une source d'erreurs potentielles.
    • Utilisé par les librairies JavaScript (+souple).

Valeur de retour

function nomFonct(Orange>param,autreParam,..){
  // corps de la fonction
  return resultat;
};

retourne la valeur résultant de l'évaluation de l'expression.

Retour au point d'appel

function nomFonct(Orange>param,autreParam,..){
  // corps de la fonction
  return;
  // Jamais exécuté };

Stop l'exécution de la fonction, retourne au point d'appel, le reste du bloc n'est pas exécuté.

Retourne undefined par défaut sauf dans le cas d'un constructeur qui retourne this (voir après).

Exemple

function somme(a,b) {
  return a+b;
};
alert("2 et 5 donnent : "+somme(2,5));

Fonction Salutation

function salutation (sexe,statut,age) {
  if( sexe=="M" ) {
    if ( age<18)  { 
      return "Salut p'tit mec"; 
    } else { 
      return "Bonjour monseigneur"; 
    }
  } else {
    if (statut=="mariée") { 
      return "Bonjour madame"; 
    } else {
      if ( age<25 ) {
        return "Salut poupée"; 
      } else { 
        return "Bonjour madame"; 
      }
    }
  }
}

Fonction Salutation

function salutation (sexe,statut,age) {
  ...
}
 
window.addEvent('domready', function(){
  $('salutation').addEvent('click',function() {
    var champSexe = $('sexe').value;
    var champStatut = $('statut').value;
    var champAge = parseInt($('age').value,10);
 
    $('message').setText(
      salutation(champSexe,champStatut,champAge));
  });
});

Porté des variables

Idiome Javascript :
(function (){
  // codes
})();

On définit une fonction anonyme et on exécute immédiatement son code.

Porté des variables

Les fonctions (et elles seules) définissent un nouvel espace de nom.

var variable = "dehors";
alert(variable); // dehors
(function(){
  var variable = "dedans";
  alert(variable); // dedans
})();
alert(variable); // dehors

Porté des variables

Les fonctions capturent les variables de l'espace où elles sont déclarées.

var variable = "avant";
function fun(){
  alert("fun : "+variable);
}
alert(variable); // avant
fun(); // fun : avant
variable = "après";
alert(variable); // aprés
fun(); // fun : après

JavaScript = fonctionnel

  • Les fonctions sont des valeurs
  • Les déclarations de fonction sont des expressions
  • Les fonctions capturent les variables

JavaScript à plus de caractéristiques de programmation fonctionnelle que de particularité de POO !

Maux de tête

function generateur (base) {
  var valeur = 1;
  function iterateur() {
    valeur = valeur * base;
    return valeur;
  }
  return iterateur;
}
iterateur2 = generateur(2);
iterateur2(); // 2
iterateur2(); // 4
iterateur2(); // 8
iterateur2(); // 16

exemple

Les objets

Objet (JavaScript)
Module structuré et limité constitué d’un ensemble de données
Un Objet en javascript n'a pas à proprement parler de méthodes, mais il à des propriétés qui sont peuvent contenir des fonctions.

Notation littérale

var p = {'sexe':'M','age':18,'status-marital':'marié'};
var p = {sexe:'M',age:18,'status-marital':'marié'};

Notation équivalente, les clefs peuvent être des identifiants si cela est possible (caractères autorisés)

Notation littérale

Une notation sur plusieurs lignes est plus claire :

var p = {
  sexe:'M',
  age:18,
  'status-marital':'marié'
  };

Notation littérale

{
  sexe:'M',
  age:18,
  'status-marital':'marié'
}

{ } : Délimiteur de la déclaration de l'objet.
, : séparateur des couples nom/valeur.

Notation littérale

{
  sexe:'M',
  age:18,
  'status-marital':'marié'
}

nom de la propriété,
          un identifiant ou une chaîne de caractères.
: : séparateur de nom/valeur.
“valeur” : expression donnant la valeur à affecter à la propriété.

Accès aux propriétés

p.sexe; // 'M'
p['sexe'] // 'M' (idem)
p.sexe = 'F';
p['sexe'] = 'F'; // (idem)

Attention : p.status-maritalerreur

Création dynamique de propriétés

var p = {};
p.nom = 'dupont'; // {nom:'dupont'}
p['status-marital'] = 'marié';
    // {nom:'dupont', 'status-marital':'marié'}

Déclaration complexe

var p = {
  age:(6*7),
  adresse:{
    rue:'du sôt',
    ville:'age'
  }
};
p.age; // 42
p.adresse.ville = 'Montbéliarde';

Relation Tableau / Objet

  • Un tableau est un objet qui reçoit une propriété length
  • N'utiliser que des clefs numériques avec un tableau.
  • Dans le cas de clefs non numérique, utiliser un objet comme tableau associatif.

Exemple Tableau

var a = [];
a[3] = 3; // [undefined, undefined, undefined, 3]
a.length; // 4
a[6] = 'six'
//  [undefined, undefined, undefined, 3,
//                  undefined, undefined, "six"]
a.length; // 7
 
var b = new Array(2); // [undefined, undefined]

Utilisation d'objet

function salutation (personne) {
  ...
}
 
window.addEvent('domready', function(){
  $('salutation').addEvent('click',function() {
    var personne = {
      sexe: $('sexe').value,
      statut: $('statut').value,
      age: parseInt($('age').value,10)
    };
 
    $('message').setText(salutation(personne));
  });
});

Exemple menu HTML

<ul id="menu">
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
    <li><a href="#">test 3</a></li>
</ul>
#menu li a {
   display:block;
   margin: 0;
   font-size:20px;
   background-color:#5E994C;
}

Exemple menu JS

window.addEvent('domready', function(){
  var menuElements = $$('#menu li a');
  menuElements.setStyles({'font-size':'20px','color':'#0000FF'});
  menuElements.each(function(element) {
    var fx = new Fx.Styles(element,{duration: 500,transition: Fx.Transitions.Quad.easeInOut,wait:false});
    element.addEvent('mouseenter',function() {
      fx.start({'font-size':'60px','color':'#FF0000'});
    });
    element.addEvent('mouseleave',function() {
      fx.start({'font-size':'20px','color':'#0000FF'});
    });
  });
});

Pour la rentrée

Un menu en HTML/CSS ; ex: CSS Drive Menu Designs

  • Le code HTML
  • Le code CSS
    • état normal
    • état de la page active
    • état survolé
  • Une description des transitions désirées.

Je ne demande pas du code JavaScript, juste un menu HTML/CSS fonctionnel.

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