Objets pré-définis,
Objets Navigateur
Tutoriaux, Sommaire
JavaScript
Nous traiterons ici des objets dépendant du navigateur,
(Netscape ou Internet Explorer), générés pour éditer les pages Internet.
Le premier objet est l'objet window, cet objet contient tout
les autres objets nécessaires à la consultation de pages. Un objet window est
créé par le navigateur pour chaque page ou frame, (les frames sont des pages
affichant de multiple fenêtres dans la même page). Vous pouvez par
programmation créer des objets windows, créant ainsi des pages dans le
navigateur.
Chaque objet window contient entre autres un objet document
qui lui même contient tous les objets générés par le code Html.
On accède à l'objet document par la syntaxe,
window.document
Une des méthodes de l'objet document permet d'écrire dans la
page au moment du chargement de celle-ci,
window.document.write("Ceci est
un commentaire")
Jusqu'à présent nous avons écrit les script avant le tag
</head>, avant le corps de la page, (<body></body>), ceci
n'est pas une obligation, en fait le script fait effet à l'endroit où il est
inséré dans la page.
Pour que cette instruction s'effectue, elle doit être incluse
entre les tags <script></script>. Elle génère une ligne de texte
normale, qui en Html serait écrite après le tag Body, le script sera donc
inséré après le tag Body comme vous pouvez le voir dans la forme ci-dessous.
L'objet document étant unique dans l'objet window, on peut simplifier la
syntaxe en,
document.write("Ceci est un commentaire")
Comme vous pouvez le constater en exécutant la forme
ci-dessous, le contenu de la page affichée dans la fenêtre est modifiée.
On peut formater le texte passé à une
méthode write avec toutes les instructions html. Exemple,
document.write('<font size="+1"
color="red">Ceci est un commentaire</font>') Appliquer
à la forme ci-dessus. Le texte de la méthode write est enclos entre des
simples apostrophes car le texte comporte des doubles apostrophes
Exercice :
Passer le texte de la méthode write en gras, (<b>
</b>). Corrigé.
Ecrire dans la méthode write,
Suivez la flèche, suivit de deux
sauts de lignes, <br> et insérez l'image images/flecheD.gif Corrigé.
Vous pouvez modifier tout les attributs html de la page, par
exemple le tag body.
Exercice, dans la forme ci-dessous,
supprimez le tag <body>
écrire à l'intérieur des tags
script, un autre document write, précédent celui existant contenant,
<body
background="images/lighttex.jpg" text="maroon">
nous ajoutons une image de fond et
modifions la couleur de texte par défaut, (marron).
Corrigé.
On peut englober une plus grande partie du Html d'une page,
à titre d'exemple, modifions le titre, (<Title>), de la page. pour cela
nous écrirons un troisième document.write ayant en argument le code html de
<title> jusqu'à </head> inclus.
Exercice, 
écrivez le write.
Corrigé.
Vous voulez personnaliser une page en fonction du sexe de
l'internaute, vous voulez changer la couleur de fond, bleu pour les hommes, rose
pour les femmes et jaune pour les autres, (extraterrestres ?), vous éditerez
dans le corps de la page Bonjour, suivit de Mr , Mme ou M?? deux lignes plus
bas. Bonjour sera formaté en <H3>.
Faire un organigramme comportant,
La saisie du sexe, M ou F, (boite prompt)
L'assignation de deux variables,
couleur, (bleu =>aqua, rose=>pink, jaune=>yellow) et polit, (Mr, Mme,
M??)
Ecrivez une méthode write, écrivant
<body bgcolor=
Ecrivez une méthode write, écrivant
Bonjour format H3 suivit de deux retours à la ligne et de la formule de
politesse.
Analyse
Corrigé
de l'organigramme.
Corrigé du
programme.
Si nous prenons l'exemple du stock de pizzas et de sandwichs
que nous avons vu à la leçon précédente, il nous aurrait été beaucoup plus
utile d'éditer les en cours du stock sur une page que dans un message alert().
Dans la formr ci-dessous, vous trouverez le programme de la
page précédente, amputé de son message alert(). Ce script est maintenant
inséré entre les tags <body></body>, vous pouvez vérifier en
l'exécutant que nous éditons sur la page l'en-tête du tableau.
Ecrivez une boucle chargeant dans une chaîne de caractères
les différentes données disponible pour les pizzas, (n'oubliez pas les retours
à la ligne Html).
Utilisez pour l'instant le même formatage que pour le message
alert() du programme de la page précédente,
produits["Pizzas"][0][0] + " Prix " +
produits["Pizzas"][0][1] + " Stock " +
produits["Pizzas"][0][2]
Ecrivez cette chaîne de caractères dans la page par un
document.write.
Aide
Corrigé du
programme.
Exercice, faire une autre boucle pour éditer les sandwichs.
Corrigé
L'affichage obtenu est utilisable mais pas très pratique, il
serait plus fonctionnel d'éditer ces données dans une table Html. Mode
opératoire, créer une table en html et éditez en la source, ensuite passez
par des document.write tous les éléments nécessaires, dans le bon ordre. Corrigé.
