Avec un peu de JavaScript,
n'oubliez pas de rendre vos pages
plus dynamiques et plus interactives.
Notre volonté est de rendre cette formation de JavaScript,
disponible le plus rapidement possible.
Le lecteur excusera l'imperfection de ce travail en cours de construction
et pourrait nous informer des défauts rencontrés.
Les objets sont des éléments (ou entités) fixement délimités avec des propriétés et souvent aussi avec des fonctions liées à l'objet (méthodes).
Si JavaScript est considéré comme une extension de HTML, cela tient avant tout aux objets prédéfinis qui sont à votre disposition en JS. Ces objets prédéfinis permettent de questionner ou modifier par exemple les éléments distincts d'un formulaire précis d'une page HTML.
A. Quelques exemples de hiérarchie des objets prédéfinis de JS
Chaque objet peut être une fraction de l'objet hiérarchiquement supérieur. C'est pour cette raison que les objets JavaScript sont hiérarchisés. L'objet le plus élevé dans la hiérarchie en JS est l'objet fenêtre (window).
Les fenêtres ont des propriétés comme un titre, une taille etc...
Le contenu d'une fenêtre est le deuxième objet le plus élevé, à savoir le document affiché dans la fenêtre. En règle générale, le document est un fichier HTML. Un tel fichier peut contenir certains éléments définis par des repères HTML, comme par exemple des formulaires (forms), des liens (links), des références de graphiques etc...
Pour de tels éléments subalternes il y a à nouveau des objets spécifiques à JS, par exemple l'objet forms pour des formulaires.
Un formulaire, de son côté, est constitué de différents éléments, par exemple des champs de saisie ('input' de type 'text' ou 'textarea'), des listes de choix ('select' avec les 'option') ou des boutons (buttons) pour envoyer ou interrompre.
En JS, il y a pour cela un objet 'elements', avec lequel vous pouvez adresser des champs distincts et d'autres éléments dans le formulaire.
À côté des objets de JS rangés hiérarchiquement, il y en a qui ne se placent pas directement dans la hiérarchie. Ce sont par exemple les objets pour le calcul de la date et de l'heure, pour des tâches mathématiques et pour le traitement de chaînes de caractères.
Nous essaierons ci-dessous de représenter la hiérarchie de certains objets prédéfinis de JS:
window:
la fenêtre où s'affiche la page consultée quelques propriétés: closed (indique si la fenêtre est fermée), defaultStatus (définit le texte dans la barre de statut du navigateur), frames (tableau contenant les frames présentes dans la fenêtre), innerHeight (hauteur de la zone de contenu visible du navigateur), innerWidth (largeur de la zone de contenu visible du navigateur), name (nom de la fenêtre), opener (accède à l'objet window de la fenêtre popup ouverte avec open()), outerHeight (hauteur totale de la fenêtre), outerWidth (largeur totale de la fenêtre), status (contenu de la barre de statut du navigateur) quelques méthodes: alert() (affiche un message d'information), blur() (retire le focus à la fenêtre), clearInterval() (arrête l'exécution d'un traitement), clearTimeout() (annule le compte à rebours), close() (ferme la fenêtre), confirm() (affiche un message d'information avec une confirmation), focus() (donne le focus à la fenêtre), moveBy(x, y) (déplace la fenêtre à partir de sa position courante), moveTo(x,y) (indique les nouvelles coordonnées de la fenêtre), open(u,n,o) (ouvre une fenêtre), print() (imprime), prompt() (fenêtre permettant à l'utilisateur de saisir une valeur), resizeBy(l,h) (modifie les dimensions de la fenêtre), resizeTo(l,h) (indique les nouvelles dimensions de la fenêtre), scrollBy(x,y) (déplace la barre de défilement = fait défiler la page), scrollTo(x,y) (indique les nouvelles coordonnées de la barre de défilement), setInterval(c,m) (exécute une fonction dans une boucle infinie avec un temps de pause à chaque occurrence jusqu'à ce que le processus soit terminé avec la méthode clearInterval), setTimeout(c,m) (exécute une fonction après un certain délai), quelques sous-objets ou objets enfants:
document:
la page affichée à l'écran quelques propriétés: alinkColor (couleur des liens), bgColor (couleur de fond de page), cookie (chaîne contenant les cookies du domaine), defaultCharset (jeu de caractères), domain (domaine de l'adresse de la page), fgColor (couleur du texte), fileSize (taille de la page en octets), lastModified (date de dernière modification), location (url de la page), mimeType (type de document), protocol (type de protocole de l'url), referrer (adresse de la page d'origine), title (titre de la page), URL (Adresse de la page), URLUnencoded (adresse codée de la page), vlinkColor (couleur des liens visités) quelques méthodes: getElementById() (retourne un objet HTML à partir de son id), getElementsByName() (retourne un objet HTML à partir de son nom), getElementsByTagName() (retourne un tableau d'objets à partir de leur balise), write() (écrit du texte dans le document), writeln() (écrit du texte dans le document) quelques sous-objets ou objets enfants:
forms:
tableau des formulaires présents dans la page affichée, chacun étant un objet avec... quelques propriétés: name (Nom du formulaire), action (Adresse du script de serveur à exécuter), method (Méthode d'appel du script: get ou post), enctype (Type d'encodage du formulaire), target (Destination du retour du formulaire) quelques méthodes: submit (Déclenche l'action du formulaire), reset (Réinitialise les données du formulaire avec les valeurs par défaut) quelques sous-objets ou objets enfants:
button:
checkbox:
elements: tableau de tous les éléments figurant dans un formulaire, chacun étant un objet avec...
file:
hidden:
input: balise générale des différents types d'objets: TEXT, BUTTON, RADIO, CHECKBOX, HIDDEN, PASSWORD, SUBMIT et RESET quelques propriétés à adapter selon le type: name (Nom du champ), type (type du champ text, button, radio, checkbox, submit, reset), value (Libellé ou texte), defaultvalue (Valeur par défaut du champ - utile avec reset), size (Taille du champ), maxlength (Taille maximale du champ de type texte), checked (Case à cocher ou radio bouton coché ou non), disabled (Grisé: modification impossible par le visiteur), readOnly (Lecture seule), class (Nom de la classe de style), style (Chaîne de caractères pour le style) quelques méthodes à adapter selon le type: focus (Donne le focus ou le curseur ou la main), blur (Enlève le focus), click (Simule un clic sur un bouton)
password:
radio:
reset:
select:
submit:
text:
textarea:
images:
tableau des images présentes dans la page affichée quelques propriétés: alt (Infobulle de l'image), complete (Indicateur de fin de chargement), fileSize (Poids de l'image), height (Hauteur de l'image), id (Identifiant de l'image), name (Nom de l'image), src (Adresse de l'image), width (Largeur de l'image)
links:
hyperliens présents dans la page affichée
anchors:
ancrages présents dans la page affichée
history:
sites et pages précédemment visitées quelques propriétés:
length (nombre d'urls stockées dans l'historique) quelques méthodes:
back() (retourne à la page précédente), forward() (retourne à la page suivante), Go() (redirige vers une page de l'historique)
location:
emplacement où la page était située (son adresse URL) quelques propriétés:
hash (ancre de l'url), host (nom de domaine de l'url), hostname (nom de domaine de l'url), href (url complète), pathname (String window.location.pathname), port (numéro de port de l'url), protocol (protocole de communication de l'url), search (chaine des paramètres de l'url) quelques méthodes:
reload() (recharge la page), replace() (charge une page sans l'enregistrer dans l'historique)
navigator:
browser, navigateur ou fureteur utilisé quelques propriétés:
appCodeName (nom de code du navigateur), appMinorVersion (version mineure du navigateur), appName (nom complet du navigateur), appVersion (version du navigateur), cookieEnabled (indicateur booléen sur l'acceptation des cookies), cpuClass (type de processeur), language (langue du navigateur), onLine (indicateur booléen sur la connexion), platform (système d'exploitation), plugins (tableau des plugins installés), systemLanguage (langue du système d'exploitation), userAgent (informations importantes du navigateur), userLanguage (langue du navigateur)
screen:
écran de l'internaute visiteur et résolution (ne pas confondre avec fenêtre et navigateur) quelques propriétés: availHeight (résolution utile verticale), availWidth (résolution utile horizontale), colorDepth (profondeur de couleurs), height (résolution verticale), width (résolution horizontale)
parent:
objet de type window qui pointe sur la fenêtre qui encapsule dans des frames la fenêtre en cours. Si la page en cours n'est pas inclue dans un jeu de frames, l'appel à parent est identique à window. Voir aussi top et frames.
frames:
tableau des frames éventuellement contenues dans la page. Le tableau frames est un Array dont chaque élément est un objet de type window. Si la page ne contient pas de frames, frames est un tableau de longueur nulle.
top:
objet de type window qui pointe sur la fenêtre la plus haute dans la hiérarchie du jeu de frames. Si la fenêtre en cours n'est pas inclue dans un jeu de frames, l'appel à top est identique à window. Voir aussi parent et frames.
HTML
HEAD
TITLE
LINK
SCRIPT
BODY id ="mon_body"
H1 id ="mon_h1"
UL id ="mon_ul"
LI id ="mon_li"
UL
LI
LI
LI
DIV
id ="mon_div"
P id ="mon_p"
EM
INPUT id ="mon_input"
B. Quelques exemples d'utilisation d'objets prédéfinis JS
Avant d'aborder quelques objets prédéfinis de JS (chap. 26 à 32 Tableaux, chap. 34 Maths, chap. 35 Date, chap. 36 à 38 Formulaires) et avant de montrer comment créer ses propres objets (chap. 24 et 25), nous nous proposons ici de vous illustrer l'utilisation de quelques-uns parmi les nombreux objets JS.
Ceux qui veulent en savoir plus peuvent toujours "Googler" (javascript objet methode window) s'ils veulent en savoir plus sur les méthodes applicables à l'objet javascript 'window'.
créer et ouvrir une fenêtre popup
À titre d'exemple, illustrons une utilisation. Vous souhaitez ouvrir une fenêtre (parfois appelée popup, parfois aussi à usage limité dans les récents navigateurs... pour éviter les excès de fenêtres popup pour des publicités).
Vous avez lu la méthode open relative à l'objet window dans la liste ci-dessus: open(u,n,o) (ouvre une fenêtre). Il vous suffira de définir une URL (u), donner un éventuel nom (n) et une série d'options possibles (o) et vous voilà prêt à créer cette fenêtre:
var url="http://cuy.be";
var config="toolbar=no, menubar=no, location=no, directories=no, status=no, resizable=yes, scrollbars=yes, width=600, height=300";
window.open(url,'',config);
Essayez ici :
connaître l'operating system de l'internaute visiteur de votre page
afficher la résolution d'écran de l'internaute visiteur de votre page
copyleft
MERCI