Programmation des sites web Statiques

Présentation au sujet: "Programmation des sites web Statiques"— Transcription de la présentation:

1 Programmation des sites web Statiques
A.Karim

2 Web statique Serveur client 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 Client dynamique 1 Serveur client 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 1 Serveur 4 2 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

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>

9 Colorer le text On dispose pour cela balise
<font color=""></font> Exemple: <font color="red">kkkkkkk</font> <font color="#FFF58F">ggggggg</font>

10 Les citations 1-Les citations courtes: 2-Les citations longues:
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 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 .maclasse **********************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: Exemple : h1 { text-align: center; }
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 p { font-family: Verdana; } Propriété: font-family
Exemple : p { font-family: Verdana; }

65 La taille du texte p { font-size: 18px; } 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éments dans 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 { height:400px; background-color:#FFCC00; #piedpage { 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 { width:500; background-color:#FFCC00; #pied { clear:both; background-color:#99FF33;

87 Résultat

88 Exercice 4

89 <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 id="pied_page">Ceci est le pied de page</div>

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 { height:200px; background-color:#66CC33; div#menu_bas { background-color:#CC99CC; div#contenu { width:500px; background-color:#FFCC00; div#bloc_news { float:right; width:150px; height:150px; background-color:#FF3300; div#pied_page { clear:both; background-color:#33FF99;

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!");

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 Les fonctions sont déclarées
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 boolean var 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 à: majeur = (age >= 18) ? true : false;

115 L’instruction switch switch( variable ) { case valeur: (...) break;
default: }

116 Boucle for for( var cpt=0; cpt<10; cpt++ ) {
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; nombre++; } while( nombre < 10 );

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

121 Traitement des formulaires (JavaScript)

122 1-zone de text: 1--Balise HTML:
<INPUT TYPE="text" NAME="tt" id="id1" />

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

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

125 Recupérer son contenu:
Methode 2: document.getElementsByName() Exemple: document.getElementsByName ('tt') [0].value; Methode 3:document.getElementById() document.getElementById('id1').value;value;

126 2-Combobox: balise HTML: Exemple: ville:<SELECT NAME="vil">
<OPTION VALUE="tanger" SELECTED> TANGER</OPTION> <OPTION VALUE="tetouan">TETOUAN</OPTION> </SELECT>

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

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

129 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 valeur alert(vv+" valeur:"+bb); } </script>

130 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

131 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 valeur alert(vv+" valeur:"+bb); } </script>

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.

136 EXERCICE 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 navigator Nom du navigateur:
var nav=(navigator.appName).toLowerCase(); appName: retourne le nom du navigateur.

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"; } <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 close():permet de fermer une fenêtre. tester
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');

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

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

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 Exception 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 NB: SYNTAXE JAVASCRIPT PA DE #
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 ?

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 jSpinner jSpinner Mise à jour
BD Mise à jour 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 ’),…) jSpinner 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: 166