JavaScript

introduction

JavaScript est un langage de programmation léger et interprété avec des capacités orientées objet qui vous permet de créer de l'interactivité dans des pages HTML autrement statiques.

Le code JavaScript n'est pas compilé mais traduit par le traducteur. Ce traducteur est intégré au navigateur et est responsable de la traduction du code javascript.

Key Points

  • C'est un langage de programmation léger et interprété.

  • Il est conçu pour créer des applications centrées sur le réseau.

  • Il est complémentaire et intégré à Java.

  • Il est complémentaire et intégré au HTML

  • C'est une plateforme ouverte et multiplateforme

Déclarations JavaScript

Les instructions JavaScript sont les commandes permettant d'indiquer au navigateur quelle action effectuer. Les instructions sont séparées par un point-virgule (;).

La déclaration JavaScript constitue le code JavaScript qui est traduit par le navigateur ligne par ligne.

Exemple de déclaration JavaScript:

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

Le tableau suivant montre les différentes déclarations JavaScript -

N ° Sr. DéclarationLa description
1.cas de commutateurUn bloc d'instructions dans lequel l'exécution du code dépend de différents cas. L'interpréteur vérifie chaque cas par rapport à la valeur de l'expression jusqu'à ce qu'une correspondance soit trouvée. Si rien ne correspond, undefault condition sera utilisée.
2.Sinonle if L'instruction est l'instruction de contrôle fondamentale qui permet à JavaScript de prendre des décisions et d'exécuter des instructions de manière conditionnelle.
3.Tandis queLe but d'une boucle while est d'exécuter une instruction ou un bloc de code à plusieurs reprises tant que l'expression est vraie. Une fois que l'expression devient fausse, la boucle sera fermée.
4.faire pendantBloc d'instructions qui sont exécutées au moins une fois et continuent à être exécutées tant que la condition est vraie.
5.pourIdentique à while mais l'initialisation, la condition et l'incrémentation / décrémentation se font dans la même ligne.
6.pour dansCette boucle est utilisée pour parcourir les propriétés d'un objet.
sept.continuerL'instruction continue indique à l'interpréteur de démarrer immédiatement l'itération suivante de la boucle et d'ignorer le bloc de code restant.
8.PauseL'instruction break est utilisée pour quitter une boucle tôt, en sortant des accolades englobantes.
9.fonctionUne fonction est un groupe de code réutilisable qui peut être appelé n'importe où dans votre programme. La fonction mot-clé est utilisée pour déclarer une fonction.
dix.revenirL'instruction de retour est utilisée pour renvoyer une valeur à partir d'une fonction.
11.varUtilisé pour déclarer une variable.
12.essayerUn bloc d'instructions sur lequel la gestion des erreurs est implémentée.
13.captureUn bloc d'instructions qui sont exécutées lorsqu'une erreur se produit.
14.jeterUtilisé pour lancer une erreur.

Commentaires 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 commentaire HTML <! -. JavaScript le traite comme un commentaire sur une seule ligne, tout comme il le fait pour 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

<script language="javascript" type="text/javascript">
   <!--

      // this is a comment. It is similar to comments in C++

      /*
         * This is a multiline comment in JavaScript
         * It is very similar to comments in C Programming
      */
   //-->
<script>

Variable JavaScript

Les variables sont appelées conteneurs nommés pour stocker des informations. Nous pouvons placer des données dans ces conteneurs, puis faire référence aux données simplement en nommant le conteneur.

Règles pour déclarer une variable en JavaScript

Voici les règles importantes à suivre lors de la déclaration d'une variable en JavaScript.

  • En JavaScript, les noms de variables sont sensibles à la casse, c'est-à-dire que a est différent de A.

  • Le nom de variable ne peut être démarré que par un trait de soulignement (_) ou une lettre (de a à z ou de A à Z) ou un signe dollar ($).

  • Les nombres (0 à 9) ne peuvent être utilisés qu'après une lettre.

  • Aucun autre caractère spécial n'est autorisé dans le nom de la variable.

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 type="text/javascript">
   <!--
      var money;
      var name, age;
   //-->
</script>

Les variables peuvent être initialisées au moment de la déclaration ou après la déclaration comme suit -

<script type="text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
   //-->
</script>

Type de données Javascript

Il existe deux types de types de données comme indiqué ci-dessous -

  • Type de données primitif

  • Type de données non primitif

Le tableau suivant décrit Primitive Data Types disponible en javaScript

N ° Sr.Description du type de données
1.String

Peut contenir des groupes de caractères comme valeur unique. Il est représenté entre guillemets. Eg var x = "tutorial".

2.Numbers

Contient les nombres avec ou sans décimal. Par exemple, var x = 44, y = 44,56;

3.Booleans

Contiennent seulement deux valeurs true ou false. Par exemple, var x = vrai, y = faux.

4.Undefined

La variable sans valeur est appelée Indéfinie. Par exemple var x;

5.Null

Si nous attribuons null à une variable, elle devient vide. Par exemple var x = null;

Le tableau suivant décrit Non-Primitive Data Types en javaScript

N ° Sr.Description du type de données
1.Array
Peut contenir des groupes de valeurs du même type. Par exemple, var x = {1,2,3,55};
2.Objects
Les objets sont stockés dans la paire propriété et valeur. Par exemple var rectangle = {longueur: 5, largeur: 3};

Fonctions JavaScript

Function est un groupe d'instructions réutilisables (Code) qui peuvent être appelées n'importe où dans un programme. En javascript, le mot-clé de fonction est utilisé pour déclarer ou définir une fonction.

Key Points

  • Pour définir une fonction, utilisez le mot-clé function suivi du nom de la fonction, suivi de parenthèses ().

  • Entre parenthèses, nous définissons des paramètres ou des attributs.

  • Le groupe d'instructions réutilisables (code) est entouré d'accolades {}. Ce code est exécuté chaque fois que la fonction est appelée.

Syntax

function functionname (p1, p2) {
   function coding…
}

Opérateurs JavaScript

Les opérateurs sont utilisés pour effectuer des opérations sur un, deux ou plusieurs opérandes. L'opérateur est représenté par un symbole tel que +, =, *,% etc. Voici les opérateurs pris en charge par javascript -

  • Opérateurs arithmétiques

  • Opérateurs de comparaison

  • Opérateurs logiques (ou relationnels)

  • Opérateurs d'affectation

  • Opérateurs conditionnels (ou ternaires)

  • Opérateurs arithmétiques

Opérateurs arithmatiques

Le tableau suivant montre tous les opérateurs arithmétiques pris en charge par javascript -

OpérateurLa descriptionExemple
+Ajoutez deux opérandes.10 + 10 donneront 20
-Soustrayez le deuxième opérande du premier.10-10 donnera 0
*Multipliez deux opérandes.10 * 30 donnera 300
/Diviser le numérateur par le dénominateur10/10 donnera 1
%Il est appelé opérateur de module et donne le reste de la division.10% 10 donnera 0
++Opérateur d'incrémentation, augmente la valeur entière de un10 ++ donnera 11
-Décrémenter l'opérateur, diminue la valeur entière de un10 - donnera 9

Opérateurs de comparaison

Le tableau suivant montre tous les opérateurs de comparaison pris en charge par javascript -

OpérateurLa descriptionExemple
==Vérifie si les valeurs de deux opérandes sont égales ou non. Si oui, la condition devient vraie.10 == 10 donnera vrai
! =Not Equal to operator
Vérifie si la valeur de deux opérandes est égale ou non, si les valeurs ne sont pas égales, la condition devient vraie.
10! = 10 donnera faux
>Greater Than operator
Vérifie si la valeur de l'opérande gauche est supérieure à la valeur de l'opérande droit, si oui, la condition devient vraie.
20> 10 donnera vrai
<Less than operator
Vérifie si la valeur de l'opérande gauche est inférieure à la valeur de l'opérande droit, si oui, la condition devient vraie.
10 <20 donnera vrai
> =Greater than or equal to operator
Vérifie si la valeur de l'opérande gauche est supérieure ou égale à la valeur de l'opérande droit, si oui, la condition devient vraie.
10> = 20 donnera faux
<=Less than or equal to operator
Vérifie si la valeur de l'opérande gauche est inférieure ou égale à la valeur de l'opérande droit, si oui, la condition devient vraie.
10 <= 20 donnera vrai.

Opérateurs logiques

Le tableau suivant montre tous les opérateurs logiques pris en charge par javascript -

OpérateurLa descriptionExemple
&&Logique AND L'opérateur renvoie true si les deux opérandes sont différents de zéro.10 && 10 donneront vrai.
||Logique OR L'opérateur renvoie vrai Si l'un des opérandes est différent de zéro10 || 0 donnera vrai.
!Logique NOT L'opérateur complète l'état logique de son opérande.! (10 && 10) donnera faux.

Opérateurs d'affectation

Le tableau suivant montre tous les opérateurs d'affectation pris en charge par javascript -

OpérateurLa descriptionExemple
=Simple Assignment operator
Attribue les valeurs des opérandes du côté droit à l'opérande du côté gauche.
C = A + B attribuera la valeur de A + B à C
+ =Add AND assignment operator
Il ajoute l'opérande droit à l'opérande gauche et affecte le résultat à l'opérande gauche
C + = A équivaut à C = C + A
- =Subtract AND assignment operator
Il soustrait l'opérande droit de l'opérande gauche et attribue le résultat à l'opérande gauche
C - = A équivaut à C = C - A
* =Multiply AND assignment operator
Il multiplie l'opérande droit par l'opérande gauche et affecte le résultat à l'opérande gauche
C * = A équivaut à C = C * A
/ =Divide AND assignment operator
Il divise l'opérande gauche avec l'opérande droit et affecte le résultat à l'opérande gauche
C / = A équivaut à C = C / A
% =Modulus AND assignment operator
Opérateur d'assignation de module ET, il prend le module en utilisant deux opérandes et affecte le résultat à l'opérande de gauche
C% = A équivaut à C = C% A

Opérateur conditionnel

Il est également appelé opérateur ternaire, car il a trois opérandes.

OpérateurLa descriptionExemple
?:Expression conditionnelleSi la condition est vraie? Alors valeur X: Sinon valeur Y

Structure de contrôle

La structure de contrôle contrôle en fait le flux d'exécution d'un programme. Voici les différentes structures de contrôle prises en charge par javascript.

  • sinon

  • cas de commutateur

  • faire une boucle while

  • boucle while

  • pour boucle

Sinon

L'instruction if est l'instruction de contrôle fondamentale qui permet à JavaScript de prendre des décisions et d'exécuter des instructions de manière conditionnelle.

Syntax

if (expression){
   Statement(s) to be executed if expression is true
}

Example

<script type="text/javascript">
   <!--
      var age = 20;
      if( age > 18 ){
         document.write("<b>Qualifies for driving</b>");
      }
   //-->
</script>

Boîtier de commutation

La syntaxe de base de l'instruction switch est de donner une expression à évaluer et plusieurs instructions différentes à exécuter en fonction de la valeur de l'expression. L'interpréteur vérifie chaque cas par rapport à la valeur de l'expression jusqu'à ce qu'une correspondance soit trouvée. Si rien ne correspond, une condition par défaut sera utilisée.

Syntax

switch (expression) {
   case condition 1: statement(s)
                    break;
   case condition 2: statement(s)
                    break;
   ...
   case condition n: statement(s)
                    break;
   default: statement(s)
}

Example

<script type="text/javascript">
   <!--
      var grade='A';
      document.write("Entering switch block<br/>");
      switch (grade) {
         case 'A': document.write("Good job<br/>");
            break;
         case 'B': document.write("Pretty good<br/>");
            break;
         case 'C': document.write("Passed<br/>");
            break;
         case 'D': document.write("Not so good<br/>");
            break;
         case 'F': document.write("Failed<br/>");
            break;
         default:  document.write("Unknown grade<br/>")
      }
      document.write("Exiting switch block");
   //-->
</script>

Faire en boucle

La boucle do ... while est similaire à la boucle while sauf que le contrôle de condition se produit à la fin de la boucle. Cela signifie que la boucle sera toujours exécutée au moins une fois, même si la condition est fausse.

Syntax

do{
   Statement(s) to be executed;
} while (expression);

Example

<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      do{
         document.write("Current Count : " + count + "<br/>");
         count++;
      }while (count < 0);
      document.write("Loop stopped!");
   //-->
</script>

Cela produira le résultat suivant -

Starting Loop
Current Count : 0
Loop stopped!

Alors que la boucle

Le but d'une boucle while est d'exécuter une instruction ou un bloc de code à plusieurs reprises tant que l'expression est vraie. Une fois que l'expression devient fausse, la boucle sera fermée.

Syntax

while (expression){
   Statement(s) to be executed if expression is true
}

Example

<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      while (count < 10){
         document.write("Current Count : " + count + "<br/>");
         count++;
      }
      document.write("Loop stopped!");
   //-->
</script>

Cela produira le résultat suivant -

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

Pour la boucle

La boucle for est la forme de boucle la plus compacte et 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 la condition donnée est vraie ou non. Si la condition est vraie, le code donné à l'intérieur de la boucle sera exécuté, sinon la boucle sortira.

  • L'instruction d'itération où vous pouvez augmenter ou diminuer votre compteur.

Syntax

for (initialization; test condition; iteration statement){
   Statement(s) to be executed if test condition is true
}

Exemple

<script type="text/javascript">
   <!--
      var count;
      document.write("Starting Loop" + "<br/>");
      for(count = 0; count < 10; count++){
         document.write("Current Count : " + count );
         document.write("<br/>");
      }
      document.write("Loop stopped!");
   //-->
</script>

Cela produira le résultat suivant qui est similaire à la boucle while -

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

Création d'un exemple de programme

Voici l'exemple de programme qui montre l'heure, lorsque nous cliquons sur le bouton.

<html>
   <body>
      <button onclick="this.innerHTML=Date()">The time is?</button>
      <p>Click to display the date.</p>
      <button onclick="displayDate()">The time is?</button>
      <script>
         function displayDate() {
            document.getElementById("demo").innerHTML = Date();
         }</script>

         <p id="demo"></p>
      </script>
   </body>
</html>

Output