Comprendre l’objet Location en JavaScript
Lorsque l’on explore la hiérarchie des objets JavaScript, on découvre un élément essentiel : l’objet Location. Cet objet est une propriété de l’objet global window. Il appartient à la famille des objets de type Location, parmi lesquels l’objet window.location se distingue comme un exemple concret. L’objet Location offre des fonctionnalités cruciales pour interagir avec les URL des pages web.
Contexte :
Lorsque l’on programme en JavaScript et que l’on travaille avec des pages web, il est souvent nécessaire d’accéder et de manipuler les URL. L’objet Location joue un rôle central dans cette tâche. Il permet d’extraire des informations spécifiques de l’URL, telles que les paramètres passés dans l’adresse, de rediriger l’utilisateur vers d’autres pages web, ou encore de rafraîchir la page actuelle. Cette connaissance de l’objet Location est cruciale pour de nombreuses opérations de navigation et d’interaction avec le web à travers JavaScript.
Propriétés et Méthodes de l’Objet Location en JavaScript
L’objet Location en JavaScript est un composant essentiel pour interagir avec les URL des pages web. Il permet d’accéder à diverses informations et de réaliser des actions de navigation.
Propriétés de l’objet Location
| Propriété | Utilité | Exemple |
|---|---|---|
| href | Renvoie une chaîne avec l’URL complète. | alert('URL : ' + window.location.href); |
| protocol | Renvoie le protocole URL, généralement http ou https. | alert('Protocole : ' + window.location.protocol); |
| host | Renvoie le nom du serveur, généralement sous forme de nom de domaine, et, si un port spécifié existe, séparé par :. | alert('Hôte : ' + window.location.host); |
| hostname | Renvoie le domaine ou le serveur. | alert('Nom d'hôte : ' + window.location.hostname); |
| pathname | Renvoie le chemin à l’exclusion du nom de domaine ou du serveur. | alert('Chemin : ' + window.location.pathname); |
| search | Renvoie la chaîne qui représente les paramètres qui existent dans l’URL. | alert('Paramètres : ' + window.location.search); |
| hash | Renvoie # suivi d’un texte si dans l’URL il y a un # suivi d’un texte (ancre d’emplacement du fragment html). | alert('Localisateur : ' + window.location.hash); |
| origin | Renvoie une chaîne représentant la racine du site Web | alert('Origine : ' + window.location.origin); |
Méthodes de l’objet Location
| Méthode | Utilité | Exemple |
|---|---|---|
| assign(URL de destination) | Attribue une URL à la fenêtre actuelle, provoquant le chargement de l’URL de destination. L’utilisateur peut revenir en arrière avec le bouton Précédent du navigateur. | alert("Transfert vers lecoursgratuit.com"); window.location.assign('http://lecoursgratuit.com'); |
| reload(opcIfFromServer) | Provoque le rechargement de l’URL actuelle. Si true est indiqué en paramètre, le rechargement se fera depuis le serveur (rafraîchissement complet). S’il n’est pas précisé ou est faux, le rechargement peut se faire depuis le cache. | alert('Rechargement de la page... '); window.location.reload(true); |
| replace(URL de destination) | Attribue une URL à la fenêtre actuelle, provoquant le chargement de l’URL de destination. L’utilisateur ne peut pas revenir en arrière avec le bouton Précédent du navigateur. | alert('Remplacement de la page... '); window.location.replace('http://lecoursgratuit.com'); |
| toString() | Renvoie une chaîne représentative de l’URL (window.location.toString() renvoie la même chose que window.location.href) | alert('URL actuelle : ' + window.location.toString()); |
Exemple d’utilisation de window.location
Supposons une URL construite selon ce modèle : http://lecoursgratuit.com/index.php?option=compra&moneda=euro&producto=libro1, où le paramètre d’option peut être acheter, vendre ou échanger. Le paramètre monétaire peut être le peso mexicain, l’euro, le peso argentin, le peso colombien, le bolivar, le sol, le peso chilien. Et le paramètre product peut avoir n’importe quelle valeur.
Si nous souhaitons récupérer la valeur du paramètre de devise à l’aide de JavaScript, voici un exemple de code que nous pouvons utiliser en enregistrant le fichier sous le nom example1.html :
<!DOCTYPE html>
<html>
<head>
<title>Exemple lecoursgratuit.com</title>
<meta charset="utf-8">
<script type="text/javascript">
function extractUrlParameter(parameterName) {
var urlParams = new URLSearchParams(window.location.search);
return urlParams.get(parameterName);
}
var currency = extractUrlParameter('moneda');
if (currency) {
alert('Valeur du paramètre de devise dans l\'URL : ' + currency);
} else {
alert('Le paramètre de devise n\'a pas été trouvé dans l\'URL.');
}
</script>
</head>
<body>
<h1>Exemple d'utilisation de window.location</h1>
</body>
</html>Ce code permettra d’extraire et d’afficher la valeur du paramètre de devise de l’URL du site “www.lecoursgratuit.com” dans une boîte d’alerte.
Autres articles
