Informatique


L'objet window

Aller à

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
  • MDN ou 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.
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>
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.

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(){
		alert("Salut beau gosse...")
	}
	var brol=24;
	document.write(brol);
</script>

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 après un nombre de millisecondes.
Cette méthode renvoie un identificateur représentant le timer.

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 milliseconde s 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 supprimer l'identifiant timer qu'on lui passe 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;
	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>


Les objets navigator et screen

L'objet navigator

Trois propriétés intéressantes:

  • userAgent revoie le navigateur utilisé
  • language revoie la langue du navigateur
  • platform revoie le SE sur lequel est exécuté le navigateur

Démo
<script>
	var votreNavigateur,langNavigateur,se;
	votreNavigateur=window.navigator.userAgent;
	langNavigateur=window.navigator.language;
	se=window.navigator.platform;
		document.write(`
			${votreNavigateur} 
			<br> ${langNavigateur}
			<br> ${se}
			`);
</script>
L'objet screen

Six propriétés intéressantes:

  • width et availWidth revoie la largeur et la largeur disponible en pixels
  • height et availHeight revoie la hauteur et la hauteur disponible en pixels
  • colorDepth et pixelDepth revoie le nombre de bits par couleur

Démo
<script>
var txt = "";
txt += "<p>Total width/height: " + screen.width + "*" + screen.height + "</p>";
txt += "<p>Available width/height: " + screen.availWidth + "*" + screen.availHeight + "</p>";
txt += "<p>Color depth: " + screen.colorDepth + "</p>";
txt += "<p>Color resolution: " + screen.pixelDepth + "</p>";
document.write(txt);
</script>;

Les objets location et history

L'objet location

Neuf propriétés intéressantes:

  • href revoie l'url complète de la page
  • host revoie le domaine de la page avec le numéro de port
  • hostname revoie le domaine de la page sans le numéro de port
  • port revoie le port d'écoute (vide par défaut)
  • pathname revoie le chemin relatif de la page
  • protocol revoie http: ou https:
  • search revoie le les paramètres de recherche, après le ? inclus
  • hash revoie la partie de l'url qui suit # inclus
  • origin revoie la page d'origine de la page en cours de consultation

Démo
<script>
var txt = "";
txt += "<p>URL: <b>" + location.href + "</b></p>";
txt += "<p>Domaine + port: <b>" + location.host + "</b></p>";
txt += "<p>Domaine sans port: <b>" + location.hostname + "</b></p>";
txt += "<p>Le port: <b>" + location.port + "</b> (il est vide!)</p>";
txt += "<p>Chemin relatif: <b>" + location.pathname + "</b></p>";
txt += "<p>Protocol de transfert: <b>" + location.protocol + "</b></p>";
txt += "<p>Recherche: <b>" + location.search + "</b></p>";
txt += "<p>Le hashtag: <b>" + location.hash + "</b></p>";
txt += "<p>Page d'origine: <b>" + location.origin + "</b></p>";
document.write(txt);
</script>
L'objet history

Trois méthodes intéressantes:

  • back() retourne d'une page en arrière dans l'historique
  • forward() avance d'une page en avant dans l'historique
  • go(int nbr) retourne ou avance (location.go(-1) correspnd à un location.back et location.go(1) correspond à un location.forward)

S'il n'existe aucun historique permettant de réaliser la navigation, aucune action ne sera réalisée.

Le code...
<button id=1>En arrière  d'1 page</button>
<button id=2>En avant d'1 page</button>
<button id=3>En arrière de 2 pages</button>
<button id=4>En avant de 3 pages</button>
<script>
var hist=document.getElementsByTagName("button");
for(var i=0;i<hist.length;i++){
	hist[i].addEventListener("click",mafct);
}
function mafct(e){
	if(e.target.id==="1"){alert("On va en arrière!");history.back();}
	else if(e.target.id==="2"){alert("On va en avant!");history.forward();}
	else if(e.target.id==="3"){alert("On va 2 pages en arrières!");history.go(-2);}
	else if(e.target.id==="4"){alert("On va 3 pages en avant!");history.go(3);}
	else {alert("Oups!");}
}
</script>

Positionner la fenêtre

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};
	if (window.screenLeft) pos.x=window.screenLeft; 
	if (window.screenTop)  pos.y=window.screenTop; 
	if (window.screenX)    pos.x=window.screenX; 
	if (window.screenY)    pos.y=window.screenY; 
	if (window.posX)       pos.x=window.posX; 
	if (window.posY)       pos.y=window.posY;           
	return pos;
}
var position=posifen();
document.write(position.x+", "+position.y);
</script>