JavaScript

Introduction :

Avant d’entrer directement dans le vif du sujet, Nous aborderons aussi plusieurs notions de bases telles que les définitions exactes de certains termes.

Qu’est-ce que le JavaScript ?

Qu’est-ce que c’est ?

Définition :

Le JavaScript est un langage de programmation de scripts orienté objet.

Les Bases du JavaScript

Tout d’abord, un langage de programmation est un langage qui permet aux développeurs d’écrire du code source qui sera analysé par l’ordinateur.

Le JavaScript permet de programmer des scripts. Comme dit plus haut, un langage de programmation permet d’écrire du code source qui sera analysé par l’ordinateur.

Les scripts sont majoritairement interprétés. Et quand on dit que le JavaScript est un langage de scripts, cela signifie qu’il s’agit d’un langage interprété ! Il est donc nécessaire de posséder un interpréteur pour faire fonctionner du code JavaScript, et un interpréteur, vous en utilisez un fréquemment : il est inclus dans votre navigateur Web !

Sachez toutefois qu’un langage de programmation orienté objet est un langage qui contient des éléments, appelés objets, et que ces différents objets possèdent des caractéristiques spécifiques ainsi que des manières différentes de les utiliser. Le langage fournit des objets de base comme des images, des dates, des chaînes de caractères… mais il est également possible de créer soi-même des objets pour se faciliter la vie et obtenir un code source plus clair (facile à lire) et une manière de programmer beaucoup plus intuitive (logique).

Le JavaScript est à ce jour utilisé majoritairement sur Internet, conjointement avec les pages Web (HTML ou XHTML). Le JavaScript s’inclut directement dans la page Web (ou dans un fichier externe) et permet de dynamiser une page HTML, en ajoutant des interactions avec l’utilisateur, des animations, de l’aide à la navigation, comme par exemple :

  • Afficher/masquer du texte 
  • Faire défiler des images 
  • Créer un diaporama avec un aperçu « en grand » des images 
  • Créer des infobulles.

Client / Serveur

Le JavaScript est un langage dit client-side, c’est-à-dire que les scripts sont exécutés par le navigateur chez l’internaute (le client). Cela diffère des langages de scripts dits server-side qui sont exécutés par le serveur Web. C’est le cas des langages comme le PHP.

 

Les différentes versions Javascript

Les versions du Javascript sont basées sur celles de l’ECMAScript (que nous abrégerons ES). Ainsi, il existe :

  • ES 1 et ES 2, qui sont les prémices du langage Javascript ;
  • ES 3 (sorti en décembre 1999), qui est fonctionnel sur tous les navigateurs (sauf les vieilles versions d’Internet Explorer) ;
  • ES 4, qui a été abandonné en raison de modifications trop importantes qui ne furent pas appréciées ;
  • ES 5 (sorti en décembre 2009), qui est la version la plus récemment sortie ;
  • ES 6, qui est actuellement en cours de conception.

Résumé

  1. Nous pouvons retenir que Le Javascript est un langage de programmation interprété, c’est-à-dire qu’il a besoin d’un interpréteur pour pouvoir être exécuté.
  2. Le Javascript est utilisé majoritairement au sein des pages Web.
  3. Tout comme le HTML, le Javascript est exécuté par le navigateur de l’internaute
  4. La nouvelle version de JavaScript est ES6

Mon premier pas en JavaScript

En effet pour écrire du code JavaScript on utilise  la balise <script> ou on va placé notre code:

Exemple:

           <script>

                alert (‘bonjour’);

            </script>

Alert(); est un élément qui nous permet d’afficher le paramètre message d’alerte ou d’information dans une boite de Dialogue

Ou placé le code Js

En effet nous avons trois possibilité de placer nos scripts,

  1. dans l’entête de notre document HTML(dans le head)
  2. au niveau de notre body(corps du document html)
  3. dans un fichier externe

Les Commentaires

Il vous sera peut-être utile d’inclure des commentaires personnels dans vos codes JavaScript. C’est même vivement recommandé comme pour tous les langages de programmation, JavaScript utilise les conventions utilisées en C et C++ soit // commentaire

Tout ce qui est écrit entre le // et la fin de la ligne sera ignoré.

Il sera aussi possible d’inclure des commentaires sur plusieurs lignes avec le code

/* commentaire sur plusieurs lignes */

Les Variables

Les variables contiennent des données qui peuvent être modifiées lors de l’exécution d’un programme. On y fait référence par le nom de cette variable.

Un nom de variable doit commencer par une lettre (alphabet ASCII) ou le signe_ et composer de lettres, de chiffres et des caractères _ et $ (à l’exclusion du blanc). Le nombre de caractères n’est pas précisé.

Pour rappel JavaScript est sensible à la casse. Attention donc aux majuscules et minuscules!

Les variables peuvent se déclarer de deux façons :

  1. soit de façon explicite. On dit à JavaScript que ceci est une variable.

La commande qui permet de déclarer une variable est le mot var. Par exemple :

var Numero = 2

var Prenom = « assane »

  1.  soit de façon implicite. On écrit directement le nom de la variable suivi de la valeur que l'on lui attribue et

JavaScript s'en accommode. Par exemple :

Numero = 2

Prenom = «  assane »

  1. Les nombres (nombre entier décimal)
  2. Les chaines de caractères (texte entouré par des guillemets)
  3. Les boolean ( true or false)
  4. Null (représente pas de valeur c’est-à-dire rien)

+  =>    addition         x + 3 14

-      =>  soustraction  x - 3 8

*    =>    multiplication       x*2 22

/   =>     division      x /2 5.5

%   =>    modulo     x%5 1

š=   =>     affectation   x=5 5

&&      =>   et

||        =>   ou

 

Les opérateurs d’incrémentation:

x++   => incrémentation (x=x+1)  ex: a= x++

X--    => décrémentation (x=x-)  ex: a= y--

A un moment ou à un autre de la programmation, on aura besoin de tester une condition. Ce qui permettra d'exécuter ou non une série d'instructions.

Dans sa formulation la plus simple, l'expression if se présente comme suit

if (condition vraie) {

//une ou plusieurs instructions;

}

Ainsi, si la condition est vérifiée, les instructions s'exécutent. Si elle ne l'est pas, les instructions ne s'exécutent pas et le programme passe à la commande suivante l'accolade de fermeture.

 

De façon un peu plus évoluée, il y a l'expression if...else

if (condition vraie) {

   instructions1;

}

else {

   instructions2;

}

Si la condition est vérifiée (true), le bloc d'instructions 1 s'exécute. Si elle ne l'est pas (false), le bloc d'instructions 2 s'exécute.

Dans le cas où il n'y a qu'une instruction, les accolades sont facultatives.

L'expression for permet d'exécuter un bloc d'instructions un certain nombre de fois en fonction de la réalisation d'un certain critère. Sa syntaxe est :

for (valeur initiale ; condition ; progression) {

  instructions;

}

Exemple:

  <button onclick="myFunction()">Cliquer moi</button>

  <p id="demo"></p> 

<script>

  function myFunction() {

    var text = "";

    var i;

       for (i = 0; i < 10; i++) {

        text += "le numero est " + i + "<br>";

    }

     document.getElementById("demo").innerHTML = text;

  }

</script>

 

Au premier passage, la variable i, étant initialisée à 0, vaut bien entendu 0. Elle est bien inférieure à 10. Elle est donc incrémentée d'une unité par l'opérateur d'incrémentation i++ (i vaut alors 2) et les instructions

s'exécutent. A la fin de l'exécution des instructions, on revient au compteur. La variable i (qui vaut 2) est encore toujours inférieure à 10. Elle est augmentée de 1 et les instructions sont à nouveau exécutées. Ainsi de suite jusqu'à ce que i vaille 10. La variable i ne remplit plus la condition i<10. La boucle s'interrompt et le programme continue après l'accolade de fermeture.

L'instruction while permet d'exécuter une instruction (ou un groupe d'instructions) un certain nombre de fois.

while (condition vraie){

  continuer à faire quelque chose

}

Aussi longtemps que la condition est vérifiée, Javascript continue à exécuter les instructions entre les accolades. Une fois que la condition n'est plus vérifiée, la boucle est interrompue et on continue le script.

Exemple :

  <button onclick="myFunction()">Cliquer moi</button>

<p id="demo"></p>

<script>

function myFunction() {

  var text = "";

  var i = 0;

  while (i < 20) {

    text += "<br>assane " + i;

    i++;

  }

  document.getElementById("demo").innerHTML = text;

}

</script>

 

Explication :

Voyons comment fonctionne cet exemple. D'abord la variable qui nous servira de compteur i est initialisée à 0. La boucle while démarre donc avec la valeur 0 qui est inférieure à 20. La condition est vérifiée.

On exécute les instructions des accolades. D'abord, "ligne : 0" est affichée et ensuite le compteur est incrémenté de 1 et prend donc la valeur 2. La condition est encore vérifiée. Les instructions entre les accolades sont exécutées. Et ce jusqu'à l'affichage de la ligne 19. Là, le compteur après l'incrémentation vaut 19.

La condition n'étant plus vérifiée, on continue dans le script et c'est alors fin de boucle qui est affiché.

Pour déclarer ou définir une fonction, on utilise le mot (réservé) function.

La syntaxe d'une déclaration de fonction est la suivante :

function nom_de_la_fonction(arguments) {

... code des instructions ...

}

Exemple :

 Retourner une valeur :

  <p id="demo"></p>

  <script>

       

  var x = myFunction(4, 3);

  document.getElementById("demo").innerHTML = x;

  function myFunction(a, b) {

    return a * b;

  }

  </script>