1 / 37

Introduction Aux Systèmes d’Information et Multimédia

Introduction Aux Systèmes d’Information et Multimédia. (X)HTML / Pages Web Statiques. T. Bourdeaud’huy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007. Timothy Berners-Lee. Javascript. S4 : Syntaxe S5 : Interfaçage avec le modèle DOM, objets Ressources : http://www.devguru.com/.

burian
Download Presentation

Introduction Aux Systèmes d’Information et Multimédia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction Aux Systèmes d’Information et Multimédia (X)HTML / Pages Web Statiques T. Bourdeaud’huy S. Collart-Dutilleul P. Kubiak IG2I - Saison 2006/2007 Timothy Berners-Lee

  2. Javascript S4 : Syntaxe S5 : Interfaçage avec le modèle DOM, objets Ressources : http://www.devguru.com/

  3. Javascript? • Langage de script Orienté Objet créé par Sun Microsystems • Interprété par le navigateur (non compilé) • S’exécute du côté client (ne sollicite pas le serveur) • S’intègre dans le code HTML • Supporté par un grand nombre de navigateur mais attention : problèmes de compatibilité. ISIM1 – Pages Web Statiques 3

  4. Langage : • Sensible à la casse • Chaque instruction se termine par un point-virgule (;) • Objets • Événementiel (passage de souris, clic, saisie clavier, etc...) • Différentes versions : • Javascript 1.3 compatible avec I.E5.x et 6.X - Netscape 6.x • Javascript et VBscript ? ISIM1 – Pages Web Statiques 4

  5. Pour quoi faire ? • Outils de programmation pour les développeurs de pages web • Quelques exemples : • Insérer dynamiquement du texte dans une page HTML • Réagir à des événements • Lire et écrire des éléments HTML • Valider des données • … ISIM1 – Pages Web Statiques 5

  6. Javascript ≠ Java ? ISIM1 – Pages Web Statiques 6

  7. Javascript : résumé • Avantages • Pages web dynamiques • Allège le traitement et les délais • Simple d’utilisation • Accès directe aux propriétés du document • Inconvénients • Compatibilité avec le navigateur • « Plantage » en cas d’erreurs dans le script • Pas de confidentialité du code ISIM1 – Pages Web Statiques 7

  8. Insérer du code JavaScript • Plusieurs endroits : • dans le corps de la page, • en entête de page, • dans un événement d'un objet de la page. <SCRIPT language="Javascript"> script </SCRIPT> Ou <script type="text/javascript"> • À l’extérieur de la page (librairie) <script src="message.js" type="text/javascript"></script> ISIM1 – Pages Web Statiques 8

  9. Insérer des commentaires • Ne pas confondre les balises de commentaires du langage HTML et les caractères de commentaires Javascript • Ligne en commentaire // Tous les caractères derrière le // sont ignorés • Paragraphe en commentaire /* Toutes les lignes comprises entre ces repères Sont ignorées par l'interpréteur de code */ • Ne pas imbriquer les commentaires ISIM1 – Pages Web Statiques 9

  10. Mon premier Programme <html> <body> <script> <!-- document.write(‘Hello world !!!!!’); // fin du script --> </script> </body> </html> • Visualiser erreurs sous Firefox : • Taper ‘javascript:’ dans la barre d’adresse ISIM1 – Pages Web Statiques 10

  11. Objets ? • Le Javascript traite les éléments qui s'affichent dans votre navigateur comme des objets, c'est-à-dire des éléments classés selon une hiérarchie pour pouvoir les désigner précisément auxquels on associe des propriétés ISIM1 – Pages Web Statiques 11

  12. jardin arbre branche feuille nid largeur: 20 couleur: jaune hauteur: 4 tronc racine salade balançoire trapèze corde nid largeur: 15 couleur: marron hauteur: 6 Le nid sur l'arbre est donc désigné comme suit: jardin.arbre.branche.nid Contrairement au nid situé sur la balançoire: balançoire.nid Modifier jardin.arbre.branche.nid.couleur= vert; En Javascript, ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre navigateur... Hiérarchie ISIM1 – Pages Web Statiques 12

  13. Les objets du navigateur • Pour accéder à un objet particulier : • On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu! • L'objet le plus grand est l'objet fenêtre : window • Dans la fenêtre s'affiche une page, c'est l'objet document • Cette page peut contenir plusieurs objets, comme des formulaires, des images, ... • Accéder aux objets : notation pointée ISIM1 – Pages Web Statiques 13

  14. Les variables • Réservation de mémoire : var • var nombre; • var chaine; • Une telle déclaration crée une variable vide et non typée • Le “typage” se fait à l’affectation ! • var nombre=2; • var chaine=“hello”; ISIM1 – Pages Web Statiques 14

  15. Les variables • 4 types de données: • des nombres : entiers ou à virgules • des chaînes de caractères (string) : une suite de caractères • des booléens : des variables à deux états permettant de vérifier une condition • true : si le résultat est vrai (1) • false : lors d'un résultat faux (0) • des variables de type null : un mot caractéristique pour indiquer qu'il n'y a pas de données ISIM1 – Pages Web Statiques 15

  16. Les nombres • Entiers • Écriture décimale : 21 • Écriture hexadécimale : 0x15 • Réels • Écriture pointée : 3.14 • Écriture exponentielle : 314E-2 • Fraction: 27/11 • Attention : les booléens ne sont pas des entiers! ISIM1 – Pages Web Statiques 16

  17. Les chaînes de caractères • Les chaînes de caractères sont délimitées par des " " ou des ‘’ • Dans le cas d’un présence d’un caractère " ou ‘ il faut le protéger (précéder par) avec un anti-slash (\) • Séquences d ’échappement : • \b : touche de suppression • \f : formulaire plein • \n : retour à la ligne • \r : appui sur la touche ENTREE • \t : tabulation • \" : guillemets doubles • \' : guillemets simples • \\ : caractère antislash • Exemples : Titre = "Qu'y a-t'il dans \"c:\\windows\\\""; Ou Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"'; ISIM1 – Pages Web Statiques 17

  18. Les opérateurs arithmétiques ISIM1 – Pages Web Statiques 18

  19. L’opérateur d'assignation ISIM1 – Pages Web Statiques 19

  20. Les opérateurs de comparaison ISIM1 – Pages Web Statiques 20

  21. Les opérateurs logiques ISIM1 – Pages Web Statiques 21

  22. if (condition réalisé) { liste d'instructions } if (condition réalisé) { liste d'instructions } else { autre série d'instructions } for (compteur; condition; modification du compteur) { liste d'instructions } while (condition réalisée) { liste d'instructions } do { liste d'instructions } while (condition) switch (expression) { case cas1: liste d'instructions break case cas2: liste d'instructions break default: liste d'instructions } Les structures ISIM1 – Pages Web Statiques 22

  23. Exercice 1 <html> <head> <title>Mon premier script JavaScript!</title> </head> <body> <H3>Ceci est un document HTML habituel.</H3> <script language="JavaScript"> document.writeln("<I>"+"Ceci est une partie de texte écrite"+ " avec JavaScript"+"</I><BR>"); var now=new Date(); document.write("Aujourd'hui, nous sommes le "+now); </script> <H3>Nous sommes de retour au code HTML habituel.</H3> </body> </html> ISIM1 – Pages Web Statiques 23

  24. Exercices • Afficher une image • Ecrire la somme des 100 premiers naturels non nuls ISIM1 – Pages Web Statiques 24

  25. Fonctions, Librairies + : Concaténation • Définition d’un fonction function bonjour(NOM) { var Bnom=”bonjour “+NOM; return Bnom; // facultatif } • Définition d’une librairie <script src="dhtmllib.js"> </script> ISIM1 – Pages Web Statiques 25

  26. Exercices • Ecrire une fonction qui affiche l’argument passé en paramètre en passant une ligne. • 2ème version : Ecrire une fonction qui affiche l’argument passé en paramètre en le numérotant. Implémenter une méthode permettant de remettre à zéro ce compteur. • 3ème version : Inclure ces fonctions dans une librairie séparée. • Fonction factorielle • Itératif, récursif • Fonction PGCD • Itératif, récursif • Fonction aléatoire • Math.random()  entre 0 et 1 • Codes ascii des caractères dans un tableau HTML • String.fromCharCode(i)  lettre dont le code est i • String("A").charCodeAt(0)  code ascii de A ISIM1 – Pages Web Statiques 26

  27. Premières interactions avec l’utilisateur • Boites de dialogue : • alert("texte")  affichage • prompt("question", "réponse par défaut");  réponse • confirm(‘message’);  true, false ISIM1 – Pages Web Statiques 27

  28. Tableaux • Un tableau est un objet Array. Pour déclarer un tableau, il faut utiliser l'instruction new : • var tab=new Array; • En javascript, le premier élément commence à l'indice 0 • Exemple: var tab=new Array(7); tab[0]="Lundi"; tab[1]="Mardi"; tab[2]="Mercredi"; tab[3]="Jeudi"; tab[4]="Vendredi"; tab[5]="Samedi"; tab[6]="Dimanche"; • La longueur du tableau s’obtient par la propriété length : • var longueur=tab.length; ISIM1 – Pages Web Statiques 28

  29. Exercices • Créer des fonctions qui affichent le contenu d’un tableau case par case en les numérotant. On utilisera les instructions for et while. • 2ème version : on affiche ce tableau dans un tableau html. • Crible d’Eratosthène • Changement de base • Utilisation de la forme de Hörner • Utilisation d’une pile FILO (fonctions push, pop) • Utilisation d’une chaîne "0123456789ABCDEF"  et de la fonction charAt • Génération chaîne de caractères aléatoire ISIM1 – Pages Web Statiques 29

  30. Chaînes de caractères • Pour déclarer une chaîne de caractères, on utilise les guillemets ou l'apostrophe • Opérations sur les chaînes : • Concaténation: • var chaine=chaine1+chaine2; • Longueur d’une chaine : • chaine.length() • Extraire un morceau d'une chaîne : substring • La méthode substring attend 2 paramètres : • l'indice du premier caractère (inclus), • l'indice du dernier caractère (exclus). ISIM1 – Pages Web Statiques 30

  31. Chaînes de caractères • Chercher une chaîne dans une sous-chaine • chaine.indexOf(souschaine,debut) • // renvoie la première occurrence • domaine.lastIndexOf("souchaine") • // renvoie la dernière occurrence de la sous chaîne. • Découper une chaîne • chaine.split("délimiteur") • Autre : • chaine.toUpperCase() • chaine.toLowerCase() • Codes ASCII • String.fromCharCode(i)  lettre dont le code est i • String("A").charCodeAt(0)  code ascii de A • String("A").charAt(j)  jième lettre de la chaîne A ISIM1 – Pages Web Statiques 31

  32. Exercices • Fonctions basename • Renvoyer nom de fichier [filename] • Renvoyer chemin complet (sans nom de fichier) [basename] • Renvoyer premier répertoire [dirname] • Fonction basename paramétrée • Donner le nombre de sous-répertoires à exclure/inclure • Versions itératives et récursives ISIM1 – Pages Web Statiques 32

  33. Expressions Régulières • Utilisé pour effectuer des recherche ou des remplacements à l’intérieur d’une chaîne de caractères • Notations pour indiquer le format de ce qui recherché ou remplacé • Fonctions utilisables avec un objet String : • Match() : pour rechercher les occurrences de l’expression régulière dans une chaîne • Replace() pour remplacer les occurrences de l’expression régulière dans une chaîne par une autre • Search() pour rechercher l’indice d’une occurrence d’expression régulière dans une chaîne • chaine.match(expression) • chaine.search(expression) • chaine.replace(expression, remplacement) ISIM1 – Pages Web Statiques 33

  34. Expressions Régulières • Commence et se termine toujours par / • ^  début de la chaîne • $  fin de la chaîne • .  N’importe quel caractère • /a/ on recherche un "a" • /ab/ on recherche la chaîne ab • [ ] permet d’indiquer la plage de caractères • [abc] on recherche un des caractères a,b,c • [a-z] on recherche une lettre de a à z • [a-zA-Z0-9] caractères alphanumériques • [^abc] on recherche tout caractère sauf a, b ou c ISIM1 – Pages Web Statiques 34

  35. Expressions Régulières • Caractères répétitifs • {n,m} permet de rechercher le caractère au moins n fois mais pas plus de m fois • a{1,2} indique qu’on recherche le caractère a une fois ou deux fois maximum • [0-9]{1,5} indique qu’on recherche 1 à 5 chiffres consécutifs • a{1,} indique qu’on recherche le caractère au moins un fois • a{1} équivaut à a{1,1} • (ab)+ rechercher la chaine « ab » au moins une fois • (a|b)* rechercher des « a » ou des « b » qui se suivent dans n’importe quel ordre • Drapeaux : • /xxx/i (insensible à la casse) • /xxx/g (toutes les occurences) ISIM1 – Pages Web Statiques 35

  36. Expressions Régulières function verifMail(mail) { re = /^[a-z0-9\.]*\@[a-z0-9]*\.[a-z0-9]{2,4}$/; if (mail.match(re)!=null) return true; else return false; } alert(verifMail("toto@titi.freee")); chaine="http://www.devguru.com/Technologies/index.html"; chaine2 = chaine.replace(/^(.*)\/([^\.]*)\.(.*)$/, "Nom fichier : $2\nExtension : $3\nRepertoire : $1"); alert(chaine2); var madate = "03-31-2007"; madate2 = madate.replace(/^([0-9]{2})-([0-9]{2})-([0-9]{4})$/, "$2/$1/$3"); alert(madate2); basename,filename et extension en une seule ligne ! ISIM1 – Pages Web Statiques 36

  37. chaine="http://www.devguru.com/Technologies/index.html"; chaine2 = chaine.replace(/^(.*)\/([^\.]*)\.(.*)$/,"Nom fichier : $2\nExtension :$3\nRepertoire : $1"); alert(chaine2); ISIM1 – Pages Web Statiques 37

More Related