Programmation WEB Faculté de Science de

Bizerte

Proposé par : [Link] Hasnaoui

 Programmation WEB TIC_2-FSB
Sommaire
Pourquoi apprendre
la Programmation web
Introduction
Les applications web
et Cloud est le future.

• Introduction • Pourquoi apprendre la

Programmation web
• HTML -> intérêt et bénéfices

• CSS • C'est quoi internet

-> architecture globale du
• JavaScript (ES5 web
base)
• Les outils qu'on vas
• Introduction au ES6 utiliser

Schéma 1 : applications et site Web connectees sur un cloud

Des nouveaux domaines

amplifie l'utilisation
du web

2
 Programmation WEB TIC_2-FSB
• Introduction Un Domaine ou on na
Pourquoi
apprendre la Prog. pas besion de
web materierre premiere pour
commencer un project

Examples de noueaux Tous les pays du monde

domaines: sont concernés

Schéma 2 : Domaine des applications du V2X

le domaine de Smart Cities est

la connection de tous les
périphériques de la ville ainsi
la V2x peux aussi etre connecter

Schéma 2 : Domaine des applications du V2X

Schéma 2 : Domaine des applications du V2X

• le domaine V2x est en • Smart metering

general la connection des • Connectivity and networking
vehicules a son environement • Data management and handling
et aux reseaux • Data analytic and
visualisation Schéma 2 : Domaine des applications du V2X

3
 Programmation WEB TIC_2-FSB
• Introduction Depuis le confinement
Pourquoi les postes de
apprendre la Prog.
web programmeur en ligne
-> intérêt et ne cesse d'augmenter
bénéfices

Schéma 2 : Domaine des applications du V2X

Le domaine du web est
très large, commencer par
apprendre les bases de Plusieurs sites web de
creation des sites web freelance sont disponible:
• [Link]
est primordiale pour
• [Link]
accédera des domaines
• [Link]
plus complexes
• [Link]
• [Link]
Les offres de travail
dans ces domaines sont Schéma 2 : Domaine des applications du V2X
très abondantes et bien Possibilité de Faire de l'argent et
payer $
travailler en etre etudiant
Freelance
4
 Programmation WEB TIC_2-FSB
Sommaire
C'est quoi internet

Introduction
Def
: Internet est le réseau
informatique mondial
• Introduction • Pourquoi apprendre la accessible au public. Il
Programmation web s'agit d'un réseau de
• HTML -> intérêt et bénéfices réseaux, à commutation de
paquets, sans centre
• CSS • C'est quoi internet
-> architecture globale du névralgique, composé de
• JS (ES5 base) web millions de réseaux aussi
bien publics que
• Introduction au ES6 • Les outils qu'on vas privés, universitaires, comme
utiliser rciaux et gouvernementaux,
eux-mêmes regroupés
en réseaux autonomes ; il en
existe plus de 91 000 en 2019

wikipidia

5
 Programmation WEB TIC_2-FSB
• Introduction Le Web n’est qu’une des
Pourquoi applications d’Internet,
apprendre la Prog. distincte d’autres
web applications comme le courrier
-> intérêt et électronique, la messagerie
bénéfices instantanée et le partage de
fichiers en pair à pair

Le World Wide Le document HTML est la

Web abrégé www ou le Web est principale ressource
un système hypertexte public d’une page web, celle qui
fonctionnant sur Internet. Le contient les hyperliens, qui
Web permet de consulter, avec contient et structure le
un navigateur, texte, qui lie et dispose les
des pages accessibles sur ressources multimédias.
des sites. L’image de la toile wikipidia
d’araignée vient
des hyperliens qui lient les
pages web entre elles

le Web est fréquemment

confondu avec Internet
Schéma 2 : [Link]

6
 Programmation WEB TIC_2-FSB
Sommaire
Tools(outils)

Introduction

• Introduction • Pourquoi apprendre la

Programmation web
• HTML -> intérêt et bénéfices

• CSS • C'est quoi internet

-> architecture globale du
• JS (ES5 base) web
• Introduction au ES6 • Les outils qu'on vas
utiliser
On vas utilisier dans les
chapitres suivants :
• Google_Chrome
• VSCode
• LiveServer
• Emmet extentions
• Github

7
 Programmation WEB TIC_2-FSB

• Introduction • Classes • Comment fonctionne la

• ID programmation WEB
• HTML
• Les formes
• CSS • Elements de formes
• JS (ES5 base) • Attributs de formes
• Introduction au ES6 • Types des Input
• Attributs des Input
• HTML/CSS
• Introduction • HTML/JavaScript
• Html la base
• Les Elements
• Le Heading Liens utiles :
• Les paragrgraghes
• Les liens • [Link]
• Les tables nload
• Les listes • [Link]
de-live-server
• Les Attributs
• [Link]
• Images
• HTML -> Hyper Text Markup
Language
• HTML un langague de programmation
qui fais la discriptons des structures
pour une page web 8
 Programmation WEB TIC_2-FSB
• HTML
• Html la base

<head></head>
<!DOCTYPE Contient des information
html> meta* de la page HTML
Declaration du Telle que le titre de page
document en Designer par
fichier HTML5 Elements <title></title> et on met
racine de la le titre a l'interieur
page HTML,
definie le
On specifie la debut et la
langue des la fin du
<body></body>
creation du fichier
C'est l'element qui designe
fichier HTML le corps du document HTML,
[Link] tout les element visuels
com/JamieMason/ *- Metadata is defined as telle que les bouttons, les
3748498
the data providing information about formes , les inputs, sont
one or more aspects of the data declarer ici
[Link]
A9tadonn%C3%A9e
9
 Programmation WEB TIC_2-FSB
• HTML Il existe pour chaque Les paragrgraghes
• Les Elements element un tag bien
specifique L'element paragraphe est
Exemple sur VSCode definie par le tag <p> exp
Le heading
<p>mon paragraghe</p>
De facon general, un element <h1>Heading 1</h1>
HTML est declare avec un tag <h2>Heading 2</h2> Loi de <p>
ouvrant et un autre fermant, <h3>Heading 3</h3>
et s'ecrit de la facon <h4>Heading 4</h4> <br> lines break
suivante : <h5>Heading 5</h5> Retour a la ligne, exp
<h6>Heading 6</h6> <p>mon paragraghe</p><br>
<tagname>Contenus</tagname>
Les heading sont definies
avec h coler a un numero <hr> ligne horizantal
Un tag est dit ouvert s'il
ya sont nom entre les <> et allant de 1 a 6. <p>mon paragraghe</p>
Fermant s'il existe / avant A chaque fois que le plus <hr>
son nom exemple petit, le titre est plus
grand. <pre></pre> preformatted
text, garde l'espace entre
<title>Document</title> les lignes exp
Important : il nya pas de
heading sans numero 10
 HTML- Les Elements Programmation WEB TIC_2-FSB
<pre> <a href="URL">Liens</a> <td>Smith</td>
My Bonnie lies over the <a href= </tr>
ocean. "[Link] <tr>
>Liens</a> <td>Eve</td>
My Bonnie lies over the <td>Jackson</td>
sea. Les Tables </tr>
</table>
Les tables sont definie,
My Bonnie lies over the Les tables sont definie,
par le tag <table></table>
ocean. par le tag <table>
<tr></tr> tag pour les
lignes
Oh, bring back my Bonnie
<th></th> tag pour les
to me. Les Listes
colones
</pre>
<td></td> tag pour les Il ya en generale 2 types
[Link] celules exp de listes
• Liste avec un ordre <ol>
Les Liens </table> • Liste sans ordre <ul>
<tr>
Le tag <a> definie le lien
<th>Firstname</th>
hypertext, en general il a Autres liens Utiles:
<th>Lastname</th>
un attribut de href qui [Link]
</tr>
designe la reference exp tml_formatting.asp
<tr>
<td>Jill</td> 11
 Les attributs Forme <form>
<label for="fname">First
images L'élément <form> est un name:</label><br>
conteneur pour différents
La balise <img> a deux <input type="text"
types d'éléments d'entrée,
attributs obligatoires : id="fname"
tels que : champs de
texte, cases à cocher, name="fname"><br>
• src - Spécifie le chemin
boutons radio, boutons
vers l'image <label for="lname">Last
d'envoi
• alt - Spécifie un texte
name:</label><br>
alternatif pour l'image Exp:
<form> <input type="text"
Exp:
… id="lname" name="lname">
<img src=‘‘url’’
Contenus (éléments de la </form>
alt=‘’i’’>
forme)
Classes/ID … <form>
</form> <input type="radio"
Exp: id="html" name="fav_language"
<div class=‘cls’></div> value="HTML">
<label
Exp: for="html">HTML</label><br>
<div id=‘id’></div> </form> 12
 Html -> css EXP: EXP:
<style> <link href=‘url du
Inline CSS .div1{ fichier’ rel=stylesheet>
color: blue; </head>
• Le style peut être
} <div class =‘div1’</div>
déclarer comme attribut
</style>
html.
</head> • Cette méthode est la
<div class =‘div1’</div> plus utilisée par le
• Le inline css est de
développeur car elle :
priorité la plus haute • Si style est interne
alors il doit être • simplifie la page
EXP:
déclarer dans le head de html
<div class =‘div1’
la page html • Ordonnent la page
style=‘’color=blue;’’
</div> css et la clarifie
CSS externe • Simplifie les
CSS interne priorités des règles
• Le style peut être CSS
• Le style peut être déclarer dans fichier
déclarer comme balise externe et appeler dans
html. page html voulus

13
 Programmation WEB TIC_2-FSB
•Le sélecteur pointe vers
• Introduction • overflow l'élément HTML que vous
• HTML • ID souhaitez styliser.
• Display
• CSS • flexbox •Le bloc de déclaration contient
• JS (ES5 base) • grid une ou plusieurs déclarations
séparées par des points-
• Introduction au ES6 • CSS functions: virgules.
• Cal()/max()/min()
• Hover, before, after •Chaque déclaration comprend un
• Syntax • Media query nom de propriété CSS et une
• Sectors • Animations valeur, séparés par deux points.
• Units
• •Plusieurs déclarations CSS sont
Variables
séparées par des points-virgules
• Properties : et les blocs de déclaration sont
• Colors entourés d'accolades.
• Background • Syntax
• margin
• Padding Example
• Border
p{
• outline color: red;
• text }
• fonts
• Z-index 14
 css Les Elements Programmation WEB TIC_2-FSB
• Sectors Example
#id1 {
text-align: center;
color: red;
}

• Pour sélectionner des

éléments avec une classe
spécifique, écrivez un point
(.) suivi du nom de la
classe.

Example
• Le sélecteur d'id utilise l'attribut id d'un élément HTML pour
sélectionner un élément spécifique. .class {
text-align: center;
• L'identifiant d'un élément est unique dans une page, donc le color: red;
sélecteur d'identifiant est utilisé pour sélectionner un élément
unique !
}
• Vous pouvez également
• Pour sélectionner un élément avec un identifiant spécifique, spécifier que seuls des
écrivez un caractère dièse (#), suivi de l'identifiant de éléments HTML spécifiques
l'élément. doivent être affectés par
une classe.
15
• Units

• Les unités de longueur absolue

sont fixes et une longueur
exprimée dans l'une d'entre elles
apparaîtra exactement comme cette
taille.

• Les unités de longueur absolue ne

sont pas recommandées pour une
utilisation à l'écran, car les
tailles d'écran varient
énormément. Cependant, ils
peuvent être utilisés si le
support de sortie est connu,
comme pour la mise en page
d'impression.

• Relative length units Example

specify a length relative
to another length property. h1 {
Relative length units font-size: 60px;
scales better between }
different rendering
mediums.
16
• Variables Example • colors
• Toutes les déclarations de
• Les couleurs sont spécifiées à
variables se fonts dans le
l'aide de noms de couleurs
secteur root et commence par:
prédéfinis ou de valeurs RVB,
« -- » suivies de la propriété
HEX, HSL, RGBA, HSLA.
(personnalisée) et sa valeur

• Color names
Example
• Properties :

• Colors
• Background
• margin
• Padding
• Border
• La fonction CSS var() peut être • outline
• CSS peux supporter 140 nom de
utilisée pour insérer la valeur • text couleurs le lien de tous les
d'une propriété personnalisée • fonts couleurs est ci-joint .
(parfois appelée "variable CSS")
au lieu de n'importe quelle • Z-index
partie d'une valeur d'une autre [Link]
propriété. _names.asp
17
• RGB Example • RGBa
• Une valeur de couleur RVB
représente les sources • Les valeurs de couleur RGBA sont
lumineuses ROUGE, VERT et BLEU. une extension des valeurs de
couleur RGB avec un canal alpha
- qui spécifie l'opacité d'une
• Chaque paramètre (rouge, vert couleur.
et bleu) définit l'intensité de
• Une valeur de couleur RGBA est
la couleur entre 0 et 255.
spécifiée avec :
• Par exemple, rgb(255, 0, 0)
s'affiche en rouge, car le
rouge est défini sur sa valeur
la plus élevée (255) et les • Le paramètre alpha est un nombre
autres sont définis sur 0. compris entre 0,0 (entièrement
transparent) et 1,0 (pas
• Pour afficher le noir, réglez transparent du tout) :
tous les paramètres de couleur
sur 0, comme ceci : rgb(0, 0,
0). Example

• Pour afficher le blanc, réglez

tous les paramètres de couleur
sur 255, comme ceci : rgb(255,
255, 255).

18
• HEX colors • Valeur HEX à 3 chiffres • Background-color
• Parfois, vous verrez un code
• Une couleur hexadécimale est hexadécimal à 3 chiffres dans la • La propriété background-color
spécifiée avec : #RRGGBB, où les source CSS. spécifie la couleur d'arrière-
entiers hexadécimaux RR (rouge), • Le code hexadécimal à 3 chiffres plan d'un élément.
GG (vert) et BB (bleu) spécifient est un raccourci pour certains
les composantes de la couleur. codes hexadécimaux à 6 chiffres. Example
• Le code hexadécimal à 3 chiffres
Valeur HEX a la forme suivante : body {
• En CSS, une couleur peut être #rgb background-color: lightblue;
spécifiée à l'aide d'une valeur }
hexadécimale sous la forme :
• Background
Example
• Les propriétés d'arrière-plan
CSS sont utilisées pour ajouter h1 {
des effets d'arrière-plan aux background-color: green;
éléments. }
Example
• Les propriétés d'arrière-plan div {
CSS sont : background-color: lightblue;
• Background-color }
• Background-image
• Background-repeat p {
• Background-attachment background-color: yellow;
• Background-position }
• Background (shorthand)
• Background-image Example body {
background-image: url("");
• La propriété background-image body { background-repeat: no-repeat;
spécifie une image à utiliser background-image: url() background-position: right top;
comme arrière-plan d'un élément. background-repeat: repeat-x; }
}
• Par défaut, l'image est répétée • Background-attachment
de manière à couvrir tout • L'affichage de l'image
l'élément. d'arrière-plan une seule fois • La propriété background-
est également spécifié par la attachment spécifie si l'image
• Background-repeat propriété background-repeat : d'arrière-plan doit défiler ou
être fixe (ne défile pas avec le
Example reste de la page) :
• Par défaut, la propriété
background-image répète une image body { body {
à la fois horizontalement et background-image: url() background-image: url("");
verticalement. background-repeat: no-repeat; background-repeat: no-repeat;
} background-position: right top;
• Certaines images ne doivent être background-attachment: fixed;
répétées qu'horizontalement ou • Background-position }
verticalement, sinon elles auront
l'air étrange • La propriété background-position • Spécifiez que l'image de fond
est utilisée pour spécifier la doit défiler avec le reste de la
• Si l'image ci-dessus est répétée position de l'image d'arrière- page :
uniquement horizontalement plan.
body {
(background-repeat: repeat-x;),
background-position: right top;
l'arrière-plan sera plus beau : Example background-attachment: scroll;
}
• Margin
• Border-style • Border-color
• Border
• spécifie la couleur des quatre
• il est également possible de
bordures.
spécifier toutes les propriétés
de bordure individuelles dans une
• .className Example
{Border-style : top propriété.
right down left;} [Link] {
border-style: solid; • La propriété border est une
border-color: red green blue yellow;} propriété raccourcie pour les
propriétés de bordure
individuelles suivantes :
• Border-Sides
• Border-width
• il existe également des
propriétés pour spécifier chacune • Border-style
• Border-width des bordures.
• Border-color
• spécifie la largeur des quatre Example
bordures. Example
p {
border-top-style: dotted;
Example border-right-style: solid;
p1 {
border: 5px solid red;
border-bottom-style: dotted; }
[Link] { border-left-style: solid;
border-style: solid; p2{
} border-top: 5px dashed green;
border-width: 25px 10px 4px 35px;
} }
• Border-radius
• La propriété border-radius est
utilisée pour ajouter des
bordures arrondies à un élément :

Example
p {
border: 2px solid red;
border-radius: 50%;
}

Border et outline
23
• outline-style • outline-color Example
[Link] {outline: thick ridge blue;}
• spécifie la couleur des quatre
outline.
• outline-ofset
• .className Example
{Border-style : top
• La propriété outline-offset
right down left;} [Link] { ajoute de l'espace entre un
outline-style: solid;
contour et le bord/la bordure
outline-color: red green blue yellow;}
d'un élément. L'espace entre un
élément et son contour est
• outline transparent.

• il est également possible de

spécifier toutes les propriétés Example
de outline individuelles dans une
• outline-width propriété. p {
margin: 30px;
border: 1px solid black;
• spécifie la largeur des quatre • La propriété outline est une outline: 1px solid red;
outline. propriété raccourcie pour les outline-offset: 15px;
propriétés de outline }
Example individuelles suivantes :

[Link] { • outline-width
outline-style: solid;
outline-width: 25px 10px 4px 35px; • outline-style
}

• outline-color
 • Un texte peut être aligné à p.example3{
text gauche ou à droite, centré ou vertical-align: text-bottom;
justifié. }

• Text color Example p.example3{

vertical-align: sub;
• La propriété color est utilisée }
h1 {
pour définir la couleur du texte.
text-align: center;
La couleur est spécifiée par : } p.example3{
vertical-align: super;
div { }
Example text-align: justify;
}
• Text decoration
h1 { p.a {
color: green; text-align-last: right; • On utilisera les fonctions
} }
suivantes pour la décoration du
p.example2{ texte
• Text Alignment direction: rtl;
unicode-bidi: bidi-override;
}
• On utilisera les fonctions p.example3 {
suivantes pour aligner le texte vertical-align: baseline;
}

p.example3 {
vertical-align: text-top;
}

25
• La propriété text-decoration-line • Text spacing • Text shadow
est utilisée pour ajouter une
ligne de décoration au texte. • Les propriétés suivantes vont • La propriété text-shadow ajoute
être le sujet de cette partie une ombre au texte
• Conseil : Vous pouvez combiner
plusieurs valeurs, telles que le
surlignement et le soulignement, Example
pour afficher les lignes au- h1 {
dessus et au-dessous d'un texte. text-shadow: 2px 2px;
}

Example
p {
text-decoration-line: overline Example
underline;
} p {
text-indent: 50px;
h2 { }
text-decoration-line: line-through; h1 {
} letter-spacing: 5px;
}
h1 { [Link] {
text-decoration-line: overline; line-height: 0.8;
text-decoration-color: red; }
} [Link] {
word-spacing: 10px;
h3 { }
text-decoration-line: underline; p {
text-decoration-style: dotted; white-space: nowrap;
} } 26
 Example
Z-index Overflow
div {
• Z-index • La propriété overflow spécifie overflow: hidden;
s'il faut découper le contenu ou }
• Lorsque des éléments sont ajouter des barres de défilement
positionnés, ils peuvent lorsque le contenu d'un élément
chevaucher d'autres éléments. est trop grand pour tenir dans la
zone spécifiée.
• La propriété z-index spécifie
l'ordre de pile d'un élément • visible - Par défaut. Le
(quel élément doit être placé débordement n'est pas écrêté. Le
devant ou derrière les autres). contenu s'affiche en dehors de la
boîte de l'élément
• Un élément peut avoir un ordre de
pile positif ou négatif : • hidden - Le débordement est coupé
et le reste du contenu sera
invisible
Example
• scroll - Le débordement est coupé
img { et une barre de défilement est
position: absolute; ajoutée pour voir le reste du
left: 0px; contenu
top: 0px;
z-index: -1; • auto - Similaire au scroll
}

27
 Example • CSS Flex Container
flexBox
<div class="flex-container"> Afin de manager les position du
• Module de mise en page CSS <div>1</div> contenus de container Flexbox offre
Flexbox <div>2</div> plusieurs propriétés
<div>3</div>
• </div> • Les propriétés de Flex container
Avant le module Flexbox Layout,
il y avait quatre modes de mise sont :
• flex-direction
en page : .flex-container { • flex-wrap
display: flex; • flex-flow
• Block, pour les sections background-color: DodgerBlue; • justify-content
d'une page Web }
• • align-items
inline, pour le texte
• • align-content
Table, pour les données de .flex-container > div {
table à deux dimensions background-color: #f1f1f1;
• Positionné, pour la position margin: 10px; Example
explicite d'un élément padding: 20px;
font-size: 30px; .flex-container {
Le module de mise en page de boîte } display: flex;
flexible, facilite la conception flex-direction: column;
d'une structure de mise en page }
flexible et réactive sans utiliser
de flottement ou de positionnement. .flex-container {
display: flex;
flex-direction: row;
}
28
• Introduction
• HTML
• CSS
• JS (ES5 base)
• Introduction au ES6

DOM

Définition :
• DOM signifie document objects
model
• Le Dom est constitue de nodes
(nœuds) qui en réalité se diverge
• Puisque une simple page HTML
en branches et feuilles comme le
commence toujours par la balise
schéma indique suivant :
html alors cette dernière est la
racine de nos nœuds.
• Une page html comporte toujours
au-moins un head et body et sont • Chaque nœuds peux diverger , qui
les nœuds principaux de notre sois principal ou secondaire, ce
Eléments page on vas les appeler éléments divise sur 2 parties comme montre
principaux le schéma suivant:
 • On peux sélectionner un élément
Manipulation du DOM par l’appelle de sa classe
avec l’utilisation de la fonction
getElementByClassName()

Sélection d’éléments Exemple:

<div class=‘class-div1’></div>
• On peux sélectionner un élément <div class=‘class-div1’></div>
du DOM par l’appelle de son ID <div class=‘class-div1’></div>
avec l’utilisation de la fonction
getElementById() <div class=‘class-div2’></div>
<div class=‘class-div2’></div>
Exemple:
• Attributs:
Les attributs sont les classes ou l’id <div id=‘id-div1’></div> <script>
de cette élément <div id=‘id-div2’></div> var x =
<div id=‘id-div3’></div> getElementByClassName(‘class-div1’)
• Texte : </script>
Le texte dans un élément <script>
var x =
getElementById(‘id-div1’) On a sélectionné tout les élément
</script>
L’accès a ces deux derniers ne se fais ayant une classe class-div1
pas de la même manière Et notre retour est une
On a sélectionné que le premier
HTMLCollection
élément .
 • On peux sélectionner un élément • On peux sélectionner un élément <script>
du DOM par l’appelle le nom de sa du DOM par l’appelle de la var x = querySelector(‘#id-
balise HTML avec l’utilisation de la fonction querySelector() div1’)
fonction getElementByTagName() </script>
• Cette fonction nous permet de <script>
Exemple: sélectionner un élément par sa var x =
classe ou son id ou le même le querySelector(‘.class-div1’)
<div class=‘class-div1’></div> nom de sa balise, elle nous </script>
<div class=‘class-div1’></div> permet de sélectionner le premier
<div class=‘class-div1’></div> élément de la liste
On a sélectionné que le premier
<div class=‘class-div2’></div> Exemple: élément
<div class=‘class-div2’></div>
<div class=‘class-div1’></div> • On peux sélectionner un élément
<div class=‘class-div1’></div> du DOM par l’appelle de la
<script> <div class=‘class-div1’></div> fonction querySelectorAll()
var x = • Cette fonction nous permet de
getElementByTagName(‘div’) <div id=‘id-div1’></div> sélectionner tout les éléments
</script> <div id=‘id-div2’></div> • Bien sure elle peux être employer
<div id=‘id-div3’></div> pour les classes ou balises

<div class=‘class-div2’></div>
On a sélectionné tout les élément <div class=‘class-div2’></div>
ayant une balise div
Et notre retour est une <script>
var x = querySelector(‘div’)
HTMLCollection </script>
 Exemple: • Multiple Style :
Manipulation on peux aussi modifier une multitudes
<div class=‘class-div1’></div> de règles css d’un élément par une
<div class=‘class-div1’></div> seule fonction
<div class=‘class-div1’></div>
CSS Manipulation • exemple :
<div id=‘id-div1’></div>
<div id=‘id-div2’></div>
<div id=‘id-div3’></div> • On peux manipuler le code css a var myStyles = `
partir de javascript en utilisant : display: block;
<div class=‘class-div2’></div> • Le inline CSS width: 80%;
<div class=‘class-div2’></div> • Multiple Style background-color: red;
• Ajout, suppression ou toggle border: 2px;
<script> dune classe font-size: 5em;
var x = color: white;
querySelectorAll(‘div’) margin: 20px;
• Inline : padding-left: 10px;
</script> La modification de CSS a partir de padding-bottom: 10px;
javascript ne s’applique que sur le border: 2px solid black;
premier élément puisque la `;
On a sélectionné tout les élément modification est inline et non pas par var element =
ayant une balise div accès au fichier CSS [Link]('.demo');
Et notre retour est une NodeList
• exemple : [Link] = myStyles;

var x = getElementbyId(‘id-div1’)
[Link]=1.2em
• Ajout suppression et toggle <div class=‘class-div2’></div>
on peux aussi modifier des règles css Création d’élément <div class=‘class-div2’></div>
d’un élément par l'ajout d’un attribut
class ou sa suppression <script>
var x = querySelector(‘.class-div2’)
• On peux créer des éléments
var p = [Link](‘p’)
• exemple : [Link](p)
On Utilisant la fonction javascript
</script>
<div class="demo">Hello</div> createElement()

var element =
[Link]('.demo'); <div class=‘class-div2’></div> Modifier le texte d’élément
[Link]('new-class’); <div class=‘class-div2’></div>

var element = <script> • On peux modifier le texte d'un

[Link]('.demo'); var x = querySelector(‘.class-div2’) élément avec les fonction
[Link]('.new- var p = [Link](‘p’) suivantes:
class’); </script> innerText
textContent
var element = innerHTML
[Link]('.demo');
[Link]('.new- Ajout d’élément Exercice
class');
Créer un programme javascript pour
• On peux ajouter des éléments voir les différences entre :
On Utilisant la fonction javascript • innerText
append() • textContent
• innerHTML
 • exemple :
Attributs d’élément Attributs d’élément
<div class="demo">Hello</div> (class)

• Javascript nous permet de créer var element = • Ajout suppression et toggle

des nouveaux attributs pour un [Link]('.demo'); on peux aussi modifier des règles css
élément ainsi que le supprimer [Link](‘id’, ‘div-id’); d’un élément par l'ajout d’un attribut
class ou sa suppression
Avec l'utilisation de fonction :
• setAttribut() [Link]([Link](‘id’)) • Javascript nous aussi de vérifier si
Cette fonction prend 2 attribut un élément contiens une classe ou
(variables) l’attribut lui-même (id • exemple : non
ou class) et son nom On utilisant la fonction contains()
• getAttribut() <div class="demo">Hello</div>
Cette fonction nous renvois le • exemple :
nom de l’attribut designer var element =
• removeAttribut() [Link]('.demo'); <div class="demo">Hello</div>
Cette fonction nous permet de [Link](‘id’, ‘div-id’);
supprimer un attribut de sa var element =
balise [Link]('.demo');
[Link](‘id’)
• exemple : [Link]('new-class’);
[Link]([Link].
<div class="demo">Hello</div> contains'new-class’);
)
var element =
[Link]('.demo');
[Link](‘id’, ‘div-id’);
 • Exemple 2 Enter your name: <input type="text"
Evènements id="fname" onchange="upperCase()">
<button onclick="displayDate()">The <p>When you leave the input field, a
time is?</button> function is triggered which transforms
the input text to upper case.</p>
<script>
function displayDate() <script>
Il y a de manière en général de { [Link]("demo").i function upperCase() {
provoque un évènement en javascript nnerHTML = Date(); const x =
• Evènement par affectation } [Link]("fname");
• Une fonction d’écoute d’un </script> [Link] = [Link]();
évènement (eventListener) }
</script>
• Exemple 3

<button id="myBtn">Try it</button>

Evènement par affectation
<p id="demo"></p>
• Exemple
<script> Références
<h1 onclick="changeText(this)">Click [Link]("myBtn").o
on this text!</h1> nclick = displayDate; [Link]
_obj_event.asp
<script> function displayDate()
function changeText(id) { { [Link]("demo").i
[Link] = "Ooops!"; nnerHTML = Date();
} }
</script> </script>
 • Exemple <div id="myDIV">
Evènements <p>This div element has an
var btn2 = onmousemove event handler that
[Link](‘.btn2’) displays a random number every time
you move your mouse inside this
Event Listener function alertbtn(){ orange field.</p>
<p>Click the button to remove the
alert(‘this is an alert’) div's event handler.</p>
<button onclick="removeHandler()"
Alert id="myBtn">Remove</button>
}
</div>
• Exemple [Link](‘mouseover’, <p id="demo"></p>
alertbtn) <script>
var btn2 = [Link]("myDIV").a
[Link](‘.btn2’) ddEventListener("mousemove",
myFunction);
function alertbtn(){ Exercice
function myFunction()
alert(‘this is an alert’) Créer un programme javascript qui { [Link]("demo").i
applique un event listener sur bouton nnerHTML = [Link]();
} • Affiche une alerte }
• Change la couleur d’un titre lors
[Link](‘click’, d’un mouseOver function removeHandler()
alertbtn) { [Link]("myDIV").
removeEventListener("mousemove",
Suppression d’un listener myFunction);
}
mouseOver </script>
 • Introduction Scooping hoisting
• HTML
• CSS { {
• JS (ES5 base) var x = ‘hello’ x = 5 // Assignation
} var x // déclaration
• Introduction au ES6 // on peut lire la }
Valeur de x
• Scooping/ Hoisting
• Let / const
<p id="demo" ></p> • En JavaScript une
• Array variable peut être
<script> après qu’elle soit
destructuring
var carName = "Volvo"; utilisée
• Arrow function
• Set • Enfaite javascript ne
[Link]("dem fais le hoisting que
• Map
o").innerHTML = "I can display de la déclaration non
• class
" + [Link]; pas de l’Assignation.
• Import / export
</script>
Ces deux formes présentent des
// on peut accéder a la
problèmes énormes lorsque li s’agie
Overture d’horizon Valeur de carName en
d’un site Web complexe.
utilisant [Link]
 <p id="demo" ></p> Avec ES6, let a régler les
let / const
<script>
problèmes de sécurité et
myFunction();
{ réhabilité que présenté var .
let x = ‘hello’ function myFunction() {
} let fruit = " pomme "; De la même façon const gère
// on peut pas lire la [Link]( les problèmes et même aller
Valeur de x "demo").innerHTML = « je plus que let dans la manier
peux lire la valeur de de penser au variable.
Examples fruit " + fruit;

}
function myFunction() { {
</script>
let fruit = “pomme"; const x = ‘hello’
// on peut lire la Valeur }
de x { // on peut pas lire la
} x = ‘hello’ Valeur de x
let x
// on peut pas lire la }
// maintenant ce code va Examples
Valeur de x
générer des erreurs

38
function myFunction() { const tab = [1,2,3]
const fruit = “pomme"; for (const key in tab) {
// on peut lire la Valeur [Link](key);
de x } La déstructuration du
} tableau extrait les valeurs
// Ne génère aucune erreurs "rouge" et "vert" et les
// on peut pas lire la stocke dans les variables
Valeur de x firstColor et secondColor.
Ces valeurs sont choisies en
Array destructuring
{ raison de leur position dans
x = ‘hello’ le tableau ; l'actuel
let colors = [ "red", "green", les noms de variables
const x
"blue" ]; peuvent être n'importe quoi.
}
// maintenant ce code va Gardez à l'esprit que le
let [ firstColor, secondColor ] = tableau n'est pas
générer des erreurs
colors; changé de quelque manière
La différence majeur entre que ce soit
[Link](firstColor); // "red"
let et const, c’est const
[Link](secondColor); //
est une déclaration pour une
"green"
constante alors que let peut
changer dans le temps.
39
let colors = [ "red", "green", Arrow Functions
"blue" ];
function myFunctionName() { let a = () => {
let [ , , thirdColor] = colors;
return "Hello World!"; return "Hello World!";
} }
[Link](thirdColor); //blue

Example :
function() { let a = () => "Hello World!";
return "Hello World!";
• commuté de variables en ES6 }

let a = 1,b = 2;

[ a, b ] = [ b, a ];
let a = function() {
[Link](a); // 2 return "Hello World!";
[Link](b); // 1 }
40
 let set = new Set([1, 2, 3, 4, 5, 5, 5, [Link]([Link]("title")); //
set
5]); "Understanding ECMAScript 6"
[Link]([Link]); // 5 [Link]([Link]("year")); //
let set = new Set(); let set = new Set(); 2016
[Link](5); [Link](5);
[Link]("5"); [Link]("5"); Set est une liste ordonnée
[Link]([Link]); [Link]([Link](5)); // true de valeurs sans doublons.
[Link]([Link](6)); // false Les ensembles permettent un
[Link](5); accès rapide aux données
Set est une liste ordonnée [Link]([Link](5)); // false qu'ils contiennent,
de valeurs sans doublons. [Link]([Link]); // 1 ajoutant un
Les ensembles permettent un [Link](); façon de suivre des valeurs
accès rapide aux données discrètes.
qu'ils contiennent,
ajoutant un map
façon de suivre des valeurs Examples
discrètes. let map = new Map();
[Link]("title", "Understanding
ECMAScript 6");
Examples [Link]("year", 2016);

41
FIN

42