ICTFF Section Informatique

le sommet de la pyramide

L'objet window représente le navigateur:

c'est l'environnement d'exécution des scripts
c'est aussi l'objet qui regroupe tous les autres objets et toutes les méthodes que l'on peut utiliser en front, c'est-à-dire côté client
l'objet window doit être considéré comme une boîte à outils à la disposition du programmeur
L'objet window sur MDN ou L'objet window sur W3School

Tous les objets et donc toutes les méthodes et propriétés de ces objets sont inclus dans l'objet window.

On peut utiliser les objets et les méthodes contenues dans l'objet window sans spécifier window, ce raccourci d'écriture destiné à faciliter la vie du programmeur ne peut pas lui faire oublier que window est l'objet principal.

Quelques méthodes de l'objet window

prompt(), alert(), confirm(), setTimeout(),scrollBy, scrollTo

Boîte de saisie: prompt()

La méthode prompt() de l'objet window permet de demander une valeur à l'utilisateur, la valeur retournée par cette méthode sera toujours une chaîne de caractères.

Syntaxe
	var valeur=window.prompt("titre_boîte","message_zone_de_saisie");

Démo
	<script>
		var valeur;
		valeur=window.prompt("Entrer une valeur:","ici");
		window.alert("Valeur entrée: "+valeur);
	</script>

Si l'utilisateur ferme la boîte avec [Annuler] ou [Echap], la valeur retournée sera null.

Boîte d'information: alert()

La méthode alert() de l'objet window lance une boîte permettant d'afficher du texte et des contenus de variables.
Elle est souvent utilisée pour débugger les scripts.
La méthode n'accepte qu'un seul paramètre.

Syntaxe
	window.alert();

Démo
	<script>
		var valeur;
		valeur=window.prompt("Entrer une valeur:","ici");
		window.alert("Valeur entrée: "+valeur);
	</script>

Boîte de confirmation: confirm()

La méthode confirm() de l'objet window lance une boîte de dialogue permettant de confirmer une action.
Elle renvoie true si l'utilisateur presse [OK] ou false si l'utilisateur presse [Annuler] ou [Echap].

Syntaxe
	var flag=window.confirm("message");

Démo
	<script>
		var flag,valeur;
		flag=window.confirm("Voulez-vous entrer une nouvelle valeur?");
		if(flag){
			valeur=window.prompt("Entrer une valeur:","ici");
			window.alert("Valeur entrée: "+valeur);
		}
		else{
			window.alert("Vous n'avez pas souhaité entrer de valeur!");
		}
	</script>

setTimeout() et clearTimeout()

La méthode setTimeout() de l'objet window déclenche l'exécution d'une fonction de callback après un nombre n de millisecondes.

Le méthode accepte 2 paramètres obligatoires, le nom de la fonction à déclencher (ou la définition d'une fonction anonyme) et le nombre de millisecondes de délais.
Les autres paramètres optionnels sont des valeurs passées à la fonction.

La méthode clearTimeout() de l'objet window permet de remettre à zéro l'identificateur passé en paramètre.

Syntaxe
	var val=window.setTimeout(name_function,millisecondes,[param1, param2,etc.])

Syntaxe
	window.clearTimeout(val)

Démo
<div id=dec></div>
<button id=cr>Go!</button>
<script>
	var cronos,cr;
	var dep=10;
	cronos=document.getElementById("cr");
	cronos.addEventListener("click",decompte);
	function decompte(){
		if(dep>=0){
		document.getElementById("dec").innerHTML=dep;
		dep=dep-1;
		cr=setTimeout(decompte,1000);
		}
		else{
		dep=10;
		clearTimeout(cr);
		}
	}
	</script>

scrollBy()

La méthode scrollBy() de l'objet window provoque un défillement à partir de la position actuelle d'un certain nombre de pixels selon X et/ou Y.

Syntaxe
	window.scrollBy(valX, valY)

Démo
<body>
<h1>Scrolling</h1>
<div id="container">
		Une belle division
		<button id="go">Hop, un p'tit scrolling...</button>
</div>
</body>
<script type="text/javascript">
	var btn=document.getElementById("go");
	btn.addEventListener("click", onyva);
	function onyva() {
		window.scrollBy(0,1000);
	}
</script>

scrollTo()

La méthode scrollTo() de l'objet window force le défilement à une position fixée en pixels selon X et/ou Y .

Syntaxe
	window.scrollTo(valX, valY)

Démo
<body>
<h1>Scrolling...</h1>
<div id="container">
		Une belle division
		<button id="go">Hop, un p'tit scrolling...</button>
</div>
</body>
<script type="text/javascript">
	var btn=document.getElementById("go");
	btn.addEventListener("click", onyva);
	function onyva() {
		window.scrollTo(0,1000);
	}
</script>

Quelques propriétés de l'objet window

Positionner la fenêtre

On peut récupérer la position de la fenêtre sur l'écran, malheureusement les fonctions sont (au 22 juin 2019) pas encore standardisées.

Pour Chrome et Safari (browsers Webkit) il faut utiliser screenX et screenY.

Le script suivant fonctionne sur tous les browsers.

Démo
<script>
function posifen() {
	var pos={x:0, y:0};
	pos.x=window.screenX; 
	pos.y=window.screenY; 
	return pos;
}
var position=posifen();
document.write(position.x+", "+position.y);
</script>

Rigolons un peu...

Exemple: tout est dans window... même window!

Démo
<h2>Tout est compris dans l'objet window</h2>
<script>
	var val0=[]; //on crée un tableau
	var val1=new Array(); //autre manière de créer un tableau
	var val2=new window.Array();// en partant de l'objet window on crée un tableau
	val3=new window.window.window.window.Array();
	window.console.log(typeof val0, typeof val1, typeof val2, typeof val3);
	window.document.write("val0 est :",typeof val0," val1 est :", typeof val1," val2  :", typeof val2 ," val3 est  :", typeof val3);
</script>

L'objet window étant à la base de tous les objets et toutes les méthodes de Javascript, cela veut dire qu'on peut reprogrammer n'importe quel méthode, tout simplement en redéfinissant cette méthode!

Exemple: reprogrammer les méthodes du JavaScript

Démo
<h2>Redéfinissons la méthode write!!!</h2>
<script>
window.document.write=function(a){
	alert(a+"! Salut beau gosse...")
}
var brol=window.prompt("Ton prénom?");
document.write(brol);
</script>

L'objet window

Aller à