Introduction Aux Systèmes d’Information et Multimédia
description
Transcript of Introduction Aux Systèmes d’Information et Multimédia
Introduction Aux Systèmes d’Information et
Multimédia
Introduction Aux Systèmes d’Information et
Multimédia
T. Bourdeaud’huy S. Collart-Dutilleul
P. KubiakIG2I - Saison 2006/2007
(X)HTML / Pages Web Statiques
(X)HTML / Pages Web Statiques
Timothy Berners-Lee
JavascriptJavascript
S4 : SyntaxeS5 : Interfaçage avec le modèle DOM, objets
Ressources : http://www.devguru.com/
ISIM1 – Pages Web Statiques 3
Javascript?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 4
Langage : 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 5
Pour quoi faire ?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 6
Javascript ≠ Java ? Javascript ≠ Java ?
Javascript Java
Langage interprété Langage compilé
Code intégré au HTMLCode (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 code Confidentialité du code
Sûr: ne peut pas écrire sur le disque dur
Sûr: ne peut pas écrire sur le disque dur
ISIM1 – Pages Web Statiques 7
Javascript : résumé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 8
Insérer du code JavaScript
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 9
Insérer des commentaires
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 10
Mon premier Programme
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 11
Objets ?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 12
HiérarchieHié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...
ISIM1 – Pages Web Statiques 13
Les objets du navigateurLes 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 14
Les variablesLes 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 15
Les variablesLes 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 16
Les nombresLes 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 17
Les chaînes de caractères
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 18
Les opérateurs arithmétiques
Les opérateurs arithmétiques
Opérateur Description Exemple Résultat
+ Addition x=2x+2
4
- Soustraction x=25-x
3
* Multiplication x=4x*5
20
/ Division 15/55/2
32.5
% Modulo (reste de la division) 5%210%810%2
120
++ Incrémentx=5x++
x=6
-- Décrémentx=5x--
x=4
ISIM1 – Pages Web Statiques 19
L’opérateur d'assignation
L’opérateur d'assignation
Operateur Exemple Équivalent à
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
ISIM1 – Pages Web Statiques 20
Les opérateurs de comparaisonLes opérateurs de comparaison
Opérateur Description Exemple
== Égal 5==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
ISIM1 – Pages Web Statiques 21
Les opérateurs logiquesLes opérateurs logiques
Opérateur Description Exemple
&& and x=6y=3 (x < 10 && y > 1) retourne vrai
|| or x=6y=3 (x==5 || y==5) retourne faux
! not x=6y=3 !(x==y) retourne vrai
ISIM1 – Pages Web Statiques 22
Les structuresLes 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 }
ISIM1 – Pages Web Statiques 23
Exercice 1Exercice 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 24
ExercicesExercices
Afficher une image Ecrire la somme des 100 premiers naturels non nuls
ISIM1 – Pages Web Statiques 25
Fonctions, LibrairiesFonctions, Librairies
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>
+ : Concaténation
ISIM1 – Pages Web Statiques 26
ExercicesExercices
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 27
Premières interactions avec l’utilisateur
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 28
TableauxTableaux
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 29
ExercicesExercices
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 30
Chaînes de caractèresChaî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 31
Chaînes de caractèresChaî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 32
ExercicesExercices
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 33
Expressions RégulièresExpressions 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 34
Expressions RégulièresExpressions 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 35
Expressions RégulièresExpressions 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 36
Expressions RégulièresExpressions 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("[email protected]"));
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 37
chaine="http://www.devguru.com/Technologies/index.html";
chaine2 = chaine.replace(/^(.*)\/([^\.]*)\.(.*)$/, "Nom fichier : $2\nExtension :$3\nRepertoire : $1");
alert(chaine2);