Cours : Web
Dr, Mohamed Amine Mezghich,
amine,mezghich@ensi-uma,tn
Module : Programmation Web & Multim dia,
ENSI
Ann e universitaire
2016-2017
Plan
" Chapitre 1 : Le langage HTML
" Chapitre 2 : Le langage CSS
" Chapitre 3 : Le langage JavaScript
" Chapitre 4 : Le langage PHP
" Chapitre 5 : Le langage XML
2
Chapitre 1 : Le langage HTML
Introduction
"
r seau de
Internet est un
r seaux, un ensemble d'ordinateurs
interconnect s et utilisant le m me protocole. Ce r seau offre diff rents
services, tels que messagerie lectronique, ftp (transfert de fichiers),
telnet (connexion distance)...et le fameux World Wide Web (WWW) ou
Web! L'id e de d part du Web est de laisser l'information sous forme non-
structur e sur le r seau, plut t que de l'organiser en base de donn es. En
revanche, chaque document peut faire r f rence aux autres, par le biais de
trois m canismes:
1. Un sch ma d'adressage uniforme pour localiser chaque information
sur le Web: Les
URL;
2. Un protocole (HTTP) pour acc der aux ressources disponibles sur le
Web;
3. Un langage balis permettant la navigation entre sites l'aide de
liens hypertextes: le langage HTML.
4
Introduction
" Pour publier des informations sur un m me r seau, il est n cessaire de
parler le m me langage. Pour cette raison, tous les ordinateurs connect s
sur le r seau utilisent le m me protocole d' change de donn es, et le
langage utilis pour la cr ation de pages Web est le langage HTML
l'utilisateur de:
(Hypertext Markup Language). HTML permet
q Publier du texte mis en forme, des images, du son, de la vid o...
q Concevoir des formulaires permettant de dialoguer avec un serveur distant
(commander un produit, r server une place de th tre, ...);
q Lire les informations publi es par d'autres utilisateurs, et naviguer gr ce
aux liens hypertexte.
5
Introduction
" Un document hypertexte (HTML) n'est rien d'autre qu'un fichier de texte,
portant l'extension ".HTML", et dans lequel apparaissent des Balises. Ces
balises
la
structure du document: telle partie correspond un titre, telle autre
correspond une image... Le langage HTML est ensuite interpr t par un
(navigateur, ou butineur, ou browser...)
logiciel dit de navigation
d finir
pour
but
ont
de
6
Structure d'un document HTML: Balises et Attributs
" Balises
Un document HTML a toujours la structure suivante:
<HTML>
<HEAD>
(contenu de l'en-t te)
</HEAD>
<BODY>
(contenu du corps)
</BODY>
</HTML>
<-- balise de d but de document HTML
<-- balise de d but de l'en-t te
<-- balise de fin de l'en-t te
<-- balise de d but du corps
<-- balise de fin du corps
<-- balise de fin de document HTML
7
Structure d'un document HTML: Balises et Attributs
" Balises
Le corps (BODY) est compos de la succession d' l ments,
chacun de ces l ments tant constitu de:
o Une balise de d but d' l ment, de la forme <BALISE>;
o Un contenu (qui peut lui-m me contenir d'autres l ments)
o Une balise de fin d' l ment, de la forme </BALISE> (parfois
optionnelle),
" Apprendre le langage HTML revient conna tre les diff rentes
balises et savoir les utiliser.
8
Structure d'un document HTML: Balises et Attributs
" Balises
Exemple de balises:
o <HEAD>...</HEAD> et <BODY>...</BODY> sont des balises!
o <P>...</P> : le contenu entre ces deux balises sera alors un
paragraphe
o <B>...</B> : le contenu entre ces deux balises sera alors du texte
en caract res gras
9
Structure d'un document HTML: Balises et Attributs
" Attributs
A chaque balise sont associ s un certain nombre d'attributs, qui
caract risent les propri t s de cette balise.
" Jusqu'ici, une balise servait rendre un seul effet (par exemple, la
balise B mettait en gras).
" La majorit des balises HTML sont en fait capables de r gler
"
plusieurs effets elles-seules.
Chaque effet est alors g r par un attribut. Les valeurs de ces
attributs seront sp cifi es comme suit:
<BALISE attribut1="valeur1" attribut2="valeur2">
...
</BALISE>
10
Structure d'un document HTML: Balises et Attributs
" Attributs
Exemples: Quelques attributs de la balise <BODY>: bgcolor (permet
de sp cifier la couleur de fond de votre page Web), fgcolor (permet
de sp cifier la couleur du texte de la page). Dans le code HTML, ces
attributs appara tront sous la forme:
<BODY bgcolor="red" fgcolor="black">
...
</BODY>
" Remarques:
" 1. Ne pas sp cifier la valeur d'un attribut revient laisser le
navigateur choisir le contenu pr vu par "d faut". Ainsi, si vous
n' crivez pas fgcolor=black dans votre page, ce n'est pas bien
grave... le noir tant la couleur de texte par d faut des Navigateurs.
" 2. Une faute courante consiste m langer les notions de balise et
d'attribut. Par exemple, il est affreux (!!!) d' crire: <bgcolor=red>, car
bgcolor est un attribut de la balise BODY. Il faut crire; <BODY
bgcolor=red>
11
MISE EN PAGE
" Balise <HR>
La balise <HR> permet de tracer une s paration horizontale. Ses attributs sont
donn s dans le tableau suivant:
12
MISE EN PAGE
" Balise <BR>
La balise <BR> permet de passer la ligne.
" Balise <P>
"
La balise <P> permet de mettre en forme un paragraphe. Ses attributs sont donn s
dans le tableau suivant:
13
MISE EN FORME DE TEXTE
" Balises de titre: <H1>, <H2>...<H6>
Les balises <H1>...<H6> permettent de d finir des niveaux de titre, du plus grand
(niveau 1) aux titres de niveaux inf rieurs (niveaux 2 6). Leurs attributs sont donn s
dans le tableau suivant:
14
MISE EN FORME DE TEXTE
" Balise <FONT>
La balise <FONT> permet de choisir la police de caract res du texte. Donnons
quelques attributs de cette balise:
15
MISE EN FORME DE TEXTE
" Balises de mise en relief
Les balises de mise en relief sont de deux types: les l ments physiques (gras,
italiques...) et les l ments logiques (qui sont des combinaisons pr d finies des
l ments physiques). Les balises les plus courantes sont donn es dans le tableau
suivant:
16
MISE EN FORME DE TEXTE
" Balises de mise en relief
17
LIENS HYPERTEXTE
La balise A et ses attributs
Le langage HTML permet la navigation sur le Web, l'aide de liens
hypertextes. Un lien est affect un morceau de texte, une image...Un
clic sur ce lien permet de charger une autre page Web. Un lien est, par
d faut, crit en bleu soulign , puis en rouge fonc soulign lorsque le
site point par ce lien a d j t visit . La balise permettant de cr er un
lien hypertexte est la balise <A>. La balise de fin est obligatoire
Dans le code HTML, un lien appara t donc de la mani re suivante:
Code HTML: Pour aller sur Nomade cliquer
<A href="http://www.nomade.fr">ici</A>.
Allure de la page Web: Pour aller sur Nomade cliquer ici.
18
LIENS HYPERTEXTE
L'attribut HREF
La valeur de l'attribut HREF de la balise A est une URL. En effet, un lien
hypertexte peut appeler une page Web disponible sur un site distant, une page
Web disponible en local sur votre disque, ou encore un endroit particulier
(position) d'un fichier HTML (int ressant dans le cas de fichiers tr s longs).
Nous avons vu qu'une URL pouvait d crire toutes ces situations. Donnons
quelques exemples: dans notre exemple, le lien est crit l'int rieur d'un
fichier, appel maPage.html, et ce lien pointe vers un autre fichier
autrePage.html.
Si autrePage.html est une page Web d'un site distant: Dans ce cas l'URL
doit sp cifier le protocole et l'adresse,
Exemple: <A HREF="http://www.nomade.fr/autrePage.html">...</A>.
Si autrePage.html est une page Web en local sur votre disque: L'URL soit
sp cifier le chemin complet suivre pour atteindre ce fichier.
Exemple: <A HREF="chemin/autrePage.html">...</A>.
19
LIENS HYPERTEXTE
L'attribut NAME
L'attribut NAME de la balise A permet de donner un nom un endroit particulier d'un
fichier HTML. Ce nom pourra ensuite tre appel par un lien du m me fichier ou d'un
fichier diff rent. La syntaxe est la suivante: <A NAME="position"> (la balise de fin est
dans ce cas optionnelle).
L'attribut TARGET
Cet attribut sp cifie le nom du cadre cible pour afficher le document d fini par un lien.
Publicité
Exemple : _blank, _self
20
TABLEAUX
Les balises TABLE, TR, TD, TH, CAPTION
L'insertion d'un tableau se fait l'aide de la balise <TABLE>. La balise de fin est
obligatoire. Les attributs de cette balise sont donn s dans le tableau suivant:
21
TABLEAUX
Les balises TABLE, TR, TD, TH, CAPTION
La balise CAPTION permet de donner une l gende un tableau. Son attribut est
ALIGN=top|bottom, suivant que l'on voudra placer la l gende au-dessus ou en-dessous
du tableau. La balise de fin est obligatoire. A l'int rieur de la balise TABLE, un l ment
<TR>...</TR> (Table Row) d finit une ligne. A l'int rieur de la balise TR, un l ment
<TD>...</TD> (Table Data) d finit une colonne (i.e. une cellule). Lorsque ces cellules
sont celles de la premi re ligne, il est possible de remplacer la balise <TD>...</TD> par
<TH>...</TH> (Table Header): le contenu de la cellule sera alors mis en gras. Ainsi, le
code correspondant un tableau 2 lignes-3 colonnes sera donc:
<TABLE>
<TR>
<TD>contenu de ligne 1, colonne 1
<TD>contenu de ligne 1, colonne 2
<TD>contenu de ligne 1, colonne 3
</TR>
<TR>
<TD>contenu de ligne 2, colonne 1
<TD>contenu de ligne 2, colonne 2
<TD>contenu de ligne 2, colonne 3
</TR>
</TABLE>
22
TABLEAUX
Les attributs des balises TR, TD et TH sont donn s dans le
tableau suivant:
23
INSERTION D'IMAGES
La balise IMG et ses attributs
L'insertion d'une image se fait l'aide de la balise <IMG>.
La balise de fin est interdite. Les attributs de cette balise
sont donn s dans le tableau suivant:
24
LISTES D' L MENTS
Listes ordonn es
Il est possible, avec le langage HTML, de lister des
l ments, de fa on ordonn e. Les l ments seront alors
num rot s, soit par des chiffres (1, 2, 3...) soit par des
lettres majuscules (A, B, C...) ou minuscules (a, b, c...).
Exemples:
1. l ment num ro 1
2. l ment num ro 2
A. l ment num ro 1
B. B. l ment num ro 2
C. C. l ment num ro 3
25
LISTES D' L MENTS
Listes ordonn es
La balise permettant d' crire une liste est la balise <OL> (O pour
"ordered") (balise de fin obligatoire). Le choix du type de num rotation
se fait gr ce l'attribut TYPE de la balise OL, selon le tableau suivant:
A l'int rieur des balises ouvrante et fermante, chaque l ment (item) de
la liste commence par une balise <LI> (balise de fin optionnelle). La
structure HTML d'une liste ordonn e est donc la suivante:
<OL TYPE="valeur">
<LI> un l ment de la liste
<LI> un autre l ment de la liste
</OL>
26
LISTES D' L MENTS
Listes non-ordonn es
Le principe est le m me que les listes ordonn es; la balise permettant
d' crire une liste nonordonn e est la balise <UL> (U pour "Unordered")
(balise de fin obligatoire). Dans ce type de liste, les items de liste ne
sont plus num rot s. Ils sont pr c d s d'un symbole, d fini par l'attribut
TYPE de la balise UL, selon le tableau suivant:
27
FORMULAIRES
Qu'est-ce qu'un formulaire?
Un formulaire int gr dans une page Web permet une
interaction entre l'internaute et la personne qui a publi la
page.
Un formulaire contient des l ments appel s contr les
(champs de textes, boutons, bo tes cocher, menus...).
L'utilisateur change donc la valeur de ces contr les avant
d'envoyer son formulaire. Les informations contenues dans
les diff rents champs sont alors r cup r es et trait es par
un logiciel,
28
FORMULAIRES
Qu'est-ce qu'un formulaire?
Un formulaire se compose d'une balise
<FORM>...</FORM>
Le contenu de cette balise est une succession d' l ments,
d finis eux-aussi par des balises, chaque balise
caract risant un type de contr le. Enfin, les diff rents
contr les peuvent tre dispos s en tableau.
29
FORMULAIRES
Balise FORM
L' l ment FORM est celui qui englobe tout le formulaire. Ses attributs
ont pour t che de contr ler comment et o seront envoy es les
donn es du formulaire. Ne jamais embo ter des balises FORM!!!
Il existe deux m thodes d'envoi des donn es:
Par la m thode GET, les donn es (c. .d le nom du champ et son
contenu) sont concat n es en une unique chaine de caract res qui est
ajout e l'URL (regarder le contenu du Champ "Location" de votre
navigateur lorsque vous envoyez un formulaire). La taille de l'envoi est
donc limit e;
Par la m thode POST, la chaine de caract res est envoy e par le
biais de s quences du protocole HTTP sp ciales.
30
FORMULAIRES
Balise FORM
Les attributs de la balise FORM (balise de fin obligatoire)
sont donn s dans le tableau ci-apr s:
31
FORMULAIRES
Balise INPUT
La balise <INPUT>...</INPUT>
permet de cr er un grand
nombre de contr les.
Quelques-uns
de ses attributs sont donn s
dans le tableau ci-apr s:
32
FORMULAIRES
Balise SELECT
Une balise select permet de cr er un menu d roulant, ou une liste de s lection ( choix
forc ou multiple). La balise de fin est obligatoire. Chaque item de la liste est ensuite
d fini l'aide de balises OPTION (balise de fin facultative), qui ont les m mes attributs
que INPUT. Les attributs de la balise <OPTION>...</OPTION> sont pr sent s dans le
tableau ci-apr s:
Exemple:
<SELECT Name="monMenu" MULTIPLE>
<OPTION> l ment 1 de la liste</OPTION>
<OPTION> l ment 2 de la liste</OPTION>
<OPTION> l ment 3 de la liste</OPTION>
</SELECT>
33
FORMULAIRES
Balise TEXTAREA
Cette balise permet de cr er une zone de texte. Trois
attributs obligatoires: COLS (nombre de colonnes visibles),
ROWS (nombre de lignes visibles), NAME bien s r! Balise
de fin obligatoire!
34
INSERTION fichier Audio
35
INSERTION fichier Audio
36
INSERTION fichier Audio
37
INSERTION fichier Vid o
38
INSERTION fichier Vid o
39
Nouvelle Structure
<div
id="nav">
<nav>
HTML 5
<div id="header">
<header>
<div class="article">
<article>
<div id="content">
<section>
<div id="footer">
<footer>
<div
id="right">
<aside>
40
HTML 5
Nouvelle Structure
<header>
len-t te
<footer>
le pied-de-page
<nav>
les principaux liens de navigation
Menus du site
<section>
les parties th matiques de la page
<aside> les informations compl mentaires
<article>
Souvent un l ment dune section
41
HTML 5
Nouvelle Structure
42
Chapitre 2 : Le langage CSS
Ann e universitaire
2016-2017
Qu'est-ce que les feuilles de style?
" Nous avons vu dans le chapitre de mise en forme de texte que
l'allure des niveaux de titre (couleur, taille, alignement) pouvait tre
modifi e l'int rieur de la balise de titre. De m me, il tait possible
de changer la couleur de fond d' cran, l'image de fond. Mais toutes
ces interventions se faisaient l'int rieur du fichier source HTML.
" Si l'on d sire harmoniser les titres, il faudra ainsi parcourir tous les
fichiers sources pour modifier tel ou tel attribut. Depuis la version 4
du langage HTML, il est possible de cr er des feuilles de style, qui
ont pour t che de regrouper les informations de mise en page des
documents qui s'y r f rent.
" Ainsi, plusieurs documents HTML peuvent appeler la m me feuille
de style, et la modification d'un attribut ne se fera que dans cette
feuille de style.
44
Publicité
Que modifier dans les fichiers HTML?
"
Il suffit dans le fichier HTML de sp cifier la location et le
nom de la feuille de style: Nous avions vu que la seule
balise figurant dans l'en-t te tait la balise <title>...</title>.
" En r alit , d'autres balises peuvent figurer dans l'en-t te,
et par exemple la balise <LINK>, qui permet de sp cifier le
nom de la feuille de style (extension ".css", pour
"Cascading Style Sheet").
" Exemple:
<HEAD>
<TITLE>Ma page Web</TITLE>
<LINK rel="stylesheet" HREF="maFeuilledeStyle.css" TYPE="text/css">
</HEAD>
45
Que modifier dans les fichiers HTML?
46
Comment crire une feuille de style?
" Une feuille de style est un simple fichier texte, enregistr
avec l'extension ".css". Ce fichier est constitu e d'une
s rie de lignes, chaque ligne correspondant la d finition
des attributs d'une balise. La syntaxe est la suivante:
BALISE { ATTRIBUT1:valeur1; ATTRIBUT2:valeur2...}
" Exemple:
"
BODY {background-color:blue}
H1 {font-style:italic; font-family:sans-serif}
EM {font-style:italic}
EM EM {font-style:roman}
47
Comment crire une feuille de style?
" La balise SPAN permet de cr er la propre mise en forme d'un mot ou
d'un ensemble de mots. La d finition de la balise se fera dans la feuille
de style, sous la forme:
SPAN.classe1 { ATTRIBUT1:valeur1; ATTRIBUT2:valeur2...}
SPAN.classe2 { ATTRIBUT1:valeur3...}
" et son utilisation dans le fichier HTML:
Voici un exemple d'utilisation de la
" <SPAN class="classe1">premi re</SPAN> classe de SPAN et de la
<SPAN class="classe2">deuxi me</SPAN> classe.
" La balise DIV permet de cr er la propre mise en forme d'un
paragraphe. Elle s'utilise comme SPAN.
48
Notions de Classe & ID en CSS
49
Notions de Classe & ID en CSS
50
Notions de Classe & ID en CSS
51
Tableau de quelques propri t s
52
Tableau de quelques propri t s
53
Tableau de quelques propri t s
54
Bordures et marges en CSS
55
Bordures et marges en CSS
56
Bordures et marges en CSS
57
Bordures et marges en CSS
58
Bordures et marges en CSS
59
Bordures et marges en CSS
60
Bordures et marges en CSS
61
Bordures et marges en CSS
62
Chapitre 3 : Le langage JavaScript
Ann e universitaire
2016-2017
Plan
Partie II:
D clarations des fonctions
M thodes Utilis
L Acc s aux l ments
Partie I :
Pourquoi JavaScript?
Ecriture du JavaScript
Variables
Types
Boites de dialogue
Op rateurs Javascript
Structures conditionnelle
It rations
Notion dobjet en JavaScript
Fonctions Pr d finis
64
Partie I
65
Pourquoi JavaScript?
interpr table par le navigateur du c t Client
Permet une interactivit au Web
- Contr le des valeurs saisies dans un formulaire
Les scripts populaires sont: JavaScript, VBScript,
JScript, etc.
66
Ecriture du JavaScript (1/2)
Deux possibilit :
Interne : le code de Java Script sera plac dans lent te du
document XHTML
67
Ecriture du JavaScript(2/2)
Deux possibilit :
Externe: Regrouper les instructions de JavaScript dans un fichier
(.js) externe au fichier HTML .
68
Variables
JavaScript est un
langage pauvrement
typ , il nest pas indispensable de d clarer
pr alablement le type de variable.
Utiliser var pour d clarer les
variables
Utiliser ; en fin dinstruction
Exemple:
var saluer=Bonjour;
var nom =Ali;
69
Types
String, Number, Boolean, NaN, Null, etc.
NaN est le sigle de "Not a Number", cest
dire "Ce n'est pas un nombre !" C'est en fait
le r sultat d'une op ration math matique
sans sens (la division de 0 par 0, la racine
carr e d'un nombre n gatif, etc.)
NULL sert sp cifier une variable sans
valeur
70
Boites de dialogue (1/2)
PROMPT : prompt(MSG,Valeur );
Ex: var x = prompt( veuillez mettre un message,valeur)
X prend la valeur entr e ou Null si aucune
valeur nest entr e
71
Exercice 1
Ecrire un script qui vous permet de r aliser les boites de dialogue
suivantes:
72
Commentaires
" Commentaires en JavaScript
Utiliser // pour les commentaires sur
une ligne.
Utiliser au d but / et la fin / pour les
commentaires sur plusieurs lignes.
73
Op rateurs JavaScript
Arithm tiques : + - / * ++ --
Comparaison:
< <= == != >= >
Concat nation des cha nes :
+
Assignation :
=
Sp ciales: == et != convertissent les op randes de m me type
avant la comparaison
74
Structure Conditionnelle
If (condition) instruction;
If (condition) instruction else instruction;
Exemple:
REMARQUE: Mettre des { &} pour plusieurs instructions dans un block
75
conditionnel
It rations
While (condition) instruction;
Do instruction While (condition);
For (initialisation; condition; incr mentation) instructions;
Exemple:
REMARQUE: Mettre des { &} pour plusieurs instructions dans un block it ratif.
76
Notion dobjet en JavaScript
JavaScript nest pas un langage orient objet mais un
langage bas sur les objets.
Un objet est une entit pr d finie propre Javascript.
La page Web est consid r e comme un
ENSEMBLE DOBJETS
77
Exemple dobjet
Objet Fen tre
Objet document
Objet Formulaire
Objet Texte
Objet Radio
Objet Bouton
78
Objet Array
Cr ation de lobjet :
var mycars=new Array() ;
mycars[0]="Saab" ;
mycars[1]="Volvo" ;
mycars[2]="BMW" ;
Ou bien :
var mycars=new Array("Saab ,"Volvo ,"BMW") ;
Pour contr ler la grandeur du tableau :
var myArray=new Array(3) ;
79
Fonctions Pr d finies
" Parsefloat ()
" Parseint ()
" String ()
" Number ()
" Length()
Publicité
80
Fonction Parsefloat
parsefloat(une_chaine);
Convertit une cha ne en nombre virgule flottante
si la cha ne commence par un caract re num rique.
Exemple:
81
Fonction parseint
parseInt(chaine_de_caract re);
Convertit l'argument en un nombre entier
Renvoie NaN si la conversion est impossible
Exemple:
82
Fonction String
String (une_chose);
Convertit l'argument en une cha ne
Exemple:
Resultat :
83
Fonction number
Number(une_valeur);
Convertit l'argument en un nombre
Renvoie NaN si la convertion est impossible
Exemple:
84
Exercice 2
85
Exercice 3
D velopper en JavaScript un script qui permet de :
1/ Collecter aupr s des utilisateurs les valeurs de x
et y.
Consid rer les r gles suivantes:
Si x>5 alors d duire 5 de x sinon ajouter 5 x.
Si y>10 alors d duire 10 de y sinon ajouter 10 y.
2/ Afficher le r sultat x+y
86
Exercice 4
D velopper en JavaScript un script qui
permet dafficher
tous
les entiers
compris entre 1 et 1000 qui sont
divisibles par 23.
87
Partie II
88
Fonctions
D finies dans la parte <head> et appel
dans la partie <body>.
89
M thodes utilis
Instruction
Description
length
charAt()
indexOf()
lastIndexOf()
substring(x,y)
toLowerCase()
toUpperCase()
C'est un entier qui indique la longueur de la
cha ne de caract res.
M thode qui permet d'acc der un caract re
isol d'une cha ne.
M thode qui renvoie la position d'une cha ne
partielle partir d'une position d termin e.
(en commen ant au d but de la cha ne
pricipale soit en position 0).
M thode qui renvoie la position d'une cha ne
partielle partir d'une position d termin e.
(en commen ant la fin soit en position length
moins 1).
M thode qui renvoie un string partiel situ
entre l position x et la position y-1.
Transforme toutes les lettres en minuscules.
Transforme toutes les lettres en Majuscules.
90
La Propri t length
La propri t length retourne un entier qui indique le nombre d' l ments
dans une cha ne de caract res. Si la cha ne est vide (" "), le nombre est z ro.
La syntaxe est simple :
x=variable.length;
x=("cha ne de caract res").length;
La propri t length ne sert pas que pour les Strings, mais aussi pour
conna tre la longueur ou le nombre d' l ments :
Formulaires: Combien a-t-il de formulaires diff rents ?
Boutons radio: Combien a-t-il de boutons radio dans un groupe ?
Cases cocher: Combien a-t-il de cases cocher dans un groupe ?
Options: Combien a-t-il d'options dans un Select ?
91
La m thode CharAt() (1/2)
Il faut d'abord bien noter que les caract res sont compt s de gauche droite et
que la position du premier caract re est 0. La position du dernier caract re est donc la
longueur (length) de la cha ne de caract re moins 1.
cha ne : Javascript (longueur = 10)
||||||||||
position : 0123456789 (longueur - 1)
Si la position que vous indiquer est inf rieure z ro ou plus grande que la
longueur moins 1, Javascript retourne une cha ne vide.
92
La m thode CharAt() (2/2)
La syntaxe de charAt() est :
cha ne_r ponse = cha me_d part.charAt(x);
NB : o x est un entier compris entre 0 et la longueur de la cha ne analyser moins 1
Notez lexemple suivant :
var str="Javascript";
var chr=str.charAt(0);
var chr="Javascript".charAt(0);
ou var chr=charAt(str,0);
ou var chr=charAt("Javascript",0);
La r ponse est "J".
93
La m thode indexOf (1/3)
Cette m thode renvoie la position, soit x, d'un string partiel
(lettre unique, groupe de lettres ou mot) dans une cha ne de caract res
en commen ant la position indiqu e par y. Cela vous permet, par
exemple, de voir si une lettre, un groupe de lettres ou un mot existe
dans une phrase.
variable="cha ne_de_caract res";
var="string_partiel";
x=variable.indexOf(var,y);
94
La m thode indexOf (2/3)
O y est la position partir de laquelle la recherche (de gauche
vers la droite) doit commencer. Cela peut tre tout entier compris entre
0 et la longueur - 1 de la cha ne de caract res analyser.
Si y n'est pas sp cifi , la recherche commencera par d faut la
position 0.
Si le string partiel n'est pas trouv dans la cha ne de caract res
analyser, la valeur retourn e sera gale -1.
95
La m thode indexOf (3/3)
Exemple:
variable="Javascript"
var="script"
x=variable.indexOf(var,0);
x vaut 4
variable="VanlanckerLuc&ccim.be"
var="@"
x=variable.indexOf(var);
x vaut -1
96
La m thode substring()
La m thode substring() sera particuli rement utile, par exemple, pour
prendre diff rentes donn es dans une longue cha ne de caract res.
variable = "cha ne de caract res"
resultat=variable.substring(x,y)
R sultat est un sous ensemble de la cha ne de caract re (ou de la
variable).
Les x et y sont des entiers compris entre 0 et la longueur moins 1 de la
cha ne de caract res.
NB : Si x est gal y, substring() retourne une cha ne vide.
97
La m thode substring()
Javascript
||||||||||
0123456789
Exemple :
str="Javascript";
str1=str.substring(0,4);
str2="Javascript".substring(0,4);
str3=str.substring(6,9);
Les r sultats sont :
str1="Java"; soit les positions 0,1,2 et 3.
str2="Java"; soit les positions 0,1,2 et 3.
str3="rip"; soit les positions 6,7 et 8
98
Acc s aux objets du formulaire
Window.document.forms .name_dobjet
1
2
3
1
2
3
forms (cest le tableau des formulaires) peut tre remplac par le nom de la balise
form ou par getElementById(id de la balise form).
Puisque Window occupe la premi re place dans lhi rarchie, il devient facultatif.
Lacc s aux l ments de type input (1/3)
Les zones de texte:
La principale action en javascript sur une zone de texte est de
manipuler son contenu.
Il faut bien penser ajouter la propri t .value pour acc der au contenu.
100
Exercice 5
1.Ecrire une fonction qui permet de v rifier
les champs nom et CIN ne sont pas vide.
2. Ecrire une fonction qui permet de v rifier
que le
champs CIN est num rique et poss de
une longueur gale 8 caract res.
101
Exercice 6
D velopper en JavaScript un script qui permet dafficher le choix
s lectionner.
1/ Si CSS s lectionner :
2/ Si JavaScript S lectionner :
3/ Si Les Deux :
102
Exercice 7 (1/3)
Il vous a t demand de compl ter le script du jeu en
d veloppant la fonction JavaScript CalculScore() qui permet de :
Afficher une alerte si le joueur coche moins ou plus de trois cases.
Calculer le score du jeu et afficher une alerte , Vous tes d j un
joueur expert si le score est plus grand que 15, sinon afficher une
alerte Vous tes encore un joueur d butant .
103
Publicité
Exercice 7 (2/3)
104
Exercice 7 (3/3)
105
Lacc s aux l ments de type input (3/3)
Les radio boutons:
Pour d tecter qu'une case est coch e, il faut utiliser sa propri t checked
106
Exercice 8
D velopper en JavaScript un script
qui permet dafficher le choix de la case
radio choisie.
107
Lacc s aux l ments de type Select
R sultat
108
Exercice 9
D velopper en JavaScript un script
qui permet daccepter une adresse
email respectant les r gles suivantes:
Exactement 1 seul caract re @
Min 1 point celui-ci ne doit pas se
situer tout juste avant ou apr s @
Min 2 caract res apr s le dernier point
Ladresse email ne commence et ne
finit ni par @ ni par un point
109
Des questions ?
110
Chapitre 4 : Le langage PHP
Ann e universitaire
2016-2017
Introduction
PHP est un
langage de script qui est
principalement utilis pour tre ex cut par un
serveur Web.
L'objectif de ce langage est de permettre aux
d veloppeurs web d' crire des pages dynamiques
rapidement.
Une page dynamique est une page qui sex cute
c t serveur (contrairement aux pages statiques
HTML qui sex cutent c t client
112
Introduction
PHP n'est pas un langage compil , c'est
un langage interpr t par le serveur.
Une plateforme minimale de base pour
lex cution dun site web d velopp en
PHP comprend :
-Interpr teur PHP
-Un serveur web (Apache, IIS, &)
113
Exemple
<html>
<head>
<title>Exemple</title>
</head>
<body>
<?php
echo "Bonjour, je suis un script PHP!" ;
?>
</body>
</html>
114
Mise en oeuvre et d ploiement
115
Fonctionnement du PHP
116
Les fonctionnalit s du langage
insertion de code PHP l'aide des balises:
" <?php .............. ?>
" <? .............. ?>
" <?PHP .............. ?>
117
Les fonctionnalit s du langage
des variables
les variables sont repr sent es par
une cha ne de caract res, ayant
toujours comme premier caract re, le
caract re dollar ($).
Exemple 1: $x, $ch, $nomvariable
Exemple 2: $x= Bonjour ;
118
Les fonctionnalit s du langage
ficher le contenu des variables
<?php
$nom = " Bonjour ! ";
echo $nom;
?>
Ce qui affichera l' cran : Bonjour !
119
Les fonctionnalit s du langage
Concat nation de deux cha nes :
<?php
$ch1= J'apprend ;
$ch2= le PHP ;
$ch=$ch1.$ch2;
echo $ch;
?>
Ce qui affichera l' cran :
J'apprend le PHP
120
Les fonctionnalit s du langage
Les Commentaires en PHP:
<?php
// commentaire sur une ligne
/ commentaire sur plusieurs lignes /
commentaire de fin de ligne
?>
121
Les fonctionnalit s du langage
Les op rateurs de contr le :
== strictement gal
!= diff rent
> sup rieur
< inf rieur
>= sup rieur ou gale
<= inf rieur ou gale
122
Les fonctionnalit s du langage
Les op rateurs de contr le:
&& et
|| ou
AND et
OR ou
TRUE 1 ou oui
FALSE 0 ou non
123
Les fonctionnalit s du langage
Les structures de contr les :
Conditions if
<?php
if($var == condition) {
// condition v rifi e
} else {
//condition non v rifi e
}
?> ;
124
Les fonctionnalit s du langage
Conditions elseif
<?php
If ($var == condition1) {
// condition1 v rifi e;
}
elseif ($var == condition2) {
// condition2 v rifi e;
}
elseif ($var == conditionN) {
// conditionN v rifi e;
}
else { echo Aucune condition nest v rifi e; }
?>
125
Les fonctionnalit s du langage
Conditions SWITCH
<? php
switch ($variable)
{
case condition1: //Traitement de la condition 1 ;
break;
case condition2: //Traitement de la condition 2 ;
break;
case conditionN: //Traitement de la condition N
break;
default: //Traitement par d faut
}
?>
126
Les fonctionnalit s du langage
It ration avec WHILE
<?php
While ($condition)
{
//Traitements
}
?>
127
Les fonctionnalit s du langage
It ration avec FOR
<?php
for($i=0; $i != condtion ; $i++)
{
//Traitements r alis s
}
?>
128
Les tableaux
Tableau index
Tableau associatif
0
Renault
1
Clio
2
120TU5100
marque
Renault
modele
Clio
matricule
120TU5100
$tableau[0] = "Renault ";
$tableau[1]= "Clio";
$tableau[2]= "120TU5100" ;