Le Web Dynamique avec JavaScript - Concepts et Syntaxe
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Le Web Dynamique avec
JavaScript
Concepts et Syntaxe
©A. Belaïd 1
Intérêt
Présentation de JavaScript
– Contrôle du contenu et de l’apparence de pages Web
– Contrôle de fonctionnalités du Navigateur Internet
– Gestion du contenu d’une page Web
– Gestion d’interactions avec l’utilisateur
– Liens avec les applets Java
– Manipulation et gestion d’images
– Lecture et écriture de Cookies
– Autres fonctionnalités intéressantes
2
©A. BelaïdUtilisation
Contexte d’utilisation
– JavaScript(JS) s’utilise dans le contexte du Web
principalement au travers d’un navigateur Internet
– JS permet l’exécution de code informatique intégré à des
pages Web
– JS est un des outils permettant de développer du « Web
Dynamique »
Contexte technique
– JS n’est pas simple, et nécessite une relative bonne
connaissance des techniques de programmation
– JS est un Langage de troisième génération cousin de
Java, du langage C ou du Basic en terme de forme de
programmation
3
©A. BelaïdRéel intérêt
Étroite liaison avec les navigateurs Internet
– Contrôle du contenu et de l’apparence de page Web
• write()… faire apparaître un texte supplémentaire
dynamiquement
• Construction d’une page dynamiquement à partir de
rien
– Contrôle de fonctionnalités du Navigateur Internet
• Affichage de message par boite de dialogue ou dans
la barre de status
• Saisie de données simples
• Ouverture et gestion de l’affichage d’URL dans des
fenêtres du navigateur
4
©A. BelaïdRéel intérêt
Étroite liaison avec les navigateurs Internet
– Gestion du contenu d’une page Web
• Accès à la liste des liens hypertextes, images,
applets Java,... d’une page
• Accès à l’ensemble des contrôles boutons, zone de
saisie,... d’une page
– Gestion d’interactions avec l’utilisateur
• Gestions d’actions liées à des événements
utilisateur:
déplacement de la souris sur un contrôle,
validation d’une saisie, d’un Submit sur un
formulaire...
5
©A. BelaïdExemple
6
©A. BelaïdPrésentation
Javascript
– Langage de script incorporé dans le HTML
– Historiquement, premier langage de script pour le Web
– Apporte des améliorations au HTML
• HTML permet d'écrire
• JavaScript permet de programmer, c'est-à-dire de
gérer l'information
Qualités
– Disponible sur les navigateurs actuels et gratuit
Défauts
– Interprété et donc lent
7
©A. BelaïdIntroduction
A quoi ressemble un script ?
– C’est une portion de code qui vient s'insérer dans une
page HTML
– Le code du script n'est toutefois pas visible dans la
fenêtre du navigateur car il est compris entre des balises
(ou tags) spécifiques qui signalent au navigateur qu'il
s'agit d'un script écrit en langage JavaScript
– Balises annonçant le code Javascript :
Placez ici le code de votre script
8
©A. BelaïdIntroduction
Où placer ce code ? partout, mais de préférence organisé :
Déclarations + initialisations de paramètres
fonctions;
9
©A. BelaïdExemple
Sans fonctions : simple.html
Programme Out2
10
©A. BelaïdExemple plus complet
variable-visibilite.html
var x = new String('abc');
alert(x);
function commencer() {
var x = new Number(123);
x++;
alert(x); }
function suivre() {
var x = new Boolean(false);
alert(x); }
commencer();
suivre();
11
©A. BelaïdVariables et types
Déclaration
var date; // Déclaration sans affectation
var compteur=0; // Déclaration avec affectation
toto='coucou'; // Déclaration implicite par affectation
var prem, second; // variables séparées par des virgules
Déclaration typée
monNombre = new Number(); // Déclaration typée sans
affectation
e = new Number(2.71828); // Déclaration typée avec
affectation
var maChaine = new String(); //
var toto = new Boolean(true); //
12
©A. BelaïdTableau
Array : tableau.html
– Le type des éléments : nombres, chaînes, booléens, ...
– La dimension 1, 2, ou 3, ... : tab(7) ; tab(x,y) ; tab(A,B,C) ; ...
– Les indices : souvent des nombres entiers
// Tableau de chaînes, de dimension 1, indicé de 0 à 6 :
Jour=new Array(7);
Jour[0]='Dimanche' ;
Jour[1]='Lundi' ;
Jour[2]='Mardi' ; ...
Jour[6]='Samedi' ;
// En énumérant les éléments :
jour=new Array('dimanche','lundi','mardi', ... ,'vendredi','samedi');
document.write(Jour[1], ' ' , jour[0]); affiche : Lundi dimanche
13
©A. BelaïdOpérateurs
Arithmétiques
– classique
De comparaison
– Test d’égalité : ==, différent : !=
Logiques
– Ou : ||, ET : &&
Affectation arithmétique
– addition : +=, multiplication *=, division /=…
14
©A. BelaïdConditionnelles
Choix simple : conditionnelle.html
if (condition booléenne)
{Instructions à exécuter si "oui";}
else
{Instructions à exécuter si "non";}
Choix multiple : choix-multiple.html
switch(x) {
case 1 : instructions 1; break;
case 2 : instructions 2; break;
...
case n : instructions 3; break;
default : instructions 4; break;
};
15
©A. BelaïdItération
For : iteration.html
for (valeur de départ ; contrôle pour sortie ; progression )
{ Instructions à itérer }
– Exemple
for (i=1;iFonctions
Syntaxe
function maFonction(x, toto) {
... instructions; ...
return valeur du résultat;
}
Exemple
function VolCylindre(r,h) {
pi=3.14159;
return pi*r*r*h;
}
document.write(VolCylindre(1,2));
17
©A. BelaïdFonctions prédéfinies
Mathématiques
function lancer(n) {
for (i=1 , suite='' ; iJavascript
Programmation objet
F. GEOFFROY
©A. Belaïd 19Les objets
Description
– Javascript divise la page du navigateur en objets, afin de
permettre d'accéder à n'importe lequel d'entre-eux et de
pouvoir les manipuler par l'intermédiaire de leurs propriétés
– On commence généralement par l'objet le plus grand (celui
contenant tous les autres) puis on descend dans la hiérarchie
jusqu'à arriver à l'objet voulu
• L'objet le plus grand est l'objet fenêtre : window
• Dans la fenêtre s'affiche une page, c'est l'objet document
• Cette page peut contenir plusieurs objets, comme
des formulaires,
des images, etc.
20
©A. BelaïdLes objets
Les objets de base
– navigator : contient des informations sur le navigateur de
celui qui visite la page
– window : objet où s'affiche la page, il contient donc des
propriétés concernant la fenêtre elle-même mais aussi
tous les objets-enfants contenus dans celle-ci
– location : contient des informations relatives à l'adresse
de la page à l'écran
– history: c'est l'historique, c'est-à-dire la liste de liens qui
ont été visités précédemment
– document : contient les propriétés sur le contenu du
document (couleur d'arrière plan, titre, ...)
21
©A. BelaïdHiérarchie des objets
22
©A. BelaïdNavigator
Propriétés
– a plusieurs propriétés concernant votre navigateur
• appName :
connaître le nom : Netscape, IE, Mozilla
• appVersion :
connaître la version
• language :
FR, AN
• platform :
windows, Linux…
– Pour le savoir : exécuter :
document.write(navigator.propriété);
23
©A. BelaïdNavigator
– a plusieurs méthodes
• javaEnabled() :
permet de vérifier si le navigateur du client est
configuré pour exécuter des applets Java
• …
– Exemple d’utilisation de Navigator :
Nom = navigator.appName;
if (Nom == 'Netscape') {
placer ici les instructions à exécuter s'il s'agit de Netscape
Navigator 4 ou supérieur }
if (Nom == 'Microsoft Internet Explorer') {
placer ici les instructions à exécuter s'il s'agit de Microsoft
Internet Explorer 4 ou supérieur
}
24
©A. BelaïdL’objet Window
Définition
– est l'objet par excellence dans Javascript, car il est le
parent de chaque objet qui compose la page web
– il contient donc :
• l'objet document :
la page en elle-même
• l'objet location :
le lieu de stockage de la page
• l'objet history :
les pages visitées précédemment
• l'objet frames :
les cadres (division de la fenêtre en sous-
fenêtres)
25
©A. BelaïdL’objet Window
Exemple :
window.open("http://www.loria.fr","nom_de_la_fenetre","options_d
e_la_fenetre");
Options :
– menubar = yes/no :
• affiche ou non la barre de menu (fichier, edition, ...)
– resizable = yes/no :
• définit si la taille de la fenêtre est modifiable ou non
– scrollbars = yes/no :
• affiche ou non les ascenceurs (barres de défilement)
Exemple :
Cliquez ici
pour fermer la fenêtre
26
©A. BelaïdL’objet Window
Propriétés :
– frames[] : tableau de cadres contenus
– length : nombre de cadres (nombre d'éléments du tableau
frames
– name : nom de la fenêtre dans laquelle on se trouve
– parent : fenêtre qui englobe celle dans laquelle on se trouve
Méthodes appliquées dessus :
– alert(), confirm() et prompt() : font apparaître une boîte de
dialogue
– open(), et close() : permettent l'ouverture et la fermeture de
fenêtres
Exemple :
window.open("http://www.loria.fr","nom_de_la_fenetre","options_d
e_la_fenetre");
27
©A. BelaïdL’objet document
Élément majeur, permet de
– récupérer des informations d'un formulaire,
– créer des calques et les déplacer, écrire du texte...
Propriétés :
– document.fgColor
• permet de récupérer et de changer la couleur du
texte de votre page HTML
document.fgColor = "#993333";
– document.bgColor
• permet de récupérer et de changer la couleur de fond
de votre page HTML
– document.lastModified
• permet de savoir quand la page html a été modifiée
28
©A. BelaïdL’objet document
Propriétés (suite) :
– document.linkColor
• permet de récupérer et de changer la couleur des liens de
votre page HTML
– document.location
• permet de récupérer et changer l'url de votre page HTML,
ce qui revient à charger une autre page HTML
document.location = "URL/monDoc.HTML";
– document.write()
• permet d'écrire dans votre page HTML
– document.images[ ]
• permet de récupérer et changer les images de votre page
HTML
– document.forms[ ]
• permet de récupérer et changer les informations de votre
formulaire
29
©A. BelaïdL’objet document
Rappel : création de formulaires
– Autant qu’on veut entre
•
– Options ou éléments
• Zone de texte : 2 possibilités
• Case à cocher
• Bouton radio
< input type= "radio" name="sexe" value="femme">
30
©A. BelaïdL’objet document
Rappel : création de formulaires
– Sélection
•
Afrique
< option >Amérique
< option >Asie>
< option >Europe
< option >Océanie
31
©A. BelaïdL’objet document
Le champ « text » :
– a par exemple comme propriétés :
• name : le nom du champ de texte
• value: le texte contenu dans le champ
• size: la taille du champ de texte
32
©A. BelaïdL’objet document
Le champ form : propriétés :
– action ()
• Définit l'URL où le formulaire sera envoyé
– elements
• Tableau représentant les éléments du formulaire
– length
• Nombre d'éléments à l'intérieur du formulaire
– method
• Définit le type d'envoi du formulaire (get ou post)
– name
• Définit le nom du formulaire
– target
• Définit la page (fenêtre ou frame) de réponse
– parent
• Indique une fenêtre d'un cadre (frame)
33
©A. BelaïdL’objet document
Le champ form : action ()
Test
34
©A. BelaïdL’objet document
Exemple
– Il s’agit d’accéder au champ : case cochée pour modifier
le contenu du texte : case cochée ou case non cochée :
– Code du formulaire
35
©A. BelaïdL’objet document
Pour modifier le champ : objet-form1.html
– On utilise la fonction javascript associée au bouton
checkbox suivante :
function ModifChamp() {
if (document.forms["form1"].checkbox.checked) {
document.forms["form1"].champ_text.value='Bouton
coché' }
else {
document.forms["form1"].champ_text.value='bouton
non coché' } }
36
©A. BelaïdL’objet document
Autre exemple : moyenne-notes.html
– Afficher la note d’une élève dans une matière et calculer
sa moyenne
37
©A. BelaïdL’objet document
Autre exemple : cacher-montrer.html
– Cacher montrer une image
38
©A. BelaïdL’objet document
Le champ form : length :
• sauvegarde le nombre de formulaires définis dans un fichier
39
©A. BelaïdL’objet document
Le champ form : method :
• Sauvegarde la valeur qui figure lors de la définition du formulaire
dans l'attribut method= - en principe, "get" ou "post".
function Methode() {
if(document.formulaire_test.action.indexOf("@") > 0)
document.formulaire_test.method = "post";
else
document.formulaire_test.method = "get";
return true;
}
…
40
©A. BelaïdL’objet document
Le champ form : name :
• Sauvegarde le nom d’un formulaire
Test
41
©A. BelaïdL’objet document
Le champ form : target :
• Précise la cible (cadre) dans laquelle l’affichage sera fait :
Test
42
©A. BelaïdL’objet document
Le champ form : submit() :
– Envoi du formulaire : JavaScript lance un compte à rebours avec la
méthode setTimeout(). Après 60000 millièmes de secondes, donc
après une minute, la fonction on_y_va() est appelée. Celle-ci envoie le
formulaire avec submit()
Test
43
©A. BelaïdL’objet document
Le champ form : elements :
– Propriétés :
• checked (coché)
• defaultChecked (coché par défaut)
• defaultValue (valeur entrée par défaut)
• form (nom du formulaire)
• name (nom de l'élément)
• type (type de l'élément)
• value (valeur/contenu de l'élément)
– Méthodes :
• blur() (quitter l'élément)
• click() (cliquer sur l'élément)
• focus() (positionner sur l'élément)
• handleEvent() ((traiter l'événement)
• select() (sélectionner du texte)
44
©A. BelaïdL’objet document
Checked : Exemple : Sauvegarde si oui ou non une case à cocher ou une
case d'option est activée. Les valeurs possibles sont true ou 1 ou false ou 0.
avec cadres
sans cadres
45
©A. BelaïdL’objet document
defaultValue : Sauvegarde le texte par défaut d'un champ de saisie
Test
uri:
46
©A. BelaïdJavascript
Gestion d’événements
F. GEOFFROY
©A. Belaïd 47Interaction
Appel de fonction à la demande : au clic
…objet à cliquer ....
– Normalement :
• le href permet d’ouvrir une page web ou d’aller à un
autre endroit du document
– Pour l’utiliser pour appeler une fonction de réaction :
• On écrit : javascript + : + fonction
Î fonction pré-définie
javascript:alert("Incrémenter veut dire augmenter")
Î fonction personnelle
javascript:surface-rectangle(x,y)
Î attention au " de href : à l’intérieur, on met des côtes ‘…’
(aide?)
48
©A. BelaïdAppel de fonction dans href
Exemple
Test
atteindre a2. Veuillez
cliquer d'abord ici
Ici a2 -
Cliquez ensuite ici
49
©A. BelaïdAppel de fonction dans href
Autre exemple
Test
Lien
souhaité
50
©A. BelaïdLes évènements
Présentation
– Les événement sont l’intérêt du JS en matière de
programmation Web
– Ils donnent une interactivité à la page que vous
consultez, ce qui n’existe pas avec le HTML, si on
excepte bien entendu le lien hypertexte
– Le JS permet de réagir à certaines actions de
l’utilisateur
– On nomme évènement le mot Event, et gestionnaire
d’événement le mot-clé onEvent
51
©A. BelaïdLes évènements
Fonctionnement
– Les évènements sont indiqués dans la balise d’un formulaire,
le plus souvent
– Ils apparaissent comme un paramètre supplémentaire et
suivent une syntaxe particulière
– Syntaxe :
– balise :
• nom de la balise HTML qui supporte l’événement
– onEvent :
• gestionnaire d’événement associé à l’événement Event
– Code :
• fait le plus souvent référence à une fonction définie dans
les balises …. Il peut cependant s’agir
d’instructions directement
52
©A. BelaïdLes évènements
Fonctionnement
– Plusieurs gestionnaires d’évènements peuvent être
placés dans la même balise
– Certaines balises n’appartenant pas à un formulaire
peuvent supporter des gestionnaires d’événement
– Exemple
click?
– Prévient du click puis la page
53
©A. BelaïdLes évènements
Le clic de souris
– Gestionnaire d’événement
• onClick
– Exemple :
•
– Balises supportées :
•
•
•
•
•
•
54
©A. BelaïdLes évènements
Le chargement
– Gestionnaire d’événement
• onLoad
– Exemple :
•
– Balises supportées :
•
•
– Effets :
• Au chargement, réaliser tel événement
55
©A. BelaïdLes évènements
Error
– Gestionnaire d’événement
• onError
– Exemple :
•
– Balises supportées :
•
•
•
– Effets :
• Prévient l’erreur au chargement
56
©A. BelaïdLes évènements
Abort
– Gestionnaire d’événement
• onAbort
– Exemple :
•Les évènements
Le passage de la souris
– Gestionnaire d’événement
• onMouseOver
– Exemples :
•
• Move the mouse pointer
over this text, then move it elsewhere in the document.
• http://www.google.frhttp://www.google.fr
– Balises supportées :
• Presque toutes
– Effets :
• Prévient quand on survole la cible : zone, texte, lien
58
©A. BelaïdLes évènements
L’éloignement de la souris
– Gestionnaire d’événement
• onMouseOut
– Exemples :
•Les évènements
Le focus
– Gestionnaire d’événement
• onFocus
– Exemples :
•
– Balises supportées :
•
•
•
•
– Effets :
• Écrit le message quand on clique sur la zone d’entrée du texte
60
©A. BelaïdLes évènements
Le blur
– Gestionnaire d’événement
• onBlur
– Exemples :
•
– Balises supportées :
•
•
•
•
– Effets :
• Avertit à la fin du remplissage dans la zone d’écriture, si on n’a
rien oublié
61
©A. BelaïdLes évènements
Les changements : choix-form.html
– Gestionnaire d’événement
• onChange
– Exemples :
•
– Balises supportées :
•
•
•
•
– Effets :
• Avertit du changement par rapport à ce qu’il y avait d’écrit dans
la zone d’écriture
62
©A. BelaïdLes évènements
La sélection
– Gestionnaire d’événement
• onSelect
– Exemples :
•
– Balises supportées :
•
•
– Effets :
• Avertit de la sélection d’un champ
63
©A. BelaïdLes évènements
L’envoi
– Gestionnaire d’événement
• onSubmit
– Exemple :
•
– Balises supportées :
•
– Effets :
• Avertit de la sélection d’un champ
64
©A. BelaïdLes évènements
Le reset
– Gestionnaire d’événement
• onReset
– Exemple :
•La commande InnerHTML
Rôle
– Permet de changer le contenu d’une balise
– Le HTML contenu entre les balises peut être changé
de manière dynamique
– Par exemple :
Hello World
– Tout le HTML entre et peut être remplacé
dynamiquement en utilisant le code Javascript :
document.getElementById('DivExample').innerHTML="Good
Afternoon";
– De cette manière, il peut être changé dans n’importe quel
code HTML valide
66
©A. BelaïdLa commande InnerHTML
Exemple : TD1-JavaScript/innerHTML.html
67
©A. BelaïdApplications
Memory : memory/memory.html
Tableau
Formulaire
68
©A. Belaïd…
document.write('');
L
for (i=1 ;ifor (i=1 ;i
function change_im(nbim) { //
if (place[nbim] !=0) {
if (nbim==nbim2) nbim=0;
else{
if (nbim==nbim3) nbim=0;
else{
if (choixim==3){
if (val1==val2) {
efface(nbim2);efface(nbim3);gain++;}
else {
no_efface(nbim2);no_efface(nbim3);}
choixim=1;nbim3=0
}
if (choixim==1) {nbim2=nbim;val1=place[nbim];choix++;}
if (choixim==2) {nbim3=nbim;val2=place[nbim];}
choixim++;
}
}
document.images[nbim-1].src = non_im+place[nbim]+".gif";
if (choixim==3){
if (gain==divs-1) {
setTimeout("efface(nbim2);efface(nbim3);document.images[1].src =
'gagne.gif';",500);gain++;
}
}
document.form1.result.value = choix
}
} 71
©A. BelaïdApplications
Puzzle : puzzle/puzzle.html
On clique sur une case puis sur On peut voir le puzzle rassemblé
une autre pour indiquer où on
veut déplacer la première
72
©A. BelaïdVous pouvez aussi lire
