R112 – CM #1

Présentation

Nom

R112 : Développement web S1

Sur AMeTICE

[23-24]-S1 - R112 Développement web

Enseignant

Aldo Gonzalez-Lorenzo

Séances

3 CM + 6 TP

Objectif

Initiation au développement web :

• bases de l'algorithmique
• langage JavaScript
• pages web avec interactions

Évaluation

Examen (60%) et exercices de TP (40%)

Règles

• Prendre des notes en cours
• Ne pas parler pendant mes explications
• Pas de smartphone ni réseaux sociaux
• Ponctualité
• Rendus individuels (triche durement pénalisée)

Règles (pour moi)

• Joignable par mail, forum du cours, mon bureau (C07)
• Répondre à vos questions

Algorithmique

Algorithmique branche de l'informatique qui étudie la conception et l'analyse des algorithmes.

Algorithme suite finie et non ambiguë d'instructions et d’opérations permettant de résoudre une classe de problèmes.

Exemples des problèmes : recherche dans une liste triée, trouver si un mot existe dans un texte, vérifier qu'un mot-de-passe est assez fort, …

Un algorithme peut manipuler des données comme :

• nombres
• textes
• images
• autres : graphes, structures de données...

Un algorithme contient :

• Des données en entrée bien définies (l'instance du problème)
• Des données intermédiaires : les variables
• Des instructions : opérations, structures conditionnelles, boucles
• Des données en sortie (la solution du problème)

Algorithme vs programme

Un programme est un algorithme écrit dans un langage informatique et exécuté sur une machine.

Un algorithme n'est qu'est une description théorique. Il est souvent écrit en pseudo-code.

Conseils pour concevoir un algorithme :

• Bien comprendre le problème
• Savoir le résoudre à la main : essayez avec différents exemples
• Découper le calcul en instructions élémentaires
• Identifier ce qui ne change pas (indépendamment des données du problème)
• Pratiquer beaucoup

En bref

• Un algorithme est le détail du calcul d'une solution
• Peu d'outils : variables, opérations, structures conditionnelles, …
• Comprendre les algorithmes est comprendre comment automatiser des tâches

L'algorithmique est un art (ou une science ?). Nous allons l'appliquer au développement web.

Développement web

Dans le développement web, la programmation sert à :

• Modifier une page web (changer la couleur, cacher une partie)
• Remplir une page web (avec les informations d'une base de données)
• Valider les données d'un utilisateur
• Implanter une application web (email, calendrier, réseau social, …)

On utilise des langages comme JavaScript, PHP ou Python.

JavaScript

• Créé en mai 1995 par Brendan Eich
• Vrai nom : ECMAScript
• Seul langage pour le développement front-end. Il est exécuté sur votre navigateur web
• Langage très riche. Il existe plusieurs façons de faire la même chose

JavaScript peut :

• Faire des calculs sur votre ordinateur
• Accéder aux données sur internet
• Modifier le code HTML de la page
• Réagir aux événements : click, scroll, hover, …

Mais il ne peut pas voir les fichiers sur votre ordinateur

En bref

Variables et opérations

Variables

Variable : donnée nécessaire au déroulement d'un algorithme. Elle sert à faire un calcul, afficher une donnée, sauvegarder temporairement une information.

let a = 5
let b = 10
console.log(a + b)

Nom et valeur

Une variable a un nom et une valeur

Pour utiliser une nouvelle variable, il faut la déclarer.

Ensuite, on lui donne une valeur via une affectation : la variable à gauche prend la valeur de ce qui est à droite

let nb1 // déclaration avec « let »
nb1 = 40 // affectation avec « = »
let nb2 = 10
let somme = nb1 + nb2
console.log(somme)

Le nom d'une variable doit commencer par une lettre, le symbole dollar ($) ou un tiret bas (_). Il ne peut pas être un mot réservé de JavaScript (let, if, for, …)

let prenom = "brendan"
let nom = "eich"
let adresse_email = prenom + "." + nom + "@etu.univ-amu.fr"
console.log(adresse_email)

Une variable peut avoir plusieurs types de valeurs :

• nombre : 10, -8, 3.14
• chaîne de caractères : "Hello world"
• valeur booléenne : true ou false
• tableau (liste)
• objet (dictionnaire)
• et autres …

Pour chaque type de variable il existe des opérations différentes

Nombres

Ce sont les nombres réels : 12, 3.1415, -276.15

On utilise la notation anglo-saxonne, avec un point pour le séparateur décimal.

Opérations arithmétiques :

let a = 10 + 5
let b = (a - 7.5) * 8
let c = b / 3
let d = 23 % 6 // modulo, reste de la division euclidienne
let e = 2**5 // exponentielle

Il existe aussi les opérations de comparaison :

2 < 3
2 <= 3
2 === 1+1
3 !== 2+1
4 > 2
4 >= 4

(on les utilise à l'intérieur des structures de contrôle)

Erreur fréquente : utiliser = (affectation) au lieu de ===

Chaînes de caractères

Suite de caractères (chiffres, lettres, espaces, signes de ponctuation, émojis).

On les écrit entourés des guillemets doubles (")

let message = "Identifiez-vous ! 😀"
alert(message)

Une seule opération entre les chaînes de caractères : l'assemblage

let nom = "Stéphane"
console.log("Bienvenue " + nom)

Pour combiner du texte et des variables, on utilise l'interpolation

let age = 18
console.log(`Vous avez ${age} ans`)

• Guillemets obliques, backticks : ` (Shift + Alt Gr + 7)
• ${variable} est remplacé par la valeur de la variable

Tableaux (listes)

Variable qui contient une liste de valeurs

let fruits = ["pommes", "bananes"]
let arbres = ["pommier", "figuier"]
arbres[1] = "bananier"
console.log("Le " + arbres[0] + " fait des " + fruits[0])
console.log("Le " + arbres[1] + " fait des " + fruits[1])

• Déclaration avec les crochets [], valeurs séparées par des virgules
• Chaque valeur est associée à sa position
• La première position est le zéro

Un tableau peut contenir un autre tableau

let depts = [
  ["Aube", "Troyes"],
  ["Gironde", "Bordeaux"]
]
console.log(`La préfecture de ${depts[0][0]} est ${depts[0][1]}`)
console.log(`La préfecture de ${depts[1][0]} est ${depts[1][1]}`)

Objets (dictionnaires)

Variable qui contient une liste de valeurs indexées par des chaînes de caractères

let arbre1 = {"nom": "pommier", "fruits": "pommes"}
let arbre2 = {"nom": "figuier", "fruits": "figues"}
console.log(`Le ${arbre1["nom"]} fait des ${arbre1["fruits"]}`)
console.log(`Le ${arbre2["nom"]} fait des ${arbre2["fruits"]}`)

• Déclaration avec les accolades {}, valeurs séparées par des virgules
• Chaque valeur est associée à un nom (clé)

Tableau ou objet ?

• Si vous avez le doute, utilisez celui qui vous semble le plus pratique
• Des fois vous n'aurez pas le choix. Par exemple : liste triée de noms ; la position est importante

En bref

• Un algorithme/programme manipule des données des différents types
• Chaque type de variable a ses propres opérations
• Utilisez des types de variables adaptés à votre besoin

On a les données, voyons comment mettre de l'intelligence dans un programme

Structures de contrôle

Un programme ne fait pas toujours la même chose, il dépend des données.

Les instructions sont guidées par les structures conditionnelles (if, else) et les boucles (while, for)

Structure if

Si une condition est vraie, on exécute une liste d'instructions

let age = 2023 - 2010
if (age < 18) {
  console.log("Vous êtes mineur")
}

• Condition (normalement une comparaison) entre parenthèses ()
• Bloc d'instructions entre accolades {}

Condition expression qui donne une valeur booléenne : true ou false

• Condition simple : une comparaison entre deux valeurs
• Condition complexe : combinaison de conditions simples avec des opérateurs logiques

Trois opérateurs logiques : conjonction (et, &&), disjonction (ou, ||) et négation (non, !)

Conjonction : vrai si les deux valeurs sont vraies

console.log(true && true) // true
console.log(true && false) // false
console.log(false && true) // false
console.log(false && false) // false

Exemple :  tu peux embarquer si tu as ton billet et ton passeport 

Disjonction : vrai dès qu'une des deux valeurs est vraie

console.log(true || true) // true
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false

Exemple : tu as une réduction si tu es étudiant ou chômeur

Négation : opposé de la valeur

console.log(! true) // false
console.log(! false) // true

Exemple : tu es sans emploi si tu ne travaille pas

Structure if-else

Une condition, deux blocs d'instructions, un seul est exécuté

let billet = true
let passeport = false
if (billet && passeport) {
  console.log("Vous pouvez embarquer")
} else {
  console.log("Il vous manque le billet ou le passeport")
}

Tout ce qui reste pour faire un programme sont les boucles de répétition pour faire plusieurs tâches similaires

let mot_de_passe
mot_de_passe = prompt("Mot de passe ?")
if (mot_de_passe === "abc123") {
  alert("Mot de passe correct")
} else {
  mot_de_passe = prompt("Incorrect. Essayez à nouveau")
  if (mot_de_passe === "abc123") {
    alert("Mot de passe correct")
  } else {
    mot_de_passe = prompt("Incorrect. Essayez à nouveau")
    if (mot_de_passe === "abc123") {
      alert("Mot de passe correct")
    } else {
      mot_de_passe = prompt("Incorrect. Essayez à nouveau")
    }
  }
}

Boucle while

Si la condition est vraie, on exécute le bloc d'instructions et on recommence : si la condition est vraie…

let nombre = 1.1
while (nombre < 1000000) {
  console.log(nombre)
  nombre = nombre*nombre
}

• while = « tant que »
• Syntaxe similaire à la structure if

Boucle do-while

On exécute le bloc d'instructions, et si la condition est vraie, alors on recommence : on exécute le bloc…

let nombre
do {
  nombre = Math.random() // nombre aléatoire entre 0 et 1
  console.log(nombre)
} while (nombre < 0.9)

• Nouveau mot réservé : do (faire)
• Le bloc est exécuté au moins une fois

Boucle for

Idéale pour faire la même chose un certain nombre de fois

let str = ""
for (let i = 0; i < 9; i++) {
  str = str + i
  console.log(str)
}

• Entre parenthèses : initialisation ; condition ; expression finale
• i++ est un raccourci pour i = i+1

Boucle for-of

Boucle pour parcourir les valeurs d'un tableau

let jours = ["lundi", "mardi", "mercredi", "jeudi", "vendredi"]
for (let valeur of jours) {
  console.log(valeur)
}

• Il faut déclarer la valeur avec let
• Nouveau mot réservé : of (de)
• On ne peut pas modifier le tableau

Boucle for-in

Boucle pour parcourir les clés d'un objet

let departement = {
  "nom": "Bouches-du-Rhône",
  "region": "Provence-Alpes-Côte d'Azur",
  "prefecture": "Marseille",
  "code": "13",
  "population": 2043110
}
for (let cle in departement) {
  console.log(`${cle} -> ${departement[cle]}`)
}

• Nouveau mot réservé : in (dans)
• On obtient la valeur associée comme d'habitude

En bref

• Structures de contrôle : changer l'ordre d'exécution des instructions
• if et while → tous les algorithmes possibles
• Autres structures → programmes plus simples à écrire et lire

Il ne reste qu'à appliquer ces techniques au développement web.