<html><head> <title>Les déclarations d'objets en JavaScript</title> <style type="text/css"> div#poissons { vertical-align: top; } div.poisson { display: inline-block; font-family: arial; font-size:14px; padding:4px; margin:2px; border:1px solid #009; width:310px; height: 350px; } h1 { font-size:16px; font-weight: bold; } span.latin { font-style: italic; font-size:12px; } span.noms { font-size:13px; } div.poisson div.image { width:310px; height:200px; line-height:200px; vertical-align: middle; display: table-cell; margin-top:5px; } div.poisson img { max-height:200px; max-width: 300px; margin:auto; vertical-align: middle; padding:auto; } div.particularite { padding-top: 5px; padding-bottom: 5px; height: 30px; } </style></head><body><div id="poissons"></div><script type="text/javascript">function displayTruite() { var html="<div class='poisson'><h1>"+this.nom; html+="<span class='latin'> ("+this.latin+")</span></h1>"; html+="<span class='noms'>"+this.noms.join(", ")+"</span>"; html+="<div class='image'><img src='media/"+this.image+"' /></div>"; html+="<div class='particularite'>"+this.particularite+"</div>"; html+="<div>Taille moyenne : "+this.tailleMoyenne+" cm</div>"; html+="<div>Taille maxi : "+this.tailleMaxi+" cm</div></div>"; return html;}var truiteFario={ nom: "Fario", noms: ["Truite sauvage","Truite commune"], latin: "salmo truta fario", image: "fario.jpg", particularite: "Présence de points rouges et noirs auréolés", tailleMoyenne: 30, tailleMaxi: 70, display:displayTruite,}var truiteArcEnCiel=new Object();truiteArcEnCiel.nom="Arc en ciel";truiteArcEnCiel.latin="salmo gairdneri";truiteArcEnCiel.image="arcenciel.jpg";truiteArcEnCiel.noms=new Array("Truite d'élevage", "Truite d'Amérique");truiteArcEnCiel.particularite="Poisson originaire des Etats-Unis et introduit en France";truiteArcEnCiel.tailleMoyenne=30;truiteArcEnCiel.tailleMaxi=80;truiteArcEnCiel.display=displayTruite;function Truite(nom, latin, image, noms, partic, tMoyenne, tMaxi) { this.nom=nom; this.latin=latin; this.image=image; this.noms=noms; this.particularite=partic; this.tailleMoyenne=tMoyenne; this.tailleMaxi=tMaxi; this.display=displayTruite;}var saumonFontaine=new Truite("Saumon de fontaine", "salvinilus fontanilis", "omble.jpg", ["Omble"], "Présence de points orange et noirs auréolés", 25, 50);class Poisson { constructor(nom, latin, image, noms, partic, tMoyenne, tMaxi) { this.nom=nom; this.latin=latin; this.image=image; this.noms=noms; this.particularite=partic; this.tailleMoyenne=tMoyenne; this.tailleMaxi=tMaxi; this.display=displayTruite; }}var truiteMer=new Poisson("Truite de mer", "salmo truta truta", "truitemer.jpg", ["Truite argentée"], "Migratrice de l'Atlantique vers cours d'eau pour la reproduction", 35, 100);document.getElementById("poissons").innerHTML=truiteFario.display()+truiteArcEnCiel.display()+saumonFontaine.display()+truiteMer.display();</script>
Edition 1 | Chapitre 8 : Programmation Objet et JSON / Page 124
Edition 2 | Chapitre 8 : Programmation Objet et JSON / Page 134
Edition 3 | Chapitre 8 : Programmation Objet et JSON / Page 134
En savoir plus
