Dans cette leçon, le présentateur explique comment les formulaires HTML sont représentés comme des objets JavaScript et comment naviguer dans la hiérarchie d'objets (window → document → form → champ). Il montre comment accéder à un champ de texte via son nom (document.fo.monTexte.value) et via l'objet collections.forms, en utilisant à la fois un indice numérique (document.forms[0].monTexte) et une clé associative (document.forms['fo'].monTexte). Il décrit la propriété `value` comme le moyen d’obtenir ou de modifier le texte d’un champ. Ensuite, il illustre un exemple classique de permutation de deux champs de texte en utilisant une variable temporaire, et montre comment automatiser le focus sur le premier champ au chargement de la page avec `onload` et la méthode `focus()`. Le cours souligne que ces techniques sont « provisoires » et que des méthodes plus avancées du DOM seront abordées ultérieurement.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui, nous allons voir comment manipuler les formulaires. Tout d'abord, il faut savoir que tous les éléments HTML que l'on peut intégrer dans une page sont vus par JavaScript comme étant des objets, y compris les formulaires. Généralement, ces objets sont structurés d'une manière hiérarchique, c'est-à-dire à dire que pour accéder à un objet quelconque, il faut d'abord passer par son parent ou bien par les objets de plus haut niveau auxquels il appartient. Prenons l'exemple suivant: dans le code HTML, nous allons créer un formulaire et on va lui donner un nom, dans ce cas c'est fo. On ferme ensuite le formulaire et dedans on va intégrer une zone de texte que je vais appeler monTexte. À partir de ce moment, je viens de créer 2 objets qui s'imbriquent l'un dans l'autre. L'objet le plus profond, c'est la zone de texte dont le nom c'est monTexte. Cet objet, il appartient à un parent. Dans ce cas, le parent c'est la balise <Form> qui porte le nom fo. Autrement dit, pour accéder à l'objet monTexte, il faut d'abord passer par son parent fo. Maintenant on va intégrer un bouton qui va actionner le JavaScript. Par exemple input type button, value on va mettre bouton tout simplement. Et en clic il va appeler une fonction qui s'appelle f. Ça veut dire au moment du clic sur ce bouton j'exécute une fonction qui s'appelle f que je n'ai pas encore déclarée. Maintenant je vais intégrer le code JavaScript. Et je crée la fonction f comme ça. L'objectif maintenant c'est que quand je clique sur le bouton, je veux afficher le texte inclus dans la zone de texte identifiée par monTexte. Imaginons que je veux afficher ce texte dans une boîte de dialogue alerte. Alors je vais mettre ici alerte et dans les parenthèses on va spécifier le texte inclus dans la zone de texte à monTexte. Alors l'objet, il s'appelle monTexte. Tout d'abord, l'objet zone de texte, c'est monTexte, comme ça. Mais ce n'est pas suffisant de déclarer l'objet de cette manière parce que, comme j'ai dit, il faut d'abord passer par son parent qui est dans ce cas le fo. Donc avant de mettre monTexte, mettre fo. Les attributs name, c'est-à-dire leur valeur, ce sont tout simplement des objets qui sont créés automatiquement par le JavaScript et grâce à eux, je peux identifier les différents objets de mon document. Alors maintenant, fo.monTexte, ça signifie l'objet zone de texte qui est là. Autre chose, c'est qu'il faut pas oublier que l'objet fo, il a aussi un parent. Le parent par défaut, il s'appelle document, c'est-à-dire c'est un parent qui est créé automatiquement par JavaScript, c'est pas nous qui l'avons déclaré dans le HTML. Alors c'est comme ça que ça se passe. Même document, il a aussi un autre parent qu'on appelle window, de cette manière, voilà, window. C'est-à-dire que l'objet complet, le nom de l'objet complet, c'est-à-dire la zone de texte, son nom complet c'est window.document.fo.mon-texte. Mais window, on peut déjà l'écarter. C'est-à-dire que JavaScript est conscient que l'objet de plus haut niveau c'est window, donc pas la peine de le déclarer à chaque fois. Donc comme ça, on va abréger un petit peu la syntaxe, ce qui donne juste document.foo.monTexte. Alors ça, ça représente la hiérarchie. C'est-à-dire qu'il faut d'abord passer par l'objet de plus haut niveau, ensuite son enfant, et finalement donc le petit-enfant, etc., jusqu'à atteindre la cible souhaitée. Avec cette syntaxe, j'ai pu accéder à l'objet. Mais l'objectif, ce n'est pas d'afficher l'objet, mais d'afficher le texte inclus dans l'objet. Et le texte, est représenté tout simplement par l'attribut value du HTML que je reprends directement là, comme ça, value. Alors ça c'est l'objet, voilà, et ça c'est ce qu'on appelle la propriété ou bien l'attribut. Et l'attribut n'est rien d'autre que les attributs HTML comme on connaît déjà. Bon, si on met ça maintenant, alors on devrait afficher le texte inclus dans la zone de texte. J'exécute, bon, j'actualise la page, je vais écrire ici bonjour. Quand je clique sur le bouton, il m'affiche bel et bien bonjour. Quand je vais modifier le texte, je mets autre chose, par exemple salut, Il m'affiche salut. Alors de cette manière, j'ai pu accéder au contenu de ma zone de texte. Bon, il faut noter aussi que je peux accéder aux formulaires autrement, c'est-à-dire au lieu de mettre .fo comme ça, je peux remplacer fo par l'objet forms. C'est un objet qui est connu en JavaScript, mais forms, ça signifie tous les formulaires de mon document. Dans ce cas, c'est vrai que j'en ai qu'un seul, mais c'est possible d'avoir d'autres formulaires qui vont être déclarés un peu plus loin. Et comment je vais les différencier? C'est tout simplement grâce à des crochets, parce que là c'est un tableau. On va pas entrer dans les détails parce qu'on verra tableaux dans une leçon à part, mais pour le moment sachez que c'est un tableau auquel il faut donner un index. L'index, ça commence de 0 pour dire le premier formulaire rencontré dans le document, 1 c'est le deuxième formulaire, 2 c'est le troisième formulaire, etc. Dans ce cas, on va mettre 0, c'est-à-dire que c'est le premier formulaire. Donc là, la syntaxe est la suivante: document.forms pour dire le premier formulaire. Dans ce cas, j'ai pas besoin de déclarer le nom de ce formulaire-là. Ensuite le sous-objet qui est mon texte, ou bien l'enfant de l'objet formulaire, et finalement l'attribut. Bon, j'exécute pour voir le résultat. Par exemple, là, salut à tous, et quand j'exécute, ça affiche bel et bien le message. Au lieu de mettre un indice numérique, parce que là c'est un tableau indexé, je peux mettre un tableau associatif. C'est-à-dire, au lieu d'un indice numérique, je peux mettre carrément le nom du formulaire en tant que chaîne de caractères. On appelle ça un tableau associatif qui contient une clé et non pas un indice. Et ça devrait marcher de la même façon. Donc j'exécute, bonsoir, et ça affiche le même résultat. C'est-à-dire vous avez l'embarras du choix, c'est à vous de choisir la méthode qui vous arrange. Mais moi personnellement, je préfère cette syntaxe comme ça, donc document.info.monTexte.value. Et souvenez-vous que c'est une méthode provisoire, ça veut dire que par la suite, quand on va voir la constitution du DOM comment JavaScript traite le DOM ou bien l'objet document, on verra d'autres méthodes qui sont beaucoup plus flexibles et beaucoup plus pratiques que celle-là. Maintenant nous allons voir un exemple classique de la programmation, c'est la permutation. Je vais supposer que je dispose de 2 zones de texte différentes et je vais mettre dans chacune d'entre elles un texte. Quand je clique sur le bouton, je vais échanger ces textes-là. Bon, c'est ce qu'on appelle la permutation. Alors là, donc la première zone de texte, je vais l'appeler texte 1, ou bien je vais l'appeler tout simplement Z1 pour simplifier l'écriture. La deuxième zone de texte, je vais l'appeler Z2, voilà, avec des BR pour faire des retours à la ligne. Le bouton, bon, je vais mettre ici par exemple permuter. Donc ça, c'est l'étiquette du bouton et là, c'est la fonction permuter que je vais créer par la suite. Maintenant ce que je vais essayer de faire c'est tout simplement la permutation classique, ça veut dire que j'aurai besoin d'une variable auxiliaire que je vais appeler par exemple x. Dedans je vais mettre une des deux valeurs, soit le texte de z1 ou bien de z2. Je vais dire par exemple que je vais y mettre le texte de z1 grâce à document.foo.z1. Maintenant que j'ai stocké la valeur de z1 dans x, je peux écraser z1, ça veut dire pour mettre à la place le texte de z2, de cette manière. Et maintenant, bon, je vais tout simplement restituer la valeur de x, je la mettrai dans z2. Là, ça devrait marcher. J'exécute. Maintenant je mets ici bonjour et là c'est bonsoir. Quand je mets permitter, vous avez vu que les textes ils ont été permitter. Bon, une chose encore, c'est que vous avez remarqué que quand j'actualise la page la première fois, il faut d'abord cliquer dans cette zone afin de pouvoir écrire. Donc on va voir une méthode qui permet d'actionner ou bien de sélectionner directement une de ces deux zones de texte d'une manière automatique. Alors là, au chargement de la page, on va mettre ici onload et j'appelle la fonction qui s'appelle par exemple init. Bon, une fonction qui va initialiser quelque chose. Je vais mettre ici function init. Alors maintenant, je vais dire au JavaScript d'actionner directement ou bien de mettre le focus dans la première zone de texte qui est z1 grâce à document fo.z1. Bon, maintenant je mets ici direct une méthode focus. Bon, c'est une sorte de fonction, on appelle ça une méthode. Donc la méthode focus permet de mettre le focus ou bien d'activer automatiquement le champ Z1. J'exécute maintenant pour voir. Donc là je clique ailleurs. Quand je clique, vous avez vu que le focus est posé directement ici. On va mettre par exemple Text1, T1, et là c'est T2. Quand je clique sur Permuter, donc la permutation a bien été effectuée. Donc maintenant je crois que vous avez compris le principe. Et comme j'ai dit, dans des séances ultérieures, on va voir des méthodes qui sont plus avancées pour traiter les formulaires et généralement tous les objets que l'on peut intégrer avec du HTML. Merci pour votre attention et à la vidéo prochaine.
