Cours 1

Présentations

Annonce

Attribution des casiers à remplir avant le 23 août 11h am

Plan de cours

PS1

Révision Web2

Web2 582-211MO

HTML : Formulaire, Image, Picture

CSS : Margin, Padding, Display, Position, Media Queries, Sélecteurs, Aspect-ratio, Flexbox 1, Flexbox 2, Flexbox 3

Révision JavaScript

Pourquoi JavaScript ?

La base de la base

Commentaires

// Ceci est un commentaire sur une seule ligne

/*
Ceci est un commentaire
sur plusieurs lignes
*/

Message

console.log("Wubba Lubba Dub Dub!");

Message d’alerte

alert("Wubba Lubba Dub Dub!");

Variables

Types de variables

let name = 'JF';
const age = 99;
var isStudent = false;

Valeurs

let num = 10;       // Nombre entier (number)
let pi = 3.14;      // Nombre à virgule (number)
let str = 'Salut!'; // Chaine de caractères (string)
let isTrue = true;  // Booléen (boolean)
let empty = null;   // Nul (null)
let notDefined;     // Non défini (undefined)
let arr = [];       // Tableau (array)
let obj = {};       // Objet (object)
let fn = () => {}   // Fonction (function)

Opérateurs

let sum = 10 + 5;
let difference = 10 - 5;
let product = 10 * 5;
let quotient = 10 / 5;

L’opérateur modulo

L’opérateur modulo % en JavaScript renvoie le reste de la division entière de deux nombres.

let modulo = 10 % 3;

let isEqual = 5 == '5';
let isStrictEqual = 5 === '5';

let isNotEqual = 5 != '5';
let isStrictNotEqual = 5 !== '5';

let isGreater = 10 > 5;
let isLess = 10 < 5;
let isGreaterOrEqual = 10 >= 5;
let isLessOrEqual = 10 <= 5;

let andOperator = true && false;
let orOperator = true || false;
let notOperator = !true;

Conditions :material-directions-fork

let score = 85;
let grade = 'Échec';

if (score >= 90) {
  grade = 'A';
} else if (score >= 80) {
  grade = 'B';
}

console.log(score);

Opérateur ternaire

let grade = (score >= 90) ? 'A' : (score >= 80) ? 'B' : 'Échec';

Tableaux et objets :material-table

let fruits = ['Pomme', 'Banane', 'Cerise'];
console.log(fruits[1]);

let person = {
  name: 'JF',
  age: 99,
  isStudent: false
};
console.log(person.name);

Boucles :material-repeat

for

for (let i = 0; i < 5; i++) {
  console.log(i + ' 🦄');
}

for...in

let person = {name: 'JF', age: 99, city: 'Laval'};
for (let key in person) {
  console.log(key + ' : ' + person[key]);
}

for...of

let parts = ['👁️', '👃', '👄'];
for (let part of parts) {
  console.log(part);
}

forEach

let numbers = ['JF', 99, '🌱', true];
numbers.forEach(function(number) {
  console.log(number);
});

Fonctions :material-function

Fonction

function greet(name) {
  return 'Coucou ' + name + ' !';
}

« Variable fonction »

const greet = function(name) {
  return 'Coucou ' + name + ' !';
};

Fonction fléchée

const greet = (name) => {
  return 'Coucou ' + name + ' !';
};

Manipulation du DOM

let element = document.getElementById('demo');
let element2 = document.querySelector('.demo');
let elements = document.querySelectorAll('p');
let elements2 = document.getElementsByClassName("demo");

Classes

element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');

element.innerHTML = 'JavaScript 🙌';
element.style.color = '#ABCDEF';
element.setAttribute('title', 'Petit tooltip pour ton info');
let titleAttribute = element.getAttribute('title');
element.removeAttribute('title');

Les événements :material-cursor-default-click

<button id="miaw">Oui?</button>

document.getElementById('miaw').addEventListener('click', function() {
  console.log('J’ai dis non!');
});
document.getElementById('miaw').addEventListener('mouseover', function() {
  console.log('Vous avez survolé le bouton!');
});

<input type="text" id="champ" placeholder="Tapez quelque chose">

document.getElementById('champ').addEventListener('focus', function() {
  console.log('Champ de saisie en focus');
});
document.getElementById('champ').addEventListener('blur', function() {
  console.log('Champ de saisie hors focus');
});
document.getElementById('champ').addEventListener('keyup', function(event) {
  console.log('Vous avez tapé : ' + event.target.value);
});
document.getElementById('champ').addEventListener('change', function(event) {
  console.log('La valeur a changé : ' + event.target.value);
});

Liste d’événements du DOM

this 🤯

this fait référence au contexte dans lequel la fonction est exécutée

<button id="submit">Télécharger</button>

document.getElementById('submit').addEventListener('click', function() {
  // Ici, "this" représente le bouton cliqué
  this.style.backgroundColor = 'lightblue';
  this.innerHTML = 'En cours';
});

Sauvegarde :material-content-save

LocalStorage

localStorage.setItem("lastname", "Tremblay");
localStorage.getItem("lastname");

Limite de stockage

La capacité maximale de stockage est d'environ 5 MB par domaine.

SessionStorage

// Pour l'onglet
sessionStorage.setItem("lastname", "Gagnon");
sessionStorage.getItem("lastname");

Mathématiques

Math.sqrt(81);
Math.random();
Math.max(1, 3);
Math.min(1, 3);
Math.floor(1.5);
Math.round(1.5);
Math.ceil(1.5);

Audio & Vidéo

<audio id="mozart" controls muted>
  <source src="mozart.mp3" type="audio/mp3">
  Votre navigateur ne supporte pas l'élément audio.
</audio>

<video id="loop" width="320" height="240" controls muted>
  <source src="loop.mp4" type="video/mp4">
  Votre navigateur ne supporte pas l'élément vidéo.
</video>

let audio = document.getElementById('mozart');
audio.play();
audio.pause();
audio.playbackRate = 1.5; // 1.5x la vitesse normale
audio.currentTime = 10; // Saute à 10 secondes

let video = document.getElementById('loop');
video.play();
video.pause();
video.playbackRate = 0.5;
video.currentTime = 0;

Lecture automatique

De nombreux navigateurs imposent des restrictions sur la lecture automatique (autoplay) des médias en raison de préoccupations concernant l’expérience utilisateur et la consommation de données. Par conséquent, l'utilisateur doit souvent interagir avec la page pour déclencher une lecture. Cependant, il est généralement possible de contourner cette restriction en coupant initialement le son du média à l'aide de l'attribut muted.

---

Introduction aux classes

Qu’est-ce qu’une classe ?

Une classe en JavaScript, c’est un peu comme une « recette » pour créer plusieurs objets similaires.

Imaginez que vous devez créer plusieurs personnages dans un jeu.

Au lieu de répéter le même code pour chaque personnage, vous pouvez utiliser une classe pour définir une « recette de personnage » et créer autant de personnages que vous voulez.

Pourquoi utiliser des classes ?

Sans les classes, chaque fois que vous voulez créer un nouvel objet avec les mêmes propriétés (ex: un personnage), vous devez tout réécrire pour chaque personnage: son nom, sa couleur de cheveux, sa grandeur, son poid, son QI, etc.

Avec une classe, vous écrivez le code une seule fois et pouvez ensuite l’utiliser pour créer plusieurs objets!

Comment ça fonctionne ?

class Person {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet()
    console.log(`Salut, je m'appelle ${this.name} et j'ai ${this.age} ans.`);
  }
}

const person1 = new Person('Jeanne', 25);
person1.greet();
// Affiche "Salut, je m'appelle Jeanne et j'ai 25 ans."

const person2 = new Person('Félix', 641);
person2.greet();
// Affiche "Salut, je m'appelle Félix et j'ai 641 ans."

Quelques observations importantes dans l'exemple ci-dessus :

• Le nom d'une classe doit commencer par une majuscule. C'est une norme.
• Une fonction à l'intérieur d'une classe s'appelle une méthode.
• La fonction constructor est comme un modèle de départ qui assigne les variables de la classes.
• Les variables ne sont pas définies comme à l'habiture avec let, var ou const.

Exercice - JavaScript
La guerre de 100 ans

Lignes de commandes

La ligne de commande est un outil qui permet d’interagir avec un ordinateur en tapant des commandes textuelles.

On écris des lignes de commandes dans un CLI, aussi appelé « Terminal ».

Contrairement à une interface graphique (GUI) où vous cliquez sur des boutons, ici, vous tapez directement ce que vous voulez faire.

Les lignes de commande sont très utile en développement web et pour configurer les serveurs, entre autres.

Bon à savoir

• En ligne de commande, lorsqu'on voit . ou ./, cela signifie le répertoire courant.
• Lorsqu'on voit .. ou ../, ça signifie le répertoire parent.
• On peut utiliser la touche Tab pour compléter une ligne de commande.

Où se trouve le terminal ?

• En Windows, utilisez l'application PowerShell¹ plutôt que command prompt.
• En macOS, utilisez l'application Terminal².
• En Linux, utilisez l'application Terminal³.

Position

Affichager l'emplacement avec « pwd »

WindowsLigne de commande

pwd

# Résultat : C:\Windows

Navigation

Liste

Lister des fichiers et dossiers avec « ls »

WindowsLigne de commande

ls

Déplacement

Changer de répertoire avec « cd »

WindowsLigne de commande

cd nom_du_dossier

cd ./nom_du_dossier # identique à la commande précédente

cd .. # Se déplace au répertoire parent

Fichiers

Création

Créer un fichier avec « touch »

WindowsLigne de commande

touch nom_du_fichier.txt

Lecture

Lire le contenu d'un fichier avec « cat »

WindowsLigne de commande

cat nom_du_fichier.txt

Écriture

Écrire dans un fichier avec « echo »

echo "Texte à ajouter" >> nom_du_fichier.txt
echo "Texte en deuxième ligne" >> nom_du_fichier.txt
echo "Texte en troisième ligne!" >> nom_du_fichier.txt

echo "Finalement, remplace tout par ceci" > nom_du_fichier.txt

Déplacement

Déplacer, ou renommer!!, un fichier avec « mv »

mv nom_du_fichier.txt nouveau_nom.txt

mv nom_du_fichier.txt assets/nom_du_fichier.txt

Suppression

Supprimer un fichier ou un répertoire avec « rm »

WindowsLigne de commande

rm nom_du_fichier.txt

Dossiers

Création

Créer un fichier avec « mkdir »

WindowsLigne de commande

mkdir nom_du_dossier

Supprimer un dossier

Supprimer un dossier avec « rm -r ». L’option -r signifie récursif (recursive en anglais), ce qui permet de supprimer tout les contenus d'un dossier.

WindowsLigne de commande

rm -r nom_du_dossier

Exercice - CLI
Mandala

---

1. https://learn.microsoft.com/fr-ca/training/modules/introduction-to-powershell/ ↩

2. https://support.apple.com/fr-ca/guide/terminal/welcome/mac ↩

3. https://ubuntu.com/tutorials/command-line-for-beginners (en anglais) ↩