Cours 1 | Bienvenue¶

Introduction¶

🤝 Présentations
📙 Plan de cours
📱 Téléphones
🤖 Intelligence artificielle

Révision - Web 2 (582 211 MO)¶

HTML

Formulaire : 1, 2, 3
Images : img et picture
Favicon
SVG

CSS

Révision - Programmation interactive (420 V11 MO)¶

https://discovro-js.netlify.app/

Révision - JavaScript¶

Statistic: Most used programming languages among developers worldwide as of 2024 | Statista

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 ¶

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 ¶

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

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

Boucles ¶

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 ¶

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 ¶

<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

Sauvegarde ¶

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

Les 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.

L'utilisateur doit interagir avec la page pour déclencher une lecture.

Aide-mémoire¶

https://jfcmontmorency.github.io/aide-memoire/

Exercice de révision¶

Exercice - JavaScript
Camp d'entrainement

Exercice - JavaScript
La guerre de 100 ans

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

Librairies et cadriciels¶

L'objectif de Web 3 est d'apprendre à utiliser des librairies et des cadriciels dans divers projets.

Ces deux concepts désignent tout simplement du code qui permettent de programmer plus rapidement⚡️ ! Toutefois, une distinction importante est à faire entre les deux.

Librairie (library)¶

Un ensemble de fonctions / méthodes prêtes à l’emploi que tu peux utiliser pour réaliser une tâche précise.

Une librairie est comme un outil dans une boîte : tu le prends quand t'en as besoin.

Anime.js : animations
Chart.js : graphiques
Leaflet.js : cartes
Zdog : illustrations
Tone.js : synthèse sonore

Cadriciel (framework)¶

Une structure complète qui dicte la façon dont tu organises et construis ton projet Web.

Un framework est comme un échafaudage : tu construis ton site à l’intérieur de sa structure.

Bootstrap : structure et composantes
Tailwind : utilitaires CSS