01 Notion de Bases

JavaScript JS
JavaScript est un langage de programmation interprété léger . Il est conçu pour créer des
applications centrées sur le réseau. Il est complémentaire et intégré à Java. JavaScript est
très facile à implémenter car il est intégré à HTML. C'est ouvert et multi-plateforme.
Pourquoi aPPrendre le JavascriPt
Javascript est une nécessité pour les étudiants et les professionnels qui travaillent à
devenir un excellent ingénieur logiciel, spécialement quand ils travaillent dans le
domaine du développement Web. Je vais énumérer quelques-uns des principaux
avantages de l'apprentissage de Javascript:
 Javascript est le langage de programmation le plus populaire au monde, ce qui en
fait un excellent choix pour les programmeurs. Une fois que vous avez appris le
langage Javascript, il vous aide à développer d'excellents logiciels front-end et
back-end en utilisant différents frameworks basés sur Javascript, tels que jQuery,
Node.JS, etc.
 Le javascript est omniprésent, il est installé sur tous les navigateurs web
modernes. Ainsi, pour apprendre le javascript, aucune configuration
d'environnement particulière n'est nécessaire. Par exemple, Chrome, Mozilla
Firefox, Safari et tous les navigateurs que vous connaissez aujourd'hui prennent
en charge Javascript.
 Javascript vous aide à créer des sites Web rapides, vraiment beaux et fous. Vous
pouvez développer votre site Web avec une console ressemblant et donner à vos
utilisateurs la meilleure expérience utilisateur graphique.
 L'utilisation de JavaScript s'est maintenant étendue au développement
d'applications mobiles, au développement d'applications de bureau et au
développement de jeux. Cela ouvre de nombreuses opportunités pour vous en
tant que programmeur Javascript.
am.ofppt@gmail.com AHBOUZ Mustapha Page 1

 En raison de la forte demande, il existe des tonnes de croissance de l'emploi et une
rémunération élevée pour ceux qui connaissent JavaScript. Vous pouvez
naviguer sur différents sites pour voir à quoi ressemble le fait de posséder des
compétences en JavaScript sur le marché du travail.
 Le bon côté de Javascript est que vous trouverez des tonnes de frameworks et de
bibliothèques déjà développés qui peuvent être utilisés directement dans le
développement de vos logiciels pour réduire votre temps de mise sur le marché.
Il pourrait y avoir des milliers de bonnes raisons d'apprendre la programmation
Javascript. Mais une chose est sûre, pour apprendre n’importe quel langage de
programmation , pas seulement Javascript, il suffit de coder, puis de coder et enfin de
coder jusqu’à ce que vous deveniez un expert.
BonJour le monde en utilisant JavascriPt

Juste pour vous donner un peu d’enthousiasme pour la programmation Javascript , je
vais vous donner un petit programme Javascript Hello World classique.
<html>
<body>
<script >

</script>
</body>
</html>
Il existe de nombreux frameworks et bibliothèques javascript utiles :
 Angular
 React
 jQuery
 Vue.js
 Ext.js
 Ember.js
 Meteor
 Mithril
 Node.js
 Polymer
 Aurelia
 Backbone.js
Il est vraiment impossible de donner une liste complète de tous les frameworks et
bibliothèques Javascript disponibles. Le monde Javascript est trop grand et trop de
nouvelles choses se passent.

aPPlications de la Programmation JavascriPt
Comme mentionné précédemment, Javascript est l’un des langages de
programmation les plus utilisés (front-end et back-end). Il est présent dans presque tous
les domaines du développement logiciel. Je vais en énumérer quelques-uns ici:
 Validation côté client - Il est très important de vérifier toutes les entrées utilisateur
avant de les envoyer au serveur. Javascript joue également un rôle important dans
la validation de ces entrées au niveau du serveur frontal.
 Manipulation de pages HTML - Javascript facilite la manipulation de page
HTML à la volée. Cela permet d’ajouter et de supprimer très facilement une
balise HTML à l’aide de javascript et de modifier votre code HTML afin de
modifier son apparence en fonction de différents appareils et exigences.
 Notifications utilisateur - Vous pouvez utiliser Javascript pour créer des fenêtres
pop-up dynamiques sur les pages Web et donner différents types de notifications
aux visiteurs de votre site Web.
 Chargement des données dorsales - Javascript fournit une bibliothèque Ajax qui
vous aide à charger les données dorsales pendant que vous effectuez un autre
traitement. Cela donne vraiment une expérience incroyable aux visiteurs de votre
site Web.
 Présentations - JavaScript offre également la possibilité de créer des présentations
qui donnent l'apparence du site. JavaScript fournit les bibliothèques RevealJS et
BespokeJS pour créer des présentations de diapositives sur le Web.
 Applications serveur - Node JS est basé sur le moteur d'exécution Javascript de
Chrome pour la création d'applications réseau rapides et évolutives. Il s'agit d'une
bibliothèque basée sur des événements qui aide au développement d'applications
serveur très sophistiquées, notamment des serveurs Web.
Cette liste est longue, il existe de nombreux domaines dans lesquels des millions de
développeurs de logiciels utilisent avec plaisir le langage Javascript pour développer des
sites Web de qualité et d'autres logiciels.
conditions PréalaBles
Pour ce cours Javascript , il est supposé que le lecteur a une connaissance préalable du
codage HTML. Il serait utile que le lecteur connaisse au préalable des concepts de
programmation orientés objet et ait une idée générale de la création d’applications en
ligne.
qu'est-ce que JavascriPt?

JavaScript est un langage de programmation informatique dynamique. Il est léger et est
généralement utilisé dans les pages Web. Son implémentation permet au script côté
client d’interagir avec l’utilisateur et de créer des pages dynamiques. C'est un langage de
programmation interprété avec des capacités orientées objet.
JavaScript s'appelait initialement LiveScript, mais Netscape a changé de nom et
s'appelle désormais JavaScript, probablement en raison de l'excitation suscitée par
Java. JavaScript est apparu pour la première fois dans Netscape 2.0 en 1995 sous le nom

de LiveScript . Le noyau polyvalent du langage a été intégré à Netscape, Internet
Explorer et à d'autres navigateurs Web.
La spécification ECMA-262 définissait une version standard du langage JavaScript
principal.
 JavaScript est un langage de programmation interprété léger.

 Conçu pour créer des applications centrées sur le réseau.
 Complémentaire à et intégré à Java.
 Complémentaire à et intégré au HTML.
 Ouvert et multiplateforme
JavascriPt côté client
JavaScript côté client est la forme la plus courante du langage. Le script doit être inclus
ou référencé dans un document HTML pour que le code soit interprété par le
navigateur.
Cela signifie qu'une page Web ne doit pas nécessairement être un code HTML statique,
mais peut inclure des programmes qui interagissent avec l'utilisateur, contrôlent le
navigateur et créent de manière dynamique un contenu HTML.
Le mécanisme côté client JavaScript offre de nombreux avantages par rapport aux
scripts traditionnels côté serveur CGI. Par exemple, vous pouvez utiliser JavaScript pour
vérifier si l'utilisateur a entré une adresse électronique valide dans un champ de
formulaire.
Le code JavaScript est exécuté lorsque l'utilisateur soumet le formulaire. Si toutes les
entrées sont valides, elles seront soumises au serveur Web.
JavaScript peut être utilisé pour intercepter des événements initiés par l'utilisateur tels
que des clics sur des boutons, la navigation par liens et d'autres actions que l'utilisateur
initie de manière explicite ou implicite.
avantages de JavascriPt
Les avantages d'utiliser JavaScript sont :
 Moins d'interaction serveur - Vous pouvez valider la saisie de l'utilisateur avant
d'envoyer la page au serveur. Cela économise le trafic du serveur, ce qui signifie
moins de charge sur votre serveur.
 Retour immédiat aux visiteurs - Ils n'ont pas besoin d'attendre un rechargement
de page pour voir s'ils ont oublié d'entrer quelque chose.
 Interactivité accrue - Vous pouvez créer des interfaces qui réagissent lorsque
l'utilisateur les survole avec une souris ou les active via le clavier.
 Des interfaces plus riches - Vous pouvez utiliser JavaScript pour inclure des
éléments tels que des composants glisser-déposer et des curseurs pour offrir une
interface riche aux visiteurs de votre site.

limitations de JavascriPt
Nous ne pouvons pas traiter JavaScript comme un langage de programmation à part
entière. Il manque les caractéristiques importantes suivantes :
 JavaScript côté client ne permet pas la lecture ou l'écriture de fichiers. Cela a été
gardé pour des raisons de sécurité.
 JavaScript ne peut pas être utilisé pour les applications réseau car aucun support
de ce type n'est disponible.
 JavaScript n'a pas de capacités multi-threading ou multiprocesseur.
outils de déveloPPement JavascriPt

L'un des principaux atouts de JavaScript est qu'il ne nécessite pas d'outils de
développement coûteux. Vous pouvez commencer avec un éditeur de texte simple tel
que le Bloc-notes. Puisqu'il s'agit d'un langage interprété dans le contexte d'un
navigateur Web, vous n'avez même pas besoin d'acheter un compilateur.
Pour vous simplifier la vie, différents fournisseurs ont mis au point de très jolis outils
d’édition de JavaScript. Certains d'entre eux sont énumérés ici :
 Microsoft FrontPage - Microsoft a développé un éditeur HTML populaire appelé
FrontPage. FrontPage fournit également aux développeurs Web un certain
nombre d'outils JavaScript pour faciliter la création de sites Web interactifs.
 Macromedia Dreamweaver MX - Macromedia Dreamweaver MX est un éditeur
HTML et JavaScript très populaire dans le monde du développement Web
professionnel. Il fournit plusieurs composants JavaScript prédéfinis pratiques,
s'intègre parfaitement aux bases de données et est conforme aux nouvelles
normes telles que XHTML et XML.
 Macromedia HomeSite 5 - HomeSite 5 est un éditeur très apprécié de HTML et
JavaScript de Macromedia, qui permet de gérer efficacement les sites Web
personnels.
où est JavascriPt auJourd'hui?

La norme ECMAScript Edition 5 sera la première mise à jour publiée depuis plus de
quatre ans. JavaScript 2.0 est conforme à l'édition 5 du standard ECMAScript et la
différence entre les deux est extrêmement mineure.
La spécification pour JavaScript 2.0 est disponible sur le site
suivant: http://www.ecmascript.org/
Aujourd'hui, le code JavaScript de Netscape et le code JScript de Microsoft sont
conformes à la norme ECMAScript, bien que les deux langages prennent toujours en
charge les fonctionnalités qui ne font pas partie de la norme.
JavascriPt - syntaxe
JavaScript peut être implémenté à l'aide d'instructions JavaScript placées dans les balises
HTML <script> ... </ script> d' une page Web.

Vous pouvez placer les balises <script> , contenant votre code JavaScript, n'importe où
dans votre page Web, mais il est généralement recommandé de le conserver dans
les balises <head> .
La balise <script> avertit le programme du navigateur de commencer à interpréter tout
le texte entre ces balises en tant que script. Une syntaxe simple de votre JavaScript
apparaîtra comme suit.
<script >
Code JavaScript
</script>
La balise de script prend deux attributs importants :
 Language - Cet attribut spécifie le langage de script que vous utilisez. En règle
générale, sa valeur sera javascript. Bien que les versions récentes de HTML (et de
XHTML, son successeur) aient progressivement cessé d'utiliser cet attribut.
 Type - Cet attribut est désormais recommandé pour indiquer le langage de script
utilisé et sa valeur doit être définie sur "text / javascript".
Donc, votre segment JavaScript ressemblera à :
<script language = "javascript" type = "text/javascript">
Code JavaScript
</script>
votre Premier code JavascriPt

Prenons un exemple pour afficher "Hello World". Nous avons ajouté un commentaire
HTML facultatif qui entoure notre code JavaScript. Ceci est pour enregistrer notre code
à partir d'un navigateur qui ne supporte pas JavaScript. Le commentaire se termine par
"// ->". Ici "//" signifie un commentaire en JavaScript, nous ajoutons donc ceci pour
empêcher un navigateur de lire la fin du commentaire HTML en tant que morceau de
code JavaScript. Ensuite, nous appelons une fonction document.write() qui écrit une
chaîne dans notre document HTML.
Cette fonction peut être utilisée pour écrire du texte, HTML ou les deux. Regardez le
code suivant.
<html>
<body>
<script>

</script>
</body>
</html>
Ce code produira le résultat suivant :
Hello World!
esPaces Blancs et sauts de ligne

JavaScript ignore les espaces, les nouvelles lignes qui apparaissent dans les programmes
JavaScript. Vous pouvez utiliser des espaces, des tabulations et des nouvelles lignes
librement dans votre programme et vous êtes libre de formater et d'indenter vos
programmes de manière nette et cohérente, ce qui facilite la lecture et la compréhension
du code.
les Points-virgules sont facultatifs

Les instructions simples en JavaScript sont généralement suivies d'un point-virgule, tout
comme en C, C++ et Java. JavaScript, cependant, vous permet d'omettre ce point-
virgule si chacune de vos déclarations est placée sur une ligne distincte. Par exemple, le
code suivant pourrait être écrit sans point-virgule.
<script >

</script>
Mais lorsque vous formatez sur une seule ligne comme suit, vous devez utiliser des
points-virgules .
<script >

</script>
Remarque :
L'utilisation de points-virgules est une bonne pratique de programmation.
sensiBilité à la casse
JavaScript est un langage sensible à la casse. Cela signifie que les mots-clés de langue, les
variables, les noms de fonction et tout autre identifiant doivent toujours être
dactylographiés avec une majuscule cohérente.
Ainsi, les identifiants Time et TIME transmettront différentes significations en
JavaScript.
NOTE :
Il faut faire attention lors de l'écriture des noms de variable et de fonction en JavaScript.
commentaires en JavascriPt
JavaScript prend en charge les commentaires de style C et C++, Ainsi :
 Tout texte entre un // et la fin d'une ligne est traité comme un commentaire et
est ignoré par JavaScript.
 Tout texte entre les caractères / * et * / est traité comme un commentaire. Cela
peut s'étendre sur plusieurs lignes.

 JavaScript reconnaît également la séquence d'ouverture de commentaires HTML
<! -. JavaScript traite cela comme un commentaire d'une seule ligne, tout comme
le commentaire //.
 La séquence de fermeture des commentaires HTML --> n'est pas reconnue par
JavaScript; elle doit donc être écrite sous la forme // -->
Exemple
L'exemple suivant montre comment utiliser les commentaires en JavaScript.
<script >

</script>
activation de JavascriPt dans les navigateurs
Tous les navigateurs modernes sont livrés avec le support intégré pour
JavaScript. Souvent, vous devrez peut-être activer ou désactiver cette prise en charge
manuellement. Ce chapitre explique la procédure d'activation et de désactivation de la
prise en charge de JavaScript dans vos navigateurs: Internet Explorer, Firefox, Chrome
et Opera.
JavascriPt dans internet exPlorer

Voici des étapes simples pour activer ou désactiver JavaScript dans votre Internet
Explorer .
 Suivez Outils →Options Internet dans le menu.
 Sélectionnez l' onglet Sécurité dans la boîte de dialogue.
 Cliquez sur le bouton Personnaliser le niveau .
 Faites défiler jusqu'à trouver l' option de script .
 Sélectionnez le bouton radio Activer sous Script actif .
 Enfin, cliquez sur OK et sortez
Pour désactiver la prise en charge de JavaScript dans Internet Explorer, vous devez
sélectionner le bouton radio Désactiver sous Script actif .
JavascriPt dans firefox

Voici les étapes à suivre pour activer ou désactiver JavaScript dans Firefox -
 Ouvrir un nouvel onglet →taper about: config dans la barre d'adresse.
 Ensuite, vous trouverez la boîte de dialogue d'avertissement. Sélectionnez Je vais
faire attention, je vous le promets!
 Ensuite, vous trouverez la liste des options de configuration dans le navigateur.

 Dans la barre de recherche, tapez javascript.enabled .
 Vous y trouverez l'option permettant d'activer ou de désactiver javascript en
cliquant avec le bouton droit de la souris sur la valeur de cette option
→sélectionnez Basculer .
Si javascript.enabled est true; il se transforme en faux en cliquant sur toogle . Si
javascript est désactivé; il est activé en cliquant sur bascule.
JavascriPt dans chrome

Voici les étapes à suivre pour activer ou désactiver JavaScript dans Chrome :
 Cliquez sur le menu Chrome dans le coin supérieur droit de votre navigateur.
 Sélectionnez Paramètres .
 Cliquez sur Afficher les paramètres avancés à la fin de la page.
 Sous la section Confidentialité , cliquez sur le bouton Paramètres de contenu.
 Dans la section "Javascript", sélectionnez "Ne permettre à aucun site d'exécuter
JavaScript" ou "Autoriser tous les sites à exécuter JavaScript (recommandé)".
avertissement Pour les navigateurs autres que JavascriPt

Si vous devez faire quelque chose d'important à l'aide de JavaScript, vous pouvez
afficher un message d'avertissement à l'utilisateur à l'aide de balises <noscript> .
Vous pouvez ajouter un bloc noscript immédiatement après le bloc de script comme
suit :
<html>
<body>
<script >

</script>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html
Désormais, si le navigateur de l'utilisateur ne prend pas en charge JavaScript ou si
JavaScript n'est pas activé, le message de </noscript> sera affiché à l'écran.
JavascriPt - Placement dans un fichier html

Il existe une flexibilité permettant d'inclure du code JavaScript n'importe où dans un
document HTML. Cependant, les méthodes les plus préférées pour inclure JavaScript
dans un fichier HTML sont les suivantes:
 Script dans la section <head> ... </ head>.
 Script dans la section <body> ... </ body>.
 Script dans les sections <body> ... </ body> et <head> ... </ head>.
 Script dans un fichier externe, puis inclusion dans la section <head> ... </ head>.

Dans la section suivante, nous verrons comment placer JavaScript dans un fichier
HTML de différentes manières.
JavascriPt dans la section <head> ... </ head>

Si vous souhaitez qu'un script soit exécuté sur un événement, par exemple lorsqu'un
utilisateur clique quelque part, placez ce script dans l'en-tête de la manière suivante:
<html>
<head>
<script >

</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
JavascriPt dans la section <Body> ... </ Body>

Si vous avez besoin d'un script à exécuter lors du chargement de la page pour que le
script génère un contenu dans la page, le script est inséré dans la partie <body> du
document. Dans ce cas, aucune fonction ne serait définie à l'aide de
JavaScript. Regardez le code suivant.
<html>
<head>
</head>
<body>
<script >

</script>
<p>This is web page body </p>

</body>
</html>
JavascriPt dans les sections <Body> et <head>

Vous pouvez mettre votre code JavaScript dans les sections <head> et <body> comme
suit :
<html>
<head>
<script >

</script>
</head>
<body>
<script >

</script>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />

</body>
</html>
JavascriPt dans un fichier externe
Au fur et à mesure que vous commencez à utiliser JavaScript de manière plus

approfondie, vous constaterez probablement que, dans certains cas, vous réutilisez du
code JavaScript identique sur plusieurs pages d'un site.
Vous n'êtes pas obligé de conserver un code identique dans plusieurs fichiers
HTML. La balise script fournit un mécanisme vous permettant de stocker JavaScript
dans un fichier externe, puis de l'inclure dans vos fichiers HTML.
Voici un exemple pour montrer comment inclure un fichier JavaScript externe dans
votre code HTML à l'aide de la balise script et de son attribut src .
<html>
<head>
<script src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>
// filename.js
}
tyPes de données JavascriPt
L'une des caractéristiques les plus fondamentales d'un langage de programmation est
l'ensemble des types de données qu'il prend en charge. Ce sont les types de valeurs
pouvant être représentés et manipulés dans un langage de programmation.
JavaScript vous permet de travailler avec trois types de données primitifs -
Number, par exemple. 123, 120.50 etc.
String, par exemple "Cette chaîne de texte" etc.

Booléen, par exemple, vrai ou faux.
JavaScript définit également deux types de données triviaux, null et undefined, chacun
d'entre eux ne définissant qu'une seule valeur. En plus de ces types de données primitifs,
JavaScript prend en charge un type de données composite appelé objet . Nous allons
couvrir les objets en détail dans un chapitre séparé.
Remarque :
JavaScript ne fait pas la distinction entre les valeurs entières et les valeurs à virgule
flottante. Tous les nombres en JavaScript sont représentés sous forme de valeurs à
virgule flottante. JavaScript représente les nombres en utilisant le format à virgule
flottante 64 bits défini par la norme IEEE 754.
variaBles JavascriPt
Comme beaucoup d'autres langages de programmation, JavaScript a des variables. Les
variables peuvent être considérées comme des conteneurs nommés. Vous pouvez placer
des données dans ces conteneurs, puis vous y référer simplement en nommant le
conteneur.
Avant d'utiliser une variable dans un programme JavaScript, vous devez la déclarer. Les
variables sont déclarées avec le mot clé var comme suit.
<script >

</script>
Stocker une valeur dans une variable s'appelle initialisation de variable . Vous pouvez
effectuer l’initialisation de variable au moment de la création de la variable ou
ultérieurement si vous avez besoin de cette variable.
Par exemple, vous pouvez créer une variable nommée money et lui attribuer la valeur
2000.50 ultérieurement. Pour une autre variable, vous pouvez affecter une valeur au
moment de l'initialisation comme suit.
<script >

</script>
Remarque :
Utilisez le mot-clé var uniquement pour la déclaration ou l'initialisation, une fois pour la
vie d'un nom de variable dans un document. Vous ne devez pas re-déclarer la même
variable deux fois.
JavaScript est un langage non typé . Cela signifie qu'une variable JavaScript peut
contenir une valeur de tout type de données. Contrairement à beaucoup d'autres
langages, il n'est pas nécessaire d'indiquer à JavaScript lors de la déclaration de variable

le type de valeur que la variable va contenir. Le type de valeur d'une variable peut
changer pendant l'exécution d'un programme et JavaScript s'en occupe
automatiquement.
Portée variaBle JavascriPt

La portée d'une variable est la région de votre programme dans laquelle elle est
définie. Les variables JavaScript ont seulement deux portées.
 Variables globales - Une variable globale a une portée globale, ce qui signifie
qu'elle peut être définie n'importe où dans votre code JavaScript.
 Variables locales - Une variable locale ne sera visible que dans une fonction où elle
est définie. Les paramètres de fonction sont toujours locaux pour cette fonction.
Dans le corps d'une fonction, une variable locale a priorité sur une variable globale du
même nom. Si vous déclarez une variable locale ou un paramètre de fonction portant le
même nom qu'une variable globale, vous masquez effectivement la variable
globale. Jetez un coup d'œil à l'exemple suivant.
<html>
<body onload = checkscope();>
<script >

</script>
</body>
</html>
noms de variaBles JavascriPt

Lorsque vous nommez vos variables en JavaScript, respectez les règles suivantes.
 Vous ne devez utiliser aucun des mots clés réservés JavaScript en tant que nom de
variable. Ces mots-clés sont mentionnés dans la section suivante. Par exemple, les
noms de variable break ou boolean ne sont pas valides.
 Les noms de variables JavaScript ne doivent pas commencer par un chiffre (0-
9). Ils doivent commencer par une lettre ou un caractère de soulignement. Par
exemple, 123test est un nom de variable non valide, mais _123test est un nom
valide.
 Les noms de variables JavaScript sont sensibles à la casse. Par
exemple, Nom et nom sont deux variables différentes.
mots réservés JavascriPt

Une liste de tous les mots réservés en JavaScript est donnée dans le tableau suivant. Ils
ne peuvent pas être utilisés en tant que variables JavaScript, fonctions, méthodes,
étiquettes de boucle ou noms d'objets.

qu'est-ce qu'un oPérateur?
Prenons une expression simple 4 + 5 est égal à 9 . Ici 4 et 5 sont appelés opérandes et '+'
est appelé opérateur . JavaScript prend en charge les types d'opérateurs suivants.
 Opérateurs Arithmétiques
 Opérateurs de comparaison
 Opérateurs logiques (ou relationnels)
 Opérateurs d'assignation
 Opérateurs conditionnels (ou ternaires)
Permet de regarder tous les opérateurs un par un.
oPérateurs arithmétiques
JavaScript prend en charge les opérateurs arithmétiques suivants:
Supposons que la variable A en détient 10 et la variable B en contient 20

No. Opérateur & Description
1
+ (Ajout) :Ajoute deux opérandes Ex: A + B donnera 30
2
- (soustraction) :Soustrait le deuxième opérande du premier :Ex: A - B donnera -10
3
* (Multiplication) :Multiplier les deux opérandes :Ex: A * B donnera 200
4
/ (Division) :Diviser le numérateur par le dénominateur :Ex: B / A donnera 2
5
% (Module) :Affiche le reste d'une division entière :Ex: B% A donnera 0
6
++ (Incrément) :Augmente un entier de un :Ex: A ++ donnera 11
7
- (décrémenter) :Diminue un entier de un :Ex: A-- donnera 9
Remarque :
L'opérateur d'addition (+) fonctionne pour Numeric ainsi que pour les String. Par
exemple, "a" + 10 donnera "a10".
Exemple
Le code suivant montre comment utiliser des opérateurs arithmétiques en JavaScript.
Démo en direct
<html>
<body>
<script >

</script>
Set the variables to different values and then try...

</body>
</html>
Sortie
a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...
oPérateurs de comParaison
JavaScript supporte les opérateurs de comparaison suivants -
1
= = (Égal) :Vérifie si la valeur de deux opérandes est égale ou non, si oui, la condition devient
vraie. :Ex: (A == B) n'est pas vrai.

2
! = (Pas égal) :Vérifie si la valeur de deux opérandes est égale ou non, si les valeurs ne sont pas
égales, la condition devient vraie.Ex: (A! = B) est vrai.
3
> (Supérieur à) :Vérifie si la valeur de l'opérande gauche est supérieure à la valeur de l'opérande
droit. Si la réponse est oui, la condition devient vraie.Ex: (A> B) n'est pas vrai.
4
< (Inférieur à) :Vérifie si la valeur de l'opérande gauche est inférieure à la valeur de l'opérande
droit. Si la réponse est oui, la condition devient vraie.Ex: (A <B) est vrai.
5
> = (Supérieur ou égal à) :Vérifie si la valeur de l'opérande gauche est supérieure ou égale à la
valeur de l'opérande droit. Si la réponse est oui, la condition devient vraie.Ex: (A> = B) n'est pas
vrai.
6
<= (Inférieur ou égal à) :Vérifie si la valeur de l'opérande gauche est inférieure ou égale à la
valeur de l'opérande droit. Si la réponse est oui, la condition devient vraie.Ex: (A <= B) est vrai.
Exemple
Le code suivant montre comment utiliser les opérateurs de comparaison en JavaScript.
<html>
<body>
<script >

</script>
Set the variables to different values and different operators and
then try...
</body>
</html>
Sortie
(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
(a >= b) => false
a <= b) => true
then try...
oPérateurs logiques
JavaScript supporte les opérateurs logiques suivants :
1
&& (ET logique) :Si les deux opérandes sont non nuls, la condition devient vraie.Ex: (A && B)
est vrai.
2
|| (OU logique) :Si l'un des deux opérandes est différent de zéro, la condition devient vraie.
Ex: (A || B) est vrai.
3
! (Pas logique) :Inverse l'état logique de son opérande. Si une condition est vraie, l'opérateur
logique NOT la rendra fausse.Ex :! (A && B) est faux.
Exemple
Essayez le code suivant pour savoir comment implémenter des opérateurs logiques en
JavaScript.
<html>
<body>
<script >

</script>
<p>Set the variables to different values and different operators and
then try...</p>
</body>
</html>
Sortie
(a && b) => false
(a || b) => true
!(a && b) => true
then try...
oPérateurs d'assignation
JavaScript supporte les opérateurs d'affectation suivants :
1
= (Affectation simple) :Assigne des valeurs de l'opérande de droite à l'opérande de gauche
Ex: C = A + B assignera la valeur de A + B à C
2
+ = (Ajouter et attribution) :Il ajoute l'opérande droit à l'opérande gauche et assigne le résultat à
l'opérande gauche.Ex: C + = A est équivalent à C = C + A
3
- = (soustraire et assignation) :Il soustrait l'opérande droit de l'opérande gauche et affecte le
résultat à l'opérande gauche.Ex: C - = A est équivalent à C = C - A
4
* = (Multiplier et assigner) :Il multiplie l'opérande droit avec l'opérande gauche et affecte le
résultat à l'opérande gauche.Ex: C * = A est équivalent à C = C * A
5
/ = (Division et affectation) :Il divise l'opérande gauche avec l'opérande droit et affecte le
résultat à l'opérande gauche.Ex: C / = A est équivalent à C = C / A

6
% = (Modules et affectation) :Il prend le module en utilisant deux opérandes et affecte le résultat
à l'opérande gauche.Ex: C% = A est équivalent à C = C% A
Exemple
Essayez le code suivant pour implémenter un opérateur d’affectation en JavaScript.
<html>
<body>
<script type = "text/javascript">

</script>
then try...</p>
</body>
</html>
Sortie
Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0

then try...
oPérateur divers
Nous allons discuter ici de deux opérateurs assez utiles en JavaScript: l’ opérateur
conditionnel (? :) et l’ opérateur typeof .
Opérateur conditionnel (? :)
L'opérateur conditionnel évalue d'abord une expression pour une valeur vraie ou fausse,
puis exécute l'une des deux instructions données en fonction du résultat de l'évaluation.
No. Opérateur et description
1
? : (Conditionnel ) :Si la condition est vraie? Alors valeur X: sinon valeur Y
Exemple
Essayez le code suivant pour comprendre le fonctionnement de l'opérateur conditionnel
en JavaScript.
<html>
<body>
<script >

</script>
then try...</p>
</body>
</html>
Sortie
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
then try...
oPérateur tyPeof

L' opérateur typeof est un opérateur unaire placé avant son unique opérande, qui peut
être de tout type. Sa valeur est une chaîne indiquant le type de données de l'opérande.
L' opérateur typeof évalue "nombre", "string" ou "booléen" si son opérande est un
nombre, une chaîne ou une valeur booléenne et renvoie true ou false en fonction de
l'évaluation.
Voici une liste des valeurs de retour pour l' opérateur typeof .
Type String Returned by typeof
Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"
Exemple
Le code suivant montre comment implémenter l' opérateur typeof .
<html>
<body>
<script >

</script>
then try...</p>
</body>
</html>
Sortie

Result => B is String
Result => A is Numeric
then try...
les structures alternatives
Lors de la rédaction d'un programme, il peut arriver que vous deviez en adopter un sur
un ensemble de chemins donné. Dans de tels cas, vous devez utiliser des instructions
conditionnelles qui permettent à votre programme de prendre les bonnes décisions et
d'effectuer les actions appropriées.
JavaScript prend en charge les instructions conditionnelles utilisées pour effectuer
différentes actions en fonction de différentes conditions. Ici, nous allons expliquer
la déclaration if..else .
organigramme de if-else
L'organigramme suivant montre comment fonctionne l'instruction if-else.
JavaScript prend en charge les formes suivantes :-

 if statement
 if...else statement
 if...else if... statement.
Exemple1
<html>
<body>

<script >

</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Exemple2
<html>
<body>
<script >

</script>
</body>
</html>
Exemple3
<html>
<body>
<script >

</script>
</body>
<html>
JavascriPt - switch case

Vous pouvez utiliser plusieurs instructions if ... else ... if , comme dans le cas précédent,
pour effectuer une branche à plusieurs entrées. Cependant, ce n'est pas toujours la

meilleure solution, en particulier lorsque toutes les branches dépendent de la valeur
d'une variable unique.
À partir de JavaScript 1.2, vous pouvez utiliser une instruction switch qui gère
exactement cette situation, et cela plus efficacement que de répéter les instructions if ...
else if .
Organigramme
L'organigramme suivant explique le fonctionnement d'une instruction switch-case.
Exemple
Essayez l'exemple suivant pour implémenter l'instruction switch-case.
<html>
<body>
<script >

</script>
</body>
</html>
JavascriPt – les Boucles :la Boucle whileet do whileet for

La boucle de base plus en JavaScript est en boucle qui sera discuté dans ce chapitre. Le
but d'un en boucle est d'exécuter une instruction ou un bloc de code à plusieurs reprises
tant qu'une expression est vraie. Une fois que l'expression devient fausse, la boucle se
termine.
Organigramme
L'organigramme de la boucle while ressemble à ceci
Exemple1
Essayez l'exemple suivant pour implémenter la boucle while.
<html>
<body>

<script >

</script>

</body>
</html>
Organigramme
L’organigramme d’une boucle do- while serait le suivant:
Exemple2
Essayez l'exemple suivant pour apprendre à implémenter une boucle do- while en
JavaScript.
Démo en direct
<html>
<body>
<script >

</script>
</body>
</html>
La boucle ' for ' est la forme de boucle la plus compacte. Il comprend les trois parties
importantes suivantes :
L' initialisation de la boucle où nous initialisons notre compteur à une valeur de
départ. L'instruction d'initialisation est exécutée avant le début de la boucle.
L' instruction de test qui testera si une condition donnée est vraie ou non. Si la condition
est vraie, alors le code donné à l'intérieur de la boucle sera exécuté, sinon le contrôle
sortira de la boucle.
La déclaration d'itération où vous pouvez augmenter ou diminuer votre compteur.
Vous pouvez mettre les trois parties sur une seule ligne, séparées par des points-virgules.
Organigramme
L’organigramme d’une boucle for en JavaScript serait le suivant:
Exemple3
Essayez l'exemple suivant pour savoir comment une boucle for fonctionne en JavaScript.
Démo en direct
<html>
<body>
<script >

</script>
</body>
</html>
la Boucle for ... in

La boucle for ... in est utilisée pour parcourir les propriétés d'un objet. Comme nous
n’avons pas encore discuté d’objets, vous risquez de ne pas être à l'aise avec cette
boucle. Mais une fois que vous aurez compris comment les objets se comportent en
JavaScript, vous trouverez cette boucle très utile.
Syntaxe
for (variablename in object) {
statement or block to execute
}
A chaque itération, une propriété de object est affectée à variablename et cette boucle
continue jusqu'à ce que toutes les propriétés de l'objet soient épuisées.
Exemple
Essayez l'exemple suivant pour implémenter la boucle 'for-in'. Il affiche
l' objet Navigateur du navigateur Web .
<html>
<body>
<script >

</script>
<p>Set the variable to different object and then try...</p>
</body>
</html>
Sortie
Navigator Object Properties
serviceWorker
webkitPersistentStorage

webkitTemporaryStorage
geolocation
doNotTrack
onLine
languages
language
userAgent
product
platform
appVersion
appName
appCodeName
hardwareConcurrency
maxTouchPoints
vendorSub
vendor
productSub
cookieEnabled
mimeTypes
plugins
javaEnabled
getStorageUpdates
getGamepads
webkitGetUserMedia
vibrate
getBattery
sendBeacon
registerProtocolHandler
unregisterProtocolHandler
Exiting from the loop!
Set the variable to different object and then try...
JavaScript fournit un contrôle total pour gérer les boucles et les instructions de
commutation. Il peut arriver que vous deviez sortir d'une boucle sans atteindre son
fond. Il peut également arriver que vous souhaitiez ignorer une partie de votre bloc de
code et lancer la prochaine itération de la boucle.
Pour gérer toutes ces situations, JavaScript fournit
des instructions break et continue . Ces instructions sont utilisées pour sortir
immédiatement d'une boucle ou pour démarrer la prochaine itération d'une boucle,
respectivement.
la déclaration Break
L' instruction break , qui a été brièvement introduite avec l' instruction switch , est
utilisée pour sortir d'une boucle tôt, en se détachant des accolades qui l'entourent.
Exemple
L'exemple suivant illustre l'utilisation d'une instruction break avec une boucle
while. Remarquez comment la boucle se déclenche tôt lorsque x atteint 5 et atteint
l' instruction document.write (..) située juste en dessous de l'accolade fermant.

<html>
<body>
<script >

</script>

</body>
</html>
Sortie
Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...
Nous avons déjà vu l'utilisation de l' instruction break dans une instruction switch .
la déclaration continue
L' instruction continue indique à l'interprète de démarrer immédiatement la prochaine
itération de la boucle et d'ignorer le bloc de code
restant. Lorsqu'une instruction continue est rencontrée, le flux de programme passe
immédiatement à l'expression de vérification de boucle. Si la condition reste vraie, il
commence l'itération suivante, sinon le contrôle sort de la boucle.
Exemple
Cet exemple illustre l'utilisation d'une instruction continue avec une boucle
while. Remarquez comment l' instruction continue est utilisée pour ignorer l'impression
lorsque l'indice contenu dans la variable x atteint 5 .
<html>
<body>
<script >

</script>
</body>
</html>
Sortie
Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...
JavascriPt - fonctions

01 Notion de Bases

Transféré par

Informations du document

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

01 Notion de Bases

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript JS

Pourquoi aPPrendre le JavascriPt

am.ofppt@gmail.com AHBOUZ Mustapha Page 1

BonJour le monde en utilisant JavascriPt

am.ofppt@gmail.com AHBOUZ Mustapha Page 2

qu'est-ce que JavascriPt?

am.ofppt@gmail.com AHBOUZ Mustapha Page 3

 JavaScript est un langage de programmation interprété léger.

am.ofppt@gmail.com AHBOUZ Mustapha Page 4

outils de déveloPPement JavascriPt

où est JavascriPt auJourd'hui?

am.ofppt@gmail.com AHBOUZ Mustapha Page 5

votre Premier code JavascriPt

am.ofppt@gmail.com AHBOUZ Mustapha Page 6

les Points-virgules sont facultatifs

am.ofppt@gmail.com AHBOUZ Mustapha Page 7

activation de JavascriPt dans les navigateurs

JavascriPt dans internet exPlorer

JavascriPt dans firefox

am.ofppt@gmail.com AHBOUZ Mustapha Page 8

JavascriPt dans chrome

avertissement Pour les navigateurs autres que JavascriPt

JavascriPt - Placement dans un fichier html

am.ofppt@gmail.com AHBOUZ Mustapha Page 9

JavascriPt dans la section <head> ... </ head>

JavascriPt dans la section <Body> ... </ Body>

<p>This is web page body </p>

JavascriPt dans les sections <Body> et <head>

am.ofppt@gmail.com AHBOUZ Mustapha Page 10

<input type = "button" onclick = "sayHello()" value = "Say Hello" />

JavascriPt dans un fichier externe

Au fur et à mesure que vous commencez à utiliser JavaScript de manière plus

am.ofppt@gmail.com AHBOUZ Mustapha Page 11

am.ofppt@gmail.com AHBOUZ Mustapha Page 12

Portée variaBle JavascriPt

noms de variaBles JavascriPt

mots réservés JavascriPt

am.ofppt@gmail.com AHBOUZ Mustapha Page 13

am.ofppt@gmail.com AHBOUZ Mustapha Page 14

am.ofppt@gmail.com AHBOUZ Mustapha Page 15

Set the variables to different values and then try...

No. Opérateur & Description

am.ofppt@gmail.com AHBOUZ Mustapha Page 16

document.write("(a == b) => ");

document.write("(a < b) => ");

document.write("(a > b) => ");

document.write("(a != b) => ");

document.write("(a >= b) => ");

am.ofppt@gmail.com AHBOUZ Mustapha Page 17

document.write("(a <= b) => ");

No. Opérateur & Description

am.ofppt@gmail.com AHBOUZ Mustapha Page 18

document.write("(a && b) => ");

document.write("(a || b) => ");

document.write("!(a && b) => ");

No. Opérateur & Description

am.ofppt@gmail.com AHBOUZ Mustapha Page 19

document.write("Value of a => (a = b) => ");

document.write("Value of a => (a += b) => ");

document.write("Value of a => (a -= b) => ");

document.write("Value of a => (a *= b) => ");

document.write("Value of a => (a /= b) => ");

document.write("Value of a => (a %= b) => ");

am.ofppt@gmail.com AHBOUZ Mustapha Page 20