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
hrefRenvoie une chaîne avec l’URL complète.alert('URL : ' + window.location.href);
protocolRenvoie le protocole URL, généralement http ou https.alert('Protocole : ' + window.location.protocol);
hostRenvoie 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);
hostnameRenvoie le domaine ou le serveur.alert('Nom d'hôte : ' + window.location.hostname);
pathnameRenvoie le chemin à l’exclusion du nom de domaine ou du serveur.alert('Chemin : ' + window.location.pathname);
searchRenvoie la chaîne qui représente les paramètres qui existent dans l’URL.alert('Paramètres : ' + window.location.search);
hashRenvoie # 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);
originRenvoie une chaîne représentant la racine du site Webalert('Origine : ' + window.location.origin);

Méthodes de l’objet Location

MéthodeUtilité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

Tout ce que vous devez savoir sur...
JavaScript est l'un des langages de programmation les plus populaires...
Read more
Javascript arrondi à 2 décimales - Guide...
L'arrondi à deux décimales est une opération courante lors du...
Read more
Boîtes de dialogue : Alert, Confirm, et...
Cet article explore chacun des types de boîtes de dialogue...
Read more

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *