1

Programmation des sites web Statiques

A.Karim

2

Web statique

clientServeur

12

3

1-le navigateur envoie une requête http au serveur

2-le serveur renvoie le code html

3-le navigateur interprète le code html.

DE point de vue Logiciel:Client: Navigateur( IExplorer, Mozilla …)

Serveur: Serveur web comme IIS ,Apache

3

Client dynamique

client Serveur

1

2

3

1-le navigateur envoie une requête http au serveur

2-le serveur renvoie le code html

3-le navigateur interprète le code html.qui contient un script Le navigateur interagit avec ce script

4

Serveur dynamique

client

Serveur

1

3

1-le navigateur envoie une requête http au serveur

2-le serveur confie le traitement à un script et constitue le code HTML3-Le serveur renvoie ce code html

4-le navigateur interprète le code html

4 2

5

Baliser le texte de sa page

6

Créer des paragraphes

<p></p>

7

Créer des titres

Le HTML vous permet donc de créer jusqu’à 6 niveaux de titres différents :

<h1>Titre très important (titre principal)</h1> <h2>Sous-titre</h2> <h3>Sous-sous-titre</h3> <h4>Sous-sous-sous-titre</h4> <h5>Sous-sous-sous-sous-titre (pas très

important)</h5> <h6>Sous-sous-sous-sous-sous-titre (hum...)</h6>

8

Mettre en valeur son texte

On dispose pour cela de 2 balises de « mise en valeur » différentes :

<em></em> : pour une faible mise en valeur. Le texte sera généralement mis en italique.ou bien <i></i>

<strong></strong> : pour une mise en valeur importante. Le texte sera généralement mis en gras.ou bien <b></b>

Colorer le text

On dispose pour cela balise

<font color=""></font>

Exemple:

<font color="red">kkkkkkk</font>

<font color="#FFF58F">ggggggg</font>

9

10

Les citations

1-Les citations courtes: Une citation courte (quelques mots) se place dans une balise

<q></q>.Cette balise doit se trouver à l’intérieur d’un paragraphe.

2-Les citations longues: Pour effectuer une citation un peu longue (de plusieurs

paragraphes), on utilise la balise <blockquote>.À l’inverse d’une citation courte, une citation longue ne doit pas se trouver dans un paragraphe mais elle doit au contraire contenir une balise de paragraphe.

11

12

Les exposants et indices

 : mise en exposant (caractères surélevés).  : mise en indice (caractères abaissés).

13

Les abréviations

14

Les liens

<a href="cible.html">Vers Cible</a>

15

Un lien pour envoyer un e-mail

<a href="mailto:moi@gmail.com">Envoyez-moi un message !</a>

16

Insérer un lien vers un autre endroit de la page(ancre)

<h2 id="recettes">Les recettes de Choumicha </h2>

<a href="#recettes">allez voir les recettes de Choumicha</a>

17

Insérer des images

18

La balise d’image

la balise :<img />, qui est auto-fermante <img src="moraira.jpg" alt="Photo de vacances" /> alt : cet attribut permet d’indiquer un texte de remplacement

(dit« texte alternatif ») pour votre image. Ce texte sera affiché à la place de votre image si celle-ci ne peut pas être affichée.

19

Ajouter une infobulle

20

Créer une image cliquable

Un lien ne se présente pas obligatoirement sous la forme d’un texte. On peut aussi transformer une image en lien et réaliser ce qu’on appelle une« image cliquable ».

21

Les Tableaux

22

Fusionner des cellules

23

Exercice1

24

des listes à puces

25

Listes non ordonnées

26

Listes ordonnées

27

Imbriquer des listes à puces

28

Présentation de la puce

29

ul

{

list-style-type: square; /*Puces carrées*/

}

30

ol

{

list-style-type: upper-alpha; /*NumÈrotation alphabétique*/

}

31

Changer la puce pour une image

ul

{

list-style-image: url("dossier.png");

}

32

Les formulaires

33

Zone de text:

<form>

<p>

<input type="text" name="pseudo" size="12" value="Toto" />

</p>

</form>

34

Mot de passe

35

Zone de texte multiligne

<form>

<p>

Veuillez raconter votre vie :

<br />

<textarea name="votre_vie" id="votre_vie"></textarea>

</p>

</form>

36

37

Les cases à cocher

<input type="checkbox" />

*************************************************************************<form><p>Quels pays avez-vous déja visités ?<br /><input type="checkbox" name="france" id="france" checked="checked" />La France<br /><input type="checkbox" name="espagne" id="espagne" />L’Espagne<br /><input type="checkbox" name="allemagne" id="allemagne" />L’Allemagne<br /><input type="checkbox" name="italie" id="italie" />L’Italie</p></form>

38

Les zones d’options

<input type="radio" />********************************************************<form>Etes-vous majeur ou mineur ?<br /><input type="radio" name="age" value="majeur" id="majeur" />Majeur (18 ans et plus)<br /><input type="radio" name="age" value="mineur" id="mineur" />Mineur (-18 ans)</p></form>

39

Les listes déroulantes

<form><h1>Agence de voyages Tourisk</h1><p>Ou souhaitez-vous partir en vacances cet été ?<br /><select name="destination" id="destination"><option value="papouasie">En Papouasie-Nouvelle-Guinée</option><option value="fidji">Aux iles Fidji</option><option value="creuse">Dans la Creuse</option></select></p></form>

40

boutton

41

Exercice2

Exploiter les differentes balises vues dans le cours dans des pages web

42

CSS, le langage de mise en page du Web

43

CSS

Langage qui permet de faire la mise en forme des pages web(changer la couleur

du texte ou du fond, changer la police, la taille, etc.)

44

Insérer du code CSS

1-Dans un fichier .css 2-Dans l’en-tête du fichier HTML

45

1-Dans un fichier .css séparé

<HEAD> <link rel="stylesheet" type="text/css" href="s1.css"></HEAD>

Exemple : p.html

<html><head></head><body><p>Bonjour, je suis un paragraphe !</p></body></html>

46

Sans style

47

Fichier css

Fichier s.css

p{

text-align:center;

font-size:20;

color:red;

}

48

Appliquer du style

<html>

<head>

<link rel="stylesheet" type="text/css" href="s.css">

</head>

<body>

<p>Bonjour, je suis un paragraphe !</p>

</body>

</html>

49

Avec style

50

2-Dans l’en-tête du fichier HTML

<HEAD> <TITLE> New Document </TITLE> <style type="text/css"> p{text-align:center;font-size:20;color:red;

} </style> </HEAD>

51

Appliquer un style à toutes les balises

le symbole :étoile * ! Il signifie : « appliquer à toutes les balises ».

*{propriete: valeur;…….}

52

Appliquer un style à une balise

Nom de la balise

{

propriete: valeur;

…….

}

Exemple:

h1

{

text-align: center;

}

53

Appliquer un style à plusieurs balises

Nom de la balise1, Nom de la balise2………

{

propriete: valeur;

…….

}

Exemple:

h1,h2

{

text-align: center;

}

54

Appliquer un style à des balises imbriquées

Qu’est-ce qu’une balise imbriquée ? C’est une balise qui en contient une autre. Petit exemple :

<blockquote><p>Le voile du matin sur les monts se dÈploie.<br />Vois, un rayon naissant blanchit la vieille tour ;<br />Et dÈj‡ dans les cieux síunit avec amour,<br />Ainsi que la gloire ‡ la joie,<br />Le premier chant des bois aux premiers feux du jour.</p></blockquote>

55

exemple1:

blockquote p

{

text-align: center;

}

Cela signifie « Centrer tous les paragraphes (p) situés à l’intérieur de citations longues (blockquote)».

56

exemple2:

blockquote p strong{text-align: center;}Cette fois, cela signifie « Centrer tous les

textes importants (strong) situés dans des paragraphes (p) eux-mêmes situés dans des citations longues (blockquote)».

57

Appliquer un style à certaines balises

id : un identifiant unique <balise id="valeur"> au niveau du page html

Au niveau de la feuille css

#valeur

{

propriéte: valeur;

}

58

exemple

<p id="introduction">Ceci est un site de foot-ball</p>

#introduction

{

text-align: center;

}

59

class : un identificateur réutilisable

il existe un autre attribut, lui aussi utilisable sur la plupart des balises. Il s’agit de class. Son fonctionnement est pratiquement le même que celui d’id, à la différence près qu’on peut donner le même nom à autant de balises que l’on veut.

60

Exemple

**********************page html********************

<h1 class="maclasse">Bienvenue sur mon site web !</h1>

<h2>Présentation</h2>

<p class="maclasse">Ceci est le site de la league des champions.</p>

************************feuille Css*****************

.maclasse

{

text-align: center;

}

Résultat : toutes les balises utilisant la classe maclasse verront leur texte centré.

POINT

61

Mettre en forme son texte

62

Aligner tout le texte:

Propriété: text-align Valeurs; left : à gauche -center : centré -right : à droite-justify : justifié

Exemple :

h1

{

text-align: center;

}

63

Les alinéas

Propriété: text-indent Exemple :

p

{

text-indent: 30px;

}

64

Les polices

Propriété: font-family Exemple :

p

{

font-family: Verdana;

}

65

La taille du texte

Propriété: font-size Exemple :

p

{

font-size: 18px;

}

66

Gras, italique, souligné, etc.

Mise en gras: font-weight: bold; Mise en italique:font-style: italic; Mise en majuscules:text-transform:uppercase; Mise en minuscules:text-transform:lowercase; Souligner:text-decoration: underline;

67

couleur du texte

color: code couleur; Exemple (voir logiciel code couleurs.exe)

p

{

color: #3E75EF;

}

68

La couleur de fond

propriété:background-color.

body

{

color: white;

background-color: black;

}

69

L’ image de fond

background-image: url("nom_img.jpg");

70

Répétition de l’image de fond

Propriété:background-repeat. no-repeat : le fond ne se répétera pas. Il n’y

aura donc qu’un exemplaire de l’image en fond de page.

repeat-x : le fond se répétera uniquement horizontalement, sur la première ligne.

repeat-y : le fond se répétera uniquement verticalement, sur la première colonne.

71

Bordures

border-style:solid; border-width: 1px;//taille border-color: blue;//couleur

72

Exemple: Cadre arrondi

73

Exercice 3

74

La balise <SPAN>

Il peut arriver que l'on désire appliquer un style à une portion de texte qui n'est pas délimitée par une balise. Pour réaliser celà on utilise la balise <SPAN>. La portion de texte concernée sera délimitée à l'aide de cette balise à laquelle on aura au préalable appliqué un style.

75

Exemple:

<STYLE TYPE="text/css"> SPAN {color:red; font-size:24pt; font-style:italic; font-family: serif; text-decoration: underline;} </STYLE> <BODY> Ceci est un texte ne dependant d'aucune balise, <SPAN> cette portion est ecrite en rouge en 24 points italique et le tout est souligne </SPAN>. </BODY>

76

Positionner les élémentsdans la page

77

Balises de type bloc et de type en ligne

Les balises de type bloc : ces balises créent des blocs de texte qui s’affichent les uns en dessous des autres. C’est le cas par exemple des balises <p>, <table>, <form>, <h1>, <h2>...

Les balises de type en ligne : ces balises se trouvent toujours à l’intérieur de balises de type bloc. Comme leur nom l’indique, ces balises se placent au fil du texte, sur la même ligne. Quelques exemples de balises en ligne : <em>, <strong>, <a>, <q>...

78

Le principe des boîtes

En HTML, chaque élément, que ce soit un en ligne ou un bloc, est considéré comme une boîte. Chaque boîte possède :

un contenu (le texte d’un paragraphe par exemple) ; une marge interne, appelée padding ; une marge externe, appelée margin ; une bordure, appelée border.

Padding-(top,left,right,bottom) Margin-(top,left,right,bottom)

79

Le positionnement flottant

Ce type de positionnement que nous offre le langage CSS est très pratique. En effet, il permet de faire en sorte qu’un élément « flotte » et que le texte l’entoure.

Pour faire flotter un élément, on utilise la propriété CSS float. Elle peut prendre 3 valeurs différentes :

• left : flottement à gauche ;

• right : flottement à droite ;

• none : pas de flottement (par défaut).

80

Exemple

<p><img src="mateo21.gif" alt="Un avatar" class="avatar" />Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

+

.avatar

{

float: left;

}

81

Le positionnement absolu

Le positionnement absolu vous permet de placer un élément où vous voulez sur la page, au pixel près.

il faut en effet dire à quel endroit on veut placer l’élément sur la

page, grâce aux quatre propriétés CSS suivantes :• top : indique la distance par rapport au haut de la page ;• bottom : indique la distance par rapport au bas de la page ;• left : indique la distance par rapport au bord gauche de la page ;• right : indique la distance par rapport au bord droit de la page.

82

Exemple

.avatar{position: absolute;top: 100px;left: 260px;}

Le point de coordonnées (0, 0) se trouve donc en haut à gauche de la page

83

Div et CSS : une mise en page

84

Page simple : bandeau, contenu, pied de page.

<div id="bandeau">Ceci est lebandeau</div>

<div id="contenu">Ceci est le contenu</div>

<div id="piedpage">Ceci est le pied de page</div>

+#bandeau {width:600px;height:50px;background-color:#00CCFF;}#contenu {width:600px;height:400px;background-color:#FFCC00;}#piedpage {width:600px;height:50px;background-color:#33FF99;}

85

Ajout d'une barre de menu à gauche du contenu.

Pour afficher deux div l'un à coté de l'autre, il va donc nous falloir utiliser une autre propriété. C'est la propriété float:left;

clear:both; Rajoutons donc cette propriété à notre bloc 'pied de page' :

<div id="bandeau"> ce ci est le bandeau </div> <div id="menu">ce ci est le menu </div> <div id="contenu">ce ci est le contenu </div> <div id="pied">ce ci est le pied de la page</div>

86

Fichier Css

#bandeau {

width:600;height:50;background-color:#00CCFF;

}

#menu { float:left;

width:100;height:400;background-color:#FF6699;

}

#contenu { float:left;

width:500;height:400;background-color:#FFCC00;

}#pied { clear:both;

width:600;height:50;background-color:#99FF33;

}

87

Résultat

88

Exercice 4

<div id="bandeau">Ceci est le bandeau</div> <div id="menu"> <div id="menu_haut">Menu haut</div> <div id="menu_bas">Menu bas</div> </div> <div id="contenu"> <div id="bloc_news">Bloc News</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas

faucibus nunc. Morbi quis neque laoreet ante varius rutrum. Nam arcu ipsum, blandit placerat, pharetra ut, pulvinar in, nulla. Vivamus condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi, sed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat viverra, arcu justo malesuada augue, a tristique nunc neque vitae ligula. Mauris bibendum. Praesent nibh. Sed in lacus semper dui lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, neque ligula porttitor orci, venenatis bibendum ante mi id massa. Pellentesque ipsum urna, posuere non, pellentesque non, tempus at, ipsum. Aliquam lacinia nisl sit amet ipsum. Nam volutpat vulputate lacus. Integer orci dui, lacinia non, blandit sit amet, vulputate vel, sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae, urna.

</div> <div id="pied_page">Ceci est le pied de page</div>

89

div { text-align:center; } div#bandeau { width:600px; height:50px; background-color:#00CCFF; } div#menu { float:left; width:100px; height:400px; background-color:#FF6699; } div#menu_haut { width:100px; height:200px; background-color:#66CC33; } div#menu_bas { width:100px; height:200px; background-color:#CC99CC; } div#contenu { float:left; width:500px; height:400px; background-color:#FFCC00; } div#bloc_news { float:right; width:150px; height:150px; background-color:#FF3300; } div#pied_page { clear:both; width:600px; height:50px; background-color:#33FF99; }

90

91

Les Frames en HTML

fonctionnement Il faut comprendre que le fichier HTML dans lequel vous allez définir vos fenêtres grâce aux Frames est indépendant des autres fichiers. Il va diviser votre écran en fenêtres et appeler d'autres fichiers dans ces

fenêtres.

92

Exemple

<FRAMESET></FRAMESET> remplace <BODY></BODY>.

<HTML> <HEAD></HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="A.htm">    <FRAMESET ROWS="30%,70%">    <FRAME SRC="B.htm">    <FRAME SRC="C.htm">    </FRAMESET> </FRAMESET> </HTML>

93

Imagemap

<IMG SRC="grille.gif" USEMAP="#mapGrille">

<MAP NAME="mapGrille">

<AREA SHAPE="rect" COORDS="10,10,50,50" HREF="fichier1.html">

</MAP>

Utiliser le logiciel MapEdit

94

Les éléments multimédia ( son, vidéo)

95

Code : Windows Media Player :

<embed type="application/x-mplayer2" src="animation.avi" />

<embed type="application/x-mplayer2" src="mus.mp3" />

96

Code : Real Player :

<embed type="audio/x-pn-realaudio-plugin" src="ani.rm" height="90px" width="200px" controls="all" console="video" />

97

Code : Quicktime :

<embed type="video/quicktime" src="ani.mov" height="90px" width="200px"  controllers="true"/>

98

Code :animation Flash

<embed type="application/x-shockwave-flash" src="sponsors.swf" />

99

Menu horizontal

100

Exemple:

ul li{list-style-type: none; float:left;margin-left:30px;border-style:solid;text-align:center;width:100;}ul li a{text-decoration:none;}ul li :hover{ background-color:#D3D3D3;

}

101

Dynamiser Votre Site Web

Langage JavaScript

102

Définition

JavaScript est un langage de script côté client, ce qui signifie qu'il s'exécute côté client, dans un navigateur Web.

103

Inclusion du code JavaScript

Le code JavaScript peut se présenter de deux manières :

1-intégré dans une page HTML .

2-ou intégré dans un fichier externe.

104

1-intégré dans une page HTML

<script language=“JavaScript">

//Code JavaScript

</script>

exemple:

<script language ="JavaScript">

alert("Welcome to JavaScript!");

</script>

105

2-Utilisation de fichier(s) JavaScript externe(s)

<script language="JavaScript" type="text/JavaScript" src="fichier.js"></script>

106

Pseudo-URL dans JavaScript

Une autre manière d'appeler du code JavaScript consiste à utiliser une pseudo-URL.

Exemple: <a href="JavaScript:window.alert('Welcome to

JavaScript!');">clickez ici</a>

107

Exécution de JavaScript avec des gestionnaires d'événements

La troisième manière d'exécuter du code JavaScript (les deux premières étant les éléments <script> et les pseudo-URL JavaScript:) se fait par l'intermédiaire d'un gestionnaire d'événements en appelant des methodes.

La plupart des éléments HTML acceptent quelques événements ; par exemple, la balise <body> accepte l'événement de chargement(load).

la balise <input> accepte l'événement click…

En utilisant le préfixe on, vous pouvez joindre le code à cet événement

108

Exemple:

<html><head><title>JavaScript</title><script language="JavaScript" type="text/JavaScript"> function showText() { window.alert("Welcome to JavaScript!"); }</script></head><body onload="showText();"></body></html>

Les fonctions sont déclarées dans le HEAD

L’événement

109

Variables et typage

JavaScript est un langage non typé. Cela signifie que le type d’une variable est défini uniquement au moment de l’exécution.

Une variable est déclarée avec le mot clé var exemple: //une chaine de caracteres var variable1 = "mon texte d’initialisation"; //un entier var variable2 = 17; // Définition de plusieurs variables en une seule instruction var variable3 = 2, variable4 = "mon texte d’initialisation";

110

Les Variables

//un nombre réel var nombreReel = 11.435;

//un tableau normal var tableau = { "Premier élément", "Second élément" };

//un tableau associatif var tableauAssociatif = { "cle1" : "valeur1", "cle2" : "valeur2" };

//un booleanvar vrai = true;

111

Les opérateurs arithmétiques :

+ :addition -:Soustraction *:multiplication /:division %:modulo (reste de la division euclidienne)

112

Les opérateurs logiques

113

Conditions

if( condition ) {

(...)

} else if( condition ) {

(...)

} else {

(...)

}

114

Les ternaires

var age = 24; Var majeur;if (age >= 18) { majeur = true; } else { majeur = false; }

Cela est équivalant à: var age = 24; Var majeur;

majeur = (age >= 18) ? true : false;

115

L’instruction switch

switch( variable ) {

case valeur:

(...)

break;

default:

(...)

}

116

Boucle for

for( traitements d’initialisation ; condition de fin ; traitements à effectuer aprè chaque itération) {

(...)

}

Exemple:

for( var cpt=0; cpt<10; cpt++ ) {

alert("Valeur du compteur: "+cpt);

}

117

Exemple parcours d’un tableau

<script language="JavaScript">  var T = new Array(3);  var S ="";  for (var i = 0; i < T.length; i++){    T[i] = i;  }  T[5] = "Pourtant, j'y suis";  for (var i = 0; i < T.length; i++){    S =S+ "En " + i + " on trouve " + T[i] + "\n";  }  alert(S);</script>  

118

Boucle while

while( condition de continuité ) {

(...)

}

Exemple:

var nombre = 0;

while( nombre < 10 ) {

nombre++;

}

119

Boucle do while()

do {

(...)

} while( condition de fin );

Exemple:

var nombre = 0;

do {

nombre++;

} while( nombre < 10 );

120

Les fonctions

function maFonction(parametre1, parametre2) {

return parametre1+parametre2;

}

//Appel de la fonction

var resultat = maFonction(13, 15);

Traitement des formulaires (JavaScript)

121

1-zone de text:

1--Balise HTML: <INPUT TYPE="text" NAME="tt"

id="id1" />

122

Recupérer son contenu:

Methode 1:

document.nomformulaire.nomobje.value;

123

Exemple:

<HTML> <HEAD> <script language="JavaScript"> function fon(){ var a=document.ff.tt.value;

alert(a); } </script> </HEAD>

<BODY> <FORM name="ff"> <INPUT TYPE="text" NAME="tt"> <INPUT TYPE="button" value="ok" onclick="fon();">

</FORM> </BODY> </HTML>

124

Recupérer son contenu:

Methode 2: document.getElementsByName()

Exemple: document.getElementsByName ('tt') [0].value;

Methode 3:document.getElementById() Exemple: document.getElementById('id1').value;value;

125

2-Combobox:

balise HTML: Exemple:ville:<SELECT NAME="vil">

<OPTION VALUE="tanger" SELECTED> TANGER</OPTION>

<OPTION VALUE="tetouan">TETOUAN</OPTION>

</SELECT>

126

2-Recupérer son contenu:

Mêmes methodes:

M1: document.for.nom.value

M2:getElementsByName

M3:getElementByID

127

3-cases à cocher

1-balise HTML: Il faut donner un meme nom pour tous les

objets input type="checkbox" Exemple: fruits: <BR><INPUT type="checkbox" name="fruit" value="Fraise">

Fraise <BR>

<INPUT type="checkbox" name="fruit" value="Banane"> Banane <BR>

<INPUT type="checkbox" name="fruit" value="Pomme"> Pomme <BR>

128

Recupérer les valeurs des objets cochés

<script language="JavaScript">function fon(){var tab=document.getElementsByName('fruit');var vv=tab[0].checked; // sectionne ou non var bb=tab[0].value; // la valeuralert(vv+" valeur:"+bb);}</script>

129

4-radio boutton:

1 –balise HTML: Il faut donner un meme nom pour tous les

objets input type= "radio" Exemple: <INPUT value="femme" TYPE="radio" NAME="se">F

<INPUT value="homme" TYPE="radio" NAME="se">M

130

Recupérer les valeurs des objets cochés

<script language="JavaScript">function fon(){var tab=document.getElementsByName('se');var vv=tab[0].checked; // sectionne ou non var bb=tab[0].value; // la valeuralert(vv+" valeur:"+bb);}</script>

131

132

Les Boites de dialog

1 alert:

Exemple:

alert("bonjour TDI2");

133

2-prompt prompt(" quel est votre age?", "19");

134

3-confirm() Cette méthode affiche 2 boutons "OK" et "Annuler".

En cliquant sur OK, confirm() renvoie la valeur true et bien entendu false si on a cliqué sur Annuler. Ce qui peut permettre, par exemple, de choisir une option dans un programme.

La syntaxe de l'exemple est : confirm("Voulez-vous continuer ?")

135

L'objet String

methode Description

length C'est un entier qui indique la longueur de la chaîne de caractères.

charAt() Méthode qui permet d'accéder à un caractère isolé d'une chaîne.

substring(x,y) Méthode qui renvoie un string partiel situé entre l position x et la position y-1.

toLowerCase() Transforme toutes les lettres en minuscules.

toUpperCase() Transforme toutes les lettres en Majuscules.

EXERCICE

136

CHAINE PALAINDROME ?

137

L'objet Math

x=Math.abs(y); //renvoie la val absolue x=Math.ceil(y); //renvoie l’entier >=y x=Math.floor(y); //renvoie l'entier inférieur ou égal à y.

x=Math.round(y);// arrondit le nombre à l'entier le plus proche

x=Math.max(y,z); //renvoie le max de y et z

x=Math.min(y,z); //renvoie le min x=parseInt("variable"); //convertir vers int x=parseFloat("variable"); //convertir vers folat x=Math.pow(y,z); // calcule la valeur d'un nombre y à la puissance z. x=Math.random(); //renvoie la valeur d'un nombre aléatoire choisi entre 0 et 1. x=Math.sqrt(y); //renvoie la racine carrée de y.

138

L'objet Date

<HTML><HEAD> <SCRIPT LANGUAGE="Javascript">

function getDt(){

var dt=new Date(); var cal=""+ dt.getDate()+"/"+(dt.getMonth()+1)+ "/" +dt.getYear();

alert(cal); }

</SCRIPT></HEAD> <BODY onload="getDt()">

</BODY> </HTML>

139

JavaScript ET CSS

Pour Manipuler le style d’un objet en javascript :

Il faut referencer l’objet . Puis modifier sa propriété style. exemple: function styr(){ var ob=document.getElementById("lin") ob.style.color ="red" }

140

Objet navigatorObjet navigator

Nom du navigateur:

var nav=(navigator.appName).toLowerCase();

appName: retourne le nom du navigateur.

141

Objet window et propriétésObjet window et propriétés

Location: récupérer l'url complète de la page en cours.

Status : d'afficher un texte dans la barre basse du navigateur

function change(){   window.location="../index.html"; }

<form> <input type="button" value="changer" onclick="change()"> </form>

window.status="bienvenue sur notre site"; window.blur(): place la fenêtre en cours en arrière-plan.

142

moveTo(x,y): déplacer la fenêtre resizeBy(x,y) : redimensionner la fenêtre open(): permet d'ouvrir une nouvelle fenêtre (pop up) avec des

dimensions précises, et sans barres de navigation

close():permet de fermer une fenêtre. tester

Syntaxe : open('URL', 'nom_fenetre','paramètres')– nom = open('URL', 'nom_fenetre','paramètres') – URL : représente l'adresse du document à charger. Avec ' ' la

fenêtre est vide; – nom_fenetre permet à l'attribut target de pointer sur elle. ' '

est autorisé. – Paramètres : width et height en pixels.

exemple:

open('princ.html', 'pop', 'height=50,width=300');

143

144

Objet documentObjet document

document. fgColor :La propriété javascript fgColor de l'objet document permet récupérer et de modifier la couleur du texte de votre page HTML

document.bgColor :La propriété javascript bgColor de l'objet document permet récupérer et de modifier la couleur de fond de votre page HTML.

document.lastModified:La propriété javascript lastModified de l'objet document permet de savoir quand la page HTML a été modifiée.

document.linkColor :La propriété javascript linkColor de l'objet document permet de récupérer et de modifier la couleur des liens de votre page HTML.

document.vlinkColor:permet de récupérer et de modifier la couleur des liens visités de votre page HTML.

document.write:permet d'écrire dans votre page HTML writeln() qui saute une ligne après avoir écrit Son utilisation est idem que

write().

document.getElementsByTagName()

SyntaxeArray document.getElementsByName(String balise)

DescriptionRetourne un tableau (Array) d'objets HTML à partir de nom de la balise (tag en anglais).

145

Exemple:

<HTML>

<HEAD>

<script language="JavaScript">

function fon(i)

{

var tables=document.getElementsByTagName("h1");

tables[i].style.color="red";

}

</script>

</HEAD>

<BODY>

<h1 onmouseover="fon(0)">kkkkkk </h1>

<h1 onmouseover="fon(1)">pppppp </h1>

</BODY>

</HTML>

146

147

Gestion du tempsGestion du temps

La méthode javascript setTimeout(fonction, temps) va vous permettre d'attendre un certain temps pour lancer une fonction.

Exemple:

148

Exception JavaScriptException JavaScript

<BODY>Image numéro 0 : <IMG SRC="developpeurs.jpg"><br>Image numéro 1 : <IMG SRC="solutions.gif"><br>

<SCRIPT>

try{      for(i=0;i<document.images.length + 1;i++)     { alert('Largeur de l\'image numéro '+i+' : '+document.images[i].width+' pixels');      }      document.writeln("Tout s'est déroulé normalement.")} catch (error){

     alert(error.message); }

</SCRIPT>

</BODY>

149

Masque de saisie Regex

var mask = ‘Votre REGEX ';var reg = new RegExp(mask,"g");

Si type vaut "g", l'expression sera analysée globalement sur l'ensemble de la chaîne.

Si type vaut "i", l'expression sera analysée indifféremment sur les majuscules ou les minuscules.

if(reg.test("chaine"))

150

exemple1

C‘est la syntaxe PHP

NB: SYNTAXE JAVASCRIPT PA DE #

151

exemple2

POUR PHP SEULEMENT

152

Le symbole OU

153

Début et fin de chaîne

^ (accent circonflexe) : indique le début d'une chaîne.

$ (dollar) : indique la fin d'une chaîne.

154

Les classes de caractères

#gr[io]s#Entre crochets, c'est ce qu'on appelle une classe de caractères. Cela signifie qu'une des lettres à l'intérieur peut convenir.Dans ce cas-ci, notre regex reconnaît 2 mots : "gris" et "gros". C'est un peu comme le OU qu'on a appris tout à l'heure, sauf que ça s'applique ici à une lettre et non pas à un mot.

155

Les intervalles de classe

Vous avez le droit d'écrire : [a-z] Et si vous voulez vous arrêter à la lettre "e: [a-e].

avec les chiffres : [0-9]. Si vous voulez plutôt un chiffre entre 1 et 8, tapez : [1-8]

Vous pouvez écrire 2 plages à la fois dans une classe : [a-z0-9]. Cela signifie "N'importe quelle lettre (minuscule) OU un chiffre".

[a-zA-Z0-9] "N'importe quelle lettre (minuscule ou majuscule) OU un chiffre".

156

157

#[^0-9]# signifie que vous voulez que votre chaîne comporte au moins un

caractère qui ne soit pas un chiffre.

158

Les quantificateurs

? (point d'interrogation) : ce symbole indique que la lettre est facultative. Elle peut y être 0 ou 1 fois.Ainsi, #a?# reconnaît 0 ou 1 "a".

+ (signe plus) : la lettre est obligatoire. Elle peut apparaître 1 ou plusieurs fois.Ainsi, #a+# reconnaît "a", "aa", "aaa", "aaaa" etc...

* (étoile) : la lettre est facultative. Elle peut apparaître 0, 1 ou plusieurs fois.Ainsi, #a*# reconnaît "a", "aa", "aaa", "aaaa" etc... Mais s'il n'y a pas de "a", ça fonctionne aussi !

159

160

Préciser le nombre grâce aux accolades

{3} : si on met juste un nombre, cela veut dire que la lettre (ou le groupe de lettres s'il est entre parenthèses) doit être répété 3 fois exactement.#a{3}# fonctionne donc pour la chaîne "aaa".

{3,5} : ici, on a plusieurs possibilités. On peut avoir la lettre de 3 à 5 fois.#a{3,5}# fonctionne pour "aaa", "aaaa", "aaaaa".

{3,} : si vous mettez une virgule, mais pas de 2ème nombre, ça veut dire qu'il peut y en avoir jusqu'à l'infini. Ici, cela signifie "3 fois ou plus".

161

162

exercice

Numéro de téléphone? Adresse email?

163

tel

(‘^06[0-9]{8}$’ )

164

email

(‘^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$’)

NB: pour écrire le point il faut le précéder par \.

165

Equivalence en java

1

import java.util.regex.*;

2

Pattern p = Pattern.compile("^06[0-9]{8}$");

3

Matcher m = p.matcher(tnum.getText());

4

boolean b = m.matches();

166

166

jSpinner

Mise à jour

BD

java.util.Date d=(java.util.Date)jSpinner1.getValue();SimpleDateFormat f=new SimpleDateFormat("dd/MM/yyyy");

String ds=f.format(d);Insert into ….values(…,to_Date(‘ ’’+ds+’’ ‘,’ dd/MM/yyyy ’),…)

Sélection•jSpinner

jSpinner1.setValue(rs.getDate(int indice));

L’année d’une date:to_char(nom_champ, ’year’)Le mois d’une date: to_char(nom_champ, ’month’)

Le jour d’une date:to_Char(nom_champ, ’day’)La date du system:sysdate: