Support de présentation (ouvrir en grand) :

Utilisez les flèches ← et → pour naviguer entre les diapositives.

Sommaire

Plan du cours #

1. JavaScript – Historique
2. Que peut-on faire avec Javascript ?
3. Lier un script JS à une page HTML
4. Introduction à la syntaxe et à la sémantique JS
5. Atelier JavaScript – construire un petit jeu

JavaScript – Un langage en constante évolution #

• 1993 : Mosaic
• 1994 : Netscape (première browser war – 1995-2001)
• 1995 : nécessité d’un langage de script côté client pour le Web – Java vs. Scheme
• Brendan Eich
• 1996 : JScript par Microsoft

• 1997 : Netscape vers la standardization avec ECMA International (European Computer Manufacturers Association)
• 1998 : JScript est le standard de facto
• 2022 : report Octoverse réalisé par GitHub – « JavaScript continues to reign supreme »
• Frameworks : ex. Angular, React, Vue, Svelte – des boîtes à outils pour le développement Web avec des décisions déjà faites et réfléchies
• ECMAScript Editions

Que peut-on faire avec JS ? #

Manipulation des pages Web, Interactions avec l’utilisateur et le serveur Web.

Lier une page HTML à un script JS #

• <script src="/path/to/script.js">
• <script src="https://link.js">
• style embedded dans l’HTML avec le tag <script> Plusieurs scripts peuvent être liés à un seul document HTML

Premiers exemples #

• alert('hello');
• console.log('hello');
• document.body.innerHTML = 'hello';

Types de données #

• Variables : var message = 'Hello' ou let ou const

  • var :
  • let : permet de déclarer des variables qui sont inhérentes à la portée d’un bloc d’instructions.
  • const : permet d’initialiser une valeur que nous ne devrions plus changer.

  Var VS. Let : #

  function exampleVar() {
    var x = 10;
    if (true) {
      var x = 20;
      console.log(x); 
    }
    console.log(x); 
  } 
  
  exampleVar();
  
  function exampleLet() {
    let x = 10;
    if (true) {
      let x = 20;
      console.log(x);
    }
    console.log(x); 
  }
  
  exampleLet();
  
  

• Chaînes de caractères (strings)

• Nombres, avec ou sans décimales

• Opérateurs arithmétiques : + - * /

• Booléennes : true ou false

      function boolean1() {
          return true;
        }
       
  
      boolean1()
  

      function boolean2(a, b) {
        return a < b;
        
      }
  
      boolean2(10, 15)
  

• Liste de valeurs (arrays), par exemple : let todos = ['objet a', 'objet b', 'objet c'];

• Objets : listes de clés associées à des valeurs.

  var monObjet = {
    "klé": "valeur",
    "nom": "objet",
    "type" : "typeDeDonnees"
  }
  
  var nomObjet = monObjet.nom;
  

• null

• undefined

  let x = null;
  let y;
  
  console.log(x);
  console.log(y);
  

Méthodes #

Une fonction se référant directement à un objet.

Par exemple .push() et .pop() :

var maListe = [1, 2, 3];
var nouvelleListe = maListe.push(4);

var autreListe = [6, 7, 8];
var autreNouvelleListe = autreListe.pop();

Fonctions #

JavaScript est un langage de programmation fonctionnel.

• Définir une fonction
• Exécuter une fonction
• Une fonction peut avoir des paramètres
• Les paramètre peuvent correspondre à des valeurs (arguments)

Par exemple :

function direBonjour() {
  alert('Bonjour!');
}
direBonjour();

Les arguments #

function direBonjour(nom) {
  alert('Bonjour ' + nom + '!');
}

direBonjour('Alice');

Atelier JavaScript #

Activité réalisée par Louis-Olivier Brassard

Boucles #

Une séquence d’instructions ou de codes répétée jusqu’à l’obtention d’un résultat final.

• Exemple : for

  console.log(`Comptons jusqu’à 3… ou 2?`);
  
  for (let i = 0; i < 3; i++) {
  console.log(i);
  }
  

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

let z = 0;
while (z < 3); {
  console.log(i);
  z++;
};

let y = 0;
while (y < 3) {
  console.log(i)
};

Un jeu devinette en JavaScript #

Ici vous pouvez télécharger le code que nous avons vu ensemble :

• HTML
• CSS
• JS

Amusez vous à le personnaliser !