Cours : Web

Programmation Web & Multimédia · course

Voir tous les documents en programmation

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