L’objet document est un pilier du langage JavaScript. Avec document, proposez des fonctionnalités très pratiques et modifiez une page HTML en direct, sans recharger la page !
Tout est dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser l’objet document avec JavaScript
Bonjour à tous et bienvenu sur Développement Facile.
Je continue de vous expliquer les différents objets JavaScript, ceux que vous allez utiliser dans votre code JavaScript. Cette fois ensemble, nous allons voir l’objet document, l’objet document c’est un pilier de JavaScript vous allez forcément l’utiliser un jour ou l’autre et surtout je pense, dans votre premier projet de site Internet dynamique, interactif avec les utilisateurs.
Objet document : les propriétés
C’est parti pour l’objet document, donc l’objet document ça correspond à la page HTML elle-même, c’est comme je vous le disais un objet c’est souvent manipulé en JavaScript, voici ces propriétés :
alinkColor ça permet de définir la couleur des liens activés,
linkColor la couleur des liens non encore visités,
links c’est un tableau qui contient tous les liens du document,
vlinkColor c’est la couleur des liens des pages visitées,
anchor ça contient les ancres du document,
applets c’est tous les applets java,
bgColor c’est la couleur de fond du document,
cookie pardon, ça permet de créer un cookie avec des informations placées sur l’ordinateur du visiteur, si vous avez les cours sur le langage PHP, c’est la même chose, c’est exactement le même principe de fonctionnement, je ferais un cours javascript pour vous apprendre à utiliser des cookies avec javascript,
plugins c’est un tableau qui contient tous les plusings du navigateur de l’utilisateur,
domain, c’est le nom de domaine qui affiche la page html donc pratique pour récupérer le nom de domaine courant,
embeds c’est un tableau qui contient tous les objets incorporés, donc comme flash player, pdf, etc.,
fgColor c’est la couleur du texte utilisé dans la page html,
forms c’est un tableau qui contient tous les formulaires du document, pour accéder à un formulaire forms crochet zéro pour le formulaire 1, crochet 1 pour le deuxième formulaire etc.,
images c’est un tableau qui contient toutes les images du document,
lastModified c’est la date de la dernière modification du document,
referrer vous en avez forcément entendu parler, on en parle souvent, c’est l’url de provenance de l’internaute, donc c’est url qui a appelé la page actuelle, ça peut être un autre site, le même site, très important pour effectuer un historique, le chemin parcouru par l’internaute jusqu’à cette page internet,
title c’est le titre de la page html,
url c’est l’url de la page web actuelle.
captureEvents ça permet d’écouter un événement pour le document actif,
close vous l’avez déjà vu ça permet de fermer le document actif, pas la page html, ça ferme la page html,
getSelection c’est le texte sélectionné dans le document actif,
handleEvent ça active la capture, en gros, l’écoute de l’événement spécifié,
home ça va afficher la page d’accueil,
open ça va ouvrir un document, pas active excusez-moi pour l’erreur ça va ouvrir un document,
releaseEvents c’est le nom d’événement qui n’est plus écouté,
write ça va permettre d’écrire dans le document html, donc ça vous permet de modifier sans charger la page html, vous pouvez modifier des éléments, rajouter des éléments supplémentaires dans la page html,
writeln c’est la même chose que write mais ça ajoute le caractère newline donc pour faire des retours à la ligne pour écrire le texte sur plusieurs lignes,
Objet document
Voici un exemple typique javascript pour afficher la date de dernière modification d’une page html, donc sur le body.unload, sur l’événement unload, au chargement de la page, vous appelez la fonction javascript de getclassemodif, récupérez la date de la dernière modification, vous récupérez document.last modified, vous faites un new date avec date modif, ça va vous renvoyer une date, formater un objet date, vous récupérez le mois, le jour, l’heure, l’année, les secondes, rappelez-vous write documents.write, ça va vous permettre d’écrire page modifiée le jour, mois, année, heure, minutes, secondes, voilà vous avez affiché la date de dernière modification de votre page html, sans la recharger grâce à javascript.
Vous pouvez également empêcher le clic droit de la souris, sachez que c’est des script qui comporte des détails, je ne vous conseil pas d’empêcher le clic droit, par contre que je vous conseille c’est oui vous pouvez empêcher le clic droit, et modifier le menu qui apparait au clic droit de la souris, c’est très intéressant à faire en JavaScript, ça vous fera un bon exercice, vous empêchez le clic droit et vous changez le menu, google maps le fait, plusieurs sites internet changent le clic droit de la souris et le menu. Pour désactiver le clic droit, sur une image oncontexte menu vous appelez la fonction disabledClicRight, et à chaque fois que l’utilisateur voudra afficher le menu contextuel ça va appeler la fonction disabledClicRight vous faites un alerte, une boite de dialogue, le clic droit est désactivé, et vous faites un return. Dans cette fonction disabledClicRight vous pouvez mettre les instructions javascript que vous souhaitez, donc la création de votre menu personnalisé, votre menu contextuel personnalisé du clic droit, etc. laissez cours libre cours à votre imagination.
Objet date : les méthodes
window location, rappelez-vous location.href, je vous ai dit que ça permettait de détecter des redirections en javascript, voici un exemple tout simple. Vous utilisez documents location.href, vous mettez l’url vers la page web que vous souhaitez, et ça effectuera une redirection, si vous utilisez set timeout vous pourrez faire une redirection d’une page web automatiquement au bout d’un certain nombre de secondes, très intéressant et à utiliser, si vous en avez besoin, si vous avez besoin d’effectuer des redirections.
Votre plan d’actions !
Amusez-vous avec l’objet document, il contient tout un tas de méthodes et de propriétés, il est vraiment très utilisé en javascript pour récupérer différents éléments, des formulaires, des champs de texte, de la page, pour modifier des éléments, rajouter des éléments dans la page html, tout ça sans rechercher la page, en direct web 2.0, comme on dit, retrouvez un exemple de code source directement sous cette vidéo, si vous avez des questions posez-les également sous ce cours vidéo et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source JavaScript
Voici un exemple de script JavaScript pour désactiver le clique droit de l’internaute.
Téléchargement du code source Exemple stop clique droit JavaScript
