La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

LE LANGAGE JAVASCRIPT LES FENETRES. OBJECTIFS DE LA FORMATION : Savoir générer et modifier des fenêtres par le JavaScript.

Présentations similaires


Présentation au sujet: "LE LANGAGE JAVASCRIPT LES FENETRES. OBJECTIFS DE LA FORMATION : Savoir générer et modifier des fenêtres par le JavaScript."— Transcription de la présentation:

1 LE LANGAGE JAVASCRIPT LES FENETRES

2 OBJECTIFS DE LA FORMATION : Savoir générer et modifier des fenêtres par le JavaScript

3 PROGRAMME zGénération et modification de fenêtres yRéécriture du document en cours xEcriture du document en cours de chargement xRéécriture d'un document qui a fini de se charger yGénération d'une nouvelle fenêtre x1er cas x2ème cas

4 Génération et modification de fenêtres (1/2) zLorsqu'on lance le navigateur, il cherche à afficher une page prédéterminée et, s'il ne peut y parvenir, il affiche une page d'erreur. zDonc, le navigateur affiche toujours une page. zEt si on ferme cette page on arrête le navigateur. zUne page est un objet window et l'on sait que cet objet possède des propriétés et en particulier l'objet document. zPour modifier un affichage sur l'écran, on peut soit réécrire la partie document de la page en cours, soit créer une autre page (un autre objet window) et composer son propre objet document.

5 Génération et modification de fenêtres (2/2) zNous aurons donc deux instructions open possibles : yl'une au niveau window (window.open(…)) pour ouvrir s'il y a lieu une nouvelle fenêtre yl'autre au niveau document (ident_window.document.open()) pour écrire les instructions HTML et éventuellement des fonctions JavaScript devant constituer la totalité du nouveau document à afficher zOn peut donc réécrire le contenu d'un document à partir d'un script Javascript, que ce soit sur l'objet window en cours ou sur un nouveau.

6 Réécriture du document en cours (1/2) zEcriture du document en cours de chargement yExemple : ceci est la fenêtre initiale window.document.open(); window.document.write(" "); window.document.write("ceci est la réécriture du ocument "); window.document.write(" "); window.document.close(); yIci, on complète le document initial mais on ne le réécrit pas car l'exécution du script se déroule alors que le chargement du document initial n'est pas terminé. yRemarque : les open() et close() sont sans effet. yOn visualise donc les deux textes simultanément : ceci est la fenêtre initiale ceci est la réécriture du document

7 Réécriture du document en cours (2/2) zRéécriture d'un document qui a fini de se charger yExemple : function reecriture() { window.document.open(); window.document.write(" "); window.document.write("ceci est la réécriture du document "); window.document.write(" "); window.document.close(); } ceci est la fenêtre initiale NOM : yA noter que la réécriture se déclenche sur un clic de l'utilisateur, c'est à dire après le chargement terminé de la page et du document initial. yIl y a alors une réécriture complète du document.

8 Gestion des fenêtres et popup z Le mot popup peut être traduit par fenêtre surgissante. z L'ouverture de cette fenêtre est déclenchée par un événement utilisateur (clic, ouverture de site, minuterie,...) via une seule ligne de code javascript. z Un popup est ouvert grâce à la méthode (ou fonction) appelée sur l'objet window. Cette fonction attend 3 paramètres : window.open( page [,nom] [,options] )

9 Gestion des fenêtres et popup zIci, il va falloir enchaîner l'ouverture de la nouvelle fenêtre et l'ouverture et l'écriture de son document. y1er cas : Le contenu de la nouvelle fenêtre se trouve dans un fichier HTML. Il suffit alors de le citer à l'ouverture. Et l'ouverture du document est implicite. xExemple :... fen = window.open("pasvide.htm","","toolbar=yes, location=no, status=no, menubar=no, Width=250, Height=100, scrollbars=no"); ceci est la fenêtre initiale

10 Gestion des fenêtres et popup z2ème cas : Le document est entièrement décrit dans le script du document initial et générateur de la nouvelle fenêtre. yExemple qui ferme la fenêtre que l'on vient d'ouvrir à partir de la première fenêtre var new_win = null; // déclaration a l'extérieur de la fonction pour qu'elle soit accessible ailleurs // Initialisation à null pour symboliser qu'aucune fenêtre n'est ouverte function ouvre() { var option = "width=300,height=150,resizable=yes"; new_win = window.open("","new",option); new_win.document.write(" \n "); new_win.document.write(" J'écris dans cette fenêtre à partir de la 1ère fenêtre "); new_win.document.write(" \n "); } function ferme() { if (new_win != null) // teste si une fenêtre a déjà été ouverte new_win.close(); }

11 Gestion des fenêtres et popup z Centrer un popup Voici comment centrer un popup : function PopupCentrer(page,largeur,hauteur,options) { var top=(screen.height-hauteur)/2; var left=(screen.width-largeur)/2; window.open(page,"","top="+top+",left="+left+",width="+largeur+",h eight="+hauteur+","+options);} z Popup toujours visible Pour forcer le popup a rester toujours visible, il suffit d'ajouter ce code dans la balise de la page du popup : onblur="window.focus()" La seule solution pour s'en débarrasser est de le fermer complètement.

12 Gestion des fenêtres et popup zCommuniquer avec la fenêtre appelante z Depuis le popup il est possible d'atteindre l'objet window de la fenêtre appelante grâce à window.opener. z On peut ainsi modifier le contenu de la fenêtre appelante ou récupérer des informations du popup pour les replacer dans un formulaire de la fenêtre appelante. Syntaxe : window.opener.document.forms["nom_form"].elements["nom_obj"].value

13 Fenêtre appelane (appelante.html) function OuvrirPopup(page,nom,option) { window.open(page,nom,option); } Votre choix

14 Pop Up (popchoix.html) function Reporter(l) { var choix=l.texte.value; window.opener.document.forms["origine"].elements["choix"].value=choix; }

15 RESUME DE LA FORMATION zNous avons appris : yà générer des fenêtres yà écrire dans des fenêtres vides yà modifier le contenu de documents existants yà gérer des popups


Télécharger ppt "LE LANGAGE JAVASCRIPT LES FENETRES. OBJECTIFS DE LA FORMATION : Savoir générer et modifier des fenêtres par le JavaScript."

Présentations similaires


Annonces Google