CCS and JavaScript

CSS et JavaScript
Aziza EL OUAAZIZI
Cours SMI(S3)
Faculté Polydisciplinaire de Taza
Université Sidi Mohammed Ben Abdallah
CSS
 Le CCS Cascading Style Sheets (feuilles de style en cascade) est le langage
à balises qui vient compléter le HTML: il permet de gérer la mise en forme
d'un site Web.
 Inconvénients du code HTML sans CSS:
<table border="2" bgcolor="yellow" cellpadding="0" >
– Répéter la même définition de style à chaque fois qu'on souhaite l'utiliser dans
une page où dans les diverses pages d'un site Internet. Ces répétitions
augmentent la taille des pages Web.
– A chaque fois qu'on souhaite modifier ce style il faut re-parcourir le contenu de
toutes les pages pour les mettre à jour.
– Les styles sont figés, le contenu se présentent de la même façon pour tous les
usages possibles : écran, imprimante, PDA,...
2
Mettre en forme un site avec CSS
 les navigateurs ne connaissent pas toutes les propriétés CSS qui existent.
Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS.
 Si le navigateur ne connaît pas une propriété CSS, il l'ignore et ne met pas

en forme le contenu correspondant, mais cela ne fait pas planter la page
web, elle sera donc toujours lisible.
 Il y a trois façon de définir des styles CSS :

– Dans le corps du code HTML
– Dans l'en-tête de la page
– Dans une feuille de style totalement séparée du code HTML
3
Définir le style dans le corps du code HTML
 Consiste à ajouter un attribut style à n'importe quelle élément HTML. On
insère le code CSS directement dans cet attribut.
 Exemple
– Code
<p style="background-color:orange; border:1px solid black; color:yellow;
font-size:150%; padding:1em;"> Ce paragraphe a du style !</p>
– Rendu visuel
4
Définir le style dans l'entête du code HTML
 Consiste à insérer le code CSS directement dans une balise <style> à
l'intérieur de l'en-tête <head>.
 Exemple <!DOCTYPE html>

<html>
Code: <head>
<style>
p
{
background-color:orange;
border:1px solid black;
color:yellow;
font-size:150%;
padding:1em;
}
Rendu visuel:
</style>
</head>
<body>
<p>Ce paragraphe a du style !</p>
</body>
</html>
5
Définir le style un fichier CSS séparé
 La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant
de vos pages HTML. Grâce à cette méthode, toutes les pages qui font référence à cette
feuille de style externe hériteront de toutes ses définitions.
 Exemple
Fichier test.css: Rendu Visuel:
p
{
background-color:orange;
border:1px solid black;
color:yellow;
font-size:150%;
padding:1em;
}
Code HTML utilisant le fichier mes-style.css:

<head>
<link href="test.css" rel="stylesheet">
</head>
<body>
<p>Ce paragraphe a du style !</p>
</body>
6
Avantage du CSS séparé
 l y a de multiples avantages à séparer les feuilles de styles du contenu. Citons en
particulier :
– Réduction de la taille des pages : Les définitions de style ne sont faites qu'une seule fois,
même si elles sont utilisées plusieurs fois.
– Mise à jour plus facile : On n'aura besoin que de changer la feuille de style pour mettre à
jour la présentation de l'ensemble d'un site Web.
– Réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache)
le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les
contenus des pages devront être chargés au cours de la navigation.
– Scinder le travail de rédaction et le travail de présentation : On pourra commencer à
rédiger le contenu des pages sans se soucier de leur présentation finale. Penser
simplement à placer correctement vos balises sémantiques (titre, sous-titres, listes,
classes et ID,...). On pourra travailler la mise en page et le design plus tard.
7
Structure d'un fichier CSS
Une feuille de style est un ensemble de jeux de règles de mise en forme applicables aux éléments HTML.
Une règle CSS est composée d’un sélecteur de règle et d’un bloc de déclarations réunies à l’intérieur d’un bloc
délimité par les caractères accolades {}.
Deux types de sélecteurs:
– Sélecteur simple: permet de sélectionner un élément HTML (p, h1, body …)
– Sélecteur complexe: permet de sélectionner un élément HTML en particulier ou un jeu d’éléments HTML
en fonction de leurs attributs ou même de leur état.
/*Commentaire CSS*/ body

{
Sélecteur 1 background-color:silver;
{ letter-spacing:1em; Sélecteurs simples
propriété 1:valeur 1; }
propriété 2:valeur 2; p
… {
} font-style:italic; déclaration
Sélecteur 2 font-family:"Comic sans Ms",serif;
{ }
propriété 1:valeur 1; .css Sélecteur complexe
propriété 2:valeur 2; {
… box-shadow: 20px 20px 15px blue;
} float:right;
Bloc de déclaration
… }
8
Sélecteurs simples
 La manière la plus simple de cibler un type d’éléments HTML en CSS est d’utiliser des sélecteurs
simples appelés aussi sélecteurs éléments.
– Par exemple, le sélecteur CSS p permet de cibler tous les éléments p (c’est-à-dire tous les paragraphes)
d’une page HTML pour les mettre en forme tous de la même manière.
Fichier test.html Fichier test.css
<!DOCTYPE html> /*Les titre h1 va s'afficher en rouge*/
<html> h1{
<head> color: red;
<meta charset="utf-8" /> }
<title>Page Web stylée</title> /*Les paragraphes seront bleus*/
<link href="test.css" rel="stylesheet"> p{
</head> color: blue;
}
<body> /*Le texte des liens sera vert et gras*/
<h1>Un titre de niveau 1</h1> a{
<p>Un paragraphe contenant un color: green;
<a href="http://wikipedia.org">lien</a></p> font-weight: bold;
<p>Un deuxième paragraphe</p> }
</body>
</html>
9
Sélecteur universel *
 Ce sélecteur permet d’appliquer les mêmes styles à tous les éléments d’une page. Cela peut
être très utile pour par exemple définir une police par défaut ou définir les marges de tous les
éléments pour ensuite les positionner plus précisément.

<!DOCTYPE html> /*tous les éléments s'afficheront en rouge*/
<html> *{
<head> color: blue;
<title>Page Web stylée</title>
</head>
<body>
<h1>Un titre de niveau 1</h1>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe</p>
<ul>
<li>Elément de liste 1</li>
</ul>
</body>
</html>
10
Appliquer le même style à plusieurs éléments
 Pour appliquer un même style à plusieurs types éléments différents sans avoir à recopier le style plusieurs
fois en CSS, nous allons simplement séparer nos deux sélecteurs par une virgule.
– Les styles CSS déclarés juste après s’appliqueront ainsi aux deux éléments ou groupes d’éléments
sélectionnés.
<!DOCTYPE html> /*Les éléments h1 et p afficheront en rouge*/
<html> h1,p{
<head> color: blue;
</head>
<body>
<ul>
</ul>
</body>
</html>
11
Utiliser plusieurs sélecteurs CSS à la suite
 En mentionnant plusieurs sélecteurs à la suite en CSS, nous allons pouvoir appliquer des styles à
certains éléments contenus dans d’autres éléments.
 Par exemple, utiliser le sélecteur p a en CSS va nous permettre d’appliquer des styles à tous les
éléments a contenus dans des éléments p.
<!DOCTYPE html> p a
<html> {
<head> background-color: yellow;
</head>
<body>
<p>Un autre paragraphe avec un
<a href="#">lien</a>
</p>
<ul>
<li><a href="#">Elément de liste (lien) 1</a></li>
</ul>
</body>
</html>
12
Appliquer des styles aux enfants directs
 Pour cibler uniquement un élément ou un groupe d’éléments enfants directs d’un autre élément, on utilise
le signe de supériorité stricte ou le caractère chevron fermant >.
 Un élément est un enfant direct ou « descendant direct » d’un autre élément s’il est directement contenu
dans celui-ci.
<!DOCTYPE html> body > a
<html> {
</head>
<body>
<a href="#">Un lien</a>
</p>
<ul>
</ul>
</body>
</html>
13
Sélectionner l’élément suivant directement un autre élément
 Le CSS permet de cibler encore plus précisément un élément en ciblant l’élément suivant
directement un autre élément grâce au caractère +.
 Par exemple, on va pouvoir cibler les éléments a (liens) suivant directement un élément p:
<!DOCTYPE html> p + a
<html> {
</head>
<body>
<a href="#">Un autre lien</a>
</p>
<ul>
</ul>
</body>
</html>
14
Sélectionner tous les éléments suivant un autre élément
 Le CSS permet de cibler tous les éléments suivant un autre un élément grâce au caractère ~.
 Par exemple, on va pouvoir cibler tous les éléments a placés après un élément p et qui sont de
même niveau:
<!DOCTYPE html> p ~ a
<html> {
</head>
<body>
<a href="#">Un autre lien</a>
</p>
<ul>
</ul>
<a href="#">Un dernier lien</a>
</body>
</html>
15
Sélectionner un élément avec attribut
E[attribut] : un élément E qui possède un attribut

a[title] Sélectionne tous les liens <a> qui possèdent un attribut title.
{ Exemple :
<a href="http://site.com" title="Infobulle">
}
E[attribut="Valeur"] : un élément E avec un attribut et une valeur exacte
a[title="Cliquez ici"] Sélectionne tous les liens <a> qui possèdent un attribut title qui
{ doit en plus avoir exactement pour valeur « Cliquez ici ».
} Exemple :
<a href="http://site.com" title="Cliquez ici">
E[attribut*="Valeur"] : Un élément E avec un attribut et une valeur

a[title*="ici"] Sélectionne tous les liens <a> qui possèdent un attribut title qui doit
{ cette fois contenir dans sa valeur le mot « ici » (peu importe sa
} position).
Exemple :
<a href="http://site.com" title="Quelque part par ici">
16
Les attributs class et id
 Les attributs HTML class et id sont des attributs dits globaux car on peut les ajouter dans la
balise ouvrante de n’importe quel élément HTML pour le cibler.
– Les valeurs de ces attributs ne doivent contenir ni caractères spéciaux ni espaces et commencer par
une lettre.
– Chaque attribut id doit avoir une valeur propre ou unique dans une page. En revanche, plusieurs
attribut class peuvent avoir les mêmes valeurs.
– Pour la feuille de style CSS, les sélecteurs seront écrites avec la syntaxe #nom_id pour les id et
.nom_de_classe pour les class.

<!DOCTYPE html> #orange{
<html> color: orange;
<head> }
</head> #gros{
<body> font-size: 24px;
<h1 id="orange">Un titre de niveau 1</h1> }
<p class="bleu">Un premier paragraphe</p>
<p class="bleu">Un autre paragraphe avec un</p> .bleu{
<p id="gros">Un troisième paragraphe</p> color: blue;
</body> }
</html>
17
Affecter plusieurs attributs class à un élément HTML
 Une bonne pratique en CSS et pour la création d’un site est de ne pas surcharger un sélecteur
.class avec de nombreux styles CSS mais au contraire d’utiliser de multiples sélecteurs .class
qui se contenteront de définir chacun un comportement ou plusieurs propriétés d’un même
type.
– Il suffit d’indiquer les différentes valeurs séparées par un espace.
Fichier test.css
Fichier test.html .gros{
font-size: 24px;
<!DOCTYPE html>
}
<html>
.italique{
<head>
font-style: italic;
}
</head>
.souligne{
<body>
text-decoration: underline;
<h1 class="gros souligne orange">Titre 1</h1>
}
<p class="bleu">Un premier paragraphe</p>
.orange{
color: orange;
<h2 class="gros italique">Titre 2</h2>
}
</body>
.bleu{
</html>
color: blue;
}
18
Les éléments HTML div
 On utilise l’élément div comme conteneur pour différents éléments afin de pouvoir ensuite
facilement appliquer les mêmes styles CSS à tous les éléments contenus dans div par héritage
ou pour les mettre en forme en appliquant un style spécifique au div.
<!DOCTYPE html> body{
<html> background-color: lightBlue;
<head> }
</head> div{
<body> color: white;
<h1>Un titre de niveau 1</h1> background-color: purple;
<div> width: 80%;
<p>Un premier paragraphe</p> }
</div>
<p>Un troisième paragraphe</p>
<div>
<p>Un dernier paragraphe</p>
</div>
</body>
</html>
19
Les éléments HTML span
 L’élément span serve de conteneur à un autre niveau: il sert de conteneur interne à un
élément plutôt que de conteneur pour plusieurs éléments.
<!DOCTYPE html> div{
<html> color: white;
<head> background-color: lightBlue;
<link href="test.css" rel="stylesheet"> width: 80%;
</head> }
<body>
<h1>Un titre de niveau 1</h1> Span{
<div> color: purple;
<p>Un premier paragraphe</p> background-color: red;
<p>Un <span>autre</span> paragraphe</p> }
</div>
<p>Un troisième paragraphe</p>
<div>
<p>Un dernier paragraphe</p>
</div>
</body>
</html>
20
Propriétés CSS
Les propriétés de mise en forme du texte:
Valeur de l'attribut type Effet
font-family permet de définir une liste de polices de caractères alternatives séparées par le
caractère virgule ,.
font-size permet de spécifier la taille des caractères d’un texte exprimée en nombre de
points pt, en nombre de pixels px, en millimètre mm, en centimètres cm, en pica
pc ou en pouces (inch) (1 in=6 pc=72 pt=2,54 cm).
font-variant spécifie si les caractères doivent être rendus normaux (normal) ou en petites
capitales (small-caps).
font-style permet de précise l'aspect dans lequel doit être rendu le texte : en italique
(italic) ou normal (par défaut).
font-weight permet de mettre le texte en gras. Le degré de graissage de texte peut être
indiqué avec une valeur comprise entre 100 et 900 ou avec des valeurs
prédéfinies : extra-light, demi-light, light, medium, demi-bold, bold, extra-bold,
bolder pour le graissage supérieur et lighter pour le graissage inférieure.
font-stretch permet d’indique le taux de condensation du texte. Les valeurs possibles sont :
normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-
condensed, semi-expanded, expanded, extra-expanded et ultra-expanded.
21
Propriétés CSS
Attribut Effet
permet de définir la couleur de texte. La valeur de cette propriété peut être
indiquée avec le nom de la couleur, en hexadécimal (comme en HTML) ou en
color
utilisant la fonction rgb(r,v,b) avec r,v et b sont trois nombres entiers compris
entre 0 et 255.
permet de définir les décorations du texte. Les valeurs possibles de cette
text-decoration
propriété sont: none, underline, overline, line-through, blink.
permet de définir les effets d'ombrage du texte. On spécifie une liste de valeurs
text-shadow séparées par un espace: h-shadow v-shadow blur-radius color.
permet de spécifie un alinéa pour la première ligne du texte d’un élément HTML
text-indent de type bloc. La valeur de la propriété peut être indiquée en absolue ou en
relative.
permet de définir l'alignement du contenu d’un élément HTML de type bloc. Les
text-align
valeurs possibles sont: left, right, center ,justify.
permet de définir l’habillage d’un élément en le faisant flotter autour du texte.
float
Les valeurs possibles sont: left, right.
22
Propriétés CSS
Attribut Effet
letter-spacing permet de définir l'espacement entre les caractères du texte.
word-spacing permet de définir l'espacement entre les mots.
line-height permet de définir l'espacement entre les lignes du texte.
white-space indique commet il faut gérer les caractères blancs dans un élément HTML.
list-style-image définit l'image utilisée comme puce devant les éléments de listes par:
list-style-image: url("chemin/nom.ext");
Fichier test.html
<!DOCTYPE html> Fichier test.css
<html>
<head> h1{
<link href="test.css" rel="stylesheet"> color: red;
</head> background-color: greenyellow;
<body> text-decoration: underline;
<h1>Un titre de niveau 1</h1> }
</body>
</html>
Rendu visuel:
23
Propriétés CSS
Les propriétés de mise en forme des bordures et des ombres:
Attribut Effet
border-top-style permettent de définir le style des quatre traits utilisés pour dessiner la bordure
border-right-style d’un élément HTML.
border-bottom-style Les styles possibles sont: none, dotted, dashed, solid, double, groove, ridge,
inset et outset.
border-left-style
24
Propriétés CSS
Les propriétés de mise en forme des bordures et des ombres:
Attribut Effet
permet de rassembler quatre styles, séparés par des blancs, correspondant
respectivement aux styles des traits en haut, à droite, en bas et à gauche de la
border-style
bordure. Si on indique un seul style alors il correspond au style de tous les traits
de la bordure.
permet de définir l’épaisseur de la bordure d’un élément HTML. Cette propriété
border-width
est sans effet si le style de la bordure n’est pas défini (none).
border-color permet de définir la couleur de la bordure d’un élément HTML.
permet de rassembler les valeurs des propriétés relatives à la définition de la
border
bordure d’un élément HTML (border-style, border-width et border-color).
permet d’arrondir les coins de la bordure. On peut également, définir des
valeurs différentes pour les quatre coins de la bordure en utilisant les propriétés
border-radius
border-top-left-radius, border-top-right-radius, border-bottom-right-radius et
border-bottom-left-radius.
permet d’attacher une ou plusieurs ombres portées à un élément HTML.
Plusieurs paramètres permettent de personnaliser l’utilisation de cette
box-shadow
propriété comme la profondeur de l’ombre selon l'axe x et y, rayon du flou, sa
couleur ….
25
Propriétés CSS
Les propriétés de la position et de la taille:
Attribut Effet
permet de définir le type de positionnement d’un élément HTML : absolute pour
un positionnement absolu par rapport au coin supérieur gauche de la page, et
position
relative pour un positionnement relatif à l’élément parent. Les coordonnées de la
position doivent être spécifiés avec les propriétés top et left.
visibility permet de rendre invisible un élément HTML sur la page.
z-index permet de définir l’emplacement d’un élément HTML sur l’axe Z.
permet de définir la couleur d’arrière plan d’un élément HTML. La couleur d’arrière
background-color
plan du document doit être définie pour l’élément body.
permet de placer en arrière plan une image ou lieu d’une simple couleur. La valeur
background-image de cette propriété est un URL de l’image qui doit être passé en paramètre à la
fonction url("chemin/nom.ext" ).
background-repeat avec la valeur no-repeat pour ne pas répéter l’affichage de l’image de fond.
pour indiquer la position de l'image de fond avec les valeurs: left, center et right
background-position
combinées avec top, center et bottom
avec la valeur fixed pour fixer le défilent de l’image de fond dans le cas où on défile
background-attachment
le contenu de l’élément HTML.
26
Propriétés CSS
Les propriétés de définition des marges:
Attribut Effet
width et height permettent de définir la taille d’un élément HTML
margin permet de rassembler plusieurs valeurs, séparées par un blanc, des différentes
margin-top marges extérieurs. Si on indique deux valeurs alors la première valeur
margin-right correspond aux marges en haut et en bas, et la deuxième valeur correspond aux
marges à droite et à gauche, et si on indique une seule valeur, alors elle
margin-bottom
corresponde à toutes les marges.
margin-left
padding
padding-top sont utilisées d’une manière similaire que les propriétés de définition des
padding-right marges extérieurs, et correspondent à des marges internes par rapport à la
padding-bottom bordure du document ou de tout élément HTML.
padding-left
27
Pseudo-formats des CSS
Les pseudo-formats définis par les CSS offrent une fonctionnalité puissante permettant la
modification automatique de l’apparence des éléments HTML de façon dynamique suite à une
interaction de l’utilisateur avec ces éléments:
Attribut Effet
permet de changer automatiquement la mise en forme de l'élément HTML E
E:hover
quand la souris vient au-dessus de cet élément.
a:link permet de changer la mise en forme d’un lien hypertexte non visité.
a:visited permet de changer la mise en forme d’un lien hypertexte une fois visité.
permet de changer automatiquement la mise en forme d’un lien hypertexte une

a:hover
fois survolé par la souris.
permet de changer automatiquement la mise en forme d’un lien hypertexte une
a:active
fois activé.
28
Unités de mesure utilisées en CSS
Il existe de nombreuses unités de taille en CSS, certaines ne seront à utiliser que pour quelques
cas particuliers tel que les pt, cm, mm, in et pc et les autres seront à utiliser selon le besoin.
Néanmoins, les unités relatives sont souvent plus appréciées pour leur côté adaptable au support
d'affichage tel que: px, %, em et rem.
Unité <div> Effet

<span>
unité relative à la résolution
Extérieuret à la taille de l’écran sur lequel il est affiché, elle permet un
px (pixel)
affichage net et visible, même si petite, sur n’importe quel support.
<span>Intérieur</span>
Extérieur
</span>
Unité relative à son élément parent. Un élément avec une taille de « 50% » et qui a un
% (pourcentage) </div>
élément parent avec une taille de 50px aura alors une taille de 25px.
Unité relative àbody
son élément
{ parent. Si on définit font-size avec une valeur de 20px sur
l'élément parent,font-size:
1em correspondra
62.5%; à 20px et 2em à 40px. Si la taille de l'élément parent
em }
n'est pas définie, elle correspondra à la taille par défaut du navigateur qui est
span {
généralement 16px. font-size: 1.6em;
} reprend le principe de l’unité "em", c’est-à-dire correspondre à la taille
signifie "root em"
rem
de la police d’un élément et cet élément est l’élément racine du document (root).
body {
font-size: 62.5%;
}
span {
font-size: 1.6rem;
}
29
JavaScript
 Le JavaScript (JS) est le langage à balises qui vient compléter le HTML: il
permet de rendre la page Web interactive (dynamique).
 C’est un langage interprété, structuré et Orienté Objet et inspiré

essentiellement du langage C.
– Il s’écrit directement dans la page HTML.
– Il permet de gérer les évènements principaux de la souris: déplacements,
clicks, ...
– Il permet de programmer les boutons.
30
Utilisation du code JS dans une page Web
 Embarquer directement le code JavaScript dans un document HTML à l’intérieur de la
balise <script>.
– Si cette balise est placée dans la section head, le code JavaScript sera accessible avant
l’affichage de la page Web.
– Si cette balise est placée dans la section body, le code JavaScript sera accessible lors de
l’affichage de la page Web.
<script language="javascript"> //ou bien <script type="text/javascript">
alert("Le code JS est à l’intérieur de la balise <script>");
</script>
 Placer le code JavaScript dans un fichier externe de type texte qui doit être liés aux
documents HTML où sera exécuté ce code.
Fichier test.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head> Fichier test.js

<body> alert("Le code JS est dans le fichier externe test.js");
</body>
</html>
31
Exécution du code JS
 Le code Javascript est appelé par le pseudo protocole JavaScript: comme une valeur
de l’attribut href de la balise <a>.
<a href="javascript:alert('Par le pseudo-protocole javascript:');">
Cliquer pour exécuter le code Javascript
</a>
 Le code Javascript est exécuté suite à des événements déclenchés par l’interaction
des utilisateurs avec les documents HTML. Par exemple un clic souris sur les
éléments HTML ou lors de leurs survole par le pointeur de la souris.
<img src="image.jpg" onclick="alert('Vous avez clique sur l’image');">
32
Règles générales
 L’insertion des espaces peut s’effectué n’importe où dans le script, donc n’hésitons pas à les
utiliser pour éclaircir nos écritures.
 Pour rendre plus clair et plus compréhensible notre programme, on peut placer des
commentaires :
– En utilisant le double slash //: tout ce qui se trouve à droite est commentaire.
– En utilisant /* et */: pour écrire un commentaire sur plusieurs lignes doit être placé
entre
 Un nombre à virgule est séparé par un point (.) et non par une virgule (0.5 et non 0,5)
 Javascript est sensible à la casse: Mom est différente de nom et de NOM
 Une instruction simple est une expression qui se termine avec un point-virgule ; et un bloc
d’instructions est un ensemble d’instructions simples et/ou des blocs d’instructions
rassemblées entre une accolade ouvrante et une accolade fermente.
expression; // Instruction simple
{ // Bloc d’instructions
instruction(s); // une ou plusieurs instructions simples et/ou blocs
}
33
Déclaration et affectation de variables
 Les variables sont des contenants qui permettent de manipuler facilement des
valeurs numériques ou autres.
– Le mot-clé var permet de déclarer une ou plusieurs variables.
– Après la déclaration de la variable, il est possible de lui affecter une valeur. La déclaration
et affectation en même temps:
var nom, age; //déclaration de plusieurs variables
nom="toto"; //affectation d'une chaine de caractère
age=35; //affectation d'une valeur numérique
var prenom=titi; //déclaration et affectation
– Il n’est pas nécessaire d’indiquer le type de la variable. Il reconnu automatiquement

lors de l'affectation. De ce fait, le type de la variable peut être modifié plusieurs fois.
var v=true; // v est de type boolean par initialisation
v="zéro"; // v change de type après affectation
– Il est intéressant de choisir un nom de variable qui rappelle sa fonction dans le

programme. Si cette fonction fait intervenir plusieurs mots, on essaie de choisir un nom
utilisant une contraction de ces mots en faisant précéder chacun d’eux par une
Majuscule ou _. Exemple: monNom ou mon_nom
34
Opérateurs et expressions JavaScript
 Le langage JavaScript utilise les mêmes opérateurs que ceux utilisés par le langage C (opérateurs
arithmétiques, opérateurs de comparaison et opérateurs logiques). Il est de même pour les
expressions qui doivent être construites en suivant les mêmes règles syntaxiques que celles du
langage C.
Opérateur Effet
Opérateurs arithmétiques
+, *, -, /, %(modulo)
(10%4=2 c'est le reste de la division entière )
<=, >=, >, <, ==, != Opérateurs de comparaison
++, -- Opérateur d'incrémentation et de décrémentation

||, &&, ! Opérateurs logique
=, +=, *=, -=, /=, %= Opérateurs d'affectation (x+=4 est équivalente x=x+4)
35
Structures conditionnelles en JavaScript
 En Javascript, les structure de programmation conditionnelles sont les même
qu’on langage C :
Test simple : if else

if (condition)
Instruction(s); // simple ou bloc d’instructions exécuté si condition est vrai
else
Instrction(s); // Facultative exécuté si condition est fausse
Test multiple : switch

switch (variable) {
case valeur1 : Instructions1; // Instructions1 exécutée si variable==valeur1
…
case valeuri : Instructionsi; // Instructionsi exécutée si variable==valeuri
}
36
Structures répétitives en JavaScript
 En Javascript, les structure de programmation répétitives sont les même qu’on
langage C :
Boucle dont la condition est testée au début : while
while (condition) {
Instruction(s); // simple ou bloc d’instructions exécuté si condition est vrai
}
Boucle dont la condition est testée à la fin : do

do{
Instruction(s); // simple ou bloc d’instructions exécuté au moins une fois
}
while(condition)
Généralisation de la boucle while : for

for (initialisation; condition; expression_arithmetique) {
Instruction(s); // simple ou bloc d’instructions
}
37
Fonctions en JavaScript
 La déclaration de fonctions en Javascript se fait par utilisation du mot-clé function suivi d’un
blanc, du nom de la fonction et des paramètres de la fonction entre une parenthèse
ouvrante et une parenthèse fermente.
 Le corps d’une fonction est délimité par deux accolades {}. Il contient le code Javascript qui
est exécuté à chaque appel de la fonction et éventuellement une instruction return dans le
cas ou la fonction retourne une valeur.
function parite(x){
function nomFonction(paramètres) { x = Number(x);
// corps de la fonction if(x)
return (valeur); document.write(x+" est impaire");
else
} document.write(x+" est impaire ");
}
 L’appel de la fonction se fait simplement par son nom. Les paramètres de la fonction sont
séparés par le caractère virgule, et ils sont passés à la fonction par valeur pour les types
primitifs et par adresse pour les objets. Il est de même pour la valeur retournée qui peut être
de type simple ou un objet.
nomFonction(par1, par2, …) ; Parite(15)
var v=nomFonction(par1, par2, …) ;
38
Objet en JavaScript
 Un objet est une structure complexe qui peut contenir des données
correspondantes aux propriétés de l’objet et des méthodes qui définissent son
comportement.
– Les propriétés d’objets sont simplement des variables de type primitif ou de type objet
– Les méthodes sont simplement des fonctions Javascript.
 La déclaration des objets se fait de manière similaire que la déclaration de fonctions, c’est à
dire par utilisation du mot-clé function :
function Objet() {
this.p; // une propriété p
 La création de nouveaux objets se fait par utilisation du mot-clé new :

var A = new Objet();
39
Accès aux propriétés et méthodes d'un objet
 Pour accéder aux propriétés et méthodes d’un objet, on utilise le nom de l’objet suivi d’un
point et du nom d’une propriété ou d’une méthode. Dans ce dernier cas, il faut ajouter les
parenthèses ().
A.p=9; // affecter la valeur 9 à la propriété p de l’objet A

A.m(); // appel de la méthode m de l’objet A
 Dans le corps des fonctions qui correspondent aux méthodes d’un objet, on utilise le mot-clé
this pour accéder à ses propriétés et ses méthodes.
 Il est possible de déclarer des objets permettant l’initialisation des propriétés au moment de
la création de nouveaux objets, dans ce cas il faut déclarer ces objets avec les paramètres
nécessaires.
function Objet(paramètre) {
this.p=paramètre; // une propriété initialisée par passage d’un paramètre
}
var A=new Object(valeur); // crée l’objet A et initialise sa propriété p
40
Objets prédéfinis en JavaScript
 Le langage Javascript offre deux types d’objets :
– Objets built-in : ce sont des objets prédéfinis par le langage Javascript : Date(), Math(),
Array(), String(), Image().
– Objets du navigateur : ce sont des objets crées automatiquement au moment de
l’ouverture de la fenêtre du navigateur window: navigator, document et history.
41
L'objet window
 L’objet window représente la fenêtre du navigateur. Il possède quelques propriétés de type simple,
comme l’attribut status, et d’autres attributs de type objet comme navigator, history et document. Il offre
quelques méthodes, dont les méthodes d’interaction permettant le dialogue homme/machine.
– alert(message) : affiche une boîte de dialogue contenant le message passé en paramètre et un

seul bouton OK permettant de fermer cette boite.
<script language="javascript">
alert("Bienvenu dans ma page Web !");
</script>
– confirm(message) : affiche une boîte de dialogue contenant le message passé en paramètre et

deux boutons OK et Annuler. En cliquant sur le bouton OK, cette fonction retourne la valeur logique
true et si on clique sur le bouton Annuler la fonction retourne la valeur logique false.
confirm("voulez-vous changer la couleur de fond?");
</script>
42
L'objet window
 Une autre méthode de l'objet window permettant de dialoguer avec l'utilisateur:
– prompt(message) : affiche une boîte de dialogue contenant le message passé en paramètre, une
zone de saisie de texte au clavier et deux boutons Ok et Annuler. Si on clique sur le bouton OK la
valeur entrée au clavier est retournée par cette fonction et si on clique le bouton Annuler la fonction
retourne la valeur null.
prompt("Saisissez votre texte :", "Texte par défaut");
</script>
 L’objet window possède aussi la méthode open() qui permet de créer dynamiquement de
nouvelles fenêtres et la méthode close() pour fermer les fenêtres ouvertes.
43
L'objet document
 L'objet Document permet de manipuler tous les objets qui sont inclus dans le documents
HTML (images, textes, formulaires…) par leurs noms ou leurs ids.
 Il existe de nombreux méthodes (et attributs) qui s'appliquent sur l'objet document.
– write(): permet d'écrire la chaîne de caractères passée en paramètre directement dans

le document.
– writeln(): permet d'écrire dans le document en ajoutant un retour à la ligne.
document.write("Bonjour"); //Affiche "Bonjour" dans la page.

document.writeln("Bonjour"); //Affiche "Bonjour" suivi d'un retour à la ligne dans la page.
document.write(v); //Affiche la valeur de la variable v.
 Cet objet possède deux méthodes open() et close(). La première méthode permet l’ouverture
des documents affichés par des fenêtres pour permettre leur modification dynamique, et la
deuxième méthode permet leur fermeture.
44
Les méthodes de l'objet Document
 getElementById(): méthode qui retourne un objet HTML à partir de son id
<input type="text" id="toto">
<script type="text/javascript">
document.getElementById("toto").value="texte par défaut";
</script>
 getElementsByName(): méthode qui retourne un tableau d’objets HTML ayant nom

défini dans la propriété name de la balise de l’objet.
<input type="text" name="toto"> <br>
<input type="text" name="toto" value=""><br>
<input type="text" name="toto" value=""><br>
<script language=javascript>
document.getElementsByName("toto")[0].value = "toto 0";
</script>
45
Propriétés de l'objet document
– bgcolor: Elle permet de changer dynamiquement la couleur de fond de la page
Web.
<a href="javascript:void(document.bgColor=’#339999’)">Fond bleu</a>
<a href="javascript:void(document.bgColor=’#66FF99’)">Fond vert</a>
– fileSize: Retourne la taille en octets de la page. Elle fonctionne uniquement sous

Internet Explorer.
document.write("Taille de la page : "+document.fileSize+" octets");
– lastModified: retourne la date de dernière modification.

– location: retourne l’url complète de la page.
– protocol: retourne le type de protocole de chargement de la page (uniquement
sous Internet Explorer) : http, https, ...
– title: retourne le type du document dans la balise title.
46
Propriétés de l'objet Document
 innerHTML: est une propriété qui permet de modifier le contenu d’un paragraphe
ou d’insérer un objet dans la page.
<p id="paragraphe">texte texte</p>
<script type="text/javascript"> //ou bien <script language="javascript">
document.getElementById("paragraphe").innerHTML ="Texte changé";
</script>
//Navigateur affiche : Texte changé
 this: sélectionne l’élément en cours.

const commentaire = {
id: 7,
author: 'Victor Hugo',
content: 'Juste un simple commentaire',
getAuthor: function(){
return this.author
}
};
alert(commentaire.getAuthor());
/* Retourne ‘Victor Hugo’', this faisant référence à l’objet commentaire,
this.author correspond à l'auteur de commentaire.*/
</script>
47
Sous-objet style de l'objet Document
 Le sous-objet style permet de définir dynamiquement un attribut de style
local style sur la balise concernée.
<span id="citation">
Mieux vaut tard que jamais.
</span>
document.getElementById("citation").style.color="#888888";
document.getElementById("citation").style.fontStyle="italic";
</script>
 Les attributs du sous-objets style sont les propriétés que nous avons déjà vu en
CSS. Si la propriété est composée, alors le tiret est enlevé et le caractère
immédiatement suivant est capitalisé; par exemple font-style devient fontStyle.
 La valeur à appliquer à l'attribut est la même que celle déclarée en CSS, juste que
cette fois, il faut la placer entre des guillemets, car elle est vue en Javascript en
tant que chaîne de caractères.
48
Les événements
 onClick: Exécute une action lors du clic sur un élément : bouton, champs, ...
<form>
<input type="text" name="champ_texte" value="valeur d’origine">
<input type="button" name="bouton" value="Changer"
onclick="champ_texte.value='valeur après clic'">
</form>
 onChange: Exécuter une action lorsqu’une option ou un champ est changé.
<form action="" name="formulaire">
<input type="text" name="valeur" value="Changez ce texte"
onchange="affich_newvalue.value='Valeur changée'">
<input type="text" name="affich_newvalue" value="">
</form>
 onBlur: L’action est exécutée lorsque l’élément perd le focus par exmple sortir
d’une zone de type "text" dans laquelle on est rentré.
<form>
<input type="text" name="champ_texte" value="Ma valeur d’origine"
onblur="champ_texte.value='J ai perdu le focus'">
</form>
49

CCS and JavaScript

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

CCS and JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

CSS et JavaScript

 Si le navigateur ne connaît pas une propriété CSS, il l'ignore et ne met pas

 Il y a trois façon de définir des styles CSS :

 Exemple <!DOCTYPE html>

Code HTML utilisant le fichier mes-style.css:

/*Commentaire CSS*/ body

Fichier test.html Fichier test.css

E[attribut] : un élément E qui possède un attribut

E[attribut*="Valeur"] : Un élément E avec un attribut et une valeur

Fichier test.html Fichier test.css

permet de changer automatiquement la mise en forme d’un lien hypertexte une

Unité <div> Effet

 C’est un langage interprété, structuré et Orienté Objet et inspiré

</head> Fichier test.js

<img src="image.jpg" onclick="alert('Vous avez clique sur l’image');">

– Il n’est pas nécessaire d’indiquer le type de la variable. Il reconnu automatiquement

– Il est intéressant de choisir un nom de variable qui rappelle sa fonction dans le

++, -- Opérateur d'incrémentation et de décrémentation

Test simple : if else

Test multiple : switch

Boucle dont la condition est testée à la fin : do

Généralisation de la boucle while : for

 La création de nouveaux objets se fait par utilisation du mot-clé new :

A.p=9; // affecter la valeur 9 à la propriété p de l’objet A

– alert(message) : affiche une boîte de dialogue contenant le message passé en paramètre et un

– confirm(message) : affiche une boîte de dialogue contenant le message passé en paramètre et

– write(): permet d'écrire la chaîne de caractères passée en paramètre directement dans

– writeln(): permet d'écrire dans le document en ajoutant un retour à la ligne.

document.write("Bonjour"); //Affiche "Bonjour" dans la page.

 getElementsByName(): méthode qui retourne un tableau d’objets HTML ayant nom

– fileSize: Retourne la taille en octets de la page. Elle fonctionne uniquement sous

– lastModified: retourne la date de dernière modification.

 this: sélectionne l’élément en cours.

Vous aimerez peut-être aussi

/Commentaire CSS/ body