Technique Internet de Base Javascript avancé

Dimension: px

Commencer à balayer dès la page:

Download "Technique Internet de Base Javascript avancé"

Vincent Laperrière
il y a 8 ans
Total affichages :

1 Technique Internet de Base Javascript avancé Licence 2 Université Jean Monnet

2 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.

Le code Javascript est embarqué dans des pages webs.

3 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.

Encapsulation= manipuler les méthodes pas les attributs.

4 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());

5 Les espaces de noms livre titre auteur contenu partie1 chapitre1 chapitre2 partie2 chapitre3 livre.contenu.partie1.chapitre1

6 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);

7 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();

8 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();

9 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();

10 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.

navigator, le navigateur ; frames[], le jeu de cadre ; self, la fenêtre elle-même ; top, la

11 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)

12 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

innerwidth window.innerheight screen, l écran screen.

13 Jeu de cadre

14 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.

15 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.

16 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.

Un événement peut être : général; lié à la souris; lié au clavier; lié au formulaire.

17 Les événements généraux Les événements qui ne sont pas directement liés à l action de l utilisateur. Gestionnaire Déclencheur Balises onload chargement achevé <body>, <frameset>, <img> onabort chargement interrompu <img> onunload déchargement achevé <body>, <frameset>

Gestionnaire Déclencheur Balises onload chargement achevé <body>,

18 Les événements liés à la souris Gestionnaire Déclencheur Balises onclick Clique presque tous ondclick Double-clique presque tous onmousedown Bouton pressé presque tous onmouseup Bouton relâché presque tous onmousemove Pointeur déplacé presque tous onmouseover Pointeur déplacé dans la zone presque tous onmouseout Pointeur déplacé hors la zone presque tous onfocus Focus de saisie obtenu <body>, <input>,... onblur Focus de saisie perdu <body>, <input>,...

onmousemove Pointeur déplacé presque tous onmouseover Pointeur déplacé dans la zone presque tous onmouseout

19 Les événements liés au clavier Gestionnaire Déclencheur Balises onkeypress Touche pressée <body>, <input>,... onkeydown Touche enfoncée <body>, <input>,... onkeyup Touche relâchée <body>, <input>,...

20 Les événements liés au formulaire Gestionnaire Déclencheur Balises onsubmit Formulaire à envoyer <form>... onreset Formulaire à réinitialiser <form>... onfocus Focus de saisie obtenu <button>, <input>, <labe onblur Focus de saisie perdu <button>, <input>, <labe onchange Focus perdu/valeur modifiée <input>, <select>, <text onselect Texte sélectionné <input>, <textarea>

.. onfocus Focus de saisie obtenu <button>, <input>, <labe onblur Focus de saisie perdu

21 À 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.

Documents pareils

Dojo Toolkit. Créer des applications AJAX/RIA en JavaScript. Thomas Corbière www.itsi-formation.com

Dojo Toolkit. Créer des applications AJAX/RIA en JavaScript. Thomas Corbière www.itsi-formation.com Dojo Toolkit Créer des applications AJAX/RIA en JavaScript Auteur Site Web Dernière modification Dojo Toolkit Thomas Corbière www.itsi-formation.com 20/02/2012 (révision 3) 1.6 Ce support de cours est