pour dynamiser le code HTML et CSS

Transcription

1
J
JavaScript
S ipt
pour dynamiser
le code HTML et CSS
Mod.IntegWeb
MMI1
2014/2015
Généralités
2
CSS
HTML 1
Le serveur web répond aux
demandes de l’utilisateur en
envoyant des pages HTML
HTML 2
HTML 3
Demandes de
l’utilisateur
SERVEUR WEB
CLIENT
Généralités
3
CSS
Le code JavaScript est
exécuté dans le navigateur
pour répondre aux
demandes de l’utilisateur
HTML 1
JAVASCRIPT
HTML 2
HTML 3
SERVEUR WEB
Demandes de
l’ tili t
l’utilisateur
CLIENT
Généralités
Introduction
 JavaScript est utilisé en complément du code HTML pour:
- afficher des informations variables telles que la date, l’heure
- interagir avec les utilisateurs par le biais de boites de dialogues personnalisées
- créer des menus dynamiques
 Le langage JavaScript permet de développer de véritables applications
fonctionnant exclusivement dans le cadre d'Internet.(Webmail)
 JavaScript c’est simplement du texte intégré dans la page HTML
- Pas besoin de compilateur
- exécution dans le navigateur
- n’utilise pas les ressources du serveur
 JavaScript est de plus en plus utilisé sur le net
- Majorité des sites webmail, boutique en ligne, forum, utilise JS
- Les utilisateurs bloque de moins en moins JS dans les navigateurs
- Les risques avec JS beaucoup plus faible qu'avec
qu avec Flash
Flash, java et autres
outils
4
Généralités
5
Définition
 JavaScript est
- un langage orienté objet
- destiné à créer de programmes appelés scripts
- intégré aux pages HTML
- directement exécutés par un programme navigateur (browser, IE, Firefox, Opéra,
Chrome,…)
 JavaScript n’a aucun rapport avec le langage Java
 JavaScript est un langage de script simplifié orienté objet dont la syntaxe est
basée sur celle du C ou php et de Java.
 Le langage JavaScript a été initialement élaboré par Netscape en
association
i i avec S
Sun MicroSystem.
Mi S
Plus tard, Microsoft développera
pp
son p
propre
p langage
g g JavaScript
p officiellement
connu sous le nom de JScript.
Généralités
Possibilités
 Avec JavaScript il est possible de créer des pages HTML dynamiques
- en prenant en compte des données fournies par l’utilisateur
- en enregistrant des données dans des variables ou des objets
- en dialoguant avec l’utilisateur par le biais de boîtes de dialogues
- en gérant des menus dynamiques, animés, évoluant en fonction du contexte
- de récupérer sur le serveur des données (processus AJAX)
 JavaScript est capable de modifier la structure d’une page HTML
- en modifiant l’arborescence du DOM (Document Object Model)
- en modifiant les propriétés des objets constituant la page
 JavaScript est capable de modifier les propriétés de style
- en modifiant les attributs de style des éléments de la page
- en modifiant
difi t les
l propriétés
iété CSS affectées
ff té par une ffeuille
ill d
de style
t l
 De nombreuses bibliothèques JavaScript sont disponibles pour étendre les
possibilités du langage et fournir des modules assurant des fonctions
évoluées : gestion d’effets d’affichage, transitions, outils d’affichage
d’images, de menus animés, gestion de drag-and-drop, …
6
Historique et versions
Le langage JavaScript a été initialement élaboré par Netscape en
association avec Sun MicroSystem. (1995)
Les versions de JavaScript
p sont basées sur celle de l’ECMAScript
p
généralement abrégé ES.
ES 1 et ES 2 (1995) versions initiales (très limitées)
ES 3 (1999) version fonctionnant sur tous les navigateurs (sauf
anciennes version d’IE supportant uniquement JScript)
ES 4 version abandonné en raison de modifications importantes
qui ne seront pas implémentées dans tous les navigateurs
ES 5 ((2009)) dernière version implémenté
p
dans les derniers
navigateur
ES 6 futur version actuellement en développement
7
Résumé
JavaScript est un langage de programmation interprété
JavaScript est utilisé majoritairement dans des pages
Web
Comme HTML, JavaScript est exécuté par le navigateur
de l’internaute
l internaute
JavaScript est standardisé par l’ECMA International
sous le nom d’ECMAScript
d ECMAScript
La dernière version standardisée de JavaScript est
b é sur l’ECMAS
basée
l’ECMAScript
i t 5,
5 sortie
ti en 2009
La nouvelle version V6 devrait être disponible en 2015
8
9
Le langage JavaScript
coursdraoult.blogspot.fr
Mod.IntegWeb
MMI1
2014/2015
Premiers pas
JavaScript est un langage essentiellement utilisé avec l’HTML. Il sera donc intégré au
cœur d
d’une
une page HTML
HTML.
Premier exemple : afficher une boite de dialogue
<!DOCTYPE html>
<html>
<head>
<title> Bonjour le monde </title>
</head>
<body>
<script>
j
le monde’);
)
alert ((‘Bonjour
</script>
</body>
</html>
10
Le langage JavaScript
Fonctions minimales pour commencer :
alert("message"); :
cette fonction permet l'affichage d'une boite d'alerte. Cette boite de dialogue appartient au
navigateur.
navigateur
prompt("message" , "valeur par défaut"); :
Cette fonction affiche une boite de dialogue invitant l'opérateur
l opérateur à saisir une réponse au
message affiché. Elle retourne alors le texte saisi si l'opérateur à choisi OK ou la valeur
null si l'opérateur à choisi ANNULER.
confirm("message"); :
g contenant le message
g et deux boutons
Cette fonction affiche une boite de dialogue
permettant à l'opérateur de répondre la proposition du message.
Elle retourne false pour le bouton [ANNULER] et true pour le bouton [OK].
11
La syntaxe de JavaScript
12
La syntaxe de JavaScript est relativement simple et comparable à la syntaxe du langage
C ou PHP.
PHP D
D’une
une manière générale,
générale les instructions doivent être séparées par un pointpoint
virgule placé à la fin de chaque instruction.
Exemples :
Instruction_1;
Instruction 2;
Instruction_2;
Instruction_3;
Ou
Instruction_1; Instruction_2; Instruction_3;
Remarque
q : il est p
possible de rencontrer des codes JavaScript
p sans ;
il faut alors qu’il n’y ait pas d’ambiguïté sur la fin de l’instruction pour l’interpréteur, (retour
à la ligne).
Attention alors à la compression des scripts
Pour éviter les problèmes TOUJOURS terminer les instructions par un point-virgule ;
La syntaxe de JavaScript
JavaScript n’est pas sensible aux espaces, ont en profitera pour structurer correctement
les programmes en appliquant l’indentation.
l’indentation
Exemples :
function Bidule(A,B) {
if ( A > B ) {
alert( " A plus grand que B " );
} else {
plus p
petit ou égale
g
à B" );
alert ( " A p
}
// comparaison de A et B
// affichage message A>B
// affichage
g message
g A<=B
}
Les commentaires :
Commentaires en fin de ligne 
Commentaires sur plusieurs lignes 
// le commentaire
/* première ligne du commentaire
seconde ligne
dernière ligne
*/
13
Les instructions
Les Instructions
Nous avons trois type d'instructions : l'affectation = , l’appel de fonction, les structure de
contrôles : les tests conditionnels et les boucles.
Opérateur d'affectation:
d affectation:
UneVariable = 5;
// on affecte la valeur 5 à la variable
Appel de fonction :
 Appel d’une fonction retournant une valeur :
L V i bl = NomFonction
La_Variable
N F
ti ();
()
 Appel d’une fonction ne retournant pas de valeur :
NomFonction ();
 Appel d’une fonction recevant un paramètre et retournant une valeur :
La Variable = NomFonction ( 5 );
La_Variable
14
Les instructions
Les structures de contrôle :
Les tests conditionnels :
if ( Nb == 2) {
Bloc d'instructions si conditions vraie
} else {
Bloc d'instructions si conditions fausse
}
Les boucles :
do{{
bloc d'instructions exécutées tant que la condition est vraie
}
while( A < 5 );
15
Où placer le code JavaScript?
Le code JavaScript est inséré dans la page HTML au moyen de la balise <script>.
Dans cette balise on trouve l'attribut
l attribut type qui permet d'indiquer
d indiquer le type du langage utilisé
utilisé.
Exemple : HTML 4 et XHTML 1.x
Exemple : HTML 5
<script type="text/javascript" >
<script >
... Code
C d JJavaScript
S i t ...
... Code
C d JJavaScript
S i t
...
</script>
</script>
Compatibilité W3C :
Il faut utiliser des commentaires d'encadrement
<script type=
type="text/javascript"
text/javascript >
<!-... Code JavaScript ...
// >
//-->
</script>
16
17
On peut placer le code JavaScript à différents endroits dans la page HTML :
Dans l'élément <head> : emplacement généralement proposé, mais pas forcement idéal.
Défauts :
- Peut ralentir le chargement de la page
- Risque de dysfonctionnement du code s'il est exécuté au chargement et qu'il fait
page
g p
pas encore chargés.
g
référence à des éléments de la p
(sinon utilisation de l'événement onload)
Avantages :
- les fonctions de ce code sont disponibles lors du chargement du contenu de la page
(autorise l'insertion d'appel de fonction dans le contenu HTML).
- Organisation et localisation du code au début de la page HTML.
Pour palier aux défauts évoqués, on peut implanter le code JavaScript en fin de page
HTML juste avant la balise </body>, mais attention il ne faut pas d'appel de fonction de ce
code
d inséré
i é é dans
d
l éléments
les
élé
t HTML.
HTML
Pour mémoire : il est également possible d'implanter du code JavaScript au milieu du code
HTML, mais c'est à éviter.
Dans un fichier externe :
On peut également retrouver le code JavaScript dans un fichier externe. Généralement le
code contenu dans un fichier externe correspond à des fonctions utilisées dans plusieurs
page d'un
d un site Web
Web.
Ces fichiers sont généralement des bibliothèques de fonctions ou des extensions de
JavaScript (Framework : Prototype
Prototype, Dojo...
Dojo ou jQuery) .
Un fichier externe JavaScript portera l'extension .js
<body>
<script
p src= "MesFonctions.js"
j ></script>
p
( en html 5))
</body>
Evidemment le fichier "MesFonctions.js" sera dans le même répertoire que le fichier
HTML, sinon on ajoutera le chemin du répertoire contenant le fichier.
18
19
LE DOM
Document Object
j
Model
Le Navigateur
Navigateur
image
Champ de saisie
Window
20
Window
Document
L'objet document
21
L'objet document représente la page Web.
Le document peut être vue comme un arbre
<!doctype html>
<head>
<html>
<head>
<meta>
<title>
<meta charset="utf-8" />
<title>Le titre de la page</title>
#texte
</head>
<body>
<div>
<p>Un peu de texte <a>et un lien</a></p>
</div>
</body>
</html>
<html>
<body>
<div>
<p>
#texte
<a>
#t t
#texte
Le DOM et JavaScript
Exemple
JavaScript nous permet donc de manipuler et d'éditer les éléments d'une page web
Accès aux éléments :
getElementById() :
Depuis le DOM-2 nous avons à notre disposition cette méthode qui nous permet de faire
référence aux éléments de la page possédant un identifiant id dans ses attributs.
getElementsByTagName() :
Cette méthode permet de récupérer, sous forme d'un tableau, tous les éléments d'une
famille de balises.
Exemple : récupérer toutes les div d'une page html
var Lesdiv = document.getElementsByTagName ('div');
for (var i= 0, c= Lesdiv.length ; i <c ; i++ ) {
alert("Element n° " + (i+1) + " : " + Lesdivs [ i ] );
}
Remarque : si on remplace 'div' par '*' le tableau contient tous les éléments de la page
22
getElementsByName() :
Cette méthode permet de récupérer, sous forme d'un tableau, tous les éléments ayant la
même valeur sur l'attribut Name.
Exemple avec une page HTML pour les attributs name = "Test"
Test
var LesElements = document.getElementsByName ('Test');
for (var i=
i 0,
0 c=
c LesElements .length
length ; i <c ; i++ ) {
alert("Element n° " + (i+1) + " : " + LesElements [ i ] );
}
Attention : cette méthode n'est plus supporté par html5.
propose
p
les méthodes suivantes :
La nouvelle norme p
querySelector() et querySelectorAll()
Ces nouvelles méthodes ne sont pas encore supportées par tous les navigateurs, en
attendant des bibliothèques telle que jQuery propose des méthodes équivalentes de
sélection
23
Démo
Modification des attributs
JavaScript nous permet l'accès aux attributs des balises :
En lecture : getAttribute ( )
La méthode getAttribute reçoit en paramètre le nom de l'attribut : 'href', 'name', 'id' ...
En écriture : setAttribute ( )
La méthode setAttribute reçoit en paramètre le nom de l'attribut et la nouvelle valeur.
Attention : lors de l'utilisation des ces méthodes il faut évidement que le nom d'attribut
p
bien à un attribut existant.
donné aux fonctions,, corresponde
Si l'attribut n'est pas définit ou si c'est un attribut qui n'existe pas pour l'élément la méthode
retourne la valeur null.
24
25
Exemple de modification d'un lien dynamiquement:
<body>
<a id="L1" href="http://www.orange.com">Un lien modifié dynamiquement</a>
<script>
i t
var lien = document.getElementById('L1');
var href = lien.getAttribute('href');
alert(href);
lien.setAttribute('href', 'http://www.google.fr');
</script>
</body>
// On récupère l'attribut href
// On affiche le lien
// On modifie l'attribut href
26
Pour JavaScript la plupart des éléments autorisent également un accès direct aux
attributs.
Exemple :
<a id="L1" href='http://google.fr' > google </a>
<script>
var lien = document.getElementById( 'L1' );
li h f = "http://bing.fr";
lien.href
"htt //bi f "
// modification
difi ti direct
di t de
d l'URL
</script>
Attention cas particuliers :
pour l'attribut class il faut utiliser className
pour l'attribut for de <label> il faut utiliser htmlFor
p
27
Modification du contenu
La propriété innerHTML permet de récupérer le code HTML enfant d'un élément
sous forme d'une chaine de caractère.
Exemple :
<div id="D1">
<a id=
id='L1'
L1 href=
href='http://google
http://google.fr
fr' > google </a>
</div>
<script>
script
var laDiv = document.getElementById( 'D1' );
var ChaineHTML = laDiv.innerHTML;
// récupération du code HTML
</script>
ChaineHTML contient alors "<a id='L1' href='http://google.fr'
p g g
>g
google
g </a>"
La propriété innerHTML permet également de modifier le code HTML enfant d'un
élément en lui affectant une chaine de caractères contenant du code HTML.
Exemple :
<div id="D1">
<a id=
id="L1"
L1 href=
href='http://google
http://google.fr
fr' > google </a>
</div>
<script>
script
var laDiv = document.getElementById( 'D1' );
// on affecte un nouveau code HTML dans la div
laDiv innerHTML = "<a id="L1" href='http://bing.fr'
laDiv.innerHTML
href='http://bing fr' > bing </a>";
</script>
Le code HTML contenu dans la div est maintenant :
"<a id="L1" href='http://bing.fr' > bing </a>"
28
Les propriétés
L
iété innerText
i
T t ett textContent
t tC t t sontt utilisable
tili bl comme innerHTML,
i
HTML mais
i
elles ne retournent ou ne modifient que le texte (pas les balises html).
Pourquoi deux propriétés différentes ?  L
L'incompatibilité
incompatibilité des navigateurs
navigateurs.
innerText à été introduite dans Internet Explorer mais jamais standardisée.
La propriété standardisée est : textContent , interprétée sur tous les navigateurs
et sur IE > 9; chrome accepte le deux, mais pas FireFox (textContent)....
Problème : comment utiliser ces fonctions avec tous les navigateurs ?
Avec JavaScript, il est possible à l'aide d'une simple condition de tester si le
navigateur prend en charge une méthode ou une propriété.
Exemple :
if ( objet.innerText ) {
alert(" le navigateur est Internet Explorer ");
} else
l {
alert (" le navigateur n'est pas Internet Explorer ");
}
29
Exemple
E
emple pl
plus
s complet a
avec
ec l'affichage d'
d'un
n conten
contenu a
avec
ec la gestion d
du ttype
pe de na
navigateur.
igate r
<body>
<div id="D1">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var ladiv = document.getElementById(
document getElementById('D1');
D1 );
var txt = '';
if (ladiv.textContent) {
// « textContent » existe ? Alors on s'en sert !
txt = ladiv.textContent;
} else if( ladiv.innerText) {
// « innerText » existe ? Alors on doit être sous IE.
txt = ladiv.innerText ;
} else {
// Si aucun des deux n'existe,, pas
p de texte
txt = '';
// on force une chaîne de caractères vide
}
alert(txt);
</script>
</body>
30
Le DOM, JavaScript et les événements 31
Les événements :
IlIls permettent
tt t de
d déclencher
dé l
h une ffonction
ti llorsqu'une
'
action
ti estt produite
d it par
l'utilisateur ou par un événement interne au navigateur.
Par exemple : une fenêtre alert() apparait lorsque la souris survole un élément de
la page html.
Exemple :
<span
span onmouseover
onmouseover="alert(
alert( ' survol de la zone'
zone );
);"> Texte de la zone </span>
/span
Ici l'événement mouseover fait appel au code JavaScript alert('survol de la zone')
attention à la syntaxe on ajoute on devant le nom de l'événement.
Les événements :
Événement
Syntaxe
Déclencheur
click
onclick
Cliquer sur l'élément
dblclick
ondblclick
Double-cliquer
q
sur l'élément
mouseover
onmousover
Faire entrer le curseur de la souris sur l'élément
mouseout
onmousout
Faire sortir le curseur de la souris de l'élément
mousedown
onmousedown Appuyer sans relâcher le bouton gauche de la souris sur
l'élément
mouseup
onmouseup
Relâcher le bouton gauche de la souris sur l'élément
l élément
mousemove
onmousmove
Déplacer la souris sur l'élément
keydown
onkeydown
Appuyer sans relâcher une touche du clavier sur l'élément
keyup
onkeyup
Relâcher une touche du clavier sur l'élément
keypress
onkeypress
Frapper (appuyer puis relâcher) une touche du clavier sur
l élément
l'élément
Les événements :
Événement
syntaxe
déclencheur
focus
onfocus
Cibler un élément placer par exemple le curseur text dans un
p de saisie
champ
blur
onblur
Annuler le ciblage d'un élément, quitter un champ de saisie
change
onchange
Le contenu d'un champ de saisie (input, textarea, ...) à
changé
h
é
select
onselect
Sélection d'un contenu d'un champ texte
submit
onsubmit
Envoyer un formulaire
reset
onreset
Réinitialiser un formulaire
Une première utilisation sur les liens :
O utilise
On
tili lla b
balise
li <a> pour appeler
l d
du code
d JJavaScript
S i t:
<a href="#" onclick="alert('Vous avez cliqué !'); " > Cliquez ici </a>
href="#" : le lien pointe sur une cible interne à la page qui n'existe pas !
onclick : on détermine sur quel événement le code JavaScript sera exécuté
alert('Vous avez cliqué !'); : le code JavaScript à exécuter
Attention
A
i : avec cet exemple,
l lle clic
li sur ce lilien dé
déclenche
l
h bi
bien lle code
d JJavaScript
S i
mais tente également de suivre le lien "#" qui n'existe pas, le navigateur
repositionne alors votre page au début. (cela risque de perturber l'utilisateur)
Solution : il faut neutraliser le lien
<a href="#" onclick="alert('Vous
(
avez cliqué
q !');
); return false;; " > Cliquez
q
ici </a>
return false; : bloque le lien
Demander la confirmation de suivre un lien:
On ajoute
O
j t donc
d
à lla b
balise
li <a> lle code
d JJavaScript
S i t assurantt lla d
demande
d d
de
confirmation de suivre le lien :
<a href=
href="http://google
http://google.fr
fr" onclick=
onclick="return
return confirm(
confirm('Confirmez-vous
Confirmez-vous ?
?');
); " >Google</a>
href="http://google.fr" : le lien pointe sur le site de google
onclick : exécute le code qui retourne la réponse de la boite de dialogue confirm()
L'utilisation des liens pour déclencher directement du code JavaScript est simple et
rapide, mais il ne faut pas oublier que c'est plutôt utiliser pour naviguer entre les
pages
p
g web.
Idéalement on utilisera la balise <button>.
Les événements avec le DOM-1 et le DOM-2 :
Précédemment
P
é éd
t nous n'avons
'
pas utilisé
tili é le
l DOM pour gérer
é les
l événements,
é é
t l'appel
l'
l
direct dans les balises du code JavaScript n'utilise pas l'API DOM.
Il existe d'autres
d autres techniques de gestion des événements à connaître
connaître.
DOM-1 : on n'affect plus l'événement dans la code HTML mais dans du code JS
<span id="S1">Cliquez-moi !</span>
<script>
var element = document.getElementById(
document getElementById('S1');
S1 ); // récupération référence objet
element.onclick = function() { alert("Vous m'avez cliqué !"); };
// affectation d'une fonction JS sur l'événement onclick de l'élément
</script>
Cette méthode valable sur tous les navigateurs est considérée comme obsolète, mais
par les p
programmeurs.
g
elle reste très souvent utilisée p
Pour la suppression de l'événement : element.onclick = function() {}; // fonction vide
DOM-2
DOM
2 : Il permett l'affectation
l' ff t ti de
d plusieurs
l i
fonctions
f
ti
sur un même
ê
événement
é é
t d'un
d'
objet. C'est une caractéristique qui facilite la création de bibliothèques qui exploite les
événements.
Attention : problème de compatibilité avant IE 9.
Exemple
p :
var element = document.getElementById('S1'); // récupération référence élément
// création d'une
d une fonction anonyme et récupération d'une
d une référence sur cette fonction
var LaFonction = function() {alert("Vous m'avez cliqué !"); };
// ajout de la fonction dans le gestionnaire d'événements
d événements de l'objet
l objet pour le click
element.addEventListener('click', LaFonction, false);
Pour la suppression de l'événement :
element.removeEventListener('click',UneFonction, false);
Démo
DOM 2 : Problème
DOM-2
P blè
d
de compatibilité
tibilité avec IE
Avant IE9 nous avons les deux méthodes suivantes pour gérer les événements du
DOM-2 : attachEvent() et detachEvent().
detachEvent()
Exemple de code pour gérer la compatibilité des navigateurs :
function addEvent(element,
(
, event,, func)) {
if (element.addEventListener) {
// l'élément possède la méthode addEventListener()
element addEventListener(event func,
element.addEventListener(event,
func false);
} else {
// l'élément ne possède pas la méthode addEventListener()
element attachEvent('on'
element.attachEvent(
on + event,
event func);
}
}
// appell de
d la
l fonction
f
ti d'ajout
d' j t d'événements
d'é é
t sur un élé
élémentt
addEvent(element, 'click', function() { /* le code de la fonction */ });
Le DOM, L'objet event
39
L'objet event : il fournit un ensemble d'informations sur l'événement déclenché. Par
exemple quelles touches sont enfoncées, les coordonnées du curseur de la souris...
• Cet objet est particulier car il n'existe que lorsqu'un événement est déclenché.
• On ne peut y accéder que dans une fonction déclenchée par un événement
événement.
• Le DOM passe en paramètre à la fonction l'objet événement "event".
Attention les versions < IE9 ne supporte pas ce mode de fonctionnement
fonctionnement, il faut
récupérer les information dans window.event.
Exemple de prise en compte de l'objet
l objet event
element.onclick = function (e) {
alert(e.type);
};
ou
element.addEventListener(
l
t ddE
tLi t
( 'click'
' li k' , function(e)
f
ti ( ) { alert(e.type);
l t( t
) } , false
f l );
Démo
L'objet event : Les principales propriétés
ttype : permett de
d savoir
i quell ttype d'é
d'événement
é
t s'est
' t dé
déclenché.
l
hé
Elle contient le nom de l'événement sans le on.
target: retourne une référence sur l'objet
l objet qui à déclenché l'événement
l événement
e.target sera équivalent à this, attention valable uniquement en DOM-2
Exemple
p : changement
g
du texte sur un <span>
p
après
p
un clic
<span id="S1">Cliquez-moi !</span>
<script>
var LeSpan = document.getElementById('S1');
LeSpan.addEventListener('click', function(e) {
g
= 'Vous avez cliqué
q !';;
e.target.innerHTML
}, false);
</script>
40
L'objet event : Les principales propriétés
altkey : booléen indiquant si la touche alt est enfoncée
ctrlkey : booléen indiquant si la touche ctrl est enfoncée
shiftkey : booléen indiquant si la touche shift est enfoncée
Keycode
y
: code de la touche p
pressée (p
(pour l'événement keypress)
yp
)
clientX (pageX) : coordonnée X de la souris dans la fenêtre
clientY (pageY) : coordonnée Y de la souris dans la fenêtre
screenX : coordonnées X de la souris sur l'écran
screenY : coordonnées Y de la souris sur l'écran
l écran
button : renvoie le bouton de la souris
41
Démo
L'objet event : exemple d'affichage des coordonnées de la souris sur le document
function afficheSouris(e){
var AFF = document.getElementById("Aff");
// récupération de la position XY
var EV = e || window.event; // gestion IE ou les autres navigateurs
X = EV.clientX || EV.pageX; // idem
Y = EV.clientY
EV clientY || EV.pageY;
EV pageY; // idem
var Chaine = "X : " + X + " Y : " + Y; // construction de la chaine d'affichage
AFF.innerHTML = Chaine;
// affichage de la chaine dans la page
}
// implantation du gestionnaire d'événement sur le document
document onmousemove = afficheSouris;
document.onmousemove
<body>
g de la p
position de la souris
Affichage
<div id="AFF"> </div>
</body>
42
Le DOM, JavaScript et les Formulaires 43
Les formulaires: ils sont composés de contrôles permettant à un utilisateur d'entrer
des informations. On retrouve les éléments suivants :
<input>
type= "text"
text
type= "hidden"
type= "password"
type= "radio"
type= "checkbox"
type= "submit"
type= "reset"
"
"
champ de saisie texte
champ caché
champ de saisie spécialisé mot de passe
bouton radio
case à cocher
bouton envoi formulaire
b
bouton
reset fformulaire
l i
<select>
boite de liste
Les formulaires: accès à la valeur d'un champ texte
E
Exemple
l :
<script>
var T = document.getElementById(
document getElementById("CT");
CT );
var contenu_champ = T.value;
T.value = "Nouveau contenu";;
</script>
<body>
<form . . .
// récupération référence
// lecture du contenu
// modification du contenu
>
<input type="text" id="CT" value="Valeur initiale" />
</form>
Les formulaires: accès à une case à cocher
On obtient l'état
l état d
d'une
une case à cocher avec la propriété checked
Exemple :
<script>
var C = document.getElementById("case1");
if (C.checked) {
alert ("la case est cochée");
} else {
alert ("la case n'est pas cochée");
}
</script>
<body>
<form . . .
>
<input
p type="checkbox"
yp
id="case1" value="Valeur case" />
<input type="checkbox" id="case2" value="Valeur case" />
</form>
Les formulaires: accès a une boite de liste
on gère les listes déroulantes avec les propriétés : selectedIndex et options.
La propriété selectedIndex donne l'index de la valeur sélectionnée. On récupère
alors la valeur sélectionnée dans le tableau options.
Exemple :
<script>
p
var L = document.getElementById("liste");
var index = L.selectedIndex;
var valeur = L.options[
L options[ index].value
index] value ;
</script>
Code html :
<select size = "8" id="liste">
<option value="Choix 1" > le choix 1</option>
<option
p
value="Choix 2" > le choix 2</option>
p
<option value="Choix 3" > le choix 3</option>
</select>
Les formulaires: l'événement submit
cet événement est déclenché lors d'une
d une demande d'envoi
d envoi de formulaire. On peut
implanter une fonction sur cet événement. Généralement elle sera chargée de vérifier
le contenu des champs avant de valider l'envoi du formulaire. Cette fonction doit
retourner un booléen afin de valider l'envoi
l envoi ou de le bloquer
bloquer.
Exemple :
function Envoi() {
if (champOK) {
return true;
} else
l {
return false;
}
}
Code html :
<f
<form
id "F1" onsubmit="
id="F1"
b it " return
t
E
Envoi();
i() ">
Retour sur le
LANGAGE JavaScript
48
Les variables JavaScript
Définition :
Une variable est une zone de la mémoire dans laquelle on enregistre tout types de
données, des valeurs numériques, des chaines de caractères ou des structures de
données plus particulières.
Pour pouvoir utiliser une variable il faut la nommée et la déclarée.
Règle sur les noms de variables :
ne peut contenir que des caractères alphanumériques, c-à-d les lettres de A à Z et les
chiffres de 0 à 9.
peut également contenir l'underscore _ et le dollar $.
ne peut pas commencer par un chiffre.
peut p
pas utiliser de mots-clés utilisé p
par JavaScript.
p
Ne p
Attention JavaScript est un langage sensible à la casse, il faut faire attention aux
majuscules et minuscules utilisées.
Mavariable ou MAVARIABLE ou maVariable sont trois variables différentes.
49
Les variables JavaScript
Déclaration d'une variable :
Pour déclarer une variable on utilise le mot-clé var.
Exemple :
var MaVariable;
var Variable;
IInitialisation
iti li ti des
d variables
i bl :
On peut initialiser une variable lors de sa déclaration en utilisant le signe =.
var MaVariable
M V i bl = 5;
5
// on déclare
dé l
lla variable
i bl MaVariable
M V i bl ett on lui
l i affect
ff t le
l valeur
l
5
On peut déclarer et initialiser plusieurs variables sur une seule ligne en les séparant par
des virgules , :
var V1, V2, V3 = 5.5, V4 = 0, V5 = 10 ;
Initialisation de deux variables avec la même valeur :
var V1,V2;
V1 = V2 = 3;
50
Les Types de variables
51
Contrairement à d'autres langages, JavaScript est un langage typé dynamiquement.
Toute déclaration de variables se fait avec le mot-clé var qui n'indique pas le type de la
variable, contrairement par exemple au langage C qui lui indique le type de la variable lors
de sa déclaration.
déclaration
Avec JavaScript le contenu d'une variable peut changer de type au cours de l'exécution du
programme.
programme
Trois type de variables :
•Le type numérique (number)
•Le type chaîne de caractères (string)
yp booleen ((boolean))
•Le type
52
Le type numérique (number)
Ce type représente tout nombre entier ou réel, positif ou négatif. Pour assigner un type à
une variable, il suffit de lui affecter un nombre.
Exemple :
var VariableNombre = 5;
// on assigne un entier
var VariableNombre = 3.14;
// on assigne un nombre décimal
var VariableNombre = 5.45 e+3;
// on assigne un réel en notation scientifique
var VariableNombre = 0xFA15;
// on assigne
g un entier au format hexadécimal
Le type chaine de caractères (string)
Ce type représente une chaine de caractères (succession de caractères).
Deux méthodes d'assignation
d assignation :
var Texte = "Une chaine de caractère";
var Texte = 'Une
Une chaine de caractère';
caractère ;
Attention :
var maVariable = '125';;
// avec des guillemets
// avec des apostrophes
// on assigne
g le caractère 125 à la variable et p
pas la valeur
// numérique 125
Problème des ' et " dans les chaines de caractères
var Texte = 'C'est une chaine à problème' // cette variable contient seulement 'C'
Solution : il faut échapper l'apostrophe  var Texte = 'C\'est une chaine à problème'
53
54
Le type booléen (boolean)
Un booléen est un type à deux états : vrai ou faux (true, false)
Exemple :
var Vrai = true;
var Faux = false;
L'instruction typeof :
permet de déterminer le type
yp d'une variable.
Cette instruction nous p
var Nombre = 2;
Chaine = typeof Nombre
// chaine contient "number"
var UnTexte = "un texte exemple";
Chaine = typeof UnTexte
// chaine contient "string"
var UnBooleen = true;
Chaine = typeof UnBooleen
Chaine = typeof UneVariable
// chaine contient "boolean"
// la variable UneVariable n'est pas initialisée la chaine
// contient "undefined"
Les opérateurs arithmétiques
Nous pouvons manipuler les contenus des variables en appliquant des opérateurs
arithmétiques.
arithmétiques
Opérateurs disponibles :
Addition
Soustraction
Multiplication
Division
Modulo
+
*
/
%
reste de la division entière
Exemple :
var Resultat = 5 + 8:
// Resultat contient 13
Var V1=2, V2 = 4, V3 = 2;
Resultat = ( V1 + V2 ) * V3;
// Resultat contient 12
55
Simplification de l'écriture des calculs.
Exemple :
var Nombre = 2;
Nombre = Nombre + 5;
Ecriture équivalente :
Nombre +
+= 5;
S'applique sur tous les opérateurs ;
+=
// ajoute
j
une valeur à une variable
-=
// soustrait une valeur à une variable
*=
// multiplie une variable par une valeur
par une valeur
/=
// divise une variable p
%=
// affect à une variable le modulo de cette variable avec un nombre
Attention, ce raccourci d’écriture est à utiliser avec précaution, il peut parfois rendre la
lecture du code plus difficile.
56
57
Priorité des Opérateurs Arithmétiques
En JavaScript, les opérateurs ont plusieurs niveaux de priorités. Les expressions sont
évaluées de la gauche vers la droite tant que les opérateurs ont le même niveau.
niveau S
S’ilil y a
des opérateurs de priorités différentes, les opérateurs ayant la priorité la plus élevée sont
évalués en premier.
La multiplication et la division ont un niveau de priorité plus élevé que l’addition et la
soustraction.
p
arithmétiques.
q
Pour contrôler les effets de
Donc attention à l’écriture des expressions
priorité, utilisez toujours les parenthèses afin de contrôler l'ordre d'exécution des
opérations.
Les opérateurs unaires
Il existe également des opérateurs utilisant une seule opérande, se sont les opérateurs
unaires :
++ incrémentation d’une valeur
- - décrémentation d’une valeur
- inversion du signe d’une valeur
Exemples :
var Somme = 34;
Somme++;
Somme--;
S
Somme
= -Somme;
S
// la variable somme contient 34
// la
l variable
i bl somme contient
ti t -34
34
58
Concaténation Conversion de type
59
Particularité de l'opérateur + :
En plus de faire des additions
additions, cet opérateur permet de faire des opérations sur les chaines
de caractères : la concaténation.
Elle consiste à ajouter une chaine de caractères à la fin d'une
d une autre
autre.
Exemple :
var Chaine1 = 'bonjour'
bonjour , Chaine2 = 'le
le monde';
monde ;
var Chaine3 = Chaine1 + " " + Chaine2;
// Chaine3 contient "bonjour le monde"
peut évidement utiliser également
g
l'opérateur
p
+= sur les chaines de caractères
On p
Exemple :
j
';
var Chaine = 'Bonjour
Chaine += 'le monde';
// Chaine contient "Bonjour le monde"
Conversion de type
Attention au type des variables lorsque vous utilisez l'opérateur +
Exemple 1 :
var Chaine = "Voici le résultat de 2x4 : ", Res;
Res = Chaine + 2
2*4;
4;
Alert(Res);
Exemple 2 :
var V1, V2, resultat;
V1 = prompt('Entrez le premier nombre :');
prompt('Entrez
p(
le second nombre :');
);
V2 = p
resultat = V1 + V2;
alert(resultat);
// Saisie d'une chaine de caractères dans V1
// Saisie d'une chaine de caractères dans V2
// Addition des deux variables dans resultat
// Affichage du résultat
60
Conversion de type
Attention au type des variables lorsque vous utilisez l'opérateur +
Exemple 3 :
V1 = prompt(
prompt('Entrez
Entrez le premier nombre :');
: );
V2 = prompt('Entrez le second nombre :');
resultat = V1 * V2;
alert(resultat);
61
Conversion de type
62
Afin de lever l'ambiguïté nous devons convertir les chaines de caractères en nombre.
Nous avons à notre disposition les fonctions suivantes:
parseInt()
parseFloat()
Chaine  entier
Chaine  flottant
Exemple 2 :
V1 = prompt('Entrez le premier nombre :'); // Saisie d'une chaine de caractères dans V1
V2 = prompt('Entrez le second nombre :'); // Saisie d'une chaine de caractères dans V2
resultat = parseInt(V1) + parseInt(V2);
// Addition des deux variables dans resultat
// avec la conversion des chaines en entiers
alert(resultat);
// Affichage du résultat
Conversion de type
Conversion d'un nombre en chaine de caractères est généralement pris en charge
naturellement par JavaScript lors d'affichage
d affichage avec par exemple la fonction alert.
alert
Dans certains cas il peut être nécessaire de placer un nombre dans une chaine de
caractère.
caractère
L'objet number possède plusieurs méthodes permettant la conversion des nombres en
chaines de caractères (plus loin dans ce cours)
Une astuce simple permet de forcer la conversion d'un nombre dans une chaine :
Exemple
var Chaine, N1 = 10, N2 = 5;
Chaine = '' + N1 + N2;
alert(Chaine);
Chaine = N1 + N2;
alert(Chaine);
// la chaine vide '' force la concaténation
// Il n'y a pas de chaine à droite du = l'addition est
// arithmétique
63
Les constantes
64
Il est parfois nécessaire de définir une valeur une fois pour l'utilisé en lecture sans jamais la
modifier JavaScript propose pour cela le mot-clé
modifier.
mot clé const.
const
Exemple :
const PI = 3.14116;
3 14116;
On ne peut affecter une valeur à une constante que lors de sa déclaration.
Le code suivant ne fonctionnera pas :
const Chaine;;
Chaine = "Bonjour";
alert(Chaine);
La boite de dialogue d'alerte affichera : undefined car la deuxième ligne n'a aucun effet.
Les conditions
65
Les conditions sont basées sur les booléens. Une condition sera vraie ou fausse (true,
false).
false)
Une condition est le résultat d'une comparaison. Si la comparaison est vrai la condition
recevra true sinon false.
false
var Condition = false, A = 2, B = 2, C = 5;
Opérateurs de Signification
p
comparaison
Condition = (A == B);
alert(Condition);
// affichage de true
==
égal à
!=
différent de
Condition = (A == C);
alert(Condition);
// affichage de false
===
contenu et type égal à
!==
contenu et type différent de
>
supérieur à
>=
supérieur ou égal à
<
inférieur à
<=
Inférieur ou égal à
Les conditions
66
Nous avons également des opérateurs permettant de combiner les conditions.
Opérateurs logiques
Type logique
&&
ET
Exemples :
||
OU
var C1, C2 = true, C3 = true, C4 = false;
!
NON
Les opérateurs logiques :
C1 = C2 && C3;
C1 = C2 && C4;
C1 = C2 || C4;;
C1 = !C2;
C1 = !(C2 && C4);
// C1  true
// C1  false
// C1  true
// C1  false
// C1  true
Combinaisons des opérateurs :
var A = 2, B = 4, C = 4;
C1 = (A == B) && (B == 4);
C1 = (A == B) || (B == C);
// C1  false
// C1  true
Structure de contrôle if
67
Première structure de contrôle : if
On exécute des instructions si une condition est vrai.
Syntaxe :
if ( condition ) {
... Bloc d'instructions si condition = true
}
Condition est un booléen. Ce booléen peut être une variable ou une expression composée
de variables et d'opérateurs de comparaisons ou d'opérateurs logiques.
Exemple :
if (A >= 2) {
p
g
grande ou égale
g
à 2 ");
)
alert ( "La variable A est plus
}
Structure de contrôle if else
Seconde structure de contrôle : if else
Si la condition est vrai on exécute un bloc d'instructions
d instructions sinon on exécute un autre bloc
d'instructions.
Syntaxe :
if ( expression ) {
. . . Instructions exécutées si expression = Vrai
}
else {
. . . Instructions exécutées si expression = faux
}
Exemple :
if ( A==0 ) {
g
à zéro ");
)
alert ( " La variable A est égale
} else {
alert ( " La variable A est différente de zéro ");
}
68
Structure de contrôle if else if
Seconde structure de contrôle : if else if
Si la condition est vrai on exécute un bloc d'instruction sinon on exécute un autre bloc
d'instructions.
Syntaxe :
if ( expression ) {
. . . Instructions exécutées si expression = vrai
}
else if ( expression2 ){
. . . Instructions
I t ti
exécutées
é té sii expression2
i 2 = vraii ett expression
i = ffaux
} else {
. . . Instructions exécutées si expression2 = faux et expression = faux
}
Exemple :
if ( A==0 ) {
alert ( " La variable A est égale à zéro ");
);
} else if ( A > 0 ) {
alert ( " La variable A est supérieur à zéro");
} else {
alert ( " La variable A est inférieur à zéro ");
}
69
Structure de contrôle switch
Lorsque l'on doit choisir plusieurs traitements en fonction de différentes valeurs contenue
dans une variable la structure de contrôle switch est plus adaptée que le if else if
Syntaxe du switch :
switch ( variable ) {
case Première_valeur(s) :
. . . Instruction;
[break;]
case Seconde_valeur(s) :
. . . Instruction;;
[break;]
.......
_
( ):
case Derniére_valeur(s)
. . . Instruction;
[break;]
default:
. . . Instructions;
}
Exemple :
switch (choix) {
case 1 :
function Un();
function_Un();
break;
case 2 || 5 :
function_Deux_ou_Cinq();
q();
break;
defaut:
function_Autre();
_
()
}
70
Boucle while (...) ...
71
Les boucles
Elles utilisent un test conditionnel comme l’instruction if … else …
Toutefois, il n'y à qu'un seul bloc de code, qui est exécuté aussi longtemps que la condition
est vraie.
La plus simple des boucles commence par tester une condition. Si la condition est vraie le
bloc est exécuté, puis la condition est testée de nouveau.
On quitte la boucle lorsque la condition n'est plus vrai.
Exemple:
Nb = 0;
while( Nb < 10) {
Nb++;
}
Cette boucle sera exécutée 10 fois.
// initialisation de la variable Nb
// Test si Nb est inférieur à 10
// exécution du bloc, ici on incrémente la
// variable
Boucle do ... while (...)
72
La boucle do … while
Dans l’exemple précédent, si la condition est immédiatement fausse, le code à l’intérieur de
la boucle n’est jamais exécuté. Lorsqu’il est nécessaire que la boucle soit exécutée au
moins une fois on utilise la boucle do … while.
Dans ce cas la condition est évaluée à la fin de la boucle, donc la première évaluation de la
condition est réalisée après la première itération de la boucle
boucle.
Exemple:
Nb = 0;;
do {
Nb++;
}
while( Nb < 10);
Boucle for
73
La boucle for
Plutôt que de tester une condition, la boucle for exécute un bloc de code un nombre de fois
déterminé.
Sa structure :
for ( valeur_initiale ; condition ; modification_valeur_courante)
{…
}
Généralement on associe à une boucle for au moins une variable de boucle,, initialisé avec
une valeur de début. Cette variable est alors testée dans la condition de poursuite de la
boucle. Afin de progresser dans la boucle cette variable et modifiée à chaque itération
((modification valeur courante).
)
Exemple:
for ( var i=0 ; i < 10 ; i++) {
document.writeln(″I=″ + i + ″Bonjour <br> ″);
}
Les ternaires
74
L’unique Opérateurs ternaire de JavaScript
Les opérateurs vus précédemment avaient une ou deux opérandes. Il existe un opérateur
avec trois opérandes qui est parfois nommé opérateur condition.
Exemple:
var Nb = 1.0;
var resultat = ( Nb > 0.5 ) ? " Valeur supérieure à 0,5 " : " Valeur inférieur ou égale à 0,5 " ;
Si la condition est vrai ll’opérateur
opérateur retourne la deuxième opérande sinon il retourne la
troisième opérande.
C’ t un raccourcii par rapportt à l’l’utilisation
C’est
tili ti d’
d’un bl
bloc if … else
l

pour dynamiser le code HTML et CSS

Transcription

Documents pareils

Programme Formation Javascript

javascript - sandytech

Tests Php – MySQL – JavaScript – HTML/CSS 1. Php Choisir une

ActiveX et JavaScript

Partie 4: HTML avancé et notions de Javascript

JAVASCRIPT DÉBUTANT

Les capteurs de mesure en instrumentation industrielle

Job Description - Journaliste Web Mission : Profil : Mission

Javascript

Javascript