Débugue tes humanités Saison 3a

Séance 03 - Introduction à Javascript

Pour développer des interactions sur le Web.

Chaire de recherche du Canada sur les écritures numériques, Bibliothèque des lettres et des sciences humaines, Ouvroir d'histoire de l'art et de muséologie numérique. — roch.delannay@umontreal.ca ; giulia.ferretti@umontreal.ca ; louis-olivier.brassard@umontreal.ca

Plan du cours #

JavaScript – Historique
Que peut-on faire avec Javascript ?
Lier un script JS à une page HTML
Introduction à la syntaxe et à la sémantique JS
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

JavaScript – Un langage en constante évolution #

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();

Fonctions #

Les arguments #

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

direBonjour('Alice');

Atelier JavaScript #

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

Atelier JavaScript #

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);
}

While : Parmi les trois options proposées, laquelle permet d’obtenir le même résultat ? #

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 :

Amusez vous à le personnaliser !