{"id":108,"date":"2021-03-12T10:30:30","date_gmt":"2021-03-12T10:30:30","guid":{"rendered":"https:\/\/kaay-coder.2sweb.sn\/kc\/?page_id=108"},"modified":"2022-04-03T01:03:00","modified_gmt":"2022-04-03T01:03:00","slug":"javascript","status":"publish","type":"page","link":"https:\/\/kaay-coder.2sweb.sn\/kc\/langages\/javascript\/","title":{"rendered":"JavaScript"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tQu'est ce JavaScript<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t

JavaScript est un langage de programmation de scripts cr\u00e9e en 1995, principalement employ\u00e9 dans les pages web interactives et \u00e0 ce titre est une partie essentielle des applications web.\u00a0Ce langage est un\u00a0<\/span>langage de programmation qui permet d’apporter des am\u00e9liorations au langage HTML en\u00a0<\/span>permettant d’ex\u00e9cuter des commandes.\u00a0<\/span><\/p>

A quoi ressemble un script?<\/strong>
<\/span>Un script est une portion de code qui vient s’ins\u00e9rer dans une page HTML. Le code du script n’est
toutefois pas visible dans la fen\u00eatre du navigateur car il est compris entre des balises (ou tags)
sp\u00e9cifiques qui signalent au navigateur qu’il s’agit d’un script \u00e9crit en langage JavaScript.
Les balises annon\u00e7ant un code Javascript sont les suivantes:<\/span>
<\/span><\/span><\/p>

<script language=\"Javascript\">
\u00a0 \u00a0 Placez ici le code de votre script
<\/script><\/span>\u00a0<\/span><\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tUn exemple de script<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
Comme g\u00e9n\u00e9ralement dans les tutoriels de Javascript on va faire afficher un boite de dialogue suite au chargement d’une page HTML. Dans ce cas le script est totalement inutile voire ennuyeux pour vos visiteurs. Cet exemple montre ce que l’abus de Javascript peut donner. Il faudra apprendre \u00e0 se servir du Javascript avec mod\u00e9ration!
Voici la page HTML correspondante:<\/p>
<html>
\u00a0 \u00a0<head>
\u00a0 \u00a0 \u00a0 \u00a0<title> Voici une page contenant du Javascript<\/title>
\u00a0 \u00a0 <\/head>
\u00a0 \u00a0 <body>
\u00a0 \u00a0 \u00a0 <script language=\"Javascript\">
\u00a0 \u00a0 \u00a0 \u00a0 alert(\"Voici un message d alerte!\");
\u00a0 \u00a0 \u00a0<\/script>
<\/span>\u00a0 \u00a0<\/body>
<\/html> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tO\u00f9 ins\u00e9rer le code javascript<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
A quel emplacement ins\u00e9rer le Javascript dans votre page HTML. <\/span>Il y a plusieurs fa\u00e7on d’inclure du JavaScript dans une page HTML<\/span><\/p>
 Dans la balise script<\/span>\u00a0<\/strong><\/p>
Le code Javascript peut \u00eatre ins\u00e9r\u00e9 o\u00f9 vous le d\u00e9sirez dans votre page Web, vous devez toutefois veiller \u00e0 ce que le navigateur est enti\u00e8rement charg\u00e9 votre script avant d’ex\u00e9cuter une instruction.<\/span><\/p>
<script language=\"Javascript\">\n\u00a0 \u00a0 alert(\"Voici un message d alerte!\");\n<\/script><\/span><\/pre>
\u00a0 \u00a0 Dans un fichier externe<\/span>\u00a0<\/strong><\/p>
Il est possible de mettre les codes de JavaScript en annexe dans un fichier (\u00e0 partir de Netscape 3.0 uniquement). Le code \u00e0 ins\u00e9rer est le suivant:<\/span><\/p>
<script language=Javascript src=\"url\/fichier.js\"> <\/script><\/span><\/pre>
\u00a0 \u00a0 \u00a0<\/strong>Gr\u00e2ce aux \u00e9v\u00e8nements<\/strong>
<\/span>On appelle <\/span>\u00e9v\u00e8nement <\/span>une action de l’utilisateur, comme le clic d’un des boutons de la souris. Le\u00a0code dans le cas du r\u00e9sultat d’un \u00e9v\u00e9nement s’\u00e9crit:<\/span><\/p>
<balise <\/span>eventHandler<\/span>=\"code Javascript \u00e0 ins\u00e9rer\"><\/span><\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tLes Variables<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
Une variable est un objet rep\u00e9r\u00e9 par son nom, pouvant contenir des donn\u00e9es, qui pourront \u00eatre modifi\u00e9es lors de l’ex\u00e9cution du programme.<\/span><\/p>
Les noms de variables sont sensibles \u00e0 la casse (le Javascript fait la diff\u00e9rence entre un
nom en majuscule et un nom en minuscules), il faut donc veiller \u00e0 utiliser des noms
comportant la m\u00eame casse!\u00a0<\/span><\/p>
\u00a0 \u00a0 La d\u00e9claration de variables :\u00a0<\/b><\/span>Le Javascript \u00e9tant tr\u00e8s souple au niveau de l’\u00e9criture (\u00e0 double-tranchant car il laisse passer des erreurs…).\u00a0<\/span>la d\u00e9claration des variables peut se faire de deux fa\u00e7ons:\u00a0<\/span>soit de fa\u00e7on explicite, en faisant pr\u00e9c\u00e9der la variable du mot cl\u00e9 <\/span>var<\/b> <\/span>qui permet\u00a0<\/span>d’indiquer de fa\u00e7on rigoureuse qu’il s’agit d’une variable:<\/span><\/p>
var chaine=\"bonjour\";
<\/span><\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tTypes de donn\u00e9es des variables<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
\u00a0En Javascript il n’y a pas besoin de d\u00e9clarer le type de variables que l’on utilise, contrairement \u00e0 des langages \u00e9volu\u00e9s tels que le langage C ou le Java pour lesquels il faut pr\u00e9ciser s’il s’agit d’entier (<\/span>int<\/span>), de nombre \u00e0 virgule flottante (<\/span>float<\/span>), de caract\u00e8res (<\/span>char<\/span>). En fait le Javascript n’autorise la manipulation que de 4 types de donn\u00e9es:
<\/span>\u00b7 <\/span>des nombres<\/span>: entiers ou \u00e0 virgules
<\/span>\u00b7 <\/span>des cha\u00eenes de caract\u00e8res <\/span>(string): une suite de caract\u00e8res
<\/span>\u00b7 <\/span>des bool\u00e9ens<\/span>: des variables \u00e0 deux \u00e9tats permettant de v\u00e9rifier une condition
<\/span>\u00b7 <\/span>true: si le r\u00e9sultat est vrai
<\/span>\u00b7 <\/span>false: lors d’un r\u00e9sultat faux
<\/span>\u00b7 <\/span>des variables de type <\/span>null<\/span>: un mot caract\u00e9ristique\u00a0pour indiquer qu’il n’y a pas de<\/b>
donn\u00e9es<\/b><\/span><\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tLes Op\u00e9rateurs<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
\u00a0 \u00a0 Qu’est-ce qu’un op\u00e9rateur?<\/b>\nLes op\u00e9rateurs sont des symboles qui permettent de manipuler des variables, c’est-\u00e0-dire effectuer des op\u00e9rations, les \u00e9valuer. On distingue plusieurs types d’op\u00e9rateurs:\n
\n
Op\u00e9rateurs arithm\u00e9tiques JavaScript<\/span><\/h6>\n
Les op\u00e9rateurs arithm\u00e9tiques sont utilis\u00e9s pour effectuer de l’arithm\u00e9tique sur les nombres:<\/span><\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Operator<\/th>\nDescription<\/th>\n<\/tr>\n
+<\/td>\nAddition<\/td>\n<\/tr>\n
–<\/td>\nSubtraction<\/td>\n<\/tr>\n
*<\/td>\nMultiplication<\/td>\n<\/tr>\n
**<\/td>\nExponentiation (ES2016<\/a>)<\/td>\n<\/tr>\n
\/<\/td>\nDivision<\/td>\n<\/tr>\n
%<\/td>\nModulus (Division Remainder)<\/td>\n<\/tr>\n
++<\/td>\nIncrement<\/td>\n<\/tr>\n
—<\/td>\nDecrement<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Op\u00e9rateurs d’affectation JavaScript<\/span><\/h2>\nLes op\u00e9rateurs d’affectation attribuent des valeurs aux variables JavaScript.<\/span><\/span>\n\n\n\n\n\n\n\n\n\n\n
Operator<\/th>\nExample<\/th>\nSame As<\/th>\n<\/tr>\n
=<\/td>\nx = y<\/td>\nx = y<\/td>\n<\/tr>\n
+=<\/td>\nx += y<\/td>\nx = x + y<\/td>\n<\/tr>\n
-=<\/td>\nx -= y<\/td>\nx = x – y<\/td>\n<\/tr>\n
*=<\/td>\nx *= y<\/td>\nx = x * y<\/td>\n<\/tr>\n
\/=<\/td>\nx \/= y<\/td>\nx = x \/ y<\/td>\n<\/tr>\n
%=<\/td>\nx %= y<\/td>\nx = x % y<\/td>\n<\/tr>\n
**=<\/td>\nx **= y<\/td>\nx = x ** y<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tLes structures conditionnelles<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
On appelle <\/span>structure conditionnelle <\/span>les instructions qui permettent de tester si une condition est vraie ou non, ce qui permet de donner de l’interactivit\u00e9 \u00e0 vos scripts par exemple.
<\/span>  L’instruction if<\/b>
<\/span>L’instruction if est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe diff\u00e9rente…). Elle permet d’ex\u00e9cuter une s\u00e9rie d’instruction si jamais une condition est r\u00e9alis\u00e9e. La syntaxe de cette expression est la suivante:<\/span><\/p>\n
if (condition r\u00e9alis\u00e9) {\n<\/span><\/span>    liste d'instructions<\/span>\n}<\/span><\/pre>\n
      <\/b>L’instruction if else<\/b>
<\/span>L’expression <\/span>if else <\/span>permet d’ex\u00e9cuter une autre s\u00e9rie d’instruction en cas de non-r\u00e9alisation de la condition.
La syntaxe de cette expression est la suivante:<\/span><\/p>
if (condition r\u00e9alis\u00e9) {
    liste d'instructions
   }else {
     autre s\u00e9rie d'instructions
}<\/span><\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tLes boucles<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
Les boucles sont des structures qui permettent d’ex\u00e9cuter plusieurs fois la m\u00eame s\u00e9rie
d’instructions jusqu’\u00e0 ce qu’une condition ne soit plus r\u00e9alis\u00e9e.<\/span><\/p>
\u00a0 \u00a0La boucle for<\/strong>
<\/span>L’instruction <\/span>for <\/span>permet d’ex\u00e9cuter plusieurs fois la m\u00eame s\u00e9rie d’instructions: c’est une boucle! <\/span>La syntaxe de cette expression est la suivante:<\/p>
\u00a0for (compteur; condition; modification du compteur) {\n   liste d'instructions\n}<\/span> \n Par exemple:\n<\/span>for (i=1; i<6; i++) {\nAlert(i)\n}<\/span><\/pre>
\u00a0 \u00a0 L’instruction while<\/strong>
<\/span>L’instruction <\/span>while <\/span>repr\u00e9sente un autre moyen d’ex\u00e9cuter plusieurs fois la m\u00eame s\u00e9rie d’instructions. La syntaxe de cette expression est la suivante:<\/span><\/p>
while (condition r\u00e9alis\u00e9e) {
liste d'instructions
}<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tLes fonctions  <\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
On appelle <\/span>fonction <\/span>un sous-programme qui permet d’effectuer un ensemble d’instruction par simple appel de la fonction dans le <\/span>corps <\/span>du programme principal.
\u00a0 \u00a0 La d\u00e9claration d’une fonction<\/b>
<\/span>Avant d’\u00eatre utilis\u00e9e, une fonction doit \u00eatre d\u00e9finie car pour l’appeler dans le corps du programme il faut que le navigateur la connaisse, c’est-\u00e0-dire qu’il connaisse son nom, ses arguments et les instructions qu’elle contient. La d\u00e9finition d’une fonction s’appelle “d\u00e9claration”<\/span>. La d\u00e9claration d’une fonction se fait gr\u00e2ce au mot cl\u00e9 function selon la syntaxe suivante:<\/span><\/p>
function Nom_De_La_Fonction(argument1, argument2, ...) {\nliste d'instructions\n}<\/span>\u00a0<\/span><\/pre>
\u00a0Appel de fonction<\/strong>
<\/span>Pour ex\u00e9cuter une fonction, il suffit de faire appel \u00e0 elle en \u00e9crivant son nom (une fois de plus en respectant la casse) suivie d’une parenth\u00e8se ouverte (\u00e9ventuellement des arguments) puis d’une parenth\u00e8se ferm\u00e9e:<\/span><\/p>
Nom_De_La_Fonction();<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t<\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\tLes Objets<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t
Les objets JavaScript sont des conteneurs pour des\u00a0valeurs nomm\u00e9es<\/strong> appel\u00e9es propri\u00e9t\u00e9s ou m\u00e9thodes.\u00a0Les valeurs sont \u00e9crites sous forme de\u00a0<\/span>paires\u00a0<\/span><\/span>nom: valeur<\/span><\/span><\/strong> (nom et valeur s\u00e9par\u00e9s par deux points).\u00a0 Le type de donn\u00e9e fondamentale de javascript\u00a0 est l’objet. Toute valeur dans javascript qui n’est pas une chaine, un nombre, true, false, null, ou undefined est un objet.
<\/span><\/span>Exemple :<\/p>
var<\/span>\u00a0person = {firstName:\"John\"<\/span>, lastName:\"Doe\"<\/span>, age:50<\/span>};<\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n
\n\n\t