TechWeb 09-12-2014

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>
<!-document.writeln( Bonjour tout le
monde!") ;
// -->
</script>
</body>
</html>
8
JavaScript : Exemple
<html>
<head>
<title>Page dynamique</title>
</head>
<body>
<!-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

<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

<form name='formu' onSubmit='return verif(this);'>
<input type='text' name='texte'> ...
function verif(f) {
... f.texte.value ; }
</script>
<form name='formu' onSubmit='return verif();'>
<input type='text' name='texte'> ...
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

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
// 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

TechWeb 09-12-2014

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TechWeb 09-12-2014

Uploaded by

Copyright:

Available Formats

Technologies du Web

Langage de script objet

Avec la balise Script

JavaScript : Avec la balise Script

JavaScript : Avec la balise Script

JavaScript : Avec un fichier externe

JavaScript : Avec les vnements

Nombres (10, 3.14)

for (variable in objet)

Classs selon une hirarchie pour pouvoir les

JavaScript intgre aussi des objets usuels :

String, Number, Date, Math, Array

Objets : proprits, mthodes,

Objets : proprits, mthodes,

Il utilise le clavier pour fournir des infos

Cette notion d'vnement est cruciale car elle

Chanes : Proprits & Mthodes

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

Objet Math : Exemples

Proprits & Fonctions suprieures

Infinity, NaN, undefined

Proprits & Fonctions suprieures

Accroissement automatique de la taille

Tableaux : Proprits & Mthodes

Vrifier la cohrence de la saisie

Objets commandes de formulaires

:Type d'encodage du formulaire

reset():Rinitialise avec les valeurs par dfaut

onSubmit():Dtecte la soumission du formulaire

<input>: mthodes et vnements

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

onFocus():Dtecte la prise de focus

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

Objet this : exemple

Objet this : exemple

Objet this : exemple

Formulaires : accs aux champs

Dates : Proprits & Mthodes

Images : Proprits & Mthodes

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

vnement onMouseOver / Out

You might also like