partie 7

JavaScript

Introduction

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation qui permet d'ajouter des fonctionnalités interactives à des sites web. Conçu à l'origine pour le navigateur, il est désormais présent à peu près partout.

Un peu d'histoire

Créé en 1995 par Brendan Eich, chez Netscape (un navigateur qui n'existe plus aujourd'hui).
Commencé comme Mocha, renommé en LiveScript, finalement appelé JavaScript, pour capitaliser sur la popularité de Java.
Malgré le nom, Java et JavaScript sont deux langages distincts et très différents.
Aujourd'hui l'un des langages de programmation les plus utilisés, au-delà des navigateurs web.

À savoir

C'est le navigateur qui exécute directement le code.
Il y a un écosystème riche et de nombreuses bibliothèques et frameworks, comme React, Vue.js ou Three.js.
WebGL pour le rendu graphique 3D.
WebGPU pour le calcul haute performance.
WebRTC pour la communication en temps réel.
WebAudio pour le traitement audio.
Fetch pour les requêtes HTTP.
WebSockets pour des connexions bidirectionnelles en temps réel.
IndexedDB pour le stockage local.

Exemples

Art génératif: Avec des bibliothèques comme p5.js.
AR/VR: Grâce à des API comme WebXR.
Musique & son: En utilisant l'API WebAudio (instruments virtuels, synthétiseurs, séquenceurs, effets audio, …)
Jeux multijoueurs en temps réel: Avec WebSockets ou WebRTC et Canvas2D ou WebGL.

Charger son script

<body>
  <!-- Contenu de la page -->
  <script src="script.js"></script>
</body>

Variables et types de données

let name = "Alice"; // string
const age = 25; // number
var isStudent = true; // boolean

Opérations de base

let sum = 10 + 5; // 15
let isAdult = age > 18; // = true

if … else

if (keyCode === "SPACE") {
  console.log("space key hit");
} else if (keyCode === "ENTER") {
	console.log("enter key hit");
} else {
  console.log("any other key hit");
}

Fonctions

function greet (name) {
  console.log("Bonjour " + name);
}
greet("Alice"); // renvoie "Bonjour Alice"

Tableaux et objets

let fruits = ["pomme", "banane"];

fruits[0]; // "pomme"
fruits[1]; // "banane"

let person = { name: "Alice", age: 25 };

Boucles

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

fruits.forEach(function (element) {
	console.log(element);
});
// "pomme"
// "banane"

Interagir avec le DOM

→ DOM = Document Object Model (votre page HTML, en gros)

const title = document.querySelector("h1");
title.textContent = "Nouveau titre";

const container = document.querySelector(".container");
container.classList.add("active");

const projects = document.querySelectorAll(".is-project");
for (let i = 0; i < projects.length; i++) {
	console.log(projects[i]);
}

Événements

const button = document.querySelector(".btn");
button.addEventListener("click", function() {
  console.log("Bouton cliqué");
});

Fonctions anonymes et fonctions fléchées

fruits.forEach((fruit) => {
  console.log(fruit);
});

// vs.

function logFruit (fruit) {
	console.log(fruit);
}
fruits.forEach(logFruit);

Cas pratiques

Filtrer des éléments

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="filter-all">all</button>
  <button class="filter-typo">typography</button>
  <button class="filter-illu">illustration</button>

  <ul>
    <li class="is-project is-typography">project 1</li>
    <li class="is-project is-illustration">project 2</li>
    <li class="is-project is-illustration">project 3</li>
    <li class="is-project is-typography">project 4</li>
    <li class="is-project is-typography">project 5</li>
    <li class="is-project is-illustration">project 6</li>
  </ul>

  <script src="main.js"></script>
</body>
</html>

const allFilterBtn = document.querySelector(".filter-all");
allFilterBtn.addEventListener("click", function() {
  filterProjects("is-project");
});


const typoFilterBtn = document.querySelector(".filter-typo");
typoFilterBtn.addEventListener("click", function() {
  filterProjects("is-typography");
});

const illuFilterBtn = document.querySelector(".filter-illu");
illuFilterBtn.addEventListener("click", function() {
  filterProjects("is-illustration");
});

const projects = document.querySelectorAll(".is-project");

function filterProjects (filter) {
  console.log(filter);

  for (let i = 0; i < projects.length; i++) {
    if (projects[i].classList.contains(filter) === false) {
      projects[i].classList.add("hidden");
    } else {
      projects[i].classList.remove("hidden");
    }
  }
}

.hidden {
  display: none;
}

Type tester

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Type tester</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <label for="fontSizeControl">Taille de police : </label>
  <input type="range" id="fontSizeControl" min="6" max="92" value="16">

  <textarea id="textArea" style="font-size: 16px;">hello</textarea>

  <script src="type-tester.js"></script>
</body>
</html>

document.addEventListener('DOMContentLoaded', function() {
  const fontSizeControl = document.getElementById('fontSizeControl');
  const textArea = document.getElementById('textArea');

  fontSizeControl.addEventListener('input', function() {
      textArea.style.fontSize = fontSizeControl.value + 'px';
  });
});

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

textarea {
  width: 100%;
  height: 200px;
  margin-top: 10px;
}

← HTML et CSS avancé déploiement →