Cours Web-2022

Cours Développement web
A. Ibriz
1ère Année Génie Informatique
Objectifs du cours
Technologies
Client Web : Chrome
1 Requête http
Serveur Web
www.usmba.ac.ma
3 Réponse http
Exécution sur le client Exécution sur le serveur

(HTML, CSS, JavaScript, ...) (ASP, PHP, JSP,JS ...)
4 2
Le prologue:
PAGES WEBS STATIQUES &
DYNAMIQUES
Outils:
Langages:
HTML, XHTML, DHTML, PHP, ASP, CGI,XML, feuille de style,….
Serveurs:
Apache, IIS
Environnements:
DreamWeaver, 1stpage, …
llah
b de è s
n A eF
Be ogi
l
ed n o
m
m ch
a Te 09
L e s
M
h
o de 20
e ©
is di ieur RIZ M si t
té pér A, IB T t e
ve
si
r su H e d
i
Un Écol
e
o n
t i b
e p e
n c W
Co
Historique
Le langage HTML tire son origine du langage SGML (Standard Generalized
Markup Language). Il s'agit d'un type particulier d'annotations destiné au
WWW et qui correspond à une collection de styles reconnaissables par les
navigateurs.
Un navigateur (en anglais "browser") est donc un logiciel qui interprète à
l'écran les commandes HTML contenues dans un document accessible sur
le WWW.
HTML & HTTP - un standard et un protocole simples
La simplicité explique en partie le succès du WWW
Un langage en évolution
Le langage HTML est utilisé sur le WWW depuis 1990. La version
actuellement en vigueur est HTML 5.0
Versions en vigueur
HTML 2.O (rare)
HTML 3.0 (assez souvent)
HTML 3.2 (souvent)
HTML 4.0 (fréquent)
HTML 5.0 (dernière version)
HTML : définition et principes
généraux
HTML (Hypertext Markup Language)
langage de balisage hypertexte
inventé par Tim Berners Lee au CERN
principe : tous les documents ont des éléments en commun DONC il est possible de les
étiqueter, de les baliser.
permet de
publier des documents on-line
retrouver de l'information on-line via liens
opérer des transactions entre services
inclure du multimedia et d'autres applications dans les documents
se compose d'une collection de styles (indiqués par des balises) qui définissent les divers
composants d'un doc. W3
décrit le structure et le contenu d'un document ET NON le format et l'apparence d'une
page
Créer des documents
! depuis un éditeur de texte ou un logiciel

spécialisé.
! HTML utilise jeu de caractères UNICODE 2.1
• norme ISO 10646
• 2 octets par caractère
• UCS (Universal Character Set)
Pages HTML
Il faut d'abord spécifier qu'un document contenant des annotations en HTML n'est rien de plus
qu'un fichier texte.
Il peut donc être reconnu sans problèmes de conversion d'un environnement à un autre. Une
page peut donc être lue et interprétée par n'importe quel navigateur sur n'importe quelle
plateforme.
Syntaxe du langage
Balises (ou "tag")
conteneur de texte => attribuent une fonction spécifique au segment encadré.
fonctionnent habituellement par paire (balise d'ouverture et de fermeture)
Attributs
précisent la fonction ou le mode d'application des balises.
sont séparés par un espace
sont mentionnés uniquement dans la balise d'ouverture
leur ordre n'a pas d'importance
peuvent avoir une valeur (nom, unité de mesure ...) inscrite entre guillemets
Syntaxe
<Nom de la balise de début Attribut1 = "valeur1" Attribut2 = "valeur2" ... Attribut
n = "valeur n"> texte mis en forme </Nom de la balise de fin>
Le document minimal
<HTML>
<HEAD>
informations générales sur le document
</HEAD>
<BODY>
texte du document + commandes de formatage
</BODY>
</HTML>
Remarque
balises ne sont pas sensibles à la casse
<BODY> = <BodY> = <body>
par convention, sont notées en majuscules.
Les balises fondamentales
Titres
<TITLE> ... </TITLE>
utilisé comme bookmark
placé dans l'en-tête <HEAD> du document
Intertitres
<H1> .... </H1> , <H2> ... </H2> , ....................... <H6> ... </H6>
Paragraphes
<P>
Remarques
penser à indenter le code source pour préserver la lisibilité
ne pas croiser les balises
<H1> cours sur les <B> plantes </H1></B>
==> code non-interprétable
<H1> cours sur les <B> plantes </B></H1>
==> code correct
un exemple ...
Code HTML saisi ...

<HTML>
<HEAD>
<TITLE> exemple de page html </TITLE>
</HEAD>
<BODY>
<H1> première partie </H1>
Ce document présente les fondamentaux <P> d'une création de page html
<H2> le document de base </H2>
</BODY>
</HTML>
Code HTML affiché ... (demo browser)
première partie
Ce document présente les fondamentaux
d'une création de page html
le document de base
Formatage du texte
<center> suivi de « Quelque chose de centré » suivi de </center>
donne:
Quelque chose de centré
<P> donne un changement de paragraphe
<br> donne un simple changement de ligne
Notez ici que les commandes <P> et <BR> n'ont pas à être
fermées. Vous pouvez utiliser plusieurs commandes <BR> ou
<P> répétitivement pour augmenter l'espacement.
<b></b>donne un texte en gras: texte en gras
<strong></strong>donne un texte en gras également: texte en
gras
<EM></EM> donne un texte en italique: texte en italique
<I></I> donne également un texte en italique: texte en italique
<CITE></CITE>donne aussi un texte en italique: texte en italique
<TT></TT>donne un texte formaté avec une fonte à espacement
constant (teletype): texte formaté avec une police à espacement
constant
Formatage du texte
Texte préformaté
Les annotations <pre></pre> obligent le navigateur à afficher un texte
préformaté. Le navigateur respecte alors les fins de ligne (retours de chariot).
Augmentation ou réduction de la taille des caractères
<FONT SIZE="+2"></FONT SIZE="+2"> donne un accroissement de la grosseur
affichée du texte de 2 unités
<FONT SIZE="+4 »></FONT SIZE="+4"> donne un accroissement de la grosseur
affichée du texte de 4 unités
<FONT SIZE="-2"></FONT SIZE="-2"> donne une réduction de la grosseur
affichée du texte de 2 unités.
Formatage du texte
La commande <BLOCKQUOTE></BLOCKQUOTE> permet d'emprisonner un

paragraphe telle une citation en alinéa
La commande <STRIKE></STRIKE> permet de rayer un texte
La commande <SUB></SUB> permet d'utiliser les indices dans des formules
comme dans l'exemple qui suit: H 2 O.
La commande <SUP></SUP> permet d'utiliser les exposants dans des formules
Plus
Caractères spéciaux dans HTML
Certains caractères ont une signification spécifique dans HTML.
Pour les utiliser comme tels dans une page, il faut utiliser les
commandes alternatives pour les afficher correctement à l'écran.
Ces commandes sont:
< pour: <
> pour: >
& pour: &
" pour: "
À PROPOS DES ACCENTS...
L'utilisation des caractères accentués sur
le WWW pose un certain nombre de problèmes
car il y a plusieurs façons de traiter
les caractères diacritiques.
Plus
<P></P> (inutile)Saut de paragraphe

<BR></BR> (inutile)Saut à la ligne
<HR></HR> (inutile)
<MARQUEE ></MARQUEE> text animé
Créer un lien ... vers un autre document
Un lien permet de définir
une région sensible au clic souris dans un document
l'endroit ou l'on va se retrouver après ce clic.
Trois étapes :
<A HREF = "nom du fichier" ou HREF = "url du document">
lien
</A>
Exemples :
Consultez mon <A HREF = "cvoli.html"> curriculum vitae </A>
Visitez le site de <A HREF = "http://www.cict.fr/urfist"> l'urfist </A>
lien
doc. A doc. B
Créer un lien ... vers une section
spécifique d'un autre document
Définir la cible
dans le document "cible"
<A NAME = "nom de la section"> section </A>
Créer son lien

dans le document "source"
<A HREF = "doc.B # nom de la section"> lien </A>
lien
cible
doc. A doc. B
Créer un lien ... vers une section
spécifique du doc. courant
lien
même procédé en supprimant le nom de fichier.
partie cible
document A
Autres liens
lien vers un serveur de news
<A HREF="news:comp.html.news"> ... </A>
pour que le lien soit valide, le visiteur doit être abonné au serveur de news
lien vers un fichier à télécharger
<A HREF="fichier.exe"> cliquez ici pour télécharger </A>
lien e-mail
<A HREF="mailto:adil@caramail.com">adresse_e_mail</A>
avec sujet
<A HREF="mailto:estf@caramail.com?subject=renseignement">adresse</A>
avec sujet et texte dans le corps du message
<A HREF="mailto:estf@caramail.com?subject=renseignement&BODY=votre
message">adresse_e_mail</A>
avec sujet, envoyé à 2 personnes
<A HREF="mailto:estf@caramail.com&cc=webmaster@estf.ma
&subject=renseignement">adresse_e_mail</A>
Types de liens
liens absolus
permet de localiser un fichier à partir du répertoire courant du noeud le plus
élevé de l'arborescence du disque dur.
commence toujours par une barre de fractionnement
ne sont pas "portables"
liens relatifs
pointe vers un fichier spécifique
ne prend en compte que le nom du fichier
ne devra pas être modifié si on déplace le fichier dans l'arborescence du disque
en bref ...
types de liens
internes (doc. renvoie à une de ses sections)
externes (doc. renvoie à un autre doc. ou à une section d'un autre doc.)
exécutables (fichiers en téléchargement, déclenchement d'animations ou de
programmes -plug-in)
IMPORTANT
on peut imbriquer une ancre dans une balise
<H1> <A HREF="texte.htm"> Chanson </A> </H1>
mais ne jamais faire l'inverse
<A HREF="texte.htm"> <H1>Chanson</H1> </A>
Les URL
utilisés pour
créer un lien vers une autre ressource
associer un programme externe à une page html (feuille de style, script, applet ...)
inclure une image ou un objet
créer une image réactive
envoyer un formulaire
créer des frames
spécifier des métadonnées
Définition
Uniform Ressource Locator
adresse physique d'un ensemble de données sur Internet
Les URL
regroupe diverses informations
type de ressource accessible (protocole d'accès)
adresse du serveur
localisation du fichier (détail de l'arborescence)
syntaxe
protocole :// nom de machine [: port] / nom de fichier [#ancre]/ ? liste de
paramètres
exemple
http://www.think.com:210/directory-of-servers?inria
quelques types de ressources ...
file://
ftp://
news:
Les URL
caractères spéciaux
lettre de l'alphabet (MAJ ou min)
chiffre de 0 à 9
$-_+.
Pour tout autre signe ...
caractère d'échappement (ISO LATIN 1)
http://.../.../.../html/liens absolus/exemple.html
pas reconnu
http://.../.../.../html/liens%20absolus/exemple.html
code correct
Les URL
URL absolus et relatifs

même principe que pour les liens
commande <BASE>
<BASE HREF="http://www.estf.ac.ma">
indique l'URL de référence qui sera utilisé pour compléter tous les URL
relatifs dans un document
si on a un lien du type
<A HREF = "docs/www.html" >
le browser ira chercher le doc. situé à l'adresse
http:// www.estf.ac.ma /docs/www.html
Les URL
URI (Uniform Ressource Identifier)
adressage de niveau supérieur
URL en sont un dérivé qui indique la localisation et le mode d'accès des
données
les autres types d'URI sont
les URNames : donnent un nom générique à la ressource
les URCaracteristics : définissent son URN, son URL et d'autres infos (titre,
version, auteur, format, conditions d'accès ...)
Les balises de liste
Listes
non ordonnées
<UL>
<LI> premier item
<LI>second item
</UL>
ordonnées
<OL> ... </OL>
de définition
<DL>
<DT> terme à définir
<DD> définition
<DT>
<DD>
</DL>
Les listes ... variantes typographiques
listes non-ordonnées
TYPE = "disc/circle/square"
PLAIN
SRC = "cercle.gif"
DINGBAT
WRAP = "horiz"
listes ordonnées
TYPE = "1/A/a/I/i"
START = "n"
listes de définition
COMPACT
Petit exercice ...
donner le code html du plan suivant

villes marocaines
1. Fès
a. Fès centre
b. Fès sud
c. Fès nord
2. Rabat
.centre ville .arrondissements .périphérie
3. Agadir
villes étrangères
1. new-york
2. londres
3. munich
<UL>
<LI> Villes marocaines
<OL>
<LI> Fès
<OL TYPE = "a">
<LI> fès centre
<LI> fès sud
<LI> fès nord
Correction </OL>
<LI> Rabat
<UL WRAP = "horiz">
<LI>centre ville
<LI>arrondissements
<LI>périphérie
</UL>
<LI> Agadir
</OL>
<LI> Villes étrangères
<OL>
<LI> New-York
<LI> Londres
<LI> Munich
</OL>
</UL>
Autres balises
texte préformatté
<PRE> ... </PRE>
citations
<BLOCKQUOTE> ... </BLOCKQUOTE>
<Q> ... </Q>
adresse
<ADRESS> ... </ADRESS>
cassure forcée de ligne
<BR>
ligne horizontale
<HR>
SIZE = "px"
WIDTH = "px" ou "%"
ALIGN = "feft/right/center"
NOSHADE
commentaires

Formattage de caractères
Style logique Style physique
DFN -B
EM -I
CITE -TT
CODE -U
KBD -S
SAMP - BIG
STRONG - SMALL
VAR - SUB
LANG - SUP
AU
Traitement des images
Balise <IMG> ... </IMG>
Attributs
SRC (indique l'emplacement du fichier image)
ALIGN = "top/middle/bottom"
ALT (propose un texte de remplacement à l'image)
Exemple
<IMG ALIGN=TOP SRC="image.gif" ALT="cheval au galop">
Habillages et mises en page possibles
alignement
ALIGN = "TOP/BOTTOM/LEFT/RIGHT/CENTER"
ALIGN = "texttop/absmiddle/middle/baselign/absbottom"
espacement
VSPACE = "px" (espace vertical entre image et texte défini en
pixels)
HSPACE = "px" (espace horizontal)
bordure
BORDER = "px"
Traitement des images
Recommandations :
penser au temps de chargement et d'affichage
ne jamais afficher d'images situées sur serveur extérieur
astuce : préciser attributs WIDTH et HEIGHT
possibilité de récupérer doc. sans images
demandez vous si une image est indispensable
offrez une alternative <IMG ALT ... >
pensez à leur destination
résolution écran : 72 dpi
résolution impression courante : 300 dpi
une bonne image vaut mieux qu'un long discours,
MAIS une bonne image est plus longue à charger qu'un long discours ...
Images mappées
Plusieurs méthodes :
CSIM (Client-Side IMage)
la plus utilisée car fait partie de la norme html 3.0
Les fichiers mappés sont inclus dans la page html
pas besoin de CGI sur un serveur pour les rendre opératoires.
CERN
NCSA
Images mappées
Premier temps :
Si Map dans le même fichier, alors :

<IMG SRC="image1.gif" USEMAP="#nom_du_map">
Si Map dans un autre fichier, alors :
<IMG SRC= "image1.gif"USEMAP= "fichier.html #nom_du_map">
Deuxième temps :
<MAP NAME="nom_de_map">
<AREA SHAPE=méthode COORDS="coordonnées" HREF="lien" ALT="commentaires"
TARGET="cible de frame">
</MAP>
Images mappées
définition des coordonnées pour :
un rectangle SHAPE=RECT COORDS="x, y, x1, y1"
x,y
x1,y1 un cercle SHAPE=CIRCLE COORDS="x,y,r"
r un polygone SHAPE=POLYGON COORDS="x,y,x1,y1..."

x,y
et sur Netscape seulement SHAPE=DEFAULT => ce qu'il faut faire si

on clique hors zone.
x1,y1
x,y
x2,y2
Images mappées : le principe ...
on choisit une image qui se prête au "jeu" ...
à chaque cube on
associe un fichier.htm
on délimite les coordonnées des

zones pour pouvoir "appeler" le
fichier html correspondant ...
Formulaires (1/4)
1 balise <FORM> ... </FORM>

2 attributs
METHOD
GET ou POST
indique le mode de transfert des
données
choisir POST
ACTION
définit la localisation du script
permettant d'exploiter le formulaire
<FORM METHOD="POST" ACTION="/cgi-
bin/inscript">
Formulaires (2/4)
3 classes d'éléments
Classe 1 : INPUT
TYPE="submit" =>création d'un bouton d'envoi
TYPE="reset" => création de bouton pour effacer la saisie
TYPE="checkbox" =>création menu avec plusieurs choix
<INPUT TYPE="checkbox" NAME="micro" VALUE="mac">mac<BR>
<INPUT TYPE="checkbox" NAME="micro" VALUE="pc">pc<BR>
<INPUT TYPE="checkbox" NAME="micro" VALUE="Unix">Unix<BR>
TYPE="radio" => création menu avec un seul choix

<INPUT TYPE="radio" NAME="media" VALUE="cd">cd-rom<BR>
<INPUT TYPE="radio" NAME="media" VALUE="dk">disquette<BR>
TYPE="file" => fichier attaché

TYPE="password" => caractères masqués
Formulaires (3/4)
3 classes d'éléments
classe 2 : SELECT => utilisé pour création de listes
menus déroulants
<SELECT NAME = "semaine" >
<OPTION> lundi
<OPTION> mardi
<OPTION SELECTED> mercredi
</SELECT>
listes à ascenceur
<SELECT NAME = "menu" SIZE = "6" MULTIPLE>
<OPTION> cict
....
</SELECT>
classe 3 : TEXTAREA
<TEXTAREA NAME = "commentaires" ROWS="10" COLS="5">
Entrez vos commentaires </TEXTAREA>
Formulaires (4/4)
2 attributs communs
NAME
VALUE
pour un champ texte : prédéfinit le contenu
pour un bouton
submit ou reset : indique texte du bouton
checkbox ou radio : indique valeur du bouton enfoncé
Tableaux
Intérêt :
pratique et ergonomique / palliatif des insuffisances de html
avant : <PRE>
Balises principales
<TABLE> </TABLE>
attribut BORDER = "px"
astuce <TABLE BORDER="0">
<CAPTION> titre du tableau </CAPTION>
attribut ALIGN = "top" (valeur par défaut) ou "bottom"
<TABLE SUMMARY="description"> sera interprété par synthétiseurs vocaux
ligne <TR> </TR>
en-tête <TH> </TH>
cellule <TD> </TD>
Tableaux
La description d'un tableau en HTML se fait ligne par ligne et pour chaque ligne, cellule par
cellule
colonnes calculées automatiquement en fonction du nombre de
cellules par ligne
Chaque cellule peut contenir n'importe quel élément HTML (image, texte, lien, applet, tableau
...)
TABLEAUX
Cellules vides
<TD></TD> ou <TD><BR><TD>
Affichage
ALIGN = "LEFT" "RIGHT" "CENTER" "JUSTIFY"
Alignement dans les cellules
<TD ALIGN = "left/right/center">
<TD VALIGN = "top/middle/bottom">
mêmes attributs dans <TR> vaudront pour toute la ligne
par défaut
en-têtes centrées horiz. et vert.
données centrées et alignées à gauche
left center right

align
top
middle valign
bottom
TABLEAUX
cellules fusionnées
une cellule sur plusieurs lignes ou colonnes
ROWSPAN
1 cellule sur hauteur de plusieurs lignes
valeur de l'attribut définit hauteur en ligne de la cellule
COLSPAN
1 cellule sur largeur de plusieurs colonnes
valeur de l'attribut définit largeur en colonne de la
cellule
cellule fusionnée
<TD COLSPAN="2">cellule fusionnée</TD>
TABLEAUX
épaisseur de quadrillage
CELLSPACING="px" (2 par défaut)
espacement des données
CELLPADDING="px" (1 par défaut)
TABLEAUX
groupement de lignes
THEAD, TFOOT, TBODY
groupement de colonnes
COLGROUP
ces groupements permettent :
d'appliquer des feuilles de style sans les répéter
d'éviter de ressaisir des données si le tableau est sur plusieurs pages
d'interroger et de faire des tris à la manière d'un tableur
TABLEAUX
bords et enrobages
bordures extérieures
frame = "void/above/below/hsides/vsides/lhs/rhs/box"
bordures intérieures (séparations entre lignes et colonnes)
rules = "none/groups/rows/cols/all"
Frames
Définition
l'écran est divisé en plusieurs zones
chaque zone est un document propre
intérêt : ergonomie accrue
Balises
<FRAMESET> remplace <BODY> pour le corps du document.
ROWS pour diviser en sous-zones horizontales
COLS pour diviser en sous-zones verticales
4 manières de spécifier valeur de ces zones
% hauteur/longueur de la sous zone en % de la zone "mère"
n hauteur/longueur de la sous zone en pixels
* indique au browser d'attribuer à la sous zone toute la place restante
x entier
Frames
<FRAME>
SRC indique url du doc. à afficher dans la zone
NAME permet de nommer la zone afin qu'elle puisse devenir la cible d'un lien
MARGINWIDTH
MARGINHEIGHT
SCROLLING = "yes/no/auto" indique si la zone doit posséder une barre de
défilement
NORESIZE empêche toute modification par l'utilisateur de la taille d'une zone
BORDER / BORDERCOLOR="#FFFFFF"
FRAMEBORDER = "0 ou 1"
<NOFRAMES>
indique texte de remplacement si le browser ne gère pas les frames
Frames
Création de liens utilisant ces frames

attribut TARGET
<A HREF="dossier.html" TARGET="zonedossier">voir le
dossier</A>
3 valeurs possibles
nom d'une frame existante
valeur ne correspondant à aucune frame
paramétrage
TARGET="_top" supprimera toutes les frames existantes et
affichera le document sur toute la surface du browser / permet
en pratique de quitter un système de frames
TARGET="_blank" le navigateur ouvre une nouvelle fenêtre /
cette fenêtre ne portera pas de nom et ne pourra pas être la
cible d'un lien.
TARGET="_self" le document sera chargé dans la même zone
que celle comprenant le lien hypertexte
TARGET="_parent"
Autres balises
Centrer du texte
ALIGN = "CENTER"
Taille de polices et couleurs de polices
<FONT FACE=" arial " SIZE = " 1 ... 7 " > texte </FONT>
<FONT COLOR = " #666666 "> texte </FONT>
<BASEFONT = 2>
Tabulations
<TAB INDENT = x >
Couleur du texte et des liens
TEXT
LINK
VLINK (visited link)
ALINK (active link)
remarques :
une seule couleur de texte et de lien par page écran
attention au contraste des couleurs
éviter de modifier la couleur des liens
Code hexadécimal des couleurs
Permet de retrouver nuances
1 couleur = mélange RVB (rouge, vert, bleu)
signe # + 3 sections de 2 lettres ou 2 chiffres
chaque section indique la saturation (FF) ou l ’absence (00) d ’une couleur
Comment trouver LA bonne couleur ?
Éditeurs HTML donnent l ’équivalence RVB à partir d ’une palette graphique
logiciels de retouche photo
Autres balises
! Fond d'écran
• avec une couleur <BODY BGCOLOR = "#666666">
– attention au contraste pour la lisibilité
• avec une image <BODY BACKGROUND = "image.gif">
– attention aux "jointures" et au temps de transmission
! Black = "#000000" Green = "#008000"

! Silver = "#C0C0C0" Lime = "#00FF00"
! Gray = "#808080" Olive = "#808000"
! White = "#FFFFFF" Yellow = "#FFFF00"
! Maroon = "#800000" Navy = "#000080"
! Red = "#FF0000" Blue = "#0000FF"
! Purple = "#800080" Teal = "#008080"
! Fuchsia = "#FF00FF" Aqua = "#00FFFF"
Travaux Pratiques HTML
Cours CSS
Chapitre 1: LES FONDATIONS DU CSS
28/02/2022 Ibriz
CSS : DEFINITION
CSS = Cascading Style Sheets
Créé en 1996
Fonction : mettre en forme le contenu en lui ajoutant des styles
Distinction entre contenu et présentation
● Contenu : dans le document HTML (sans table ni balises font)

● Présentation : dans un fichier à part (feuille de style)
● Uniformité : tout le site a naturellement la même présentation
● Changer de présentation = changer de feuille de style 65
28/02/2022 Ibriz
LES VERSIONS CSS
CSS 1.0 (1996):
CSS 2.0 (1998) et CSS 2.1 (2007)
CSS3
Introduisent de nouvelles fonctionnalités très attendues : insérer des vidéos, bordures arrondies, etc.
66
28/02/2022 Ibriz
OÙ ECRIRE LE CSS ?
3 possibilités :
Dans l’élément head du document HTML,
Dans la balise ouvrante d’un élément,
Dans un fichier CSS séparé.
Il est recommandé d’utiliser la dernière méthode.
Pour lier un fichier HTML avec un fichier CSS, on écrit :

<link rel=« stylesheet » href=« fichiercss.css »/>
67
28/02/2022 Ibriz
OÙ ECRIRE LE CSS ?
Dans l’élément head du document HTML : à éviter
68
28/02/2022 Ibriz
OÙ ECRIRE LE CSS ?
Dans la balise ouvrante d’un élément: Mauvaise
69
28/02/2022 Ibriz
OÙ ECRIRE LE CSS ?
Dans un fichier CSS séparé.
Il est recommandé d’utiliser la dernière méthode.
70
28/02/2022 Ibriz
SELECTEURS, PROPRIETES, VALEURS
Un sélecteur détermine à quel élément un style doit être appliqué.

Une propriété détermine le style qui va être appliqué à un élément.
Une valeur détermine le comportement d’une propriété.
28/02/2022 71
Ibriz
SELECTEURS, PROPRIETES, VALEURS
• Exemple:
sélecteur p{ valeurs
color: blue;
propriétés
font-size: 16px;
72
}
28/02/2022 Ibriz
LES COMMENTAIRES EN CSS
Les fichiers CSS sont très vite très longs : il est donc essentiel de les commenter proprement !
73
28/02/2022 Ibriz
LES SELECTEURS SIMPLES
On appellera sélecteurs simples les éléments HTML qui

ne possèdent pas d’attribut (ex : p).
Ces sélecteurs doivent être préférés autant que possible

car ils requièrent moins de code que des sélecteurs
plus complexes et le code s’exécute donc plus vite.
Limite : Comment appliquer un style différent à deux

paragraphes ?
28/02/2022 Ibriz
LES SELECTEURS SIMPLES
75
28/02/2022 Ibriz
CLASS & ID
Class et Id sont deux attributs HTML, créés pour pouvoir appliquer différents styles à des éléments
de même type.
Class permet également d’appliquer le même style à différents élément HTML (en leur appliquant la
même valeur pour l’attribut class).
Différence ? Id ne peut être utilisé que pour cibler un unique élément, au contraire de class.
76
28/02/2022 Ibriz
CLASS & ID
77
28/02/2022 Ibriz
Pourquoi les deux CLASS & ID ?
Un attribut id avec une valeur précise ne peut

être utilisé qu’une fois dans une page, au
contraire de class.
78
28/02/2022 Ibriz
DIV & SPAN
Div et Span sont deux élément HTML créés, entre autres, pour pouvoir appliquer un style à du
contenu n’ayant pas de balise.
Div et Span servent de containers mais ne possèdent aucune valeur sémantique.
On doit les utiliser seulement si cela est nécessaire.
Nous allons nous en servir pour entourer des blocs de code et ainsi pouvoir attribuer des styles particuliers
à ces blocs.
79
28/02/2022 Ibriz
DIV & SPAN
Il existe une différence entre div et span : div est un élément de type
block tandis que span est un élément de type inline. 80
28/02/2022 Ibriz
ELEMENTS DE TYPES BLOCK & INLINE
Tout élément, en HTML, est soit un élément de type block, soit un élément de type inline.
Div = élément de type block

Span = élément de type inline
81
28/02/2022 Ibriz
Les élément de type block…

Commencent sur une nouvelle ligne,
Occupent toute la largeur disponible,
Peuvent être imbriqués les uns dans les autres et peuvent contenir des
élément de type inline.
Les éléments de type inline…

Ne commencent pas sur une nouvelle ligne,
Occupent seulement la largeur nécessaire,
Peuvent contenir d’autres éléments de type inline mais pas d’éléments de
type block. 82
28/02/2022 Ibriz
Eléments block Eléments inline

p em
h1, h2, h3… strong
header, article, footer… mark
ol, ul, dl a 83
table img
28/02/2022 Ibriz
SELECTEURS AVANCES
Il est possible de combiner les sélecteurs pour cibler précisément du contenu.
Sélecteur universel (sélectionne tous les éléments) : *
Appliquer un style aux élément A et B :

A, B { propriété: valeur; }
Sélectionner un élément B contenu dans A :

A B { propriété: valeur; }
84
28/02/2022 Ibriz
SELECTEURS AVANCES
Sélectionner le premier élément B suivant un élément A :
A + B { propriété: valeur; }
Sélectionner tous les éléments C possédant un attribut en particulier :

C[attribut] { propriété: valeur; }
Sélectionner tous les éléments D possédant un attribut en particulier et une valeur exactement :
D[attribut=« valeur »] { propriété: valeur; }
Sélectionner tous les éléments E possédant un attribut en particulier et une valeur :

E[attribut*=« valeur »] { propriété: valeur; }
85
28/02/2022 Ibriz
L’HERITAGE
Les éléments en HTML « héritent » des styles de leurs parents. D’où le « cascading » de CSS.
En cas de conflit, le style le plus proche de l’élément en question sera appliqué.
86
28/02/2022 Ibriz
L’HERITAGE
87
28/02/2022 Ibriz
Cours CSS
Chapitre 2:
Formater du texte et positionner des
éléments
88
28/02/2022 Ibriz
LES PROPRIETES CSS DE TYPE “FONT-”
La propriété font-size
La propriété font-style
89
28/02/2022 Ibriz
La propriété font-style
Nous avons dit plus haut que tout élément enfant héritait par défaut des styles de
ses parents. A quoi sert donc la valeur inherit ? En fait, cette dernière sert à
annuler un style dans un cas bien particulier.
90
28/02/2022 Ibriz
La propriété font-weight
Je vous conseille vivement de n’utiliser que des valeurs numériques qui

permettent un meilleur étalonnage et sont plus souples selon moi. Notez 91
que 400 correspond à normal et 700 à bold.
28/02/2022 Ibriz
La propriété line-height
sert à fixer l’écartement, c’est-à-dire la distance entre deux lignes de texte.
La propriété font-family
permet de choisir la police de notre texte.
…..
La propriété color
92
28/02/2022 Ibriz
93
28/02/2022 Ibriz
94
28/02/2022 Ibriz
L’opacité du texte
95
28/02/2022 Ibriz
LES PROPRIETES CSS DE TYPE “-”
L’opacité du texte
96
28/02/2022 Ibriz
LES PROPRIETES CSS DE TYPE “TEXT-”
text-align:
Left : le texte sera aligné sur la gauche ; valeur par défaut ;
Center : le texte sera centré ;
Right : le texte sera aligné sur la droite ;
Justify : le texte sera justifié ;
Inherit : hérite des propriétés de l’élément parent
97
28/02/2022 Ibriz
La propriété text-decoration :
Underline : le texte sera souligné ;
Overline : une ligne apparaîtra au dessus du texte ;
Line-through : le texte sera barré ;
Blink : le texte clignotera (attention, ne fonctionne pas sur tous les navigateurs) ;
Inherit ;
None : pas de décoration, comportement par défaut
98
28/02/2022 Ibriz
La propriété text-indent :
99
28/02/2022 Ibriz
La propriété text-transform :
Uppercase : transforme tout le texte en majuscules ;
Lowercase : met tout le texte en minuscules ;
Capitalize : met uniquement la première lettre de chaque mot en majuscule ;
None : pas de transformation ;
Inherit : hérite des styles de l’élément parent.
100
28/02/2022 Ibriz
Et encore :
101
28/02/2022 Ibriz
Et encore :
102
28/02/2022 Ibriz
Cours CSS
Chapitre 3: Modèle en Boite
103
28/02/2022 Ibriz
Le principe du modèle en boite
Positionner les différents éléments de votre page web.
Tout élément d’une page est une boîte rectangulaire et peut avoir un padding, une marge et des bordures
:qu’il soit un élément de type block ou de type inline, est une boîte rectangulaire.
Les propriétés permettant d’indiquer la longueur, la largeur, la marge, le padding et les bordures d’un
élément forment ce qu’on appelle le modèle des boîtes.
104
28/02/2022 Ibriz
Illustration du modèle en boite
105
28/02/2022 Ibriz
Hauteur et largeur d’un élément
106
28/02/2022 Ibriz
Les bordures
• Border-width, qui va définir l’épaisseur de la bordure (valeur en px) ;
• Border-style, qui va définir le style de la bordure ;
• Border-color, qui va définir la couleur de la bordure (accepte les mêmes valeurs que la propriété « color »).
107
28/02/2022 Ibriz
Les arrondies
• a vu le jour avec le CSS3
• Notez que l’on peut définir des angles différents pour chaque côté de nos bordures en utilisant les
mots clefs top-left, top-right, bottom-left et bottom-right.
108
28/02/2022 Ibriz
Les marges intérieures: Padding
109
28/02/2022 Ibriz
Les marges extérieures
110
28/02/2022 Ibriz
Les ombres des boîtes
la propriété box-shadow avec deux valeurs

obligatoires et quatre recommandées pour
marcher :
•1ère valeur : déplacement horizontal de
l’ombre ;
•2ème valeur : déplacement vertical de
l’ombre ;
•3ème valeur : rayon de propagation (flou
gaussien) de l’ombre ;
•4ème valeur : couleur de l’ombre (accepte
les mêmes valeurs que la propriété «
color »).
•Inset à la fin
111
28/02/2022 Ibriz
Faire flotter un élément
Pour aligner des éléments les uns par
rapport aux autres, on peut les faire «
flotter ». Pour faire flotter un
élément, nous utiliserons la propriété
float avec les valeurs suivantes : left,
right, none ou inherit.
• left : un élément va se placer en

dessous après un float left ;
• right : un élément va se placer en
dessous après un float right ;
• both : un élément va se placer en
dessous après un float left ou un
float right.
112
28/02/2022 Ibriz
La propriété display
La propriété display est une propriété extrêmement puissante : elle permet de
changer le type d’un élément de block à inline ou d’inline à block.
113
28/02/2022 Ibriz
La propriété position
permettant de définir l’emplacement
d’éléments HTML dans une page. Cette
propriété peut prendre cinq valeurs :
• Static : valeur par défaut, ne change

pas la position de base d’un élément ;
• Absolute : permet de positionner un
élément n’importe où dans la page,
par rapport à son élément parent
direct ;
• Fixed : permet de positionner un
élément n’importe où dans la page.
De plus, l’élément reste visible si vous
descendez ou remontez le long d’une
page ; 114
• Relative : permet de replacer un
élément relativement par rapport à
son positionnement par défaut ;
• Inherit : l’élément hérite des
propriétés de son parent.
28/02/2022 Ibriz
Notations long-hand et short-hand
Long Hand Short Hand
[font-style] [font-weight] [font-size]/[line-height] font

[font-family]
[border-width] [border-style] [border-color] border
[margin-top] [margin-right] [margin-bottom] margin
[margin-left]
[background-color] [background-image] background
[background-repeat] [background-attachment]
[background-position]
115
28/02/2022 Ibriz
!" #"$% & !'()
Accueil
MA PAGE
Bienvenue dans ma page
à moi, où je raconte tout INFO
qu’est ce que je veux !
Mes enseignements
116
page crée par Moi.
Mes amis
28/02/2022 Ibriz
JavaScript
!"#$%&%' ()*(+
Introduction (1)
Javascript permet de rendre dynamique un site internet
développé en HTML.
Javascript permet de développer de véritables applications
fonctionnant exclusivement dans le cadre d'Internet.
Le Javascript est un langage de script simplifié orienté objet
dont la syntaxe est basée sur celle du Java.
Javascript a été initialement élaboré par Netscape en
association avec Sun Microsystem.
Plus tard, Microsoft développera son propre langage Javascript officiellement
connu sous le nom de JScript.
Introduction (2)
Contrairement à un applet Java qui est un programme
compilé, les scripts écrits en Javascript sont interprétés
Le Java, représenté par un ou plusieurs fichiers autonomes dont
l'extension sera *.class ou *.jar, est invoqué par une balise HTML
spécifique
Le JavaScript est écrit directement au sein du document HTML sous
forme d'un script encadré par des balises HTML spéciales.
Javascript est standardisé par un comité spécialisé, l'ECMA
(European Computer Manufactures Association).
HTML et JavaScript
!"#$"%&#'()*#+&,-"#(./0./12#3456&57-#!&8#+&9:#
;"!78&8#8$<37=7>9&8#&6#75+78$&58";!&8#
,-./'012%&345&4$678&9&:./'017;
<<<<<<<<<<<<
,=-./'01;
*&#34+&#0","23-7$6#8?756@%-&#+&#+&9:#A"57@-&#",&3#!&#
34+&#'()*
!"#$%&'()*+%#,*('-)' ,.%&#/'#-+,'#0123
!"#$%&"#'()(*$+,-.#/0,1/2+"#3"#-34/#/%4)"1.#&(1/#3(#-(5"#678!#"33"#
9:9";#
<0"/.#3(#9=.>%&"#3(#-34/#/,9-3"#".#3(#-34/#?+=@4"99"1.#4.,3,/="#-(+#3"/#
&=)"3%--"4+/#&"#/,."/#A1."+1".;#
4"#$%&'()*+%#-+55'#6%#5+,6/'#'7)'(%'
1. Insertion dans une page
HTML,9*%&:('(#,6#-+,'#;.<.=-(*>)#,.%&#6%'#
$/#'7*&)'#4#5.%*8('&
>.?'#0123#
1.1 Insertion pour exécution directe
Le code s'exécute automatiquement
lors du chargement de la page HTML
dans le navigateur en même temps que <html>
le contenu de la page HTML <head>
s'affiche à l'écran. <title>..... </title>
</head>
Le code JavaScript est placé <body>
dans le corps même de la page HTML, <script
entre les balises <body> .......... Et language="JavaScript">
......... </body> alert(‘bonjour’);
</script>
</body>
</html>
1.2 Insertion et exécution
événementielle
!"#$%&"#B()(/$+,-.#"/.#&0(C%+&#34#-(+#3"#
1(),5(."4+D#/.%$E=#"1#9=9%,+"D#-%4+#1"# <html>
/0"F=$4."+#@4"#/4+#&"9(1&"D#3%+/#&4# <head>
&=$3"1$>"9"1.#& G41#=)=1"9"1.;# <title> ..........
</title>
!"#$%&"#'()(*$+,-.#"/.#-3($=#&(1/#3"#$%+-/# <script
9:9"#&"#3(#-(5"#678!D#"1.+"#3"/#C(3,/"/# language="JavaScript">
H>"(&I ;;;;;;;;;;#".#;;;;;;;;;#HJ>"(&I function auRevoir ()
{ alert(‘ Au
!"#$%&"#/0"F=$4."+(#/"43"9"1.#3%+/#&041# revoir’);}
=)=1"9"1.#5=1=+=#-(+#,1."+)"1.,%1#&"# </script>
304.,3,/(."4+;# </head>
A3#?(4.#=$+,+"#3"#$%&"#$%++"/-%1&(1.#K#$".# <body
onUnload=auRevoir();>
=)=1"9"1.#&(1/#3"#$%+-/#&4#&%$49"1.# Excécution différée
678!; </body>
</html>
2. Insertion par appel de
module externe
.5#$&96#758<-&-#+9#34+&#0","23-7$6#&5#="78"56#"$$&!#B#95#
A4+9!&#&:6&-5&#8&#6-49,"56#B#5?7A$4-6&#>9&!!&#"+-&88&#
C/1DEF# ,-./'012-/.67>*?2#52@A#5%$2$B1$/3$7;
<<<<<<<<<<<<
,=-./'01;
3'&#,'67#@./*&'&#,'#;.<.&-(*>)#,+*<'%)#A)('#>/.-:&#'%)('#/'&#
1.?&#B@+,CD ')#BE@+,CD ,.%&#/'#-.&#,96%'#'7:-6)*+%#,*('-)'#+6#
'%)('#/'&#1.?&#BF'.,D ')#BEF'.,D ,'#/.#>.?'#0123#>+6(#6%'#
'7:-6)*+%#,*GG:(:'"
=)+-H:#,.%&#6%#G*-F*'(#&6(#/'#&'(<'6(#I#&+%#.,('&&'#,9.>>'/#
&+6&#G+(5'#,'#1JK1J#=$2L3J >+().%)#/9'7)'%&*+%#")7) +6#"M&
=*5>/*G*'#/.#5.*%)'%.%-'#,'&#&*)'&#G.*&.%)#.>>'/#I#,'&#5+,6/'&#
;.<.=-(*>)#-+556%&#I#>/6&*'6(&#>.?'&#0123"#
$%-+%<:%*'%)#N#/9.>>'/#.6#-+,'#'7)'(%'#?:%8('#6%'#('O6A)'#
&6>>/:5'%).*('#<'(&#/'#&'(<'6(P#')#'%-+5@('#/'#(:&'.6
Entrée et sortie de données avec
JavaScript
3 types de boites de messages peuvent être affichés en utilisant
Javascript : Alerte, Confirmation et Invite
Méthode alert()
sert à afficher à l’utilisateur des informations simples de type texte. Une fois que
ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte
Méthode confirm()
permet à l’utilisateur de choisir entre les boutons OK et Annuler.
Méthode prompt()
La méthode prompt() permet à l’utilisateur de taper son propre message en
réponse à la question posée
La méthode document.write permet d ’écrire du code HTML dans la
page WEB
Entrée et sortie de données avec
JavaScript
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script language='javascript'>
alert('bonjour');
document.write (
prompt('quel est votre nom ?','Indiquer votre nom ici')
);
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
La structure d’un script en
JavaScript
La syntaxe du langage Javascript s'appuie sur le modèle de Java et C
Règles générales
1. L'insertion des espaces peut s'effectué n'importe où dans le script
Chaque commande doit être terminée par un point-virgule (;).
Un nombre à virgule est séparé par un point (.) et non par une virgule
Le langage Javascript y est sensible à la casse
Il existe deux méthodes permettant d'intégrer des commentaires à vos scripts.
Placer un double slash (//) devant le texte
Encadrer le texte par un slash suivi d'une étoile (/*) et la même séquence
inversée (*/)
Les variables (1)
Déclaration et affectation
Le mot-clé var permet de déclarer une ou

plusieurs variables. !!"#$%&'&()*+,-.,)/,-.,0 .(,-.,12
3&',)/,0/,14
Après la déclaration de la variable, il est
possible de lui affecter une valeur par !!566.$(&()*+,-.,)2
l'intermédiaire du signe d'égalité (=). ),7,84
Si une valeur est affectée à une variable !!"#$%&'&()*+,.(,&66.$(&()*+,-.,
sans que cette dernière ne soit déclarée, 9'):2
3&',9'):,7,;4
alors Javascript la déclare
automatiquement. !!"#$%&'&()*+,.(,&66.$(&()*+,-.,
$&'&$(.'.
var caractere = ["a", "b", "c"];
Les variables (2)
Déclaration et affectation
La lecture d'une variable non déclarée provoque une erreur
Une variable correctement déclarée mais dont aucune valeur n'est
affectée, est indéfinie (undefined).
La portée
les variables peuvent être globales ou locales.
Une variable globale est déclarée en début de script et est accessible
à n'importe quel endroit du programme.
Une variable locale est déclarée à l'intérieur d'une fonction et n'est
utilisable que dans la fonction elle-même.
Les variables (3)
G456-"756&8#3453&-5"56#!&8#54A8#+&#,"-7";!&8
3'&#%+5&#,'#<.(*.@/'&#%'#>'6<'%)#-+%)'%*(#O6'#,'&#/'))('&P#
-F*GG('&P#+6#/'#-.(.-)8('#QRQ#S6%,'(&-+('T#
8%1LM+"1%9 "/.#41#1%9#)(3,&"#
3'&#-.(.-)8('&#&>:-*.67#')#.--'%)6:&#&+%)#*%)'(,*)&#S:P#IP#UP#VP#
')-""T#
8%1LM+=1%9 10"/.#-(/#41#1%9#)(3,&";#A3#N#(#41#$(+($.2+"#($$"1.4=;#
3'&#5.M6&-6/'&#')#/'&#5*%6&-6/'&#+%)#/'6(#*5>+().%-'"#
8%1M+"1%9 "/.#&,??=+"1.#&"#8%1-+"1%9;#
W%#%+5#,'#<.(*.@/'#%'#>'6)#-+%)'%*(#,9'&>.-'&"#
8%1#M+"1%9 10"/.#-(/#41#1%9#&"#)(+,(C3"#$%++"$.;#A3#N#(#41#"/-($";
3'&#5+)&#(:&'(<:&#;.<.=-(*>)#%'#>'6<'%)#A)('#6)*/*&:&#-+55'#
%+5&#,'#<.(*.@/'"
Les variables (4)
!"#.N-"#&G41"#)(+,(C3"#&=-"1&#&"#3(#)(3"4+#/.%$E="#&(1/#$".."#)(+,(C3";#M(/#&"#
&=$3(+(.,%1#&"#.N-";
OF"9-3"#
)(+#9(P(+,(C3"#Q#R M>,3,--" GS
9(P(+,(C3"#QTUS
trois principaux types de valeurs
String
Number : 10^-308 >nombre < 10^308
Les nombres entiers
les nombres décimaux en virgule flottant
3 valeurs spéciales :
Positive Infinity ou +Infinity (valeur infini positive)
Negative Infinity ou –Infinity (valeur infinie négative)
Nan (Not a Number) habituellement générée comme résultat d’une
opération mathamatique incohérente
Boolean
deux valeurs littérales : true (vrai) et false (faux).
Valeurs spéciales
JavaScript inclut aussi deux types de données spéciaux :

Null : possède une seule valeur, null, qui signifie l’absence de données dans
une variable
Undefined : possède une seule valeur, undifined. Une variable dont le
contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même null
est dite non définie (undifined).
Les opérations sur les chaînes
La concaténation
Var chaine = « bonjour » + « FI3/FCD1 »;
Déterminer la longueur d’une chaîne
Var ch1 = « bonjour »;
Var longueur = ch1.length;
Identifier le nième caractère d’une chaîne
Var ch1 =« Rebonjour ! »;
Var carac = ch1.charAt(2);
Extraction d’une partie de la chaîne
Var dateDuJour = « 04/04/03 »
Var mois = datteDuJour.substring(3, 5);
3: est l’indice du premier caractère de la sou-chaîne à extraire
5 : indice du dernier caractère à prendre en considération ; ce
caractère ne fera pas partie de la sous-chaîne à extraire
Les fonctions prédéfinies (1)
$9&%
Cette fonction exécute un code Javascript à partir d'une chaîne de
caractères.
<<<
,:C*(DE2?!FG>!GH678&9&:./'017;22
I53.1'A32$9&%5&1'A3JK22L2222
#A.5@$31<IA/@5%&'/$<.&%.5%<9&%5$6")(3J#A.5@$31<IA/@5%&'/$<-&'-'$<9&%5$KM22N
,=:C*(DE;
<<<
,OP*Q2F!QH67IA/@5%&'/$7;
:&'-'--$R253$2$B0/$--'A32@&1ST@&1'U5$2V2,(FD>E2EWDH671$B172F!QH6-&'-'$2Q!X?HFGEY6Z[2:(+H6Z[;222
,(FD>E2EWDH67"511A372\!?>H67$9&%5&1'A3<72A3C%'.]67$9&%5&1'A3JK7;22
,(FD>E2EWDH671$B172F!QH6.&%.5%2Q!X?HFGEY6Z[2:(+H6Z[;
,=OP*Q;...
isFinite
Détermine si le parametre est un nombre fini. Renvoie false si ce n'est pas un
nombre ou l'infini positif ou infini négatif.
)<=)+)(.>?@;A,!!'.(*B'+.,('B.
isFinite("Un nombre") //retourne false
isNaN
détermine si le parametre n’est pas un nombre (NaN : Not a Number).

)<C&C>DB+,+*EF'.DA !!'.(*B'+.,('B.
isNaN(20) //retourne false
parseFloat
analyse une chaîne de caractères et retourne un nombre décimal.
Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a Number).
parseInt
analyse une chaîne de caractères et retourne un nombre entier de la base
spécifiée.
La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2
(binaire).
3&',+BE.'*7D8?GD4
3&',+*EF'.79&'<.=%*&(>+BE.'*A4,//retourne le nombre 125
3&',9'):7H;2IG4
var arrondi = parseInt(prix, 10); //retourne 30
Number
convertit l'objet spécifié en valeur numérique
3&',0*B',7,+.J,"&(.>D".$.EF.',8I/,8KKG,;HL?@L;;DA4!!$*+3.')(,%&,-&(.,.+,E)%%)<.$*+-.<
alert (Number(jour));
String
convertit l'objet spécifié en chaîne de caractères
0*B',7,+.J,"&(.>@H;;G@MMH?8GA4!!N*+3.'()(,%.,+*EF'.,.+,-&(.,O*)<,0*B'/,5++#..,.($2
alertEscape
(String(jour));
retourne la valeur hexadécimale à partir d'une chaîne de caractère codée en
ISO-Latin-1.
escape("!&") !!'.(*B'+.,P?8P?MP
Les Objets (1)
Les objets de JavaScript, sont soit des entités pré définies du langage,
soit créés par le programmeur.
Par exemple, le navigateur est un objet qui s'appelle "navigator".
La fenêtre du navigateur se nomme "window"
La page HTML est un autre objet, que l'on appelle "document".
Un formulaire à l'intérieur d'un "document", est aussi un objet.
Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle "link". etc...
Les objets javascript peuvent réagir à des "Evénements".
Tous les navigateurs ne supportent pas les mêmes objets
X--8& .67 >(+>(*:):& ,Y6% +@M')
9A'15/$<.A5%$5/<9&%5$
9A'15/$<.A5%$5/<9&%5$2629$/1$2
Les objets (2)
L’opérateur New
L'opérateur new est utilisé pour créer une nouvelle instance ou
un nouveau type d'objet défini par l'utilisateur ou de l'un des
types d'objets prédéfinis, Array, Boolean, Date, Function, Image,
Number, Object, ou String.
1%4)"3L%CB". Q 1"V .N-"L%CB".W-(+(9".+"/X
texte = new String("Une chaîne de caractère");

Les objets (3)
L’opérateur Typeof
L'opérateur typeof renvoie une chaîne de caractères indiquant quel est le
type de l'opérande.
9&/2'262^M
1_0$AI 'M2==/$1A5/3$235@"$/
9&/21'1/$67?$-2/&'-'3-2#$2%&2.A%`/$7M
1_0$AI 1'1/$M2==/$1A5/3$2-1/'34
9&/2aA5/2623$b2c&1$JKM
1_0$AI aA5/M2==/$1A5/3$2A"a$.1
9&/2.SA'B2621/5$M22222221_0$AI .SA'BM2==/$1A5/3$2"AA%$&3
9&/2.&-26235%%M222222221_0$AI .&-M2==/$1A5/3$2A"a$.1
1_0$AI 0&/-$O%A&1M2==/$1A5/3$2I53.1'A3
1_0$AI Q&1SM2==/$1A5/3$2A"a$.12J(H2d<ef2F:2g<ef2F:2Z<hif2P0$/&2g<ef2P0$/&2d<e
typeof Math; //retourne function NS 3.*, Opera 3.*
L'objet String (1)
Propriété :
length : retourne la longueur de la chaîne de caractères;
Méthodes :
anchor( ) : formate la chaîne avec la balise <A> nommée;
b( ) : formate la chaîne avec la balise <B>;
big( ) : formate la chaîne avec la balise <BIG>;
charAt( ) : renvoie le caractère se trouvant à une certaine position;
charCodeAt( ) : renvoie le code du caractère se trouvant à une certaine position;
concat( ) : permet de concaténer 2 chaînes de caractères;
fromCharCode( ) : renvoie le caractère associé au code;
indexOf( ) : permet de trouver l'indice d'occurrence d'un caractère dans une chaîne;
L'objet String (2)
italics( ) : formate la chaîne avec la balise <I>;
lastIndexOf( ) : permet de trouver le dernier indice d'occurrence d'un caractère;
link( ) : formate la chaîne avec la balise <A> pour permettre de faire un lien;
slice( ) : retourne une portion de la chaîne;
substr( ) : retourne une portion de la chaîne;
substring( ) : retourne une portion de la chaîne;
toLowerCase( ) : permet de passer toute la chaîne en minuscule;
toUpperCase( ) : permet de passer toute la chaîne en majuscules;
L'objet Array
Propriété :
length : retourne le nombre d'éléments du tableau;
Méthodes :
concat( ) : permet de concaténer 2 tableaux;
join( ) : converti un tableau en chaîne de caractères;
reverse( ) : inverse le classement des éléménts du tableau;
slice( ) : retourne une section du tableau;
sort( ) : permet le classement des éléments du tableau;
L'objet Math (1)
Propriétés :
E : renvoie la valeur de la constante d'Euler (~2.718);
LN2 : renvoie le logarithme népérien de 2 (~0.693);
LN10 : renvoie le logarithme népérien de 10 (~2.302);
LOG2E : renvoie le logarithme en base 2 de e (~1.442);
LOG10E : renvoie le logarithme en base 10 de e (~0.434);
PI : renvoie la valeur du nombre pi (~3.14159);
SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707);
SQRT2 : renvoie la racine carrée de 2 (~1.414);
L'objet Math (2)
Méthodes :
abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ), min( ), sqrt( )
sont les opérations mathématiques habituelles;
atan2( ) : retourne la valeur radian de l'angle entre l'axe des abscisses et un
point;
ceil( ) : retourne le plus petit entier supérieur à un nombre;
floor( ) : retourne le plus grand entier inférieur à un nombre;
pow( ) : retourne le résultat d'un nombre mis à une certaine puissance;
random( ) : retourne un nombre aléatoire entre 0 et 1;
round( ) : arrondi un nombre à l'entier le plus proche.
L'objet Date (1)
Propriété : aucune;
Méthodes :
getFullYear( ), getYear( ), getMonth( ), getDay( ), getDate(), getHours( ),
getMinutes( ), getSeconds( ), getMilliseconds( ): retournent respectivement l'année
complète, l'année (2chiffres), le mois, le jour de la semaine, le jour du mois,
l'heure, les minutes, les secondes et les millisecondes stockés dans l'objet Date;
getUTCFullYear( ), getUTCYear( ), … retournent respectivement l'année complète,
l'année (2chiffres), … stockés dans l'objet Date en temps universel;
setFullYear( ), setYear( ), … remplacent respectivement l'année complète, l'année
(2chiffres), … dans l'objet Date;
L'objet Date (2)
setUTCFullYear( ), setUTCYear( ), … remplacent l'année complète, l'année (2chiffres),

… dans l'objet Date en temps universel;
getTime( ) : retourne le temps stocké dans l'objet Date;
getTimezoneOffset( ) : retourne la différence entre l'heure du client et le temps
universel;
toGMTString( ), toLocaleString( ), toUTCString( ) : convertissent la date en chaîne de
caractère selon la convention GMT, selon la convention locale ou en temps universel;
Nommage des objets-éléments
Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom

Pour pouvoir distinguer les différents objets-éléments d’une page web, il suffit de
leur donner un nom à travers de l’attribut NAME
<Table Name=« tableau1 »>…
<Table Name=« tableau2 »>…
<Form Name = « formulaire1 »>…
<Form Name =« formulaire2 »>…
<Textarea Name =« texte1»>…
Dans le cas où l’objet serait unique alors pas besoin de nom pour désigner cet objet
Exemple : le cas de BODY(une seul BODY par document), DOCUMENT (un
seul DOCUMENT par fenêtre)
Manipulation des objets
Pour adresser un objet, il ne suffit pas de donner son nom : il faut aussi
préciser son « chemin d’accès » dans l’arborescence de la structure
<HTML><BODY
onLoad="window.document.formulaire.zone.value='Bonjour';">
<FORM name="formulaire"><INPUT NAME="zone" TYPE="text">
Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la fenêtre
</FORM></BODY></HTML>
courante
Dans le cas de cadres (frames), il est pertinent de donner le nom de la
fenêtre
Il est possible aussi d’omettre window.document : l’adressage réussi
puisqu’il n’y a qu’un seul objet « document» dans la fenêtre
Programmation Web
Avancée avec
JavaScript
Plan du module
● JavaScript coté Client Web

Le BOM
Le DOM
Ο Ajax
● JavaScript
Ο coté Serveur Web
Ο
Ο
JS, une technologie client
Client Web : Chrome

1 Requête http
Serveur Web
www.twitter.com
3 Réponse http
Execution sur le client Execution sur le serveur

(HTML, CSS, JavaScript, ...) (ASP, PHP, JSP, ...)
4 2
Frameworks JavaScript
UUII
DDOOMM jQuery Mobile

bootstrap
jQuery Ext JS
Dojo Script.aculo.us
MooTools Ember.js
AngularJS Backbone.js
Prototype
Zepto.js
22DD/3/3DD
three.js Matters.js
Pixi.js Babylon.js
Voxel.js
Les alternatives à JavaScript
● Le concurrent déchu : VB Script (Microsoft)

Ο Utilisé à l'époque de l'hégémonie d'Internet Explorer.
N'est interprété que par ce dernier.
● Les ersatz compilés en JavaScript
Ο DART(Google), Script#, CoffeeScript, JSX, JavaScript
Harmony, TypeScript (Microsoft), ...
● Le prétendant sérieux : DART (Google)
Ο Actuellement compilé en JavaScript mais vise à terme à
supplanter JavaScript
Ο Chrome sera logiquement le 1er navigateur à supporter
nativement des scripts DART
Fonction par déclaration
● La déclaration se fait à l'aide du mot clé function

Ο function name(param1, param2) { ...; return value; }
Ο Peut retourner une valeur (return) ou non
● Différencie les procédures des "vraies" fonctions
● L'appel se fait de manière classique
Ο Liaison des arguments avec les paramètres, si il y en a.
● Le noyau JavaScript possède déjà une
bibliothèque de fonctions prédéfinies
Ο eval(), isNaN(), parseInt(), encodeURI(), ...
Portée et vie des variables
● Variable locale
Ο Une variable déclarée à l'interieur d'une fonction est
seulement accessible dans cette fonction
● Variable globale
Ο Une variable déclarée en dehors de toute fonction est
accessible en tout point du script et de la page
● Cycle de vie d'une variable
Ο Une variable locale est supprimée lorsque la fonction
se termine
Ο Une variale globale est supprimée à la fermeture de la
page
Exemple illustratif
var price = 12.56; //variable globale
function getLocalTVA(country) {
var tva; //variable locale à la fonction. Vaut undefined à cet instant
if (country == 'FR') {
tva = 19.6;
} else if (country == 'EN') {
tva = 20.0;
}
return tva;
}
function applyFrenchTax() {
price = price * (1 + getLocalTVA('FR') / 100.0); //appel de la fonction #1
} //qui agit sur la variable globale
applyFrenchTax(); //appel de la fonction #2

Fonction par expression
● JavaScript permet d'assigner des (pointeurs

sur) fonctions à des variables
Ο Fonctions anonymes dont l'appel se fait au travers des
variables qui les référencent
var messageBox = function () { console.log("Justin Bieber"); };

var messageBox2 = messageBox;
var helloWorld = function (people) { console.log("Hello " + people + "!"); };
messageBox = function () { console.log("Selena Gomez"); };
(function (msg) { console.log(msg); })("Olivier Le Goaer"); //Fonction anonyme auto-appelée
messageBox2(); //Quel est le résultat de cet appel ?

helloWorld("Olivier Le Goaer"); //Quel est le résultat de cet appel ?
Traitements des erreurs
● Exceptions
Ο Encadrer les portions de code susceptibles de poser
problème et traiter l'erreur le cas échéant.
● Bloc try/catch
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
Programmation Objet ?
● Orientation objet
Ο Beaucoup de chose dans le langage est considéré
comme objet (dont les fonctions !)
● Paradigme objet
Ο Un objet est décrit par ses propriétés et ses méthodes
Ο Accès aux propriétés et méthodes par un point '.'
Ο Auto-référence avec this
Ο Visibilité des propriétés et méthodes : public/privé
● Absence du concept de classe
Ο On ne peut pas définir de classes d'objets
Objets primitifs
typeof(nom_variable)
● Boolean permet de connaître

le type de la variable
Ο var estSympa = new Boolean(true);

● Number (entiers et réels)
Ο var annee = new Number(2014);
● Array
Ο var saveurs_yop = new Array[2];
Ο saveurs_yop[0] = "banane"; saveurs_yop[1]="kiwi";
● String
Ο var message = new String("Gangnam style");
2 façons de créer ses objets
● Création directe d'objet

var p1=new Object();
p1.firstname="John";
p1.age=50;
p1.toString = function() { return (this.firstname + ' a ' + this.age + ' ans'); }
console.log(p1.toString()); //affichera 'John a 50 ans'
● Utilisation d'un constructeur d'objet

function Person(_firstname, _age) {
this.firstname = _firstname; //this => public, private sinon
this.age = _age;
this.toString = function() { return (this.firstname + ' a ' + this.age + ' ans'); }
}
var p1 = new Person("John", 50);

console.log(p1.toString()); //affichera 'John a 50 ans'
De la classe au prototype
● A défaut de classe...
Ο Duplication des méthodes entre objets semblables !
● Peu performant : empreinte mémoire accrue
Ο Il faudrait un mécanisme pour partager les méthodes
● ...on utilise un "prototype"
Ο Propriété des objets du type spécial Function
Ο Le contenu d'un prototype (i.e. d'autres fonctions) peut
être réutilisé par les fonctions entre elles
● L'héritage devient possible
● Redéfinition et surcharge de méthode supportées
Prototype : exemple
function Child(_firstname, _age) {

this.firstname = _firstname; //this => public, private sinon
this.age = _age;
this.pleurer = function() {
console.log('Je pleure');
}
this.manger = function() {
console.log('Je mange');
}
}
Child.prototype = new Person(); //ou = Object.create(Person.prototype)
var c1 = new Child("Justin", 3);

alert(c1.toString()); //accède à une méthode du prototype de Person (héritage !)
c1.pleurer(); //accède à une méthode du prototype de Child
delete c1; //destruction de l'objet
JSON
● JavaScript Object Notation (JSON)

Ο Format léger et vraiment très simple
● Il n'existe que 2 concepts : objets {} et tableaux []
Ο Est manipulable nativement par JavaScript !
● Usages
Ο Sert à stocker des données (ex: fichier de configuration)
Ο Sert à échanger des données à travers le réseau, entre
clients et serveurs (ex: sérialisation/désérialisation)
Ο Sert à modéliser un objet JS mais sous une forme
textuelle au milieu du code
JSON : document vs. code
var courses =
{ { "fruits": [
"fruits": [ { "kiwis": 3,
"mangues": 4,
{ "kiwis": 3, "pommes":
"mangues": 4, null
"pommes": null },
}, { "panier": true },
{ "panier": true }, ],
"legumes":
],
{ "patates": "amandine",
"legumes":
"figues": "de barbarie",
{ "patates": "amandine",
"poireaux": false
"figues": "de barbarie",
}
"poireaux": false };
}
} if (courses.legumes.poireaux) {
console.log("j'ai des poireaux");
}
courses.json
processCourses.js
Evènements HTML
Évènement Élément(s) html concerné(s)
onLoad BODY, FRAMESET, OBJECT
onUnload BODY et FRAMESET
onError IMG, OBJECT, BODY et FRAMESET
onAbort BODY et FRAMESET
onSelect INPUT et TEXTAREA
onChange INPUT, SELECT et TEXTAREA
onSubmit FORM
onReset FORM
onFocus LABEL, INPUT, SELECT, TEXTAREA et BUTTON
onBlur LABEL, INPUT, SELECT, TEXTAREA et BUTTON
onResize BODY
onScroll BODY
onClick Quasiment tout
onMouseOver Quasiment tout
onContextMenu Quasiment tout
Deux stratégies possibles
● Directement à l'aide d'attributs dédiés (inline)

…
<input type=''text'' id=''userName'' onBlur=''doSomething();'' onFocus=''doSomethingElse();''/>
...
● Ou mise en place d'écouteurs d'évènement

<head><script type="text/javascript">
var inputTag = document.getElementById('userName'); //navigation DOM (voir suite du cours)
inputTag.addEventListener('blur', doSomething(), false);
inputTag.addEventListener('focus', doSomethingElse(), false);
</script></head>
<body>
... Non intrusif :
<input type=''text'' id=''userName''/> ne touche
… pas au corps
</body> du document
Evènements et standards
● Le navigateur implèmente des comportements

par défaut pour les évènements
Ο Le clic gauche sur un lien hypertexte charge un
nouveau document,
Ο Un clic gauche sur un bouton soumet le formulaire,
Ο Un clic droit affiche un menu contextuel,
Ο ...
● Il est possible d'inhiber ce comportement par
défaut, et le remplacer si besoin
Ο <a href="#" onclick="return false">Continuer</a>
Extension au noyau JS
● Objets de type BOM

Ο Window, Navigator, Screen, History, Location
● Objets de type DOM
Ο DOM Document, DOM Elements, DOM Attributes, DOM
Events, ...
● Objets de type HTML
Ο <a>, <area>, <canvas>, <button>, <form>, <iframe>,
<image>, <input>, <link>, <meta>, <object>, <option>,
<select>, <style>, <table>, <td>, <th>, <tr>, <textarea>, ...
BOM (Browser Object Model)
● Permet de manipuler le navigateur

Ο Tous les navigateurs (IE, Firefox, Chrome, ...) sont des
logiciels qui offrent les mêmes fonctionnalités de base
● Ouvrir/fermer des onglets, aller à une URL, mémoriser la
liste des URL précédemment consultées, etc.
● Arborescence d'objets
Window
(fenêtre/onglet courant)
Chaque objet
possède ses
propriétés et
méthodes
location document history navigator screen
DOM
Entrée/sortie
● Méthodes d'interaction avec l'utilisateur par le

biais de la fenêtre du navigateur
Ο Objet du type Window
● 2 méthodes d'entrée
Ο var user_age = window.prompt ("Quel est votre age ?");
Ο var user_quit = window.confirm("Voulez vous quitter cette
page ?");
● 1 méthode de sortie
Ο window.alert("Bienvenue sur ce site !");
Divers exemples BOM
Exercice :
//affiche dans la console le nom de code du navigateur utilisé ●Quels sont
console.log(window.navigator.appCodeName); les objets ?

●Quelles sont
les propriétés ?
//redirige le navigateur vers une adresse quelconque ●Quelles sont
window.location = "usmba.ac.ma"; les méthodes ?
//ouvre un nouvel onglet dans le navigateur

var onglet = window.open('http://www.youtube.com');
//Fais revenir une page en arrière (similaire au boutton 'Back')

window.history.back();
//Affiche dans une boite de dialogue la résolution de l'écran utilisé

window.alert(window.screen.availWidth + "x" + window.screen.availHeight);
//Ecrit de l'html directement dans le document (et supprime l'existant)

window.document.write("<b>Bienvenue à l'université de Pau</b>");
DOM: Document Object Model
● Représentation d'un document x(ht)ml sous sa
forme 100% objet
Ο Les balises sont des noeuds et leurs imbrications
forment une arborescence
Ο Cette structure d'arbre est ensuite facile à manipuler
● L'arbre DOM est chargé dans le navigateur
Ο L'arbre est parcouru par le moteur de rendu du
navigateur afin de produire l'affichage graphique
Ο Chaque modification ultérieure de cet arbre force le
rafraîchissement de l'affichage graphique
Document XHTML : exemple
<!DOCTYPE html>
<html>
<head>
<title>Bienvenue</title>
<script type="text/javascript" src="./essai.js"></script>
</head>
<body>
<p id="intro">
Pour me contacter : <a href="mailto:">cliquez ici</a>
<ul>
<li>Uniquement en semaine</li>
</ul>
</p>
<h1>S'inscrire à la Newsletter</h1>
<form>
<input type="text" name="news_email"/>
</form>
</body>
</html>
Arbre du document XHTML
<html> </html>
<head> </head> <body> </body>
<title> </title> <script> </script> <p> </p> <h1> </h1> <form> </form>
#text(9) #text(20) <a></a> <ul> </ul> #text(26) <input/>
#text(11) <li></li>
#text(21)
Propriétés d'un nœud
Popriétés Commentaires
childNodes nœuds enfants (Array) Selon le véritable
type html de l'objet,
firstChild premier nœud enfant des propriétés
et méthodes
lastChild dernier nœud enfant spécifiques sont
disponibles
nextSibling prochain nœud d'un type (nœud de
même niveau)
parentNode nœud parent
previousSibling nœud précédent d'un type (nœud
de même niveau)
nodeName nom du nœud
nodeValue valeur / contenu du nœud
nodeType type du nœud
innerHTML contenu littéral html du noeud
Navigation dans l'arbre DOM
parentNode
<html> </html>
firstChild lastChild
<head> </head> <body> </body>

nextSibling
childNodes
<p> </p> <h1> </h1> <form> </form>

Méthodes d'un nœud
Méthodes Commentaires
createElement() Méthode pour créer un nouvel élément
HTML dans le document (div, p, span, a,
form, input, etc…).
createTextNode() Méthode pour créer un nœud texte.
appendChild() Pour ajouter l'élément créé dans le
document. L'élément sera ajouté comme
étant le dernier nœud enfant d'un
élément parent.
insertBefore() Pour ajouter l'élément créé avant un
autre nœud.
removeChild() Pour supprimer un nœud.
Accès direct aux nœuds
● Par la valeur de l'attribut id (si il existe)

Ο var result = document.getElementById("intro") ;
Ο Renverra 0 ou 1 résultat
● Par le nom de balise (Tag en anglais)
Ο var result = document.getElementsByTagName("input") ;
Ο Renverra 0 ou n résultats
● Par la valeur de l'attribut name (si il existe)
Ο var result = document.getElementsByName("news_email") ;
Ο Renverra 0 ou n résultats
Mode d'accès : comparaison
<html>
<head> <html>
<title>Bienvenue</title> <head>
<script <title>Bienvenue</title>
type="text/javascri <script type="text/javascript">
pt"> function function changeColor() {
changeColor() { var pTag = document.getElementById('foo');
var htmlTag = pTag.style.color="#0000FF";
document.childNodes[0]; }
var bodyTag = </script>
htmlTag.lastChild; var </head>
pTag = bodyTag.firstChild; <body onload=''changeColor();''>
pTag.style.color="#0000FF <p id="foo">Lorem Ipsum</p>
"; </body>
} </html>
</script>
</head>
<body onload=''changeColor();''>
<p>Lorem Ipsum</p>
</body>
</html> Accès direct
Il existe aussi
Accès par navigation dans l'arbre querySelector()
Objets HTML
● Après avoir navigué et atteint le nœud de son

choix, il faut agir dessus
Ο Pour cela, il est nécessaire de connaître sa véritable
nature (son type)
● nœud <body> ? nœud <h1> ?, nœud <img> ? Etc.
Ο Principe : les attributs Html correspondent aux
propriétés de l'objet (en notation CamelCase)
<img src=''tux.gif'' alt=''Linux'' id=''foo''/> var imgTag = document.getElementById('foo'); //navigation

imgTag.src = ''tux2.gif''; //action !
<input type='''text'' value='''' size=''5'' id=''bar''/>
var inputTag = document.getElementById('bar'); //navigation
inputTag.value = ''coucou''; //action !
inputTag.size = inputTag.size * 2; //action !

Cours Web-2022

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Web-2022

Transféré par

Droits d'auteur :

Formats disponibles

Cours Développement web

Exécution sur le client Exécution sur le serveur

! depuis un éditeur de texte ou un logiciel

Code HTML saisi ...

La commande <BLOCKQUOTE></BLOCKQUOTE> permet d'emprisonner un

<P></P> (inutile)Saut de paragraphe

Créer son lien

URL absolus et relatifs

donner le code html du plan suivant

Si Map dans le même fichier, alors :

r un polygone SHAPE=POLYGON COORDS="x,y,x1,y1..."

et sur Netscape seulement SHAPE=DEFAULT => ce qu'il faut faire si

on délimite les coordonnées des

1 balise <FORM> ... </FORM>

TYPE="radio" => création menu avec un seul choix

TYPE="file" => fichier attaché

left center right

Création de liens utilisant ces frames

! Black = "#000000" Green = "#008000"

Distinction entre contenu et présentation

● Contenu : dans le document HTML (sans table ni balises font)

CSS 2.0 (1998) et CSS 2.1 (2007)

Pour lier un fichier HTML avec un fichier CSS, on écrit :

Un sélecteur détermine à quel élément un style doit être appliqué.

On appellera sélecteurs simples les éléments HTML qui

Ces sélecteurs doivent être préférés autant que possible

Limite : Comment appliquer un style différent à deux

Un attribut id avec une valeur précise ne peut

Div = élément de type block

Les élément de type block…

Les éléments de type inline…

Eléments block Eléments inline

Sélecteur universel (sélectionne tous les éléments) : *

Appliquer un style aux élément A et B :

Sélectionner un élément B contenu dans A :

Sélectionner tous les éléments C possédant un attribut en particulier :

Sélectionner tous les éléments E possédant un attribut en particulier et une valeur :

En cas de conflit, le style le plus proche de l’élément en question sera appliqué.

Je vous conseille vivement de n’utiliser que des valeurs numériques qui

la propriété box-shadow avec deux valeurs

• left : un élément va se placer en

• Static : valeur par défaut, ne change

[font-style] [font-weight] [font-size]/[line-height] font

Le mot-clé var permet de déclarer une ou

JavaScript inclut aussi deux types de données spéciaux :

détermine si le parametre n’est pas un nombre (NaN : Not a Number).

texte = new String("Une chaîne de caractère");

setUTCFullYear( ), setUTCYear( ), … remplacent l'année complète, l'année (2chiffres),

Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom

● JavaScript coté Client Web

Client Web : Chrome

Execution sur le client Execution sur le serveur

DDOOMM jQuery Mobile

● Le concurrent déchu : VB Script (Microsoft)

● La déclaration se fait à l'aide du mot clé function

var price = 12.56; //variable globale

applyFrenchTax(); //appel de la fonction #2

● JavaScript permet d'assigner des (pointeurs

var messageBox = function () { console.log("Justin Bieber"); };

(function (msg) { console.log(msg); })("Olivier Le Goaer"); //Fonction anonyme auto-appelée

messageBox2(); //Quel est le résultat de cet appel ?

● Boolean permet de connaître

Ο var estSympa = new Boolean(true);