INSA - ASI TechnoWeb : Javascript 1/39
Technologies Web
Javascript
Alexandre Pauchet
INSA Rouen - Département ASI
[Link].18, pauchet@[Link]
INSA - ASI TechnoWeb : Javascript 2/39
Plan
1 Introduction 5 Interaction avec HTML : le DOM
2 Inclusion dans le code 6 Conseils de programmation
3 Syntaxe générale 7 Les prototypes
4 Programmation
évènementielle
INSA - ASI TechnoWeb : Javascript 3/39
Introduction (1/5)
Généralités
Javascript
Créé en 1995 par Netscape et Sun Microsystems
But : interactivité dans les pages HTML/XHTML, traitements
simples sur le poste de travail de l'utilisateur
Moyen : introduction de scripts dans les pages HTML/XHTML
Norme : [Link]
standards/[Link]
Programmation locale
sans javascript : programmation exécutée sur le serveur
avec javascript : inclusion de programmes dans les pages
HTML/XHTML a n de les exécuter sur le poste client
Javascript 6= scripts Java !
INSA - ASI TechnoWeb : Javascript 4/39
Introduction (2/5)
Comparaison Javascript/Java
Comparatif
Java Javascript
- compilé - interprété
- orienté objets (classes, héritage) - orienté prototypes (héritage de propriétés)
- code dans applets (invisible) - code intégré (visible) ⇒ à ousquer
- typage fort - typage faible
- langage à part entière - langage à part entière
- environnements de développement - débuggage di cile, maintenant facilité par
l'arrivée de nouveaux outils
Remarque
Communication possible entre Java et Javascript (plugin LiveConnect
(Netscape), contrôles Active X (Microsoft), ...)
INSA - ASI TechnoWeb : Javascript 5/39
Introduction (3/5)
Avantages et inconvénients
Points forts :
langage de programmation structurée ; de nombreuses applications
sont maintenant développées uniquement en Javascript, côté serveur
(en utilisant par exemple [Link])
il enrichit le HTML/XHTML (intégré ⇒ interprété par le client),
il partage les prototypes DOM des documents HTML/XHTML
⇒ manipulation dynamique possible
gestionnaire d'événements (programmation asynchrone possible)
Limitations/dangers :
c'est un langage de script (interprété), très permissif
typage faible
ce n'est pas un langage orienté objet, mais par prototypage
Il est recommandé de bien suivre les bonnes pratiques !
INSA - ASI TechnoWeb : Javascript 6/39
Introduction (4/5)
Domaines d'application
Javascript permet
de programmer des actions en fonction d'événements utilisateurs
(déplacements de souris, focus, etc.)
d'accéder aux éléments de la page HTML/XHTML (traitement de
formulaire, modi cation de la page)
d'eectuer des calculs sans recours au serveur
Domaines d'application historiques :
petites applications simples (calculette, conversion, etc.)
aspects graphiques de l'interface (événements, fenêtrage, etc.)
tests de validité sur des interfaces de saisie
Exemples de nouvelles applications possibles en Javascript :
Vidéos a chées en HTML5 sans Flash (ex : Youtube)
Jeux
Bureautique (ex : Google Docs)
INSA - ASI TechnoWeb : Javascript 7/39
Introduction (5/5)
Normalisation
La norme, mais...
ECMA (European Computer Manufactures Association) a dé ni un
standard ECMAScript (Mozilla et Adobe)
[Link]
Javascript 1.8.5 :
publications/standards/[Link]
Ce standard, repris par l'ISO, dé nit les caractéristiques du noyau du
langage
Javascript 2.0 est conforme à cette norme mais a
ses propres extensions
des diérences au niveau du modèle objet du navigateur
INSA - ASI TechnoWeb : Javascript 8/39
Inclusion dans le code (1/6)
Exemple de Javascript inséré dans du code XHTML 1.0
[Link]
<? xml v e r s i o n = " 1 . 0 " encoding= "UTF−8" ?>
<!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1 . 0 S t r i c t //FR" "DTD/ x h t m l 1 − s t r i c t . dtd
">
<html xmlns= " h t t p : / /www. w3 . o r g /1999/ xhtml ">
<head>
< t i t l e>Exemple de page XHTML c o n t e n a n t du J a v a s c r i p t < / t i t l e>
<meta http − equiv= " c o n t e n t − t y p e " content= " t e x t / html ; c h a r s e t = u t f − 8 " />
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / < ! [ CDATA [
function fenetre () {
a l e r t ( " Message dans une f o n c t i o n . " ) ;
}
// ] ] >
< / s c r i p t>
</head>
<body onload= " a l e r t ( ' A p r è s l e chargement . ' ) ">
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / < ! [ CDATA [
a l e r t ( " Message dans l e c o r p s du document . " ) ;
// ] ]>
< / s c r i p t>
<p>
Corps du document . <a href= " J a v a s c r i p t : f e n e t r e ( ) ">Message d ' a l e r t e < / a>.
</p>
</body>
</html>
INSA - ASI TechnoWeb : Javascript 9/39
Inclusion dans le code (2/6)
Exemple de Javascript inséré dans du code HTML
[Link]
<!DOCTYPE html>
<html>
<head>
<meta http − equiv= " c o n t e n t − t y p e " content= " t e x t / html ; c h a r s e t = u t f − 8 " />
< t i t l e>Exemple de page HTML c o n t e n a n t du J a v a s c r i p t < / t i t l e>
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / <!−−
function texte () {
document . w r i t e ( " Texte g é n é r é . " ) ;
}
/ / −−>
< / s c r i p t>
</head>
<body>
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / <!−−
document . w r i t e ( " Code j a v a s c r i p t dans l e c o r p s du document . " ) ;
/ / −−>
< / s c r i p t>
<p>
Dans une f o n c t i o n a p p e l é e en c l i q u a n t <a href= " j a v a s c r i p t : t e x t e ( ) ">i c i < / a> ,
<p>
ou en p a s s a n t d e s s u s <a href= "" onmouseover= " j a v a s c r i p t : t e x t e ( ) ">cela< / a>.
</body>
</html>
INSA - ASI TechnoWeb : Javascript 10/39
Inclusion dans le code (3/6)
Insertion de code Javascript
Utilisation de la balise <script>...</script> :
déclaration de fonctions dans l'entête ou dans le footer
HTML/XHTML
appel d'une fonction ou exécution d'une commande Javascript dans
<body>...</body>
insertion d'un chier externe (usuellement '.js')
Utilisation dans une URL, en précisant le protocole
Ex : <a href="javascript:instructionJavascript;">Texte</a>
Utilisation des attributs de balise pour la gestion événementielle :
<balise onEvenement="instructionJavascript">...</balise>
Remarque
Traitement séquentiel des pages par un navigateur ⇒ Placer les scripts
dans le footer permet de charger les éléments visuels avant les scripts.
INSA - ASI TechnoWeb : Javascript 11/39
Inclusion dans le code (4/6)
Exemples d'inclusion
[Link]
<!DOCTYPE html>
<html>
<head>
<meta http − equiv= " c o n t e n t − t y p e " content= " t e x t / html ; c h a r s e t = u t f − 8 " />
< t i t l e>Exemple de page HTML c o n t e n a n t du J a v a S c r i p t < / t i t l e>
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / <!−−
f u n c t i o n message ( ) {
a l e r t ( " C e c i e s t un message d ' a l a r m e . " ) ;
}
/ / −−>
< / s c r i p t>
</head>
<body>
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / <!−−
prompt ( " S a i s i s s e z du t e x t e " , "" ) ;
// −−>
< / s c r i p t>
...
INSA - ASI TechnoWeb : Javascript 12/39
Inclusion dans le code (5/6)
Exemples
...
<p onmouseover= " j a v a s c r i p t : message ( ) ; ">
Corps du document . <a href= " j a v a s c r i p t : a l a r m e ( ) ; ">Message d ' a l e r t e < / a>.
</p>
< f o o t e r>
< s c r i p t type= " t e x t / j a v a s c r i p t " src= " a l a r m e . j s ">< / s c r i p t>
</ f o o t e r>
</body>
</html>
[Link]
f u n c t i o n alarme () {
alert (" Alerte ! Alerte ! Alerte !") ;
}
INSA - ASI TechnoWeb : Javascript 13/39
Inclusion dans le code (6/6)
Utilisation correcte de la balise <script>
Compatibilité avec la majorité des navigateurs
En XHTML :
<script type="text/javascript">
// <![CDATA[
Code Javascript
// ]]>
</script>
En HTML :
<script type="text/javascript">
// <!--
Code Javascript
// -->
</script>
Code alternatif :
<noscript>
Message à afficher en cas d'absence de Javascript
</noscript>
INSA - ASI TechnoWeb : Javascript 14/39
Syntaxe générale (1/7)
Caractéristiques
Description de la syntaxe
Variables faiblement typées
Opérateurs et instructions identiques au C/C++/Java
Des fonctions/procédures
globales (méthodes associées à tous les objets)
fonctions/procédures/méthodes dé nies par l'utilisateur
Des objets (des prototypes)
prédé nis (String, Date, Math, etc.)
liés à l'environnement
dé nis par l'utilisateur
Commentaires : // ou /*...*/
Séparateur d'instruction : `;'
INSA - ASI TechnoWeb : Javascript 15/39
Syntaxe générale (2/7)
Opérateurs
Opérateurs identiques à ceux du C/C++/Java
opérateurs arithmétiques : + − * / %
in/décrémentation : v a r++ var−− ++v a r −−var
opérateurs logiques : && | | !
comparaisons : == === != !== <= < >= >
concaténation de chaîne de caractères : +
aectation : = += −= *= ...
INSA - ASI TechnoWeb : Javascript 16/39
Syntaxe générale (3/7)
Variables
Utilisation de variables
Déclaration : var nom[=valeur];
déclaration optionnelle mais fortement conseillée
`unde ned' si aucune valeur à l'initialisation
aucun type !
Distinction de la localisation des variables (locale ou globale -déclarée
en dehors d'une fonction-)
Sensible à la casse
Typage dynamique (à l'aectation) ⇒ transtypage
Exemples
var philosophe = " Diogene " ;
v a r a n n e e N a i s s a n c e = −413 ;
v a r nonRien ; // v a u t u n d e f i n e d
INSA - ASI TechnoWeb : Javascript 17/39
Syntaxe générale (4/7)
Tests et boucles
Si-sinon-alors : Switch-case :
i f ( condition ) { switch ( variable ) {
instructions case ' valeur1 ' :
} Instructions
[ else i f ( condition ) { break ;
instructions ...
}] default :
[ else { Instructions
instructions break ;
}] }
Boucles for : Boucles while :
f o r ( i=0 ; i<N ; i ++) { while ( condition ) {
Instructions Instructions
} }
for (p in tableau ) { do {
Instructions Instructions
} } while ( condition ) ;
INSA - ASI TechnoWeb : Javascript 18/39
Syntaxe générale (5/7)
FonctionsProcédures
Déclaration d'une fonction/procédure
function nom ( arg1 , ... , argN ) {
Instructions
[ return valeur ;]
}
Remarques
Arguments et valeur en retour non typés
Nombre d'arguments non xé par la déclaration
Passage des paramètres par référence
INSA - ASI TechnoWeb : Javascript 19/39
Syntaxe générale (6/7)
Les tableaux
Déclaration :
v a r nom = new A r r a y ( [ d i m e n s i o n ] ) ;
v a r nom = new A r r a y ( o1 , . . . , on ) ;
Accession avec [ ] (ex : tableau [ i ] )
les indices varient de 0 à N-1
les éléments peuvent être de type diérent
la taille peut changer dynamiquement
les tableaux à plusieurs dimensions sont possibles
Propriétés et méthodes : length , reverse () , sort () , toString () , push(element), etc.
Tableaux associatifs : tableau [ 'nom'], équivalent à tableau .nom
⇒ for (var in tableau)
INSA - ASI TechnoWeb : Javascript 20/39
Syntaxe générale (7/7)
Boîtes de dialogue et fenêtres
Boîte de dialogue type pop-up :
[Link] ("Message à a cher ");
Boîte de saisie simple :
reponse = [Link]("texte","chaine par défaut");
Ouverture d'une fenêtre lle / d'un onglet ls :
fenetre = [Link]("page","titre");
NB : si plusieurs fois le même titre, ouverture dans la même fenêtre
Remarque : ces 3 fonctions sont des méthodes de la classe window.
INSA - ASI TechnoWeb : Javascript 21/39
Objets prédé nis (1/4)
L'objet Global et les classes prédé nies
Global dé nit propriétés et méthodes communes à tous les objets
Les méthodes et propriétés de cet objet n'appartiennent à aucune
classe et cet objet n'a pas de nom
La seule façon de faire référence à cet objet est this (ou rien)
Chaque variable ou fonction globale est propriété de Global
Propriétés de Global : In nity NaN unde ned
Quelques méthodes : parseFloat (s) , parseInt (s ,base), isNaN(expression) ,
eval ( expression ), escape(URL) et unescape(URL) (Codage des URL)
Classes prédé nies : Array , Boolean , Date , F u n c t i o n , Math , Number , Image ,
Option , RegExp , S t r i n g , N a v i g a t o r , Window , S c r e e n
INSA - ASI TechnoWeb : Javascript 22/39
Les prototypes (2/4)
L'objet Date
Objet Date
Pas de propriété
Liste des méthodes :
getDate () setDate ()
getDay ()
getHours () setHours ()
getMinutes () setMinutes ()
getMonth () setMonth ()
getSeconds () setSeconds ()
getTime () setTime ()
getFullYear () setYear ()
getTimezoneOffset () ...
INSA - ASI TechnoWeb : Javascript 23/39
Les prototypes (3/4)
String et Math
Objet String
Lorsqu'on dé nit une constante ou une variable chaîne de caractères,
Javascript crée d'une façon transparente une instance String
1 propriété : length
Les balises HTML/XHTML ont leur équivalent en méthode
Liste (non exhaustive) des méthodes :
bold () i t a l i c s () fontcolor () fontsize () small () big
()
t o U pp e r C a s e ( ) toLowerCase ( ) sub ( ) sup ( ) substring ()
charAt () indexOf () ...
Objet Math
Propriétés : [Link] et Math.E
Méthodes :
atan () acos () asin () tan () cos () sin () abs ( )
exp ( ) max ( ) min ( ) pow ( ) round ( ) sqrt () floor
()
random ( ) log ()
INSA - ASI TechnoWeb : Javascript 24/39
Les prototypes (4/4)
L'objet Window
L'objet Window
Cet objet représente la fenêtre courante
defaultStatus frames length name parent
Propriétés :
status top window
Méthodes :
alert () confirm ()
prompt () clear ()
open () close ()
INSA - ASI TechnoWeb : Javascript 25/39
Programmation évènementielle (1/4)
Événements reconnus par Javascript
onclick : un clic du bouton gauche de la souris sur une cible
onmouseover : passage du pointeur de la souris sur une cible
onblur : une perte de focus d'une cible
onfocus : une activation d'une cible
onselect : sélection d'une cible
onchange : une modi cation du contenue d'une cible
onsubmit : une soumission d'un formulaire
onload : à la n du chargement d'un élément
onunload : la fermeture d'une fenêtre ou le chargement d'une page autre
que la courante
INSA - ASI TechnoWeb : Javascript 26/39
Programmation évènementielle (2/4)
Fonctionnement
Le navigateur intercepte les événements (interruptions) et agit en
conséquence
Action → Événement → Capture → Action
Actions associées aux cibles par les balises HTML :
<balise onevenement="action">
Exemple
<a href="#" onclick="alert('Merci!') ;">
INSA - ASI TechnoWeb : Javascript 27/39
Programmation évènementielle (3/4)
Événements liés à Window
L'objet Window possède plusieurs méthodes spéci ques pour la gestion
d'un compte à rebours :
setTimeout( instruction , temps) permet de spéci er un compteur de
millisecondes associé à une instruction. Après l'intervalle de temps
spéci é, une interruption est produite et l'instruction est évaluée.
setInterval ( instruction , temps) permet de spéci er un compteur de
millisecondes associé à une instruction. L'instruction est évaluée à
intervalles réguliers.
clearTimeout() et clearInterval () annulent un compte à rebours.
Exemple
setTimeout("[Link](' Hello !') ;", 1000);
INSA - ASI TechnoWeb : Javascript 28/39
Programmation évènementielle (4/4)
Fonction wait
La fonction wait n'existe pas par défaut !
⇒Nécessité de la dé nir dans une fonction propre
Exemple
function wait ( delay ) {
var date = new Date () ;
var curDate = null ;
do {
curDate = new Date () ;
} while ( curDate-date<delay ) ;
}
INSA - ASI TechnoWeb : Javascript 29/39
Interaction avec HTML : le DOM (1/4)
Objectifs
DOM : Document Object Model.
API pour du HTML et XML (donc XHTML) valide
En suivant le DOM, les programmeurs peuvent construire des
documents, naviguer dedans, ajouter, modi er ou eacer des
éléments de ces documents
En tant que recommandation du W3C, l'objectif du DOM est de
fournir une interface de programmation standard pour être utilisée
par tous (applications, OS)
Suivant le DOM, un document a une structure logique d'arbre (ou de
forêt)
Le DOM a pour but d'uniformiser la manipulation des documents
"web", notamment par les scripts.
INSA - ASI TechnoWeb : Javascript 30/39
Interaction avec HTML : le DOM (2/4)
Liste (non exhaustive) des éléments du DOM
Document
createElement(tagName)
getElementsByTagName(tagName)
getElementById(elementId)
createTextNode(texte)
Document HTML/XHTML (hérite de document)
title : titre de la page
referrer, domain, URL
body
images, applets, links, forms, anchors, cookie [des collections]
NodeList
length
item(index)
...
INSA - ASI TechnoWeb : Javascript 31/39
Interaction avec HTML : le DOM (3/4)
Quelques éléments du DOM
...
node
nodeName, nodeValue, nodeType, parentNode
insertBefore(newChild, refChild), replaceChild(newChild, oldChild),
appendChild(newChild), removeChild(oldChild)
element
tagName
Élement HTML
id
lang
dir (sens de lecture : ltr/rtl)
style (font-family, font-size, color, outline, etc.)
INSA - ASI TechnoWeb : Javascript 32/39
Interaction avec HTML : le DOM (4/4)
Exemple
[Link]
<!DOCTYPE html>
<html>
<head>
< t i t l e>J a v a S c r i p t < / t i t l e>
<meta http − equiv= " c o n t e n t − t y p e " content= " t e x t / html ; c h a r s e t = u t f − 8 " />
</head>
<body onload= " j a v a s c r i p t : d e p a r t ( ) ; ">
<p id= " p a r a g r a p h e ">C e c i e s t un p a r a g r a p h e . </p>
< f o o t e r>
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / <!−−
function depart () {
v a r body = document . getElementsByTagName ( " body " ) [ 0 ] ;
v a r t e x t e 1 = document . c r e a t e T e x t N o d e ( " H e l l o ! " ) ;
body . a p p e n d C h i l d ( t e x t e 1 ) ;
v a r p a r a g r a p h e = document . g e t E l e m e n t B y I d ( " p a r a g r a p h e " ) ;
v a r t e x t e 2 = document . c r e a t e T e x t N o d e ( "Un mot e s t a j o u t é . " ) ;
paragraphe . appendChild ( texte2 ) ;
}
/ / −−>
< / s c r i p t>
</ f o o t e r>
</body>
</html>
INSA - ASI TechnoWeb : Javascript 33/39
Conseils de programmation
RTFM : [Link]
standards/[Link]
Programmer TRÈS proprement
Penser Flux et DOM : tous les éléments sont-ils chargés ? Ai-je
modi é des noeuds ? Quels événements pour quels actions ?
Utiliser les Plugins liés aux développement Web
(eg. Web Developer)
INSA - ASI TechnoWeb : Javascript 34/39
Les prototypes (1/6)
Notion d'objet en Javascript
Le Javascript 'objet'
Pas de véritable classe, uniquement des créations d'objet et la
possibilité de dé nir des propriétés
Création d'une `classe' d'objets par la dé nition de son constructeur
Accession aux champs et méthodes : `.'
Un objet est un prototype et est stocké comme un tableau associatif
Chaque "champ" peut être une variable d'instance ou une méthode :
objet .methode() ⇔ objet ["methode"]
fonctions = objets de premier ordre
Héritage par prototype
Polymorphisme partiellement supporté
INSA - ASI TechnoWeb : Javascript 35/39
Les prototypes (2/6)
Constructeur
Déclaration et utilisation d'une classe
function Rectangle ( lo , la ) {
this . longueur = lo ;
this . largeur = la ;
}
...
var unRectangle = new Rectangle (20 , 10) ;
...
var cote = unRectangle . longueur ;
INSA - ASI TechnoWeb : Javascript 36/39
Les prototypes (3/6)
La propriété prototype
Les classes Javascript ont une propriété prototype permettant d'ajouter
de nouvelles propriétés ou méthodes à une classe :
[Link]été = valeur;
Exemple
Rectangle . prototype . coul eur = " rouge " ;
Rectangle . prototype . surface = function () {
return t h i s . largeur * t h i s . longueur ;
}
var s u r f = unRectangle . s ur fa ce () ;
INSA - ASI TechnoWeb : Javascript 37/39
Les prototypes (4/6)
Exemple
[Link]
<p onmouseover= " j a v a s c r i p t : message ( ) ; ">
Corps du document .
</p>
< f o o t e r>
< s c r i p t type= " t e x t / j a v a s c r i p t " src= " a l e r t e . j s ">< / s c r i p t>
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / <!−−
f u n c t i o n Rectangle ( lo , l a ) {
t h i s . longueur = lo ;
this . largeur = la ;
};
Rectangle . prototype . cou leur = " rouge " ;
Rectangle . prototype . surface = function () {
return t h i s . longueur * t h i s . largeur ;
};
f u n c t i o n message ( ) {
v a r u n R e c t a n g l e = new R e c t a n g l e ( 1 0 , 2 0 ) ;
unRectangle . couleur = " vert " ;
a l e r t ( " u n R e c t a n g l e : "+u n R e c t a n g l e . c o u l e u r + " / " + u n R e c t a n g l e .
surface () ) ;
};
/ / −−>
< / s c r i p t>
</ f o o t e r>
INSA - ASI TechnoWeb : Javascript 38/39
Les prototypes (5/6)
L'héritage de prototype
Héritage de classe 6= Héritage de prototype
Dans le constructeur du prototype ls, appeler la méthode call du
prototype parent, avec les arguments nécessaires ;
⇒ Cela permet de créer le prototype ls
Faire hériter attributs et méthodes :
P r o t o F i l s . p r o t o t y p e = new P r o t o P a r e n t ( ) ;
Réassigner le constructeur :
ProtoFils . prototype . constructor = ProtoFils ;
INSA - ASI TechnoWeb : Javascript 39/39
Les prototypes (6/6)
Exemple
[Link]
< s c r i p t type= " t e x t / j a v a s c r i p t ">
/ / <!−−
f u n c t i o n Rectangle ( lo , l a ) {
t h i s . longueur = lo ;
this . largeur = la ;
};
Rectangle . prototype . surface = function () {
return t h i s . longueur * t h i s . largeur ;
};
function Carre ( c ) {
Rectangle . c a l l ( this , c , c ) ;
};
C a r r e . p r o t o t y p e = new R e c t a n g l e ( ) ; / / l ' h é r i t a g e se fait ici
Carre . prototype . constructor = Carre ;
f u n c t i o n message ( ) {
v a r u n C a r r e = new C a r r e ( 1 0 ) ;
a l e r t ( " unCarre : " + unCarre . s u r f a c e () ) ;
};
/ / −−>
< / s c r i p t>
