11548 sujets

JavaScript, DOM et API Web HTML5

POO : lier éléments graphiques et classe ?

Bonjour,

Je débute en POO avec js, j'ai une bonne pratique de la POO avec actionscript 3 et cherche à comprendre comment reproduire un des aspects de la POO de as3 en js.

En as3, on a la possibilité d'étendre la classe Sprite (ou MovieClip) pour lui rajouter des propriétés et fonctionnalité et éventuellement de lier un symbole de la bibliothèque à cette classe.
Sprite correspond il me semble + ou - au Div du html.

Comment fait t-on en js pour lier un div à une classe, div n'est pas une classe en js ? et n'est pas extensible ?
Faut-il au contraire créer tous les éléments graphiques de la classe dans le script de la classe ?

Merci si vous aviez quelques infos qui me permette de démarrer Smiley smile
Modifié par 3akycka (26 Oct 2010 - 22:45)
Bonsoir,

Attention, JavaScript est bien un langage orienté objet, mais il est assez différent de ce qu'on voit en programmation orientée objet (je précise pour ceux qui lisent ça que "poo", qu'on écrira plutôt POO car "poo" ça veut dire "caca" en anglais, c'est "programmation orientée objet"). Il n'y a pas de concept de classe, par exemple. Ça déroute beaucoup les développeurs Java (dont JavaScript n'est en réalité pas inspiré), il parait. JavaScript remplit malgré tout les critères principaux d'un langage orienté objet. On parle pour JavaScript (et d'autres langages créés avant et après lui) de programmation orientée prototype.

En pratique je connais mal JavaScript, et pas du tout ActionScript, mais d'après ce que j'ai lu:
- La syntaxe et les fonctionnalités de base de ces langages sont proches, car tous les deux sont basés sur la norme ECMAScript (même si historiquement c'est pas tout à fait ça).
- Avec ActionScript 3.0, ActionScript s'éloigne de JavaScript car le mécanisme d'héritage principal devient l'utilisation de classes (apparemment en AS2 c'était prototype et basta?).
- Quand on fait de l'ActionScript en Flash ou du JavaScript dans le navigateur, on passe la majeure partie de son temps à interagir avec des API fournis par l'environnement d'exécution. En ActionScript c'est Flash (objet flash), en JavaScript dans le navigateur c'est le Document Object Model (objet document).

3akycka a écrit :
Sprite correspond il me semble + ou - au Div du html.

Euh... à priori non, pas de correspondance (aucun lien, fils unique).

3akycka a écrit :
Comment fait t-on en js pour lier un div à une classe, div n'est pas une classe en js ? et n'est pas extensible ?

Il n'y a pas de classes en JavaScript. Smiley smile
Par ailleurs DIV est un élément HTML, et n'a pas de correspondance directe en JavaScript (JavaScript et HTML ne sont pas liés...) ou même dans le DOM. Dans le DOM, ce qui se rapproche le plus d'un élément HTML c'est bien sûr l'objet HTMLElement. Tu peux récupérer une instance de HTMLElement correspondant à un élément de la page portant l'identifiant "machin" avec le code suivant:
var bidule = document.getElementById('machin');

Tu peux aussi récupérer une NodeList (une sorte d'Array mais pas tout à fait...) de tous les éléments DIV du document avec le code suivant:
var allDivs = document.getElementsByTagName('div');

Quant à savoir comment lier un HTMLElement à une classe, même s'il y avait des classes en JavaScript je ne suis pas sûr de voir ce que ça peut bien vouloir dire. Tu veux réaliser quoi au juste?

3akycka a écrit :
Faut-il au contraire créer tous les éléments graphiques de la classe dans le script de la classe ?

La question me dépasse. Smiley lol
Si je connaissais AS3, j'imagine que ça me parlerait un peu plus.
Le mieux est sans doute que tu nous explique ce que tu cherches à faire, et qu'on te réponde sur la manière «classique» de le faire en HTML/CSS/JavaScript (ou DOM/CSS/JavaScript, si tu génères directement les noeuds DOM en JS, sans passer par du code HTML au départ). Tu verras par toi-même s'il y a des points communs avec Flash/ActionScript ou si le fonctionnement est différent.

3akycka a écrit :
Merci si vous aviez quelques infos qui me permette de démarrer Smiley smile

Il y a des bibliothèques JS qui exploitent assez largement le prototypage en JS, notamment les libs Prototype et MooTools. Elles peuvent te fournir des outils qui te seront familiers. Mais avant de regarder de ce côté, je te conseille vraiment de te familiariser avec le JavaScript «pur» et les méthodes du DOM, sinon tu vas t'embrouiller.
Modifié par Florent V. (26 Oct 2010 - 19:38)
La conception d'une page en html+css+js est assez différente de ce qui se fait en flash.
Le principe, c'est de créer le balisage en html, de le mettren en forme grace au CSS et d'y ajouter des améliorations (animations, ajax) raltives à l'Ux grâce à js.

On peut créer des pages entières rien qu'en js, éventuellement avec des outils tels que GWT, Pyjamas, mais c'est une pratique très spécifique dont on ne parlera guère sur ce forum.

La syntaxe d'as3 et de js peuvent se ressembler, mais les principes et paradigmes sont plutôt éloignés comme le soulignait Florent.

En POO classique, tu crées des objets qui sont des instances d'une classe
En js, tu prends un objet que tu réutilises en tant que prototype pour en faire un nouvel objet.

Petit exemple de création d'objet
function Personne(nom, prenom) {
this.nom= nom;
this.prenom= prenom;
this.bonjour= function(){
return 'Bonjour je suis ' + this.prenom+ ' ' + this.nom;
}
}

Et d'ajout via prototype
Personne.prototype = {
age: 30,
sexe: "M",
tonAge: function() {
return 'Age: ' + this.age;
}
};

Modifié par Florent V. (27 Oct 2010 - 12:39)
Bonsoir,

Merci pour vos, réponses !
Je ne savais pour "poo", je ferais attention maintenant, surtout avec "je débute en poo" Smiley eek

En fait je connais déjà assez bien le javascript est l'accès au document html, aussi l'ajout, suppression, clonage de nodes...
J'ai vu aussi comment créer une classe et utiliser prototype pour l'étendre.

Ce que je ne vois pas du tout c'est comment la lier au graphisme, par exemple ce que je voudrais faire c'est avoir une classe "Personne" comme celle de Paolo et un div qui contient le graphisme du personnage + une bulle.
Quand je ferais :
occurence1_de_personne.nom = "Dupont";
occurence1_de_personne.bonjour();
La bulle div s'affichera avec le bon message dedans.

En disant ça je me dis que peut-être il faut faire toutes ces actions sur le div et ces enfants dans le code de la classe, ceci en mettant dans les paramètres de la fonction constructeur un paramètre quelDiv qui permettra d'indiquer à quel div elle est liée ?
Je vais essayer...

Sinon il me semblait vraiment que Div était proche de Sprite, ils sont tous les 2 des conteneurs qui peuvent être positionnés à l'écran ?
Ta fonction bonjour peut insérer une balise (div) dans le doc et le remplir avec ce que tu souhaites. Tu peux également lui adjoindre une classe correspondant à du css qui l'habillera, ou injecter du css inline via js.
a écrit :
Sinon il me semblait vraiment que Div était proche de Sprite, ils sont tous les 2 des conteneurs qui peuvent être positionnés à l'écran ?

C'est quand même très éloigné.
Tu peux positionner n'importe quelle balise, pas que les divs.
J'ai essayé ça, qui fonctionne, après je sais pas si c'est la façon la plus habituelle de faire en JS ?

Tjrs sur la question div et Sprite, en as3 on peut aussi positionner d'autres objets d'affichage, mais les autres ne sont pas tous des conteneurs ?

<head>
<script>
function Personne(pQuelDiv){
	this.nom="";
	this.bonjour = function(){
		pQuelDiv.getElementsByTagName("input")['nom'].value = "Bonjour, je m'appele "+ this.nom;
	}
}
window.onload = init;

function init(){
	var quelDiv = document.getElementById("personne1");
	var personne1 = new Personne(quelDiv);
	personne1.nom = "Titi";
	personne1.bonjour();
	
	var quelDiv2 = document.getElementById("personne2");
	var personne2 = new Personne(quelDiv2);
	personne2.nom = "Donald";
	personne2.bonjour();
}
</script>

</head>
<body>
<div id="personne1">
	<input type=text name="nom" size="40"/>
</div>
<div id="personne2">
	<input type=text name="nom" size="40"/>
</div>
<body/>

Modifié par Florent V. (27 Oct 2010 - 12:39)
3akycka a écrit :
Tjrs sur la question div et Sprite

Faut arrêter de chercher l'analogie entre DIV et Sprite.
Le mieux serait de commencer par apprendre HTML. Il y a genre 80 éléments, c'est pas prévu pour utiliser DIV à tout va (affliction connue sous le nom de divite aigüe). Smiley cligne

Attaquer le HTML et le CSS par le biais de JavaScript, c'est un peu mettre la charrue avant les bœufs, et confondre des technos qui ont des rôles différentes. Tu connais le concept de couches contenu/apparence/interaction? Une bonne pratique en intégration web ou développement front-end consiste à utiliser HTML pour le contenu (avec un contenu correctement balisé, sémantique, accessible), CSS pour la mise en forme et la mise en page, et JavaScript pour gérer les interactions (qui peuvent éventuellement amener à modifier le contenu via les méthodes du DOM).

Pour reprendre ton exemple, est-ce que tu as besoin de générer ton contenu en JavaScript? Il ne pourrait pas tout simplement être généré correctement côté serveur, pour produire un code HTML adapté?

Je ne connais pas le contenu exact et ton exemple semble fictif, mais pourquoi ne pas avoir dès le départ le code HTML suivant:
<div class="personne" id="personne1"> 
    <p class="nom">Bonjour, je m'appelle Titi.</p>
</div> 
<div class="personne" id="personne2"> 
    <p class="nom">Bonjour, je m'appelle Donald.</p>
</div>

C'est une application web générée à 100% en JavaScript?

Si tu génères tes contenu en JavaScript et qu'il y a une bonne raison pour ça, alors je te déconseille de créer des placeholders vides dans le code HTML (avec N placeholders pour N personnes prévues), mais plutôt de créer les éléments dont je donne le code HTML ci-dessus directement en JavaScript.
Modifié par Florent V. (27 Oct 2010 - 14:09)
Florent V. a écrit :

Faut arrêter de chercher l'analogie entre DIV et Sprite.

Je veux bien arrêter mais j'aimerais bien comprendre exactement pourquoi l'idée vous déplait tant ? Smiley cligne

Florent V. a écrit :

Le mieux serait de commencer par apprendre HTML. Il y a genre 80 éléments, c'est pas prévu pour utiliser DIV à tout va (affliction connue sous le nom de divite aigüe). Smiley cligne

Je connais plutôt bien le html et ces nombreuses balises, et le principe de ne pas utiliser des div partout, par exemple plutôt utiliser H1 pour un gros titre qu'un div.
Dans mon exemple ça me semble plutôt approprié, dans mon div "personne" il y aurait des images (par exemple la tête, le corps, des accessoires, la bulle, du texte pour la bulle... etc), je vois pas d'élément plus approprié que DIV pour ça ?

Florent V. a écrit :

Attaquer le HTML et le CSS par le biais de JavaScript, c'est un peu mettre la charrue avant les bœufs, et confondre des technos qui ont des rôles différentes. Tu connais le concept de couches contenu/apparence/interaction? Une bonne pratique en intégration web ou développement front-end consiste à utiliser HTML pour le contenu (avec un contenu correctement balisé, sémantique, accessible), CSS pour la mise en forme et la mise en page, et JavaScript pour gérer les interactions (qui peuvent éventuellement amener à modifier le contenu via les méthodes du DOM).

Oui je connais tout ça, c'est peut-être mon exemple très sommaire qui te donne l'impression que cherche à utiliser javascript à mauvais escient ?

Florent V. a écrit :

Pour reprendre ton exemple, est-ce que tu as besoin de générer ton contenu en JavaScript? Il ne pourrait pas tout simplement être généré correctement côté serveur, pour produire un code HTML adapté?

Non pas du tout, mon utilisation de la POO serait pour faire par exemple un jeu, avec bcp d'interactivité, une évolution des personnages, des actions dessus... etc.
Coté serveur pourquoi pas s'il y a une base, mais dans ce cas là avec ajax.

Florent V. a écrit :

Je ne connais pas le contenu exact et ton exemple semble fictif, mais pourquoi ne pas avoir dès le départ le code HTML suivant:
&lt;div class=&quot;personne&quot; id=&quot;personne1&quot;&gt; 
    &lt;p class=&quot;nom&quot;&gt;Bonjour, je m'appelle Titi.&lt;/p&gt;
&lt;/div&gt; 
&lt;div class=&quot;personne&quot; id=&quot;personne2&quot;&gt; 
    &lt;p class=&quot;nom&quot;&gt;Bonjour, je m'appelle Donald.&lt;/p&gt;
&lt;/div&gt;

C'est une application web générée à 100% en JavaScript?

Oui c'était juste un exemple fictif. Le input c'est juste pour l'exemple, dans une bulle j'aurais mis autre chose.

Florent V. a écrit :

Si tu génères tes contenu en JavaScript et qu'il y a une bonne raison pour ça, alors je te déconseille de créer des placeholders vides dans le code HTML (avec N placeholders pour N personnes prévues), mais plutôt de créer les éléments dont je donne le code HTML ci-dessus directement en JavaScript.


Oui c'est ce que je pensais faire, mais après avoir trouvé comment lier correctement les éléments du document à des classe. Après je pense en effet qu'il faudrait mieux créer des instances de classe et les ajouter au document via javascript.
Exactement comme on le fait avec as3 :
var personnage= new Personnage();
addChild(personnage);
3akycka a écrit :
Bonjour,
. . .
Sprite correspond il me semble + ou - au Div du html.
. . .

Comme Florent le dit si bien : non aucun rapport - Sprite vis à vis div.
La différence c'est que Sprite ne possède pas de scénario comme MovieClip.

Cependant tu n'as pas entièrement tort puisque qu'avec Sprite nous faisons souvent des conteneurs et les placons en position : ceux-ci portent tous les caractéristiques d'un div sousmis aux règles CSS - avec ou sans visuel, bordure, background et positionnement x/y ou encore une largeur/hauteur flexible « auto » ou fixé « renseigner ».

On délémite des zones et ceux-ci sont parfaitement justifiable.

var zIndex:Number = 0;
var divGlobale:Sprite = new Sprite ();
addChildAt (DisplayObjectContainer (divGlobale), zIndex);

Pas étonnant qu'il y a des similitudes et ce, dans plusieurs langages.
Canvas en SVG ou Java comme exemple avec des buts sensiblement identique : programmer des zones utiles.
En un mot Sprite et div serviront aussi à définir l'architecture d'une page, et réactif au moindre programme.

++
Modifié par zardoz (27 Oct 2010 - 20:07)
Oui, donc tu confirmes bien ce que je pense, Sprite ne possède pas de scénario, donc en cela il se rapproche + ou - de DIV.
Je n'ai pas dit que c'était exactement la même chose ils ont chacun leurs spécificités et des différences.
Peut-être que la nuance c'est que DIV se positionne via les CSS et Sprite possède des propriété et méthode de classe ?
Salut

Oui c'est exacte : de même pour les MovieClip's.
Un clip vide de tout graphique peut recevoir un clip d'animation.
Comme un conteneur avec la notion d'héritage pour tous les clips/enfants.


var zIndex:Number = 0;
// --
// -- Clip conteneur sans visuel --
// --
var clipConteneur:MovieClip = new MovieClip ();
addChildAt (DisplayObjectContainer (clipConteneur), zIndex);
// --
// -- Clip contenu avec un visuel --
// --
var clipAnimation:MovieClip = new MovieClip ();
clipAnimation.graphics.beginFill (0x333333);
clipAnimation.graphics.drawRect (0, 0, 300, 120);
// --
// -- On imbrique --
// --
clipConteneur.addChildAt (DisplayObjectContainer (clipAnimation), zIndex);

Il n'est certe pas surprenant de voir des similtudes. C'est une question de logique.
À la différence que les div's prendront leur propriétées de CSS et les comportements
de javascript et plus particulièrement de JQuery (JQuery UI) où la notion de méthode est plus explicite.

Pour ce qui est de POO c'est toujours un type.
Le langage doit être fortement typé comme en Java - AS3 - C#.

var tv:Television = new Television (); # -- AS3 : typé.
Television tv = new Television (); # -- Java et C# : typé.
$tv = new Television (); # -- PHP : non typé

Seul PHP est faiblement typé et POO. Ce qui le distingue des autres langages.
Javascript est un langage orienté objet mais les objets ne sont pas des types comme en AS3.

++
Modifié par zardoz (27 Oct 2010 - 22:56)
3akycka a écrit :
Je veux bien arrêter mais j'aimerais bien comprendre exactement pourquoi l'idée vous déplait tant ? Smiley cligne

Je prends des cours de clown. Les principes du clown sont très différents de ceux du théâtre «classique», bien qu'on puisse considérer le clown comme un genre théâtral particulier. Il y a un élève dans ce cours qui a une grosse expérience du théâtre, qui est très «analytique» dans sa manière d'apréhender les choses, et qui cherches sans cesse à faire des parallèles avec ce qu'il connait du théâtre. Du coup, il n'arrive pas à se défaire de ses automatismes de théâtre, et à rentrer dans la logique du clown. Ça le bloque (pas sur tout, heureusement, mais par moments).

Autre exemple: il y a quelques années, j'ai appris l'anglais à la fac. La pire chose à faire si on veut progresser, c'est passer son temps à se référer à ce qu'on connais du français, à la manière dont fonctionne la langue française. Si on pense en français et qu'on essaie de traduire en anglais, on ne peut pas s'exprimer correctement. Il faut penser en anglais directement. C'est bien sûr vrai pour toutes les langues qu'on apprend.

Ça vaut aussi en programmation. Oui, il y a des points communs. Mais si tu abordes JavaScript, ou en l'occurrence une pile technologique (HTML + CSS + JavaScript le langage + API DOM), en faisant sans cesse des parallèles avec une autre pile (Flash + ActionScript), ça va pas le faire. Les parallèles seront parfois justes, mais ils seront souvent inexacts, et dans certains cas totalement boiteux.

Donc, conseil méthodologique: met un peu de côté ActionScript quand tu bosses ou apprend HTML, CSS et JavaScript. Smiley smile

Je ne réponds pas sur les autres points, tes réponses étaient claires.

3akycka a écrit :
après avoir trouvé comment lier correctement les éléments du document à des classe.

L'idée même de lier des éléments du DOM à une classe me semble étrange, un élément du DOM sera un contenu précis tandis qu'une classe est plus un patron réutilisable. Il y a une différence de portée, déjà. Si tu pensais plutôt à lier des éléments du DOM à des objets JavaScript, c'est possible de plusieurs manières mais je ne vois pas l'intérêt dans l'absolu.

Mettons que tu as 20 objets héritant d'une même «classe» (je rappelle tout de même qu'il n'y a pas de classes à proprement parler en JS). Et il s'avère que ces 20 objets correspondent tous, d'un point de vue logique, un élément précis du DOM. Mettons 20 éléments DIV.
Chacun de tes objets JS peut avoir une propriété qui peut avoir pour valeur une référence à un élément du DOM. Tu peux avoir des méthodes sur tes objets JS qui servent à supprimer l'élément correspondant du DOM, à le dupliquer, à le masquer via un display:none ou un ajout de classe (au className), etc. C'est sans doute pas une logique à appliquer systématiquement, mais ça peut être intéressant de procéder ainsi dans certains cas.

Une autre piste à explorer c'est voir comment tu peux appliquer une logique MVC (ou inspirée de ça) pour le côté front de ton application. Le HTML fait à priori partie de la Vue, mais pas forcément si tu y stockes des propriétés de tes objets. En HTML5 tu peux par exemple utiliser les attributs data-* pour stocker des données arbitraires directement sur des éléments HTML (avec des limites sur le format tout de même, vu que c'est un attribut HTML...). À l'inverse tu peux générer côté serveur des objets et tableaux JS qui vont contenir tes données, et considérer HTML uniquement comme une couche de présentation que tu vas remplir le moins possible.
Modifié par Florent V. (28 Oct 2010 - 00:37)
Oulà, soit je suis fatigué soit on raconte quelques bêtises ici.

zardoz a écrit :
À la différence que les div's prendront leur propriétées de CSS et les comportements de javascript et plus particulièrement de JQuery (JQuery UI) où la notion de méthode est plus explicite.

- Ne pas parler de «propriétés» des éléments DIV, ça ne veut rien dire.
- Je sais qu'on parle souvent de «comportement» pour la couche JavaScript (et je pense que c'est une erreur, mais passons), mais ce ne sont pas les éléments HTML qui ont un comportement.
- La phrase laisse entendre que jQuery fait partie de JavaScript ou en est une extension standard, ce qui n'est pas le cas. De plus, la notion de méthode n'est pas plus explicite en jQuery qu'elle ne l'est à la base en JavaScript.

zardoz a écrit :
Pour ce qui est de POO c'est toujours un type.
Le langage doit être fortement typé comme en Java - AS3 - C#.

JavaScript n'est pas fortement typé, mais c'est bien un langage orienté objet.

zardoz a écrit :
Seul PHP est faiblement typé et POO. Ce qui le distingue des autres langages.

Ah bon? Et JavaScript, Python, Ruby, et d'autres encore?

Je crois zardoz que je t'ai mal compris ou que tu t'es mal exprimé. Smiley cligne
Florent V. a écrit :

Oulà, soit je suis fatigué soit on raconte quelques bêtises ici.
. . .

Un peu des deux je pense : toi fatigué et moi un peu bête Smiley biggrin

Non je sais bien que ce ne sont pas les éléments HTML qui ont des comportements ou même des propriétés : par contre ces propriétés et ces comportements sont appliquer à des éléments HTML spécifiques.

Les méthodes eh bien voilà : ici. Il y en a un peu partout de ces méthodes prédéfinis en JQuery-ui « version 1.8.5 ». Ça prend des biblio's pour traiter la notion de méthode. Inexistant en js pure. C'est presque des jeux de mots car les méthodes ou les fonctions traite de comportement, ou pas.

La notion d'objet a toujours été un peu flou. En Flash par exemple une méthode de classe est considérer comme une simple fonction évoluant dans un contexte d'objet. Ces propos proviennent de Imbert Thibeaut - Ingénieur Système chez Adobe France.

Ce que j'entendais par « POO » est un écriture de classe. Le débat concernant la programmation orienté objet est toujours assez rude et n'aboutit pas nécessairement à des résultats définitifs. Mais ça reste quand même très intéressant.

À l'origine la notion orienté objet était de mieux gérer l'architecture d'un programme et permettait de cibler plus précisément et plus rapidement les erreurs. C'était le seul intérêt de la programmation orienté objet. Ce que le procédurale ne permettait pas.

Dû à mon apprentissage en programmation je ne saurais voir la POO en dehors des classes. Et une classe est toujours un type : var tv:Television = new Television (). Un type possède toujours plusieurs objets. Le type est lui-même un objet ayant une structure plus ou moins complexe d'imbrication d'objets, et en considérant que chaque objet peut être une classe à part entière : var tc:Telecommande = new Telecommande () Celui-ci pourra agir sur l'objet Television.

Même si javascript est un langage orienté objet, javascript est encore loin des structures et des organisations d'objets permises uniquement avec des packages et des classes. Smiley cligne

++
Modifié par zardoz (28 Oct 2010 - 05:42)
le "problème" de javascript, c'est qu'il a été fait pour être extrêmement souple. Tu peux tout simuler mais il n'existe du coup rien de littéral pour déclarer classes, objets, méthodes et propriétés publiques, privées, statiques, constructeur et ainsi de suite.

Pour avoir vaguement tripoté du Flex, je me souviens qu'ils conseillent d'étendre leurs objets si on veut les customiser. Mais j'ai parlé à des vrais codeurs qui m'ont dit qu'ils tremblaient à chaque upgrade de Flash à cause de ça, car leurs objets pouvaient soudainement se comporter différemment.
Dans ton cas tu ne peux et tu ne devrais pas essayer d'étendre l'élément HTML lui même, qui contient déjà une petite palanquée de propriétés et méthodes (le DOM). Mootools avait joué à ça à leurs débuts et ils s'en sont mordu les doigts : les navigateurs avaient fini par implémenter les méthodes qu'ils avaient inventé, avec le même nom mais des comportements légèrement différents, ce qui a flingué leur librairie.

comme l'a dit florent, si tu veux rajouter du comportement à des DIVs, il faut tout simplement créer une classe JS et garder une référence à ton élément.

Et il faut savoir jouer avec les spécificités de ta nouvelle plateforme (le browser !) en utilisant CSS pour ce qu'il sait faire, ça t'aidera pour les perfs et la compréhension du code.

.top-right {
  top:0;
  right:0;
  position:absolute
}




// ton namespace
var MY = {};

// constructeur
MY.elementFacade = function( sElementId) {
 this.oElement = document.getElementById( sElementId );

};
// ajout de méthodes diverses et variées
MY.elementFacade.prototype.moveTopRight = function() {
  this.oElement.className = 'top-right';
};


var myDiv = new MY.elementFacade( 'toto' );
myDiv.moveTopRight();


transposer les idées d'un langage à un autre, c'est confortable, mais ça ne marche pas toujours Smiley smile

et si tu veux un peu de lecture sur la POO en JS, voici une des nombreuses syntaxes possibles : http://braincracking.org/2010/03/31/javascript-oriente-objet-syntaxe-de-base-des-classes-js-a-lintention-des-developpeurs-php/
j'ai écrit cet article en pensant aux développeurs PHP qui sont légion, je ne sais pas si ça peut t'aider dans ton cas ?
Modifié par jpvincent (28 Oct 2010 - 11:15)
Je crois que 3akycka n'a pas compris qu'en JS, on ne manipulait pas des objets DIV, mais plutôt un objet JS correspondant, via un sélecteur, à l'objet DIV (il y a une différence entre manipuler l'objet directement et une sorte d'instance).

Il n'y a pas d'analogie possible avec l'as3, les objets graphiques de Flash/Flex étant directement manipulables par AS3, alors qu'en JS, il faut associer un objet JS à un élément HTML de la page
Salut,

Quelques précisions en passant :

- Le fait qu'un language soit fortement typé ou pas n'a rien à voir son orientation objet ou non. Et faiblement typé, c'est toujours typé.

- La notion d'objet n'est pas floue, en tous cas elle ne devrait pas l'être. Par contre, l'implémentation par les différents langages de programmation varie, parfois fortement. Il n'est pas nécessaire de pouvoir utiliser le mot clé "class" dans son code pour faire de l'orienté objet, et a contrario, l'utilisation des classes n'est pas suffisante pour faire de l'OO. La clé pour faire de l'OO correctement, c'est de comprendre et de mettre en pratique les concepts qui sont derrière. Peu importe la façon dont on l'implémente, finalement. JavaScript permet de faire cela, certes de façon inhabituelle pour quelqu'un habitué à du Java ou du C#, mais ça n'en reste pas moins possible nativement.

- Un des grands avantages de l'orienté objet, outre la meilleure maintenabilité du code, c'est la réutilisation des classes...

My 2¢.
Hello

Oui d'accord Thomas je me suis mal exprimer : faiblement typé veut dire qu'un type est en fonction de la valeur d'une variable - $onOff = true; La valeur peut changer, donc le type aussi - $onOff = 'fermer';

jpvincent : J'irai lire ton article.

++
Modifié par zardoz (28 Oct 2010 - 18:24)
Bonjour,

Merci pour toutes ces précisions !, je me re penche là dessus que maintenant.

Je viens de faire un essai en créant les éléments dans la "classe" et en faisant un return du div principal pour pouvoir le manipuler directement ensuite en temps "qu'objet", ça marche bien mais je ne sais pas si ça se fait de faire ça ?, qu'en pensez-vous ?

<head>
<script>
function Personne(pCouleur){
	this.personne = document.createElement("div");
	this.personne.setAttribute("style", "position:absolute;left:0px;top:0px;cursor:pointer");
	this.personne.onclick = function(){
		alert("Bonjour, je m'appele "+ this.nom);
	}
	
	this.personne.tete = document.createElement("div");
	this.personne.tete.id = "tete";
	this.personne.tete.setAttribute("style","position:absolute;left:50px;top:0px;width:50px;height:50px;background-color:"+pCouleur+";");
	this.personne.appendChild(this.personne.tete);
	
	this.personne.corp = document.createElement("div");
	this.personne.corp.id = "corp";
	this.personne.corp.setAttribute("style","position:absolute;left:30px;top:50px;width:90px;height:90px;background-color:"+pCouleur+";");
	this.personne.appendChild(this.personne.corp);
	
	this.personne.nom="";
	
	return(this.personne);
}
window.onload = init;

function init(){
	var personne1 = new Personne("#000000");
	personne1.nom = "Zoro";
	document.getElementById("main").appendChild(personne1);
	
	var personne2 = new Personne("#FFFF00");
	personne2.nom = "Titi";
	document.getElementById("main").appendChild(personne2);
	personne2.style.left="300px";
	personne2.style.top="100px";
}
</script>

</head>
<body>
	<div id="main">
	</div>
<body/>

Modifié par 3akycka (08 Dec 2010 - 10:48)
Sujet clos
Aller à