Le javascript
Des pages Web dynamiques
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
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
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.
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.");
}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
| 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é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 == '3' |
Inégalité (!=) |
Renvoie true si les opérandes sont différents. |
var1 != 4 |
É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" |
Supériorité stricte (>) |
Renvoie true si l'opérande gauche est supérieur (strictement) à l'opérande droit. |
var2 > var1 |
Supériorité ou égalité (>=) |
Renvoie true si l'opérande gauche est supérieur ou égal à l'opérande droit. |
var2 >= var1 |
Infériorité stricte (<) |
Renvoie true si l'opérande gauche est inférieur (strictement) à l'opérande droit. |
var1 < var2 |
Infériorité ou égalité (<=) |
Renvoie true si l'opérande gauche est inférieur ou égal à l'opérande droit. |
var1 <= var2 |
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é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é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. |
|
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. |
|
NON logique (!) |
!expr |
Renvoie false si son unique opérande peut être converti en true, sinon il renvoie true. |
|
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 |
|---|---|
| Cliquer (appuyer puis relâcher) sur l'élément |
| Double-cliquer sur l'élément |
| Faire entrer le curseur sur l'élément |
| Faire sortir le curseur de l'élément |
| Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément |
| Relâcher le bouton gauche de la souris sur l'élément |
| Faire déplacer le curseur sur l'élément |
| Appuyer (sans relâcher) sur une touche de clavier sur l'élément |
| Relâcher une touche de clavier sur l'élément |
| Frapper (appuyer puis relâcher) une touche de clavier sur l'élément |
| « Cibler » l'élément |
| Annuler le « ciblage » de l'élément |
| Changer la valeur d'un élément spécifique aux formulaires ( |
| Taper un caractère dans un champ de texte (son support n'est pas complet sur tous les navigateurs) |
| Sélectionner le contenu d'un champ de texte ( |
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
| 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 |
| 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 |
| 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 |
| Méthode | Description |
|---|---|
document.getElementById(id ).onclick =
function(){code } |
Ajouter un code de gestionnaire d'événement à un événement onclick |