Le javascript

Des pages Web dynamiques

python

JavaScript est un langage de script. C’est, avec HTML et CSS, l’une des technologies de base du World Wide Web.

Grâce à JavaScript, vous pouvez apporter de l’interactivité à vos pages web, en améliorant ainsi considérablement votre expérience utilisateur ! Initialement, JavaScript n’était implémenté que côté client dans les navigateurs web. Mais les moteurs JavaScript peuvent maintenant être intégrés à de nombreux autres types de logiciels hôtes, y compris côté serveur dans les serveurs web et les bases de données. JavaScript est également inclus dans des programmes non web tels que les traitements de texte et les logiciels PDF.

Vous devez également savoir que le format de sérialisation JSON, utilisé pour stocker des structures de données dans des fichiers et les transmettre à travers le réseau Internet, est basé sur le langage JavaScript. JavaScript est la seule technologie cliente capable de s'intégrer parfaitement avec HTML et CSS et supportée par tous les navigateurs.

Comment insérer du code JavaScript ?

La balise script

Les programmes JavaScript peuvent être insérés dans n'importe-quelle partie d'un document HTML avec l'aide de la balise <script>. Voici un exemple :

<!DOCTYPE html> 
<html>
<head> 
</head> 
<body>
<h1>Une page web</h1> 
<script> 
    alert( 'hello world !' ); 
</script>
</body> 
</html>

Scripts externes

Si vous avez beaucoup de code JavaScript, le meilleur moyen est de le placer dans un fichier séparé. Pour lier un fichier de script à votre code HTML, utilisez la balise de script avec l'attribut "src". La valeur de l'attribut "src" doit être le lien vers votre script. Voici un exemple :

<script src="js/main.js">

Les variables JavaScript

Dans un langage de programmation, les variables sont utilisées pour stocker des informations. Cela est utile dans n'importe-quelle application. Par exemple, nous pouvons stocker le nom de l'utilisateur dans une variable, afin de l'afficher lorsqu'une autre action est effectuée.

JavaScript utilise le mot-clé var pour déclarer des variables. Le signe égal est utilisé pour assigner des valeurs aux variables.

var a;
a = 'hello world';

Les commentaires

Un commentaire est un texte que vous avez mis dans votre code JavaScript dans le but de le documenter. Les commentaires JavaScript ne sont pas exécutés. Pour commenter quelque-chose, vous devez utiliser les doubles barres obliques // ou mettre votre commentaire entre / * et * /.

/*
Ceci est un commentaire.
*/
// Ou alors un commentaire sur une seule ligne

Affichage des données JavaScript

Pour afficher vos données JavaScript, vous pouvez utiliser l'une des méthodes suivantes :

    1. Ecrire dans la console du navigateur(F12,onglet "console"), en utilisant console.log()
    2. Ecrire dans le HTML en utilisant document.write()
    3. Ecrire dans un élément HTML, en utilisant innerHTML

<!DOCTYPE html>
<html>
<head>
  <title>Affichage des données en Javascript</title>
</head>
<body>
 <script> // Exemple 2
document.write("Hello World!");
document.write("Have a nice day!");
</script>
<scrîpt>
var a='hello;
var b='world!';
</script>
  <p id="para">Some text here</p>
  <script>// Exemple 3
document.getElementById("para").înnerHTML = a + b;
</script>
</body>
</html>

Vous pouvez aussi utiliser les interactions en utilisant les boîtes de dialogue suivantes :

    1. window.alert()
    2. window.prompt()
    3. window.confirm()

<!DOCTYPE html>
<html>
<head>
  <title>Affichage des données en Javascript</title>
</head>
<body>
<script>
 var place = "";
 place = window.prompt('Combien de place de cinéma désirez vous ?'); 
 /*La boîte de dialogue window.prompt() affiche un message optionnel
demandant à l‘utilisateur d'entrer un texte. Vous pouvez stocker la réponse
de votre utilisateur dans une variable. */
 alert("Votre commande a bien été enregistré !");
 result=window.confirm("Voulez-vous quitter ce site ?")/*"message" est une chaîne de caractères optionnelle à afficher dans la modale. "result" stocke le booléen indiquant la valeur choisie entre 0K(true) ou Annuler (false). Ce résultat peut ensuite être utilise dans un autre bloc d‘instructions.*/
</script>

<h1>JavaScript: window.prompt()</h1>
<h1>JavaScript: window.confirm()</h1>
</body>
</html>

Types de données JavaScript

Les variables JavaScript peuvent stocker plusieurs types de données . En programmation, le type de données est un concept important. L'ordinateur a besoin de savoir de quel type de données il s'agit, car chaque type de données est traité de manière différente.

Il existe 7 types de données en JavaScript :(en voici 5)

  • Le type "String" JavaScript
    Il s'agit d'une série de caractères, écrits entre guillemets simples ou doubles, comme par exemple "Faustin Fleret".
  • //string 
      var ville = "Le Moule";   // Guillemets doubles 
      var ville = 'Port-louis';   // Guillemets simples 
      
  • Le type "Number" JavaScript
    JavaScript possède un type pour stocker des nombres. Ils peuvent être écrits avec ou sans décimal.
      //le type "Number" 
        var x1 = 19.00; // Ecriture décimale 
        var x2 = 19;   // Ecriture non décimale 
        //notation scientifique 
        var y1 = 129e5; // 12900000 
        var y2 = 129e-5;     // 0.00129 
        
  • Le type "Boolean" JavaScript
    Un booléen peut stocker seulement 2 valeurs : true ou false. Le booléen est utilisé la plupart du temps dans une déclaration conditionnelle.
  • Le type "Null" JavaScript
    En JavaScript, la valeur null représente l'absence intentionnelle de valeur d'un objet. C'est simplement une valeur spéciale qui représente "rien", "valeur inconnue" ou "vide". La valeur null exprime une absence d'identification, indiquant qu'une variable ne pointe sur aucun objet. Voyons un exemple :
    //null 
    var age = null; 
    if (age === null) { 
    console.log("Vous n'avez pas mentionné votre âge."); 
    }
  • Le type "Undefined" JavaScript
    En JavaScript, une variable sans valeur, porte la valeur undefined. Le type est également undefined.
    var age; //valeur undefined, type undefined
    //N‘importe—quelle variable peut être vidée, en assignant undefined à la valeur.
    age = undefined; //va1eur undefined, type undefined
    

L'opérateur "typeof" retourne le type de l‘argument. Vous pouvez utiliser 2 types de syntaxe :

    En tant qu'opérateur : typeof x
    En tant que fonction : typeof(x)

Les opérateurs JavaScript

Opérateurs d'affectation

Nom Opérateur composé Signification
Affectation x = y x = y
Affectation après addition x += y x = x + y
Affectation après soustraction x -= y x = x - y
Affectation après multiplication x *= y x = x * y
Affectation après division x /= y x = x / y
Affectation du reste x %= y x = x % y
Affectation après exponentiation x **=y x = x ** y
Affectation après décalage à gauche x <<= y x = x << y
Affectation après décalage à droite x >>= y x = x >> y
Affectation après décalage à droite non signé x >>>= y x = x >>> y
Affectation après ET binaire x &= y x = x & y
Affectation après OU exclusif binaire x ^= y x = x ^ y
Affectation après OU binaire x |= y x = x | y


Opérateurs de comparaison

Opérateur Description Exemples qui renvoient true
Égalité (==) Renvoie true si les opérandes sont égaux après conversion en valeurs de mêmes types. 3 == var1

"3" == var1

3 == '3'
Inégalité (!=) Renvoie true si les opérandes sont différents. var1 != 4
var2 != "3"
Égalité stricte (===) Renvoie true si les opérandes sont égaux et de même type. Voir Object.is() et égalité de type en JavaScript. 3 === var1
Inégalité stricte (!==) Renvoie true si les opérandes ne sont pas égaux ou s'ils ne sont pas de même type. var1 !== "3"
3 !== '3'
Supériorité stricte (>) Renvoie true si l'opérande gauche est supérieur (strictement) à l'opérande droit. var2 > var1
"12" > 2
Supériorité ou égalité (>=) Renvoie true si l'opérande gauche est supérieur ou égal à l'opérande droit. var2 >= var1
var1 >= 3
Infériorité stricte (<) Renvoie true si l'opérande gauche est inférieur (strictement) à l'opérande droit. var1 < var2
"2" < "12"
Infériorité ou égalité (<=) Renvoie true si l'opérande gauche est inférieur ou égal à l'opérande droit. var1 <= var2
var2 <= 5


Les opérateurs binaires voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards.

Opérateurs binaires

Opérateur Utilisation Description Exemple
AND (ET) binaire a & b Renvoie un 1 à chaque position binaire pour laquelle les bits des deux opérandes sont à 1. 15 & 9 donne 9 car 1111 & 1001 = 1001
OR (OU) binaire a | b Renvoie un zéro à chaque position binaire pour laquelle au moins un des bits des deux opérandes est à 0. 15 | 9 donne 15 car 1111 | 1001 = 1111
XOR (OU exclusif) binaire a ^ b Renvoie un zéro à chaque position binaire pour laquelle les bits sont les mêmes (et un 1 pour chacun des bits qui est différent). 15 ^ 9 donne 6 car 1111 ^ 1001 = 0110
NOT (NON) binaire ~ a Inverse les bits de l'opérande. ~15 donne -16 car ~00000000...00001111 = 11111111...11110000
Décalage binaire à gauche a << b Décale la représentation binaire de b bits sur la gauche et complète avec des zéros à droite. 9<<2 renvoie 36, car 1001, décalé de 2 bits à gauche, devient 100100, dont la représentation en base 10 est 36
Décalage binaire à droite a >> b Décale la représentation binaire de b bits sur la droite en ignorant les bits perdus. 9>>2 renvoie 2, car 1001, décalé de 2 bits à droite, devient 10 représentant 2. De même -9>>2 renvoie -3, car le signe est préservé.
Décalage binaire à droite en complétant avec des zéros a >>> b Décale la représentation binaire de b bits sur la droite en ignorant les bits perdus et ajoute des zéros sur la gauche.19>>>2 renvoie 4, car 10011, décalé de 2 bits, devient 100 qui représente 4. Pour les nombres positifs, cet opérateur et l'opérateur précédent renvoient les mêmes résultats.

Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs && et || renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit.


Opérateurs logiques

Opérateur Usage Description Exemple
ET logique(&&) expr1 && expr2 Renvoie expr1 s'il peut être converti à false, sinon renvoie expr2. Dans le cas où on utilise des opérandes booléens, && renvoie true si les deux opérandes valent true, false sinon.
var a3 =  false && true;     // f && t renvoie false
var a5 = "Chat" && "Chien";  // t && t renvoie Chien
var a6 =  false && "Chat";   // f && t renvoie false
var a7 = "Chat" && false;    // t && f renvoie false
OU logique (||) expr1 || expr2 Renvoie expr1 s'il peut être converti à true, sinon renvoie expr2. Dans le cas où on utilise des opérandes booléens, || renvoie true si l'un des opérandes vaut true, si les deux valent false, il renvoie false.
var o5 = "Chat" || "Chien";  // t || t renvoie Chat
var o6 =  false || "Chat";   // f || t renvoie Chat
var o7 = "Chat" || false;    // t || f renvoie Chat
NON logique (!) !expr Renvoie false si son unique opérande peut être converti en true, sinon il renvoie true.
var n1 = !true;   // !t renvoie false
var n2 = !false;  // !f renvoie true
var n3 = !"Chat"; // !t renvoie false

Les conditions JavaScript

JavaScript prend en charge les instructions conditionnelles qui permettent d'effectuer différentes actions en fonction de différentes conditions. Par exemple, en fonction de la valeur d'une variable, vous souhaiterez peut-être rediriger l'utilisateur vers différentes pages.

JavaScript supporte les formes suivantes de déclarations : if ,if...else, if...else if...

L'instruction if exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction

if (condition) {
  instructions1
} else {
  instructions2
}

Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée

if (x > 50){
  // faire quelque chose
} else if (x > 5) {
  // faire autre chose
} else {
  // faire encore autre chose
}

Les boucles JavaScript

Une boucle peut exécuter un bloc de code plusieurs fois. Ceci est très utile lorsque vous devez effectuer une action encore et encore. JavaScript supporte différents types de boucles :

La boucle 'while'

Une instruction while permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Cette instruction while s'utilise de la façon suivante :

while (condition)
 { instruction }

La boucle 'do...while'

L'instruction do...while permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. (NdT : littéralement « do...while » signifie « faire... tant que »). Une instruction do...while s'utilise de la façon suivante :

do
 { instruction }
while (condition);

La boucle 'for'

Une boucle for répète des instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. La boucle JavaScript ressemble beaucoup à celle utilisée en C ou en Java. Une boucle s'utilise de la façon suivante :

for ([expressionInitiale]; [condition]; [expressionIncrément])
  { instruction }

La boucle 'for...in'

L'instruction for...in permet d'itérer sur l'ensemble des propriétés énumérables d'un objet. Pour chaque propriété, JavaScript exécutera l'instruction indiquée. Cette instruction s'utilise de la façon suivante :

for (variable in objet) {
  instruction
}

Fonctions JavaScript

L'avantage d'une fonction, c’est que chaque fois que vous avez besoin de ce bloc de code particulier, il vous suffit d'appeler à nouveau la fonction, au lieu de réécrire des lignes de code compliquées encore et encore. C'est un gain de temps considérable i Une fonction JavaScript est exécutée lorsque "quelque-chose" l'invoque (l'appelle).

function nom(parametre1, parametrez, parametre3) {
// code à exécuter
}

Vous pouvez donner le nom que vous voulez à une fonction. Essayez de lui donner un nom qui la décrit correctement. Une fonction JavaScript est définie avec le mot-clé function, suivi d'un nom, suivi de parenthèses (). Les noms de fonction peuvent contenir des lettres, des chiffres, des traits de soulignement et des signes dollar. Les mêmes règles que les variables sont appliquées. Les parenthèses peuvent inclure des paramètres séparés par des virgules : (paramètrel, paramètreZ, ...). L'intérêt est ensuite d'utiliser ces paramètres au sein même de la fonction. Le code à exécuter par la fonction doit être placé entre accolades : { }

Exemple :

functïon add(a,b)
{
return a+b;
}

Variables locales

Les variables déclarées dans une fonction JavaScript sont locales à cette fonction. Les variables locales peuvent seulement être accédées depuis l'intérieur de la fonction. Cela signifie que vous ne pourrez jamais appeler cette variable en dehors de la fonction.

En conclusion, les variables locales sont créées quand la fonction démarre, et supprimées quand la fonction est complétée.

Les evenements JavaScrIpt

Les événements sont des actions qui se produisent dans le système que vous programmez. Le système vous informe de ces événements afin que vous puissiez y répondre d'une manière ou d'une autre, si nécessaire. Par exemple, si l'utilisateur clique sur le bouton d'une page web, vous pouvez répondre à cet événement en affichant une alerte à l'utilisateur. Lorsque JavaScript est utilisé dans les pages HTML, JavaScript peut "réagir" à ces événements. Voici quelques exemples d'événements HTML :

    Une page HTML a fini de se charger.
    L'utilisateur modifie la valeur d'un champ HTML.
    L'utilisateur appuie sur une touche du clavier.
    L'utilisateur redimensionne ou ferme la fenêtre du navigateur.
    Un formulaire est en cours de soumission.
    Une erreur survient.
    Une vidéo arrive en fin de lecture.

Les des évenements

Nom de l'événement

Action pour le déclencher

click

Cliquer (appuyer puis relâcher) sur l'élément

dblclick

Double-cliquer sur l'élément

mouseover

Faire entrer le curseur sur l'élément

mouseout

Faire sortir le curseur de l'élément

mousedown

Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément

mouseup

Relâcher le bouton gauche de la souris sur l'élément

mousemove

Faire déplacer le curseur sur l'élément

keydown

Appuyer (sans relâcher) sur une touche de clavier sur l'élément

keyup

Relâcher une touche de clavier sur l'élément

keypress

Frapper (appuyer puis relâcher) une touche de clavier sur l'élément

focus

« Cibler » l'élément

blur

Annuler le « ciblage » de l'élément

change

Changer la valeur d'un élément spécifique aux formulaires (input,checkbox, etc.)

input

Taper un caractère dans un champ de texte (son support n'est pas complet sur tous les navigateurs)

select

Sélectionner le contenu d'un champ de texte (input,textarea, etc.)


Donc, pour faire simple, vous pouvez déclencher du code JavaScript chaque fois qu’un des événements ci-dessus se produit. Chaque événement disponible peut être couplé à un gestionnaire d'événement, qui est un bloc de code (une fonction JavaScript) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements.

Exemple

<span id="clickme">Cliquez-moi !</span>
<script>
    var element = document.getElementById('clickme');

    element.addEventListener('click', function() {
        alert("Vous m'avez cliqué !");
    });
</script>

Le DOM JavaScript

Document Object Model (DOM) signifie modèle d 'objets de document en français. Avec le modèle objet, JavaScript a tous les pouvoirs requis pour créer un document HTML dynamique :

    JavaScript peut changer tous les éléments HTML de la page
    JavaScript peut changer tous les attributs HTML de la page
    JavaScript peut changer tous les stylés CSS de la page
    JavaScript peut supprimer les éléments et les attributs HTML existants
    JavaScript peut utiliser de nouveaux éléments et attributs HTML
    JavaScript peut réagir à tous les événements HTML de la page
    JavaScript peut créer de nouveaux événements HTML dans la page

Trouver des éléments HTML

Méthode Description
document.getElementById(id) Trouver un élément à partir de son "id"
document.getElementsByTagName(name ) Trouver des éléments à partir d'un nom de balise
document.getElementsByClassName(name ) Trouver des éléments à partir d'un nom de classe

Changer des éléments HTML

Propriété Description
element .innerHTML = new html content Changer le contenu d'un élément HTML
element .attribute = new value Changer la valeur de l'attribut d'un élément HTML
element .style.property = new style Changer le style d'un élément HTML
Méthode Description
element .setAttribute(attribute, value) Changer la valeur de l'attribut d'un élément HTML

Ajouter ou supprimer des éléments HTML

Méthode Description
document.createElement(element ) Créer un élément HTML
document.removeChild(element ) Supprimer un élément HTML
document.appendChild(element ) Ajouter un élément HTML
document.replaceChild(new, old ) Remplacer un élément HTML
document.write(text ) Ecrire dans le flux de sortie HTML

Ajouter des gestionnaires d'événement

Méthode Description
document.getElementById(id ).onclick = function(){code } Ajouter un code de gestionnaire d'événement à un événement onclick