Obligement - L'Amiga au maximum

Lundi 27 mars 2017 - 14:32  

Translate

En De Nl Nl
Es Pt It Nl


Rubriques

 · Accueil
 · A Propos
 · Articles
 · Galeries
 · Glossaire
 · Hit Parade
 · Liens
 · Liste jeux Amiga
 · Quizz
 · Téléchargements
 · Trucs et astuces


Articles

 · Actualité (récente)
 · Actualité (archive)
 · Comparatifs
 · Dossiers
 · Entrevues
 · Matériel (tests)
 · Matériel (bidouilles)
 · Points de vue
 · En pratique
 · Programmation
 · Reportages
 · Tests de jeux
 · Tests de logiciels
 · Tests de compilations
 · Articles divers

 · Articles in english
 · Articles in other languages


Twitter

Suivez-nous sur Twitter




Liens

 · Sites de téléchargements
 · Associations
 · Pages Personnelles
 · Moteurs de recherche
 · Pages de liens
 · Constructeurs matériels
 · Matériel
 · Autres sites de matériel
 · Réparateurs
 · Revendeurs
 · Presse et médias
 · Programmation
 · Développeurs logiciels
 · Logiciels
 · Développeurs de jeux
 · Jeux
 · Autres sites de jeux
 · Scène démo
 · Divers
 · Informatique générale


Jeux Amiga

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Trucs et astuces

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Glossaire

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Partenaires

Annuaire Amiga

Amedia Computer

Relec

Hit Parade


Soutien

N'hésitez pas à soutenir le projet Obligement



Contact

David Brunet

Courriel

 


En pratique : HTML - les objets importants du JavaScript
(Article écrit par Philippe Gaultier et extrait d'Amiga News - juillet/août 1998)


Les objets sont la base du JavaScript, ils servent à dialoguer avec le navigateur qui exécutera les scripts. Mais, pas de panique, ce sont des objets très simples, contrairement au C++. On peut grossièrement les comparer aux structures du C.

Les objets au sens large

Il est important de comprendre le fonctionnement d'un objet. Un objet a des propriétés et/ou des méthodes qui vont nous permettre de travailler.

Les propriétés d'un objet

Les propriétés d'un objet sont l'ensemble des attributs qui permettent de le décrire. Ces propriétés vont permettre au script d'agir et de manipuler les objets du document HTML dans lequel il est présent. On accède à une propriété "prop" d'un objet "obj" de la manière suivante :

prop.obj

Les méthodes d'un objet

Les méthodes d'un objet sont en fait les fonctions qu'il intègre et qui n'ont pas de sens en dehors de cet objet. Par exemple, supposons qu'il existe un objet "document". Une méthode pourrait être "ecrire" qui prend comme argument une chaîne de caractères.

Pour appeler la fonction "ecrire" de l'objet "document", il suffira donc de procéder de la façon suivante :

document.ecrire("J'écris dans l'obj et document!")

La hiérarchie d'un objet

La hiérarchie d'un objet permet de le situer dans une imbrication d'objets. Ainsi, par exemple, un objet "document" contient un objet "cadretexte" qui lui-même contient un objet "obj". Pour utiliser "obj" il faut y accéder de la façon suivante :

document.cadretexte.obj

Les objets natifs de JavaScript (ou les objets intégrés)

Les objets reconnus par JavaScript
  • anchor : un ancrage HTML (<A HREF></A>).
  • button : un objet HTML de type "button" dans un formulaire (Cf. : JavaScript 1).
  • checkbox : un objet HTML de type "checkbox" dans un formulaire.
  • Date : un ensemble de méthodes pour manipuler les dates.
  • document : la page HTML.
  • form : un formulaire.
  • hidden : élément de type "hidden" dans un formulaire.
  • history : l'historique des sites visités.
  • link : un lien HTML.
  • location : une URL.
  • Math : un ensemble de méthodes et de constantes mathématiques.
  • Navigator : le navigateur lui-même.
  • password : élément de type "password" (mot de passe) dans un formulaire.
  • radio : élément de type "radio" (bouton radio) dans un formulaire.
  • reset : élément de type "reset" (réinitialisation) dans un formulaire.
  • select : une sélection de texte dans un objet HTML de type "textarea" ou "input".
  • String : un ensemble de méthodes pour le type "string"
  • submit : élément de type "submit" dans un formulaire.
  • text : élément de type "text" dans un formulaire.
  • textarea : élément de type "textarea" dans un formulaire.
  • window : la fenêtre courante du navigateur.
Contrairement à ce que l'on aurait pu penser, il n'y a pas d'objet "fichier". Cette restriction permet de protéger les données de l'utilisateur.

La hiérarchie de ces objets

HTML

Par contre, il existe d'autres objets qui n'ont pas de place spécifique dans la hiérarchie. Nous pourrons donc nous y référer directement. Ces objets sont : array, Date, Math, navigator, option, String.

Nous avons donc découvert les objets qui composent JavaScript. Maintenant, nous allons commencer à les détailler.

L'objet document

Si JavaScript était une pièce de théâtre, l'objet "window" constituerait le théâtre, l'objet "document" la pièce, et les autres tiendraient les rôles. Il est donc très important de connaître ses caractéristiques même si nous n'en utilisons qu'une toute petite partie.

Les propriétés de l'objet document

Nous avons en tout 17 propriétés plus ou moins utiles. La plupart correspondent aux paramètres de la balise <BODY> du document HTML, nous passerons rapidement dessus pour nous concentrer sur les autres.
  • alinkColor : équivalent à ALINK.
  • anchors[] : tableau qui contient les ancrages.
  • applets[] : tableau qui contient les Applet Java.
  • bgColor : équivalent à BGCOLOR.
  • cookie : chaîne de caractères qui reflète le contenu du fichier cookie.txt.
  • embeds[] : tableau qui contient les greffons (EMBED).
  • fgColor : équivalent à TEXT.
  • forms[] : tableau qui contient les formulaires.
  • images[] : tableau qui contient les images.
  • lastModified : date de dernière modification du document.
  • linkColo : équivalent à LINK.
  • links[] : tableau qui contient les appels de liens.
  • location : synonyme de la propriété URL vouée à disparaître (Cf. plus bas).
  • referrer : adresse du document ayant appelé celui en cours.
  • title : équivalent à TITLE.
  • URL : chaîne de caractère représentant l'adresse du document en cours.
  • vlinkColor : équivalent à VLINK.
Les méthodes de l'objet document
  • close() : elle permet de refermer (au sens entrée/sortie) le document en cours d'utilisation.
  • open(arg) : elle ouvre un flot de sortie vers un document. "arg" est une chaîne de caractères représentant un type MIME. Par défaut, "text/html" est utilisé. exemple : "text/plain","image/gif"...
  • write(arg) : "arg" est converti si besoin est, en chaîne de caractères et redirigé vers le document.
  • writeIn(arg) : identique à write() mais rajoute un caractère à afficher à la fin de la chaîne ; or, ce caractère est ignoré par les navigateurs. Il est donc inutile de s'en servir.
Un peu de pratique ?

En fait, pour pouvoir mettre en pratique l'objet document, nous avons besoin de connaître de nouvelles balises HTML tels que <FRAMESET>, <FORMS>... Ainsi, je vous décrirai l'objet document et ses applications au fur et à mesure que Denis Bucher avancera dans sa rubrique HTML.

Encore un peu de théorie, l'objet navigator

Propriétés de l'objet navigator
  • appCodeName : nom de code.
  • appName : nom réel.
  • appVersion : informations concernant la version.
  • userAgent : entête USER-AGENT.
  • mimeType[] : tableau des types MIME reconnus.
  • plugins[] : tableau des plugins (greffons) installés.
Méthode de l'objet navigator

javaEnabled() : permet de savoir si le compilateur Java est activé. Cette fonction est utile si l'on utilise des Applets Java. On peut grâce à elle, renvoyer le navigateur vers une page avec/sans Applets Java, suivant l'état du compilateur Java.

Qui peut bien visiter notre page ?

Une des premières choses que l'on apprend en JavaScript, c'est reconnaître le navigateur client. En effet, tous les navigateurs "conformes" à la norme JavaScript 1.1 ne reconnaissent pas certaines fonctions. Ainsi, suivant le navigateur nous utiliserons différentes fonctions.

<HTML>
<HEAD>
<TITLE>Quel est le navigateur utilisé</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
window.document.write("appCodeName : "+navigator.appCodeName+"<BR>")
window.document.write("appName : "+navigator.appName+"<BR>")
window.document.write("appVersion : "+navigator.appVersion+"<BR>")
window.document.write("userAgent : "+navigator.userAgent+"<BR>")
</SCRIPT>
</BODY>
</HTML>

Voici ce que cela donne sur AWeb et Internet Explorer :

HTML

HTML

Passons sur les balises habituelles pour examiner le script proprement dit.

Le script est une succession de "window.document.write". La méthode write() de l'objet window.document window.document.write(chose) permet de rediriger tout ce qui est contenu dans chose, vers le flot d'entrée de la page HTML. La partie intéressante se situe dans "chose". Ici, nous utilisons les propriétés de l'objet "navigator" pour connaître le navigateur utilisé.

Utilisation des résultats

Pour tester le navigateur client, nous devons impérativement utiliser une structure de test. Pour ceux qui connaissent le C/C++ l'équivalent d'un "switch" s'impose. Malheureusement, "switch" n'a pas d'équivalent en JavaScript, nous utiliserons donc une succession de "IF", "THEN", "ELSE".

L'instruction conditionnelle IF THEN ELSE

Une instruction conditionnelle soumet l'exécution d'une instruction au résultat d'un test et prend la forme :

if (condition)
{
   bloc d'instruction si la condition est vraie
}
else
{
   bloc d'instruction si la condition est fausse
}

A présent, on utilise tout ce que l'on a vu !

Nous allons afficher à l'écran le navigateur utilisé.

<HEAD>
<TITLE>Quel est le navigateur utilisé 2<TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
function quel_nav()
{
   test = navigator.appVersion
   if (test == "4.0 (compatible; MSIE 4.0; Windows 95)") 
   {
      alert("Micro$oft IE 4") 
   }
   else 
   {
      if (test == "3.1 (Amiga; I)")
      {
         alert("AWeb V3.1")
      }
      else 
      {
         alert(navigator.appName)
      }
   }
}
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="Quel navigateur" onclick="quel_nav()">
</FORM>
</BODY>
</HTML>

Étudions ce petit script. Tout d'abord, nous sauvegardons "navigator.appVersion" dans la variable "test". Ensuite, on compare "test" avec des données que l'on connaît, puis on affiche le résultat souhaité.

Par contre, je ne peux pas vous donner les valeurs génériques de "appxxxxx" car elles varient suivant la version du navigateur et sa provenance (il n'y a pas de format standard). Le mieux pour les récupérer, est d'exécuter notre premier script qui retourne toutes les valeurs existantes sur chaque navigateur, puis de faire un copier-coller dans votre script.

Optimisation du script

Un problème majeur est posé par le script précédent : il faut le recopier pour toutes les fonctions. Nous allons donc créer une fonction qui nous retourne une valeur ; ce sera plus simple ainsi, à utiliser.

<HEAD>
<TITLE>Quel est le navigateur utilisé 3</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
function quel_nav()
{
   test = navigator.appVersion
   if (test == "4.0 (compatible; MSIE 4.0;.Windows 95)")
   {
      return 1
   }
   else
   {
      if (test == "3.1 (Amiga; I)")
      {
         return 2
      }
      else
      {
         return 0
      }
   }
}
function alert_nav(navi) 
{
   if (navi == 0)
   {
      alert("Brouteur inconnu")
   }
   if (navi == 1)
   {
      alert("M$IE 4")
   }
   if (navi == 2)
   {
      alert("Aweb 3.1")
   }
}
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="Quel navigateur" onclick="alert_nav(quel_nav())">
</FORM>
</BODY>
</HTML>

Nous avons donc une fonction générique qui retourne une valeur suivant le navigateur. On réduit notre nombre de lignes de code donc le temps de chargement de la page. Cette fonction est la même que précédemment, mis à part que nous avons remplacé le code à exécuter par return x où :

x=0 brouteur inconnu.
x=1 MSIE 4.
x=2 AWeb 3.1.

Il est vrai que sur un exemple comme celui-ci, l'optimisation ne se voit pas. Par contre, sur une page qui exécute plusieurs fonctions spécifiques à chaque navigateur, la différence est réelle.

Voir aussi l'article de Denis Bucher dans ce numéro au sujet des formulaires dans la série. J'attends vos questions, vos remarques, ainsi que vos désirs pour le prochain article sur le JavaScript.

[Retour en haut] / [Retour aux articles]