Cours : Web

<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 d’une 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

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 d’objet 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 l’entê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 n’est pas indispensable de déclarer préalablement le type de variable.

 Utiliser var pour déclarer les variables  Utiliser « ; » en fin d’instruction

Exemple: var saluer=“Bonjour”; var nom =“Ali”;

69

Types

 String, Number, Boolean, NaN, Null, etc.

NaN est le sigle de "Not a Number", c’est à 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 n’est 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 d’objet en JavaScript

 JavaScript n’est 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 D’OBJETS

77

Exemple d’objet

Objet Fenêtre

Objet document

Objet Formulaire

Objet Texte

Objet Radio

Objet Bouton

78

Objet Array

Création de l’objet :

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

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 d’afficher

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 l’exemple 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[n].name_d’objet

1

2

3

1

2

3

forms[n] (c’est 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 l’hiérarchie, il devient facultatif.

L’accè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 d’afficher 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

Exercice 7 (2/3)

104

Exercice 7 (3/3)

105

L’accè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 d’afficher le choix de la case

radio choisie.

107

L’accès aux éléments de type Select

Résultat

108

Exercice 9

Développer en JavaScript un script qui permet d’accepter 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 – L’adresse 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 s’exécute côté serveur (contrairement aux pages statiques HTML qui s’exé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 l’exécution d’un 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 n’est 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" ;

$tableau[‘marque’] = "Renault "; $tableau[‘modele’]= "Clio"; $tableau[‘matricule’]= "120TU5100" ;

Oubien

Oubien

$tableau = array("Renault" , "Clio", "120TU5100") ;

$tableau = array( "marque" => "Renault" , "modele" => "Clio", "matricule" => "120TU5100" ) ;

129

Passage et transmission de variables

Les données d’un formulaire sont envoyées à travers une des fonction du protocole HTTP : GET ou POST.

Syntaxe :

Code HTML

Code PHP

<form method="post" action="cible.php" /> <input type="text" name="nom" /> <input type="submit" value="OK" /> </form>

<?php

$nomRecupere=$_POST[‘nom’]; echo $nomRecupere; ?>

130

Passage et transmission de variables

Récupération du contenu des variables Selon que la méthode d’envoi a été du GET ou du POST la récupération du contenu des variables est faite selon une syntaxe différente :

Syntaxe : <?php

//Dans le cas d’un envoi des paramètres en POST $variable1=$_POST['nom_du_champ'] ; //Dans le cas d’un envoi des paramètres en GET $variable1=$_GET['nom_du_champ'] ; ?>

131

Passage et transmission de variables

Passage et transmission de variables

par hyperliens :

Des paramètres ou variables peuvent passer d’une page source vers une page transiter par un destination formulaire pour leur envoi. Les hyperliens peuvent être des vecteurs de passage de paramètres.

sans

132

Passage et transmission de variables

Syntaxe : <a href = 'supprimer.php?variable1=valeur1&variable2=valeur2’>

Envoyer </a>

 La récupération des paramètres dans la

page destination se fait par le tableau

 $_GET : $variable1=$_GET['variable1'] ; $variable2=$_GET['variable2'] ;

133

Le Langage PHP 5

• Classe (Attribut, Méthode) /Objet • constructeur • Encapsulation • Héritage

134

Motivation

• PHP5, introduit de véritables concepts OO :

-le constructeur

-le destructeur

- l’encapsulation

- L’héritage

- Les classes abstraites.

- Les interfaces

135

Notion de class/objet

• Une classe est une représentation abstraite

d'un objet.

• Une classe peut généralement être rendu

concrète au moyen d'une instance de classe,

que l'on appelle objet.

• Une classe s'écrit au moyen du mot "class" suivi

du nom de la classe et d'accolades.

136

Exemple

• Class Point { public $x=10; public $y=5; }

$x et $y sont deux attributs de la classe

Point.

137

Les constructeurs

• Le constructeur est la fonction qui est appelée

automatiquement par la classe lorsque vous

créez une nouvelle instance d'une classe a

l'aide de l'opérateur new.

Déclaration:

public function __construct() { }

138

Le mot clé « This »

• la variable $this utilisée à l'intérieur d'une

classe, vaut toujours une référence vers l'objet

lui-même (objet courant ).

Exemple:

echo $this->x; // affiche la valeur de la variable x;

139

Exemple

• Class Personne { public $nom; public $age;

public function __construct() { $this->nom= ‘’mohsen’’; $this->age= 20; }

}

140

Les droits d'accès (public)

• Les propriétés ou méthodes "public" sont

visibles et manipulables par tous les objets,

même s'ils sont d'autres classes.

Exemple :

public $nom;

141

Les droits d'accès (protected)

• Les propriétés ou méthodes "protected"

concernent les objets de la même classe ainsi

que ses dérivées, mais pas ceux des classes

étrangères.

Exemple:

protected $nom;

142