Lors de l'écriture des applications en javascript, vous devez faire face à certaines questions avant d'être vraiment prêt pour eux. Il est un scénario de la poule ou de l'oeuf - quelle technique vous devez répondre en premier? Voilà comment il est avec la sortie de l'application.

Pour voir comment certaines techniques de programmation fonctionnent, vous devez savoir comment écrire sortie à l'écran de l'application. Bien sûr, vous avez vraiment besoin de savoir plus sur javascript avant de pouvoir maîtriser la technique de l'écriture quelque chose à l'écran.

Comment écrire à un élément HTML

Documents HTML sont constituées d'éléments individuels. Un élément est toute étiquette que vous utilisez pour maintenir le contenu, comme un

, ou tag. Vous pouvez écrire des informations sur l'un de ces éléments à l'aide de javascript. L'exemple suivant montre comment vous pouvez écrire à des éléments spécifiques.

Création de l'élément HTML sortie
Change moi

Dans ce cas, la page contient une

tag avec un id de myText. Ce paragraphe contient le texte Change moi. En outre, il ya une tag qui crée un bouton, l'utilisateur peut cliquer. Lorsque l'utilisateur clique sur le bouton Cliquez-moi, l'application appelle la WriteText () fonction qui apparaît dans le du document à l'intérieur de la tag.

javascript a plusieurs objets globaux, vous pouvez accéder avec votre code. L'un des objets les plus importants est document, qui se réfère à l'ensemble du document HTML. Bien sûr, vous ne voulez pas changer tout le document- vous voulez changer qu'un seul élément dans le document. La getElementById () fonction récupère tout élément qui a une id attribuer par le nom de l'attribut, qui est myText dans ce cas.

À ce stade, vous avez accès à l'ensemble du

élément avec le nom myText. Vous voulez changer le texte au sein de cet élément. La innerHTML propriété offre un accès au texte au sein de la

élément. Vous pouvez lire le contenu ou le modifier. Utilisation innerHTML =, comme indiqué dans le code, modifie le contenu. Il rend le contenu égale à tout ce qui suit, qui est Cliqué! dans ce cas.

Lorsque vous essayez l'exemple, vous voyez d'abord une page avec un texte et un bouton. Cliquez sur le bouton, et la valeur des modifications de texte. Cette technique fonctionne avec tout élément qui affiche du texte. Vous pourriez tout aussi bien l'utiliser avec un ou toute autre balise qui peut afficher du texte.

Cette technique ne fonctionne que lorsque vous interagissez avec des éléments qui contiennent du texte dans une balise ouverture et de fermeture, tels que

. Lorsque vous travaillez avec un ou un autre élément qui utilise les attributs de tenir contenu, vous devez utiliser une méthode différente. Dans ce cas, vous devez accéder à l'attribut dans le contrôle et faire le changement il ya, comme indiqué ici:

document.getElementById ("btnClickMe") setAttribute ("value", "clicked!"). -

Dans ce cas, vous demandez javascript pour obtenir l'accès à la btnClickMe dans l'élément document et ensuite pour définir la valeur attribuer à Cliqué!. Le résultat est le même que lorsque l'on travaille avec le

tag, mais l'approche est légèrement différente. La innerHTML propriété est utile seulement pour les éléments qui ont une valeur attribuée à cette propriété.

Comment créer une sortie directe de documents javascript

Dans certains cas, vous ne voulez pas d'interagir avec un élément existant, de sorte que vous créez un nouvel élément qui contient le contenu que vous souhaitez voir. Par exemple, vous pouvez ajouter un nouveau

balise qui contient le texte que vous voulez voir. javascript fournit un certain nombre de façons d'accomplir cette tâche.

La façon la plus simple pour effectuer la tâche est de créer un script en ligne comme celui illustré dans l'exemple suivant qui ajoute la sortie requise.

Création sortie directe

Le point focal de cet exemple est l'appel à la document.write () fonction. Cette fonction vous permet d'écrire le texte que vous voulez à la document objet. Dans ce cas, l'exemple crée une nouvelle

tag qui contient un message simple.

Vous pouvez facilement créer ce texte en ajoutant le

marquer directement. Cette technique particulière est très pratique. Par exemple, vous pouvez l'utiliser pour vérifier une condition et puis ajoutez le texte approprié en fonction de la condition. Ce que vous devez voir dans cet exemple est que écrivant au document à l'aide d'un script est en effet possible.

Éviter d'éventuels problèmes avec sortie

Bogues peut causer toutes sortes de problèmes pour les utilisateurs qui, à son tour, causer toutes sortes de problèmes pour vous. Une des erreurs les plus intéressantes que vous pouvez rencontrer est l'écriture des informations à un document opposer de manière incorrecte. L'exemple suivant illustre un cas où vous voyez le résultat incorrect d'utiliser le document.write () fonction.

Création de l'élément HTML sortie
Change moi

Notez que le document.write () fonction est appelée après la page est terminée. Lorsque vous utilisez le document.write () la fonction de cette façon, il écrase tout ce qui apparaît dans la document objet. Lorsque vous cliquez sur le bouton Cliquez-moi sur la page, vous voyez le mot Oops! l'écran et rien d'autre.

En fait, la page ne sera même pas terminer le chargement parce que le navigateur ne sait pas quoi faire avec elle. Pour arrêter le processus de chargement, vous devez cliquer sur le bouton Stop de chargement de votre navigateur manuellement.

À ce stade, si vous utilisez la capacité de votre navigateur pour voir la source de la page, vous verrez un seul mot, Oops!. La page ne contient plus de déclaration, , , ou balises, ou l'une de l'autre information qu'il utilisé pour contenir. La document.write () fonction a écrasé tout.

Maintenant, ce ne sont pas toujours un résultat incorrect - vous pouvez réellement besoin de remplacer la page avec le nouveau matériel, mais vous avez besoin pour créer une page entièrement nouvelle en le faisant.