Vous êtes sur la page 1sur 48

Technologies du Web

JavaScript / DOM
SMI3
09-dec-14

JavaScript : Principe

Langage de script objet


Syntaxe style C / C++ / Java
Sensible la casse
Nest PAS du Java
Excut par le client Web
Peut tre dsactiv sur le client
Nombreux objets pour la manipulation HTML
Gestion des vnements HTML
Rendre les pages dynamiques (HTML+CSS+JS)
Haut niveau dincompatibilit
2

JavaScript : le codage
Comment intgrer du code JavaScript dans une
page HTML ?

Avec la balise Script


Avec un fichier externe
Avec les vnements

JavaScript : Avec la balise Script


<html>
<head>
<title> Titre de la page Web</title>
</head>
<body>
<script type="text/javascript">
<!-Masquer le script aux
script
navigateurs non compatibles
// -->
avec JavaScript
</script>
</body>
</html>
4

JavaScript : Avec la balise Script


<html>
<head>
<title> Titre de la page Web</title>
<script language="JavaScript">
<!-script
// -->
</script>
</head>
<body>
</body>
</html>
5

JavaScript : Avec un fichier externe


Les codes sont en annexe dans un fichier ; on
insre juste :
<script language="JavaScript"
src="url/fichier.js">
</script>

JavaScript : Avec les vnements


Gestionnaires d'vnements :
onEvenement="Action_JavaScript_ou_Fonction();"

Exemple du

Cliquez ici

<FORM>
<INPUT type="button" value= "Cliquez
ici" onClick = "alert('Vous avez bien cliqu
ici')">
</FORM>
7

JavaScript : Exemple
<html>
<head>
<title>Ma premire page Web</title>
</head>
<body>
<script type="text/javascript">
<!-document.writeln( Bonjour tout le
monde!") ;
// -->
</script>
</body>
</html>
8

JavaScript : Exemple
<html>
<head>
<title>Page dynamique</title>
</head>
<body>
<script type="text/javascript">
<!-date = new Date();
document.writeln("Nous sommes le ", date);
// -->
</script>
</body>
</html>
9

Variables
Dclaration de variables facultative
Variables non types la dclaration
var nom_variable ;
Typage dynamique laffectation
Types grs:

Nombres (10, 3.14)


Boolens (true, false)
Chanes ("Salut !", 'Salut !' )
null
undefined
10

Structures conditionnelles
if (condition)
{
instructions ;
}
[ else
{
instructions ;
} ]

11

Structures conditionnelles
switch (expression)
{
case tiquette :
instructions ;
break ;
case tiquette :
instructions ;
break ;
default :
instructions ;
}
12

Structures itratives
while (condition)
{
instructions ;
}

do
{
instructions ;
}
while (condition) ;
13

Structures itratives
for (instr ; condition ; instr)
{
instructions ;
}

for (variable in objet)


{
instructions ;
}
14

Commentaires
// Commentaire ligne
/* Commentaire multi-lignes */

15

Fonctions
Valeur de retour non type
Arguments non typs
// Dclaration
function ma_fonction(arguments)
{
instructions ;
return quelque_chose; // ou pas
}
ma_fonction(12) ; // Appel
16

Objets
Les lments manipuls par JavaScript et
affichs dans votre navigateur sont des objets

Classs selon une hirarchie pour pouvoir les


dsigner prcisment
Auxquels on associe des proprits et des mthodes
L'objet le plus grand est la fentre : window
Dans la fentre s'affiche une page document

JavaScript intgre aussi des objets usuels :

String, Number, Date, Math, Array

17

Objets
Pour accder cet lment, on utilise la notation pointe
window.document.form.textarea

18

Objets : proprits, mthodes,


vnements
Pour chaque objet sont dfinis
(1) Proprits (attrs)
(2) Mthodes
(3) Evnements
Exemple : objet Input
Proprits : name, type, defaultValue
Mthodes : focus(), blur(), select(), submit()
Evenements: OnClick(), Onfocus(), Onblur(),
19

Objets : proprits, mthodes,


vnements
Une mthode est une fonction (ou procdure) de
traitement de donnes associe un objet
Un vnement est une fonction (pas une
procdure!) toujours associe un objet mais
qui ragit en fonction des interventions de
l'utilisateur

Il utilise le clavier pour fournir des infos


Il slectionne l'objet avec la souris
Il spcifie des valeurs de l'objet avec la souris

Cette notion d'vnement est cruciale car elle


est la base du fonctionnement des pgms Internet
20

Objets prdfinis
window
alert(message)
// Message davertissement
confirm(message)
// Message de confirmation : retourne
true ou false
prompt(message, valeur_par_dfaut)
// Bote de saisie : retourne la chane
saisie

21

Objets prdfinis
document
write(message)
// Ecrire dans le document

writeln(message)
// Ecrire dans le document (retour la
ligne)

22

Chanes : Proprits & Mthodes


Proprits

length

Mthodes

charAt(index)
concat(chaine2, chaine3, )
indexOf(aiguille[, index])
split(separateur[, limite])
substr(debut[, taille])
substring(debut, fin) dernier caractre
toLowerCase()
toUpperCase()

(exclus).

23

Chanes : Exemples
var s = "Bon anniversaire Benjamin" ;
document.write(s.charAt(2)) ;
n
document.write(s.concat(" du groupe C12")) ;
Bon anniversaire Benjamin du groupe C12
document.write(s.indexOf("Benjamin")) ;
17
document.write(s.split(" ")) ;
Bon,anniversaire,Benjamin
document.write(s.toUpperCase()+s.toLowerCase()) ;
BON ANNIVERSAIRE BENJAMINbon anniversaire benjamin
document.write("15/08/2000".substring(0, 2)) ;
15
document.write("15/08/2000".substring(3, 5)) ;
08
24

Objet Math
Proprits

E, LN10, LN2, LOG10E, LOG2E, PI,


SQRT1_2, SQRT2

Mthodes

abs(val)
acos(val), cos(val),
exp(val), log(val)
floor(val), round(val), ceil(val)
max(val1, val2), min(val1, val2)
pow(val, puiss), sqrt(val)
random() // 0 1
25

Objet Math : Exemples


document.write(115.04+15) ;
130.04000000000002
(Euh ?...)
document.write(Math.PI) ;
3.141592653589793
document.write(Math.abs(-12.34)) ;
12.34
document.write(Math.floor(12.54)) ;
12
document.write(Math.round(12.54)) ;
13
document.write(Math.ceil(12.54)) ;
13
document.write(Math.random()) ;
0.394555831655689
26

Proprits & Fonctions suprieures


Proprits

Infinity, NaN, undefined

Fonctions

eval(chaine)
isFinite(nombre)
isNaN(objet)
parseFloat(chaine)
parseInt(chaine)
escape(chaine)
unescape(chaine)

27

Proprits & Fonctions suprieures


document.write(eval("Math.pow(3+2, 2)")) ;
25
document.write(isFinite(Math.log(0))) ;
false
document.write(isNaN("abcd")) ;
true
document.write("12.34"+2) ;
12.342
document.write(parseFloat("12.34")+2) ;
14.34

28

Tableaux
Objet Array
Dclaration
var tab1 = new Array(taille) ;
var tab2 = new Array(1, "a", 9, ) ;
index 0
1
2
Utilisation
window.alert(tab2[0]) ; // 1
tab2[2] = 6 // 6 remplace 9

Accroissement automatique de la taille


var tab1 = new Array(2) ;
tab1[200] = 5 ;
29

Tableaux
Parcours
var tab2 = new Array(1, "a", 9) ;
tab2[200] = 12 ;
for (i in tab2)
window.alert("tab2[" + i + "] = "
+ tab2[i]) ;
// tab2[0] = 1
// tab2[1] = a
// tab2[2] = 9
// tab2[200] = 12
30

Tableaux : Proprits & Mthodes


Proprits

length

Mthodes

concat(tab2, tab3, )
join(spar)
pop()
push(val1, val2, )
shift()
unshift(val1, val2, )
slice(dbut[, fin])
31

Contrle de formulaires

Vrifier la cohrence de la saisie


Contrles sur le client
vite les transmissions client / serveur
Contrles possibles:

Prsence de valeur
Numrique / Chane
Expressions rgulires

vnement onSubmit

32

Objets commandes de formulaires

Text
Textarea
Hidden
Password
CheckBox
Radio (/!\ tableau de /!\)
Submit / Reset
Select
Option
FileUpload
33

Formulaires : <form>
Proprits

Name
:
Action :
Method :
Target :
Encoding

Nom du formulaire
Adresse du script de serveur excuter
Mthode d'appel du script (get ou post)
Destination du retour du formulaire

:Type d'encodage du formulaire

Mthodes

reset():Rinitialise avec les valeurs par dfaut


submit(): Dclenche l'action du formulaire

Evnements

onSubmit():Dtecte la soumission du formulaire


onReset():Dtecte la rinitialisation
34

<form>: Exemple
<html><head><title>Contrle</title>
<script language="javascript">
function verif() {
if (document.formu.txt.value != '')
return window.confirm('Envoyer ?') ;
return false ; }
</script></head><body>
<form name="formu" action="URI" method="GET"
onSubmit="return verif() ;">
<input type="text" name="txt">
<input type="submit" value="Envoyer">
</form></body></html>
35

<input>: mthodes et vnements


Mthodes

focus():Donne le focus (ou le curseur ou la main)


Blur():Enlve le focus
Click(): Simule un clic (sur un bouton)

Evnements

onFocus():Dtecte la prise de focus


onBlur() :Dtecte la perte de focus
onClick():Dtecte le clic souris (sur un bouton)
onChange() :Dtecte les changements

36

<input>: Exemple
<html><head><title>Contrle</title>
<script language="javascript">
function Confirmer() {
return window.confirm('Voulez-vous
vraiment soumettre ?') ;}
</script></head><body>
<form >

<input type="password" size="6" maxlength="6"


name="pwd" onFocus="window.status='Entrez
votre code'">
<input type="submit" value="Commander"
onClick="return Confirmer();">
37
</form></body></html>

Objet this
Il est fastidieux d'accder aux lments de
formulaire par toute la chane
document.forms.elements
Un objet JavaScript this permet de raccourcir ce
chemin d'accs
this reprsente l'objet JavaScript en cours
d'utilisation

38

Objet this : exemple


Quand un zone de texte reoit l'attention (le focus), un
message apparat dans la barre de statut pour indiquer
son nom; le message disparat quand le champ perd le
focus
<form name="formfocus">
<input type="text" value="contenu"
name="champtexte"
onFocus="window.status =this.name"
onBlur="window.status = " >
</form>
La variable window.status contient le message avec le
nom du champ obtenu par this.name quivalent ici
document.formfocus.champtexte.name
39

Objet this : exemple


<form name='formu' onSubmit='return verif(this);'>
<input type='text' name='texte'><br>
<select name='sel'>
<option>?
<option value=1>Un
<option value=2>Deux
</select><br>
<input type='radio' name='rad' id='rad1'>
<label for='rad1'>oui</label>
<input type='radio' name='rad' id='rad2'>
<label for='rad2'>non</label><br>
<input type='checkbox' name='chk' id='chk1'>
<label for='chk1'>OK</label><br>
<input type='submit' value='Envoyer'>
</form>
40

Objet this : exemple


<form name='formu' onSubmit='return verif(this);'>
<input type='text' name='texte'> ...
<script type="text/javascript">
function verif(f) {
... f.texte.value ; }
</script>
<form name='formu' onSubmit='return verif();'>
<input type='text' name='texte'> ...
<script type="text/javascript">
function verif(f) {
... document.formu.texte.value ;
... document.forms[0].elements[0].value ;
... document.forms["formu"].elements["texte"].value
; }
</script>
41

Formulaires : accs aux champs


<script type="text/javascript">
function verif(f)
{
window.alert(f.texte.value) ;
window.alert(f.sel.selectedIndex) ;
window.alert(f.sel[f.sel.selectedIndex].text) ;
window.alert(f.sel[f.sel.selectedIndex].value) ;
window.alert(f.rad[0].checked) ;
window.alert(f.chk.checked) ;
return false ;
}
</script>

42

Dates : Proprits & Mthodes


Mthodes

Constructeur
getDay(), attention de 0 (dimanche) 6 (samedi)
getDate() / setDate()
getMonth() / setMonth(), attention de 0 11
getHours()/ setHours()
getMinutes() / setMinutes()
getTime() / setTime()
getYear() / setYear() / getFullYear() / setFullYear()
parse()

43

Dates : Exemples
var today = new Date()
Tue Dec 08 2014 17:11:36 GMT
document.write(today);
var birthday = new Date(95,11,17)
document.write(birthday); Sun Dec 17 1995 00:00:00 GMT
document.write(birthday.getDay()) ;
0

document.write(birthday.getDate()) ;
17

birthday.setDate(25) ;
document.write(birthday) ;
Mon Dec 25 1995 03:24:00 GMT

44

Images : Proprits & Mthodes


Proprits

name
src
width
height

Mthodes

constructeur
Image()
Image(largeur, hauteur)

45

Images: Exemples
<script type="text/javascript">
// Une image
rouge = new Image(100, 100) ;
rouge.src = 'rouge.gif' ; // Prchargement
// Une autre image
vert = new Image(100, 100) ;
vert.src = 'vert.gif' ; // Prchargement
// Modification de la 13e image de la page Web
document.images[12].src = rouge.src ;

// Modification de la 15e image de la page Web


document.images[14].src = rouge.src ;
</script>
46

vnement onMouseOver / Out


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>Rollover</title>
<script type='text/javascript' language='JavaScript'>
<!
function change(image, src) {
document.images[image].src = src ; }
// -->
</script>
</head>
<body>
<a href='#'
onMouseOver="change('image1', 'vert.gif')"
onMouseOut="change('image1', 'rouge.gif')">
<img name='image1' width='100' height='100'
src='rouge.gif' alt='disque'></a>
</body>
</html>
47

vnement onKeyUp/onKeyDown
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>onKeyUp</title>
<script type='text/javascript' language='JavaScript'>
<!
function maj() {
document.f.mail.value =
document.f.prenom.value.toLowerCase()+'.'
+document.f.nom.value.toLowerCase() ; }
// -->
</script>
</head> <body>
<form name='f'>
Nom
<input type='text' name='nom'
onKeyUp='maj()'><br>
Prenom <input type='text' name='prenom' onKeyUp='maj()'><br>
Login <input type='text' name='mail' disabled>
</form>
</body> </html>
48