• les tableaux : tableau[0], tableau[1]
JavaScript • les tableaux associatifs : X["Poitier"] ,
Y["Poitier"] qui ont donné tant de plaisir aux
Perliens et TCLiens!
1. Présentation
La typage des données étant assez faible, une variable
Si le langage Java impose le téléchargement de déclarée dans un type peut être utilisée dans un autre
classes, c'est à dire de programmes précompilés type sans que de message d'erreur n'apparaisse.
depuis le serveur, JavaScript provoque l'exécution de Netscape risque de ne pas supporter et de provoquer
programmes non compilés mais interprétés et une erreur, mais personne ne vous dira exactement
contenus dans le corps de la page HTML. pourquoi.
Alors que Java fut proposé par SUN et ensuite adopté JavaScript convertit automatiquement les entiers en
par Netscape 2.0 , Javascript n'est compris que par chaînes de caractères, ce qui vous permet de
Netscape et par Internet Explorer V3.0. concaténer des entiers avec des chaînes de caractères
A la fin de l'année 1995, Netscape représentait 80% pour donner finalement une chaîne.
du marché des navigateurs, à la fin de l'année 1996 Par exemple
cette part sera vraisemblablement de 50%, mais sur y = 50 + "FHT"
PC on peut penser que 90% des navigateurs assigne à y la chaîne "50 FHT".
comprendront JavaScript. Certains suggèrent La déclaration
d’utiliser JavaScript pour ce qui est simple, Java pour var nom = valeur
ce qui est simple ou compliqué. permet de déclarer une variable nom initialisée avec
Pour passer des considérations marketing aux la valeur correspondante et du type de la valeur.
considérations techniques, revenons sur le fait que Les tableaux, jusqu'à la version 1.1, doivent être
JavaScript est interprété là où Java est compilé. Ceci construits par invocation du mot clé new en donnant
a plusieurs implications : la taille du tableau; à partir de la version 1.2 ils
• le code Java est protégé des actes de copie peuvent être défini de façon littérale sous la forme :
frauduleuse, Tableau = [ element1, element2, element3 ]
• le code JavaScipt est moins typé donc moins
robuste mais plus accessible à des non 2.1 Types prédéfinis
informaticiens. String
• JavaScript est accessible à des auteurs de pages Le fait d'assigner une chaîne de caractères à une
HTML alors que Java est réservé à un public variable déclare la variable de type String.
plus professionnel. var chaine = "Bonjour vous!"
Les principales sources d'information sur JavaScript créé un objet appelé chaine. Cet objet peut être :
sont aujourd'hui : • mis en majuscule par la procedure toUpperCase
• la FAQ [www.freqgrafx.com/411/jsfaq.html] (par exemple : chaine.toUpperCase () )
JavaScript (en anglais) • être un texte HTML avec tous les atributs
• la newsgroup comp.lang.javascript possibles
• la page Yahoo relative à JavaScript Math
Ajoutons [www.essex1.com/people/timothy/js - Les objets mathématiques permettent de gérer les
index.htm] qui contient un grand nombre d'exemples constantes et les fonctions.
de programmes en JavaScript. Par exemple :
• Math.PI désigne le nombre PI.
2. Les mots du langage • Math.sin(1.50) est le sinus de l'angle 1.50
Les lignes commençant par // sont des commentaires exprimé en radian.
destinées à éclairer le code. Date
Plusieurs lignes peuvent être mises en commentaire si L'objet Date permet de manipuler date et heure dans
elles sont encadrées par les symboles /* ..*/. votre application.
Ajoutons enfin que le langage JavaScript fait la La date est le temps écoulé en milliseconde depuis le
différence entre les majuscules et les minuscules. 1 er janvier 1970 et la création d'une nouvelle date se
Java comprend les types de données suivants : fait par une déclaration du type :
• les nombres : 2, 2.90, 314E-2 . Ils peuvent être Nom = new Date(parametres)
en base 10, 16 (0x.. ou 0X..) ou 8 (commençant Les valeurs que peut prendre le paramètre sont :
par 0). Les réels flottants peuvent contenir un • rien : donne la date et l'heure courante
point décimal, un exposant (E) • une chaîne de caractères sous la forme month
• les booléen : true ou false day, year hour:min:sec (December 25, 1995
• les chaînes de caractères : "coucou" ou 13:30:00)
'coucou'. Les caractères spéciaux peuvent être • des entiers : 95, 11, 25 , 13, 30 , 00
utilisés dans les chaînes ( \b backspace, \f form Les valeurs omises sont initialisées à la valeur zéro. Il
feed , \n new line , \r CR, \t tabulation). Le est aussi possible de transformer des valeurs en date :
caractère \ permet d'insérer une double quote • setxxx : pour transformer des entiers en date
dans une chaîne.
• getxxx : pour transformer en date et heure des • ||
objets date • &&
• toxxx : pour retourner une chaîne de caractères • |
correspondant à l'objet date • ^
Par exemple MaDate = new Date • &
("Novembre 24, 1961") permettra • == !=
d'utiliser MaDate.getDay () pour • < <= > >=
retrouver la valeur 24.
• << >> >>>
Pour leurs valeurs numériques, les secondes et les
minutes vont de 0 à 59, les heures de 0 à 23, les jours • +-
de la semaine de 0 à 6; les jours du mois de 1 à 31, • */%
les mois de 0 à 11 et les années sont décomptées • ! ~ - ++ --
depuis 1900. • call, member () [] .
A partir de la version 3 de Nestcape, JavaScript
2.2 Les variables permet d'évaluer des expressions dans les instructions
Les variables commencent par des lettres ou par le de contrôle.
caractère souligné, dans le reste de l'identifiant des Ceci se fait en mettant le caractère & devant
valeurs décimales sont autorisées. l'expression et en la terminant par un ;. L'expression
Les noms en minuscule ou en majuscule sont ainsi évaluée peut être mis entre accolades pour
différents. s'assurer de la portée des opérateurs.
Par exemple, "&{100*10};" vaudra 1000. Ces
2.3 Les expressions
expressions évaluées peuvent être utilisées à droite
Les expressions du langage JavaScript sont de trois d'un test de condition avec les opérateurs ==, < ou >.
ordres :
• arithmétiques : opérations sur les entiers, les 4. Instructions de contrôle
réels. Les instructions for
• sur les chaînes de caractères L'instruction for permet de répeter une
• booléennes ou logiques séquence d'instructions tant qu'une
Les expressions conditionnelles condition est vraie; elle peut prendre
(condition) ? val1 : val2 : évalue la deux formes :
condition et exécute val1 si vrai, ou • La condition de boucle, prend une valeur initiale,
val2 si faux. une valeur de fin et un pas d'incrément.
Exemple : message = ( fin = true ) ? La syntaxe est la suivante :
"bonjour" : "au revoir" for ([expression initiale];
[condition]; [expression finale]) {
3. Opérateurs instructions
Généralités }
Comme en C ou en Java les opérateurs suivants sont Exemple :
valides : + (adition), - (soustraction) , * for ( i = 0; i < 255; i++) {
(multiplication) , ++ (incrément) , -- (décrément) , / fonction(n)
(division), % (modulo), & (ET bit à bit), | (OU bit à }
bit), ^ (XOR bit à bit), << (décalage de bits vers la La boucle se répète pour un ensemble de valeurs de i
gauche), >> (décalage de bits vers la droite),>>> =0 à 254 par incémente de i
(idem mais en mettant les nouveaux digits à 0), && for (var in obj )in {
(ET logique entre deux booléens), || (OU logique instructions
entre deux booléens), ! ( négation d'un booléen). }
Les comparaisons sont faites par les opérateurs : Les intruction break et continue
== (test dégalité) , > , >=, <, <=, != (test d'inégalité) L'instruction break permet de sortir de la boucle ou
par exemple if ( valeur >= 3 ){ } signifiera que l'on du bloc en cours. L'instruction continue termine le
fera l'action entre {} si la variable valeur est plus bloc en cours pour se positionner sur l'itération
grande ou égale à 3 suivante.
Les opérateurs peuvent être assignés à l'affectation : if ... else .. [else]
x += 4 équivaut à x = x + 4 L'intruction de condition permet d'effectuer une
x++ signifie x+=1 c'est à dire x = x +1 séquence d'instruction si la condition exprimée est
et x-- signifie x-=1 c'est à dire x=x-1 vraie.
Les opérateurs sur les chaînes de caractères : La partie else qui est optionnelle permer d'effectuer la
+ concatène deux chaînes += ajoute la chaîne de séquence suivante si la condition est fausse.
droite à la chaîne de gauche. La précédence des Syntaxe
opérateurs est celle du langage C à savoir : if (condition) {
• , instructions
• = += -= *= /= %= <:<= >>= >>>= &= ^= |= } [else {
instructions
• ?:
}] Les méthodes sont des fonctions qui ont une portée
Exemple locale sur un objet et non pas génarale sur toute une
if ( prix == 0 ) { page HTML.
x++ Une méthode se définit comme une fonction :
} else { object.nom = nomfontion
result = result + prix Le mot this comme dans tous les langages orientés
} objets permet de référencer l'objet courant.
while Pour créer un nouvel objet, il suffit de :
L'instruction while permet de répéter un bloc • définir le type de l'objet en écrivant une fonction
d'instructions tant qu'une expression est vraie. • créer une instance de l'objet par l'utilisation du
Syntaxe : mot new
while (condition) { Par exemple :
instructions ; function homme(jambe, bras, tete ) {
} this.jambe
5. Les fonctions this.bras
this.tete
Les fonctions en JavaScript comme dans tous les }
autres langages désignent des suites d'instruction La création l'objet homme se fait par
répétitives, qui sont éxécutés plusieurs fois mais adam = new homme (1.20,0.70,0.50)
écrites une seule fois. Bien évidemment, vous pouvez changer la taille du
La fonction est définie sous la forme : nom ( param1, bras de l'objet homme par la syntaxe
param2,...;) { ...} adam.bras = .90
Il est de bon ton de définir toutes les fonctions à Il est possible (mais pas forcément heureux) d'ajouter
l'intérieur du couple de balises <HEAD> </HEAD> une nouvelle propriété à un objet homme par
La fonction sera donc déclarée entre un couple de allocation dynamique d'une valeur à une propriété
balise <SCRIPT> </SCRIPT> par un appel du non encore existante :
genre nom (param1, param2). adam.torse=0.70
Une fonction peut appeler des arguments de tout Enfin une méthode peut être définie par analogie à
type, ainsi que des fonctions et pour les fous de une fonction déjà existante comme suit :
l'algorythmique les fonctions peuvent être appelées this.creerHomme = creerFemme ;
récursivement. L'appel à la fonction se fait par
Une fonction retourne une valeur quand elle homme.creerHomme()
rencontre le mot clé return suivie de la valeur
retournée qui peut être de tout type. Les fonctions 6. JavaScript et HTML
suivantes permettent de manipuler les chaînes de JavaScript peut être implanté dans une page HTML
caractères : de deux façons :
• eval convertit une chaîne de caractères en valeur • par la balise SCRIPT
entière • en utilisant les événements
• parseInt convertit une chaîne de caractères en • en mettant le code dans un fichier séparé
valeur entière dans la base spécifiée uniquement à partir de la version 3 de Nestcape.
• parseFloat convertit une chaîne de caractères en En utilisant la balise SCRIPT
valeur réelle flottante <SCRIPT LANGAGE="JavaScript">
A partir de la version 1.2 du langage, une fonction code
peut être appelée récursivement. </SCRIPT>
JavaScript est orienté objet On le voit, le choix du langage ne se limite pas à
Comme son grand frère Java, JavaScript est orienté JavaScript et reste ouvert à d'autres langages comme
objet, ce qui revient à dire en première approximation Visual Basic, que supporte Internet Explorer.
que tout objet possède des propriétés, qu'à tout objet Le code placé à l'intérieur d'un couple de balises
se voient associées des méthodes, sorte de fonctions SCRIPT est évalué après le chargement de la page.
propres à ces objets. Les fonctions sont définies dans les couples de
Certains objets sont pré-définis mais vous pouvez balises SCRIPT dans la partie entête (HEAD) de la
créer un arsenal de nouveaux objets dérivés avec leur page HTML ou même dans le corps de la page, ce qui
propres méthodes. n'est cependant pas conseillé.
Si un objet se nomme Objet, une propriété de cet La balise SCRIPT peut prendre un argument :
objet sera notée Objet.propriete LANGAGE="JavaScript1.1" qui indique que le
Une propriété a un type et peut donc être manipulée code JAVASCRIPT est de version 1.1, actuellement
selon ce type comme le serait un entier ou une chaîne compris par les versions de Netscape 3.x et
de caractères. supérieure et par les versions Microsoft Internet
Ainsi femme.jambe designera la (sublime) propriété Explorer 4 et supérieures.
jambe d'un objet femme (qui n'a rien à voir avec une L'argument LANGAGE="JavaScript1.2" indique
femme objet). que le code JAVASCRIPT est de version 1.2,
actuellement compris par les versions de Netscape • onClick l'utilisateur clique sur une zone
4.x et supérieure. hypertexte.
Pour utiliser dans une page un code JavaScript à la [cliquez sur onClick ]
fois compatible 1.0 et 1.1 il suffit de déclarer les • onLoad : l'utilisateur charge la page dans le
procédures deux fois comme le montre l'exemple navigateur
suivant : • onSelect : l'utilisateur sélectionne un élément
<SCRIPT LANGUAGE="JavaScript"> code d'un formulaire
</SCRIPT> • onSubmit : l'utilis ateur soumet un formulaire
<SCRIPT LANGUAGE="JavaScript1.1"> • onUnload : l'utilisateur quitte la page
</SCRIPT> Le code dans un fichier source
Ceci peut être obtenu également par l'astuce suivante Uniquement à partir de la version 3 de Netscape, il
<SCRIPT LANGUAGE="JavaScript1.1">
est possible de mettre le code des programmes
location.replace("URL de la page
JavaScript dans un fichier annexe, en utilisant la
HTML version 1.1") </SCRIPT> code
balise SCRIPT comme suit :
compatible 1.0 <SCRIPT LANGAGE=JavaScript
Ceci peut se décliner par des variantes du style SRC=source.js> </SCRIPT>
<SCRIPT LANGUAGE="JavaScript"> if
source.js peut être un fichier dans le répertoire
(navigator.userAgent.indexOf("3.0")
courant ou bien une URL pointant vers un fichier
!= -1) jsVersion = "1.1" else
distant.
jsVersion = "1.0" </SCRIPT>
Du code inséré avant la balise </SCRIPT> ne sera
La variable jsVersion servira alors tout au long des
exécuté que si le fichier source.js n'a pu être chargé.
programmes à établir un code compatible avec la
Mais cette option, outre le fait qu'elle n'est supportée
version du navigateur.
Notons que le couple de
balises que par les version 3 de Netscape nécessite que le
<NOSCRIPT> </NOSCRIPT>
permettent serveur HTTP, soit configuré avec un type MIME
d'encadrer le texte qui sera affiché si "application/x-javascript" en regard des fichiers
JavaScript n'est pas compris par le d'extension js.
navigateur. Dans le HTML
En utilisant les événements Il est enfin possible d'utiliser le JavaScript pour
Les événements sont les résultats d'une action de mettre des variables dans le code HTML, ceci permet
l'utilisateur, comme par exemple un clic sur l'un des de rendre des parties du langage dynamiques.
boutons de la souris. Une variable JavaScript est définie par la syntaxe
La syntaxe de ces événements est : suivante : &variables; de la même manière que les
<balise eventHandler ="code JavaScript"> où balise variables > désignaient le symbole >.
est le nom d'une balise et eventHandler est le nom Des fonctions peuvent être utilisées dans le corps du
d'un événement. champ variable, si elles sont délimitées par les
Par exemple, pour utiliser la fonction exemple quand symboles { et }.
un utilisateur appuie sur un bouton, l'instruction
suivante 7. Deux ou trois choses avant de
<INPUT TYPE=BUTTON VALUE=Essai commencer
onClick="exemple(this.form)"> Avant de plonger dans les fonctions et les objets de
Une fonction ou bien un code JavaScript peut être référence, regardons quelques techniques.
inséré comme valeur de l'argument exemple Avec le choix JavaScript vous avez et nous le verrons
Bien évidemment, il est plus intéressant d'utiliser une plus loin, la possibilité de fabriquer du texte HTML,
procédure, lorsque le code employé est utilisé qui ne sera pas forcément bien formaté par le
plusieurs fois. navigateur, il vous faudra pour cela forcer un ré-
Voici la liste des événements disponibles, vous affichage de la page. Il vous faut savoir également
pouvez en tester le résultat en exé cutant l'action que JavaScript ne produit pas de de documents
proposée. imprimables jusqu'à la version 3 de Nestcape; gardez
Chaque événement est codé sous une des deux cela présent à l'esprit car les pages HTML finissent
formes : souvent - et vous savez combien c'est vrai - sur le
• Avec formulaire coin de votre imprimante.
<FORM> Utilisez les simples quotes dans les portions de code
<INPUT VALUE=événement JavaScript, pour réserver les doubles quotes pour les
événement=alert("événement")> parties purement HTML.
texte explicatif sur l'événement Définissez des fonctions dans la partie entête de votre
[mode d'emploi] document.
</FORM> Les objets de base
• Avec hypertexte Dans une page HTML, un certain nombre d'objets
<A HREF=#EX pré-définis sont accessibles sans que vous ayez à les
événement=alert("événement")>événeme créer; ce sont :
nt</A>
• window : l'objet de plus haut niveau, c'est la + --historique
fenêtre que vous voyez dans le navigateur. |
• child windows : ce sont les fenêtres filles que + --document
l'on retrouve dans chacune des frames. On verra |
leur appel dans les décalarations des frames + --formulaire (FORM)
• location : c'est l'URL courante et ses propriétés | |
• history : ce sont les URL précédemment | éléments (text fields,
textarea, checkbox, password
visitées.
| radio, select,
• document ce sont les propriétés du document
button, submit, reset)
courant, comme le titre, les couleurs de fonds, les
+ --links
formulaires
|
• navigator ce sont le nom et la version du + -- URL
navigateur ainsi que les types MIME et les
Le formulaire dans un document est stocké dans un
PLUG-INS supportés par le client. tableau appelé forms, le premier formulaire est noté
Ainsi pour la page HTML en cours, nous aurons les forms[0], la deuxième est forms[1] etc..
propriétés suivantes :
Ainsi la valeur du texte entré qui était
• location.href = document.nom.ungi.value peut être aussi appelé
"http://www.imaginet.fr/ime/javascri.htm" document.form[0].ungi.value.
• document.title = "Un nouveau guide Ce mécanisme se répète pour tous les éléments
d'Internet - JavaScript" comme les radios boutons, les champs texte etc ..
• document.fgColor = #000000 L'objet window est un objet important dans le langage
Ceci représente un avantage extrêmement intéressant JavaScript, il permet l'ouverture et la fermeture de
: vous allez pouvoir définir en JavaScript une pages dans un nouveau navigateur, d'émettre des
nouvelle valeur pour le fond de votre document ou fenêtres Popup ou des fenêtres de confirmation.
définir vos formulaires de façon dynamique. A l'instar des formulaires rangés en tableau form[],
Le schéma suivant, que l'on retrouve souvent dans la les frames sont rangées dans un tableau frames[0], ...
littérature, illustre la hiérarchie de toutes les classes frames[n]. Ainsi la première frame d'une page
présentes dans le Navigateur : composée est window.frame[0].
window Les tableaux prédéfinis
| Les principaux objets d'une page HTML sont définis
+ --parent, frames, self, top par des tableaux que l'on retrouve dans la liste
| suivante :
+ --location
|
Array Description
anchors comprend toutes les balises <A> qui contiennent un argument NAME
applets comprend toutes les balises <APPLET> du document
argumen
comprend tous les arguments d'une fonction
ts
elements
comprend toutes les balises <FORM> dans l'ordre de leur définition
embeds comprend toutes les balises <EMBED> dans l'ordre de leur définition
forms comprend toutes les balises <FORM> du document
comprend toutes les balises <FRAME> contenant un FRAMESET dans l'ordre de
frames leur définition
history comprend tous l'historique du navigateur
images comprend toutes les balises <IMG> dans l'ordre de leur définition
comprend tous les liens <AREA HREF="...">, <A HREF=""> et les objets Link
links
créés par la méthode linkwith the link
mimeTy Comprend tous les types MIME supportés par le navigateur (helpers ou plug-
pes ins)
options comprend tous les éléments OPTION d'une balise SELECT
plugins comprend tous les plug-ins installés sur votre navigateur
