COURS

D’ANGULAR JS

Par Lambert Lobe GUILAVOGUI

Téléphone : 622-21-79-57
Email :
[email protected]
m
SEMAINE 1: L’ENVIRONNEMENT ANGULAR

• Introduction et pré-requis
• Qu’est ce que Angular ?
• Pourquoi choisir Angular ?
• La Cli Angular
• Comment structure –t-il ses applications ?
• Ajouter des outils

2
SEMAINE 1: NOTION DE BASE DE TYPESCRIPT

• Qu’est ce que Type Script ?

• Premiers Codes TS
• Les Types
• Les interfaces
• Les Décorateurs
• Les Modules

• TP
• Devoir de maison

3
SEMAINE 3:PROGRAMMATION ORIENTÉE OBJET EN JAVASCRIPT

• Introduction à la programmation orientée objet : classes, objets,

propriétés, méthodes.
• Définition de classes en JavaScript : déclarations de classe,
constructeurs.
• Création et manipulation d'objets : instanciation, accès aux propriétés et
aux méthodes.
• Héritage et prototypage en JavaScript.
• Exercices pratiques : création de classes et d'objets en JavaScript,
implémentation de l'héritage.

4
SEMAINE 4: ASYNCHRONE EN JAVASCRIPT

• Nature asynchrone de JavaScript : événements, boucle d'événements.

• Utilisation des fonctions de rappel (callbacks) pour les opérations
asynchrones.
• Introduction aux promesses : création, résolution, rejet.
• Utilisation de la syntaxe async/await pour gérer les opérations
asynchrones de manière synchrone.
• Exercices pratiques : création de scripts JavaScript pour gérer des
opérations asynchrones, utilisation des promesses et des fonctions de
rappel.

5
SEMAINE 1: INTRODUCTION
À JAVASCRIPT

6
HISTORIQUE
• JavaScript a été initialement développé par Netscape et s’appelait alors
LiveScript. Adopté à la fin de l’année 1995, par la firme Sun (qui a aussi
développé Java), il prit alors son nom de JavaScript.
•JavaScript est un langage de scripts qui, incorporé aux balises HTML, permet
d’améliorer la présentation et l’interactivité des pages Web.
•Ces scripts sont gérés et exécutés par le navigateur lui-même sans faire appel aux
ressources du serveur. Ces instructions seront donc traitées en direct et surtout
sans retard par le navigateur.
•Javascript permet de rendre dynamique un site internet développé en HTML.
•Javascript permet de développer de véritables applications fonctionnant
exclusivement dans le cadre d’Internet.
•Le Javascript est un langage de script simplifié orienté objet dont la syntaxe est
basée sur celle du Java.

7
POURQOUI JAVASCRIPT ?
Le réel intérêt de JavaScript tient de son étroite de liaison avec les navigateurs
internet.
Contrôle du contenu et de l’apparence de page Web
Write()… faire apparaître un texte supplémentaire dynamiquement
Construire une page dynamiquement à partir de rien
Contrôle de fonctionnalités du Navigateur Internet
Affichage de message par boite de dialogue ou dans la barre de status
Saisie de données simples
Ouverture et gestion de l'affichages d'URL dans des fenêtres du navigateur
Gestion du contenu d’une page Web
Accès à la liste des liens hypertextes, images,… d’une page
Accès à l’ensemble des contrôles boutons, zone de saisie,… d’une page
Gestion d’interactions avec l’utilisateur
Gestions d ’actions liées à des événements utilisateur : déplacement de la
souris sur un contrôle, validation d’une saisie, d’un Submit sur un formulaire….
Manipulation et gestion d’images
Possibilité de réaliser des effets sur images : passage de la souris sur une
8
image ou lors d ’un clique sur image…
POURQOUI JAVASCRIPT ?
Lecture et écriture de Cookies
Cookies : initialement prévu pour les scripts CGI, code écrit et lu par le serveur CGI
et mémorisé sur le client pour générer des pages en fonction du contexte client.
JS peut lire et écrire des Cookies et peux parfois remplacer l ’utilisation de script
CGI

Utilisation de délai window.setTimeout()

Utilisation de fonctions sophistiquées de gestion de la Date et Heure

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…)
9
et réagir (faire une des opérations ci-dessus suite à cette action).
LES OBJETS EN JAVASCRIPT
Les différentes fonctionnalités offertes par JavaScript sont accessibles à travers un
ensemble d’objets intrinsèques prédéfinis
Les objets JavaScript peuvent être répartis en deux catégories :
Les objets d’interface :

Ils permettent de gérer les aspects visuels des différents contrôles graphiques
pouvant se trouver au niveau d’une interface. On peut citer comme exemple :
l’objet window, document, button, radio, checkbox…etc.

Les objets des propriétés et des fonctions prédéfinies :

Ils permettent de fournir les différentes ressources requises pour la

programmation. Ces objets sont : L’objet string, math, date, navigator, array, et
object.

10
LA HIÉRARCHIE DES OBJETS D’INTERFACE
On commence généralement par l’objet le plus grand (celui contenant tous les
autres) puis on descend dans la hiérarchie jusqu’à arriver à l’objet voulu!

JavaScript divise une page web en objets. Il permet d’accéder à ces objets, d’en
retirer des informations et de les manipuler.

Chaque page Web s’affiche dans une fenêtre , c'est l'objet fenêtre (window) . Dans
chaque fenêtre , il y'a un document HTML c'est l'objet document

11
LA HIÉRARCHIE DES OBJETS D’INTERFACE
Autrement dit l’objet window contient l’objet document, qui lui même peut contenir
d’autres objets. Schématiquement, on peut représenter une partie de la hiérarchie
des objets d’interface JavaScript comme suit

12
LES LIMITES DU HTML
Le HTML (HyperText Markup Language) est indispensable à toute structuration de
page web quelque soit le langage utilisé.
Il suffit d'une balise <html>+<body> ouvrante et fermante pour commencer. A
partir de la n'importe quel navigateur va savoir interpréter ce langage de balise. Il
sert simplement à dire au navigateur web comment est composé la page.
Le navigateur va interpréter ce que l'on appelle le DOM (Document Object Model )
composé des différentes balises HTML
en se rapprochant ou non des normes ce qui peux emmener a des comportements
légèrement différents entre les navigateurs.
Pour ajouter de l'interaction et du dynamisme a l’intérieur du navigateur . Chaque
navigateur disposait de sa propre version JavaScript

13
LES LIMITES DU HTML
Le langage HTML présente les limites suivantes :
Absence des structures de contrôle algorithmiques (conditionnelles et itératives).
Un langage sans aucune logique de programmation procédurale (notion de sous
programmes, variables, opérateurs prédéfinies ….).
Absence de prise en charge d’événements, à l’exception de l’événement clic
Aucune communication avec la plate forme d’exécution (date système, type du
navigateur utilisé, etc.)
Absence de possibilité d’interfaçage avec les bases de données.
Absence de mécanisme permettant de rendre le code source inaccessible pour
l’utilisateur final (en HTML ,pour pouvoir visualiser le code , il suffit d’utiliser
l’option affichage code source du navigateur).

14
LES SOLUTIONS PROPOSÉES
Pour pallier à ses limites, deux solutions sont utilisées :
L’utilisation des langages côté client ( JavaScript ou VBScript ) : ce sont des
langages qui permettent d’ajouter des fonctionnalités omises par le langage HTML,
(les fonctionnalités qui concernent la connexion aux bases de données et
l’accessibilité au code ne sont pas supportées par ces langages). L’avantage
majeur de cette solution est le fait de pouvoir exécuter le code écrit avec ces
langages ( JavaScript ou VBScript ) sans avoir besoin d’une installation
particulière ; il suffit d’avoir un navigateur Web. Le javascript est le plus utilisé vu
sa comptabilité avec les navigateurs .
L’utilisation des langages côté serveur tels que ASP, PHP, Cold Fusion. Ces
langages permettent d’avoir les mêmes fonctionnalités que les langages côté
client plus la possibilité de se connecter à des bases de données et le verrouillage
du code source.

15
LES AVANTAGES DE L’UTILISATION
Les avantages de l’utilisation d’un langage de programmation côté client par
rapport à un langage de programmation côté serveur :
Exécution plus rapide (surtout pour les pages sollicitées fréquemment).
Coût hébergement moins cher, en effet l’exécution d’un script côté serveur fait
appel aux ressources matérielles du serveur d’hébergement.
Certaines fonctionnalités nécessitent un traitement côté client, d’où l’obligation de
faire recours à un langage de programmation côté client, exemple : la date
système du client, la gestion de la fenêtre de navigation, etc.

16
OÙ ET COMMENT INSÉRER DU JAVASCRIPT ?
Pour placer des instructions JavaScript dans une page HTML, il faut utiliser la balise

Il existe deux manières d’insérer du code JavaScript dans une page HTML à savoir
par l’insertion dans une page HTML ou par appel de module externe

17
LA SYNTAXE DE BASE DE JAVASCRIPT
La syntaxe de base de JavaScript est un ensemble de règles et de conventions qui
définissent la manière dont vous devez ecrire du code Javascript .
La syntaxe javascript est inspiré du langage C, les fonctions, les boucles et les
conditions sont encadré par des accolades { } et leurs paramètres par des
parenthèses ( ) et enfin chaque instruction se termine par un point virgule (;) mais
il n’est pas obligatoire .

La case
Le javascript est sensible à la casse (Case Sensitive).il fait donc la différence entre
las majuscules et les minuscules

Ex : nombre n’est pas égale à Nombre ou NOMBRE

Les commentaires
Comme pour les majorités des langages de programmation, on va également
pouvoir commenter en JavaScript.
Les commentaires sont des lignes de texte placées au milieu d’un script et servant
à18documenter le code, c’est-à-dire à expliquer ce que fait tel ou tel bout de script.
LA SYNTAXE DE BASE DE JAVASCRIPT
En JavaScript, ces commentaires peuvent se présenter sous deux formes
différentes:
Par les deux barres obliques (//) avant la ou les lignes des commentaires.
Par les signes /* ... */ pour délimiter un commentaire sur plusieurs lignes.

Les opérations mathématiques

Vous pouvez effectuer des opérations mathématiques de base, telles que

l’addition, la soustraction, la multiplication, et la division, en utilisant les
opérateurs appropriés ( + , - , * , / ).

19
 LES VARIABLES

20
LES VARIABLES
Une variable est une case mémoire à laquelle on a donnée un nom.

Syntaxe des noms des variables

• Le nom des variables en JavaScript doivent respecter la syntaxe suivant:
• La variable doit commencer par la lettre ou un underscore « _ »
• La variable peut comporter un nombre indéterminé de lettres, de chiffres ainsi
que des caractères underscore ‘_’ et le signe dollar $’.
• Les espaces ne sont pas autorisés.
• La casse est importante : des variables nommées apple et APPLE sont deux
variables différentes.
• Le nom de variable ne peut utiliser des mots dits « réservés ». En effet, ces mots
sont utilisés dans le code JavaScript même. On ne peut nommer une variable,
par exemple, var, true, false, else, etc.

21
DÉCLARATION ET INITIALISATION DES VARIABLES
Déclarer des variables avec var , let , et const

22
DÉCLARATION ET INITIALISATION DES VARIABLES

23
DÉCLARATION ET INITIALISATION DES VARIABLES

24
LES OPERATEURS-ARITHMÉTIQUES

25
LES OPERATEURS-COMPARAISON

26
LES OPERAT EURS- B OOLÉENS

27
L E S O P E R AT E U R S - A SS O C I AT I F S

28
L E S O P E R AT E U R S - D ’ I N C R É M E N TAT I O N

29
L E S O P E R AT E U R S - D E C O N C AT É N AT I O N

30
EXERCICES
Créez deux variables a et b et assignez-leur respectivement les valeurs 10 et 20.
Effectuez les opérations suivantes et affichez les résultats dans la console :
Addition des deux variables.
Soustraction de b à a.
Multipliez les deux variables.
Vérifiez si a est inférieur à b et affichez le résultat.
Vérifiez si a est supérieur ou égal à b.
Utilisez l'opérateur logique && pour vérifier si a est inférieur à 15 et si b est supérieur à
15.
Utilisez l'opérateur logique || pour vérifier si a est égal à 10 ou si b est égal à 30.

31
LES CHAÎNES DE CARACTÈRES

32
LES CHAÎNES DE CARACTÈRES- DECLARATION

33
LES CHAÎNES DE CARACTÈRES- INITIALISATION

34
LES CHAÎNES DE CARACTÈRES-LES OPERATEURS

35
LES CHAÎNES DE CARACTÈRES-LES OPERATEURS

36
LES CHAÎNES DE CARACTÈRES-LES OPERATEURS

37
LES CHAÎNES DE CARACTÈRES-LES OPERATEURS

38
DEVOIR DE MAISON
Créez une variable phrase qui contient la phrase suivante : "Bienvenue sur notre site
web!".
Utilisez les méthodes de chaînes de caractères pour effectuer les tâches suivantes :
Affichez la longueur de la chaîne.
Transformez la chaîne en majuscules.
Transformez la chaîne en minuscules.
Remplacez le mot "site" par "application".
Affichez le premier caractère de la chaîne.
Extrayez et affichez le mot "Bienvenue" de la chaîne.
Utilisez indexOf pour trouver la position du mot "site".
Supprimez les espaces au début et à la fin de la chaîne (si la chaîne en contenait).
Concaténez la chaîne avec une autre chaîne : " Merci de votre visite!".

39
LES CONDITIONS IF ELSE EN JAVASCRIPT

Exo 1 : Créer un programme qui affiche le jour de la semaine en fonction d'un nombre
saisi (1 pour lundi, 2 pour mardi, etc.).

Exo 2 : Utiliser une boucle while pour afficher les nombres de 1 à 10.

40
LES TABLEAUX

41
OPÉRATION SUR LES TABLEAUX EN JAVASCRIPT

Modification d’un element :

Nom du table[indice de l’élément à changer]=le nouveau élément

Ajouter un element
La méthode unshift () ajoute de nouveaux éléments au début d’un tableau et renvoie la
nouvelle longueur.

Syntaxe : array.unshift(item1, item2, ..., itemX)

La méthode push () ajoute de nouveaux éléments à la fin d’un tableau et renvoie la

nouvelle longueur.
Syntaxe : array.push(item1, item2, ..., itemX)

42
 LAMBERT LOBE GUILAVOGUI

JAVASCRIPT Téléphone : 622-21-79-57

Email: [email protected]