17/11/2022

Module 4 – Web Technologies

Introduction au JavaScript

"Tout le monde a un plan, jusqu’à ce qu’il reçoive un coup

de poing en pleine figure »

– Mike Tyson

Formation animée par

Francine LAGRAND
Consultante en Transformation Numérique
Ingénieure en Gestion de Projets Informatiques
17/11/2022

Agenda de la semaine
Jours Matières Heure
Lundi 07 novembre Algorithme (Test - Droit) 08h30-11h30
Mardi 08 novembre Langage C (Web Technologie ) 08h30-12h00
Mercredi 09 novembre Web Technologie 13h30-17h00
Jeudi 10 novembre Droit/Algo 08h30-12h00
Jeudi 10 novembre Web Technologie 13h30-17h00

17/11/2022

2
 17/11/2022

Sommaire

Introduction Présentation
du module

Qu’est-ce que
le JavaScript?

Web Technologies
Introduction au
JAVASCRIPT
IDE

Activités
pratiques Tester un
programme

17/11/2022

Présentation du module

17/11/2022

4
 17/11/2022

Les différents thèmes

N.B. :
- Contrôle continu sous forme de mini QCM, cas pratiques au cours des séances. 56 heures de 17/11/2022
JavaScript

17/11/2022

6
 17/11/2022

Starter: Ice breaking quiz

Activité 1: Préparer pour JavaScript

Description de l’activité:
• Allez sur Support cours dans Alma
• et téléchargez votre document Worksheet 1 -
Javascript
• Complétez activité 1

17/11/2022

8
 17/11/2022

Objectifs de ce cours
Définir ce qu’est JavaScript
Comprendre le rôle de JavaScript
Savoir où utiliser JavaScript
Intégrer JavaScript dans une page HTML

17/11/2022
Les outils du design

Qu’est-ce que le JavaScritp?

JavaScript (« JS » en abrégé) est un langage de
programmation dynamique complet qui,
appliqué à un document HTML, peut fournir une
interactivité dynamique sur les sites Web.
Il a été inventé par Brendan Eich, co-fondateur
du projet Mozilla, de la Mozilla Foundation et de
la Mozilla Corporation.. Et intégré à NetScape
(de Sun Microsystem) en 1996 (LiveScript)

17/11/2022
Droit

10
 17/11/2022

Différence entre JavaScript et HTML

A la différence de l’HTML qui permet de définir le
contenu des pages Web, et donc utilise des balises ;
le JavaScript est un langage de programmation de
haut niveau.
JavaScript peut être employé en tant que langage
procédural ou orienté objet (POO).
Il suppose que le programmeur maitrise les notions
de fichiers, variables, fonction, boucles, objets

17/11/2022
Les outils du design

11

Prérequis

JavaScript est l’un des 3 langages que

tous les développeurs web doivent
apprendre:

1. HTML permet de définir le

contenu des pages Web

2. CSS permet de spécifier la mise

en page des pages Web

3. JavaScript permet de programmer

le comportement des pages Web
17/11/2022

12
 17/11/2022

Client side Vs Server side?

17/11/2022
Les outils du design

13

Où est utilisé JavaScript?

JavaScript est indépendant de toute plateforme
Son utilisation la plus connue est dans les pages
web
Il est aussi très utilisé dans le développement
coté serveur sous la plateforme NodeJS
Il est aussi utilisé dans les documents « pdf », des
logiciels comme « photoshop », etc..

17/11/2022
Droit

14
 17/11/2022

Quand utiliser JavaScript?

Js est utilisé en complément des pages HTML pour:
Accéder à des informations variables telles que la
date, cookie, etc..
Interagir avec les utilisateurs par le biais des
éléments de l’interface graphique.
Validation de formulaires avant leur soumissions
Gestion de l’interface utilisateur (menus
dynamiques, panneaux, onglets, caroussels…)
Etc…

17/11/2022
Droit

15

Ce qu’on peut faire avec JavaScript

Généralement le code Javascript dans une page Web sert à :
Faire bouger, apparaître ou disparaître des éléments de la
page (un titre, un menu, un paragraphe, une image…).
Mettre à jour des éléments de la page sans recharger la
page (changer le texte, recalculer un nombre, etc).
Demander au serveur un nouveau bout de page et
l’insérer dans la page en cours, sans la recharger.
Attendre que l’utilisateur face quelque chose (cliquer, taper
au clavier, bouger la souris…) et réagir (faire une des
opérations ci-dessus suite à cette action).

17/11/2022
Droit

16
 17/11/2022

Moteurs de Script des navigateurs

Js est : Un langage orienté objet à sa façon destiné:
à créer des scripts interprétés par le moteur de
scripts des navigateurs:
NetScape  SpiderMonkey, Rhino,…
Chrome  V8(utilisé dans NodeJS…)
Opera  Caracan
IE  Chakra
Safari  SquirrelFish/Nitro
JavaScript n’a rien à voir avec Java

17/11/2022
Droit

17

Standardisation de JavaScript
Le Javascript est standardisé par un comité
spécialisé, l'ECMA (European Computer
Manufactures Association), en 1997, en Suisse.
ECMAScript 6 a été en 2015 le standard de base
le plus important.
ECMAScript 12 (ES12 – 2021) est la dernière
A noter: Microsoft a développé son propre
langage Javascript officiellement connu sous le
nom de JScript.

17/11/2022
Droit

18
 17/11/2022

De quoi a-t-on besoin?

 JavaScript est du texte interprété. On a donc besoin
d’un bon éditeur de texte:
• Notepad++
• Visual Studio Code
• Komodo
• Aptana
• …

17/11/2022
Droit

19

Où placer le script JavaScript?

La syntaxe du langage
Javascript ressemble au
langage C
Le script Js peut être insérer
de 2 façons dans une page
HTML :
avec la balise <script> dans
votre page html
dans fichier séparé de type .js
qu’on appellera dans la section
<head> 17/11/2022
Les outils du design

20
 17/11/2022

Comment utiliser JavaScript?

Ce code permet
d’afficher de manière
dynamique la date du
jour et l’heure

17/11/2022

21

17/11/2022
Droit

22
 17/11/2022

Activité 2: Testez des animations JavaScript

Description de l’activité:
• Allez sur votre document Worksheet 1 -
Javascript
• Complétez activité 2 pour testez des d’animations
JavaScript sur le site JavaScript Tutorial
(w3schools.com)
•

17/11/2022

23

Demo: Premier pas avec JavaScript

Tester la console du navigateur
Utiliser les variables dans JavaScript
Associer javascript avec HTML
Manipuler le DOM (Document Object Model)
Utiliser les fonctions dans JavaScript

17/11/2022
Droit

24
 17/11/2022

Activité 3: Se familiariser avec le JavaScript

Description de l’activité:
• Allez sur votre document Worksheet 1 -
Javascript
• Complétez activité 3 pour manipuler des objets
HTML avec JavaScript sur le sur le site Débuter
avec JavaScript - TUTO DE RIEN

17/11/2022

25

17/11/2022

26
 17/11/2022

Recap: Qu’est-ce que j’ai retenu?

Mentionnez au moins 2 animations/interactions

pratiquées hier
Qui a pratiqué les scripts vus hier?
Allez sur Support cours dans Alma
Téléchargez les fichiers index.html et code.js
Testez les
Comparer avec votre code d’hier

17/11/2022
Prendre la parole en public

27

Recap: Les interactions vues

Changer le texte affiché
Masquer/Cacher un élément
(image, texte…)
Modifier la taille d’un élément
(image, texte…) avec un
bouton

17/11/2022
Droit

28
 17/11/2022

17/11/2022
Prendre la parole en public

29

Activité 1: Projet portfolio

Description de l’activité:
• Allez sur Support cours dans Alma
• et téléchargez votre document Worksheet 2 -
Javascript
• Complétez activité

17/11/2022

30