Les webapps sont des applications web qui peuvent être utilisées pour effectuer des tâches variées. Elles sont de plus en plus populaires et sont utilisées pour des tâches allant de la gestion des finances à la création de sites web. Dans ce tutoriel, nous allons apprendre à créer une webapp d’initiation simple qui affichera un message dans une zone texte lorsque l’utilisateur cliquera sur un bouton. Nous allons voir comment créer cette webapp en utilisant HTML, CSS et JavaScript.
Webapps d’initiation : Simple : Afficher un message dans une zone texte sur clic bouton
1. Présentation
Dans cette webapp d’initiation simple, voyons comment afficher un message dans une zone texte sur un clic bouton.
2. Structure type de la webapp
Comme cela est présenté dans les tutos dédiés, je rappelle que la structure type de la webapp est la suivante :
- un seul répertoire incluant :
- librairies utilisées
- la page html de la webapp
- le code serveur Pyduino opérationnel
- la page HTML de la webapp incluant :
- la définition des éléments graphique au niveau du body
- l’inclusion des librairies utilisées
- le code Javascript actif de la page
3. Body HTML : définition des éléments graphiques de la page
<br>
<textarea rows=« 4 » cols=« 50 » placeholder=« Cliquer sur le bouton… » id=« textarea »></textarea>
4. Head : Inclusion des librairies utilisées
5. Head : Code Javascript de la page
$(document).ready(function(){
$(« #button »).click(function(){
SurOuvrir le port utilisé sur les PC du réseau wifi et sur le routeurcompt=compt+1;
if (compt==1)$(« #textarea »).append(compt + » Clic bouton »+« \n« );
else $(« #textarea »).append(compt + » Clics bouton »+« \n« );
$(« #textarea »).get(0).setSelectionRange($(« #textarea »).get(0).selectionEnd–1,$(« #textarea »).get(0).selectionEnd–1); // se place en derniere ligne -1 pour avant saut de ligne
SurL’appui sur un BP allume une LED.}); // fin function + fin action + fin $
}); // fin function + fin ready + fin $
6. La webapp complète :
L’archive complète de la webapp est disponible ici, incluant :
- La page HTML complète
- Le serveur Pyduino opérationnel
- Les librairies utilisées
Remarque : le serveur pyduino suppose que la librairie Pyduino et ses dépendances soient installées.
