Vous êtes sur la page 1sur 40

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

JavaScript et Feuille de Style


Introduction 1. Javascript 1.1 Historique 1.2. Ou placer du code Javascript 1.3. Masquage des scripts 2. Structure dun programme 2.1 La dclaration de variables 2.2. Porte (visibilit) des variables 3. Types de donnes 3.1. Les chanes de caractres : lobjet String 4. Les Oprateurs 4.1. Oprateurs mathmatiques 4.2. Oprateurs de comparaison 4.3. Oprateurs logiques 5. Structures de contrle 5.1. if 5.2. while 5.3. do while 5.4. for 6. Fonctions 6.1. La dclaration d'une fonction 6.2. Appel de fonction 6.3. Les paramtres d'une fonction 7. Tableau 8. Lobjet Dates 8.1 Cration d'un objet Date 8.2. Les mthodes de l'objet Date 9. Les Objets du Navigateur 9.1. Les mthodes de l'objet window 9.2. Les mthodes alert(), confirm() et prompt() 10. Les vnements 10.1. Objets auxquels on peut associer des vnements 11. Exemple JavaScript 12. Les feuilles de style CSS

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Introduction Javascript cest quoi ? Javascript est un langage de programmation ressemble C, C++ et Java.
un langage pour augmenter l'interaction dans les pages HTML

Javascript est un langage de script, dpendant de HTML


Le code Javascript est intgr compltement dans le code HTML, et

interprt par le navigateur ct client (client-side ).

Javascript permet dinteragir avec lusager de la page Web grce des gestionnaires d'vnement (clic de la souris, validation de formulaire.)

Javascript est un langage interprt: lordinateur convertit chaque excution le code source en langage excutable. Dans un langage de programmation compil, le code source est compil une seule fois afin de crer un fichier excutable. Dans un langage interprt, le code source est toujours lisible (on peut vrifier ce quest le contenu du programme).

Qu'est que Javascript peut faire ?


Javascript permet d'ajouter du code dynamique dans les pages HTML, par exemple la date du jour Javascript ragi aux vnements, par exemple lorsqu'un usager clique sur un bouton d'un formulaire, les donnes peuvent tre valides avant l'envoi au serveur web; Javascript peut dtecter le navigateur de l'usager est ainsi adapter la page web selon les particularits de chaque navigateur

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

1.1 Historique Le nom JavaScript est une proprit de Netscape. Limplantation de Microsoft porte le nom JScript. Javascript a t standardis par lECMA (European Computer Manufacturers ECMAScript. 1.2. Ou placer du code Javascript On peut placer du code JavaScript dans une page HTML des endroits diffrents. a. Entre les balises <SCRIPT>....</SCRIPT> Dans la section d'en-tte, dans le corps de la page ou dans les deux. Scripts dans la section head et body <head> <script type="text/javascript"> .... </script> </head> <body> ... <script type="text/javascript"> .... </script> ... </body> Dans ce cas : Dans le <HEAD> Le code est valu au dbut du chargement de la page il n'est pas excut tout de suite. Dans le <body> il est immdiatement excut en mme temps que le code HTML est interprt. Association ). La version standardise sappelle

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Il est ncessaire d'inclure les dclarations de fonctions dans la section <HEAD>..</HEAD>.

b. Associ une balise HTML qui gre un vnement.


Le code Javascript insr sous forme d'un appel de fonction, affecte

un gestionnaire d'vnement L'excution du code est alors provoque par appel d'une fonction Javascript excution constitue une rponse l'vnement. c. Dans un fichier externe Le script dans un fichier externe doit avoir l'extension js et il peut tre utilis dans plusieurs pages HTML. Pour l'utiliser dans une page HTML, il faut mettre sont URL dans l'attribut src de l'lment script: <script src="xxx.js" /> Il faut mettre l'lment script o le code Javascript doit tre excut dans la page HTML. Le Javascript codes dans un fichier insrer est le suivant: <SCRIPT LANGUAGE=Javascript SRC="url/fichier.js"> </SCRIPT> Un exemple de Javascript Voici la page HTML correspondante: <HTML> <HEAD> <TITLE> Voici une page contenant du Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!-alert("Bonjour a tous !");

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

// --> </SCRIPT> </BODY> </HTML> 1.3. Masquage des scripts Pas tous les navigateurs ne peuvent grer des programmes Javascript. On peut cacher le Javascript de la faon suivante: <SCRIPT language="Javascript"> <!-alert("Bonjour a tous !"); // --> </SCRIPT> On peut aussi utiliser le conteneur <noscript> afin de proposer un contenu sans Javascript. 2. Structure dun programme Javascript est sensible la casse Les commentaires peuvent tre spcifis par // // Voici un commentaire dune ligne /* et voici un commentaire Sur plusieurs ligne */ Les point-virgules ne sont pas obligatoires aprs une expression si elle est suivie dun retour la ligne (mais souvent on place des point-virgules aprs chaque expression). Les accolades ({ et }) permettent de former des blocs dinstruction. Chaque variable utilise doit tre dclare et par /* ... */

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un "_" un nom de variables peut comporter des lettres, des chiffres et les caractres _ et &, les espaces ne sont pas autoriss!

2.1 La dclaration de variables La dclaration des variables peut se faire de deux faons:
explicite, utilisez le du mot cl var

var chaine= " bonjour tout le monde " ; var b=450 ;


Implicite, utilisez =

chaine= "bonjour tout le monde " ;


2.2. Porte (visibilit) des variables Une variable est dclare sans le mot cl var (varx), elle est accessible de partout dans le script donc on parle alors de variable globale Une variable est dclare de faon explicite en javascript (var varx ), sa porte dpend de l'endroit o elle est dclare. au dbut du script, c'est--dire avant toute fonction sera globale dans une fonction aura une porte limite cette seule fonction. 3. Types de donnes nombres : entiers ou virgules valeurs boolennes : true ou false chanes de caractres (string): une suite de caractres

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

objets tableaux

Caractres spciaux \b : touche de suppression \f : formulaire plein \n : retour la ligne


\r : appui sur la touche ENTREE

\t : tabulation \" : guillemets doubles \' : guillemets simples \\ : caractre antislash 3.1. Les chanes de caractres : lobjet String L'objet String est un objet qui contient un certain nombre de proprits et de mthodes permettant la manipulation de chanes de caractres. Les proprits de l'objet String La proprit length : retourner la longueur d'une chane de caractres. Les mthodes de l'objet String Mthodes et leurs descriptions charAt(chane, position) ou chane.charAt(position) Retourne le caractre situ la position donne en paramtre

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

indexOf(sous-chane, position) Retourne la position d'une sous-chane dans une chane de caractre, en effectuant la recherche de gauche droite, partir de la position spcifie en paramtre.

lastIndexOf(sous-chane, position) La mthode est similaire indexOf(), la diffrence que la recherche se fait de droite gauche: Retourne la position d'une sous-chane dans une chane de caractre, en effectuant la recherche de droite gauche, partir de la position spcifie en paramtre. substring(position1, position2) La mthode retourne la sous-chane (lettre ou groupe de lettres) comprise entre les positions 1 et 2 donnes en paramtre. toLowerCase() toUpperCase() toUpperCase() Convertit tous les caractres d'une chane en minuscule Convertit tous les caractres d'une chane en majuscule Convertit tous les caractres d'une chane en majuscule

4. Les Oprateurs 4.1. Oprateurs mathmatiques x++ quivalent x=x+1 x-- quivalent x=x-1 x+=y quivalent a x=x+y x-=y quivalent x=x-y x*=y quivalent a x=x*y x/=y quivalent x=x/y x%y reste de la division entire de x par y 4.2. Oprateurs de comparaison
9

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

x==y est VRAI si x est gal y x!=y est VRAI si x est diffrent de y x<y est VRAI si x est plus petit que y x>y est VRAI si x est plus grand que y x<=y est VRAI si x est plus petit que y+1 x>=y est VRAI si x est plus grand que y-1 4.3. Oprateurs logiques Une valeur logique (boolenne) est toujours soit VRAI soit FAUX X && y est VRAI si x et y sont VRAI. Si x est FAUX, la valeur de y nest pas value. X | | y test VRAI au moins un de x et y est VRAI. Si x est VRAI, la valeur de y nest pas value. !x correspond au NON logique 5. Structures de contrle On des fois besoin de rpter une certaine opration plusieurs fois ou de seulement lexcuter si une certaine condition est remplie. structures de contrle disponibles: if ... else for( ... ; ... ; ... ) while( ...) do ... while( ... )

5.1. if if (condition) { .. ;
10

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

else

} { .. ; }

Si la condition est vraie, alors code 1 est excut. Si la condition est fausse, alors code 2 est excut. Le bloc else nest pas obligatoire. (condition) ? instruction si vrai : instruction si faux 5.2. while while (condition) { . ; } Tant que la condition est vraie, code est excut. Attention de ne pas crer de boucles infinies. Permet de rpter une action tant quune condition est remplie.

chiffre = 0 ; somme = 0 ; while ( chiffre < 5 ) { chiffre = chiffre + 1; somme = somme + chiffre; }
5.3. do while do { .. ; } while (condition); Tant que la condition est vraie, code est execut. Similaire la boucle while, mais la condition est vrifie la fin de la boucle. Le code est toujours execut au moins une fois.

11

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Attention ne pas crer de boucles infinies.

somme = 0 ; do { chiffre = chiffre + 1 ; somme = somme + chiffre; } while ( chiffre< 5 )

5.4. for for (initialisation; test; incrementation){ }

somme = 0 ; for ( chiffre = 1 ; chiffre <= 5 ; chiffre = chiffre + 1 ) { somme = somme + chiffre ; } Exemple : Calculer la somme des 100 premiers naturels non nuls : <HTML><HEAD> <TITLE> Exemple </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var somme=0; var nombre= 100; for (i=1; i <=nombre ; i++) somme=somme + i ; document.write("La somme des premiers naturels jusqu' " + nombre + " est gale " + somme+ "<BR>"); document.write( "Pour vrifier : ("+nombre+ " * "+ (nombre+1)+" )/2 = "+somme); </SCRIPT></BODY></HTML> } 6. Fonctions
On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instruction par simple appel de la fonction dans le corps du programme principal.
12

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

6.1. La dclaration d'une fonction Avant d'tre utilise, une fonction doit tre dfinie car pour l'appeler dans le corps du programme il faut que le navigateur la connaisse, c'est--dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient. La dclaration d'une fonction se fait grce au mot cl function selon la syntaxe suivante: function Nom_De_La_Fonction(argument1, d'instructions } 6.2. Appel de fonction argument2, ...) {liste

Pour excuter une fonction, il suffit de faire appel elle en crivant son nom suivie d'une parenthse ouverte (ventuellement des arguments) puis d'une parenthse ferme: Nom_De_La_Fonction(); Dclarez gnralement les fonctions dans des balises SCRIPT situes dans l'entte de la page, c'est--dire entre les balises <SCRIPT> et </SCRIPT>) Grce au gestionnaire d'vnement onLoad ( placer dans la balise BODY) il est possible d'excuter une fonction au chargement de la page, comme par exemple l'initialisation des variables pour votre script, et/ou le test du navigateur pour savoir si celui-ci est apte faire fonctionner le script.

function carre(nombre) { resultat = nombre * nombre ; return(resultat) }


Le mot-cl this Lorsque vous fates appel une fonction partir d'un objet, par exemple un formulaire, le mot cl this fait rfrence l'objet en cours. 6.3. Les paramtres d'une fonction Tous les arguments de type nombre et boolen sont transmis par valeur, i.e. la fonction obtient la valeur des arguments, mais ne peut pas les modifier. Les arguments de type objet sont transmis par rfrence. Les fonctions mathmatiques Math.abs(x) Math.acos(x) Math.atan(x) Math.atan(y,x)
13

Math.asin(x) Math.cos(x)

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Math.exp(x) Math.max(x,y) Math.pow(x,y) Constantes mathmatiques Math.E Math.PI

Math.log(x) Math.min(x,y) Math.random()

Math.tan(x) Math.sqrt(x) Math.sin(x)

7. Tableau Les tableaux permettent de stocker facilement des donnes et de pouvoir y accder par la suite. Une variable ne peut contenir qu'une seule et unique valeur. Un tableau peut en contenir infiniment. JavaScript tant orient objet, les tableaux ne font pas exception : ce sont des objets avec leurs proprits et leurs mthodes. Pour crer un objet, on utilise la syntaxe suivante : var indentificateur = new constructeur(argument1, argument2, ...); L'identificateur doit tre un identificateur valide, qui doit suivre les mme rgles que pour les noms de variables. Le constructeur doit tre une fonction constructeur valide (nous tudierons plus en dtails par la suite). Ici, le constructeur est Array (avec un A majuscule). Viennent ensuite les arguments. Il peut y en avoir ou pas. Donc, pour crer un tableau nous crirons : Exemple : var a = new Array(); var b = new Array(5); // cree un tableau vide // cree un tableau de taille 5

var cours = new Array("web", "info1", "info8"); var c = cours[0]; var livres = new Array(); // c = "web" // ne pas oublier les parenthses vides

En peut ensuite accder aux lments de ce tableau en spcifiant l'index de l'lement consern entre crochets ([ et ]). Ansi :

14

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

var livres = new Array(); livres[0] = "Math"; livres[1] = "Info"; livres[2] = "Bio"; document.write("1<sup>er</sup> livre : " + livres[0] +"<br>") // Math document.write("2<sup>eme</sup> livre : " + livres[1] "<br>"); // Info // Info document.write("3<sup>eme</sup> livre : " + livres[2] "<br>"); // Bio Une seconde possibilit de crer un tableau est d'utiliser la manire littrale. On passe en arguments, au moment de la cration du tableau, les diffrents lements. L'exemple suivant est donc quivalent au prcedent :

var livres = new Array("Math", "Info", "Bio");


Ou on peut aussi crire sous une autre forme, sans utiliser Array, avec des crochets :

var livres = ["Math", "Info", "Bio"];


Une dernire possibilit de crer un tableau est de passer en argument la longueur de celui-ci. Exemple : var MonTableau = new Array(10); document.write(MonTableau.length); // 10 lements // Sortie -> 10

Proprits
Comme tout objet, Array galement des proprits. En fait, Array n'en a qu'une seule : length Renvoi le nombre d'lements contenus dans la table. Par exemple :

var livres = new Array("Math", "Info", "Bio");


15

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

document.write(livres.length);// Sortie -> 3


Cette proprit est utile pour parcourir un tableau l'aide d'une boucle :

var livres = new Array("Math", "Info", "Bio"); for(var i=0; i < livres.length; i++) document.write("Livre N" + i + " : " + livres[i] + "<br>");

Mthodes concat() Permet de faire de deux tableaux un seul. La table ajouter doit tre passe en argument :

var MesLivres = new Array("Math", "Info", "Bio"); var TesLivres = new Array("Voyage ", "Le Maroc "); MesLivres.concat(TesLivres); // On ajoute le tableau TesLivres
join() Crer une chane de caractres avec les lments du tableau. Les lments sont spars avec la chane de caractres passe en argument qui reste optionnelle.

var livres = new Array("Math", "Info", "Bio"); var Texte = livres.join("<br>"); document.write(Texte);
reverse() Inverse l'ordre des lements du tableau. Le 1er devient le dernier, le 2me l'avant dernier, etc...

var livres = new Array("Math", "Info", "Bio"); livres.reverse(); for(var i=0; i < livres.length; i++) document.write(livres[i] + "<br>");
slice()

16

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Renvoi un tableau contenant une partie du tableau. Le 1er argument correspond l'index de dpart. Le 2me argument est optionnel. Il correspond l'index de fin. Si il est omis, tous les index jusqu' la fin du tableau seront renvoys.

var liste = new Array("un", "deux", "trois", "quatre", "cinq"); var maliste = liste.slice(1, 4); for(var i=0; i < maliste.length; i++) document.write(maliste[i] + "<br>");
sort() Permet de trier un tableau selon les valeurs des lments de celui ci. Si aucun argument n'est transmis, le tableau est tri par ordre alphabtique. L'argument possible est une fonction de tri. Cette fonction doit recevoir 2 arguments et livrer en retour une valeur ngative si le 1er argument doit tre plac avant le 2me, ou positive pour l'inverse.

var liste = new Array("un", "deux", "trois", "quatre", "cinq"); liste.sort(); for(var i=0; i < liste.length; i++) document.write(liste[i] + "<br>");

Tableaux associatifs
La diffrence entre un tableau associatif et un tableau classique, c'est qu'un tableau associatif n'utilise pas la mthode numrique pour indexer les diffrents lments, mais des noms. Dans un tableau classique, on accde par exemple ainsi un lement : var MonTableau = new Array(); MonTableau[0] = "Gold";// On accde l'lement 0 document.write(MonTableau[0]);// Sortie -> Gold Avec un tableau associatif, on y accdera ainsi :

var MonTableau = new Array(); MonTableau["nom"] = "Gold";// On accde l'lment "nom"


17

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

document.write(MonTableau["nom"]);

// Sortie -> Gold

C'est tableau sont dans certains cas plus commodes a utiliser. Pour parcourir un tableau de ce type l'aide d'une boucle, il faut utiliser la boucle for...in :

8. Lobjet Dates Lobjet Date permet dutiliser des dates et heures dans des programmes Javascript. var aujourdhui = new Date() //la date du jour var date1 = new Date(2001,02,30,8,45,0) // 30 mars 2001 8.1 Cration d'un objet Date La syntaxe pour crer un objet-date peut tre une des suivantes: variable = new Date(liste de paramtres) Date() : var aujourdhui = new Date() Date("month dd, yyyy hour:min:sec") : 13:30:00" Date(yy,mm,dd,hh,mm,ss) : Date(yy,mm,dd): Date(milliseconds) : 8.2. Les mthodes de l'objet Date Les mthodes de l'objet Date fournissent un moyen simple d'accder un seul lment, ou bien de le modifier. Leur syntaxe est la suivante: //la date du jour "December 25, 95, 11, 25 , 13, 30 , 00 95, 11, 25 1587243

1995

Objet_Date.Methode()
Extraire un lment de la date getDate() : Permet de rcuprer la valeur du jour du mois(entre 1 et 31) getDay() : Permet de rcuprer la valeur du jour de la semaine pour la date spcifie 0: dimanche 1: lundi ...
18

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

getHour() : L'objet retourn est un entier (entre 0 et 23) qui correspond l'heure getMinutes() : retourn est un entier (entre 0 et 59) qui correspond aux min getMonth() : Permet de rcuprer le numro du mois (entre 0 et 11)
getTime() : Permet de rcuprer le nombre de secondes depuis le 1er

janvier 1970 permettent de rcuprer une valeur:

9. Les Objets du Navigateur Lorsque vous ouvrez une page Web, le navigateur cre des objets prdfinis correspondant la page Web, l'tat du navigateur, et peuvent donner beaucoup d'informations qui vous seront utiles. Les objets de base du navigateur sont les suivants: navigator: qui contient des informations sur le navigateur de celui qui visite la page window: c'est l'objet o s'affiche la page, il contient donc des proprits concernant la fentre elle-mme mais aussi tous les objets-enfants contenus dans celle-ci location: contient des informations relatives l'adresse de la page l'cran history: c'est l'historique, c'est--dire la liste de liens qui ont t visits prcdemment document: il contient les proprits sur le contenu du document (couleur d'arrire plan, titre, ...) L'objet Window L'objet window est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page web, il contient donc: l'objet document: la page en elle-mme l'objet location: le lieu de stockage de la page l'objet history: les pages visites prcdemment l'objet frames: les cadres (division de la fentre en sous-fentres) 9.1. Les mthodes de l'objet window L'objet window possde des mthodes relatives l'ouverture et la fermeture des fentres.

19

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

9.2. Les mthodes alert(), confirm() et prompt() Les mthodes alert(), confirm() et prompt() sont des mthodes qui font apparatre une bote de dialogue, elles sont expliques en dtail dans le chapitre Bote de dialogue.

10. Les vnements Les vnements sont des actions de l'utilisateur, qui vont pouvoir donner lieu une interactivit exemples : le clic de souris. Grce au Javascript il est possible d'associer des fonctions, des mthodes des vnements tels que le passage de la souris au-dessus d'une zone Ce sont les gestionnaires d'vnements qui permettent d'associer une action un vnement. La syntaxe d'un gestionnaire d'vnement est la suivante: onEvenement="Action_Javascript_ou_Fonction();" Liste des vnements et leurs descriptions : Click (onClick) : Se produit lorsque l'utilisateur clique sur l'lment associ l'vnement Load (onLoad) : Se produit lorsque le navigateur de l'utilisateur charge la page en cours Unload (onUnload) Se produit lorsque le navigateur de l'utilisateur quitte la page en cours MouseOver (onMouseOver) Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un lment

20

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

MouseOut (onMouseOut) Se produit lorsque le curseur de la souris quitte un lment Focus (onFocus) Se produit lorsque l'utilisateur donne le focus un lment, c'est--dire que cet lment est slectionn comme tant l'lment actif Blur (onBlur) Se produit lorsque l'lment perd le focus, c'est--dire que l'utilisateur clique hors de cet lment, celui-ci n'est alors plus slectionn comme tant l'lment actif Change (onChange) Se produit lorsque l'utilisateur modifie le contenu d'un champ de donnes Select (onSelect) Se produit lorsque l'utilisateur slectionne un texte (ou une partie d'un texte) dans un champ de type "text" ou "textarea" Submit (onSubmit) Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le bouton qui permet d'envoyer le formulaire)

10.1. Objets auxquels on peut associer des vnements Chaque vnement ne peut pas tre associ n'importe quel objet. Objet Evnements associables Lien hypertexte : onClick, onMouseOver, onMouseOut Page du navigateur : onLoad, onUnload Bouton, Case cocher, Bouton radio, Bouton Reset : onClick
21

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Liste de slection d'un formulaire : onBlur, onChange, onFocus Bouton Submit : onSubmit Champ de texte et zone de texte : onBlur, onChange, onFocus, onSelect

22

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 1 : head.html <html > <head><title>JS - script dans l'en-tte</title> <script type="text/javascript"> function message() { document.write("Cette bote est ouverte lors du chargement de la page"); } </script> </head> <body> <h1>Javascript - Script dans la section <code>head</code> de la page HTML</h1> </body></html> Exemple 2 : body.html <html > <head> <title>JS - script dans le corps </title> </head> <body> <h1>Javascript - Script dans la section <code>body</code> de la page HTML</h1> <script type="text/javascript"> document.write("Ce message est gnr par Javascript! "); document.write("3*3456 "); document.write(3*3456); </script> </body></html>

23

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 3 : headbody.html <html > <head><title>Scrip - dans l'en-tte et corps</title> <script type="text/javascript"> // retourne la date au format "AAAA/MM/JJ" function afficheDate() { var today = new Date(); var day = today.getDate(); if (day < 10) { day = "0" + day }; var month = today.getMonth() + 1; if (month < 10) { month = "0" + month}; var year = today.getFullYear(); return ( year+ "/" + month + "/" + day); } </script> </head> <body> <h1>Javascript - Script dans la section <code>head</code> et <code>body</code> </h1> <p> Date: <script type="text/javascript">document.write(afficheDate());</script></p> </body></html> Exemple 4 : externe.html <html> <head> <title>JS - script externe</title> <script type="text/javascript" src="test.js" ></script> </head> <body> <h1>Javascript - Script externe</h1> <p> Date: <script type="text/javascript">document.write(afficheDate());</script></p> </body> </html>

24

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

test.js : // retourne la date au format "AAAA/MM/JJ" function afficheDate() { var today = new Date(); var day = today.getDate(); if (day < 10) { day = "0" + day }; var month = today.getMonth() + 1; if (month < 10) { month = "0" + month}; var year = today.getFullYear(); return ( year+ "/" + month + "/" + day); } Exemple 5 : Aerte.html <html> <head> <title>Bote d'alerte</title> <script type="text/javascript"> function disp_alert() { alert("Je suis une bote d'alerte Javascript!!") } </script> </head> <body> <h1>Javascript - Bote d'alerte</h1> <script type="text/javascript"> disp_alert(); </script> </body> </html>

25

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 6 : confirm.html <html > <head> <title>Bote de confirmation</title> <script type="text/javascript"> function disp_confirm() { var r=confirm("Cliquez sur un des boutons") if (r==true) { document.write("Vous avez cliqu sur OK!") } else { document.write("Vous avez cliqu sur Cancel!") } } </script> </head> <body> <h1>Javascript - Bote de confirmation</h1> <script type="text/javascript"> disp_confirm(); </script> </body> </html>

26

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 7 : prompt.html <html ><head><title>Bote d'invite</title> <script type="text/javascript"> function disp_prompt() { var name=prompt("Entrez avec votre nom","Samira "); document.write("Salut " + name); } </script> </head> <body> <h1>Javascript - Bote d'invite</h1> <script type="text/javascript"> disp_prompt(); </script> </body></html> Exemple8 : somme.html <HTML><HEAD> <TITLE> Exemple 8</TITLE> <SCRIPT LANGUAGE="JavaScript"> function somme_N_entiers (N) { var somme=0; for (i=1; i <=N ; i++) { somme=somme + i ; document.write("Pour i = ", i, "---> somme = " , somme , "<BR>"); } return somme } </SCRIPT> </HEAD> <BODY> <SCRIPT> var nombre= prompt("Somme jusqu' N = ", 10); document.write("Somme des 100 premiers entiers non nuls = ", somme_N_entiers(nombre)); </SCRIPT></BODY></HTML>
27

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 9 :somEv.html <HTML> <HEAD> <TITLE> Exemple 9</TITLE> <SCRIPT LANGUAGE="JavaScript"> function somme_N_entiers (nbre) { var somme=0; for (i=1; i <=nbre ; i++) { somme=somme + i ; document.write("Pour i = ", i, "---> somme = " , somme , "<BR>"); } return somme; } </SCRIPT> </HEAD> <BODY> <H3><CENTER>Somme des N premiers entiers non nuls</CENTER></H3> <FORM name=dialogue> <!-- attention, ce qui suit n'est pas une affectation ! --> Nombre =<INPUT type=text name=nombre value=10> <INPUT type=button name=bouton value="Calculer" onClick="dialogue.resultat.value=somme_N_entiers (dialogue.nombre.value)"> Rsultat =<INPUT type=text name=resultat value=""> </FORM> </BODY> </HTML>

28

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 10 : onload.html <html > <head> <title>vnement- chargement de la page</title> <script type="text/javascript"> function message() { alert("Cette bote est ouverte lors du chargement de la page"); } </script> </head> <body onload="message()"> <h1>Action faite lors du chargement de la page</h1> </body> </html> Exemple 11 : onunload.html <html > <head> <title>vnement- sortie de la page</title> <script type="text/javascript"> function message() { alert("Cette bote sera ouverte lors de la sortie de la page"); } </script> </head> <body onunload="message()"> <h1>Action faite lors de la sortie de la page</h1> </body> </html>

29

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 12 : onclick.html <html ><head> <title>vnement- Clic sur un lment</title> <script type="text/javascript"> function message() { alert("Cette bote est ouverte lors du chargement de la page"); } </script> </head> <body> <h1> Action faite lors du clic de la souris</h1> <form action=""> <input type="button" value="BOUTON" onclick="alert('BOOM!!!');"/> </form> </body></html> Exemple 13 : mouseOver.html <html > <head> <title>vnement- survol par la souris d'un lment</title> <script type="text/javascript"> function message() { alert("Cette image n'est peut pas tre tlcharge: droits d'auteur!"); } </script> </head> <body> <h1>Action faite lors du survol par la souris d'un lment de la page</h1> <img src="im1.jpg" width="400" height="400" alt="Photo universit " onmouseover="message();" /> </body></html>
30

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 14 : math.html <html lang="fr"> <head> <title>Exemple Javascript - Oprateurs mathmatiques</title> <meta name="author" content="HASNAOUI"> <meta name="keywords" content="Javascript, Exemple"> </head> <body> <h1>Oprateurs mathmatiques</h1> <p> <script type="text/javascript"> <!-var x = 6; var y = 4; document.writeln('x = ' + x + ', y = ' + y + '<br>'); document.writeln('x + y = ' + (x+y) + '<br>'); document.writeln('x - y = ' + (x-y) + '<br>'); document.writeln('x / y = ' + (x/y) + '<br>'); document.writeln('x % y = ' + (x%y) + '<br>'); document.writeln('Math.min(x,y) = ' + Math.min(x,y) + '<br>'); // --> </script> </p> </body> </html>

31

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Exemple 15 : date.html <HTML> <HEAD> <TITLE> Exemple </TITLE> </HEAD> <BODY> <SCRIPT language = "JavaScript" > var date = new Date(); // dclaration d'une variable de type Date // la variable date contient la date du jour var mois = date.getMonth() + 1; // la variable mois contient le N du mois (le rsultat de la mthode //getMonth() applique l'objet date, donne un nombre de 0 11) var jour = date.getDate() ; var annee = date.getYear(); document.write( "Date de ce jour : " , jour, " / ", mois, " / "+annee, "<BR>"); document.write( "Heure ", date.getHours(), " : ",date.getMinutes(), " : ",date.getSeconds() ); </SCRIPT> </BODY></HTML> Exemple16 : prompt.html <HTML> <HEAD> <TITLE> Exemple </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var prenom="" , classe="" ; prenom=prompt( "Ecrivez votre prnom",""); classe=prompt( "Ecrivez votre classe",""); if ( prenom !="" && classe !="") document.write("Bonjour ", prenom," ! <BR> Vous plaisez-vous en ", classe, " ?") else alert("mauvaise saisie !"); </SCRIPT> </BODY></HTML>
32

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Les Feuilles de style (CSS) CSS CSS: Cascading style sheet Contrle de la mise en page dun document HTML (polices de caractres, couleurs etc.) HTML contrle la structure du contenu du document, CSS la mise en page. Un fichier CSS est un fichier texte lui seul. Centralisation des proprits de mise en page dans un fichier qui peut tre charg par beaucoup de fichiers HTML. Style li Fichier HTML et fichier CSS sont deux fichiers spars On ajoute alors len-tte du fichier HTML <link rel="stylesheet" type="text/css" href="presentation.css"> exemple de fichier presentation.css (criture bleue sur arrire fond jaune) body { background-color : yellow; color : blue; } Une entre dune dfinition CSS est compose dun mot cl dune balise HTML suivi dune liste des proprits que lon souhaite y appliquer. On peut aussi spcifier plusieurs balises HTML en mme temps spares par des , h1, h2, h3 syntaxe dune liste de proprits: { propriete : valeur; propriete2 : valeur2; ... proprieteN : valeurN } Style incorpor et style intgr Une dfinition de style peut tre incorpore dans le fichier HTML grce au conteneur <style type="text/css"> Une dfinition de style peut aussi tre intgre dans une balise grce lattribut style Quel type utiliser? style li pour la prsentation globale style incorpor pour un prsentatione plus particulire de la page style intgr pour un lgre modification du style dj tabli
33

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Prcdence: intgr > incorpor > li Commentaires Afin de documenter votre feuille de style, vous pouvez utiliser des commentaires. Vos commentaires doivent tre dlimits par /* et */ /* body avec arriere fond bleu et ecriture jaune */ body { background-color: yellow; color : blue; } /* h1 avec ecriture rouge */ h1 { color: red } Pas tous les navigateurs supportent le conteneur <style> Par consquent, votre style pourrait tre interprt comme du code HTML ... il faut donc le cacher des navigateurs non compatibles Avec un commentaire bien sr ... <style type="text/css"> <!-h1 { color : red } --> </style> Pas tous sont gaux On veut associer un certain style quelques paragraphes (en-ttes, etc.), mais non pas tous : class <p class="important">texte tr&egrave;s important</p> Il suffit dassocier une classe tous les objets concerns et de spcifier dans le fichier CSS .nomClass comme mot cl. p.important { color : red;} sapplique tous les paragraphes de classe important. .important { color : red;} sapplique tout objet de classe important. Les balises <div> et <span> Vous voulez associer un style (une classe) quelques mots dun paragraphe? <span> est la solution. Le conteneur <div> est utilis afin de grouper plusieurs paragraphes ensemble. <p>Voici un paragraphe
34

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

<span style="color: red">tr&egrave;s</span> important</p> Pseudo-classes Il existe des classes prdfinies pour les ancres: a:active (lien slectionn), a:visited (lien dj visit), a:link (lien pas encore visit), a:hover (souris au dessus du lien) Permet de modifier lapparence dun ancre selon le cas : si le lien a dj t visit, sil est prsentement slectionn ou pas etc. On peut combiner des pseudo-classes avec des classes a.special: hover { color: red } <a class="special" href="index.html">Retour</a> Proprits de couleurs color : couleur de lcriture background-color: couleur de larrire fond 216 couleurs sont disponibles sur la palette du Web (dautres couleurs peuvent tre utilises, mais le rsultat peut varier dun ordinateur lautre). rfrence trs utile: http://www.visibone.com diffrentes faons de spcifier une couleur les couleurs les plus utilises par le nom rgb(255,255,255) pour chacune des couleurs rouge, vert et bleu, on indique une valeur entre 0 (minimum dintensit) et 255 (maximum dintensit) #FFFFFF (triplet hexadcimal) Le systme hexadcimal Chaque chiffre reprsente une valeur entre 0 et 15 (A = 10, B = 11, ..., F = 15). Un nombre hexadcimal est gnralement prcd de 0x afin de clarifier quon nest plus en systme dcimal. 16 = 10 + 6 = 1 * 101 + 6 _ 100 et donc y1y2 = y1 * 101 + y2 * 100 _ 0xy1y2 = y1 * 161 + y2 * 160 _ quelques exemples: 0xFF = 15 * 16 + 15 = 255 0xA3 = 10 * 16 + 3 = 163 0x95 = 9 * 16 + 5 = 149
35

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

Proprits de larrire-fond couleur: background-color Une image en arrire fond: background-image body { background-image: url(Paper01.jpg) } Rptition de limage: background-repeat peut prendre comme valeurs: repeat, repeat-x, repeat-y et no-repeat Position de limage: background-position peut prendre comme valeurs: top, center, bottom, left, right (seulement IE) image statique ou non: background-attachment peut prendre comme valeurs: scroll ou fixed (seulement IE) Proprits du texte color permet dindiquer la couleur du texte. text-align spcifie lalignement du texte et peut prendre comme valeurs: left, right, center et justify text-decoration ajoute une dcoration. Valeurs possibles: none, underline, overline, line-through et blink word-spacing et letter-spacing ajustent lespacement entre, respectivement, des lettres et des mots. Ils prennent une longueur comme valeur Polices de caractres Il existe 5 grandes familles de polices pour CSS serif: police proportionnelle telle que Times sans-serif: police proportionnelle telle que Helvetica monospace: police non proportionnelle telle que Courier cursive: proche dune criture la main fantasy font-family: peut prendre comme valeur des polices explicites et / ou serif, sans-serif, etc. Il est de bon style de spcifier aussi la famille si on spcifie une police explicite (telle que Times) puisquil est impossible de savoir quelles polices sont disponibles dans le fureteur du client. h1 { font-family : New Century Schoolbook, Times, serif; }
36

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

font-size: peut prendre comme valeur une longeur ou xx-small, ..., xxlarge font-weight: les valeurs les plus usuelles sont bold et bolder. Longueurs Des longueurs peuvent tre exprimes dans diffrentes units cm, mm, in ex: hauteur de la lettre x px: pixel Largeur et Hauteur width et height permettent de spcifier respectivement la largeur et la hauteur dun objet. <style type="text/css"> <!-h1 { width: 100%; background-color : yellow; color : blue; } --> </style> Bordures Toutes les bordures ne sont pas supportes par tous les navigateurs : vrifier avant dutiliser! Chacune des proprits suivantes existe aussi en version border-top-, border-right-, border-bottom- et border-left border-style: dottet | dashed | solid | double | groove | ridge | inset | outset border-width: thin | medium | thick border-color: couleur de la bordure Marges et padding Les marges indiquent lespacement entre un objet et les autres. margin permet de spcifier les marges de haut, de droite, de bas et de gauche en une seule dclaration. Sinon on peut utiliser margin-top, margin-right, margin-bottom et marginleft espace entre le contenu et la bordure: padding: 5px Listes
37

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

On peut aussi modifier lapparence des listes (<li>) grce aux feuilles de style list-style-type indique le type de reprsentation: none, disc, circle, square, decimal, lower-alpha, upper-roman, lower-greek, ... Si on veut, on peut utiliser une image avec list-style-image: url(image.gif)

Exemple : tab1.html <html > <head> <title>Exemple de tableau - 1</title> <link href="tab1.css" rel="stylesheet" type="text/css"/> </head> <body> <h1>Exemple de tableau</h1> <h2>Cours </h2> <table> <tr> <th>Code</th> <th>Nom</th> </tr> <tr> <td>Info1</td> <td>Introduction l'informatique </td> </tr> <tr> <td>Iinfo8</td> <td>Internet et cration de page web</td> </tr> </table> </body> </html> tab1.css table { border: thin solid black; }

38

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

td, th { border: thin solid black; } tab2.html <html ><head> <title>Exemple de tableau - 2</title> <link href="tab2.css" rel="stylesheet" type="text/css"/> </head> <body> <h1>Exemple de tableau</h1> <table summary="Le cours de la DESI avec leurs code et noms"> <caption> Cours </caption> <tr> <th>Code</th> <th>Nom</th> </tr> <tr> <td>Info1</td> <td>Introduction l'informatique </td> </tr> <tr> <td>Info8</td> <td>Internet et cration de page web</td> </tr></table> </body></html> tab3.css table{ border-collapse: collapse; border: 1px solid black;} th { text-align: left; background: gray; color: white; padding: 0.2em;
39

Universit Chouab Doukkali El Jadida

M. L. HASNAOUI ET A. BENI HSSANE

} td{ border: 1px solid black; padding: 0.2em; }

40