JavaScript
Dominique Bouillet TELECOM & Management SudParis
Février 2010

Plan

Sommaire

Intérêt de JavaScript
Noyau ECMAScript
Objets prédéfinis
Boîtes de dialogue
Hiérarchie d'objets
Evènements
Références

Interactivité sur le Web

HTML permettait à l'origine uniquement des liens et des images réactives
Tout autre action interactive (formulaire) nécessite :
- envoi d'une requête au serveur
- traitement sur le serveur
- envoi de la réponse au client
- interprétation par le client du résultat
- donc un temps de réponse LONG
JAVA offre une solution mais langage complet et peu adapté à des non informaticiens
Une solution Intermédiaire : JavaScript va être développée pour
- améliorer l'interactivité
- améliorer les débits sur le réseau (éviter les envois erronés)
- proposer des pages dynamiques (animation, personnalisation...)

Caractéristiques

JavaScript est un langage
- interprété
- à base d'objets
- multi-plateforme
- il a été développé par Netscape (nom d'origine LiveScript) et a connu différentes versions 1.0, 1.1, 1.2...
Microsoft de son côté a développé JScript en différentes versions aussi : 1.0, 2.0...
(il existe aussi VBScript basé sur VirtualBasic)

Le noyau JavaScript

Le langage initial distinguait :
- le noyau JavaScript (le coeur du langage) avec des opérateurs, des structures...
- des objets prédéfinis,
- un ensemble d'objets associés au navigateur (fenêtres, documents, images...)
Un organisme de standardisation l'ECMA (European Computer Manufacturers Association) a défini un standard ECMAScript basé sur JavaScript 1.1.
Ce standard ECMA-262, repris par l'ISO définit les caractéristiques du noyau du langage
Aujourd'hui, les différentes versions sont conformes à cette norme ECMA-262 mais il existe des extensions, des différences surtout au niveau du modèle objet du navigateur
L'interface DOM (Dynamic Object Model) offre un ensemble de procédures pour accéder aux documents du navigateur.
De nombreuses bibliothèques complètent la programmation en javascript, en particulier pour les extensions DHTML et AJAX

JavaScript et HTML

Code JavaScript contenu dans les documents HTML entre les balises <script> et </script>
- le plus souvent dans l'en-tête (entre <head> et </head>)
- ou dans un fichier séparé (<script src="monprog.js">)
Le code JavaScript est un ensemble de fonctions qui seront appelées
- soit à partir d'évènements
- soit comme argument d'un lien (<a href="javascript:affiche();">)
- voire pour des usages très particuliers directement dans le corps du document.

Exemple

<HTML>
<HEAD>...
     <script LANGUAGE="JavaScript">
	Code javaScript 
	Définition des variables, fonctions...
     </script> 
</HEAD>
<BODY>
	...
<INPUT onClick="Mafonction(); ">
	...
<A HREF="javascript:Autrefonction();">Cliquer ici </a>
	...
</BODY>
</HTML>

Autre exemple : une fonction JavaScript qui génère une page HTML avec la liste des plugins du navigateur.

Le langage

Opérateurs et Instructions (ceux du langage C mais plus limités)
Variables (faiblement typées)
Objets :
- prédéfinis (String, Date, Math...)
- liés à l'environnement (window, document...)
- Aujourd'hui, le modèle Objet (DOM) permet d'accéder à tous les éléments qui sont sur le navigateur.
Les Entrées/Sorties sont déléguées à l'hébergeant, c'est-à-dire le navigateur via ses fenêtres

Quelques types primitifs

Nombre ( Number)
Entier : décimal ou hexa (0x4F) ou octal (075)
Réel (-2.3452E-12)
Booléen (Boolean) : true ou false
Chaîne de caractères (String)
- 'chaine'
- "chaine"
- Les codes \t (tabulation) \n (à la ligne) \r (retour chariot) \b (backspace) \f (saut de page) sont reconnus
Il existe des types particuliers : Null (null), Undefined (undefined) et des nombres particuliers : Infinity, NaN (Not a Number) qui facilitent certaines opérations

Conversions

Typage faible ==> JavaScript fait des conversions implicites selon les besoins
Le type String est le type dominant, ce qui a un impact sur l'opérateur + qui est à la fois l'addition arithmétique et la concaténation de chaînes de caractères.
Exemple :
- N=12; // N numérique
- T="34"; // T chaîne de caractères
- X=N+T; // X est la chaîne de caractères "1234"

Notion d'Objet JavaScript

Pas de vraie classe (pseudo-classe)
==> pas de sous-classe, ni d'héritage
uniquement des créations d'objets et la possibilité de définir des propriétés "prototype"
Objets prédéfinis
- propriétés (objet.propriété)
- méthodes (objet.methode)
Création d'un objet par définition de son constructeur (fonction du nom de la pseudo-classe avec affectation des propriétés à partir des paramètres et déclaration des méthodes)

Les Objets ECMAScript

Structure de données en arbre avec au sommet l'objet Global qui définit un ensemble de méthodes communes à tous les objets.
Les objets "prédéfinis" sont
- Object (création d'un objet),
- Function (création d'une fonction),
- Array (création d'un tableau),
- String (création d'une chaînes de caractères),
- Boolean (création d'un booléen),
- Number (création d'un nombre),
- Date (création d'une date),
- Math (création de structures mathématiques).
A ces objets ECMAScript, s'ajouteront une hiérarchie d'objets liée à l'hébergeant (navigateur client ou serveur)

Objet String (chaînes de caractères)

Propriété : length
Méthodes de manipulation de chaînes :
- indexOf("chaine","s/chn,pos),
- substring(débuf,fin+1), charAt(n),
- lastIndexOf("chaine"), toLowerCase(),
- toUpperCase(), split(), toString()
Exemples : var T = Bonjour;
- T.indexOf ("o"); --> 1
- T.lastIndexOf("o"); --> 4
- T.charAt(3); --> j
- T.substring(3,7); --> jour
- T.toUpperCase(); --> BONJOUR

Méthodes "HTML"

anchor, link
- "Institut".anchor("INT");
- <A NAME="INT">Institut</A>
- "Institut".link("http://www.it-sudparis.eu");
- <A HREF=" http://www.it-sudparis.eu"> Institut </A>
big, sub, sup, blink, bold, fixed, italics, small, strike
- "Bonjour".big;
- <BIG> Bonjour </BIG>
fontcolor, fontsize
- "Bonjour".fontsize(5);
- <FONT SIZE=5>Bonjour</FONT>

Objet Math

Math : Structures mathématiques
Propriétés : constantes mathématiques
- E, PI, SQRT2, SQRT1_2, LN2, LN10, LOG2E, LOG10E
Méthodes : fonctions usuelles
- Trigonométriques : cos, sin, tg, acos, atan, asin, atan2
- abs (valeur absolue)
- ceil (entier inf), floor (entier sup), round (entier + proche)
- exp, log, sqrt, pow(x,a)
- max (a,b), min (a,b)
- random --> 0 < r < 1

Objet Date

Date : Représentation des dates
Propriété : length
Nécessité d'instancier avec new
- X = new Date() --> date du jour
- Y = new Date(argts)
- MoisJour,An [Heure:Minute:Seconde] avec Mois en lettres
- ou An,Mois,Jour[,Heure,Minute,Seconde] tout en chiffres
- Hier = new Date(1998, 00, 06, 09, 15, 00) // 6.1.98 à 9H15

Méthodes de l'objet Date

Pour accéder à la date/heure : getxxx
Pour initialiser la date/heure : setxxx
avec xxx = Date (1-31), Day (0-6), Hours (0-23), Minutes (0-59)
Month(0-11), Seconds (0-59), Year (19xx), FullYear,
Milliseconds, Time (Nombre de ms depuis 1.1.70)
TimezoneOffset (différence en minutes avec GMT)
Autres :
- toGMTString() : conversion en date GMT
- toLocaleString() : conversion en heure locale (chaîne de car.)
- UTC(an,mois,jour,H,M,S) : conversion en variable Date (GMT)
- parse("December 25,1997") : conversion en variable Date

Objet Array

Tableau d'éléments
Propriété : length (nombre d'éléments)
Méthodes :
- join concatène tous les éléments en une chaîne de caractères séparés par une virgule ou un séparateur passé en argument
- reverse transpose le tableau (1<->N 2<-> N-1...)
- sort trie les éléments dans l'ordre lexicographique ou selon la relation d'ordre passée en argument

Exemple : texte défilant
Fichier source du code JavaScript associé

Boîtes de dialogue

Parmi les objets JavaScript du navigateur, on distingue 3 objets de type window qui proposent des fenêtres prédéfinies pour faire des Entrées/Sorties :
alert : fenêtre d'affichage d'un message avec un bouton de fermeture
prompt : fenêtre de saisie d'une information avec un champ de saisie, et 3 boutons pour valider, effacer et annuler
confirm : fenêtre de test avec 2 boutons pour valider ou annuler

Exemple

<script>
var N = prompt("Donnez N", 0 );
if  (confirm (N + " est-il correct ? ") != true)

      N = prompt ("Derniere chance", 0 );

else

      alert ("Le premier essai a ete le bon...");

document.write("<BR> Vous avez saisi " + N);

</script>

Exemple : Application numérique : la sphère
Fichier source du code JavaScript associé

Hiérarchie des Objets

navigator
- window mimeTypes plugins
  - document history location ...
    - form links image ...
      - select button text ...
        option

Objet navigator

navigator
- Propriétés : appCodeName, appName, appVersion, userAgent
- Méthode : javaEnabled
mimeTypes
- Propriétés : length, type, description, suffixes, enabledPlugin
plugins
- Propriétés : length, name, description, filename
- Méthode : refresh

Objet window

window
- Propriétés : defaultStatus, frames, length, name, opener, parent, self, status, top, window
- Méthodes: clear, clearTimeout, close, open, setTimeout, alert, confirm, prompt, scroll, focus, blur...
history
- P : length M : back, forward, go
frame
- P : frames, parent, self, top, window, length
- M : clear, clearTimeout, close, open, setTimeout, alert, confirm, prompt
location
- P : hash, host, hostname, href, pathname,
- port, protocol, search
document

Objet document

document
- Propriétés : alinkcolor, bgcolor, cookie, fgcolor, lastModified, linkcolor, location, referrer, title, vlinkcolor
- Méthodes : clear, close, open, write, writeln
embeds
links
- P : hash, host, hostname, href, pathname, port, protocol, search,target
anchors
image
- P : border, complete, height, hspace, lowsrc, name, src, vspace, width
area
forms

Objet form

L'objet form
- Propriétés : action, elements, encoding, length, method, target
- Méthodes : submit, reset
Les objets qu'il contient
- L'objet elements regroupe tous les champs de saisie
- Les objets associés à la balise input : button, checkbox, FileUpload, hidden, password, reset, submit, text.
- Les objets associés aux autres balises : textarea, select, option
- Les propriétés : name, value, type, checked, defaultChecked, name, value, type, defaultValue...
- Les méthodes : click, blur, focus, select...

Gestion d'Evènements

JavaScript reconnait certains évènements :
- Actions de la souris : déplacement, click...
- Chargement d'une page, d'une image
- Autres : erreur, soumission de formulaire...
et permet de leur associer une action :
Une fonction ou du code JavaScript en arguments de Mots-clefs onEvenement (onClick, onLoad...) associés aux balises HTML

Quelques évènements

Evènements	Balises	Fonctions
onBlur	PASSWORD, TEXT, TEXTAREA, SELECT	déselection
onChange	idem	modification
onFocus	idem	sélection
onSelect	PASSWORD, TEXT, TEXTAREA	sélection de valeur
onClick	A HREF, BUTTON, CHECKBOX, RADIO, RESET, SUBMIT	click
onMouseover	A HREF, AREA	souris pointe
onMouseout	A HREF, AREA	souris hors du lien
onLoad	BODY	chargement page
onUnload	BODY	déchargement
onError	BODY, IMAGE	erreur au chargement
onAbort	IMAGE	arrêt du chargement
onSubmit	FORM	soumission
onReset	FORM	remise à zéro

Cas des Formulaires

Dans un formulaire, il faut distinguer les 2 évènements :
- onSubmit qui s'applique à la balise <FORM>
- onClick de la balise <INPUT TYPE=submit>
Ne pas oublier de retourner vrai ou faux selon le test afin de soumettre ou non le formulaire.
<FORM ... onSubmit="return Test(this);">
La fonction Test doit retourner vrai (return true;) si le test est positif et faux (return false ;) sinon.

Exemple : Test d'un formulaire avant envoi
Fichier source du code JavaScript associé

Autres Particularités

L'événement onBlur peut provoquer des situations bloquantes.
Exemple (à ne pas faire) :
- <INPUT TYPE=text onBlur="alert(Aie! Aie!);">
- Cela entraine une boucle infinie car dès qu'on clique sur OK pour éliminer la fenêtre alert, on est aussitôt en dehors du champ INPUT
- ==> l'événement onBlur est activé et la fenêtre alert se ré-affiche...
L'ordre de traitement des évènements n'est pas universel et peut varier selon les navigateurs (certains évènements sont propres à un navigateur)
Barre de status : JavaScript permet l'accès à la barre d'état (StatusBar)
- dernière ligne au bas de la fenêtre
- <... onMouseover="status='Mon message' ; return (true)" >
- Ne pas oublier de retourner vrai
- defaultstatus contient la valeur par défaut.

Nommage

On peut nommer les objets :
à partir de leur position
(hiérarchie ou indice dans les tableaux)
à partir de leur nom (attribut NAME)
Exemples :
- document.forms[0].name
- forms[2].I1.value // élément ayant comme nom I1
- F1.I1.value // formulaire ayant comme nom F1
- F1.S1.selectedIndex
- F1.S1.options[F1.S1.selectedIndex].value
À partir du modèle DOM

Le DOM "Document Object Model"

Interface de programmation pour les documents (XHTML, XML...)
Représentation du document comme une structure composée de nœuds et de feuilles (objets) possédant diverses propriétés et méthodes
Le standard est référencé par le W3C et implémenté par les navigateurs avec plus ou moins d'extensions
Un exemple d'utilisation :
- paragraphes = document.getElementsByTagName("p"); récupération de tous les objets <p>
- paragraphes[0] est le premier élément <p>, paragraphes[1] est le second, etc.
- alert(paragraphes[0].nodeName); permet d'afficher le nom
Références : spécifications du W3C, le DOM Gecko (Mozilla)

Autre exemple

Partie HTML : <table id='MaTable'> ... </table>

Partie JavaScript/DOM

Accès à l'objet : T=document.getElementById('MaTable') ;
Accès au contenu : Tb=T.tBodies[0] ;
Accès à une ligne : Tr=Tb.rows ;
Suppression d'une ligne : T.deleteRow(Tr.rowIndex) ;
Remplacement d'une ligne
- 1ère étape : copie départ vers arrivée avec récupération de l'arrivée
- z= Tb.replaceChild(Tr[indexDepart],Tr[indexArrivee]);
- 2ème étape : insertion de l'arrivée avant le départ
- Tb.insertBefore(z,Tr[indexDepart]);
etc.

Passage d'arguments

Lors de l'appel d'une fonction, il existe différentes possibilités (exemple pour un formulaire) :

Passer la référence du formulaire
HTML : <form onSubmit="return Check(this);" ...>
Code JavaScript : function Check(form) { if ( form.X.value == 0 ) ... }
Passer les valeurs
HTML : <form onSubmit="return Check(X.value, Y.value);" ...>
Code JavaScript : function Check(varX, varY) { if ( varX == 0 && varY == 0 ) ... }
Ne passer aucun paramêtre
HTML : <form onSubmit="return Check();" ...>
Code JavaScript : function Check() { if ( document.F.X.value == 0 ) ... }

Mise au point

Toujours délicate avec les langages interprétés (messages peu explicites)
Console JavaScript (fenêtre avec les messages d'erreur)
- en tapant javascript: comme adresse
- avec le menu Outils
Activation automatique
- Modifier le fichier de préférences (prefs, preferences.js...)
- Ligne à ajouter : user_pref("javascript.console_on_error", true);
Exemple

Quelques adresses

Le W3 Consortium (XHTML Home Page)
- http://www.w3.org/MarkUp
ECMA
- http://www.ecma-international.org/
Mozilla (developper center)
- https://developer.mozilla.org/en/JavaScript
Microsoft Developer Network (JScript)
- http://msdn.microsoft.com/en-us/library/hbxc2t98(VS.85).aspx
Developpez.com
- http://javascript.developpez.com/cours/
XUL.fr
- http://www.xul.fr/ecmascript/tutoriel/
Le Site du Zéro
- http://www.siteduzero.com/tutoriel-3-8158-tout-sur-le-javascript.html

Quelques références

La face cachée d'HTML Eyrolles Décembre 97
James Guérin & Marc Petremann
HTML 4.0 SourceBook Wiley 1998
Ian S. Graham
HTML 4 Livre d'Or 1998
Michel Dreyfus
Programmation HTML et JavaScript Eyrolles 1998
Philippe Chaléat & Daniel Charnay
Programmation JavaScript Eyrolles 1997
Cyrille Lecomte et Thomas Leduc
Le guide du programmeur JavaScript 1998
Nigel Mc Farlane
Oracle et le Web (CGI, Intranet ...) 1998
Didier Deléglise

JavaScript Dominique Bouillet TELECOM & Management SudParisFévrier 2010

Plan

Sommaire

Interactivité sur le Web

Caractéristiques

Le noyau JavaScript

JavaScript et HTML

Exemple

Le langage

Quelques types primitifs

Conversions

Notion d'Objet JavaScript

Les Objets ECMAScript

Objet String (chaînes de caractères)

Méthodes "HTML"

Objet Math

Objet Date

Méthodes de l'objet Date

Objet Array

Boîtes de dialogue

Hiérarchie des Objets

Objet navigator

Objet window

Objet document

Objet form

Gestion d'Evènements

Quelques évènements

Cas des Formulaires

Autres Particularités

Nommage

Le DOM "Document Object Model"

Autre exemple

Passage d'arguments

Mise au point

Quelques adresses

Quelques références

JavaScript
Dominique Bouillet TELECOM & Management SudParis
Février 2010