Cours

Objectifs

Comment scripter les pages web ?

Présentation

JavaScript

Programmation Web et bases de données

Historique du Web

JavaScript

• Java + Script

  • Proche de Java uniquement au niveau syntaxique ! (pas de typage, ni de compilation, ni de JVM).

  • Popularité de Java à l'époque de la création de JavaScript (1995) → marketing

• Typage dynamique et faible (comme Python).

• Paradigmes :

  • Script : interprété, pas de compilation

  • Impératif : instructions séquentielles

  • Fonctionnel : fonctions en tant que valeurs

  • Orienté objet : objets, méthodes, héritage

  • Événementiel : réagir à des événements (clic, clavier, …)

• Versions : ES5 (2009), ES6 (2015), ES7 (2016), … (ECMAScript)

Commentaire

JavaScript

// Commentaire sur une ligne

/* Commentaire
sur plusieurs
lignes */

Python

# Commentaire sur une ligne

"""
Commentaire
sur plusieurs
lignes
"""

Variable

JavaScript

let x = 5;
const Y = 10; // Pas réassignable

x = 7;
Y = 15; // Erreur

Python

x = 5
Y = 10

x = 7
Y = 15 # Pas d'erreur, mais convention de nommage pour les constantes

Type de données

Similaires à Python.

const nombre_entier = 5;
const nombre_flottant = 3.14;
const chaine_de_caractere = "Hello"; // string
const booleen = true; // Boolean
const tableau = [1, 2, 3, "bleu", false]; // array
const obj = { name: "Alice", age: 25 }; // object

// Une variable peut aussi être non définie ou nulle
const a = undefined; // jamais déclarée
const b = null;

Stdout (sortie standard)

JavaScript

console.log("Hello, world!");

Python

print("Hello, world!")

Bloc de code

JavaScript

if (x > 0) {
  console.log("x est positif");
} else {
  console.log("x est négatif ou nul");
}

Python

if x > 0:
    print("x est positif")
else:
    print("x est négatif ou nul")

Boucle for

JavaScript

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

Python

for i in range(5):
    print(i)

Fonction

JavaScript

function dire_bonjour(nom) {
  console.log("Bonjour, " + nom + " !");
}
// Alternative avec une fonction fléchée (arrow function)
const dire_bonjour = (nom) => {
  console.log("Bonjour, " + nom + " !");
};

dire_bonjour("Alice");

Python

def dire_bonjour(nom):
    print("Bonjour, " + nom + " !")

dire_bonjour("Alice")

Type de données

const personne = {
  nom: "Alice",
  age: 25,
  dire_bonjour: function () {
    console.log("Bonjour, " + this.nom + " !");
  },
  dire_age: () => {
    console.log("J'ai " + this.age + " ans.");
  },
};

personne.dire_bonjour(); // Bonjour, Alice !
personne.dire_age(); // J'ai undefined ans.
// this n'existe pas dans les fonctions fléchées

Sucre syntaxique (Syntactic sugar)

Une syntaxe simplifiée pour une tâche existante.

Par exemple, la boucle for

colors = ["bleu", "vert", "rouge"]
for color in colors:
    print(color)

est un sucre syntaxique pour la boucle while :

colors = ["bleu", "vert", "rouge"]
i = 0
while i < len(colors):
    print(colors[i])
    i = i + 1

Dans cet exemple, application du design pattern Iterator.

Quelques sucres syntaxiques en Python

# Assignment operators
x += 3 # équivalent à x = x + 3

# List comprehension
squares = [x**2 for x in range(10)]

# Context manager
with open("file.txt") as f:
    data = f.read()
    # Ferme automatiquement le fichier à la fin du bloc

# F-string
name = "Alice"
greeting = f"Hello, {name}!"

Boucle for

const colors = ["bleu", "vert", "rouge"];
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

est un sucre syntaxique pour

const colors = ["bleu", "vert", "rouge"];
let i = 0;
while (i < colors.length) {
  console.log(colors[i]);
  i++;
}

Boucle for avec itérateur

const colors = ["bleu", "vert", "rouge"];
for (const color of colors) {
  console.log(color);
}

est un sucre syntaxique pour

const colors = ["bleu", "vert", "rouge"];
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

Opérateur ternaire

const age = prompt("Quel âge avez-vous ? ");
const message = age >= 18 ? "Majeur" : "Mineur";
console.log(message);

est un sucre syntaxique pour

const age = prompt("Quel âge avez-vous ? ");
let message;
if (age >= 18) {
  message = "Majeur";
} else {
  message = "Mineur";
}
console.log(message);

Affectation par décomposition (destructuring assignment)

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 25

est un sucre syntaxique pour

const person = { name: "Alice", age: 25 };
const name = person.name;
const age = person.age;
console.log(name); // Alice
console.log(age); // 25

Syntaxe de décomposition (spread operator)

const articulations = ["épaules", "genoux"];
const corps = ["têtes", ...articulations, "bras", "pieds"];
// ["têtes", "épaules", "genoux", "bras", "pieds"]

const profil = { prenom: "Sarah", profilComplet: false };
const profilMisAJour = { nom: "Dupont", profilComplet: true };

const clone = { ...profil };
// { prenom: 'Sarah', profilComplet: false }

const fusion = { ...profil, ...profilMisAJour };
// { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };

Construction du DOM

https://web.dev/articles/critical-rendering-path/constructing-the-object-model

Règles CSS sur le DOM

https://web.dev/articles/critical-rendering-path/constructing-the-object-model

DOM (Document Object Model)

<!doctype html>
<html>
  <head>
    <title>Page Web</title>
  </head>
  <body>
    <h1 class="titre">Titre</h1>
    <p>Contenu</p>
    <button id="bouton">Cliquez ici</button>
    <script src="script.js"></script>
  </body>
</html>

DOM (Document Object Model)

const titre = document.getElementsByClassName("titre")[0];
titre.innerHTML = "Nouveau titre";

const paragraphes = document.getElementsByTagName("p");
for (const p of paragraphes) {
  p.style.color = "red";
}

const bouton = document.getElementById("bouton");
bouton.addEventListener("click", () => {
  alert("Clic !");
  titre.style.color = "blue";
});

TypeScript

https://jaydevs.com/javascript-vs-typescript/

TypeScript

• Sur-ensemble de JavaScript : tout code JavaScript est aussi du TypeScript (syntaxiquement sans typage).

• Paradigmes : comme JavaScript

• Typage statique (déclaration des types), ≠ typage dynamique de JavaScript ou Python.

• Typage fort (pas de conversion automatique) comme Python, ≠ typage faible de JavaScript (4 + "2" = "42").

• Transpilation (compilation vers un autre langage) en JavaScript.

• Développé par Microsoft (2012), mais libre et open-source.

Typage

Pourquoi typer ?

• Lisibilité : intention explicite du développeur.

• Détection d'erreurs à la compilation (avant l'exécution).

• Documentation : types des paramètres et valeur de retour.

• IDE : complétion automatique, renommage, refactoring.

Typage

• Types primitifs : number, string, boolean, null, undefined

• Types complexes : object, array, tuple, enum, any, void, never

• Types personnalisés : interface, type, class

const a: number = 5;
const b: string = "Hello";
const c: boolean = true;
const d: number[] = [1, 2, 3];
const e: { name: string; age: number } = { name: "Alice", age: 25 };

interface Person {
  name: string;
  age: number;
}

const f: Person = { name: "Alice", age: 25 };

F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Références

• https://fr.wikipedia.org/wiki/JavaScript
• https://fr.wikipedia.org/wiki/TypeScript
• https://fr.wikipedia.org/wiki/Typage_fort
• https://medium.com/@teamtechsis/syntactic-sugar-and-modern-javascript-b0293ff28311
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax