Peut-être l'application la plus intrigante du DOM dans javascript est la capacité de permettre à l'utilisateur de communiquer avec le programme à travers la page web HTML5, sans toutes ces boîtes de dialogue ennuyeux. Voici une page avec un formulaire Web contenant deux zones de texte et un bouton.

Lorsque vous cliquez sur le bouton, quelque chose d'excitant se passe.

De toute évidence, entrée et sortie basée sur un formulaire est préférable à l'interruption constante de boîtes de dialogue.

Présentation de la programmation événementielle

Interfaces graphiques utilisent généralement une technique appelée programmation événementielle. L'idée est simple.

1. Créer une interface utilisateur.

   Dans les pages Web, l'interface utilisateur est généralement construit de HTML et CSS.

2. Identifier les événements le programme devrait répondre.

   Si vous avez un bouton, les utilisateurs pourront cliquer dessus. (Si vous voulez vous assurer qu'ils cliquent, mettez le texte “ Lancez le Missiles ” sur le bouton.) Les boutons ont presque toujours des événements. Certains autres éléments font, aussi.

3. Écrire une fonction pour répondre à chaque événement.

   Pour chaque événement, vous voulez tester, écrire une fonction qui fait tout ce qui doit arriver.

4. Obtenez de l'information à partir d'éléments de formulaire.

   Maintenant, vous avez accès à des teneurs en éléments de formulaire pour obtenir des informations de l'utilisateur. Vous avez besoin d'un mécanisme pour obtenir des informations à partir d'un champ de texte et d'autres éléments de formulaire.

5. Utilisez des éléments de formulaire pour la sortie.

Création du formulaire HTML

La première étape dans la construction d'un programme qui permet de gérer les entrées et sorties du texte est de créer le cadre HTML. Voici le code HTML:

Zone de texte Entrée et sortie

Comme vous regardez sur le code, notez quelques idées importantes:

• La page utilise CSS externe. Le style CSS est agréable, mais il est pas important dans la discussion ici. Il reste encapsulé en toute sécurité dans son propre fichier. Bien sûr, vous êtes les bienvenus pour regarder par-dessus ou le modifier.

• La plupart de la page est un formulaire. Tous les éléments de formulaire doivent être à l'intérieur d'un formulaire.

• UN fieldset est utilisé pour contenir les éléments de forme. contribution éléments doivent être à l'intérieur une sorte de l'élément de niveau bloc, et un fieldset est un choix naturel.

• Il ya un champ de texte nommé txtName. Ce champ de texte contient le nom.

• Le deuxième élément est un bouton. Vous n'êtes pas obligé de donner le bouton une pièce d'identité (comme il ne sera pas désigné dans le code), mais elle a un sur clic() événement.

• L'événement de la touche se réfère à une fonction (non encore défini). Dans cet exemple, il est nommé “ sayHi () ”.

• Une deuxième zone de texte contient le message d'accueil. Cette deuxième zone de texte est appelé txtOutput parce qu'il est le champ de texte destiné à la production.

Après avoir configuré la page HTML, la fonction devient assez facile à écrire parce que vous avez déjà identifié toutes les grandes constructions. Vous savez que vous avez besoin d'une fonction appelée dis salut, et cette fonction lit le texte à partir de la txt-Name domaine, et écrit à la txtOutput champ.

Utilisez getElementById pour accéder à la page

HTML est une chose, et javascript est une autre. Vous devez trouver un moyen de transformer un élément de formulaire HTML dans quelque chose javascript peut lire. Le magique getElementById () méthode fait exactement cela. D'abord, regardez les deux premières lignes de la dis salut() fonction (défini dans l'en-tête comme d'habitude).

 sayHi fonction () {var txtName = document.getElementById ("txtName") - var txtOutput = document.getElementById ("txtOutput") -

Vous pouvez extraire tous les éléments créés dans votre page Web en creusant à travers le DOM. Dans les temps anciens, cette approche est comment les développeurs utilisés pour accéder à des éléments de formulaire. Il était laid et fastidieux. Les navigateurs modernes ont la merveilleuse getElementById () fonctionner à la place. Cette beauté recherches à travers le DOM et renvoie une référence à un objet avec l'ID demandé.

UN référence est tout simplement un indicateur où l'objet est spécifiée dans la mémoire. Vous pouvez stocker une référence dans une variable. Manipuler cette variable manipule l'objet qu'il représente. Si vous voulez, vous pouvez penser que ce faisant la zone de texte dans une variable.

Manipuler les champs de texte

Après vous avez accès à des champs de texte, vous pouvez manipuler les valeurs de ces champs avec le valeur Propriété:

 var name = txtName.value-txtOutput.value = "Salut," + nom + "!"

Les champs de texte (et, en fait, tous les champs de saisie) ont une valeur propriété. Vous pouvez lire cette valeur comme une variable de chaîne ordinaire. Vous pouvez également écrire à cette propriété, et le champ de texte sera mis à jour à la volée.

Ce code gère l'entrée et la sortie des données:

1. Créer une variable pour le nom.

   Ceci est une variable de chaîne ordinaire.

2. Copiez la valeur de la zone de texte dans la variable.

   Maintenant que vous avez une variable représentant la zone de texte, vous pouvez accéder à sa propriété pour obtenir la valeur tapé par l'utilisateur.

3. Créer un message pour l'utilisateur.

   Utilisez concaténation de chaîne ordinaire.

4. Envoyer le message à la sortie zone de texte.

   Vous pouvez également écrire un texte à la valeur la propriété, ce qui change le contenu du champ de texte sur l'écran.

Les champs de texte retournent toujours des valeurs de chaîne (comme le font les invites). Si vous voulez tirer une valeur numérique à partir d'un champ de texte, vous pouvez avoir à convertir avec le parseInt () ou parseFloat () fonctions.