C_introduction_javascript [Mode de compatibilité] - Jean
publicité
1 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 Les compléments à HTML Objectif : ajouter de l’interactif Java Environnement informatique (langage + machine virtuelle) permettant l’exécution de micro-applications (applets) téléchargées par le réseau JavaScript Initiation à Javascript langage permettant davantage d ’interactivité sur les pages HTML HTML Jean-Philippe PERNIN PHP (couplé avec SQL) langage principalement utilisé pour produire des pages Web dynamiques Université Stendhal Département Informatique Pédagogique Bureau I 113 Plugin : Programme complémentaire au navigateur permettant d ’exécuter un certain type de document (exemple Son, animation Flash) Mél. : [email protected] Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 2 3 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 Java et Javascript Java et Javascript : comparatif • Malgré l’homonymie : aucun rapport JavaScript – JavaScript : langage de script associé à HTML permettant de fournir davantage d’interactivité – Java : système complet basé sur le téléchargement de petites applications (applets) Langage Java •Interprété •Compilé •Orienté objets, Possibilités limitées, faiblement typé •Orienté objets, Langage complet Principe •Programme source embarqué dans le HTML •Micro-applications (applets) téléchargées par le réseau Sécurité •récupérable, non vérifié •Protection des sources Accessibilité •Lecture accessible •Requiert de véritables compétences d ’informaticien 1 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 4 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 Javascript : fonctionnement 5 Balises de document et d’entête <HTML> Balise du document <HEAD> <TITLE> Mon document </TITLE> </HEAD> Balise de l’entête Balise de Titre <BODY> Bonjour Je m'appelle Superman </BODY> Début de la description Corps du document </HTML> Fin du document Serveur HTTP Réseau Internet 1 Le code JavaScript est embarqué dans la page HTML Logiciel Navigateur Interprète le HTML 2 Appel du code JavaScript 3 Le Navigateur interprète le code JavaScript (version suffisante requise) Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 Javascript et HTML 3 solutions pour écrire du code Javascript • Code directement écrit entre des balises HTML • Code écrit dans des fonctions déclarées dans la partie HEAD puis appelées depuis le HTML • Code écrit dans des fichiers séparés puis appelées depuis le HTML (suffixe.js) 6 Fin de Titre Fin de l’entête Fin de la description Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 7 Solution 1 : Code directement écrit entre des balises HTML <HTML> <BODY> <FORM> <INPUT TYPE="button" NAME="bouton1" VALUE="Question ?" onClick="var nom = prompt('quel est ton nom ?', ''); alert('Bonjour ' + nom)"> <P> </FORM> </BODY> Code Javascript Evénement </HTML> 2 8 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 Solution 2 : Code écrit sous forme de fonction dans une balise <SCRIPT> dans la balise <HEADER> Les événements <HTML> <HEADER> <SCRIPT language="javascript"> function poserUneQuestion () { var nom nom = prompt('quel est ton nom ?', '') alert('Bonjour ' + nom) Définition de la fonction } </SCRIPT> </HEADER> <BODY> <FORM> <INPUT TYPE="button" NAME="bouton1" VALUE="Question ?" onClick="poserUneQuestion () "> <P> </FORM> </BODY> </HTML> Appel de la fonction Forme générale : onEvenement="Action_Javascript_ou_Fonction();" 10 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 Solution 3 : Code écrit dans un fichier externe .js référence dans la balise <HEADER> Définition de la fonction fichier1.js function poserUneQuestion () { var nom nom = prompt('quel est ton nom ?', '') alert('Bonjour ' + nom) } </HTML> <HEADER> <SCRIPT src = "fichier1.js"> Appel à un fichier </SCRIPT> </HEADER> <FORM> <INPUT TYPE="button" NAME="bouton1" VALUE="Question ?" onClick="poserUneQuestion () "> <P> </FORM> </BODY> </HTML> Appel de la fonction 9 externe 11 Utilisations de JavaScript • • • • • Contrôle de formulaires Effets graphiques (textes défilants, …) Calcul et affichage (horloge, …) Animation Etc. • Caractéristique : l ’environnement connu est celui du client (la page HTML) • Inconvénient : Si erreur, plantage de la page 3
