Vous êtes sur la page 1sur 53

Web&HTML

Karim Bouzoubaa
Issam Kabbaj
Introduction Internet - web
• Internet : Réseau d’ordinateurs connectés à
travers le monde

• Internet permet de relier entre plusieurs sous-


réseaux

• Le protocole TCP/IP, Transmission Control


Protocol/Internet Protocol, un langage universel
permettant à deux machines de communiquer entre
elles, peu importe leur système d’exploitation

• Chaque ordinateur a un identificateur, n° IP


– n° unique
– identifie et localise l’ord dans le réseau
– sur 4 octets (IPv4) : a.b.c.d (chaque numéro allant de 0 à 255)
– exemple : 172.20.10.236
• 172.20.10 exemple de sous réseau
• 236 ordinateur

• IPv6: 3,4×1038 adresses, soit 667 millions de milliards


d’adresses IP disponibles par mm2
• Nom de domaine: faire correspondre à une adresse
IP un nom humainement plus simple à retenir:
2
4/27/14
Clients et Serveurs dans un réseau
• Client : ordinateur qui demande une ressource (fichier, imprimante, etc.) à
un autre ordinateur
• Serveur : ordinateur qui met une ressource à la disposition d'autres
• Le client envoie une requête au serveur, qui y répond en fournissant le
service demandé.
• Un serveur présente des ports, qui sont des points d'entrées, sur lesquels
les clients envoient leur requêtes

• Programme client : programme qui


demande une ressource dans le
réseau
• Programme serveur : celui qui
fournit cette ressource
C/S – cas du web

• Programme client = navigateur (browser)


– IExplorer
– Mozilla FireFox
– Safari
– Opera

• Programme serveur : le serveur web


– GlassFish : http://glassfish.java.net/
– Apache Tomcat : tomcat.apache.org/
– Oracle OC4J : www.oracle.com/technology/products/oc4j
– Microsoft IIS : www.iis.net
4/27/14 4
C/S – cas du web
• Le browserLIFE-WEAVE
demande
2016-10-24 16:27:32 d'accéder à une page web stockée sur serveur web
--------------------------------------------
la page consulter par défaut est la
• page index port 80
Le programme navigateur envoie une requête HTTP au serveur, lequel y répond
en envoyant le document demandé dans le corps d’une réponse HTTP

• Ce dernier est écrit dans le langage HTML ( Hypertext Markup Language )

• Le browser interprète donc ce document HTML pour l'afficher sur l’écran


Http:/

Serveur d'applications Serveur de bases de données


Serveur Web

Servlet, EJB, JMS JTA JOBC


HTML,

JavaBeanq KMt
Architecture 2 tiers

4/27/14 7
Requêtes sur Internet
• Forme de la requête protocole://hôte/chemin
• http://www.emi.ac.ma/index.html
• http://www.linux.org/docs/howto.html
• http://www.w3.org/Markup/html/

• Hôte spécifié par un URI (Uniforme Resource Identifier, Identificateur de


Ressource Uniforme)
– A Unifying Syntax for the Expression of Names and Addresses of Objects on the
Network as used in the World-Wide Web (Tim Berners-Lee)

• Par Défaut
– index.html, main.html, home.html (ou htm) ...

• Paramétrisation éventuelle
– http:// ... ?prenom=mohamed&ville=rabat

• Autres services aussi


– ftp://ftp.java.com
– telnet://myHost
Requêtes sur Internet (HTTP)
• Une requête Internet (par exemple http://www.emi.ac.ma/index.html)
n’est pas envoyée du client vers le serveur telle quelle. Elle
est mise dans une structure plus large qui contient non
seulement la requête elle-même mais également d’autres
informations telles que le type du système d’exploitation, le
nom du browser, etc. LIFE-WEAVE
2017-01-02 21:20:06
--------------------------------------------
Le nom du browser est important
• Cette structure n’est pas aléatoire. Elle est définie selon les
parfois pour savoir quel fichier CSS doit-
on charger?
règles du protocole HTTP.
• Le protocole HTTP (HyperText Transfer Protocol) est le
protocole le plus utilisé sur Internet depuis 1990. Il permet de
transférer des ressources (fichiers HTML, fichiers image,
résultats de requêtes, etc.) avec des en-têtes décrivant le
contenu de la ressource
Requêtes sur Internet (HTTP)
• La communication entre le client et le serveur se fait
en deux temps :
– Le navigateur effectue une requête HTTP
– Le serveur traite la requête puis envoie une réponse
HTTP

• Versions 0.9, 1.0 et actuellement 1.1 LIFE-WEAVE


2017-01-02 21:26:41
--------------------------------------------
Actuellement HTTP/2
• Même principe que ce soit une requête ou une
réponse
– Une ligne spécifiant le type de la transaction HTTP
– L'en-tête HTTP
– Le corps HTTP (optionnel pour l'envoie de la requête)
Requêtes sur Internet (HTTP)
• Une requête HTTP comprend :
1. Une ligne de requête : c'est une ligne précisant le type de document demandé, la méthode qui doit être appliquée, et la version du protocole
utilisée. La ligne comprend trois éléments devant être séparés par un espace :
• La méthode, L'URL, La version du protocole utilisé par le client (généralement HTTP/1.0 ou 1.1)
2. Les champs d'en-tête de la requête : il s'agit d'un ensemble de lignes facultatives permettant de donner des informations supplémentaires
sur la requête et/ou le client (Navigateur, système d'exploitation, ...). Chacune de ces lignes est composée d'un nom qualifiant le type d'en-
tête, suivi de deux points (:) et de la valeur de l'en-tête
3. Le corps de la requête : c'est un ensemble de lignes optionnelles devant être séparées des lignes précédentes par une ligne vide et
permettant par exemple un envoi de données par une commande POST lors de l'envoi de données au serveur par un formulaire

• Une requête HTTP a donc la syntaxe suivante (<crlf> signifie retour chariot ou saut de ligne) :
Entête Description
Accept Type de contenu accepté par le browser (par exemple text/html)
METHODE URL VERSION <crlf> Accept-Encoding Codage de données accepté par le browser
EN-TETE : Valeur<crlf> Accept-
Langage attendu par le browser (anglais par défaut) Type de codage du corps de la requête
Language
. . . Type de langage du corps de la requête
Content- Encoding
EN-TETE : Valeur<crlf> Content- Language
Content-Length Content-Type Date
Ligne vide<crlf> From
CORPS DE LA REQUETE
Longueur du corps de la requête
Type de contenu du corps de la requête (par exemple text/html) Date de début de transfert des donn
Permet de spécifier l'adresse e-mail du client

• Exemple Chaîne donnant des informations sur le client, comme le nom et la version
du navigateur, du système d'exploitation
User-Agent

GET http://www.commentcamarche.net HTTP/1.0


Accept : text/html
User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

4/27/14 11
Requêtes sur Internet (HTTP)
• Une réponse HTTP comprend :
– Une ligne de statut: c'est une ligne précisant la version du protocole utilisé et l'état du traitement de la requête à l'aide d'un code et d'un
texte explicatif. La ligne comprend trois éléments devant être séparés par un espace :
• La version du protocole utilisé, Le code de statut, La signification du code
– Les champs d'en-tête de la réponse: il s'agit d'un ensemble de lignes facultatives permettant de donner des informations supplémentaires
sur la réponse et/ou le serveur. Chacune de ces lignes est composée d'un nom qualifiant le type d'en-tête, suivi de deux points (:) et de la
valeur de l'en-tête
– Le corps de la réponse: il contient la ressource demandée

Syntaxe d’une réponse HTTP : Exemple


LIFE-WEAVE
VERSION-HTTP CODE EXPLICATION<crlf> HTTP/1.0 200 OK 2016-10-24 16:41:21
EN-TETE : Valeur<crlf> Date: Fri, 31 Dec 1999 23:59:59 GMT --------------------------------------------
. . . Content-Type: text/html e.g 404 pour un message d'erreur
EN-TETE : Valeur<crlf> Content-Length: 1354
Ligne vide<crlf>
CORPS DE LA REPONSE <html>
<body>
<h1>Happy New Millennium!</h1>
(more file contents)
. . .
</body>
</html>
Le client envoie la requête : Méthode POST

La ligne spécifique
Post /Nom_Script HTTP/1.0 Méthode, chemin, version

Accept : Text/html
Accept : image/gif Entête de la requête
Documents acceptés
Accept :
Ty p e e t v e r s i o n d u
image/jpeg navigateur ayant soumis la
requête.
*** saut de ligne ***
Var1=Value1
Corps de la requête
Var2=Value Paramètres des différents
2 champs du formulaire.

Var3=Value
Le client envoie la requête : Méthode GET

La ligne spécifique

GET /Nom_Script?var1=val1&var2=val2&…. HTTP/1.0


Accept : Text/html
Accept : image/gif
Accept :
image/jpeg
Entête de la requête
LIFE-WEAVE
2016-10-24 16:44:31
*** saut de ligne *** --------------------------------------------
pour des raisons de sécurité il est
préférable d'envoyer les variables var1 var2
Corps de la requête
& var3 dans le corps de la requête
Le Serveur retourne la réponse :

La ligne spécifique

HTTP/1.0 200 OK Ligne de Status

Date : Wed, 05Feb02 15:02:01 GMT Entête de la réponse


Nom du Serveur
Server :
Apache/1.3.24 Mime-
Dernière modification
Version 1.0
Last-Modified : Wed 02Oct01 Type de contenu
24:05:01GMT Content-Type : Text/html Sa taille
*** saut de ligne ***
<HTML><HEAD>
…. Corps de la réponse
Le fichier que le client va
</BODY></HTML> afficher
Architecture 2 tiers

4/27/14 16
HTML Langage de balisage
• HTML (Hyper Text Markup Language) est un langage pour la description
des pages web. HTML n’est pas un langage de programmation
mais plutôt un langage de balisage. Un langage de balisage permet de
décrire un document avec un ensemble de balises. Langage de balisage

• Document HTML composé d'éléments de la forme:

• Dans le cas normal


<balise> contenu </balise> LIFE-WEAVE
2016-10-24 16:50:54
• Lorsqu’une balise est sans contenu --------------------------------------------
LIFE-WEAVE
<tag> content
2016-10-24 <ending tag>
16:54:59
<balise/> Hyper Text Marq-up Language
--------------------------------------------
on a pas seulement besoin d'envoyer
• Lorsqu’une balise contient des attributs (fournissant des informations
le contenu de l'information mais aussi sa
représentation pour qu'elle soit
additionnelles) et leurs valeurs correspondantes interprétable par n'importe quel
browser. Standardisation par WCCC
des standard HTML
<balise attribut¹=”valeur¹” … attributn=”valeurn”>
contenu
</balise>
Exemple

4/27/14 18
Structure d’un document

<html>
<head>
<title> titre de la page </title>
<meta> Informations générales LIFE-WEAVE
</meta>
2016-10-24 17:02:31
--------------------------------------------
</head> e.g SEO (Search Engine Optimization)
<body> mot clé de recherche sur un moteur de
recherche
Contenu à afficher
</body>
</html>
<bea4:•
<title› Principaux éiése-ts «titles En-t“ete de la page
Principaux
éléments
</beaa>

< ! -- ceci es-- un coawienCai re -->


Commeritaires
< ! -- non a£fic hé par i.e r.aviyat;eur -->
?.*› La plus grax0e section <?n1 Les sections. Les balises <r.2^ â <as>
<r‹s> za plus yet1te sect1on < /h6> sont des secbons intet médiair-es
<p> cecz est un parayrap•e < 7p> Les éléments de texte i paragraphes

<p: la sa11se pcécé Qeote cozrespona a us. saut de 1zgne </pm <p> et sauts de lignes <Dr -'>
<stroog> vn texte en gzas <:''strol'.q>
Les styles : gias <s trongñ, italique
<eoi> un texts en ical.zque <.-’’er>

<coae> w.zze ( z< 5 › z = 1 '' 1c : } < /coae•


<em> et code <coOe>
1-u plus grunde eectlon
<p sty Ie="Font-€amzLy:couzr new : coloC : sea: Cont-size: LCpx" >
Texte eo couc1er , rouge et en 10 p1xels Les styles : fonte, couleui et taille Caci est un paragraphe

u baiae prdoéaente correspond 4 vn saut 4e i•jne


<zJnq src=•maroc . pg“> laiaqe au Naroc < '’ Jzfig> Les images

LIFE-WEAVE
Liste non ordonnée 2016-10-24 17:04:55
--------------------------------------------
Texte en cour ier, rouge et en 20 pixels
unordred list
”” ‹ rresier %1ése•t <:1i> Liste oi donnée LIFE-WEAVE
LIFE-WEAVE
<Ii> Deuxieme élément </Ii> 2016-10-24
2016-10-24 17:05:15
17:05:47
--------------------------------------------
--------------------------------------------
<taOle oocaez=” 1"> ordered
<tc>
list item list
mac
--------------------------------------------
Table row
Les tableaux : la balise <trt> désigne
les entétes des colonnes aloi s que la r uzia
balise <-O> désigne les données

< /t c>
<.'taD1e>
Les hyperliens
<html>
<head>
<title> Hyperliens </title>
</head>

<body>
<a href=”aide.html”> Lien vers une page d’aide </a>
</ br>
<a href=”http://www.w3.org”> Lien vers W3C </a>
</body>
</html>
4/27/14 21
Formulaires pour l’interaction
• Pages web statiques vs Pages web dynamiques
• Interactivité entre client et serveur
• Requête HTTP
• Ressource
• Paramètres
www.bib-atlas.com

iant&type=Mensuel&passwd=pass123&bouton=Soumetre
Formulaires

LIFE-WEAVE
2016-10-24 17:10:48
--------------------------------------------
pour interaction (dynamique)
<form>
< input ...
Synthèse web & html
-Réseaux -Architecture C/S
-Internet: réseau mondial -Client – prog client
-Ords dans Internet @IP -Serveur – prog serveur
-Se parlent par TCP/IP -Requête, port

-Réseau qlq -Réseau Internet


-Des services disponibles par modèle C/S
-Accès à ces services par requêtes
-1 requête spécifiée par protocole/URI/Chemin
-Les services

-courrier -Transfert de fichiers -Accès distant à un ord -Bavardage (chat) -Web


-Docs bien formatées (HTML/XML)
-HTML : forme standard des documents hypertextes
-Langage de balisage
-Structure particulière du doc

-Doc HTML statiques -Doc HTML dynamiques


-Liens -Docs statiques + formulaires
-Formatage du texte -Dynamisme grâce à des programmes
-Images -Au niveau client (javascript, Ajax, etc.)
-Listes -Au niveau serveur (phg, jsp, asp)
-Tableaux
-Autres

-Formulaires
-Listes déroulantes
-Champs de saisie
-Mot de passe
-Case à cocher
4/27/14 -Bouton radio 24
-Bouton
XML et XHTML LIFE-WEAVE
2016-10-24 17:14:30
--------------------------------------------
XML (Extensible Marqup Language)

• XML (Extensible Markup Language) est un langage


de balisage, comme HTML
• Cependant, avec XML l’utilisateur est libre de définir autant
que nécessaire de nouvelles balises
LIFE-WEAVE
2016-10-24 17:21:31
--------------------------------------------
XHTML est une extension destinée
aux pages web

• Contrairement à XML, XHTML est une version de HTML plus


stricte et plus propre. C’est une reformulation de HTML en
XML
• XHTML est également une recommandation W3C
Architecture 2 tiers

4/27/14 26
Les feuilles de styles

• Objectif des CSS (Cascading StyleSheet)


– séparer le contenu d’une page web et sa présentation. Ainsi, la structure
et la présentation d’une page web sont gérées séparément
– changer la forme finale d’une page web sans toucher au code HTML qui
le constitue.
– définir les styles à un seul endroit
– réduire en taille et en complexité le code HTML

• La forme générale d’une règle de style est comme suit :


sélecteur { propriété : valeur; propriété : valeur ... }
Les feuilles de styles LIFE-WEAVE
2016-10-31 17:02:34
--------------------------------------------
EXO à faire
Les feuilles de styles LIFE-WEAVE
2016-10-31 17:02:54
--------------------------------------------
Exo à faire
Sélecteur CSS
Motif Signification Exemple
* Correspond à tout élément.
Correspond à tout élément E (c.à.d., un
E H1 { font-family: sans-serif }
élément de type E).
Correspond à tout élément F qui est un
EF H1 EM { color: blue }
descendant de l'élément E.
Correspond à tout élément F aussi un
E>F BODY > P { line-height: 1.3 }
enfant de l'élément
E.
Correspond à un élément E aussi le premier P:first-child EM { font-weight :
E:first-child
enfant de son élément parent. bold }

Correspond à un élément E qui est une


E:link
ancre dans la source dont le lien n'a pas été A:link { color: red }
E:visited
visité (:link) ou bien l'a déjà été (:visited).

E:active
Correspond à l'élément E au cours de A:hover { color: yellow }
E:hover
certaines actions de l'utilisateur. A:active { color: lime }
E:focus
Correspond à l'élément de type E qui
emploie une langue c (la détermination de
E:lang(c) HTML:lang(fr) { quotes: '« ' ' »' }
cette langue est spécifique au langage du
document).

4/27/14 30
Sélecteur CSS
Motif Signification Exemple
Correspond à tout élément F immédiatement
E+F H1 + H2 { margin-top: -5mm }
précédé par un élément E.
Correspond à tout élément E avec l'attribut
E[foo] H1[title] { color: blue; }
"foo" (quelles qu'en soient les valeurs).

Correspond à tout élément E dont l'attribut "foo" a SPAN[class=exemple] { color:


E[foo="warning"]
exactement la valeur "warning". blue; }

Correspond à tout élément E dont l'attribut "foo" a


E[foo~="warning pour valeur une liste de valeurs séparées par des
A[rel~="copyright"]
"] caractères blancs et dont une de celles-ci est
"warning".

Correspond à tout élément E dont l'attribut "lang" a


*[LANG|="en"] { color :
E[lang|="en"] pour valeur une liste de valeurs séparées par des
red }
tirets, cette liste commençant (à gauche) par "en".

S e u l e m e n t en H T M L . Identique à
DIV.warning
DIV[class~="warning"].

H1#chapitre1 { text-align:
E#myid Correspond à tout élément E dont l'ID est "myid".
center }
Les scripts
• Problématique
– Tous les traitements effectués sur le serveur
– Exemple: vérification des champs non remplis

• Objectif
– Sous traiter certaines vérifications au client pour éviter la surcharge sur
le serveur
– Utilisation des langages de scripts
• Exemples: Javascript, Vbscript, jquery (librairies javascripts)

• Javascript
– Développé à l’origine par Netscape
– Adopté actuellement par W3C
Les scripts
• ≠ de Java
• JavaScript peut changer le contenu des éléments
HTML

• JavaScript peut utiliser des structures de contrôle

• JavaScript peut réagir aux événements

• JavaScript peut être utilisé dans les pages


web interactives, comme par exemple pour
valider des données

• JavaScript peut être intégré directement


dans le code HTML soit être séparé dans un
fichier à part
Les scripts
F-ichier HT0tL

<bead>
<81c1e>z’onc€1ons ea javascz1p€</€1t1e>
Les scripts LIFE-WEAVE
2016-10-31 17:03:21
--------------------------------------------
<scx1pt> sxc=•:EoacrC1oas. js- </scx1pt> Ligne qui permet de lier ie c ier au c ier ava en
EXO à faire
</bead>

detester_oavigateur( ); Fonction pour détecter Ie


afAcher_double 6); navigateur Fonction qui fait appel
â une boucle

<fozzi>
• votre no t
<inpo£ type--£ext• no=-nm• />
<inpaV Type-•bucYon• value-•on-
onckicE-•re£nrn vak1der_chanp(n nj • />
</for > Fonction pour valider les champs obligatoires d’un formulaire.
r1 ody> La function vaIider_champ est appelée suite â I’évenement
onclick, c’est-â-dire â chaque fois que I’utiIisateur clique sur
Fichier 3avaScript s functions.js » Ie bouton OK
:Eancr 1oa detocLez_nae1gat:suzt ) {
eaz bzoasez=oae1gatox.appBaae; Pour détecter Ie navigateur, nous faisons simplement appel
dent.write( -Browser not -+ browser ) ; â la fonction navigator.appName fournie dans JavaScript

£nn‹rtion affieher_doubLe t k1n1£e) J


fox t1 = 1 ; i < kln£te ; 1++i La boucle for (comme les autres structures de contréle while,
d nc.write( •Z e doubke de -+ i +- if, switch) est utilisée presque de la méme maniére que les
est m •+ i • 2); autres langages de programmabon

:£nnction vaZidor_chz•pt champ j


ix t champ.vakue=-nuts | ] chs.vaLue-• - I ( Cette function est appelée suite â I’événement onclik. On
alert ( -Z e no est obkâga£o re• ) ; teste d*abord ie contenu du champ â vérifier. Dans notre cas,
recurn fakse; } ie champ ’nom* est passé en paramétre. S1I est vide ou nul,
okse { nous alertons I’utilisateur et retoumons une valeur booléenne
alert ( •votre no est : •+ chs.value ; fausse
return crue ; }
Les scripts
Libraires - JQuery
• est une bibliothèque JavaScript rapide, légère et riche en
fonctionnalités
• permet de parcourir le document HTML, le manipuler, gérer les
événements et l'animation
• exploitable par API
• fonctionne sur une multitude de navigateurs

4/27/14 37
<!doctype html>
<html> <head> L’utilisation de la bibliothèque
<title>jQuery To do Example</title> JQuery
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> Lier le fichier HTML au Script
<script type="text/javascript" src ="todo.js"></script> Jquery
<link rel="stylesheet" href="todo.css" >
</head> <body>
<h2>Todo</h2>
<div class="enter_todo"> Formulaire Contenant le bouton et
<form id="todo_form" action="" method="POST"> la zone de Texte
<input type="text" size="55" id="todo_description" Identifier la zone de texte avec un
name="todo_description"/> id
<input type="submit" id="add_todo" value="Add"/>
</form> </div> Identifier le bouton avec un id
<div class="todo_list"> </div>
</body> </html> La zone d’insertion identifie avec le
nom de la classe

$ _
(document). l
ready( func i
tion() { s
$ t
('#add_to '
do').clic )
k( functi .
on() { p
var r
todoDes e
criptio p
n = $ e
('#todo n
_descri d
ption') (
.val(); '
$ <
('.todo d
iv class="todo">' Répondre au click
+ '<div>' du bouton
+ '<input add_todo à l’aide
type="checkbox" d’une fonction
class="check_todo » Récupération du
name="check_todo"/> texte de la zone de
’ + '</div>'
texte
+ '<div todo_description
class="todo_description">'
+ todoDescription +
La fonction insert
'</div>’+ '</div>');
dans le document
$('#todo_form')[0].reset();
dans la zone
$
todo_list un div
('.check_todo').unbind('click
'); pour le checkbox
$ identifié par une
('.check_todo') classe
.click( functio
n() { var todo
= $
(this).parent()
.parent(); La fonction
todo.toggleClas permettant de
changer la classe
s('checked');
de la div de
});
check_todo à
return false; });
checked
});
Libraires - angularJS
• est une API pour le développement d'applications web clientes
• extensible et fonctionne avec d'autres bibliothèques

4/27/14 39
<!doctype html> $scope.todos = [];
<html ng-app>
<head> <title>angularjs To do Example</title>
<script type="text/javascript" src="https://
ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></
script>
<script type="text/javascript" src ="todoAJ.js"></script>
<link rel="stylesheet" href="todoAJ.css">
</head> <body>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add »>
</form>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li> </ul> </div>
</body> </html>
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '’; };
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count; };
$scope.archive = function()
{ var oldTodos =
$scope.todos;
L’utilisation de la bibliothèque AngularJS Lier le fichier HTML au Script

AngularJS

Appelle de la méthode remaining() et l’utilisation du variable todos


Appelle de la méthode archive()
Le formulaire avec l’appelle de la méthode addTodo()
La zone de texte identifie par le nom todoText

le bouton de soumission appelant la méthode addTodo

La zone d’insertion identifie avec le nom de la classe

La déclaration du variable todos avec l’attribut text et l’attribut done

La définition de la fonction addTodo()

La définition de la fonction remaining()

Compter le nombre de todo cheked

La définition de la fonction archive()


Libraires - Ajax
• Asynchronous JavaScript and XML :
– permet de construire des applications Web et des sites web dynamiques
interactifs sur le poste client en se servant de différentes technologies
– combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin
d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches

4/27/14 41
HTML 5 LIFE-WEAVE
2016-10-31 17:03:44
--------------------------------------------
à faire

• Nouvelle restructuration des pages web

 Nouveaux éléments
• Section, article, header, footer, nav, figure, audio, video, canvas, …

 Nouveaux attributs
• Exemple : Pour l’ancienne balise <a>
– media : permet de spécifier pour quel media ou device il est optimisé

 Nouvelles APIs
• 8 nouvelles APIs pour la création des applications web
– Pour dessin 2D, pour vidéos, pour les applications hors-lignes, pour édition,
pour drag and drop, permet l'accès à l'historique, etc.

4/27/14 42
<tItlc>titre du zite<ftitlc>
<link rct..................red
‹link rci .rel
< /head>
<body>
<hcadez >
rule
<li><a .rcl >menu
<li><a .rcl l</a></lix
>menu
Z</a><fli>
</ul>
< /nav>
< /hcadez>
<div>
<articlc >
de mon article<fhl>
<p>texte de mon article<fp>
<scction>

<figurc> < /body>


<a :.LCl < /h£zt1>
<ffigurc>
</sections
</articles
<articlc> un autre article
</articles
</div»
<Iootcr>

<li><a .rcl >Iooter


Olivia :•rel l</a><f
< / u1> li>
< /nav> >footer
< L ooLcz >
>< / a>
Exemple : HTML 5 Video & Canvas

4/27/14 44
Exemple : HTML 5 Video & Canvas
Autres éléments à étudier
• Plus
– http://www.w3schools.com/
– http://www.w3.org/MarkUp/Guide/
– http://www.htmlhelp.com/
La suite
Exercice
• Formulaire
– css et scripts dans fichiers séparés
– La majorité des composants HTML
– Bouton de soumission (test de GET et POST)
– Voir requête HTTP dans browser