1 programmation des sites web statiques a.karim. 2 web statique client serveur 1 2 3 1-le navigateur...
TRANSCRIPT
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
<sup></sup> : mise en exposant (caractères surélevés). <sub></sub> : mise en indice (caractères abaissés).
13
Les abréviations
14
Les liens
<a href="cible.html">Vers Cible</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
(‘^[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: