Comment fabriquer une GUI en javascript ?

Bonjour,

Je suis en train d'aborder la programation fonctionnelle avec Javascript.

La question que je me pose est la fa�on de s'y prendre pour aborder la programmation d'interface utilisateur avec JS.

Je vois comment faire pour en cr�er une dans un langage objet classique, c'est � dire avec le concept des classes mais je me demande comment aborder le m�me probl�me avec JS en programmation fonctionnelle.

Alors, je sais bien que l'on peut simuler des classes en javascript mais la question que je me pose est comment faire �a sans utiliser de classes (ou simuler des classes avec JS).

Je pr�cise que je ne cherche pas � faire des interfaces graphiques en utilisant du html+CSS mais que je souhaite tout faire avec javascript (dans la pratique en utilisant P5JS qui est un syst�me qui a toute ma sympathie :) - https://p5js.org/ -
Je voudrais cr�er mes propres widgets.

:)

Salut,

Ben avec ES6 j'ai cru comprendre qu'on pouvait utiliser les classes... Sinon il y a les prototypes... J'aime bien ce mini-tuto clair et concis : https://web.developpez.com/actu/9386...un-developpeur

Perso �a me fait penser � Java donc �a me va... Mais c'est vrai que je vois rarement l'usage des classes dans les codes...

Sinon la question des interface graphiques m'int�ressent aussi sauf que moi je me demande si il y a moyen de les faire "visuellement" comme avec WindowsBuilderPro (Java) ou Visual Studio (C#) ou plus vieux C++Builder Ou Delphi...

On place les composants avec la souris (glisser/d�poser)...

Par contre au final il y a aura forc�ment du HTML/CSS, non ?

--> Je vais regarder ton lien...

JS est un langage � Objet il n'est nullement besoin de simuler des classe pour l'utiliser

quant � faire une GUI il n'y a pas de rapport entre les classes et les GUI
de tr�s nombreux langage sans classe et sans objet permettent de cr�er des GUI

Dans tous les cas quelque soit le langage pour construire une IHM il faut pouvoir la "dessiner" � l'�cran.
Tout les langage s'appuient sur une partie de leur �cosyst�me d�dier � cette activit�.

Si dans certain cas c'est tr�s primitif et il faut user de code pour tracer un rectangle la plus part s'appuient sur un backend d�di�
les premiers se comportaient comme une table tra�ante. positionner le stylet au coordonn�e x,y poser le stylet se d�placer ver x',y'
ensuite o a eu des choses comme display-Poscript et bien d'autres encore.
Pour faciliter tout �a rapidement sont apparus des lib et des framework d�di� au IHM et pou dessiner un bouton plus besoin de tracer des trais.

Pour javascript la situation est similaire quoi que le parcourt fut diff�rent. � la base il y a HTML qui est fait pour d�crire une pr�sentation donc un affichage.
Puis javascript a �t� ajouter pour permettre une certaine dynamique. HTML repr�sente donc le backend sur lequel JS s'appui pour produire une GUI.
Comme dans les autres langages des lib et des framwork sont venus compl�ter le backend pour facilit� l'affichage d'objet complexe.

De cette particularit� de JS vient plusieurs approche. On eut �crire du HTML (qui est un backend �volu� g�rant seul des objets complexes) et lui adjoindre du JS pour interagir avec. Le HTML n'est pas l'IHM il n'est qu'une description de celle-ci. le moteur HTMl du navigateur va produire un DOM � partir de cette description, qui est la seul impl�mentation de l'IHM.
on peut aussi �crire du JS qui va demander au DOM de cr�er les objets de l'IHM.

Dans tous les cas JS interagit avec le DOM et pas avec le HTML.

Alors comment faire une GUI avec JS ?

1. faire un document HTML et ajouter des action JS
2. faire un JS qui utilise les fonctions native du DOM qui sont faite pour �a.

dans les deux cas les specs du DOM sont la solution.

reste une derni�re solution. utiliser un framework il en existe pl�thore la plus part bas� sur la POO (avec ou sans classes), qui utilisent la premi�re ou la seconde approche.

A+JYT

Bonjour, je ne suis pas un expert informatique mais la question que tu te poses m'est venu lorsque j'ai voulu commencer � faire des composants facilement int�grable par n'importe qui et � partir de la j'ai compris certaines choses notamment au niveau de la protection des variables et du code qui fait marcher ton module

Je ne suis pas un expert je touche un peu mais des personnes plus exp�riment�s rectifieront surement ce que je te dis donc il ne sert � rien de critiquer, toute remarque m'expliquant pourquoi je dis une b�tise est constructive.

Du coup si tu veux faire une sorte de composant tu as deux mani�res d'encapsulation

Code:

---

1 2	var monObjet = {}

---

ou

Code:

---

1 2	function monObjet(){}

---

La diff�rence de ces deux mani�res d'�crire repose surtout surtout la protection des variables. Avec l'objet tu pourras appeler et modifier n'importe quel propri�t�s et si tu ne d�clare pas de propri�t� de style elle prendra en compte le css. Donc cette m�thode permet de toucher au styles de ton composant de l'ext�rieur

avec l'autre m�thode tu ne peux pas toucher aux variables de l'ext�rieurs et ton code css n'aura aucun impact, ton module est donc mieux prot�g� dans le cas de d�veloppement commun

Je te mets un exemple

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="test" />   <style>   #monModule { width : 300px; height : 600px; border : 3px black solid } </style>     <script>   ///////////////MODULE1//////////////////   var monModule = {   largeur : 600+"px",   interface : function(div){ div.textContent = "helloword" div.style.width = this.largeur } }   ///////////////MODULE2//////////////////   function monModule2(div){ div.textContent = "helloword" div.style.width = 600+"px" }   </script>   </head> <body>   <div id = "monModule"> </div> <br/><br/>   <div id = "monModule2"> </div>     <script> var module1 = document.getElementById("monModule") monPremierModule = Object.create(monModule) monPremierModule.interface(module1)   var module2 = document.getElementById("monModule2") monModule2(module2)   </script> </body> </html>

---

Apres voila y'a des choses bien mieux qui se font mais dans la th�ories �a tourne un peu autour de �a. PS : je rappelle qu'il est possible que je dise une grosse b�tise si c'est la cas je veux bien apprendre moi aussi ;)