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é.


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 ?


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– …


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


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


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>


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


Mon premier Programme

Mon premier Programme

<html><body><script></script></body></html>

Visualiser erreurs sous Firefox : – Taper ‘javascript:’ dans la barre d’adresse


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


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...


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


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”;


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


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!


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\\\"';


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


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


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


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


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 }


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>


ExercicesExercices

Afficher une image Ecrire la somme des 100 premiers naturels non nuls


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


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


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


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;


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


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).


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


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


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)



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



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)



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 !


chaine="http://www.devguru.com/Technologies/index.html";

chaine2 = chaine.replace(/^(.*)\/([^\.]*)\.(.*)$/, "Nom fichier : $2\nExtension :$3\nRepertoire : $1");

alert(chaine2);

Documents

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