Demo 10: JavaScript & DOM

Explaining the Best Javascript Meme I've Ever Seen - Yazeed Bzadough

Ressources de la semaine

✨ CodeBoot.Org, Votre meilleur ami ✨

Allez voir les exemples de code que j'ai mis ici , surtout pour le devoir

Si vous voulez vraiment vous pratiquer/apprendre plus en profondeur: CodeAcademy a un merveilleux cours gratuit (vous n'avez pas besoin des choses payantes desus)

Si c'est la veille de l'exam vous êtes Vraiment perdu.e sur c'est quoi le JavaScript...

Ressources utiles de web3schools:

Pourquoi JavaScript existe? (Memes, crises existentielles et histoire)

Les failles de JavaScript

Javascript vs memes - DEV Community

r/ProgrammerHumor

Fun fact: JavaScript a ete créé en 10 jours et moi j'arrive même pas a finir un site web en 6 mois
Fun fact: JavaScript est utilisé par 97.9% des sites web
Frameworks
- C'est quoi?
  - explication approximative
  - Si vous voulez savoir la distinction exacte entre Framework et librairie: https://hackr.io/blog/what-is-frameworks
- Liste: https://en.wikipedia.org/wiki/List_of_JavaScript_libraries

Codeboot: votre ami

Notions basiques de JS

Typage (pleurs en python)
- undefined
- boolean
- number
- string
- object
- null
=== vs ==
tableaux (!!!!!!!!!!!!!!)
if/else, for loops, while loops
Note sur le OOP

Avant de continuer: L'importance de debugger

Sur codeboot pour catcher sa logique
Sur son fureteur
Sur VSCode

Inclure Javascript dans son HTML

VRAIMENT IMPORTANT: INCLURE CECI A LA LIGNE JUSTE AVANT VOTRE DERNIERE BALISE </body> please

Deux options (un peu comme quand on ecrit CSS sur le meme HTML dans <styles> ou bien on link le CSS et on y travaille dans un dossier à part):

Option A: Linker le Javascript a un fichier externe, par exemple ici il s'appelle script.js

Mon HTML index.html:


<html>
  <head>
    <title>Ton Site</title>
  </head>
  <body>
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- a la toute fin, je mets mon javascript, juste avant ma fermeture de </body> -->
    <script src="script.js"></script>
  </body>
</html>

Mon Javascript script.js:


/* ton code de javascript ici....*/
      function direAllo() {
        console.log("allo!");
      }

Option B: Ecrire le Javascript directement dans le HTML


<html>
  <head>
    <title>Ton Site</title>
  </head>
  <body>
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- TOUT TON CONTENU AVANT -->
    <!-- a la toute fin, je mets mon javascript, juste avant ma fermeture de </body> -->
    <script>
      /* ton code de javascript ici....*/
      function direAllo() {
        console.log("allo!");
      }
    </script>
  </body>
</html>

Retour sur le DOM

Intuition a avoir: décomposer son site web en éléments (objets)

Selectionner objet HTML

document.getElementById("tonIDici") (SANS le #)
document.getElementsByClassName("taClasseIci") (SANS le .) (retourne PLUSIEURS)
document.getElementsByTagName("taBaliseHTMLCommeDivOuH2") (sans les <>) (retourne PLUSIEURS)

Vraiment important de comprendre qu'est-ce qui arrive quand on reçoit l'objet!!

Déclencher le script

En loadant la page
Interaction avec un élément
Avec le temps

Modifier un objet

Retour a notre exemple d'avion...

innerHTML
className
Styles
etc.

Code fait durant la démo


x
var a = 3; // int (integer / nombre entier )
var b = " 3 "; // string 
var c = [3]; // array / tableau 
var d = NaN; // chiffre invalide 
var longueurDeC = c.length // comme len(c) en python, attention ce n'est PAS!!!! c.length() avec parentheses 
var mathIllegale = 0/0; // on ne peut pas faire ceci!! ca donne NaN 
var vide = null; // comme le None en pytho (ish) 
var autreVide = undefined; // une version dans laquelle on dit que la variable n'a pas encore de valeur 
var tableauVide = [];
var blep; // undefined 
var blap = null; //null
// pour le moment, pour comparer deux objets, utilisez le double egal 
var egalite = blep == blap; //faux 
var vraieEgalite = a == c[0];
print(a == c); //3 est la meme chose que 3 dans un tableau [3] 
// for loop weird qui marche de maniere weird pcq il n'y pas 10 elements dans c 
for (var i = 0; i < 10; i++){
    print(c[i]);
    print(i);
}
print("Longueur de c: " + c.length);

var c = [1,2,3,4,7,8,9,10,11]
// for loop qui passe a travers tous les elements de c  de 0 a 9 
//   v j'initialise mon i a 0 
//                     v va jusqu'au maximum qui est la longueur de c 
//                v a chaque iteration, augmente mon i de 1 
//    variable ; condition de si on itere; faire quelque chose a la variable a la fin de l'iteration
for (var i = 9; i < c.length; i++){
    print(c[i]);
    // i = 10 
}

// for loop de 9 a 0 
for (var i = 9; i >= 0; i--){
    print(c[i]);
    // i = 10 
}

if (c.length > 3){
    print("hello");
}
else {
    print("bye");
}
var i = 0;
while (i < c.length){ 
    i = i+ 1;
    print(i);
}

Roche, papiers, ciseaux!

Téléchargez le fichier ici.

Il vient deja avec ses images, le CSS (et des animations sur celui-ci) et le HTML.

Instructions

Le but de ce devoir et de créer le script dans le fichier, script.js pour faire marcher ce jeu de roche, papier, ciseaux.

Passez à travers les éléments HTML pour bien comprendre c'est quoi les objets à modifier.

Pendant que l'utilisateur choisit un instrument, la section de l'ordinateur fait defiler les 3 choix possibles (voir le video ci-dessous).
Une fois que l'utilisateur a clique sur un instrument (ce qui active onClick), son onClick fait appel a la fonction jouer(choixJoueur) où choixJoueur est un string avec soit 'roche', 'papier' ou 'ciseaux' comme argument. Vous devez donc coder la fonction jouer(choixJoueur) sur votre script.js (et vous pouvez utiliser toute autre fonction ou variables en dehors de celle-ci que vous voulez).
L'on affiche le choix de l'utilisateur dans le h2 de id "choixPersonne" (en francais ou en anglais, comme vous voulez)
Comme l'utilisateur a choisi un instrument, l'ordinateur choisit un instrument aussi au hasard et le choix de l'ordinateur s'affiche dans le h2 de id de "choixOrdi" (en francais ou en anglais, comme vous voulez). Pour le hasard, utilisez la fonction Math.random(). Vous pouvez trouver un exemple de chiffre au hasard dans les démos de code de ce site
Dans le h2 de id "result", l'on affiche qui est le gagnant (à vous de choisir comment le dire dans le texte) et
dans l'image de "resultPhoto", on affiche soit:
- winner.png si l'utilisateur a gagne
- loser.png si l'utilisateur a perdu
- tie.png si les deux ont fait le même choix d'instrument (et donc personne gagne).

Faites vraiment attention au plagiat.

Notez que toutes les images sont dans le dossier "assets". Vous devez donc leur faire reference avec src="assets/tonImage.png" et pas src="tonImage.png"

Le bouton "Jouer encore" contient deja un mini script pour reloader le site web (ce qui permet de jouer encore). Vous ne devez pas le modifier.

Video de quoi devrait avoir l'air votre site avec le script:

Consignes de remise

Message de Laura: si vous êtes perdu.e, il me fera plaisir de vous aider. Toutefois, écrivez votre question sur discord dans le channel #questions-devoirs ou #questions-cours au moins que ça soit une affaire personnelle et urgente. Si vous m'écrivez, assurez-vous d'écrire "IFT1005" comme sujet de courriel. Merci. Je vous rappelle aussi que ma periode de disponibilite est le mardi de 16h30 a 18h30 sur Discord.

Vous devez absolument créer le script javascript dans un fichier à part et le lier au html comme vu durant la démo.

Vous devez toutefois seulement remettre votre script.js sur votre dossier tp0 sur arcade (avec les bonnes permissions bien sûr).

Votre script.js doit absolument marcher avec le HTML fourni (ne modifiez pas le HTML ou CSS), de manière que Santiago aurait juste à remplacer votre script.js par le sien, sans rien faire d'autre, pour que votre devoir marche.

La date limite est le jeudi 7 avril, 23h59. Le devoir est à faire seul.e. Si vous n'avez jamais fait de Javascript, je vous invite fortement à consulter les ressources disponibles dans cette page, ainsi qu'à faire vos recherches sur google.