[Résolu] Comprendre une fonction

Bonjour

j'aimerais comprendre le fonctionnement d'une fonction. Je me lance dans le JS et j'aimerais comprendre. Merci

<form name="selectForm">
  <p>
    <label for="typesMusique">Veuillez choisir des genres musicaux, puis cliquez :</label>
    <select id="typesMusique" name="typesMusique" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classique</option>
      <option>Opera</option>
    </select>
  </p>
  <p><button id="btn" type="button">Combien sont sélectionnés ?</button></p>
</form>

<script>
function quantité(selectObject) {
  var qtéSélectionnée = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      qtéSélectionnée++;
    }
  }
  return qtéSélectionnée;
}

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique))
});
</script>

Questions:
-1- La fonction "quantité" a un paramètre "selectObject". Je n'arrive pas à trouver où et quand le paramètre est défini.
-2-Quand je lis les instructions de la fonction "quantité" je comprends :
-on définit une variable "qtéselectionné" à laquelle on affecte la valeur 0.
-on définit une condition For
-on exécute un code tant que la condition est vrai et un autre dès qu"elle devient fausse.
-ici la condition me pose problème. selectObject.options.length, quand est ce que l'on a définit défini les options du paramètre et sa longueur (Array?) ?
3-La condition présente dans le If aussi me paraît incompréhensible mais je pense qu'elle doit découler de la question précédente.

Merci de votre aide.

1- au clique sur un bouton il te renverra la valeur de l'option selectionné
normalement je crois que chaque option s'écrit plutôt :

<option value="dog">Dog</option>

https://www.w3schools.com/tags/att_select_multiple.asp
ici dans mon exemple ce serrait dog.

2- selectObject.options.length dois etre 6 ici c'est le nombre d'options du select
ça se défini tout seul

3-

selectObject.options[ i ].selected

test si l'option est selectionnée et donc cette partie teste pour ton nombre de réponses si elles sont selectionnée. Si oui ça ajoute 1 à qtéSélectionnée. Et a la fin ça renvoi qtéSélectionnée
Modifié par 5azor (10 Jul 2019 - 17:12)

merci 5azor.

J'ai vraiment parfois du mal avec les fonctions car des fois cela ne m'est pas autant intuitif à cerner. Il faut juste que je comprennes certaines choses.

1-Est ce que le paramètre "selectObject" est nommé de manière anodine, cad peut on mettre autre chose en tant que nom, ou bien cible t-il le select dans le document et l'objet à l’intérieur de ce select?
2-si le paramètre "selectObject" cible le select dans le document, comment savoir qu'il cible "ce" select et pas un autre? ou alors cible t-il indifféremment tous les select avec un object à l'intérieur?

Merci

1- ici c'est juste un appel de fonction quand dans

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique))
});

On fait

quantité(document.selectForm.typesMusique))

on appelle la fonction quantité avec comme parametre le formulaire.
puis dans la fonction quantité:

function quantité(selectObject) {]

dis que le premier parametre s'appelera slectObject mais j'aurai pu faire

function quantité(waouhUnCochonQuiVole) {]

mais j'aurai du remplacer tous les selectObject par waouhUnCochonQuiVole

2- Quand on appel la fonction quantité(document.selectForm.typesMusique)) on cible ce select par document.selectForm.typesMusique avec typesMusique qui est son nom.

As tu déjà vu d'autres languages informatiques? genre java ou c+ ou c ou python ou php .

tankarasu a écrit :
En fait je n'arrive pas à faire le lien entre le code HTML et la fonction, normalement selon ma logique une variable ou quelque chose d'autre devrait les relier.

J'ai pas compris ce que tu voulais dire

Hello

a écrit :
1-Est ce que le paramètre "selectObject" est nommé de manière anodine, cad peut on mettre autre chose en tant que nom, ou bien cible t-il le select dans le document et l'objet à l’intérieur de ce select?

Oui, c'est anodin, on choisit un nom qui représente ce que l'on souhaite obtenir généralement, pour que ce soit plus lisible que «waouhUnCochonQuiVole»

a écrit :

2-si le paramètre "selectObject" cible le select dans le document, comment savoir qu'il cible "ce" select et pas un autre? ou alors cible t-il indifféremment tous les select avec un object à l'intérieur?

C'est lorsqu'on appelle la fonction qu'on doit le savoir. En effet, si on met n'importe quoi dans l'appel de la fonction, cela va provoquer une erreur.

ici on appelle la fonction avec document.selectForm.typesMusique

document est un point d'entrée qui représente ta page HTML chargée dans le navigateur, les variables ou les méthodes qui commencent par document. permettent donc de récupérer des information de la page ou de modifier des éléments de la page.

Ici on utilise une méthode assez antique qui consiste à accéder aux éléments de formulaires grâce à leurs attributs «name», qui sont remplis automatiquement dans document:

document.ATTRIBUT_NAME_DU_FORM.ATTRIBUT_NAME_DU_SELECT

aujourd'hui on préfère les méthodes suivantes, qui sont plus consistantes pour n'importe quels éléments:
document.getElementById() // sélection par attribut ID
document.getElementsByClassName() sélection par classe CSS
document.getElementsByName() // sélection par attribut NAME
document.querySelector() // sélection par règle CSS, retourne un seul élément
document.querySelectorAll() // sélection par règle CSS, retourne plusieurs éléments
Modifié par kustolovic (11 Jul 2019 - 16:35)

5azor a écrit :

As tu déjà vu d'autres languages informatiques? genre java ou c+ ou c ou python ou php .

Juste du HTML et CSS (mal) heureusement. Les conseils sont les bienvenus. J'aimerai enchaîner avec PHP-MYSQL par la suite puis d'autres langages en vue de me reconvertir mais n'oublions pas mes 39 printemps. Donc parfois au commencement comme là je prends le risque de galérer

donc si j'ai bien compris je m'essaie à récapituler:

1- On crée une variable à laquelle on affecte la valeur que le bouton renvoi.

var btn = document.getElementById("btn")

2-Au clic du bouton, on exécute un "alert()" qui appelle la fonction "quantité"

btn.addEventListener("click", function(){
  alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique))
})

3-Le paramètre de la fonction "quantité" cible une "form" dans le document avec l'Id "typesMusiques"

quantité(document.selectForm.typesMusique))

4-Puis la fonction s’exécute avec le bon paramètre.
(merci 5Azor, merci Kustolovic

merci, à vous tous

il est temps pour moi de mettre le sujet comme résolu.