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