A21-905 Introduction à la programmation cours

CEM Calendrier Omnivox Plan de cours Tutorat TIM W3schools

Pour ceux et celles qui seraient particulièrement intéressés à la programmation Web, voici deux très bons livres (en anglais) :

HTML & CSS

JavaScript & jQuery

Si une version PDF vous intéresse, faites-moi signe.

Déclarer une ou plusieurs variables

let x;
let x, y, z;

Affecter une valeur à une ou plusieurs variables

x = 2;
x = 2, y = 3, z = 5;

On peut affecter une valeur au moment de déclarer les variables

let x = 2;
let x = 2, y = 3, z = 5;

Opérateurs arithmétiques

let x = 3 + 2; // x vaut 5 (addition)
x = 3 - 2; // x vaut 1 (soustraction)
x = 3 * 2; // x vaut 6 (multiplication)
x = 3 / 2; // x vaut 1.5 (division)
x = 5 % 2; // x vaut 1 (modulo)

x = 10;
x++; // x vaut 11 (incrémentation)
x--; // x vaut 10 (décrémentation)

x += 2; // x vaut 12 (équivalent à x = x + 2)
x -= 3; // x vaut 9 (équivalent à x = x - 3)
x *= 5; // x vaut 45 (équivalent à x = x * 5)
x /= 3; // x vaut 15 (équivalent à x = x / 3)
x %= 4; // x vaut 3 (équivalent à x = x % 4)

Concaténation de chaînes de caractères

let x = "Olive";
let y = "Capuchon";
texte = x + " et " + y + " sont des superhéros."
// texte vaut "Olive et Capuchon sont des superhéros."

Opérateurs de comparaison

5.5 > 6.5; // false
5 >= 5; // true
5 < 7; // true
5 <= 7; // true
5 == 7; // false
5 != 7; // true

"bon" > "arbre"; // true
"ball" >= "car"; // false
"car" < "ball" ; // false
"ball" <= "ball"; // true
"allo" == "allo_"; // false
"allo" != "allo_"; // true

Opérateurs logiques

1 < 2 && 2 > 3; // false (AND)
1 < 2 || 2 > 3 ; // true (OR)
!(1 < 2) ; // false (NOT)

Priorités des opérateurs

Priorité relative Opérateurs
1 ()
2 ++, --
3 *, /, %
4 +, -
5 <, <=, >, >=
6 ==, !=
7 =, +=, -=, *=, /=, %=

Fonctions sur le DOM

document.getElementById("id"); // accéder à un élément du DOM par son ID
document.getElementById("id").textContent; // obtenir le texte d'un élément du DOM par son ID
document.getElementById("id").textContent = "Bonjour!"; // modifier le texte d'un élément du DOM par son ID

Commentaires

// Ceci est un commentaire.
let a = 1; // Ceci est un commentaire.
// let b = 2; Toute cette ligne est en commentaire.
let b = 3;

/*
Ceci est un commentaire
sur
plusieurs lignes.
*/

Instructions conditionnelles

let a = 4;
if(a < 3){
    document.getElementById("id").textContent = "Petit";
}
else if(a > 5){
    document.getElementById("id").textContent = "Grand";
}
else{
    document.getElementById("id").textContent = "Moyen";
}

Fonctions

/* Déclarer une fonction */
function changerTitre(){
    document.getElementById("titre").textContent = "Bonjour!";
}

/* Appeler une fonction (afin qu'elle soit exécutée) */
changerTitre();

Évènements

// ajouter un écouteur pour un évènement (ici "click") sur un élément :
document.getElementById("titre").addEventListener("click", changerTitre);
// la fonction changerTitre sera appelée lors d'un clic sur l'élément "titre"
Aide-mémoire 2

Exercice 1 - Compteur sans limite

Exercice 2 - Lumière

Démonstration

Tableaux

Virus Invaders

Semaines 1-2 :

Semaines 1-4 :

Semaines 1-8 :


Cliquez pour ouvrir les notes de cours :

Cliquez pour télécharger les exercices :

Cliquez pour ouvrir les notes de cours :

Cliquez pour télécharger les exercices :

Cliquez pour ouvrir les notes de cours :

Cliquez pour télécharger les exercices :

Notes de cours :

Exercices :

Résultats (obfusqués!) :

Auto-correcteur amélioré

Instructions pour remplacer l'auto-correcteur (dossier /tests/)

  1. Faire d'abord une copie de votre TP1 au cas où
  2. Télécharger et décompresser le dossier /tests/ (bouton orange ci-haut)
  3. Supprimer le dossier /tests/ situé dans le dossier /js/ de votre TP1
    (attention de ne pas supprimer votre fichier script.js)
  4. Copier/coller le nouveau dossier /tests/ téléchargé dans le dossier /js/ de votre TP1

Résultats (partie I) :

Résultats (partie II) :

Notes de cours :

Exercices :

Résultats :

Notes de cours :

Exercices :

Résultats :

Notes de cours :

Exercices :

Résultats :

TP2 : Virus Invaders

Énoncé

Typos

  • TODO 1.C : 4. Déclarer une constante nommée NOMBRE_ITERATIONS [...]
  • TODO 1.D : 9. Appeler la fonction creerNouveauVirus [...]
  • TODO 2.A : 12. Ajouter idBalle à la fin du tableau des ids des balles du joueur (gTableauBallesIdsJoueur)
  • TODO 2.B : 6. [...] avec la variable locale de la position du médecin en X moins la variable globale [...]
  • TODO 3.B : 4. Déclarer une variable nommée positionBalleY [...]
  • TODO 5.A : 1. Faire une boucle qui parcourt tous les éléments du tableau des ids des bonus.

Notes de cours :

Exercices :

Résultats :

Notes de cours :

Exercices :

Résultats :