# Exemples d'interaction avec le DOM

# Exemple d'interaction simple avec le DOM

(Cliquer sur le triangle en bas pour voir le code commenté)

<html>
  <p>
    Vous allez générer un mot de passe de 
    <input
      type="number"
      id="number"
      class="input"
      max="25"
      min="8"
      placeholder="Saisir un nombre ici"
      value="12"
    />
    caractères
  </p>
  <p>
    Parmi tous ces caractères :
    <input
      type="text"
      id="allowedChars"
      class="input"
      value="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-_$!@"
      placeholder="Saisir des caractères ici (sans espaces blancs)"
    />
  </p>
  <p>
    <button id="generate-btn" class="button">GÉNÉRER</button>
    Résultat : <span id="generated-password"></span>
  </p>
</html>
<style>
.input {
  padding: 1em;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.button {
  border-radius: 4px;
  padding: 1em;
}
</style>

<script>
// Code issu du chapitre "premier-programme"
function getRandomNumber (max) {
  var randomNumber = Math.floor(Math.random() * (max + 1))
  return randomNumber
}

var defaultAvailableChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-_$!@'

function getRandomString (stringLength = 8, availableChars = defaultAvailableChars) {
  var max = availableChars.length - 1

  var randomString = ''
  
  while (randomString.length < stringLength) {
    var randomBetween0AndMax = getRandomNumber(max)
    randomString += availableChars[randomBetween0AndMax]
  }

  return randomString
}
// Fin du code du chapitre "prenier-programme"

// Récupération de l'input avec le nombre de caractères (il a pour id 'number')
// et stockage dans la variable numberEl
var numberEl = document.getElementById("number");

// Récupération de l'input (il a pour id 'allowedChars')
// et stockage dans la variable allowedCharsEl
var allowedCharsEl = document.getElementById("allowedChars");

// Récupération du span pour afficher le résultat (il a pour id 'result')
// et stockage dans la variable resultEl
var resultEl = document.getElementById("generated-password");

// Récupération du bouton (il a pour id 'generate-btn')
// et stockage dans la variable resultEl
var buttonEl = document.getElementById("generate-btn");

// Déclaration d'une fonction computePassword
function computePassword () {
  // Récupération de la valeur contenue dans l'élément numberEl,
  // conversion en Number (par défaut, c'est une chaîne de caractères)
  // Stockage du résultat dans la variable firstValue
  var numberValue = Number(numberEl.value);

  // Récupération de la valeur contenue dans l'élément allowedCharsEl,
  // Stockage du résultat dans la variable allowedCharsValue
  var allowedCharsValue = allowedCharsEl.value;

  // Invocation de la fonction add avec pour arguments les valeurs de firstEl et de secondEl
  var result = getRandomString(numberValue, allowedCharsValue);

  // Définition du HTML de l'élément resultEl avec le résultat
  resultEl.innerHTML = result
}

buttonEl.addEventListener("click", computePassword)


</script>

# Exemple d'interactions "réactives" avec le DOM

Voici un exemple de mini-application "réactive" : dès que la valeur de l'un des deux champs change, le résultat est mis à jour.

(Cliquer sur le triangle en bas pour voir le code commenté)

← Introduction au DOM