JavaScript - Objet Fenêtre : Votre Porte d'Entrée pour l'Interaction avec le Navigateur

Salut à toi, futurs magiciens JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde de l'Objet Fenêtre. En tant que votre professeur d'informatique du coin, je suis là pour vous guider à travers ce sujet fascinant. Alors, prenez vos baguettes virtuelles (claviers), et mettons-nous à jeter quelques sorts JavaScript !

Qu'est-ce que l'Objet Fenêtre ?

Imaginez la fenêtre du navigateur comme un portail magique vers le web. L'Objet Fenêtre est comme le gardien de ce portail, contrôlant tout ce que vous voyez et avec lequel vous interagissez sur une page web. Il est si important qu'il est souvent appelé l'"Objet Global" en JavaScript.

L'Objet Fenêtre en tant qu'Objet Global

Lorsque vous écrivez du JavaScript pour une page web, l'Objet Fenêtre est toujours là, silencieusement veillant sur votre code. C'est comme l'air que nous respirons - il est partout, même si nous ne le remarquons pas toujours.

Commençons par un exemple simple :

console.log("Bonjour, le monde !");

Saviez-vous que c'est en réalité une abréviation de :

window.console.log("Bonjour, le monde !");

La partie window est généralement omise car elle est implicite. Génial, non ?

Propriétés de l'Objet Fenêtre

Maintenant, explorons certaines des propriétés magiques de notre Objet Fenêtre. Ces propriétés sont comme les différentes chambres de notre château navigateur, chacune ayant son propre usage spécial.

1. window.innerWidth et window.innerHeight

Ces propriétés nous disent la taille de notre fenêtre de navigateur. Voyons-les en action :

console.log("Largeur de la fenêtre : " + window.innerWidth);
console.log("Hauteur de la fenêtre : " + window.innerHeight);

Essayez de redimensionner votre fenêtre de navigateur et exécutez ce code à nouveau. Vous verrez les chiffres changer !

2. window.location

Cette propriété est comme le GPS de notre navigateur. Elle nous indique où nous sommes sur le web et nous permet de naviguer vers de nouveaux endroits.

console.log("URL actuelle : " + window.location.href);
// Pour naviguer vers une nouvelle page :
// window.location.href = "https://www.example.com";

3. window.history

Pensez à cela comme le journal de votre navigateur, conservant un suivi de vos déplacements.

console.log("Nombre de pages dans l'historique : " + window.history.length);
// Pour revenir à une page précédente :
// window.history.back();

Voici un tableau résumant ces propriétés :

Propriété	Description
innerWidth	Largeur de la fenêtre du navigateur
innerHeight	Hauteur de la fenêtre du navigateur
location	Informations sur l'URL actuelle
history	Historique du navigateur

Méthodes de l'Objet Fenêtre

Maintenant, apprenons quelques sorts (méthodes) que nous pouvons jeter sur notre Objet Fenêtre !

1. window.alert()

Cette méthode est comme crier "Hé, écoute !" à l'utilisateur. Elle crée une boîte de dialogue d'alerte avec un message.

window.alert("Bienvenue dans JavaScript !");

2. window.prompt()

Cette méthode est comme poser une question à l'utilisateur. Elle crée une boîte de dialogue avec un champ de saisie de texte.

let name = window.prompt("Comment t'appelles-tu ?");
console.log("Bonjour, " + name + " !");

3. window.setTimeout()

Cette méthode est comme régler un minuteur pour votre code. Elle exécute une fonction après un délai spécifié.

window.setTimeout(function() {
console.log("Ce message apparaît après 3 secondes !");
}, 3000);

4. window.setInterval()

Cette méthode est comme régler une alarme récurrente. Elle exécute une fonction à intervalles réguliers.

let counter = 0;
window.setInterval(function() {
counter++;
console.log("Ce message apparaît toutes les 2 secondes. Compte : " + counter);
}, 2000);

Voici un tableau résumant ces méthodes :

Méthode	Description
alert()	Affiche une boîte de dialogue d'alerte
prompt()	Affiche une boîte de dialogue pour la saisie de l'utilisateur
setTimeout()	Exécute une fonction après un délai spécifié
setInterval()	Exécute une fonction à intervalles réguliers

Mettre Tout Ensemble

Maintenant que nous avons appris ces propriétés et méthodes magiques, utilisons-les pour créer une simple page web interactive :

<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Bienvenue !</h1>
<button onclick="startGame()">Démarrer le Jeu</button>

<script>
function startGame() {
let name = window.prompt("Quel est ton nom, aventurier ?");
document.getElementById("greeting").innerHTML = "Bienvenue, " + name + " !";

let counter = 5;
let countdown = window.setInterval(function() {
if(counter > 0) {
window.alert(counter + " secondes avant que le jeu commence !");
counter--;
} else {
window.clearInterval(countdown);
window.alert("Le jeu commence !");
}
}, 1000);
}
</script>
</body>
</html>

Dans cet exemple, nous avons créé un simple "jeu" qui :

1. Demande le nom du joueur à l'aide de prompt()
2. Met à jour le salut en utilisant la manipulation du DOM
3. Utilise setInterval() pour créer un compte à rebours
4. Utilise alert() pour informer le joueur du compte à rebours et du début du jeu

Et voilà, jeunes apprentis JavaScript ! Nous avons exploré le royaume magique de l'Objet Fenêtre, de ses propriétés à ses méthodes. Souvenez-vous, la pratique rend parfait, donc continuez à expérimenter avec ces concepts. Avant de vous en rendre compte, vous serez capable de jeter des sorts JavaScript comme un pro !

À bientôt, bon codage !

Credits: Image by storyset