Introduction au JavaScript

Usage du JavaScript aujourd’hui : jQuery, Angular, Vue.js, React, NodeJS, NPM.

Rien à voir avec java…

Langage interprété par les navigateurs (càd lu et exécuté à chaque fois), très utilisé avec les technologies HTML/CSS.

Langage “full stack” avec l’apparition de NodeJS (JavaScript côté serveur) —> révolution à l’époque.

De nombreuses librairies et frameworks existent pour faire évoluer et améliorer JavaScript.

BP : faire attention aux dépendances dans les librairies que l’on utilise. Dans la vraie vie, on se laisse souvent dépasser !

TypeScript = sur-ensemble syntaxique stricte du JavaScript, libre et open source, qui permet d’avoir un typage des variables et une syntaxe moins “barbare”.

Le code est transpilé ou trans-compilé : il est d’abord compilé en JavaScript avant d’être interprété par l’ordinateur.

Let’s get started

Mise en place

1. Choisir son IDE

2. Télécharger NodeJS

Bases du langage

JavaScript respecte les paradigmes de la programmation orientée-objet, de la programmation impérative (exécution des lignes de code les unes après les autres), de la programmation fonctionnelle (appel de fonctions).

Typage dynamique des variables : il n’est pas nécessaire de donner un type à la variable que l’on déclare (var maVariable), c’est l’interpréteur qui gère.

• types primitifs : boolean, null, undefined, number et string

• types objets : Date, Math, Array, Object, Function, NaN,…

Les objets donnent accès à des méthodes et des propriétés.

Déclarer une constante : const MA_CONSTANTE.

Portée d’une variable : let vs var.

BP : il est recommandé d’utiliser let qui permet de limiter les erreurs (on garde var pour quand on sait ce qu’on fait et qu’on a besoin d’une variable globale).

Commentaires : sur une ligne //, sur plusieurs lignes /* ... */.

Fonctions : déclaration avec function, un nom adéquat, zéro ou plusieurs paramètres, le corps de la fonction entre {} qui peut potentiellement retourner une valeur (return).

function sonpetitnom (param) { corps [return] };

Opérateurs de base : similaires à Java, avec en plus l’égalité stricte === || !== qui permet de comparer à la fois la valeur et le type des variables.

BP : La stratégie en JavaScript est de comparer avec cet opérateur stricte, ce qui permet d’éviter des petites erreurs pouvant se glisser dans le code.

//--- Quelques exemples de variables

var uneVariable; // variable globale non definie
console.log(uneVariable); //undefined

let unBooleen = true; // variable dont le type est dynamiquement defini (boolean)

let aujourdhui = Date();
console.log("La date d'aujourd'hui est " + aujourdhui);
//La date d'aujourd'hui est Thu Jan 19 2023 10:09:39 GMT+0100 (heure normale d’Europe centrale)

let unNombreAleatoire = Math.floor(Math.random()*10); 
// nombre aleatoire entre 0 et 10, arrondi a l'entier
console.log(unNombreAleatoire);

let unNombre = 5; 
let autreNombre = 7;
let somme = add(unNombre, autreNombre); // appel de la fonction add()
console.log(somme); //12

// declaration de la fonction add()
function add(a,b) {
    return a+b;
}

Structures de code

Très similaires à Java.

Les conditionnelles :

• if…else

• switch

Les boucles :

• while

• do…while

• for

• for…in et for…of —> utilisés pour les objets et les tables

La gestion d’erreurs : try…catch

//--- Quelques exemples de structures de code

// if et egalite stricte
let leNombre = 10;
let laString = '10';

if (leNombre === laString) {
    console.log("Les deux variables sont égales en valeur et en type.")
} else if (leNombre == laString) {
    console.log("Les deux variables sont égales en valeur mais pas en type.")
    //c'est cette solution qui sera affichee en console
} else {
    console.log("Les deux variables ne sont pas égales.")
}

// switch
let gateau = 'tarte au citron meringuée';
switch (gateau) {
    case 'tarte au citron meringuée':
        console.log('Mangeons une tarte au citron meringuée !');
        //c'est cette solution qui sera affichee en console
        break;
    case 'brownie':
        console.log('Mangeons un brownie !');
        break;
    default:
        console.log('Ce gateau n\'est pas au menu...');
}

// while
let i=0;
while (i<4) {
    i++;
    console.log(i);
}

// do...while
let alea = 0;
do {
    console.log(alea + " est différent de 2.");
    alea = Math.floor(Math.random()*10);; // relance
} while (alea !== 2);
console.log("Enfin ! " + alea + " est strictement égal à 2.");

// for
for (let i=0; i<6; i++) {
    console.log("tour " + (i+1) + "/6");
}

// try...catch
try {
    console.log(compteur);
} catch (error) {
    console.log("Une erreur est survenue !");
    console.error(error.message); //compteur is not defined
}

Principaux objets disponibles

Très similaires à Java.

Notation avec les crochets [] (ou new Array() qui est non-recommandé).

Taille non fixée.

Propriétés et méthodes disponibles : length, push(), pop(), slice(), sort(), toString()…

//--- Quelques exemples de tableaux

let tabVide = [];

let tabFleurs = ['marguerite', 'rose', 'tulipe'];
// non-recommande ~ let unTab = new Array(TAILLE_FIXE);

console.log(tabFleurs); //[ 'marguerite', 'rose', 'tulipe' ]
console.log("premier element : " + tabFleurs[0]); //premier element : marguerite
console.log("taille : " + tabFleurs.length); //taille : 3

//enlever le dernier
tabFleurs.pop();
console.log(tabFleurs); //[ 'marguerite', 'rose']

// ajouter un element
tabFleurs.push("jasmin");
console.log(tabFleurs); //[ 'marguerite', 'rose', 'jasmin' ]

// decouper : index a partir duquel je cree un nouveau tableau
let tabDecoupe=tabFleurs.slice(1);
console.log("tableau découpé : " + tabDecoupe); //tableau découpé : rose,jasmin

// episser : ajouter et/ou supprimer des elements
// trois param : index, nombre d'elements a supprimer, elements a ajouter
tabFleurs.splice(1,1, 'lavande', 'lilas', 'tournesol');
console.log(tabFleurs); //[ 'marguerite', 'lavande', 'lilas', 'tournesol', 'jasmin' ]

// tri tab par ordre alphabetique
// - possible de lui mettre d'autres methodes pour un tri perso
tabFleurs.sort();
console.log(tabFleurs); //[ 'jasmin', 'lavande', 'lilas', 'marguerite', 'tournesol' ]

// pour reinitialiser le tableau
tabFleurs = [];