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