Aller au contenu

Utilisez toutes les informations de l’objet window avec JavaScript

Avec l’objet JavaScript window, vous n’allez pas manquer d’informations sur vos internautes !

En plus, window vous permet de proposer plusieurs fonctionnalités très utiles à vos visiteurs 😉

Toutes les options sont listées dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Utilisez toutes les informations de l’objet window avec JavaScript

Bonjour à tous et bienvenu sur Développement Facile.

On continu ensemble la découverte de tous les objets JavaScript qui peuvent vous être utile dans votre programmation, et surtout pour que vous puissiez ajouter des interactions puissantes avec vos internautes. L’objet Window vous avez déjà vus certains de ses appels, propriétés, méthodes dans les cours précédents, là on va voir l’ensemble de l’objet Window dans ce cours.

Objet window

C’est partit. L’objet Window c’est le plus élevé dans la hiérarchie des objets JavaScript, en fait c’est le parent de tous les objets placés à l’intérieur de la page Web. Voici des attributs :

closed ça renvoi True si la fenêtre à laquelle on se réfère est fermée,
document ça renvoi le document courant,
history ça renvoi le contenu de l’objet historique, donc c’est l’historique de l’internaute, donc les pages qu’il a visitées, les pages précédentes, les pages suivantes,
innerHeight ça renvoi la hauteur utilisable pour une fenêtre,
innerWidth c’est la largeur utilisable pour une fenêtre,
location c’est l’URL de la page chargée donc location ça va vous permettre d’effectuer des redirections en JavaScript,
locationbar ça renvoi le contenu de la barre d’adresse du navigateur,
menubar c’est la barre de menu du navigateur,
name le nom de la fenêtre,
outerHeight c’est la hauteur extérieure de la page en pixel,
outerWidth c’est la largeur extérieure de la page en pixels,
pageXoffset c’est la position horizontale en pixels,
pageYoffset c’est la position verticale en pixels de la fenêtre.

Je vais volontairement vite, ces attributs, le but c’est qu’après vous fassiez des pauses dans la vidéo, elle est en haute définition, donc c’est lisible, très largement lisible sur votre écran, comme ça vous ferrez des pauses et vous pourrez relire, j’ai bien détaillé à quoi correspond chaque propriété.

parent c’est la page comprenant l’ensemble des cadres d’une page,
scrollbars c’est les barres de défilement horizontales et verticales,
self c’est la fenêtre courante donc Window,
status c’est la petite barre de statut qu’il y a tout en bas du navigateur, donc en bas de la fenêtre des fois il y a l’heure d’affichée, un petit message qui défile,
toolbar c’est la barre d’outils en haut du navigateur,
top ça correspond à la fenêtre de plus haut niveau à l’intérieur d’une page, donc que les fenêtres unes sur les autres ce sera la fenêtre de plus haut niveau,
window ça renvoie la fenêtre courante.

Objet window : les méthodes

back c’est pour retourner à la page précédente dans l’historique des pages visitées, très intéressant quand vous voulez effectuer,… une navigation pour votre internaute, back
forward c’est la page suivante dans l’historique des pages visitées,
blur ça permet de désactiver la fenêtre courante,
close de fermer la fenêtre courante,
find d’effectuer une recherche de texte dans la page active,
focus d’activer une fenêtre,
home ça affiche la page définie comme page d’accueil dans le navigateur souvent c’est google.fr, ou mozilla.fr qui est définie en page d’accueil dans un navigateur,

moveTo ça permet de déplacer la fenêtre active,
print vous connaissez print, ça permet d’imprimer la page active,
resizeBy ça permet de modifier la taille de la fenêtre active
resizeTo c’est pareil d’une autre méthode, c’est une autre méthode,
setInterval ça effectue un traitement à intervalles régulier, setInterval est utilisé souvent dans les longues pages sur internet, vous avez des contenus masqués donc une vidéo qui explique un contenu masqué et setInterval, par exemple au bout de 3000 secondes, et bien vous appelez une fonction javascript qui va afficher ce contenu qui était masqué, setInterval ça permet d’appeler une fonction au bout d’un certain nombre de secondes définies, ou millisecondes là en l’occurrence en paramètre d’entrée de cette fonction.

Objet window : méthode open

Vous avez la méthode open window.open, vous renseigner le nom de la page web, validation.php le nom et plusieurs paramètres, ça vous permet d’ouvrir une page web window.open, d’ouvrir une nouvelle page.
alwaysLowered ça créé une nouvelle fenêtre sous les autres,
alwaysRaised ça créé une nouvelle fenêtre au-dessus des autres,
dependent créé une nouvelle fenêtre dépendante de la première, si vous fermez la première fenêtre, la fenêtre fille sera fermée également, faites attention quand vous utilisez ceci, dependent,
directories ça affiche la barre d’outils personnels,
focus c’est focus clavier, ça permet d’activer une fenêtre qui vient d’être créée,

fullscreen c’est pour mettre la fenêtre en plein écran, donc le navigateur en plein écran,
height c’est la hauteur en pixels de la nouvelle fenêtre,
width c’est la largeur en pixels,
hotkeys ça permet d’activer ou de désactiver des raccourcis de clavier dans une page,
innerHeight c’est la hauteur en pixels de la nouvelle fenêtre,
innerWidth la largeur en pixels de la nouvelle fenêtre,

left pour définir la position en abscisse de la nouvelle fenêtre,
location ça permet d’afficher ou de masquer la barre d’adresse,
menubar d’afficher ou de masquer la barre de menu située en haut de la fenêtre,
outerHeight ça défini la hauteur en pixels du cadre extérieur,
outerWidth la largeur du cadre extérieur en pixels,
resizable ça modifie la taille de la nouvelle fenêtre,

screenX ça permet de définir la position en abscisse et en ordonnée d’une nouvelle fenêtre,
scrollbars c’est pour les barres de défilements,
status rappelez-vous ça affiche ou ça masque la barre de statut qui est en bas de votre fenêtre, de votre navigateur,
toolbar c’est la barre qui est en haut de votre navigateur, ça permet de l’afficher ou de la masquer,
hist ça indique si l’URL de la nouvelle fenêtre sera stocké dans l’historique de votre navigateur, vous pouvez ouvrir une nouvelle fenêtre avec ces paramètres là et choisir les paramètres que vous souhaitez, la taille de la fenêtre, si elle sera historisée, si elle aura une barre d’icône, une barre de statut, des barres de défilements, vous l’avez vu, des sites internet qui vous ouvre des fenêtres de ce style, vous l’avez sûrement vu, ils ont utilisés window.open.

Objet window

Voici un code source pour afficher/masquer une fenêtre, donc sur body onUnload on ferme la fenêtre, onLoad déchargement de l’objet body ou quand vous allez fermer ou afficher une autre page Web, on va fermer cette fenêtre qui a été ouverte, donc la nouvelle fenêtre, vous avez une nouvelle fenêtre ouverte, vous changez de page, ça va fermer automatiquement la nouvelle fenêtre.
Bouton submit si vous appuyez sur le bouton submit onclik, ça va faire un fenetre.focus, donc la nouvelle fenêtre va passer devant, va être sélectionnée, et vous avez un deuxième bouton, submit 2 ça va cacher la fenêtre. A chaque fois que vous ouvrez cette page, vous appelez le script window.open, une nouvelle fenêtre de hauteur 200, largeur 600 sans barre de menu, sans barre d’outils, vous pouvez la redimensionner et il y a des barres de défilement. C’est un exemple après vous pouvez ouvrir des sortes de pop-up, comme on dit souvent dans des nouvelles fenêtres avec window.open et tous les paramètres. Là c’est un script qui permet d’ajouter une page dans les favoris du navigateur, donc qu’est-ce qui se passe ? body.unload, à l’affichage de la fenêtre, donc au chargement de l’objet body, vous faites un addToFavoris, vous appelez la fonction JavaScript addToFavoris, et qu’est-ce qui ce passe dans addToFavoris ? Vous avez une boîte de confirmation qui s’affiche à l’utilisateur, voulez-vous ajouter cette page dans vos favoris ?
Si il répond annuler, vous faites un return, ça continue la page, si le navigateur est microsoft, est supérieur à la version quatre internet explorer, vous récupérez l’adresse, le titre du site, et vous faites un window.external.AddToFavoris siteUrl siteTitle, donc siteUrl c’est window.location, et siteTitle window.name, et voilà la page est ajoutée dans les favoris.
Regardez, vous avez navigateur égal navigateur.appname, on récupère son nom, on fait un substring on récupère les trois premières lettres du navigateur, Microsoft internet explorer, pareil pour la version, on récupère les premiers caractères substring on part de la position zéro du caractère on en prend 1, 0 ou 3, 1 2 3 caractères pour Mic.

Votre plan d’actions !

Donc avec l’objet window vous avez vu que vous pouvez faire énormément de choses, surtout des nouvelles fenêtres, avec tous paramètres, la taille de la fenêtre, la barre de défilement, la barre de statut etc.
Utilisez l’objet window, prenez connaissance, essayez de le maîtriser, retrouvez un exemple de code source directement sous ce cours vidéo, si vous avez des questions, posez-les aussi ce cours vidéo et moi je vous dis à très bientôt pour le prochain cours sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source JavaScript

Voici un exemple JavaScript pour ouvrir une nouvelle fenêtre et proposer à l’internaute d’ajouter le site dans ses favoris.

Téléchargement du code source Ouverture de fenêtre et ajout dans les favoris

Cliquez ici pour télécharger le code source Ouverture de fenêtre et ajout dans les favoris

Partagez vos scripts JavaScript avec l’objet window

L’objet window permet d’effectuer énormément d’actions. Utilisez les commentaires pour proposer vos scripts.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>