Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
Technologies du web
F.A. AMAZAL
Département informatique
Le web
• Principe original : accéder à des documents textuels
Situés sur des machines accessibles par Internet
Reliés entre eux par un mécanisme de lien « hypertexte »
• Actuellement : servir des ressources
De différentes natures : texte, image, son, vidéo, contenu
applicatif…
Permettant à l’utilisateur d’accéder à un service donné :
rechercher de l’information, acheter un objet, accéder à ses
mails, consulter ses comptes en banque…
Web ≠ Internet
• Internet
Réseau mondial d’ordinateurs permettant aux utilisateurs de
communiquer (courrier électronique), de publier des
informations (Web), de transférer des données (FTP), de
travailler à distance (telnet). . .
Internet
• Un réseau de réseaux : ordinateurs interconnectés
• Réseau informatique mondial
constitué d'un ensemble de réseaux
nationaux, régionaux et privés qui
sont reliés par le protocole de
communication TCP/IP et qui
coopèrent dans le but d'offrir une
interface unique à leurs utilisateurs.
• «Internet» a été dérivé du
concept d'internetting (en français :
«interconnecter des réseaux»)
Services d’Internet
Services d’internet
Email
• Utiliser l’Internet comme la poste:
déposer un message dans la boîte aux lettres de son
correspondant, qu’il soit ou non devant une machine.
le correspondant sera capable de le lire à sa prochaine
connexion.
Services d’internet
Messagerie
• Msn Messenger, yahoo messenger …
Internet Telephony
• Voice-over Internet Protocol (VoIP)
• Utiliser l’ordinateur comme un téléphone
• Logiciels permettant la transmission de voix
• Très économique
Services d’internet
Telnet
• Permet à un utilisateur d’Internet de se connecter et
donc d’utiliser à distance une machine comme s’il se
trouvait face à elle.
Services d’internet
World Wide Web
• Développé par Tim-Berners Lee et Robert Cailliau à la
fin des années 1980.
• Un système hypertexte public fonctionnant sur Internet
et qui permet de consulter, avec un navigateur, des pages
mises en ligne dans des sites.
• Service le plus connu de l’Internet
Hypertext
• Référence à la capacité d’inclure dans un document
du texte, des images, des sons, des vidéos, etc…, bref
du multimédia
des liens non-ambigus vers d’autres documents, qui
permettent de les trouver automatiquement et les
ouvrir
• Le Navigateur est l’outil qui permet de visualiser les
documents et ouvrir les liens
Hypertext
• L’idée des liens hypertexte: a été proposée au début dans les
années 40 par Vannevar Bush.
• En 1989 : Tim Berners-Lee du European Particle Physics
Laboratory (CERN) a conçu un système d’hypertexte pour
connecter des documents sur le Net.
• Il l a conçu un langage pour spécifier le contenu des
documents. Devenu par la suite : HyperText Markup
Language (HTML).
• Il a conçu un protocole pour télécharger et interpréter le
contenu des documents devenu par la suite HTTP.
• Il a implémenté le premier navigateur Mozaïc : seulement du
texte, PAS d’objet multimédia.
Fonctionnement du web
• Utilisation d’une architecture client/serveur
• Lorsque l'internaute tape
l'adresse (URL) d'un site dans
son navigateur (client), celui-ci
envoie une requête au serveur
qui héberge ce site.
• Le serveur transmet alors la
page demandée au navigateur qui
l'affiche.
• Afin de se comprendre, client et
serveur Web utilisent pendant
leurs échanges un protocole
commun : HTTP
Fonctionnement du web
• Client
Fonctionnement du web
• Navigateur
Fonctionnement du web
• Serveur web (serveur http)
Ensemble ordinateur/logiciel paramétré pour pouvoir traiter certains
types de pages et notamment celles qui contiennent des instructions
de programmation. Il reconnaît ces pages grâce à l'URL qu'il reçoit,
effectue les traitements demandés et transmet le résultat au format
html au browser de l'internaute
Attend les requêtes HTTP et y répond
Deux façons de fournir des ressources
statique : le serveur renvoie les ressources dont il dispose
dynamique : la ressource est générée à la réception de la requête
Exemples: Apache HTTP Server développé par Apache Software
Foundation, Internet Information Services (IIS) développé par
Microsoft
Fonctionnement du web
• Protocole
Ensemble normalisé de règles décrivant la manière de
transmettre des informations, par exemple sur un réseau
comme Internet entre un client et un serveur.
• HTTP (HTTP HyperText Transfer Protocol)
Le plus utilisé des protocoles de communication sur le WWW.
Permet à un client Web d’indiquer quelle page il veut obtenir, et au
serveur Web de lui répondre en lui donnant cette page.
Fonctionnement du web
• URL (Uniform Resource Locator)
Identifie l’endroit où se trouve une ressource sur le Web.
Exemple
http://www.exemple.com/chemin/page.html?q=req
https://www.google.com/?gws_rd=ssl#q=Web
– http :protocole
– www.exemple.com :hôte
– /chemin/ :chemin absolu sur le service
– page.html :nom de la page Web
– q=req :chaine de requête, transmise à la page
Fonctionnement du web
• Page web
Une ressource du World Wide Web
Peut contenir du texte, des images, des tableaux, des formulaires
et autres éléments multimédias
Créée par des webmasters à l’aide des langages HTML/XHTML
et CSS
Possède une adresse Web
Visualisée par les internautes grâce à des navigateurs Web
Evolution du web
Degré de connectivité des connaissances
Evolution du web
Degré de connectivité des connaissances
Et pour créer?
• Connaitre et utiliser langages du Web (ex. HTML, CSS)
• Utiliser un éditeur. Il en existe deux types :
Éditeurs WYSIWYG (What You See Is What You Get):
Permettent de rédiger le contenu du site sans avoir à taper la
moindre ligne de code.
Exemples : Nvu (gratuit) , Macromedia Dreamweaver, FrontPage
Éditeurs de texte : ils sont gratuits pour la plupart
Exemples : Bloc-Notes, Notepad++
• Tester continuellement son site sur au moins deux navigateurs à la
fois pendant sa création, afin d’être sûr que tous les visiteurs du site
aient le même résultat.
Langage HTML
• Hyper Text Markup Language: Langage de balisage pour les
hypertextes.
• Un hypertexte est un document numérique contenant des
références à d'autres documents qui sont :
soit accessibles par un clic de souris (hyperlien)
soit directement inclus dans celui-ci (images, texte,
programme...)
répartis un peu partout sur internet (d'où le web)
Langage HTML
• Normalisé par le W3C (World Wide Web Consortium)
regroupant industriels (Microsoft, Google, Apple. . . ) et
académiques (INRIA, MIT. . . )
• Description de la structure et du contenu d’un document,
accent sur l’accessibilité
• On ne décrit pas la présentation (ce sera le rôle de CSS)
• On ne décrit pas de comportement dynamique (ce sera le rôle
de JavaScript et des langages côté serveur)
Balises HTML
• HTML est un langage qui alterne texte et balises ( <blabla> ou
</blabla> )
• Les balises permettent de structurer chaque partie du
document et servent par exemple au navigateur pour réaliser
la mise en page du document.
• Exemple:
<title>Exemple1</title>
<p>Bonjour tout le monde</p>
Balises HTML
• Leur syntaxe est (balises ouvrante et fermante)
<balise attributs>contenu</balise>
Balises HTML
Exemples
• <title>Accueil</title>
Permet d’attribuer le titre Accueil au document
• <strong>rationnel</strong>
Permet d’indiquer que le texte rationnel est important (cela sera
rendu, le plus souvent, par une mise en gras).
• <em>mondialisation</em>
Permet de mettre en emphase le texte mondialisation (cela sera
rendu, le plus souvent, par une mise en italique).
Balises HTML
• Les noms des éléments et des attributs sont souvent écrits en
minuscule, mais <head> et <HeAd> sont équivalents.
• Les balises sont ouvertes et refermées dans l’ordre
(<b><i></i></b> et non <b><i></b></i> ).
• Des règles strictes déterminent quelles balises peuvent être
mises à l’intérieur de quelles balises.
• <!--Hello--> dénote un commentaire, qui ne sera ni affiché ni
interprété par le client Web (utile pour documenter une partie
d’une page Web).
En-tête: <head>…</head>
• Rôle: Fournir des informations au sujet du document
• Position: En début de document (après la balise <html> et avant la
balise <body>)
• Contenu
<title>…</title>
Titre de la fenêtre dans laquelle la page s'affiche
<meta name="..." content="...">
Permet de spécifier des méta-données sous la forme de couple
attribut-valeur (NAME-CONTENT)
Ces méta-données peuvent être exploitées, par exemple, par les
moteurs de recherche pour effectuer des recherches sur le
contenu effectif du document
En-tête: <meta…>
• <meta name="auteur" content="El Hilali">
• < meta name="keywords" content="page personnelle,
informatique">
• <meta http_equiv="Content-Type" content="text/html;
charset=utf-8">
Permet de spécifier le type de contenu :
Type de document
Codage des caractères
• < meta http_equiv ="Content-language" content="fr">
permet d’indiquer la langue du contenu du document
Corps: <body>…</body>
• Rôle: Délimiter le corps du document
• Position: Placé immédiatement après la balise </head>
• Contenu
Le corps est structuré en sections, paragraphes, listes, etc.
Les balises <p> ... </p> permet de délimiter un paragraphe. Tous
les paragraphes de texte doivent être balisés ainsi.
La balise <hr> (horizontal rule) indique une séparation majeure
dans le document (rendue par exemple graphiquement par une
ligne horizontale).
Paragraphe
• <P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> … </P>
ALIGN: Permet l’alignement des paragraphes. Les valeurs
possibles de cet attribut sont: left, center, right et justify
• Pour passer (ou sauter) une ligne, on utilise l’élément <BR>
• Exemple
Ligne horizontale
• <hr size=" " width=" " align="left|center|right" color=" ">
size : épaisseur en pixel de la ligne
width : largeur de la ligne
align : alignement à gauche| au centre | à droite dans la
fenêtre
color :Permet de spécifier la couleur de la ligne
• <hr> : Utilisée sans option, cette balise produit une ligne grise
de 1 pixel d'épaisseur faisant toute la largeur de la fenêtre
• Exemple
Listes
• HTML possède plusieurs balises permettant de présenter le
texte sous forme de listes.
• On en distingue trois types :
les listes non numérotées
les listes numérotées
les listes de définitions (ou lexiques)
• Ces listes peuvent être emboîtées les unes à l’intérieur des
autres.
Listes
• Les listes classiques :
Les listes non numérotées délimitées par les balises <ul> ... </ul>
(unordered list).
Les listes numérotées délimitées par les balises <ol> ... </ol>
(ordered list).
Tous les éléments d’une liste numérotée ou non sont délimités par
les balises <li> ... </li> (list item)
• Les lexiques sont délimités par les balises <dl> ... </dl>
(definition list) et leurs entrées par les balises <dt> ... </dt>
(term) et <dd> ... </dd> (definition).
Listes: Exemple
Listes: attributs
• Listes non numérotées
L’attribut TYPE="disc|circle|square" Permet de choisir la forme
de la puce (disc par défaut)
• Listes numérotées
L'attribut TYPE définit le type de numérotation:
1 : Numérotation en chiffres arabes (1, 2, 3… par défaut)
A: Numérotation en lettres majuscules (A, B, C…)
a: Numérotation en lettres minuscules (a, b, c…)
i : Numérotation en petits chiffres romains (i, ii, iii…)
I : Numérotation en grands chiffres romains (I, II, III…)
L'attribut START permet de spécifier à partir de quel niveau la
numérotation doit commencer
Tableaux
• Les tableaux sont délimités par les balises <table>... </table>
• Les balises <tr> ... </tr> (table row) délimitent les lignes
• Les balises <td> ... </td> (table data) délimitent les cellules
• Attention ! On déclare les lignes à l’intérieur du tableau, les
cellules à l’intérieur des lignes
• On peut ajouter de la structure à un tableau en :
donnant une légende au tableau avec les balises <caption
align="top|bottom" >... </caption> juste après la balise
ouvrante <table>
remplaçant les <td> ... </td> qui contiennent des en-têtes
(de ligne, de colonne) par des <th> ... </th> (table header)
Tableaux: Exemple1
Tableaux: attributs
<TABLE BGCOLOR= "couleur_fond " ALIGN="LEFT|RIGHT|CENTER"
WIDTH="pixels ou%" BORDER="pixels" CELLPADDING="pixels"
CELLSPACING="pixels">
Tableaux: attributs
<TR BGCOLOR="couleur" ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
VALIGN= "TOP|MIDDLE|BOTTOM" WIDTH="pixel" >
• ALIGN: Alignement horizontal du contenu de toutes les cellules de la
ligne
• VALIGN: Alignement vertical du contenu de toutes les cellules de la ligne
<TD BGCOLOR="couleur" ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
VALIGN="TOP|MIDDLE|BOTTOM" COLSPAN="nb" ROWSPAN="nb"
WIDTH="pixels ou %">
• ALIGN: Alignement horizontal cellule par cellule
• VALIGN: Alignement vertical cellule par cellule
Tableaux: attributs
• WIDTH
Largeur de la cellule en pixels ou en pourcentage de la largeur du tableau.
A spécifier une seule fois dans le tableau (ie pour une seule ligne) car elle
détermine la largeur de la colonne dont fait partie la cellule
• COLSPAN
Nombre de cellules fusionnées à l'horizontal
Permet de disposer du texte au dessus de plusieurs colonnes
• ROWSPAN
Nombre de cellules fusionnées à la verticale
Tableaux: Exemple2
Tableaux: Exemple3
Tableaux: Exemple4
Images
• Pour insérer une image dans un document HTML, on utilise la balise
<IMG SRC="URL" WIDTH="pixels" HEIGHT="pixels" ALT="texte
alternatif" BORDER="pixels" TITLE="description" ALIGN="LEFT|
RIGHT|TOP|ABSMIDDLE|MIDDLE|BOTTOM" HSPACE="pixels"
VSPACE="pixels" >
• SRC: Permet de préciser où se trouve l’image à insérer
• WIDTH: Largeur de l'image à afficher.
Si cette option n'est pas spécifiée, l'image est affichée à sa taille réelle.
On indique soit la valeur en pixel, soit en pourcentage de la taille
originale de l'image
• HEIGHT: Hauteur de l'image affichée (mêmes remarques que pour
WIDTH).
Images
• ALT: text qui s'affiche à la place de l'image en cas d'erreur
• BORDER: taille en pixel de la bordure autour de l'image
• TITLE: permet d'associer à l'image une annotation (Texte
apparaissant dans une info-bulle quand la souris est positionnée
pendant 1 à 2 secondes sur l'image)
• ALIGN: permet d’aligner une image par rapport à la ligne du texte
courante
• HSPACE et VSPACE permettent d’éloigner les texte de l’image
• NB : quand une seule des deux options WIDTH ou HEIGHT est
spécifiée, l'autre est automatiquement calculée en proportion.
Images
• Exemples
<img src="images/Arbre.jpg" alt="Arbre sapin" height="50%"
width="50%" title="Arbre sapin" border="3" >
<img src="http://www.wikipedia.org/images/robot.png"
alt="robot">
• Les formats d’images utilisables pour le Web sont :
Le JPEG (.jpg), un format adapté aux photos.
Le GIF (.gif) et le PNG (.png), des formats adaptés aux autres
types d’image ; le PNG est à préférer dans tous les cas
(transparence, profondeur de couleurs. . .) sauf besoin d’images
animées.
Liens
• Un lien se définit par le marqueur <a ...> suivi de l’attribut
HREF="URL" qui définit l’adresse du document vers lequel le
lien conduit. Il se termine par </a>
• Syntaxe: <A HREF="adresse"> texte ou image</A>
• Exemple:
<A HREF="http://www.wikipedia.org">aller vers wikipedia</A>
<A HREF="Accueil.html">Page d’accueil</A>
Liens externes
• Un lien externe est un lien qui mène vers un autre document
• Deux types de liens externes:
1. Liens vers des pages externes
Exemple:
<A HREF="http://www.wikipedia.org">aller vers wikipedia</A>
2. Liens vers des pages locales (même site)
Exemple:
<A HREF="Contacts.html">Mes contacts</A>
<A HREF="dossier1/Contacts.html">Mes contacts</A>
Liens externes
• Exemple
Liens externes
• Deux façons pour spécifier un lien:
Chemin absolu
Indique l'adresse complète du fichier. Il est généralement
utilisé pour afficher une page d'un autre site
Chemin relatif
Indique l'adresse du fichier par rapport à la page actuelle. Il
est vivement conseillé de l'utiliser dans son site web
Liens externes
• Exemple: Chemin relatif
Racine du site
Dossier1
Page1.html
Href=“Page2.html”
Page2.html Href= “SousDossier/Page3.html”
SousDossier Href=“../Dossier2/Page4.html”
Page3.html
Dossier2
Page4.html
Liens internes
• Les liens internes permettent de construire des tables de matières et
des renvois à l’intérieur du même document
• Un lien interne pointe vers une ancre, c’est à dire un endroit à
l’intérieur du même document défini par un nom
• Dans un lien interne, il faut définir:
L’ancre interne
Syntaxe: <A NAME (ou ID)="NomAncre"></A>
Exemple: <A NAME="HautPage"></A>
Le lien vers l’ancre
Syntaxe: <A HREF="#NomAncre">mots_sensibles</A>
Exemple:<A HREF="#HautPage>Aller en haut</A>
Frames
• Principe
Diviser la fenêtre d’affichage en frames
Afficher dans chaque frame une page HTML
• La balise de définition des cadres est<FRAMESET>. Elle indique
au navigateur qu'il va devoir créer des frames. Elle est placée en
dessous de la balise de fin d ’en-tête </HEAD>
• Il faut insérer autant de balises <FRAME> que de zones
différentes à l'écran.
Remarque: <NOFRAME> texte de remplacement </NOFRAME>
• Permet des spécifier le texte de remplacement pour le browser
ne gérant pas les frames
Frames
Division horizontale de l'écran
• <FRAMESET ROWS="h1,h2,...hn"></FRAMESET>
• Il y a autant de frames horizontales que l'on a indiqué de valeurs
• Exemple:
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,50%,*" >
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Frames
Division verticale de l'écran
• <FRAMESET COLS=" l1,l2,...ln"></FRAMESET>
Il y a autant de frames verticales que l'on a indiqué de valeurs
• Exemple:
<HTML>
<HEAD></HEAD>
<FRAMESET COLS="30%,70%" BORDER="5">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Frames
Division horizontale et verticale de l'écran
• Exemple:
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</HTML>
Frames
• L'élément FRAME permet de définir le contenu de chaque zone
<FRAME SRC="url" NAME="target_name"
SCROLLING="YES|NO|AUTO" {NORESIZE}
MARGINWIDTH="pixels" MARGINHEIGHT="pixels">
– SRC : URL de la page à afficher
– NAME : identifie la zone (lien hypertexte)
– SCROLLING : barre de défilement
– MARGINWIDTH : espace entre le doc à afficher et les frontières
gauche et droite de la frame
– MARGINHEIGHT : espace entre le doc à afficher et le haut et le
bas de la frame
– NORESIZE : bloque le redimensionnement de la frame
Frames
• Exemple
Index.html
<HTML><HEAD></HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="fichier1.html" NAME="frame1">
<FRAMESET ROWS="30%,70%">
<FRAME SRC="fichier2.html" NAME="frame2">
<FRAME SRC="fichier3.html" NAME="frame3">
</FRAMESET>
</FRAMESET></HTML>
Formulaires: Exemple
Formulaires
• Permettent d’interagir avec l’utilisateur en lui proposant d’entrer des
informations
• Un formulaire HTML est placé à l’intérieur d’une balise <form>
• Syntaxe
<form method="GET|POST" action="url" enctype="type"> …</form>
method : Méthode HTTP, valant soit "get" soit "post"
GET: envoie les paramètres dans l'URL
POST : On ne voit pas ce qui est envoyé dans l'URL
action :URL du script auquel sera soumis le formulaire
enctype: spécifie la méthode d’encodage pour un envoi en POST:
- application/x-www-form-urlencoded: encodage par défaut
- multipart/form-data: aucun encodage (utilisé pour file-upload)
• Exemple: <form method="post" action="action.php"> … </form>
Formulaires
En HTML, il est interdit de mettre des champs de formulaire directement
à l’intérieur d’un <form>. Il faut d’abord les regrouper:
• Dans des paragraphes <p> si les champs de formulaires sont à
l’intérieur de paragraphes de textes (rare)
• Dans des ensembles de champ <fieldset> pour regrouper des champs
de formulaire de sémantique proche
• Dans des divisions <div> sans contenu sémantique sinon
• Exemple
Etiquettes
• La plupart des champs sont accompagnés d’une étiquette
(<label>)
• Exemple: <label>Ville :</label>
Champs de saisie
• La balise <input> permet de définir les différents types de champ d’un
formulaire:
zone de saisie
case à cocher
bouton radio
bouton de confirmation
bouton de remise à zéro des champs
• L’attribut type détermine le type du champ
• L’attribut name(nom du paramètre de la requête HTTP) est obligatoire
(sauf pour les types "reset" et "submit" ) ; il permet de préciser au
serveur à quelle saisie on fait référence
• Exemple:
Cases à cocher
• type ="checkbox" permet de choisir plusieurs éléments parmi
une liste de possibilités
• L’attribut checked ="checked" permet de cocher la case par
défaut
• Certains langages côté serveurs imposent que les noms de
champs de formulaire à choix multiples se terminent par []
• Exemple
Boutons radio
• type ="radio" permet de choisir un seul élément parmi une liste
de possibilités
• La valeur retournée est obligatoirement précisée à l’aide de
l’attribut value
• L’attribut checked ="checked" permet de préciser la valeur par
défaut
• Exemple:
Fichiers joints
• type ="file" permet de joindre au formulaire un fichier
• À cause de la taille de la requête due au téléchargement (upload)
du fichier, il faut impérativement utiliser la méthode POST et
l’encodage multipart/form-data
• Exemple
<label for="fichier">Fichier:</label>
<input type="file" name="fichier" id="fichier">
Champs caché
• type ="hidden" permet de cacher des champs au client mais leur
contenu est envoyé avec le formulaire
• Ceci permet de préciser des informations, en utilisant l’attribut
value, concernant l’interaction client/serveur
• C’est à utiliser avec précaution car cela peut être à l’origine de
problèmes de sécurité assez graves
• Exemple
<input type="hidden" name="monnaie_utilisee" value="EUR">
<input type="hidden" name="customerCB" value="c2415-345">
Réinitialiser le formulaire
• type ="reset" permet de réinitialiser le formulaire en affectant
aux différents champs leur valeur par défaut
• Exemple
Soumettre le formulaire
• type ="submit" permet de soumettre le formulaire
• Le client envoie le contenu du formulaire à l’adresse précisée par
l’attribut action de la balise <form>
• L’attribut value permet de changer le texte du bouton
correspondant
• Exemple
<input type="submit" value="Enregistrer les donnes">
Menu de sélection
• La balise <select> permet d’ajouter une liste de sélection :
L’attribut facultatif size permet de préciser le nombre de
choix apparaissant sur la page Web. Par défaut, ce nombre
est initialisé à 1
L’attribut multiple ="multiple" permet d’autoriser des
réponses multiples. Dans ce cas, pour PHP, on donnera
toujours un nom se terminant par []
• Les choix du menu sont indiqués à l’aide de la balise <option> :
L’attribut value permet de spécifier la valeur associée au
choix
L’attribut selected ="selected" permet de spécifier le(s) choix
par défaut
F.A. AMAZAL Technologies du web 2016-2017 93
93
HTML Corps d’un document
Menu de sélection
• Exemple
Exercice
Caractères spéciaux
• Les documents HTML ne peuvent contenir que les symboles
du clavier américains (lettres, chiffre et signes de ponctuation)
• Les autres caractères sont codés :
Styles
• Police, taille et couleur du texte
<FONT FACE="police1,police2,famille..." SIZE="1 à 7"
COLOR="couleur"> texte... </FONT>
On peut spécifier les familles de polices suivantes : serif, sansserif, arial,
times new roman …
Taille par défaut=3 ; taille=4: +20% ; taille=2: -20% ; etc...
• Styles "physiques" (peuvent être combinés les uns avec les autres) :
<B> texte en gras </B>
<I> texte en italique </I>
<U> texte souligné </U>
• Indices et exposants
<SUB>indice</SUB>, <SUP>exposant</SUP>
Styles
• Centrage dans la page:
<P ALIGN="center"> texte ou objets... </P>
<CENTER> texte ou objets... </CENTER>
<DIV ALIGN="center"> texte ou objets... </DIV>
• Justification à droite :
<P ALIGN="right"> texte ou objets... </P>
<DIV ALIGN="right"> texte ou objets... </DIV>
Intérêt
• CSS : Cascading Style Sheets (Feuilles de style en cascade)
• Recommandation du W3C
• Plusieurs niveaux : CSS1 (1996), CSS2 (1998), CSS2.1 (2005),
CSS3 (en cours)
• Concept: Séparation de la forme et du contenu
La structure d’un document et son contenu sont décrits en
HTML
Sa présentation (mise en forme et mise en page) est gérée par
CSS
Intérêt
• Le document HTML et la feuille CSS peuvent être définis dans
des fichiers séparés
• Construction du document (HTML) sans se préoccuper de son
rendu visuel
Création plus efficace
Code HTML plus simple et plus lisible
On peut changer la feuille de style sans changer le
document (évolution du « look »)
• L’homogénéité visuelle d’un site est facilitée
Plusieurs pages peuvent partager la même feuille de style
Syntaxe du CSS
• Ensemble de règles de la forme :
sélecteur {
propriété: valeur;
}
• sélecteur : indique les parties du documents sur lesquelles
s’applique la règle
• propriété : propriété spécifique de mise en forme à modifier
• valeur : valeur de la propriété
• Les feuilles de style peuvent être validées avec un validateur
approprié, cf. http://jigsaw.w3.org/css-validator/
• Commentaires entre /* et */.
F.A. AMAZAL Technologies du web 2016-2017 102
102
CSS Langage CSS
Syntaxe du CSS
• Exemples
h1 {
color : blue ;
font - size : 120%;
}
Tous les éléments <h1> auront leur texte en bleu et une taille
de police de 120%
p{
color : grey ;
font – style: italic;
}
Tous les paragraphes auront leur texte en gris et en italique
Intégration à HTML
Styles en ligne
• Manière la plus simple d’utiliser les CSS
• Rajouter un attribut style sur les balises HTML
• On peut utiliser <span> si on a besoin d’une balise supplémentaire
• Encombre le code HTML avec des indications de mise en forme
• Exemples
Intégration à HTML
Styles en en-tête
• Intégration des propriétés de style à l’en-tête de la page avec la balise
<style>
• Utilisation des sélecteurs pour définir à quels élément les propriétés
s’appliquent
• Inconvénients : mélange HTML et CSS dans le même document,
impossible de réutiliser les propriétés CSS dans plusieurs documents
• Exemple
Intégration à HTML
Feuille de styles externe
• Mettre la feuille de style CSS dans un fichier à part (en général, on
utilise l’extension .css)
• Rajouter une balise <link> dont l’attribut rel est positionné à
"stylesheet" dans l’en-tête du document
• Permet d’utiliser la même feuille de style pour plusieurs pages Web
• Possibilité d’ajouter media="screen" ou media="print" , etc., pour
choisir différentes feuilles de style suivant le mode d’affichage
• Exemple
Cascade
• Plusieurs feuilles de style peuvent s’appliquer simultanément :
Plusieurs balises <link rel="stylesheet">
Directive @import d’une feuille de style
@import url(feuille_annexe.css);
• Au sein même d’une feuille de style, plusieurs règles peuvent être en
conflit
Sélecteurs de CSS
• Sélecteur simple : nom d’une balise
Exemple: ul { color: blue; }
met l’ensemble du contenu des listes non ordonnées en bleu
Sélecteurs de classe
Classe
• Permet d’ajouter plus de structure et de sémantique à un document
HTML
• Permet d’appliquer une mise en forme commune à tout ce qui fait
partie d’une class particulière
• Définie par l’attribut class et peut être utilisée sur n’importe quelle
balise HTML (ou, à défaut, sur une balise <span> )
• Exemples
<p>Je voudrais remercier en particulier
<span class="personne">Madame Laila</span>
et <span class="personne">Monsieur Adil</span>
</p>
Sélecteurs de classe
• Sélecteur de classe : nom d’une classe, préfixée d’un ‘.’, tel qu’il
apparaît dans un attribut class d’une balise HTML
Exemples
.personne { font-weight: bold; }
met l’ensemble des balises de classe personne en gras.
p.comment { font-style: italic; }
met l’ensemble des balises <p> de classe comment en italique
Sélecteurs d’identifiants
• Identifiant : défini par l’attribut id d’une balise HTML. Similaire aux
classes, mais il ne peut y avoir qu’une seule balise ayant un id donné
dans tout le document HTML
• Sélecteur d’identifiant : nom d’un identifiant, préfixée d’un ‘#’, tel qu’il
apparaît dans un attribut id d’une balise HTML
• Exemples
#introduction { font-size: 120%; }
met la balise d’identifiant introduction en plus gros.
p#introduction { font-size: 120%; }
met la balise <p> d’identifiant introduction en plus gros.
Sélecteurs contextuels
• Sélecteur contextuel: 2 sélecteurs ou plus séparés par des
espaces. A B sélectionne les B seulement s’ils sont contenus dans
des A
• Exemples
h1 em { color: blue; }
met les mots en emphase à l’intérieur d’un h1 en bleu
Pseudo-éléments
• Pseudo-élément : permet de mettre une règle sur quelque chose
qui n’est pas réellement une balise HTML
• Exemples
p:first-line { font-weight: bold; }
met la première ligne de chaque paragraphe en gras.
Pseudo-classes
• Pseudo-classe : permet de faire une sélection d’un élément
uniquement dans certains contextes
Sélecteurs et attributs
E[att]
• Tout élément E dont l’attribut att est défini
Exemple : ul[type], img[alt], *[title]
E[att=val]
• Tout élément E dont l’attribut att vaut val
Exemple : ul[type= " square"]
E[att~=val]
• Tout élément E dont l’attribut att est une liste de mots séparés
par des espaces, l’un de ces mots vaut exactement val
Sélecteurs et attributs
E[attˆ="prefixe"]
• Tout élément E dont la valeur de l’attribut att commence
exactement par prefixe
Exemple : a[href^="http://fil.univ-lille1.fr"]
E[att$="suffixe"]
• Tout élément E dont la valeur de l’attribut att se termine
exactement par suffixe
Exemple : img[src$=".png"], a[href$=".pdf"]
E[att*="val"]
• Tout élément E dont la valeur de l’attribut att contient la sous-
chaîne val
Exemple: img[alt*="diagramme"], *[title*="exercice"]
F.A. AMAZAL Technologies du web 2016-2017 116
116
CSS Sélecteurs de CSS
Combinaison de sélecteurs
S’appuie sur la structure arborescente du document
Si Sel1 et Sel2 sont des sélecteurs :
• Sel1 Sel2: tout élément sélectionné par Sel2 emboité dans un
élément sélectionné par Sel1
• Sel1 > Sel2: tout élément sélectionné par Sel2 qui est fils d’un
élément sélectionné par Sel1
• Sel1 + Sel2: tout élément sélectionné par Sel2 qui suit
immédiatement un élément sélectionné par Sel1
• Sel1 ~ Sel2: tout élément sélectionné par Sel2 qui suit un
élément sélectionné par Sel1
Combinaison de sélecteurs
• Exemple
Combinaison de sélecteurs
Exercice
Soit le code html suivant: Et soit la feuille de style
suivante (style.css):
Propriétés de longueur
Les propriétés admettent différentes unités de mesure se répartissant
suivant trois types de valeurs :
• Sous forme de pourcentage (par rapport à la valeur courante)
• Les valeurs relatives :
em: la valeur de la propriété font-size de la police utilisée
(hauteur du bloc dans lequel s’inscrit naturellement un
caractère)
ex: la hauteur du caractère x dans la police utilisée
• Les valeurs relatives à l’écran (à éviter pour avoir une conception de la
page indépendante de la résolution !)
px le nombre de pixels
• Les valeurs absolues (N’ont aucun sens pour une page Web destinée à
s’afficher sur un écran d’ordinateur !) : mm, cm, in, pt, pc
Styles de police
• font-family
Définit un nom de police (Times, Georgia, Arial, tahoma...) ou une
famille de police(serif, sans-serif, cursive, fantasy, monospace)
Il est recommandé de déclarer une famille générique après les polices
(séparer par une virgule) pour obliger le navigateur, si la police n’est
pas trouvée, à lui substituer une police similaire
• font-size
Définit la taille de la police (la plus part du temps exprimée en
pourcentage de la taille courante)
• font-style
Définit le style de l'écriture: normal, italique ou oblique
Styles de police
• font-weight
Définit l'épaisseur de la police: normal, bold, bolder
• font-variant
Définit la casse des caractères: normal ou small-caps (petites
majuscules)
• font
Raccourci pour les différentes propriétés de police
Exemple: p {font: italic small-caps bold 1.3em Arial, serif;}
• Exemple
p { font-family: "Times New Roman";
font-size: 130%;
font-weight: bold;
font-variant: small-caps;
}
F.A. AMAZAL Technologies du web 2016-2017 123
123
CSS Mise en forme
Styles de texte
• text-decoration
Définit une décoration du texte: none , underline (souligné), overline
(surligné), line-through (barré) ou blink (clignotant)
Exemple: A:visited {text-decoration: blink;}
• text-align
Définit l'alignement du texte: left, center, right ou justify
Exemple: H1 {text-align: center;}
• text-indent
Permet de décaler le début de la première ligne de texte d’une valeur
fixe ou proportionnelle à la valeur du paragraphe. Elle est souvent
utilisé avec <P>
Exemple: P {text-indent: 1em;}
Styles de texte
• text-transform
Définit la casse du texte: uppercase (majuscules) ou lowercase
(minuscules) ou capitalize (met le premier caractère en majuscule)
Exemple: P {text-transform: uppercase;}
• line-height
Définit l'interligne soit l'espace entre les lignes du texte. Une bonne
règle pour le texte dans le corps est de régler l’espace interligne à 1.2
fois la taille de la police (1.2em ou 120%).
Exemple: P {line-height: 1.2em;}
• vertical-align
Définit l’alignement vertical de la ligne de base d’un élément en
fonction de la propriété line-height : super (texte en exposant), sub
(texte en indice), baseline (normal), etc.
Styles de texte
• word-spacing
Définit l'espace entre les mots. Cet espacement peut être positif ou
négatif selon si on cherche à éloigner ou rapprocher ces éléments
Exemple: P {word-spacing: 5pt;}
• letter-spacing
Définit l'espace entre les lettres. Cet espacement peut être positif ou
négatif
Exemple: P {letter-spacing: 2pt;}
• list-style-image
Permet de remplacer les puces par une image: url ou none
Exemple: OL {list-style-image: url(image1.gif);}
Couleurs
Il existe différentes manières de spécifier les valeurs d’une couleur :
• Son nom (16 noms standards)
• Le code RGB (Red, Green, Blue): on donne une valeur entre 0 et 255
pour le rouge, le vert , le bleu ou bien 3 pourcentages
Exemple (couleur bleu): rgb(0,0,255) ou rgb(0%,0%,100%)
Couleurs
• Propriété color : fixe la couleur de la police
Exemple:
p {color=blue ;}
p {color=rgb(0,0,255) ;}
p {color=#0000ff ;}
• Propriété background-color : fixe la couleur de l’arrière plan
Exemple:
p { background-color=blue ;}
p { background-color=rgb(51,0,102) ;}
p { background-color=#ffffff) ;}
Arrière plan
• background-color
Définit la couleur de l'arrière-plan
Exemple: p {background-color: #000000;}
• background-image
Définit l'image de l'arrière-plan
Exemple: body {background-image: url(monImage.jpg);}
• background-repeat
Définit la façon de répéter l'image d'arrière-plan: repeat, no-repeat,
repeat-x (nombre de répétitions horizontales) ou repeat-y (nombre de
répétitions verticales
Exemple: P { background-image: url(image.jpg);
background-repeat: repeat-x }
F.A. AMAZAL Technologies du web 2016-2017 130
130
CSS Mise en forme
Arrière plan
• background-attachment
Spécifie si l'image d'arrière-plan reste fixe avec les déplacements de
l'écran: scroll ou fixed
Exemple: body { background-image: url("image.gif");
background-attachement: fixed;}
• background
Raccourci pour les différentes propriétés d'arrière-plan
Exemple: p {background: image.gif fixed repeat}
Exercice
Boîtes CSS
Tout élément structuré par une balise HTML (ou plusieurs) se représente
sous forme d’une « boîte » rectangulaire définie par:
• La zone de son contenu, représentée par une largeur (width) et une
hauteur (height)
• Un espace réservé à la bordure de la boîte (propriété border)
• Une marge interne à la boîte (padding), se situant entre la zone de
contenu et la bordure
• Une marge externe (margin) et se situe hors de la boîte, au-delà de
l’espace alloué à la bordure. Elle affecte le positionnement de l’élément
puisqu’elle pousse sa boîte ou ses soeurs environnantes.
Boîtes CSS
margin
Largeur et hauteur
• width : Largeur du contenu de l’élément (largeur ou auto). Par
défaut à auto , prend la taille maximale disponible
Remarque
• width et height peuvent être également utilisés pour les éléments
en ligne remplacés (comme <img> )
Débordement
• Si la hauteur du contenu est contrainte, le contenu peut déborder d’un
bloc. . .
• La propriété overflow contrôle le comportement :
visible : le contenu déborde de l’élément
hidden : le contenu est tronqué
scroll : des barres de défilement sont ajoutées
auto : des barres de défilement sont ajoutées quand c’est
nécessaire
• Par défaut : visible
Remarque
• Internet Explorer 6 ne gère pas overflow: visible;
Espacement
• Padding: Une marge interne se situant entre la zone de contenu et la
bordure
• Les propriétés permettant de définir les marges internes sont:
padding-top
padding-right
padding-bottom
padding-left
Padding: permet de définir d’un seul coup ces quatre propriétés,
dans l’ordre top right bottom left
• Par défaut : 0
Marges
• margin : espace entre la bordure de l'élément et les autres éléments
• Les propriétés permettant de définir les marges externes sont:
margin-top
margin-right
margin-bottom
margin-left
margin: permet de définir d’un seul coup ces quatre propriétés,
dans l’ordre top right bottom left
• Par défaut : 0
• Une marge peut être définie à auto , elle est alors automatiquement
calculée à partir des autres valeurs
Marges
• Exemple
Positionnement
• Le positionnement consiste à préciser où doit apparaître un élément
de manière relative, par rapport à un autre élément ou encore par
rapport à la fenêtre du navigateur
• Le positionnement est précisé par la propriété position
• Il existe 4 modes de positionnement : static, absolute , fixed et relative
• Chaque type a ses propres règles
• Fonctionnent avec les éléments de type bloc et les éléments de type en
ligne
• Les boîtes peuvent utiliser différents schémas et interférer entre elles
Positionnement
• Une fois le type de positionnement choisi, on peut spécifier les
propriétés de décalage : top , right , bottom et left
Positionnement statique
• Le positionnement statique est le comportement par défaut :
L’ordre dans lequel apparaissent les balises dans le code HTML est
celui dans lequel les boîtes sont affichées et s’empilent dans le
document(ce schéma de positionnement se nomme le flux courant)
Positionnement statique
• Exemple
Positionnement absolu
• Le positionnement absolu permet de retirer totalement un élément du
flux et de le positionner par rapport à son conteneur (plus
précisément, par rapport au conteneur le plus proche ayant un
positionnement relatif)
• Syntaxe
Selecteur {
position :absolute ;
left :valeur ; /* optionnel */
right :valeur ; /* optionnel */
top :valeur ; /* optionnel */
bottom :valeur ; /* optionnel */
}
• Pour un positionnement absolu par rapport à la page (cas le plus
fréquent), on utilisera body { position: relative; }
Positionnement absolu
• Exemple
Code html Code CSS
Positionnement absolu
• Exemple
Code CSS
Positionnement fixe
• Le positionnement fixe permet de retirer totalement un élément du
flux et de le positionner par rapport à la fenêtre d’affichage
• L’objet reste à sa position même si on descend dans la fenêtre
• Attention : Ne fonctionne pas avec Internet Explorer 6
• Syntaxe
Selecteur {
position: fixed ;
left: valeur ; /* optionnel */
right: valeur ; /* optionnel */
top: valeur ; /* optionnel */
bottom: valeur ; /* optionnel */
}
Positionnement fixe
• Exemple
Positionnement relatif
• Le positionnement relatif permet de décaler un élément d’une certaine
distance
• Un élément positionné relativement se place par rapport à sa position
classique dans le flux. Il est ensuite décalé si au moins une des
propriétés top, right, bottom ou left est renseignée.
• La notion de « relatif » s’applique par conséquent à son emplacement
initial dans le flux
• Syntaxe
Selecteur {
position: relative;
left: valeur ; /* optionnel */
right: valeur ; /* optionnel */
top: valeur ; /* optionnel */
bottom: valeur ; /* optionnel */
}
F.A. AMAZAL Technologies du web 2016-2017 155
155
CSS Mise en page
Flottement
• Le flottement n’est pas vraiment un positionnement : les éléments dits
flottants sont pris dans le flux et les autres éléments les contournent
(l’élément flotte et le reste l’entoure)
• Le flottement est défini par la propriété float qui peut prendre les
valeurs :
left : flottement à gauche (l’élément flottant se trouve à gauche et
sera contourné par la droite)
right : flottement à droite
none : pas de flottement (valeur par défaut). Elle sert
principalement à écraser un style existant
• Tout bloc (image, texte, etc.) peut être défini comme un élément
flottant
Flottement
• Exemple: Flux normal (sans flottement)
Code CSS
Flottement
• Exemple: avec flottement
Flottement à gauche Flottement à droite
Flottement
• Exemple: avec flottement
Dégagement
• On peut arrêter un flottement avec la propriété CSS clear
• Syntaxe: clear :valeur ;
Avec valeur :
Left: arrête le flottement à gauche
Right: arrête le flottement à droite
Both: arrête le flottement à droite et à gauche
None: ne fait rien
• L’élément contenant clear se place en dessous de l’élément flottant
Dégagement
• Exemple
Dégagement
• Exemple
Visibilité et affichage
• La visibilité d’un élément peut être complètement contrôlée en
utilisant la propriété visibility :
visible: permet de rendre visible l’élément
hidden: permet de rendre invisible un élément ; la mise en page
continue à le prendre en compte
Tables
• La place de la légende peut être précisée par la propriété caption-side :
elle peut être au-dessus top ou en-dessous bottom de la table.
(Attention : Ne fonctionne pas avec Internet Explorer 6/7)
• Les bordures des cellules peuvent :
Être fusionnées border-collapse: collapse
Être séparées border-collapse: separate . La propriété border-spacing
précise alors l’espacement entre deux bordures (Attention : Ne
fonctionne pas avec Internet Explorer 6/7)
• Les cellules vides identifiées par la propriété empty-cells peuvent
apparaître show ou non hide. (Attention : Ne fonctionne pas avec
Internet Explorer 6/7)
• On peut régler largeur et hauteur des cellules avec width et height
Introduction
• Le Javascript est un langage "de script objet" :
Initialement élaboré par Netscape en association avec Sun
Microsystem
Standardisé par un comité spécialisé, l'ECMA (European Computer
Manufactures Association)
• Javascript permet :
De rendre dynamique un site internet développé en HTML :
Validation de formulaires, calculs, messages,
Modification de la page web
De développer de véritables applications fonctionnant exclusivement
dans le cadre d'Internet
Caractéristiques principales
• Le Javascript est :
Ecrit directement dans le document HTML
Un script encadré par des balises HTML
Exécuté chez le client
Interprété (pas compilé)
Sensible à la casse
• Supporté par la plupart des navigateurs web
• Syntaxe proche du C / Java
• Typage faible
• Chaque instruction se termine par un point virgule
Intégration à HTML
Le code JavaScript peut être inséré:
• Directement dans le fichier HTML
Utilisation de la balise script (à placer dans <head> ou <body>)
Intégration à HTML
Dans le corps de la page HTML
• Il est immédiatement exécuté en même temps que le code HTML
est interprété
• Exemple
Intégration à HTML
Dans l'entête de la page
• Le code s'exécute lors d'un événement venant de l'utilisateur
• Le code correspondant à cet événement se trouve dans le corps
du document
• Exemple
Intégration à HTML
Dans un fichier externe
• A placer dans le <head> ou le <body>
• Permet de réutiliser les scripts dans plusieurs pages
• Exemple
Variables
• Déclaration de variables optionnelle (mais conseillée)
• Déclaration avec le mot clé "var"
var nom_variable
• Exemple: var a=5;
var txt="salut"; ou var txt=‘salut’;
b=13; //utilisation de b sans déclaration
a=true; // Changement de type pour a
• Remarques
Javascript est faiblement typé: il n’est pas nécessaire de déclarer le
type et peut changer le type à tout moment
Une variable déclarée non affectée est de type undefined (indéfinie)
Variables: Identificateur
Le nom d’une variable doit respecter les contraintes suivantes:
• Doit commencer par une lettre ou un souligné « _ »
• Peut comporter:
des lettres
des chiffres
le caractère _
le caractère $
• Ne peut pas utiliser des mots réservés (else, if, var, case….)
Variables: Types
• Le type d’une variable dépend de la valeur stockée dans celle-ci (Pas de
déclaration de type)
Exemple: var a = ‘ Philippe ’; // type string
a=10; // type nombre (number)
• Trois principaux types de valeurs
String: "chaine" ou 'chaine'
Number:
- Entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16)
- Flottant : 0.123, -0.4e5, .67E-89
Boolean: true, false
• Null : possède une seule valeur, null, qui signifie l’absence de données
dans une variable
Variables
• La fonction typeof retourne le type d’une variable
• Exemple
Opérateurs
• Arithmétique
Binaires: +, -, *, /, %
Unaires: -(opposé), ++, --
• Affectation
simple: =
arithmétique: +=, -=, *=, /=, %=
• Comparaison
==, !=, <, <=, >, >=
• Logique
Binaire: &&, ||
Unaire: ! (Non)
Entrées/sorties
• Trois types de boites de dialogues peuvent être ouvertes en utilisant les
méthodes alert, confirm et prompt
alert()
Permet d’écrire un message dans une fenêtre
Exemple: alert("Bonjour");
confirm()
Ouvre une boîte de dialogue avec 2 boutons OK et Annuler,
retourne un booléen
Exemple: rep=confirm("Voulez-vous
quitter?");
Entrées/sorties
prompt()
Ouvre une boîte de dialogue avec une zone saisie et 2 boutons OK
et Annuler, retourne l'information lue
Exemple
Entrées/sorties
• Méthodes de l’objet document
write(message): Permet d’écrire directement dans la page web
writeln(message): Permet d’écrire directement dans la page web
avec un retour chariot (ajoute le caractère \n)
• Exemple
Structures conditionnelles
• L’instruction conditionnelle « if » simple
Structures conditionnelles
• L’instruction de sélection multiple "switch"
switch(expression)
{
case valeur_1 : Instructions à exécuter si variable==valeur_1 ;
break ;
case valeur_2 : Instructions à exécuter si variable==valeur_2 ;
break ;
….
default : Instructions à exécuter si toutes les conditions
précédentes ne sont pas vérifiées ;
}
Structures conditionnelles
• Exemple
Structures itératives
• L’instruction itérative « for »
for (instr_initialisation ; condition ; instr_fin)
{
bloc d’instructions ;
}
Ou bien
for (variable in objet)
{
bloc d’instructions ;
}
Structures itératives
• Exemple
Structures itératives
• L’instruction itérative « while »
while (condition)
{
bloc d’instructions
}
Structures itératives
• Exemple
Fonctions
• Une fonction est un sous-programme qui permet d'effectuer un
traitement donné
• On précise entre parenthèses les arguments, non typés, séparés
par des virgules
• Pas de type dans la signature de la fonction
• Une fonction peut retourner ou non un résultat. Pour retourner
un résultat on utilise l’instruction return
function Nom_Fonction(argument1, argument2, ...)
{
instructions de la fonction
return expression; //optionnel
}
Fonctions: appel
• on appelle une fonction en précisant les paramètres effectifs entre
parenthèses
• Exemple1
function Affiche(txt)
{
document.write(txt);
}
Appel: Affiche('hello')
• Exemple2:
function somme(a,b)
{ som=a+b;
return som;
}
Appel: Res=somme(1,3);
Fonctions: appel
• Exemple3: Calcul de la factorielle
Fonctions: appel
• Exemple4
Fonctions prédéfinies
isFinite
• Détermine si le paramètre est un nombre fini. Renvoie false si ce n'est
pas un nombre ou l'infini positif ou infini négatif
isFinite(240) true
isFinite("Un nombre") false
isNaN
• Détermine si le paramètre n’est pas un nombre (NaN : Not a Number)
Fonctions prédéfinies
parseFloat
• Convertit une chaîne de caractères en un nombre réel
• Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a
Number)
var txt="125.6";
var a=parseFloat(txt); //retourne le nombre 125.6 (a=125.6)
parseInt
• Convertit une chaîne de caractères en 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)
var prix="30";
var p = parseInt(prix); //retourne 30 (p=30)
p= parseInt(prix,16); // retourne 48 (p=48)
F.A. AMAZAL Technologies du web 2016-2017 197
197
Javascript Fonctions
Fonctions prédéfinies
Remarque: parseInt/parseFloat
• Seul le premier nombre dans la chaîne est retourné, les autres
caractères (y compris ceux correspondant à des nombres) sont ignorés
• Si le premier caractère ne peut être converti en un nombre, le résultat
sera NaN
• Les espaces en tête sont ignorés
Fonctions prédéfinies
Remarque
• Une chaîne dont les caractères représentent un nombre est convertie
en ce nombre
" 12.5 " * 3; 37.5
"99" - 5; 94
"99" + 5 "995"
"340" + 7 "3407"
Fonctions prédéfinies
Number
• Convertit l'objet spécifié en valeur numérique
var txt="234";
a=Number(txt);
document.write(a +" : "+ typeof(a) +"<br>");
document.write(Number(true));
String
• Convertit l'objet spécifié en chaîne de caractères
a=234;
txt=String(a);
document.write(txt +" : "+ typeof(txt) +"<br>");
document.write(String(true));
Les objets
• JavaScript intègre :
Objet String
Propriétés
• length: retourne la longueur de la chaîne de caractères
• …
Méthodes
• charAt(pos): renvoie le caractère se trouvant à la position pos
• concat(chaine2, chaine3, …): permet de concaténer plusieurs chaînes
de caractères
• indexOf(sous_chaine[, index]): retourne l'indice de la première
occurrence d'un caractère dans une chaîne
• lastIndexOf(sous_chaine[, index]): retourne l'indice de la dernière
occurrence d'un caractère dans une chaîne
Objet String
Méthodes
Objet String
Exemple
Objet Math
Propriétés
• PI, E, LN10, LN2, LOG10E, LOG2E, SQRT2
Méthodes
• abs(val): retourne la valeur absolue d’un nombre
• round(val) : retourne l’entier arrondi le plus proche
• floor(val): retourne l’entier immédiatement inférieur (ou égal)
• ceil(val): retourne l’entier immédiatement supérieur (ou égal)
• random(): retourne un nombre aléatoire entre 0 et 1
• max(val1, val2), min(val1, val2), pow(val, puiss), sqrt(val), acos(val),
cos(val), exp(val), log(val), …
Objet Math
Exemple
Objet Array
• Déclaration
var t1 = new Array(taille) ;
var t2 = new Array(1, "a", 9) ;
var t3=[1, "a", 9];
Remarque: les indices commencent à partir de 0
• Utilisation
var t = new Array(1, "a", 9) ;
window.alert(t[0]) ; // 1
t[2] = 6 // 6 remplace 9
• Accroissement automatique de la taille
var t = new Array(2) ;
t[200] = 5 ;
alert(t.length); //201
Objet Array
• Parcours
Objet Array
Propriétés
• length: retourne le nombre d'éléments du tableau
• …
Méthodes
• concat(tab2, tab3, …): permet de concaténer plusieurs tableaux
(renvoie un nouveau tableau construit à partir des différents tableaux)
• join(sépar): transforme un tableau en une chaîne de caractère dans
laquelle les éléments sont séparés par un caractère de séparation. Le
caractère de séparation par défaut est la virgule.
• push(val1, val2, …): ajoute des éléments à la fin du tableau
• pop(): supprime le dernier élément d’un tableau et retourne sa valeur
Objet Array
Méthodes
Objet Array
Exemple1
Objet Array
Exemple2
Objet Date
Méthodes
• getDay(): Permet de récupérer la valeur du jour de la semaine pour la date
spécifiée (Entier entre 0 (dimanche) et 6 (samedi))
• getDate(): Permet de récupérer la valeur du jour du mois (Entier entre 1 et
31)
• getMonth(): Permet de récupérer le numéro du mois (Entier entre 0 et 11)
• getFullYear(): Permet de récupérer la valeur de l'année sur 4 chiffres pour
la date passée en paramètre (Entier (XXXX))
• getYear(): Permet de récupérer la valeur de l'année sur 2 chiffres pour
l'objet Date (Entier (XX))
• getHours(): Permet de récupérer la valeur de l'heure (Entier entre 0 et 23)
• getMinutes(): Permet de récupérer la valeur des minutes (Entier entre 0 et
59)
Objet Date
Méthodes
• getSeconds(): Permet de récupérer le nombre de secondes (Entier
entre 0 et 59)
• getTime(): Permet de récupérer le nombre de millisecondes depuis le
1er janvier 1970 (Entier)
• setDate(X): Permet de fixer la valeur du jour du mois (entre 1 et 31)
• setYear(X): Permet de fixer l'année
• setMonth(X): Permet de fixer le numéro du mois (entier entre 0 et 11)
• setHours(X): Permet de fixer la valeur de l'heure (entier entre 0 et 23)
• setMinutes(X): Permet de fixer la valeur des minutes (entier entre 0 et
59)
• setSeconds(X): Permet de fixer la valeur des secondes (entier entre 0
et 59)
Objet Date
Exemple
Objets éléments
• JavaScript traite les éléments qui s'affichent dans le navigateur comme
des objets, c'est-à-dire des éléments :
classés selon une hiérarchie pour pouvoir les désigner précisément
window.document.form.checkbox
Objets éléments
Propriétés
• Une propriété est un attribut, une caractéristique, une description de
l'objet
Méthodes
• Une méthode est une fonction de traitement de données associée à un
objet
• Exemple : objet Input
Objets éléments
Evénements
• Les événements sont des actions de l’utilisateur, qui vont pouvoir
donner lieu à une interactivité
• L’événement correspond à un clic de souris, une sélection d’un champ,
une touche pressée au clavier. . .
• Il est possible d’associer des fonctions à des événements
onEvenement="Action_Javascript_ou_Fonction()"
Elément window
• L'objet window représente la fenêtre du navigateur
• Méthodes
alert()
Ouvre une boîte de dialogue avec le message passé en paramètre
confirm()
Ouvre une boîte de dialogue avec 2 boutons OK et Annuler,
retourne un booléen
prompt()
Ouvre une boîte de dialogue avec une zone saisie et 2 boutons OK
et Annuler, retourne l'information lue
Elément document
• L'objet "document" fait référence au contenu de la fenêtre
• "document" = ensemble des éléments HTML de la page
• Propriétés
title : titre du document
bgColor : couleur de fond
forms[ ] : tableau des formulaires de la page
forms.length : nombre de formulaire(s) de la page
links[ ] : tableau des liens de la page
links.length : nombre de lien(s) de la page
images[ ] : tableaux des images
• Méthodes
write(string): écrit une chaîne dans le document
writeln(string): idem + caractère de fin de ligne
Formulaire
But
• Interaction avec l’utilisateur sous la forme d’une saisie
d’informations
Intérêt de JavaScript
• Augmenter l’interaction du côté client pour :
assister et guider le visiteur
contrôler la saisie
réaliser des traitements (calcul, …)
envoyer des résultats au serveur
Formulaire
Propriétés
• Name : nom (unique) du formulaire
• Method : méthode de soumission (0=GET, 1=POST)
• Action : action déclenchée par la validation du formulaire
• Target: fenêtre cible du formulaire(utile dans le cas d’une
page comportant des frames ou de multiples fenêtres)
• Encoding: Type d'encodage du formulaire
• Elements[ ] : tableau des éléments du formulaires
• Length : nombre d’éléments du formulaire
Formulaire
Méthodes
• submit() : soumet le formulaire
• reset() : réinitialise le formulaire avec les valeurs par défaut
Événements
• onSubmit(): Détecte la soumission du formulaire
• onReset() : Détecte la réinitialisation du formulaire
Formulaire
Accès à l’objet correspondant à un formulaire
• Exemple
• 3 possibilités
document.Form1 (ou Form1)
document.forms[0]
document.forms["Form1"]
Formulaire
Accès aux éléments d’un formulaire
• Exemple
• 3 possibilités :
document.Form1.champ1
document.Form1.elements[0]
document.Form1.elements["champ1"]
Formulaire
Exemple
F.mail.value
document.F.mail.value
document.forms[0].elements[0].value ;
document.forms["F"].elements["mail"].value
Objet this
document.forms.elements
Objet this
Exemple
onMouseOut onMouseOver
Événement onMouseOut
Événement onKeyUp/onKeyDown
Contrôle de nombre de caractères(2)
Sélection d’éléments
• Pour manipuler les éléments d’une page HTML, il faut au préalable les
sélectionner
• Exemple
• Elle a pour résultat la liste des éléments sélectionnés. Cette liste est
dynamique
querySelector