Technique Internet de Base Javascript avancé

Introduction
Objet
Navigateur
Évènements
Technique Internet de Base
Javascript avancé
Maxime Morge [email protected]
Licence 2
Université Jean Monnet
2008-2009
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Introduction
Un langage de programmation objet à prototype
Un langage de programmation événementiel.
Le code Javascript est embarqué dans des pages webs.
Le code Javascript est interprété du côté du client.
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Les objets
Objet= concept, idée, entité physique (voiture).
Interface d’un objet (comment agir sur un objet)= des
méthodes.
Structure d’un objet= des attributs.
Encapsulation= manipuler les méthodes pas les attributs.
Classe= catégorie d’objet qui partage des propriétés
communes.
Héritage= principe d’ “arbre généalogique” pour les classes
dont les "filles" héritent des caractéristiques de leur mère.
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Les objets en Javascript
Créer des objets
var d = new Date();
var livre={titre:"titre", auteur:"P. Dupont"};
Les propriétés d’un objet
livre.partie1= new Object();
alert(livre.titre);
delete livre.partie1;
if ("partie1" in livre) ...
Les méthodes.
alert(livre.toString());
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Les espaces de noms
livre
titre
auteur
contenu
partie1
chapitre1
chapitre2
partie2
chapitre3
livre.contenu.partie1.chapitre1
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Constructeur
Définition
function Rectangle(l,h){
this.largeur=l;
this.hauteur=h;
}
Invocation
var rect1=new Rectangle(2,4);
var rect1=new Rectangle(8.5,11);
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Conclusion
Méthode
Définition
function Rectangle(l,h){
this.larg=l;
this.haut=h;
this.aire =function() {return this.larg* this.haut;}
}
Invocation
var rect1=new Rectangle(2,4);
var a = rect1.aire();
Maxime Morge
TIB Javascript(2)
Introduction
Objet
Navigateur
Évènements
Prototypage
Définition
function Rectangle(l,h){
this.largeur=l;
this.hauteur=h;
}
Rectangle.prototype.aire =function() {
return this.largeur* this.hauteur;}
Invocation
var rect1=new Rectangle(2,4);
var a = rect1.aire();
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Conclusion
Héritage
Définition
RectanglePositionne.prototype.superclasse=Rectangle;
function RectanglePositionne(x,y,l,h){
this.superclasse(l,h);
this.x=x;
this.y=y;
}
Invocation
var rect1=new RectanglePositionne(0,0,2,4);
var a = rect1.aire();
Maxime Morge
TIB Javascript(2)
Introduction
Objet
Navigateur
Évènements
Hiérarchie des objets côté client
L’object Window, le contexte d’exécution :
location, l’URL de la fenêtre ;
history, l’historique de navigation ;
window, la fenêtre ;
screen, l’écran ;
navigator, le navigateur ;
frames[], le jeu de cadre ;
self, la fenêtre elle-même ;
top, la fenêtre dans la laquelle elle est contenue ;
parent, la fenêtre mêre ;
document, le document HTML.
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Navigation
location, l’URL de la fenêtre
location.toString()
location.reload()
location.replace(url)
history, l’historique de navigation
history.back()
history.forward()
history.go(n)
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Affichage
window, la fenêtre
window.outerWidth
window.outerHeight
window.screenX
window.screenY
window.innerWidth
window.innerHeight
screen, l’écran
screen.width
screen.height
navigator, le navigateur
appName
appVersion
plateform
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Jeu de cadre
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Conclusion
Propriétés et objets du document
document.bgColor, la couleur d’arrière de plan
document.title, le titre entre <title> et </title>
document.URL, l’URL à l’origine de la page ∼ location.href
cookie, . . .
anchors[], les ancrages <a name="blabla"></a> ;
links[], les liens <a href="blabla"></a> ;
forms[], les formulaires ;
images[], les images.
Maxime Morge
TIB Javascript(2)
Introduction
Objet
Navigateur
Évènements
La gestion des événements
Un événement= action réalisée par le navigateur suite à :
une erreur Javascript ;
une temporisation ;
une action de l’utilisateur.
Un événement peut déclencher une fonction Javascript.
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
La gestion des événements (suite)
Un événement est associé à un objet comme :
la fenêtre de navigation ;
le document ;
une balise (e.g. un commande de formulaire).
Un événement peut être :
général ;
lié à la souris ;
lié au clavier ;
lié au formulaire.
Lorsqu’un événement est associé à une balise il peut être
capturé par un gestionnaire, i.e. un attribut.
Maxime Morge
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Conclusion
Les événements généraux
Les événements
l’utilisateur.
Gestionnaire
onload
onabort
onunload
qui ne sont pas directement liés à l’action de
Déclencheur
chargement achevé
chargement interrompu
déchargement achevé
Maxime Morge
Balises
<body>, <frameset>, <img>
<img>
<body>, <frameset>
TIB Javascript(2)
Introduction
Objet
Navigateur
Évènements
Conclusion
Les événements liés à la souris
Gestionnaire
onclick
ondclick
onmousedown
onmouseup
onmousemove
onmouseover
onmouseout
onfocus
onblur
Déclencheur
Clique
Double-clique
Bouton pressé
Bouton relâché
Pointeur déplacé
Pointeur déplacé dans la zone
Pointeur déplacé hors la zone
Focus de saisie obtenu
Focus de saisie perdu
Maxime Morge
TIB Javascript(2)
Balises
presque tous
presque tous
presque tous
presque tous
presque tous
presque tous
presque tous
<body>, <input>, . . .
<body>, <input>, . . .
Introduction
Objet
Navigateur
Évènements
Les événements liés au clavier
Gestionnaire
onkeypress
onkeydown
onkeyup
Déclencheur
Touche pressée
Touche enfoncée
Touche relâchée
Maxime Morge
Balises
<body>, <input>, . . .
<body>, <input>, . . .
<body>, <input>, . . .
TIB Javascript(2)
Conclusion
Introduction
Objet
Navigateur
Évènements
Conclusion
Les événements liés au formulaire
Gestionnaire
onsubmit
onreset
onfocus
onblur
onchange
onselect
Déclencheur
Formulaire à envoyer
Formulaire à réinitialiser
Focus de saisie obtenu
Focus de saisie perdu
Focus perdu/valeur modifiée
Texte sélectionné
Maxime Morge
TIB Javascript(2)
Balises
<form> . . .
<form> . . .
<button>, <input>, <labe
<button>, <input>, <labe
<input>, <select>, <text
<input>, <textarea>
Introduction
Objet
Navigateur
Évènements
À emporter
Objectifs :
Programmation objet prototypé
Programmation événementiel
Contenu : Javascript côté client
Objet Javascript (attributs/méthodes)
Évènement généraux/clavier/souris/formulaire
Perspectives :
Cookies.
Maxime Morge
TIB Javascript(2)
Conclusion