Un objet très pratique avec JavaScript… découvrez l’objet link. Il vous permet de modifier en live tous les liens d’une page web, sans la recharger. Vous pouvez également lister tous les liens et leurs url.
Tout est dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment modifier les liens d’une page web avec JavaScript et link
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours vous allez découvrir l’objet link, oui rappelez-vous link pour créer des liens, et vous pouvez les créer directement avec JavaScript.
L’objet link
Alors comment ça se passe ? il est possible avec l’objet link, de compter, de lire, et de modifier tous les liens qui son présent dans une page Web, vous avez les propriétés suivantes :
Name c’est pour le nom du lien,
length c’est pour le nombre de liens dans la page,
target ça défini la cible d’un lien, c’est-à-dire self, blank, que la page s’ouvre dans la même page, ou ça remplace la page actuelle, puisque ça ouvre un pop-up, une nouvelle page Internet, et le texte qui correspond à la présentation du lien vous avez toujours un texte qui pointe vers un lien,
X et Y c’est les positions horizontales et verticales d’un lien, pour le positionner ou vous voulez sur la page Web.
Un exemple de code source, ça affiche le nombre de liens dans une page Web, avec leurs texte et leurs URL, qu’est-ce que vous faites ? Tout simplement au chargement de la page vous appelez sur l’événement onload, les événements, je vous renvoie au cours dédié aux événements JavaScript, si vous ne savez pas les utiliser, donc onlead ça appellera directement la fonction seeLinks, il y a un cours aussi sur toutes les fonctions, comment créer des fonctions, à quoi elles servent, donc consultez le cours sur les fonctions JavaScript si c’est nécessaire, donc au chargement de la page ça va appeler seeLinks et la fonction seeLinks qu’est-ce qu’elle fait ? Elle va nous dire il y a documents.links objet document qui fait référence à un cours JavaScript que je vous ai donné, il y a quelques temps, donc étudiez l’objet document, très important, il y a sur le côté une rubrique JavaScript avec tous les cours JavaScript, donc vous pouvez les retrouvez très facilement, donc document.links.lenght, ça va retourner le nombre de liens présents dans la page, après on fait une boucle for, document.links.liens, link c’est un tableau, donc une boucle for, rappelez-vous le cours sur les boucles, les boucles for, while, do while, pareil sur le côté-là, dans la catégorie JavaScript il y a le cours sur les boucles, je vous invite à le consulter, si ce n’est pas déjà fait, et donc on fait un document.write le texte du lien i+1, document.links entre cochets i, donc l’indice, vu que link c’est un tableau, l’indice zéro pour le premier lien, un pour le deuxième lien ect. et on récupère le text.txt. Après pour la cible du lien, on fait document.links avec l’indice i.target pour l’URL cible. Et là ça va afficher tout simplement, dans cette page HTML il n’y a que deux liens, as3-facile.com et dev-facile.com, pour as3 et dev facile, dans vos pages de vos applications à vous, de votre site Internet, il y a peut-être cinq, six liens, ça va vous permettre de lister les liens, de les travailler, par exemple automatiquement avec une fonction JavaScript sur le body.unload ou sur un clique, vous appelez votre fonction JavaScript qui va pour tous les liens automatiquement, les mettent en Target, sell pour les ouvrir dans la même page ou blank pour les ouvrir dans une nouvelle page, tout ça automatiquement.
Votre plan d’actions !
Codes sources pouvant VOUS intéresser :
C’est à ça que peut servir l’objet link, très intéressant pour faire des traitements JavaScript automatisés sur tous les liens d’une page. Ça vous fait un objet supplémentaire pour créer des interactions avec l’utilisateur en fonction de ses actions, de votre site web, retrouvez comme d’habitude un exemple de code source sous ce cours vidéo, si vous avez des questions, posez-les également sous ce cours vidéo et moi je dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source JavaScript
Voici un exemple de code JavaScript pour afficher les liens d’une page web.
Téléchargement du code source Exemple avec link en JavaScript
Cliquez ici pour télécharger le code source Exemple avec link en JavaScript
Comment utilisez-vous link ?
Dites-moi, dans les commentaires, comment vous utiliser les fonctionnalités de link avec JavaScript dans vos sites web.