IFT 1146 – Programmation Internet
Copyright, 2004 © Alain Pilon
Ch. 2
Les fonctions et objets
Fonctions
• Les commandes sont regroupées en unités logiques (appelées aussi procédures)
• Sert à simplifier l’écriture des programmes
• Permet de réutiliser des commandes complexes
• Par exemple, un programme pourrait se simplififier à:
– Obtenir les renseignements de l’utilisateur – Calculer la paye
– Afficher les résultats
Fonctions
<head>
<script type="text/javascript">
<!-- function nom_fct(paramètres) {commande1;
commande2;
…commanden; }// -->
</script>
</head>
<body>
<script type="text/javascript">
nom_fct(…);
</script>
</body>
Exemples
<head>
<script type="text/javascript">
<!–
var nom, prenom, salaire_horaire, nb_heures;
function obtenir_info( ) { … }
function calculer_paye( ) { … }
…
</script>
</head>
<body>
<script type="text/javascript">
obtenir_info( );
calculer_paye( );
afficher_resultat( );
</script>
</body>
Exemples (suite)
<head>
<script type="text/javascript">
<!-- function max( X, Y ) {if (X > Y)
return X;
elsereturn Y;
} // -->
</script>
</head>
<body>
<script type="text/javascript">
var plus_grand = max(12, 26);
document.write ( "La plus grande est: “ + plus_grand );
</script>
</body>
Objets JavaScript
• Pour définir nos propres objets
• Attributs de l’objet
• Constructeur de l’objet
• Méthodes de l’objet
Définition d’un objet
• Pour regrouper tous les attributs d’un objet ensemble.
• Pour simplifier la manipulation des données propres à un objet.
• Par exemple, une automobile est un véhicule moteur possédant plusieurs propriétés (nombre portes, couleur, nb roues, type moteur, etc).
• En regroupant ces attributs dans un objet on pourra les manipuler comme un tout.
• Ainsi on pourra définir plusieurs objets d’une classe automobile, comme par exemple l’auto à Paul qui est rouge, possède quatre portes, etc.
Définition d’un objet (suite)
• En reprenant l’exemple du salaire de l’employé on pourrait regrouper les propriétés dans un objet.
• employe possède quatre attributs:
– nom, prenom, salaire_hor et nb_heures – on peut créer objet employe (avec les attributs):
• employe.nom = "Larue";
• employe.prenom = "Paul";
• employe.salaire_hor = 9.45;
• employe.nb_heures = 42;
• En JavaScript on utilisera une fonction appelée
“constructeur” pour créer nos objets d’une
classe donnée.
Exemple de constructeur
function Employe( nom, prenom, salaire, heures) {
this.nom = nom;
this.prenom = prenom;
this.salaire_hor = salaire;
this.nb_heures = heures;
}
var employe = new Employe("Larue", "Paul", 9.45, 42);
alert("Le salaire de " + employe.prenom + " " + employe.nom + " est " + employe.salaire_hor * employe.nb_heures );
• employe est un objet (appelé aussi instance) de la classe Employe
• remarquez la majuscule comme première lettre du constructeur (pour différiencier des objets - norme).
Méthodes
• Fonctions associées à un objet particulier (plus précisément à une classe d’objets).
• La méthode (fonction) est déclarée.
• Le nom de la méthode est ajoutée dans les propriétés de l’objet et on ajoute this devant les attributs pour référencer aux attributs de l’objet courant (instance).
Méthodes (suite)
• Par exemple, la fonction affiche_paye:
function affiche_paye {
alert("Le salaire de " + employe.prenom + " " + employe.nom + " est " + employe.salaire_hor * employe.nb_heures );
}
sera ajoutée dans les propriétés de la classe (constructeur) function Employe( nom, prenom, salaire, heures) {
this.nom = …
this.affiche_paye = affiche_paye;
}
var employe = new Employe("Larue", "Paul", 9.45, 42);
Et la fonction devient (pour référencer à l’objet courant):
function affiche_paye {
alert("Le salaire de " + this.prenom + " " + this.nom + "
est " + this.salaire_hor * this.nb_heures );
}
Autre exemple de constructeur
function Vehicule( roues, portes, couleur) {
this.nb_roues = roues;
this.nb_portes = portes;
this.sa_couleur = couleur;
}
……
var auto_paul = new Vehicule( 4, 4, “gris");
Var moto_eric = new Vehicule( 2, 0, "rouge");
document.writeln(moto_eric.sa_couleur);
document.writeln(moto_eric.nb_roues);
document.writeln(auto_paul.sa_couleur);
Avec une méthode
function aff_vehicule( ) {
documents.write("nombre roues="+this.nb_roues);
documents.write("nombre portes="+this.nb_portes);
documents.write("couleur="+this.sa_couleur);
}
function Vehicule( roues, portes, couleur) {
this.nb_roues = roues;
this.nb_portes = portes;
this.sa_couleur = couleur;
this.aff_vehicule = aff_vehicule;
}
……var auto_paul = new Vehicule( 4, 4, “gris");
auto_paul.aff_vehicule();
Méthodes (suite)
function surface( )
{return this.largeur * this.hauteur;
}function Rectangle( l, h) {this.largeur = l;
this.hauteur = h;
this.surface = surface;
}
……var rect1 = new Rectangle( 3, 7);
document.write("La surface du rectangle est: ", rect1.surface());
Les tableaux (p. 136)
• Contient une série de données représentées par un même nom.
• Comme une collection de variables.
• Par exemple, la température quotidienne moyenne pour le mois de janvier. Une collection de 31 valeurs consécutives représentées par un même nom.
• On utilisera un chiffre (indice) pour accéder aux différentes valeurs du tableau. Par exemple, si le tableau qui porte le nom janvier contient 31 valeurs, janvier[3] ou janvier [8]
représentera une de ces valeurs.
• Un tableau est un objet en JavaScript, alors pour le créer on utilise un constructeur (prédéfini):
var janvier = new Array( );
