STIC Discussion:STIC I - exercice 3 (Xerneas)

Demande de Feedback : marc -- Marc Metziger (discussion) 3 novembre 2017 à 19:42 (CET)

Bonsoir Mattia,

Bloqué dans les bouchons, j'en ai profité pour faire l'exercice 3. Pourriez-vous me faire un retour formatif, notamment sur l'élégance du code.

http://tecfaetu.unige.ch/etu-maltt/xerneas/metzige7/

Merci,

Cordialement, Marc M.

Re: Demande de Feedback : marc -- Mattia A. Fritz (discussion) 3 novembre 2017 à 21:39 (CET)

Bonsoir Marc,

j'imagine que vous faites références aux applications 4 et 5 de cette page http://tecfaetu.unige.ch/etu-maltt/xerneas/metzige7/stic-1/ex3/ex3_test/ (SVP, mettez les liens directes comme ça on est sûr de se référer au bon fichier), car le code pour les premières 3 est du code des exemples - et par conséquent il est naturellement très élégant ! ;)

Par élégance du code nous entendons en gros deux choses :

1. Sa lisibilité (indentation, ...)
2. Le principe de pouvoir comprendre quelle est l'intentionnalité du script (cf. slides interactives).

Dans ce sens, vos noms des variables et identification des éléments interactifs ne sont pas très communicatifs. Vous pouvez comparer votre bouts de code avec un autre que je vous propose.

Le votre :

// appli 4
var A = document.getElementById("entree");
var B = document.getElementById("boutton");
var C = document.getElementById("sortie");

B.onclick = function () {

    C.innerHTML = A.value * A.value;
};

Modifié :

//Fournir à l'utilisateur le carré d'une chiffre qu'il insère
var givenNumber = document.getElementById("numberToSquareInput");
var squareIt = document.getElementById("squareItBtn");
var showResult = document.getElementById("resultOutput");

//Elever au carré une fois cliqué sur le bouton
squareIt.onclick = function () {
  showResult.innerHTML = Math.pow(givenNumber.value, 2);
}

(NB Je ne suis pas certains que ce code marche correctement, c'est juste pour vous illustrer le principe)

Pour la machine ces deux bouts de code représentent des instructions équivalentes, elle n'a pas de préférence. Par contre, si vous voulez partager ce code avec d'autres ou même modifier ce code dans 2 mois, le deuxième bout de code est plus représentatif des intentions. La seule chose qui change techniquement est l'utilisation de Math.pow(), le reste c'est juste une question de nomenclature sémantique.

Bien entendu, pour votre rendu final on s'attend à une application qui soutient un processus d'apprentissage pour l'utilisateur que vous identifiez dans les objectifs. Nous donnons volontairement des exemples simplement techniques pour éviter de vous conditionner dans la volonté de répliquer ce qu'on vous propose.

Mattia

Re: Re: Demande de Feedback : marc -- Marc Metziger (discussion) 10 novembre 2017 à 13:10 (CET)

Bonjour Mattia,

Merci de votre réponse. Oui c'était la bonne page. En réponse :

- Je mettrai directement le lien par la suite. - Il s'agissait bien des application 4 et 5, je l'écrirai plus clairement. - L'objectif pédagogique de l'appli 5 est de faire travailler les apprenants sur la mise à la puissance 2 : l'apprenant entre un nombre, calcul de son côté le carré, rentre son résultat, JS dit si c'est le bon résultat ou non. cela est-il suffisant ? - ok pour l'élégance.

Merci.

A bientôt,

cdlt, Marc M.