CATALOGUE Code & Data Formation Svelte Apprendre Svelte 3 et SvelteKit 1.0

Création d'une Mini-Application avec HTML et Svelte

Retour à la formation
Chapitre 6 Leçon 6
Précédent
Suivant

Dans cette vidéo, découvrez comment créer une mini-application en utilisant HTML et Svelte en suivant des instructions précises.

Détails de la leçon

Description de la leçon

Cette leçon vous guide à travers la création d'une mini-application qui utilise HTML et Svelte. Vous apprendrez à basculer du texte en majuscule, calculer des sommes dynamiques, manipuler des cases à cocher, gérer des boutons radio avec rotation automatique, et afficher des sélections de listes déroulantes. Le processus inclut la déclaration des variables, l'utilisation des bindings, et la définition des fonctions événementielles dans Svelte.

Vous démarrerez par le binding des différents éléments d'input avec les variables correspondantes et verrez comment les utiliser de manière dynamique pour refléter les changements immédiatement à l'écran. Ensuite, vous allez apprendre à écrire des fonctions événementielles pour réaliser des actions comme mettre du texte en majuscule ou faire tourner une sélection de boutons radio avec une rotation cyclique.

Ce tutoriel inclut également des explications sur la création de listes déroulantes dynamiques et l'affichage immédiat de la sélection choisie. Toutes ces pratiques sont accompagnées d'exemples détaillés et de corrections en direct pour faciliter votre compréhension et mise en pratique.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :
- Maîtriser le binding des éléments d'input en Svelte.
- Savoir comment écrire des fonctions événementielles pour manipuler les données d'un formulaire.
- Comprendre la manipulation dynamique des listes déroulantes et des boutons radio en Svelte.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML et JavaScript ainsi qu'une compréhension élémentaire des concepts de Svelte.

Métiers concernés

Ce sujet est particulièrement utile pour les métiers de développeur Web, intégrateur HTML, et développeur front-end.

Alternatives et ressources

Les alternatives incluent l'utilisation de React ou Vue.js pour des fonctionnalités similaires dans des applications Web modernes.

Questions & Réponses

Pour binder un input texte avec une variable en Svelte, vous utilisez l'attribut bind:value de la façon suivante : .
Vous pouvez créer une fonction événementielle qui inverse la valeur d'une checkbox en utilisant une notation ECMAScript 6 pour la flèche d'une fonction : checkboxVar = !checkboxVar.
Pour faire tourner la sélection de boutons radio, vous pouvez utiliser une fonction qui incrémente la valeur avec un modulo : rad = (rad + 1) % 3.