Retourner à la page d'accueil de TJS

Script truite : Exemples de création d'objets

Les différentes syntaxes de création d'objets en JavaScript
Partie I : Les bases de JavaScript / Chapitre 8 : Programmation Objet et JSON / Page 124

Exécution du script

Emulation de la console

Code source

<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>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 20/09/2019 20:16:38 sur php7 en 40.68 ms