|
 |
Le but de ce script est simplement de montrer comment écrire avec JavaScript.
On peut bien sûr évidemment utiliser le HTML, mais utiliser JavaScript permet d'intégrer au sein du
texte affiché des éléments variables ou sélectionnés en fonction du visiteur, de sa
machine, de ce qu'il a fait ou pas précédemment. |
 |
 |
 |
|
 |
L'instruction 'document.write()' permet d'écrire dans la
page HTML. Suivant la façon dont elle est appelée, elle remplace la page en cours ou ajoute du contenu
à la page en cours.
Si c'est un simple 'document.write()' dans le corps de la page qui est placé (entre deux
balises '<script>' et '</script>'), la valeur placée
entre parenthèses remplacera tout l'ensemble de balises. Si entre ces balises, c'est une fonction qui inclue un
'document.write()' qui est appelée, la page est totalement remplacée par ce qui
est écrit via JavaScript.
Le premier exemple ci-dessous écrit un texte fixe dans la page, tandis que le second fait appel à deux
variables : le nom du navigateur du visiteur et sa version.
Le troisième exemple est un peu plus complexe et va fabriquer un tableau dont le nombre de colonnes et le nombre
de lignes est choisi par le visiteur (on pourrait, plutôt que de faire choisir le visiteur, se baser sur une liste
d'images dont on ne connait pas le nombre à l'avance par exemple). Ici, la page sourante sera remplacée par
le résultat de la fonction.
|
 |
 |
 |
|
 |
dans la partie <head>
 |
 |
 |
 |
Exemple 3 :
<script language="JavaScript">
function generer(col,lig) {
// on vérifie d'abord que les nombres saisis soient supérieurs à zéro (0)
if ( (col && lig) > 0 ) {
// quelque soit la taille du tableau, on débute le tableau
document.write('<table border="1">');
// la variable 'i' sera le nombre de ligne
for ( i = 1 ; i <= lig ; i++ ) {
// autant de 'i', autant de débuts de lignes
document.write('<tr>');
// la variable 'j' sera le nombre de colonnes
for ( j = 1 ; j <= col ; j++ ) {
// autant de 'j', autant de cellules
// on pimente en notant le numéro de la ligne et celui de la colonne
document.write('<td>Ligne ' + i + ', colonne ' + j + '</td>');
}
// autant de 'i', autant de fins de lignes
document.write('</tr>');
}
// quelque soit la taille du tableau, on le ferme
document.write('</table>');
}
// si les nombres saisis ne sont pas supérieurs à zéro (0)
else {
window.alert('Vous avez donne un ou deux nombres egaux ou inferieurs a zero.');
}
}
</script>
|
|
 |
 |
 |
 |
dans la partie <body>
 |
 |
 |
 |
Exemple 1 :
Bonjour,
Cette page est contituée à la fois de HTML, ce texte par exemple, mais aussi de JavaScript, comme le texte qui suit :
<script language="JavaScript">
document.write('Hello World !');
</script>
Un classique ;-)).
Exemple 2 :
Vous utilisez <script language="JavaScript">document.write(navigator.appName + ' ' + navigator.appVersion);</script>... non ?
Exemple 3 :
<form name="formulaire">
Choisissez le nombre de colonnes du tableau : <input type="text" name="colonnes" size="5">
Choisissez le nombre de lignes du tableau : <input type="text" name="lignes" size="5">
<input type="button" value="Creer le tableau" OnClick="generer(this.form.colonnes.value,this.form.lignes.value);">
</form>
|
|
 |
 |
 |
 |
|
 |
 |
 |
|
 |
 |
 |
 |
 |
Exemple 1 :
Bonjour,
Cette page est contituée à la fois de HTML, ce texte par exemple, mais aussi de JavaScript, comme le texte qui suit :
Un classique ;-)).
Exemple 2 :
Vous utilisez ... non ?
Exemple 3 :
Voir la démonstration
|
|
 |
 |
 |
 |
|
 |
 |
 |
|
 |
|