Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

JavaScript 1.3

  Ecrire avec JavaScript

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script

  Fonction
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.
  Principe
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.
  Le script
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>
  Démonstration
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
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
  • Script intégré :
    div_write.zip
    1 Ko
    telechargez le script telechargez le script
    Script séparé :
    div_write2.zip
    2 Ko
    Recherche
    aide sur la recherche
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter