Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques Timothy Berners-Lee

Javascript S4 : Syntaxe S5 : Interfaçage avec le modèle DOM, objets Ressources :

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

ISIM 1 – Pages Web Statiques 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 ?

ISIM 1 – Pages Web Statiques 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 –…

ISIM 1 – Pages Web Statiques 6 Javascript Java ? JavascriptJava Langage interprétéLangage compilé Code intégré au HTML Code (applet) à part du document HTML, appelé à partir de la page Langage peu typé Langage fortement typé (déclaration du type de variable) Liaisons dynamiques: les références des objets sont vérifiées au chargement Liaisons statiques: Les objets doivent exister au chargement (compilation) Accessibilité du codeConfidentialité du code Sûr: ne peut pas écrire sur le disque dur

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

ISIM 1 – Pages Web Statiques 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 Ou –À lextérieur de la page (librairie)

ISIM 1 – Pages Web Statiques 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

ISIM 1 – Pages Web Statiques 10 Mon premier Programme <!-- document.write(Hello world !!!!!); // fin du script --> Visualiser erreurs sous Firefox : –Taper javascript: dans la barre dadresse

ISIM 1 – Pages Web Statiques 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

ISIM 1 – Pages Web Statiques 12 Hiérarchie 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...

ISIM 1 – Pages Web Statiques 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

ISIM 1 – Pages Web Statiques 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 à laffectation ! –var nombre=2; –var chaine=hello;

ISIM 1 – Pages Web Statiques 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

ISIM 1 – Pages Web Statiques 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!

ISIM 1 – Pages Web Statiques 17 Les chaînes de caractères Les chaînes de caractères sont délimitées par des " " ou des Dans le cas dun présence dun 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\\\"';

ISIM 1 – Pages Web Statiques 18 Les opérateurs arithmétiques OpérateurDescriptionExempleRésultat +Addition x=2 x+2 4 -Soustraction x=2 5-x 3 *Multiplication x=4 x*5 20 /Division 15/5 5/ %Modulo (reste de la division) 5%2 10%8 10% Incrément x=5 x++ x=6 --Décrément x=5 x-- x=4

ISIM 1 – Pages Web Statiques 19 Lopérateur d'assignation OperateurExempleÉquivalent à =x=y +=x+=yx=x+y -=x-=yx=x-y *=x*=yx=x*y /=x/=yx=x/y %=x%=yx=x%y

ISIM 1 – Pages Web Statiques 20 Les opérateurs de comparaison OpérateurDescriptionExemple ==Égal5==8 retourne faux !=Différent 5!=8 retourne vrai >Plus grand que 5>8 retourne faux <Plus petit que 5<8 retourne vrai >=Plus grand ou égal à 5>=8 retourne faux <=Plus petit ou égal à 5<=8 retourne vrai

ISIM 1 – Pages Web Statiques 21 Les opérateurs logiques OpérateurDescriptionExemple &&andx=6 y=3 (x 1) retourne vrai ||orx=6 y=3 (x==5 || y==5) retourne faux !notx=6 y=3 !(x==y) retourne vrai

ISIM 1 – Pages Web Statiques 22 Les structures 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 }

ISIM 1 – Pages Web Statiques 23 Exercice 1 Mon premier script JavaScript! Ceci est un document HTML habituel. document.writeln(" "+"Ceci est une partie de texte écrite"+ " avec JavaScript"+" "); var now=new Date(); document.write("Aujourd'hui, nous sommes le "+now); Nous sommes de retour au code HTML habituel.

ISIM 1 – Pages Web Statiques 24 Exercices Afficher une image Ecrire la somme des 100 premiers naturels non nuls

ISIM 1 – Pages Web Statiques 25 Fonctions, Librairies Définition dun fonction function bonjour(NOM) { var Bnom=bonjour +NOM; return Bnom; // facultatif } Définition dune librairie + : Concaténation

ISIM 1 – Pages Web Statiques 26 Exercices Ecrire une fonction qui affiche largument passé en paramètre en passant une ligne. –2ème version : Ecrire une fonction qui affiche largument 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

ISIM 1 – Pages Web Statiques 27 Premières interactions avec lutilisateur Boites de dialogue : –alert("texte") affichage –prompt("question", "réponse par défaut"); réponse –confirm(message); true, false

ISIM 1 – Pages Web Statiques 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 sobtient par la propriété length : –var longueur=tab.length;

ISIM 1 – Pages Web Statiques 29 Exercices Créer des fonctions qui affichent le contenu dun 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 dEratosthène Changement de base –Utilisation de la forme de Hörner –Utilisation dune pile FILO (fonctions push, pop) –Utilisation dune chaîne " ABCDEF" et de la fonction charAt Génération chaîne de caractères aléatoire

ISIM 1 – Pages Web Statiques 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 dune 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).

ISIM 1 – Pages Web Statiques 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) j ième lettre de la chaîne A

ISIM 1 – Pages Web Statiques 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

ISIM 1 – Pages Web Statiques 33 Expressions Régulières Utilisé pour effectuer des recherche ou des remplacements à lintérieur dune 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 lexpression régulière dans une chaîne –Replace() pour remplacer les occurrences de lexpression régulière dans une chaîne par une autre –Search() pour rechercher lindice dune occurrence dexpression régulière dans une chaîne chaine.match(expression) chaine.search(expression) chaine.replace(expression, remplacement)

ISIM 1 – Pages Web Statiques 34 Expressions Régulières Commence et se termine toujours par / –^ début de la chaîne –$ fin de la chaîne –. Nimporte quel caractère –/a/ on recherche un "a" –/ab/ on recherche la chaîne ab –[ ] permet dindiquer 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

ISIM 1 – Pages Web Statiques 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 quon recherche le caractère a une fois ou deux fois maximum –[0-9]{1,5} indique quon recherche 1 à 5 chiffres consécutifs –a{1,} indique quon 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 nimporte quel ordre Drapeaux : –/xxx/i (insensible à la casse) –/xxx/g (toutes les occurences)

ISIM 1 – Pages Web Statiques 36 Expressions Régulières function verifMail(mail) { re = if (mail.match(re)!=null) return true; else return false; } chaine=" chaine2 = chaine.replace(/^(.*)\/([^\.]*)\.(.*)$/, "Nom fichier : $2\nExtension : $3\nRepertoire : $1"); alert(chaine2); var madate = " "; 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 !

ISIM 1 – Pages Web Statiques 37 chaine=" dex.html"; chaine2 = chaine.replace(/^(.*)\/([^\.]*)\.(.*)$/, "Nom fichier : $2\n Extension :$3\n Repertoire : $1"); alert(chaine2);