Cours
4. XHTML et Javascript
4.11. Porter sur l'écran
Voici une énumération (et un résumé) des différentes manières pour porter quelque chose sur l'écran en Javascript:
4.11.1 Dans une boîte de dialogue
La commande javascript alert("texte") transforme si nécessaire en texte (par exemple le contemu d'une variable) et insère ce texte dans une fenêtre de dialogue Alert qui s'ouvre et qu'il faut fermer avant de continuer, par → exemple
............
<script>
alert("hello")
mavariable=3;
alert(mavariable)
</script>
et nous continuons en Html....
............
4.11.2 Dans le document courant
La commande javascript document.write("contenu Html") insère n'importe un contenu Html et Javascript à l'endroit où l'on se trouve dans le document , par → exemple
............
<script>
mavariable="camarade";
document.write("hello");
document.write("<br />");
document.write("hello"+mavariable);
</script>
............
Si vous appelez document.write en cliquant sur un bouton, le document est déjà entièrement chargé à ce moment et le nouveau contenu est introduit dans un nouveau document, par → exemple
............
<script>
document.write("Texte sorti dans le document actuel");
document.write("<br />");
</script>
<form>
<input type="button" value="cliquez ici"
onClick='document.write("Texte sorti dans un nouveau document");'>
</form>
............
4.11.3 Dans une balise <p>,<span> ou <div>
La commande javascript document.getElementById("identificateur de la balise").innerHTML="contenu" insère un contenu dans la balise en question, par → exemple
............
Ceci est le contenu actuel d'une balise span: <span id="idspan"><b>hello</b></span>
<input type="button" value="cliquez ici"
onClick="document.getElementById('idspan').innerHTML='<b>camarade</b>';" />
............
La méthode est intéressante pour les balises <span>, <p> (insertion de textes) et surtout <div> (insertions plus complexes: images, objets...)
→ exemple pour la balise <p>→ exemple 1 pour la balise <div>
→ exemple 2 pour la balise <div>
4.11.4 Dans un champ d'entrée de texte à 1 ou plusieurs lignes contenu dans un formulaire
La commande javascript document.nomduformulaire.nomduchampdetexte.value="contenu" insère un contenu dans le champ de texte en question, par → exemple
............
<form name="f">
<input type="text" name="ta" value="Champ à une ligne." />
<input type="button" value="cliquez ici" onClick="document.f.ta.value='Nouveau contenu';" />
</form>
............
4.11.5 Dans un champ de boutons radio ou boutons à cocher contenu dans un formulaire
La commande javascript document.nomduformulaire.nomdesboutons[indicedubouton].checked="true" coche les boutons en question, la commande document.nomduformulaire.nomdesboutons[indicedubouton].checked="false" les décoche, par → exemple
............
<form name="f1">
<input type = radio name = r1 Value = "1" />Hydrogène
<input type = radio name = r1 Value = "2" />Hélium
<input type = radio name = r1 Value = "3" />Lithium
<input type = radio name = r1 Value = "4" />Béryllium
<br />
<input type="button" value="Cliquez" onClick="document.f1.r1[0].checked='true'"><br />
<input type="button" value="Cliquez" onClick="document.f1.r1[1].checked='true'"><br />
<input type="button" value="Cliquez" onClick="document.f1.r1[2].checked='true'"><br />
<input type="button" value="Cliquez" onClick="document.f1.r1[3].checked='true'"><br />
</form>