1.1 - Introduction à JavaScript


Web: Client 2

Introduction à JavaScript

Plan

  • Introduction à JavaScript
  • Démonstration
  • Exercices

Introduction à JavaScript

Introduction à JavaScript

Langage de programmation polyvalent

  • Interprété
  • Dynamique
  • Faiblement typé
function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
} 

let text = 'The temperature is ' + toCelsius(77) + ' Celsius';
console.log(text);

ECMAScript vs JavaScript

  • ECMAScript est la spécification qui définie la structure standard d'un langage de script.
  • Donc, ES5 ou ES6 font référence à une version moderne de JavaScript.

Syntaxe

Syntaxe

  • Variables faiblement typées
    (on ne donne pas explicitement un type comme en C++)
    • Le type est déduit à l'exécution:
      7, 2.5, 'allo', true, ['a', 'b', 'c'], [7, 'allo', true]
'5' + 2 + 3; // = 523 → '5' + '2' + '3'
2 + 3 + '5'; // = 55 → (2 + 3) + '5' → 5 + '5' → '5' + '5'
5 + Number('5'); // = 10 →  on peut convertir les variables: Number(), String(), Boolean()

let name = 'James';
name = 7; // pas de problème, name peut contenir n’importe quel type

let message = `Valeur: ${name}`; // 'Bonjour 7' => avec les backtick, ${interpolation}
  • On peut vérifier le type des variables qu'on manipule
typeof(name), isNaN(name), Array.isArray(name), Number.isInteger(name)

const, let, var

  • const déclare une constante accessible dans le bloc courant( { ... } )
  • let déclare une variable accessible dans le bloc courant
  • var déclare une variable accessible dans la fonction courante

function doSomething(value) {
    if (value) {
       let message = 'There is a value';
        console.log(message); // ok
    }

  console.log(message); // ERREUR
}

function doSomething(value) {
    if (value) {
       var message = 'There is a value';
    }

    console.log(message); // ok
}
  • On favorise const et let, on délaisse var

Sortie à la console

La console permet un affichage textuel simple et rapide

console.log('allo');

console.table(['a', 'b', 'c']);

// Avec une variable
let name = 'James';

console.log(name);

// ou une interpolation
console.log(`Bonjour ${name}`);

Démo!

Démo!

Télécharger l'outil RunJS VERSION 1.15

  • Attention Dans la version d'essai récente, RunJS n'autorise pas l'ouverture/sauvegarde de fichiers. Il faut copier/coller manuellement dans un fichier pour conserver les changements. Ne PAS faire les mise à jour de RunJS.

Modifier les paramètres, Menu > Files > Preferences

  • General: Line Wrap et Line Numbers
  • Advanced: Uniquement Loop Protection


👉 Démarche

// Un programme JavaScript n'a pas de fonction main
// Il est exécuté de haut en bas

// -----------------------------------------------
// Sortie a la console
//
console.log('Bonjour!');

// -----------------------------------------------
// Variables
//

let uneVariable = 42;
console.log(uneVariable);

uneVariable += 10;
// uneVariable = uneVariable + 10
console.log(uneVariable);

const uneConstante = 'Je ne change pas!';
console.log(uneConstante);

// uneConstante = 'Ah oui?';
// Erreur, impossible d'assigner une valeur a une const

// -----------------------------------------------
// Types
//

console.log(`2 => ${typeof(2)}`);               // 'number'

console.log(`2.2 => ${typeof(2.2)}`);           // 'number'

console.log(`true => ${typeof(true)}`);         // 'boolean'

console.log(`'true' => ${typeof('true')}`);     // 'string'

console.log(`'2' => ${typeof('2')}`);           // 'string'

console.log(`'allo' => ${typeof('allo')}`);     // 'string'

// Nombre
console.log(`4 NaN? => ${isNaN(4)}`);                     // false

console.log(`4.4 NaN? => ${isNaN(4.4)}`);                 // false

console.log(`'4' NaN? => ${isNaN('4')}`);                 // false

console.log(`'bonjour' NaN? => ${isNaN('bonjour')}`);     // true

// Entier
console.log(`6 int? => ${Number.isInteger(6)}`);         // true

console.log(`'6' int? => ${Number.isInteger('6')}`);     // false

console.log(`6.6 int? => ${Number.isInteger(6.6)}`);     // false

// Tableau
console.log(`[1, 2, 3] => ${typeof([1, 2, 3])}`);                   // object

console.log(`[1, 2, 3] array? => ${Array.isArray([1, 2, 3])}`);     // true

// Conversion pour calculs

console.log(Number(42));    // 42

console.log(Number('8'));    // 8

console.log(Number(true));   // 1

console.log(Number('ahoy')); // NaN

// -----------------------------------------------
// Fonctions
//

// Declarer la fonction
function uneFonction() {
  console.log('Bonjour fonction!');
}

// Appeler la fonction
uneFonction();

// Recevoir des parametres
function uneFonctionAvecParams(message = 'par defaut') {
  console.log(`message = ${message}`);

  if (typeof(message) == 'string') {
    // Interpolation avec les backtick ``
    // on injecte les variables dans la string avec ${maVariable}
    const affichage = `Bonjour: ${message}`;
    console.log(affichage);
  } else {
    console.log('Le message n\'est PAS une string!');
  }
}

// Envoyer des parametres
uneFonctionAvecParams('Un param');

uneFonctionAvecParams(42);

// Il y a une valeur par defaut au param dans la fonction
uneFonctionAvecParams();

// -----------------------------------------------
// Tableaux
//

let unTableau = []; // Tableau vide
// On peut mettre des valeurs a l'initialisation
// = [0, 1, 1, 2, 3, 5 ] 

unTableau.push(1);
unTableau.push('a');
unTableau.push('3');
unTableau.push(true);
unTableau.push(5);

console.log(unTableau);

// Affichage tableau
console.table(unTableau);

// Recuperer une valeur
let premierItem = unTableau[0];
console.log(premierItem);

// Modifier une valeur
unTableau[0] = 2;

console.table(unTableau);

//
// Parcourir un tableau
//

unTableau = [1, 2.5, 'a', true, '7', '4.5'] // = 'patate';

if (Array.isArray(unTableau)) {
  for(let i = 0; i < unTableau.length; i ++) {
    let valeur = unTableau[i];

    console.log(`index ${i} = ${valeur}`);

    if (isNaN(valeur) == false && typeof(valeur) != 'boolean') {
      // Un boolean est equivalent aux nombre 0 ou 1 pour vrai ou faux

      const nombre = Number(valeur);
      let typeNombre = 'FLOAT';

      if (Number.isInteger(nombre)) {
        // isInteger doit être utilisé sur un Number, sinon retournera toujours faux
        typeNombre = 'INT';
      }

      console.log(`  Nombre ${typeNombre}`);
      console.log(`  ${nombre + 100}`);
      // On peut évaluer une EXPRESSION dans l'interpolation
    }
  }
} else {
  console.log('PAS un tableau');
}

Exercices

👉 Énoncé