Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet

Dimension: px

Commencer à balayer dès la page:

Download "Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet"

Odette Chassé
il y a 8 ans
Total affichages :

1 Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet

2 PARTIE I JavaScript: script côté client Programmation objet et événementielle en JavaScript - MMI Vichy / S

3 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 / S

Avantages de HTML Développement facilité Intégration multimédia Texte, images, liens, vidéo Inconvénients de HTML Présentation

4 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 / S

langage Langage couramment utilisé: JavaScript JavaScript peut être désactivé dans un navigateur Permet la conception de pages Web dynamiques Modifier

5 Client-serveur: HTML simple (1/2) info.htm? Client HTML Serveur info.htm Programmation objet et événementielle en JavaScript - MMI Vichy / S

6 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 / S

7 Client-serveur: code JavaScript (1/2) js.htm? Client HTML + JavaScript HTML + JavaScrip t Code JavaScript exécuté sur le navigateur client! Serveur js.htm Programmation objet et événementielle en JavaScript - MMI Vichy / S

8 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 / S

</p>"); </script> Le client reçoit: code HTML + JavaScript identique <html> <script </p>"); </script> Le

9 Client-serveur: code PHP (1/2) info.php? Client HTML Code PHP Code PHP exécuté sur le serveur! Serveur info.php Programmation objet et événementielle en JavaScript - MMI Vichy / S

Serveur info.php www.iutvichy.univ-bpclermont.

10 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 / S

11 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 / S

$de fonctions Exemple: function affiche_compteur() {.$

12 <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 / S

..</p> <script type="text/javascript"> ++compteur; </script> <p>j'affiche le compteur.

13 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 / S

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

14 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 / S

procédés subsistent DHTML regroupe plusieurs technologies pour le dynamisme des pages Web HTML: HyperText Markup Language Structuration de l'information CSS: Cascade

Documents pareils

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et