Introduction au

JavaScript
 Qu’est ce que le JavaScript
JavaScript est un langage de script, multi-plateforme et orienté objet. C'est un
langage léger qui doit faire partie d'un environnement hôte (un navigateur web
par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement.
JavaScript est le langage possédant le plus large écosystème grâce
à son gestionnaire de dépendances npm, avec plus de deux millions
de paquets en septembre 202210.
 Qu’est ce que le JavaScript
JavaScript contient une bibliothèque standard d'objets tels que Array, Date, et
Math, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les
structures de contrôles et les instructions. Ces fonctionnalités centrales et
natives de JavaScript peuvent être étendues de plusieurs façons en fournissant
d'autres objets, par exemple :
 Qu’est ce que le JavaScript
➢JavaScript côté client étend ces éléments de base en fournissant des
objets pour contrôler le navigateur et le Document Object Model
(DOM). Par exemple, les extensions du langage côté client permettent de
placer des éléments dans un formulaire HTML, de réagir aux événements
déclenchés par l'utilisateur (les clics, la saisie d'un formulaire, les actions
de navigation, etc.).
 Qu’est ce que le JavaScript
➢ JavaScript côte serveur étend ces éléments de base avec des
objets utiles pour le fonctionnement sur un serveur tels que la
possibilité de communiquer avec une base de données,
manipuler des fichiers, passer d'une application à une autre,
etc.
 À quoi sert JavaScript
JavaScript a diverses applications que toute personne ayant visité des pages web
interactives ou des applications mobiles aura probablement expérimentées. Si le
développement de sites web – y compris l’ajout d’éléments tels que des
formulaires interactifs et des animations – est l’utilisation la plus traditionnelle de
JavaScript, il est également utilisé dans :
➢ Les jeux basés sur un navigateur web – y compris les jeux 2D et 3D
➢ Le développement d’applications mobiles – avantageux parce qu’il n’est pas lié à la
plateforme du téléphone.
➢ Les présentations – création de jeux de diapositives animées sur le web.
 À quoi sert JavaScript
Bien que la plupart des applications JavaScript soient côté client, JavaScript
est également utile dans les applications côté serveur, comme la création de
serveurs web.
 JavaScript est-il sécurisé ?
Bien que JavaScript soit largement accepté et utilisé pour le développement
web, il présente des vulnérabilités bien connues. L’une des cyber-attaques
les plus courantes introduites par les vulnérabilités de JavaScript est
l’attaque XSS (cross-site scripting). Les cyber-criminels utilisent les attaques
XSS pour accéder à des informations d’identité et les voler.
 JavaScript est-il sécurisé ?
Pour minimiser les exploits, il est essentiel de tester et de réviser votre
code pendant le développement.
Les méthodes de test telles que les tests statiques et dynamiques de
sécurité des applications (SAST et DAST) permettent d’identifier les
vulnérabilités à tous les stades du cycle de développement du logiciel.
 JavaScript est-il sécurisé ?
➢ SAST, ou Static Application Security Testing, est une technique
d'analyse de sécurité qui se concentre sur la détection des
vulnérabilités dans le code source, le bytecode ou le code
assembleur d'une application. Contrairement à d'autres méthodes,
les outils SAST analysent le code statique, c'est-à-dire sans
l'exécuter. Cela leur permet de détecter les problèmes de sécurité
dès les phases de développement.
➢ DAST, ou Dynamic Application Security Testing, est une
méthode de test de sécurité des applications qui vise à identifier
les vulnérabilités potentielles dans les applications en cours
d'exécution. Cela permet de réaliser une évaluation de la sécurité à
partir de l'extérieur de l'application, offrant ainsi une approche
réaliste pour détecter les failles de sécurité.
 JavaScript est-il sécurisé ?
➢ Le SAST (Static Application Security Testing) et le DAST (Dynamic
Application Security Testing) sont deux approches de test de sécurité
des applications. Le SAST analyse le code source d'une application lors
des premières étapes de son développement, permettant d'identifier les
failles de sécurité dès le début. En revanche, le DAST teste une
application en cours d'exécution, généralement à travers une approche
en boîte noire, ce qui permet d'évaluer les vulnérabilités dans une
application déployée, en examinant son comportement pendant
l'exécution.
 JavaScript est-il sécurisé ?
Quelques Outils SAST: ➢ SonarQube
➢ Axivion Static Code Analysis ➢ Dynatrace
➢ Invicti ➢ Kiuwan
➢ Aikido Security ➢ Acunetix
➢ GitHub ➢ SiteLock
➢ GitLab
 JavaScript est-il sécurisé ?
Selon les analystes de sécurité de Cloud Defense, SAST vérifie que votre code
ne viole pas les règles de sécurité et compare les vulnérabilités trouvées entre les
branches source et cible. Vous serez informé si les dépendances de votre projet
sont affectées par des vulnérabilités nouvellement divulguées.
 Les cas d’utilisation de JavaScript
JavaScript est un langage de programmation polyvalent, largement utilisé dans
de nombreux domaines. Ses cas d'utilisation incluent :
1. Développement Web : il permet de rendre les pages web interactives et dynamiques.
2. Applications Server-side : avec des environnements comme [Link], JavaScript peut
être utilisé côté serveur pour gérer des bases de données, des API, etc.
3. IoT (Internet des objets) : il est utilisé pour programmer des dispositifs intelligents et
des applications connectées.
Les cas d’utilisation de JavaScript
4. Applications mobiles : avec des frameworks comme React Native,
JavaScript permet de développer des applications mobiles.
5. Intelligence Artificielle : il peut être utilisé pour des tâches d'IA dans
certains environnements, bien que ce ne soit pas son principal domaine.
 Les frameworks JS les plus utilisés
Voici quelques frameworks JavaScript populaires qui sont largement utilisés dans le
développement d'applications web et mobiles :

1. React : Une bibliothèque développée par Facebook pour créer des interfaces
utilisateur. Elle est particulièrement appréciée pour sa capacité à gérer
efficacement les états et les composants.

2. Angular : Un framework complet développé par Google, qui permet le

développement d'applications web dynamiques. Il est basé sur le TypeScript et
offre une structure solide pour des applications de grande échelle.
3. [Link] : Un framework progressif qui est facile à apprendre et à
intégrer. [Link] est souvent utilisé pour créer des interfaces utilisateur et
des applications monopages.
4. [Link] : Bien qu’il ne soit pas à proprement parler un framework,
[Link] permet de faire du JavaScript côté serveur. Il est souvent
associé à divers frameworks comme Express pour créer des applications
serveur.
 Les frameworks JS les plus utilisés
5. [Link] : Un framework minimaliste pour [Link], utilisé pour
construire des applications web et des API. Il facilite la gestion des
requêtes et les routes.

6. [Link] : Un framework basé sur React qui propose des fonctionnalités

comme le rendu côté serveur et la génération statique de sites web.

7. Svelte : Un framework qui compile le code à l'avance, offrant ainsi un

bon compromis entre performance et facilité d'utilisation.
 Les frameworks JS les plus utilisés
8. Gatsby : Un générateur de sites statiques basé sur React, idéal pour
créer des sites web rapides et performants.
Ces frameworks et bibliothèques offrent diverses fonctionnalités et avantages
selon les besoins spécifiques du projet.
 La balise script
Parlons du symbole qui est l’étiquette la plus utilisée dans le cours.
Tout le code JavaScript est inclus dans les balises <script>.
La balise script
 La balise script
➢ Document renvoie un objet Element représentant l'élément dont la
propriété id correspond à l'identifiant spécifié. C'est l'une des méthodes les
plus courantes dans le DOM HTML, utilisée presque chaque fois que vous
souhaitez lire ou modifier un élément HTML. Par exemple, vous pouvez
l'utiliser comme ceci : [Link]("monId")
➢ La propriété innerHTML en JavaScript permet d'obtenir ou de définir le
contenu HTML d'un élément. Par exemple, pour obtenir le contenu d'un
élément avec un identifiant spécifique, vous pouvez utiliser le code suivant :
 La balise script
let html = [Link]("myList").innerHTML;
Cela va récupérer le code HTML contenu à l'intérieur de l'élément avec l'id
myList.
N'oubliez pas que l'utilisation de innerHTML remplace complètement le
contenu existant lorsque vous y assignez une nouvelle valeur.
 La balise script
L’ancien type de JavaScript était écrit différemment.
Il avait les éléments suivants :
<type de script = « text/javascript">.
 La balise script
Il existe des fonctions en JavaScript que vous pouvez utiliser pour exécuter des blocs
de code.
Vous pouvez appeler une fonction lorsqu’un événement se produit.
Un événement peut être défini comme un bouton de clic.
Vous pouvez placer n’importe quel type de script dans un fichier HTML.
Vous pouvez placer les scripts soit dans le <head> ou soit dans le <body> ou dans les
deux.
L’exemple d’utilisation d’un script dans l’en-tête est le suivant :
La balise script
 La balise script
Lorsque vous cliquez sur le bouton du navigateur Web, vous déclenchez une
invocation de la fonction.
Vous pouvez également mettre le script à l’intérieur de la balise <body> du
code HTML de la page.
Vous appellerez cette fonction lorsque vous cliquerez sur le bouton.
La balise script
 L’affichage
Il existe différentes méthodes pour afficher du JavaScript dans les navigateurs
Web.
Les programmeurs utilisent différentes techniques à des fins d’affichage. La
première méthode que nous avons utilisée dans le cours est la méthode
getElementById(id).
Dans cette méthode, l’expression id fait référence à l’élément qui définit le
document HTML. Le mot clef innerHTML définit le contenu du HTML.
L’affichage
 L’affichage
La deuxième méthode que nous pouvons utiliser est la méthode
[Link]().
 L’affichage
Si vous utilisez cette méthode après avoir chargé la page HTML, vous perdrez
toutes les données car ils seront supprimés.
Par conséquent, vous devez vous méfier des conséquences
si vous faites ce lapsus.
En outre, vous pouvez créer un bouton avec cette méthode et
tester la page HTML.
L’affichage
 L’affichage
On pourra aussi utiliser la méthode alert pour le même rendu.
 L’affichage
Le texte mentionné ci-dessus sera visible sur le navigateur. Chaque fois que
vous exécutez le code, vous verrez le résultat du calcul mathématique sur une
alerte en haut de l’écran. L’utilisation du mot-clé window est facultative.
Comme l’objet window en JavaScript est global, vous pouvez abandonner son
utilisation et toujours Obtenez le même résultat. Le code suivant donnera le
même résultat.
L’affichage
 L’affichage

Une autre méthode est la méthode [Link](). Cette méthode est

utilisée pour
débogage du code, puis affichage des données.
FIN