Multimédia – Les bases du Javascript

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 !

Le JavaScript permet de faire "petites fonctinalités", comme par exemple:

Spécifier des changements sur le document
Changer le contenu, la structure, le style
Intercepter des événements (souris, clavier, doigts…)

Mais on peut également faire:

Recolter de données d'un serveur (AJAX)
Dessiner (canvas - bitmap - ou svg - vectoriel)
Géolocaliser
Enregistrer localement du contenu (cache ou bdd)
Jouer des fichiers audio ou video
etc.

Syntax

Chaque instruction est séparée par un point-virgule (;)
Noms de variables et fonctions écrits en camelCase
Commentaires sur une ligne: //

Déclarations

Variables avec le mot clé “var” ou "let"
Une variable peut être mise à jour et redéclarée.

var message = "Bonjour tout le monde";

COPY

Constantes avec le mot clé “const”.
Un constant peut PAS être mis à jour et redéclaré.

const message = "Bonjour tout le monde";

COPY

Types primitifs

var chiffre = 42;
var texte = "Quelques mots...";
var vrai = true;
var faux = false;
var empty = null;

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.

function bonjour(nom, prenom) {
  var nomcomplet = prenom + " " + nom;
  console.log("Bonjour " + nomcomplet); 
}

bonjour("Doe", "John");

COPY

Les fonctions sont utiles car elles nous permettent de réutiliser le même code, tout en restant flexibles grâce à l'utilisation de différents paramètres.

DOM

Le Document Object Model (DOM) relie les pages web au JavaScript en représentant la structure d'un document.

On peut utiliser la fonction querySelector() ou querySelectorAll() pour accèder aux objets/elements.

// Voici quelques exemple d'acceder le document html
const body = document.body;
const element = document.querySelector('main');
const parBalise = document.querySelector('h1');
const parId = document.querySelector('#menu');
const parClass = document.querySelectorAll('.btn');

COPY

Événements

Les événements sont des actions ou des occurrences qui se produisent dans le navigateur - le système envoie un signal quelconque lorsqu'un événement se produit et fournit un mécanisme par lequel une action peut être automatiquement entreprise (c'est-à-dire un code) lorsque l'événement se produit.

L'événement le plus simple est un clic, mais nous pouvons également écouter les signaux de redimensionnement, de défilement ou de survol, par exemple.

window.addEventListener('click', bonjour);

COPY

Ici, si nous cliquons à un endroit quelconque de la fenêtre, la fonction que nous avons définie précédemment s'exécutera

Conditions

L'instruction if...else exécute une instruction si une condition spécifiée est véridique. Si la condition est fausse, une autre instruction dans la clause else facultative sera exécutée.

let vraifaux = false;

if (vraifaux) {
  vraifaux = false;
} else {
  vraifaux = true;
}

COPY