Accueil    Javascript    Javascript et html
 



Javascript et html  Javascript et html

Index Javascript


Intégration de javascript dans une page html



Inclure du script dans une page html se fait avec l'utilisation de la balise <script> qui indique la présence de code javascript au compilateur. Il est possible d'inclure du code javascript directement dans la page ou alors de faire référence à un fichier javascript (extension ".js")


Ecriture de javascript au sein d'une page :

<script type="text/javascript">
//<![CDATA[

...code javascript...

//]]>
</script>

Référence à un fichier javscript externe :

<script type="text/javascript" src="FichierJavascript.js"></script>


Accès aux éléments html par javascript



La force du javascript est son interaction directe avec les éléments composant la page html. Il est possible d'accéder à toutes les balise, modifier les états les styles les textes affichés par celle-ci et encore de très nombreuses autres manipulations.
Mais pour celà il faut commencer par accéder aux éléments. Trois méthodes principales existent pour celà :
    - getElementById() : retourne une référence à l'élément dont l'identifiant correspond à la
      valeur recherchée
    - getElementsByName() : retourne un tableau d'éléments dont le nom correspond à la valeur
      recherchée
    - getElementsByTagName() : retourne un tableau d'éléments dont le tag correspond à celui
      recherché


Exemple d'utilisation des méthodes :

<label id="lbl-exemple">exemple :</label>
<input type="text" name="txt-exemple" />

<script type="text/javascript">
//<![CDATA[
   document.write("<br />Label : " + document.getElementById("lbl-exemple").outerHTML);
   document.write(document.getElementsByName("txt-exemple")[0].type);
   
//]]>
</script>

Rendu :



Ecriture dans une page html avec javascript



Les derniers exemples montrent l'utilisation de la méthode document.write() pour écrire des blocs de textes directement dans la page html, mais il faut garder en tête que cette méthode peut écraser tout le contenu de la page si elle est employée sur une action utilisateur.


Le code suivant s'il était exécuté provoquerait l'affichage d'une page blanche avec pour seul texte celui de la méthode document.write() :

<input type="button" value="méthode write()" onclick="document.write('texte affiché');" />

Il est bien entendu possible d'interagir fortement avec le html et lorsque l'on souhaite inclure du texte dans une page, la propriété "innerHTML" est sans doute la plus adaptée. Cette propriété est propre aux éléments html, et permet d'obtenir ou de définir le texte contenu entre les balises d'ouverture et de fermeture de ceux-ci.
On imagine ainsi facilement obtenir un élément spécifique par son identifiant pour ajouter ou insérer du contenu dans celui-ci.


Insertion de texte au sein d'une balise <div> en utilisant la propriété innerHTML

<div id="div-exemple;" style="padding:4px 10px; border:dashed 1px black;></div>

<script type="text/javascript">
//<![CDATA[
   document.getElementById("div-exemple").innerHTML = "texte affiché";
//]]>
</script>

Rendu :