Programmation Web Avancée Cours 1researchers.lille.inria.fr/~yabouzid/cours1.pdf · Programmation...

Programmation Web AvanceacuteeCours 1

Yacine Bouzidi

yacinebouzidiinriafr

IG2I Centrale Lille

Objectif du cours

bull Initiation agrave la programmation web cocircteacute client

bull Conception de sites web efficaces

bull Acquisition de bonnes pratiques + culture du web

bull Conception drsquoapplications internet riches

bull Compleacutementaire agrave lrsquoUE application web cocircteacute serveur

Yacine Bouzidi Cours Seacuteance 1

Organisation

Enseignement

bull Deux heures de cours par semaine

bull Deux heures de TP par semaine

Le cours preacutesente diffeacuterents concepts dans un cadre geacuteneacuteral les TPspermettent une application plus ou moins directe

Evaluation

bull Rendu de code agrave chaque TP

bull Tp noteacute (2h)

bull Projet en groupe


Plan de la seacuteance

1 Geacuteneacuteraliteacutes sur le web

2 Rappels sur le langage HTML

3 Rappels sur le langage CSS

4 Javascript survol du langage et syntaxe

5 Javascript interaction avec le navigateur


Overview







Le Web en quelques mots

bull (au commencement) Protocole drsquoeacutechange de documents (les pages Web)

bull Le format de fichier est HTML (on va revenir dessus) speacutecifieacute par le W3C

bull Les fichiers sont stockeacutes sur des serveurs Web

bull Des clients (les navigateurs Web) se connectent au serveur en utilisant leprotocole HTTP (protocole drsquoapplication au dessus de TCPIP)

bull Les ressources sont identifieacutees par des URLs (des chaicircnes de caractegraveresau format protomachineportcheminverslaressource)

bull Les documents HTML contiennent des liens hypertexte qui permettent denaviguer de pages en pages via des URLs Les ressources drsquoune page(images scripts feuilles de style ) sont aussi deacutenoteacutees par des URLs

bull Le navigateur Web reacutecupegravere les ressources et assure le rendu (souventgraphique) de la page


Comment ccedila marche


Programmation web clientserveur

bull Cocircteacute serveur

Execution reacutealiseacutee sur le serveur (PHP Servlet)Resultat de lrsquoexeacutecution page HTML envoyeacutee par le serveur aunavigateur

bull Cocircteacute client

Execution reacutealiseacutee sur le clientNavigateur capable de realiser lrsquoexeacutecutionTransfert du code EMBARQUEacuteS dans la page HTML depuis leserveur vers le client (HTML-embedded scripting)Exemples Scripts Javascript Applets Java ActiveX Ajax


Exemple


Overview







HTMLbull HyperText Markup Language langage de mise en forme dedocuments hypertextes (texte + liens vers drsquoautres documents)Deacuteveloppeacute au CERN en 1989 par Tim Berners-Lee

bull 1991 premier navigateur en mode texte

bull 1993 premier navigateur graphique (mosaic) deacuteveloppeacute au NCSA(National Center for Supercomputing Applications)


Document HTML

bull Est un document semi-structureacute

bull Dont la structure est donneacutee par des balises

Exemple Rendu par deacutefautUn texte ltbgten grasltbgt Un texte en gras

lta href=httpwwwig2ifrgtUn lienltagt Un lien

ltul gtltligtPoint 1ltligtltligtPoint 2ltligt

ltulgt

bull Point 1bull Point 2

bull On dit que lttotogt est une balise ouvrante et lttotogt une balisefermante On peut eacutecrire lttotogt comme raccourci pour lttotogtlttotogt


Un peu drsquohistoire

1973 GML Generalised Markup Language deacuteveloppeacute chez IBMIntroduction de la notion de balise

1980 SGML Standardised GML adopteacute par lrsquoISO

1989 HTML baseacute sur SGML Plusieurs entreprises (microsoftnetscape )interpregravetent le standard de maniegravere diffeacuterente

1996 XML eXtensible Markup Language norme pour les documentssemistructureacutes (SGML simplifieacute)

2000 XHTML version de HTML suivant les conventions XML

2008 Premiegravere proposition pour le nouveau standard HTML5

2014 Standardisation de HTML5


XHTML vs HTML

bull XHTML version laquo XML raquo de HTML Principales diffeacuterences

Les balises sont bien parentheacuteseacutees (ltagt ltcgt ltcgt ltbgt est interdit)

Les balises sont en minuscules

bull Les avantages sont les suivants

HTML autorise les meacutelanges majusculeminuscule de ne pas fermercertaines balise Les navigateurs corrigent ces erreurs de maniegraveresdiffeacuterentes

Le document est structureacute comme un programme informatique (lesbalises ouvrantesfermantes correspondent agrave et ) Plus simple agravedeacutebugger


Rocircle de XHTML

bull Seacuteparer la structure du document de son rendu La structure donne uneseacutemantique au document

Ceci est un titre

Ceci est un paragraphe

Ceci est un ensemble de caractegraveres importants

bull Cela permet au navigateur drsquoassurer un rendu en fonction de laseacutemantique Il existe diffeacuterents types de rendus

Graphique interactif (Chrome Firefox Internet Explorer )

Texte interactif (Lynx navigateur en mode texte)

Graphique statique (par ex sur livre eacutelectronique)

Graphique pour petit eacutecran (terminal mobile)


Exemple de document


Structure drsquoun document XHTML

Pour ecirctre valide un document XHTML contient au moins les balises suivantes

bull Une balise lthtmlgt qui est la racine (elle englobe toutes les autres balises)La balise html contient deux balises filles head et body

bull La balise ltheadgt repreacutesente lrsquoen-tecircte du document Elle peut contenirdiverses informations (feuilles de styles titre encodage de caractegraveres )La seule balise obligatoire dans head est le titre (lttitlegt) Crsquoest le texte quiest afficheacute dans la barre de fenecirctre du navigateur ou dans lrsquoonglet

bull La balise ltbodygt repreacutesente le contenu de la page On y trouve diversesbalises (ltdivgt ltpgt lttablegt ) qui formatent le contenu de la page


Titres

bull Les balises lth1gt lth2gt lth3gt lth4gt lth5gt lth6gt permettent de creacuteer destitres de section sous-section sous-sous-section

bull Six niveaux hieacuterarchiques sont possibles


ParagraphesDes paragraphes de textes sont introduits avec les balises ltpgt Par deacutefautchaque paragraphe implique un retour agrave la ligne

Remarque par deacutefaut les espaces retour agrave la ligne sont ignoreacutes et letexte est reformateacute pour remplir la largeur de la page


Mise en valeur du texte

bull Les balises ltemgt (emphasis important) ltstronggt (tregraves important)ltmarkgt (visible pertinent) et bien drsquoautres permettent de mettre en valeurdu texte


Liens hyper-textOn peut faire reacutefeacuterence agrave une autre ressource en utilisant un lien hyper-texte(balise ltagt et son attribut href) La cible du lien peut ecirctre absolue ourelative Si lrsquoURL est relative le chemin est substitueacute agrave la derniegraverecomposante de lrsquoURL de la page courante Si lrsquoURL commence par un ellereacutefeacuterence lrsquoattribut id drsquoun eacuteleacutement de la page


Liste

On peut creacuteer des listes eacutenumeacutereacutees (avec ltolgt ordered list) ou noneacutenumeacutereacutees (avec ltulgt unordered list) Chaque ligne est limiteacutee par unebalise ltligt (list item)


Tableaux

On peut formater des tables en utilisant

bull La balise lttablegt pour deacutelimiter la table

bull La balise lttrgt pour deacutelimiter une ligne de la table

bull La balise ltthgt pour deacutelimiter une tecircte de colonne

bull La balise lttdgt pour deacutelimiter une case

bull Lrsquoattribut colspan permet de fusionner des colones


Remarques geacuteneacuterales

bull De nombreuses autres balises existent + de nouvelles avec HTML 5

bull On nrsquoa normalement pas le droit de mettre nrsquoimporte quel eacuteleacutementnrsquoimporte ougrave (ie pas de ltligt tout seul)

bull Il existe une speacutecification preacutecise de HTML 5 (plusieurs dizaines de pagesuniquement pour les balises)

bull Il existe aussi des validateurs il faut les utiliser le plus possible

bull De maniegravere geacuteneacuterale les espaces sont ignoreacutes on prendra donc bien soinde les utiliser judicieusement pour rendre le code de la page lisible

bull Tous les eacuteleacutements ont un style (moche) par deacutefaut On peut modifier cestyle gracircce agrave des proprieacuteteacutes CSS


Overview







Cascading Style Sheets (CSS)

CSS Langage permettant de deacutecrire le style graphique drsquoune pageHTML

On peut appliquer un style CSS

bull Agrave un eacuteleacutement en utilisant lrsquoattribut style

bull Agrave une page en utilisant lrsquoeacuteleacutement ltstylegtltstylegt danslrsquoen-tecircte du document (dans la balise ltheadgtltheadgt)

bull Agrave un ensemble de pages en reacutefeacuterenccedilant un fichier de style danschacune des pages


Lrsquoattribut style

lta href=httpwwwIG2Ifr style=colorredgtUnlienltagt

Apperccedilu

Un lien

Inconveacutenients

bull Il faut copier lrsquoattribut style pour tous les liens de la page

bull Modification de tous les eacuteleacutements difficiles


Lrsquoeacutelement style

lthtmlgtltheadgt

lttitlegtlttitlegtltstylegta color red ltstylegt

ltheadgtltbodygt

lta href=gtLien 1ltagt lta href=gtLien2ltagt

ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2

Inconveacutenient local agrave une page


Fichier css seacutepareacute

Fichier stylecss

a color red

Fichier testhtml

lthtmlgtltheadgtltlink href=stylecss type=textcss

rel=stylesheet gtltheadgt

lthtmlgt

Modifications amp deacuteploiement aiseacutes


SyntaxeUne proprieacuteteacute CSS est deacutefinie en utilisant la syntaxe

nom_prop val_prop

Si on utilise lrsquoattribut style drsquoun eacuteleacutement

lta href=style=colorredborder-stylesolidborder1ptgtLien1ltagt

Si on utilise un fichier css ou une feuille de style

a color redborder-style solidborder 1pt

h1 Le style des titres de niveau 1 text-decoration underlinecolor green


Voila pour le rappel

Pour creuser plus en deacutetails le HTML et le CSS quelques pointeurs

bull Speacutecification W3C pour HTML httpwwww3orgTRhtml5

bull Speacutecification W3C pour CSS httpwwww3orgStyleCSSspecsenhtml

bull Le site de tutoriels W3Schools httpwwww3schoolscom

bull Le cours HTML5 amp CSS3 httpopenclassroomscom

bull Wysiwyg en ligne httpswwwcodevolvecom


Overview







Web dynamique

bull Le modegravele du Web preacutesenteacutee preacutecedemment est statique Les documentssont stockeacutes sous forme de fichiers physiques sur le disque dur drsquoun serveur

bull Tregraves tocirct on a souhaiteacute geacuteneacuterer dynamiquement le contenu drsquoune page

bull 1993 invention des scripts CGI qui permettent au serveur de reacutecupeacuterer lesparamegravetres drsquoune requecircte HTTP et de geacuteneacuterer du HTML en reacuteponse

bull La programmation Web cocircteacute serveur eacutevolue ensuite (apparition de PHP en1994 puis possibiliteacute ensuite de programmer le cocircteacute serveur dans deslangages plus robustes comme Java )

bull Un problegraveme subsiste le manque drsquointeractiviteacute En effet on est contraintpar le modegravele formulaire HTML envoi au serveur calcul de la reacuteponse retour auclient rechargement de page Problegraveme drsquointeractiviteacute (latence reacuteseaurendu graphique drsquoune nouvelle page )


Web dynamique cocircteacute client

bull Avec lrsquoarriveacutee de Java (1995) la notion drsquoApplet fait son apparition Ils sont(pour lrsquoeacutepoque) une maniegravere portable drsquoexeacutecuter du code cocircteacute client

bull Problegraveme Java est trop lour agrave lrsquoeacutepoque (crsquoest un vrai langage il fait peuraux creacuteateurs de site les performances sont meacutediocres )

bull 1995 Brendan Eich (Netscape) creacutee Javascript en 10 jours Il emprunte dela syntaxe agrave JavaC et Netscape Navigator 20 embarque un interpreacuteteurJavascript en standard

bull Le langage est rapidement adopteacute mais chaque navigateur impleacutemente sapropre variante Le langage lui-mecircme est standardiseacute en 1996 (ECMAScriptstandardiseacute par lrsquoECMA)

bull Malheureusement lrsquoAPI (crsquoest agrave dire les fonctions permettant drsquoacceacuteder aunavigateur depuis Javascript) nrsquoest standardiseacutee que tardivement par le W3C(et tout nrsquoest pas encore supporteacute par tout le monde agrave ce jour


Javascript Execution

bull Cocircteacute client le code javascript est exeacutecuteacute par le navigateur Web Il doitdonc ecirctre reacutefeacuterenceacute dans une page HTML

Soit en utilisant lrsquoattribut src drsquoune balise script (externe)

Soit en mettant le code directement dans une balise script (interne)

bull Cocircteacute serveur on peut maintenant utiliser Javascript comme un langagegeacuteneacuteraliste gracircce agrave lrsquointerpreacuteteur Nodejs


Description du langage

Javascript est un langage

bull Dynamique (tout est fait agrave lrsquoexeacutecution)

bull En particulier dynamiquement typeacute (donc pas typeacute)

bull Impeacuteratif (effets de bords boucles for notion drsquoinstruction )

bull Fonctionnel (les fonctions sont des objets de premiegravere classe que lrsquoon vamanipuler agrave haute dose)

bull Objet (mais sans notion de classe ce qui rend la chose amusante)

bull Interpreacuteteacute avec une compilation agrave la voleacutee (JIT) Les navigateurs Webmoderne ont des performances incroyables (possibiliteacute de faire des jeux 3Dpar exemple)


Environnement de deacuteveloppement

bull Pour les premiers cours on utilisera le navigateur ChromeTM

bull Il est recommendeacute drsquoutiliser le mecircme navigateur pour srsquoabstraire dans unpremier temps des problegravemes de compatibiliteacute

bull On peut utiliser un eacutediteur de texte simple (Eclipse est a proscrire lesupport Javascript est notoirement mauvais)

bull On utilisera la console de deacutebuggage Javascript de Chrome (Ctrl-Shift-J)


Number

Il nrsquoy a pas de type entier uniquement des numbers qui sont flottantsIEEE-754 double preacutecision (64 bits 53 bits pour la mantisse 11 bits pourlrsquoexposant 1 bit de signe)

Notation deacutecimale entiegravere 10 3444minus25 42

Notation scientifique 13 099 0034e102minus23132313E minus 23

Notation octale 0755minus01234567

Notation hexadeacutecimale 0x12bminus0xb00b5 0xd34db33f

Le standard garanti que tous les entiers 32bits sont repreacutesentatblesexactement (sans arrondi) On peut eacutecrire des entiers plus grands que231 minus 1 mais au bout drsquoun moment on a une perte de preacutecision

Opeacuterateurs arithmeacutetiques

minus Moins unaire

+minus lowast addition soustraction produit modulo

Division (flottante)


Booleacuteens

truefalse vraifaux

Opeacuterateurs logiques

neacutegation (unaire)

ampamp || laquo et raquo logique laquo ou raquo logique


Variables affectations

bull Un nom de variable commence toujours par une lettre (majuscule ouminuscule) $ ou _ et se poursuit par un de ces caractegraveres ou un chiffre

bull On utilise le mot cleacute var

Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar

bull Attention on peut deacutefinir une variable sans lrsquoavoir deacuteclareacutee et ccedila marchemais ccedila ne fait pas ce que lrsquoon pense


Chaicircne de caractegraveres (string)

Encodeacutees en UTF-16 (ou UCS-2) deacutelimiteacutees par des laquo rsquo raquo ou laquo raquo

Opeacuterations sur les chaicircnes

foo[10] accegraves au 11 egraveme caractegravere

pas de mise agrave jour les chaicircnes sont immuables

+ concateacutenation

slength longueur

sconcat(23) concateacutenation (bis)

Un grand nombre de meacutethodes sont disponible on les verra prochainement(expressions reacuteguliegraveres recherche remplacement )


Comparaisons

Opeacuterateurs de comparaisons

Opeacuterateur Description

$a == $b Eacutegal apregraves conversion de type

$a = $b Diffeacuterent apregraves conversion de type

$a === $b Eacutegal et de mecircme type

$a == $b Diffeacuterent ou de type diffeacuterent

$a lt $b Strictement plus petit apregraves conversion de type

$a gt $b Strictement plus grand apregraves conversion de type

$a lt= $b Plus petit apregraves conversion de type

$a gt= $b Plus grand apregraves conversion de type


Objet

La structure de donneacutee de base est lrsquoobjet

Un objet vide

x 1 y 2 Un objet avec deux champs x et y

ox Accegraves agrave un champ

o[rsquoxrsquo] Syntaxe alternative

oz = 3 rajoute le champ z agrave lrsquoobjet o

En javascript tout est objet

123concat(456) renvoie la chaicircne 123456

314toString() renvoie la chaicircne 314


Instructions

Comme en CC++Java les expressions sont aussi desinstructions

x = 3425 la valeur est jeteacuteef(1999)

Javascript essaye drsquoinseacuterer automatiquement des laquo raquo Pour ce courson ne lui fait pas confiance et on termine toutes les instructions saufles blocs par un laquo raquo


Conditionnelle

if ( c ) cas then

else cas else

Les parenthegraveses autour de la condition c sont obligatoires Labranche else est optionnelle Les accolades sont optionnellespour les blocs drsquoune seule instruction


Boucles

while ( c ) corps de la boucle while

do corps de la boucle do

while ( c )

for(init test incr) corps de la boucle for

break sort de la boucle immeacutediatement

continue reprend agrave lrsquoiteacuteration suivante


Fonctions

On peut deacutefinir des fonctions globales

function f(x1 xn) instructions

On utilise le mot cleacute return pour renvoyer un reacutesultat (ou quitter la fonctionsans rien renvoyer)

On peut aussi creacuteer des fonctions laquo inline raquo

var z = 1 + (function (x y ) return x y )(23) x contient 7

On dispose donc de la syntaxe alternative pour la deacuteclaration de fonction

var f = function (z) return x+1


Fonctions suite

En premiegravere approximation laquo les meacutethodes raquo ne sont que desfonctions stockeacutees dans le champs drsquoun objet

var obj = x 1 y 1 objetobjmove = function (i j) objx += iobjy += j

objmove(23)

On verra que crsquoest beaucoup plus subtil que ccedila


Overview







Quelque fonctionaliteacutes de base

On ne fait ici qursquoun tregraves bref survol des fonctionaliteacutes suffisammentpour faire le TP 1 On reviendra en deacutetails sur tous ces concepts


Objet Global document

Lrsquoobjet global document repreacutesente le document HTML Il impleacutementelrsquointerface DOM et on peut donc le parcourir comme un arbre (proprieacuteteacutesfirstChild parent nextSibling )


Meacutethodes document

La meacutethode documentgetElementById(foo) permet dereacutecupeacuterer un objet repreacutesentant lrsquoeacuteleacutement HTML de la page ayantlrsquoattribut id valant foo (null si cet eacuteleacutement nrsquoexiste pas)

La meacutethode documentgetElementsByTagName(div) permetde reacutecupeacuterer sous la forme drsquoun tableau tout les elements de lafamille ltdivgt

bull Le reacutesultat de ces meacutethodes sont des eacutelements HTML Elementqui sont eacutegalement des objets Tous ces objets sont de type Node(heacuteritage)


Traitement des eacutelements HTML

Les attributs

bull Meacutethodes getAttribute() et setAttribute() de lrsquoobjetElement permettant respectivement de reacutecupeacuterer et drsquoeacutediter unattribut

bull Pour les eacuteleacutements courants il suffit drsquoune Elementattribut

Le contenu

bull La meacutethode innerHTML permet de reacutecupeacuterer le code HTML drsquounnoeud fils drsquoun eacuteleacutement sous forme de texte

bull Les meacutethodes innerText textContent reacutecupegravere uniquementle texte


Reacutesumeacute

bull DOM et Javascript permettent drsquoacceacuteder au eacuteleacutements HTMLpreacutesents dans un document de les modifier drsquointeragir avec

bull Les eacutelement HTML sont structureacute comme un arbre geacuteneacutealogique

bull Diffeacuterentes meacutethodes pour acceacutedermodifier les eacuteleacutements getElementById(foo) getAttribute() innerHTML


Geacuteneacuteraliteacutes sur le web

Rappels sur le langage HTML

Rappels sur le langage CSS

Javascript survol du langage et syntaxe

Javascript interaction avec le navigateur

Objectif du cours

bull Initiation agrave la programmation web cocircteacute client

bull Conception de sites web efficaces

bull Acquisition de bonnes pratiques + culture du web

bull Conception drsquoapplications internet riches

bull Compleacutementaire agrave lrsquoUE application web cocircteacute serveur


Organisation

Enseignement




Evaluation












Overview
























Exemple


Overview











Document HTML






ltulgt













XHTML vs HTML








Rocircle de XHTML


Ceci est un titre









Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Organisation

Enseignement




Evaluation












Overview
























Exemple


Overview











Document HTML






ltulgt













XHTML vs HTML








Rocircle de XHTML


Ceci est un titre









Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute

















Overview
























Exemple


Overview











Document HTML






ltulgt













XHTML vs HTML








Rocircle de XHTML


Ceci est un titre









Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute



























Exemple


Overview











Document HTML






ltulgt













XHTML vs HTML








Rocircle de XHTML


Ceci est un titre









Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Overview











Document HTML






ltulgt













XHTML vs HTML








Rocircle de XHTML


Ceci est un titre









Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute














Document HTML






ltulgt













XHTML vs HTML








Rocircle de XHTML


Ceci est un titre









Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute



















XHTML vs HTML








Rocircle de XHTML


Ceci est un titre









Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Rocircle de XHTML


Ceci est un titre









Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Exemple de document








Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute
















Titres












Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute


















Liste



Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Tableaux
















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute


















Overview
















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute



















Apperccedilu

Un lien

Inconveacutenients





lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute











lthtmlgtltheadgt


ltheadgtltbodygt


ltbodygtlthtmlgt

Apperccedilu

Lien 1 Lien 2




Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute











Fichier stylecss

a color red

Fichier testhtml



lthtmlgt




nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute











nom_prop val_prop















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute


















Overview







Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Web dynamique



































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute






































Number








minus Moins unaire




Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Booleacuteens

truefalse vraifaux








Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute













Exemples

var $foo = 123

var bar = 1323e99

var _toto = bar









slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute
















slength longueur




Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Comparaisons












Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Objet


Un objet vide









Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Instructions





Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Conditionnelle

if ( c ) cas then

else cas else



Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Boucles



while ( c )





Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Fonctions









Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Fonctions suite



objmove(23)



Overview



















Les attributs



Le contenu




Reacutesumeacute










Overview



















Les attributs



Le contenu




Reacutesumeacute






















Les attributs



Le contenu




Reacutesumeacute










Reacutesumeacute










Programmation Web Avancée Cours 1researchers.lille.inria.fr/~yabouzid/cours1.pdf · Programmation...

Documents

Transcript of Programmation Web Avancée Cours 1researchers.lille.inria.fr/~yabouzid/cours1.pdf · Programmation...