Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet
PARTIE I JavaScript: script côté client Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 2
HTML et programmation HTML n'est pas un langage de programmation Langage de structuration de l'information Tendance actuelle: séparer l'information de son apparence HTML contient l'information seulement Feuille de style (CSS) contient la présentation de l'information Avantages de HTML Développement facilité Intégration multimédia Texte, images, liens, vidéo Inconvénients de HTML Présentation statique de l'information Pas d'interaction avec l'utilisateur Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 3
Scripts «côté client» dans HTML Script = langage de programmation interprété N'a pas besoin d'être compilé Programme directement traduit à son exécution Rapidité de développement Exécution plus lente qu'un programme compilé Possibilité de mettre du script «côté client» dans HTML Implique que le navigateur comprend ce langage Langage couramment utilisé: JavaScript JavaScript peut être désactivé dans un navigateur Permet la conception de pages Web dynamiques Modifier dynamiquement la présentation du contenu Répondre aux actions de l'utilisateur Vérifier des formulaires Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 4
Client-serveur: HTML simple (1/2) http://www.iutvichy.univ-bpclermont.fr/info.htm info.htm? Client HTML Serveur info.htm www.iutvichy.univ-bpclermont.fr Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 5
Client-serveur: HTML simple (2/2) Sur le serveur: code HTML <html> <p>bienvenue!</p> Le client reçoit: code HTML identique <html> <p>bienvenue!</p> Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 6
Client-serveur: code JavaScript (1/2) http://www.iutvichy.univ-bpclermont.fr/js.htm js.htm? Client HTML + JavaScript HTML + JavaScrip t Code JavaScript exécuté sur le navigateur client! Serveur js.htm www.iutvichy.univ-bpclermont.fr Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 7
Client-serveur: code JavaScript (2/2) Sur le serveur: code HTML + JavaScript <html> <script type="text/javascript"> document.write("<p>bienvenue!</p>"); </script> Le client reçoit: code HTML + JavaScript identique <html> <script type="text/javascript"> document.write("<p>bienvenue!</p>"); </script> Le navigateur affiche: code HTML <html> <p>bienvenue!</p> Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 8
Client-serveur: code PHP (1/2) http://www.iutvichy.univ-bpclermont.fr/info.php info.php? Client HTML Code PHP Code PHP exécuté sur le serveur! Serveur info.php www.iutvichy.univ-bpclermont.fr Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 9
Client-serveur: code PHP (2/2) Sur le serveur: code PHP <html> <?php echo "<p>bienvenue!</p>";?> Le client reçoit: code HTML <html> <p>bienvenue!</p> Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 10
Inclusion de script dans HTML Inclusion du code <script type="nom langage"> code </script> Entre les balises <head> </head> Eléments communs à toute la page Initialisation de variables globales Exemple: var compteur = 0; Définition de fonctions Exemple: function affiche_compteur() {... } Entre les balises Exécution de fonctions affiche_compteur(); Mise à jour de variables globales ++compteur; Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 11
<html> <head> <script type="text/javascript"> var compteur = 0; function affiche_compteur() { document.write("compteur = " + compteur); } </script> </head> Un exemple de JavaScript <p>j'incrémente le compteur...</p> <script type="text/javascript"> ++compteur; </script> <p>j'affiche le compteur...</p> <p><script type="text/javascript"> affiche_compteur(); </script></p> JavaScript interprété en même temps que le HTML «document.write» génère du HTML à l'endroit même du code JavaScript Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 12
Inclusion d'un fichier de script Besoin de réutiliser un code dans plusieurs pages Possibilité d'écrire du script dans un fichier séparé Extension généralement utilisée pour JavaScript: «.js» Exemple d'un fichier «fonctions.js» var compteur = 0; function affiche_compteur() { document.write("compteur = " + compteur); } Code d'inclusion d'un fichier Placé dans l'entête HTML Format générique <script src="nom fichier" type="nom langage"></script> Exemple JavaScript <script src="fonctions.js" type="text/javascript"> </script> Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 13
Qu'est-ce que le DHTML? DHTML: Dynamic HTML Ne désigne pas une technologie précise Terme DHTML un peu passé de mode Maintenant c'est plutôt AJAX (Asynchronous JavaScript And XML) Mais les procédés subsistent DHTML regroupe plusieurs technologies pour le dynamisme des pages Web HTML: HyperText Markup Language Structuration de l'information CSS: Cascade Style Sheet Feuille de style Présentation de l'information DOM: Document Object Model Modèle objet du document Représentation de tous les éléments du document (HTML + CSS) JavaScript Gestion des événements du document Modification dynamique du document Programmation objet et événementielle en JavaScript - MMI Vichy / S2-2014 14