précédent
Quelques exemples simples
suivant
1°/ Ouverture d'une nouvelle fenetre

L'exemple sans doute le plus utilisé en Javascript est l'ouverture d'une nouvelle fenetre. On peut le faire en Html mais Javascript permet de le faire de manière beaucoup plus fine
<script>
<!--
function fenetre() {
  Vasisdas=window.open('tmp.html','Vasisdas',
'toolbar=no,location=no,directories=no,status=no,
menubar=no,scrollbars=no,resizable=no,
width=130,height=100');
}
//-->
</script>

Dans cet exemple, nous ouvrons juste une petite fenêtre sans barre de menu ni autre accessoire. La fonction s'appelle fenetre(), et le lien précédent a donc été fait par un <a href= 'javascript:fenetre()'> exemple</a>. Vasisdas est le nom donné à la fenêtre, il est facultatif pour le moment mais pourra nous servir plus tard.window.open est l'instruction proprement dite qui crée la nouvelle fenêtre. Le reste de la ligne (car il s'agit d'une seule ligne, elle est coupée en quatre ici pour l'affichage, mais ce n'est en fait qu'une seule), le reste de la ligne constitue les paramètres de la fonction.
Nous trouvons d'abord l'Url a charger dans la page (ici tmp.html), puis le nom HTML de la fenêtre. C'est celui qui servira dans les marqueurs <a href=... target=, alors que le premier servira uniquement dans le Javascript. Ensuite nous trouvons les options de la fenetre, la présence ou l'absence de barre d'outil, d'adresse, de menu, puis les ascenseurs, resizable sert a dire si la fenetre peut etre retaillée par l'utilisateur. Toutes ces option sont a no par defaut (c'est à dire qu'ici on aurait pu toutes les ommetre). Enfin, nous trouvons la largeur (width) et la hauteur (height) Ces deux dernière données sont en pixels.
Bon, l'exemple est sympa, mais il a un petit inconvenient, c'est qu'on a été obligé de créer une page supplementaire tmp.html pour y mettre 5 ligne de code. Dans la version suivante de l'exemple, nous allons remplir nous même la fenêtre à partir de notre fonction.
function fenetre2() {
  Vasisdas=window.open('','Bulle','width=130,height=100');
  Vasisdas.document.open();
  Vasisdas.document.writeln('<html><head><title>');
  Vasisdas.document.writeln('Bulle</title></head>');
  Vasisdas.document.writeln('<body bgcolor=white text=red>');
  Vasisdas.document.writeln('<font face="Arial"><font size=4>Bonjour</font>');
  Vasisdas.document.writeln('<br><font size=2>Bienvenue dans le musée Javascript !!');
  Vasisdas.document.write('<br></body>');
  Vasisdas.document.write('</html>');
  Vasisdas.document.close();
  Vasisdas.focus();
}
Nous retrouvons dans cette 2ème version le window.open, j'y ai supprimé les options inutiles et on remarquera qu'il n'y a plus l'Url. Le fenêtre s'ouvrira alors vide. Ensuite nous avons un Vasisdas.document.open() qui servira à ouvrir le document, une serie de Vasisdas.document.writelnpour écrire dans la fenêtre les codes Html souhaités, et enfin un Vasisdas.document.close(). On commence à entrevoir qu'ainsi, on pourra écrire à peu près ce que l'on veut dans une page et ce de manière complètement dynamique. La page ne sera plus un document Html fixe mais sera crée au moment même de son chargement et pourra ainsi varier suivant le contexte dans lequel il se déroule.
Vous remarquerez à la fin de la fonction une petite instruction Vasisdas.focus(), cette instruction sert à forcer le focus sur la fenêtre, c'est à dire qu'elle apparaîtra au premier plan. Cela est utile quand on ouvre une deuxième fois une fenêtre, car en standard, la fenêtre n'apparait au premier plan qu'à la première ouverture. Vous pouvez essayer les deux liens suivant : fenetre() et fenetre2(), le premier n'a pas l'instruction focus(), le deuxième l'a. Si vous cliquez dans l'ordre fenetre(), puis fenetre2(), et enfin fenetre(), dans les deux premier cas vous verrez la fenêtre, dans le troisième, non.
Une dernière petite remarque au passage : Vous avez du remarquer que pour écrire, on a utilisé l'instruction Vasisdas.document.write(), alors que pour le focus, on a mis Vasisdas.focus(). Nous commençons à voir apparaître ici la notion de langage objet, où toutes les données sont hiérarchisés. Vasisdas est un objet window qui représente toute la fenêtre que nous avons créé. Elle a comme sous-objet (on appelle cela des propriétés) document qui représente le contenu de cette fenêtre, le code Html. focus est une fonction (on appelle cela une méthode) de window, on donne le focus à la fenêtre, mais par contre writeln est une méthode de document, on écrit dans le document lui-même. Nous verrons plus précisémment ces notions un peu plus loin dans l'exposé, pour le moment sachez qu'on adresse une proprieté par Objet.proprieté, alors qu'on appelle une méthode par Objet.method() (remarquez les parenthèses).
En attendant voyons un peu un autre exemple.
Dernière modif : 11 Mai 1998 Philippe Sarcher