La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 Programmation des sites web Statiques A.Karim. 2 Web statique client Serveur 1 2 3 1-le navigateur envoie une requête http au serveur 2-le serveur renvoie.

Présentations similaires


Présentation au sujet: "1 Programmation des sites web Statiques A.Karim. 2 Web statique client Serveur 1 2 3 1-le navigateur envoie une requête http au serveur 2-le serveur renvoie."— Transcription de la présentation:

1 1 Programmation des sites web Statiques A.Karim

2 2 Web statique 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. DE point de vue Logiciel: Client: Navigateur( IExplorer, Mozilla …) Serveur: Serveur web comme IIS,Apache

3 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 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 HTML 3-Le serveur renvoie ce code html 4-le navigateur interprète le code html 4 2

5 5 Baliser le texte de sa page

6 6 Créer des paragraphes

7 7 Créer des titres Le HTML vous permet donc de créer jusquà 6 niveaux de titres différents : Titre très important (titre principal) Sous-titre Sous-sous-titre Sous-sous-sous-titre Sous-sous-sous-sous-titre (pas très important) Sous-sous-sous-sous-sous-titre (hum...)

8 8 Mettre en valeur son texte On dispose pour cela de 2 balises de « mise en valeur » différentes : : pour une faible mise en valeur. Le texte sera généralement mis en italique.ou bien : pour une mise en valeur importante. Le texte sera généralement mis en gras.ou bien

9 Colorer le text On dispose pour cela balise Exemple: kkkkkkk ggggggg 9

10 10 Les citations 1-Les citations courtes: Une citation courte (quelques mots) se place dans une balise.Cette balise doit se trouver à lintérieur dun paragraphe. 2-Les citations longues: Pour effectuer une citation un peu longue (de plusieurs paragraphes), on utilise la balise.À linverse dune citation courte, une citation longue ne doit pas se trouver dans un paragraphe mais elle doit au contraire contenir une balise de paragraphe.

11 11

12 12 Les exposants et indices : mise en exposant (caractères surélevés). : mise en indice (caractères abaissés).

13 13 Les abréviations

14 14 Les liens Vers Cible

15 15 Un lien pour envoyer un e-mail Envoyez-moi un message !

16 16 Insérer un lien vers un autre endroit de la page(ancre) Les recettes de Choumicha allez voir les recettes de Choumicha

17 17 Insérer des images

18 18 La balise dimage la balise :, qui est auto-fermante alt : cet attribut permet dindiquer 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 19 Ajouter une infobulle

20 20 Créer une image cliquable Un lien ne se présente pas obligatoirement sous la forme dun texte. On peut aussi transformer une image en lien et réaliser ce quon appelle une« image cliquable ».

21 21 Les Tableaux

22 22 Fusionner des cellules

23 23 Exercice1

24 24 des listes à puces

25 25 Listes non ordonnées

26 26 Listes ordonnées

27 27 Imbriquer des listes à puces

28 28 Présentation de la puce

29 29 ul { list-style-type: square; /*Puces carrées*/ }

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

31 31 Changer la puce pour une image ul { list-style-image: url("dossier.png"); }

32 32 Les formulaires

33 33 Zone de text:

34 34 Mot de passe

35 35 Zone de texte multiligne Veuillez raconter votre vie :

36 36

37 37 Les cases à cocher ************************************************************************* Quels pays avez-vous déja visités ? La France LEspagne LAllemagne LItalie

38 38 Les zones doptions ******************************************************** Etes-vous majeur ou mineur ? Majeur (18 ans et plus) Mineur (-18 ans)

39 39 Les listes déroulantes Agence de voyages Tourisk Ou souhaitez-vous partir en vacances cet été ? En Papouasie-Nouvelle-Guinée Aux iles Fidji Dans la Creuse

40 40 boutton

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

42 42 CSS, le langage de mise en page du Web

43 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 44 Insérer du code CSS 1-Dans un fichier.css 2-Dans len-tête du fichier HTML

45 45 1-Dans un fichier.css séparé Exemple : p.html Bonjour, je suis un paragraphe !

46 46 Sans style

47 47 Fichier css Fichier s.css p{ text-align:center; font-size:20; color:red; }

48 48 Appliquer du style Bonjour, je suis un paragraphe !

49 49 Avec style

50 50 2-Dans len-tête du fichier HTML New Document p{ text-align:center; font-size:20; color:red; }

51 51 Appliquer un style à toutes les balises le symbole :étoile * ! Il signifie : « appliquer à toutes les balises ». * { propriete: valeur; ……. }

52 52 Appliquer un style à une balise Nom de la balise { propriete: valeur; ……. } Exemple: h1 { text-align: center; }

53 53 Appliquer un style à plusieurs balises Nom de la balise1, Nom de la balise2……… { propriete: valeur; ……. } Exemple: h1,h2 { text-align: center; }

54 54 Appliquer un style à des balises imbriquées Quest-ce quune balise imbriquée ? Cest une balise qui en contient une autre. Petit exemple : Le voile du matin sur les monts se dÈploie. Vois, un rayon naissant blanchit la vieille tour ; Et dÈj dans les cieux síunit avec amour, Ainsi que la gloire la joie, Le premier chant des bois aux premiers feux du jour.

55 55 exemple1: blockquote p { text-align: center; } Cela signifie « Centrer tous les paragraphes (p) situés à lintérieur de citations longues (blockquote)».

56 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 57 Appliquer un style à certaines balises id : un identifiant unique au niveau du page html Au niveau de la feuille css #valeur { propriéte: valeur; }

58 58 exemple Ceci est un site de foot- ball #introduction { text-align: center; }

59 59 class : un identificateur réutilisable il existe un autre attribut, lui aussi utilisable sur la plupart des balises. Il sagit de class. Son fonctionnement est pratiquement le même que celui did, à la différence près quon peut donner le même nom à autant de balises que lon veut.

60 60 Exemple **********************page html******************** Bienvenue sur mon site web ! Présentation Ceci est le site de la league des champions. ************************feuille Css*****************. maclasse { text-align: center; } Résultat : toutes les balises utilisant la classe maclasse verront leur texte centré. POINT

61 61 Mettre en forme son texte

62 62 Aligner tout le texte: Propriété: text-align Valeurs; left : à gauche -center : centré -right : à droite- justify : justifié Exemple : h1 { text-align: center; }

63 63 Les alinéas Propriété: text-indent Exemple : p { text-indent: 30px; }

64 64 Les polices Propriété: font-family Exemple : p { font-family: Verdana; }

65 65 La taille du texte Propriété: font-size Exemple : p { font-size: 18px; }

66 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 67 couleur du texte color: code couleur; Exemple (voir logiciel code couleurs.exe) p { color: #3E75EF; }

68 68 La couleur de fond propriété:background-color. body { color: white; background-color: black; }

69 69 L image de fond background-image: url("nom_img.jpg");

70 70 Répétition de limage de fond Propriété:background-repeat. no-repeat : le fond ne se répétera pas. Il ny aura donc quun exemplaire de limage 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 71 Bordures border-style:solid; border-width: 1px;//taille border-color: blue;//couleur

72 72 Exemple: Cadre arrondi

73 73 Exercice 3

74 74 La balise 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. 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 75 Exemple: SPAN {color:red; font-size:24pt; font- style:italic; font-family: serif; text-decoration: underline;} Ceci est un texte ne dependant d'aucune balise, cette portion est ecrite en rouge en 24 points italique et le tout est souligne.

76 76 Positionner les éléments dans la page

77 77 Balises de type bloc et de type en ligne Les balises de type bloc : ces balises créent des blocs de texte qui saffichent les uns en dessous des autres. Cest le cas par exemple des balises,,,,... Les balises de type en ligne : ces balises se trouvent toujours à lintérieur de balises de type bloc. Comme leur nom lindique, ces balises se placent au fil du texte, sur la même ligne. Quelques exemples de balises en ligne :,,,...

78 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 dun 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 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 quun élément « flotte » et que le texte lentoure. 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 80 Exemple 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 +.avatar { float: left; }

81 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 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 83 Div et CSS : une mise en page

84 84 Page simple : bandeau, contenu, pied de page. Ceci est lebandeau Ceci est le contenu Ceci est le pied de page + #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 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' : ce ci est le bandeau ce ci est le menu ce ci est le contenu ce ci est le pied de la page

86 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 87 Résultat

88 88 Exercice 4

89 Ceci est le bandeau Menu haut Menu bas Bloc News 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. Ceci est le pied de page 89

90 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 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 92 Exemple remplace.

93 93 Imagemap Utiliser le logiciel MapEdit

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

95 95 Code : Windows Media Player :

96 96 Code : Real Player :

97 97 Code : Quicktime :

98 98 Code :animation Flash

99 99 Menu horizontal

100 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 101 Dynamiser Votre Site Web Langage JavaScript

102 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 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 104 1-intégré dans une page HTML //Code JavaScript exemple: alert("Welcome to JavaScript!");

105 105 2-Utilisation de chier(s) JavaScript externe(s)

106 106 Pseudo-URL dans JavaScript Une autre manière d'appeler du code JavaScript consiste à utiliser une pseudo- URL. Exemple: clickez ici

107 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 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 accepte l'événement de chargement(load). la balise accepte l'événement click… En utilisant le préfixe on, vous pouvez joindre le code à cet événement

108 108 Exemple: JavaScript

109 109 Variables et typage JavaScript est un langage non typé. Cela signie que le type dune variable est déni uniquement au moment de lexécution. Une variable est déclarée avec le mot clé var exemple: //une chaine de caracteres var variable1 = "mon texte dinitialisation"; //un entier var variable2 = 17; // Définition de plusieurs variables en une seule instruction var variable3 = 2, variable4 = "mon texte dinitialisation";

110 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 boolean var vrai = true;

111 111 Les opérateurs arithmétiques : + :addition -:Soustraction *:multiplication /:division %:modulo (reste de la division euclidienne)

112 112 Les opérateurs logiques

113 113 Conditions if( condition ) { (...) } else if( condition ) { (...) } else { (...) }

114 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 115 Linstruction switch switch( variable ) { case valeur: (...) break; default: (...) }

116 116 Boucle for for( traitements dinitialisation ; condition de fin ; traitements à effectuer aprè chaque itération) { (...) } Exemple: for( var cpt=0; cpt<10; cpt++ ) { alert("Valeur du compteur: "+cpt); }

117 117 Exemple parcours dun tableau var T = new Array(3); var S =""; for (var i = 0; i

118 118 Boucle while while( condition de continuité ) { (...) } Exemple: var nombre = 0; while( nombre < 10 ) { nombre++; }

119 119 Boucle do while() do { (...) } while( condition de fin ); Exemple: var nombre = 0; do { nombre++; } while( nombre < 10 );

120 120 Les fonctions function maFonction(parametre1, parametre2) { return parametre1+parametre2; } //Appel de la fonction var resultat = maFonction(13, 15);

121 Traitement des formulaires (JavaScript) 121

122 1-zone de text: 1--Balise HTML: 122

123 Recupérer son contenu: Methode 1: document.nomformulaire.nomobje.value; 123

124 Exemple: function fon(){ var a=document.ff.tt.value; alert(a); } 124

125 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

126 2-Combobox: balise HTML: Exemple: ville: TANGER TETOUAN 126

127 2-Recupérer son contenu: Mêmes methodes: M1: document.for.nom.value M2:getElementsByName M3:getElementByID 127

128 3-cases à cocher 1-balise HTML: Il faut donner un meme nom pour tous les objets input type="checkbox" Exemple: fruits: Fraise Banane Pomme 128

129 Recupérer les valeurs des objets cochés function fon(){ var tab=document.getElementsByName('fruit'); var vv=tab[0].checked; // sectionne ou non var bb=tab[0].value; // la valeur alert(vv+" valeur:"+bb); } 129

130 4-radio boutton: 1 –balise HTML: Il faut donner un meme nom pour tous les objets input type= "radio" Exemple: F M 130

131 Recupérer les valeurs des objets cochés function fon(){ var tab=document.getElementsByName('se'); var vv=tab[0].checked; // sectionne ou non var bb=tab[0].value; // la valeur alert(vv+" valeur:"+bb); } 131

132 132 Les Boites de dialog 1 alert: Exemple: alert("bonjour TDI2");

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

134 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 135 L'objet String methodeDescription lengthC'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.

136 EXERCICE 136 CHAINE PALAINDROME ?

137 137 L'objet Math x=Math.abs(y); //renvoie la val absolue x=Math.ceil(y); //renvoie lentier >=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 138 L'objet Date function getDt(){ var dt=new Date(); var cal=""+ dt.getDate()+"/"+(dt.getMonth()+1)+ "/" +dt.getYear(); alert(cal); }

139 139 JavaScript ET CSS Pour Manipuler le style dun objet en javascript : Il faut referencer lobjet. Puis modifier sa propriété style. exemple: function styr(){ var ob=document.getElementById("lin") ob.style.color ="red" }

140 140 Objet navigator Nom du navigateur: var nav=(navigator.appName).toLowerCase(); appName: retourne le nom du navigateur.

141 141 Objet 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"; } window.status="bienvenue sur notre site"; window.blur(): place la fenêtre en cours en arrière-plan.

142 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

143 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 144 Objet 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().

145 document.getElementsByTagName() Syntaxe Array document.getElementsByName(String balise) Description Retourne un tableau (Array) d'objets HTML à partir de nom de la balise (tag en anglais).Array 145

146 Exemple: function fon(i) { var tables=document.getElementsByTagName("h1"); tables[i].style.color="red"; } kkkkkk pppppp 146

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

148 148 Exception JavaScript Image numéro 0 : Image numéro 1 : try{ for(i=0;i { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.fr/1323889/3/slides/slide_147.jpg", "name": "148 Exception JavaScript Image numéro 0 : Image numéro 1 : try{ for(i=0;i

149 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 150 exemple1 Cest la syntaxe PHP NB: SYNTAXE JAVASCRIPT PA DE #

151 151 exemple2 POUR PHP SEULEMENT

152 152 Le symbole OU

153 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 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 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 156

157 157 #[^0-9]# signifie que vous voulez que votre chaîne comporte au moins un caractère qui ne soit pas un chiffre.

158 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 159

160 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 161

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

163 163 tel (^06[0-9]{8}$ )

164 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 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 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)); Lannée dune date:to_char(nom_champ, year) Le mois dune date: to_char(nom_champ, month) Le jour dune date:to_Char(nom_champ, day) La date du system:sysdate:


Télécharger ppt "1 Programmation des sites web Statiques A.Karim. 2 Web statique client Serveur 1 2 3 1-le navigateur envoie une requête http au serveur 2-le serveur renvoie."

Présentations similaires


Annonces Google