Multimédia – Javascript: Introduction

Javascript: Introduction

JavaScript (« JS » en abrégé) est un langage de programmation dynamique complet qui, appliqué à un document HTML, peut fournir une interactivité dynamique sur les sites Web.

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !

Intégration avec l'HTML

Dans votre fichier index.html, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante </body> :

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

COPY

Cet élément a le même rôle que l'élément <link> pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).

Vous pouvez maintenant ouvrir main.js avec votre éditeur et écrire du JavaScript

Variables

Les variables sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé let en le faisant suivre de son nom :

let monVariable;

COPY

Une fois une variable déclarée, vous pouvez lui donner une valeur:

monVariable = "Hello";

COPY

Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin :

let monVariable = "Hello";
monVariable = "Goodbye"

COPY

Notez que les variables peuvent contenir des types différents de données:

// Chaine de caracters ("Hello")
let monVariable = "Hello";

// Nombre (10)
let monVariable = 10;

// Booléen (vrai/faux)
let monVariable = true;

// Tableau/Array
let monVariable = [1, 5, 7, 9, 11];

// Objet
let monVariable = document.querySelector("h1");

COPY

Operateurs

Un opérateur est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.

// Addition
6 + 9;

// Soustraction, multiplication, division
6 - 9 * 3 / 2;

// Assignation
monVariable = "Hello";

// Égalité
let monVariable = 3;
monVariable == 4 // false

// Négation
monVariable !== 4 // true

COPY

Fonctions

Les fonctions sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple:

let myVariable = document.querySelector('h1');
alert('Bonjour !');

COPY

Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — () —, c'est probablement une fonction. Les fonctions prennent souvent des arguments — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.

La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :

function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
}

COPY

Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

COPY