 |
Vendredi 19 avril 2024 - 03:14 |
| Translate |
|
| Rubriques |
| Réseaux sociaux |
|
| Liste des jeux Amiga |
|
| Trucs et astuces |
|
| Glossaire |
|
| Galeries |
|
| Téléchargement |
|
| Liens |
|
| Partenaires |
|
| A Propos |
|
| Contact |
|
|
|
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.
La hiérarchie de ces objets
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 appliquettes 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.
- 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.
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 : en-tête USER-AGENT.
- mimeType[] : tableau des types MIME reconnus.
- plugins[] : tableau des plugins (greffons) installés.
javaEnabled() : permet de savoir si le compilateur Java est activé. Cette fonction est utile si l'on utilise des appliquettes (applets) Java. On peut grâce à elle, renvoyer le navigateur vers une page avec/sans appliquettes 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 :
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.
|
