Archives de
Étiquette : js

for en JavaScript sur un tableau

for en JavaScript sur un tableau

Une grande partie viens de MDN.

for

for ([initialisation]; [condition]; [expression_finale]) {
   instruction
}

Permet d’initialiser des variables, de spécifier une condition pour finir la boucle, une expression final exécuté a la fin de chaque boucle et enfin les instructions a effectuer.

let str = "";

for (let i = 0; i < 9; i++) {
  str = str + i;
}

console.log(str);
// "012345678"

for…in

for (variable in objet) {
  instructions
}

Utile pour parcourir les propriété d’un objet. Attention avec les tableau car l’ordre de parcours n’est pas garantie.

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Affiche dans la console :
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for…of

for (variable of iterable) {
  instruction
}

Permet de parcourir tout objet itérable et d’exécuter les instructions.

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let element of iterable) {
  console.log(element);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]

for (let [clef, valeur] of iterable) {
  console.log(clef + ':' + valeur);
}
// a:1
// b:2
// c:3

Array.forEach

arr.forEach(callback);
arr.forEach(callback, thisArg);

Exécute la fonction callback sur chacun des éléments.

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));
// "a"
// "b"
// "c"

[2, 5, , 9].forEach(function(element, index, array) {
    console.log("a[" + index + "] = " + element);
});
// a[0] = 2
// a[1] = 5
// a[3] = 9

Sources:

  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for…in
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for…of
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
Création d’une miniature avec HTML5

Création d’une miniature avec HTML5

En trainant sur le net j’ai trouvé un petit tuto qui explique comment faire la miniature d’une image en HTML5 sans uploader le fichier. L’image est afficher a coté du champ input.

La première étape et de créer un formulaire avec un champ input de type file et une balise output pour afficher la miniature..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5 File Reader</title>
  </head>
  <body>
    <input type="file" id="files" />
    <output id="out"></output>
    <script>
    </script>
    </body>
</html>

Viens ensuite la partie javascript. Avant toute chose, Il faut vérifié que le navigateur supporte l’API FileReader.

if (window.FileReader) {
  function handleFileSelect(evt) {
} else {
  alert('Ce navigateur ne supporte pas FileReader');
}

Une fois cela fait un event listener est ajouté afin de mettre à jour la miniature lors de la sélection d’une nouvelle image.

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Pour finir nous construisons la miniature grâce a l’image que nous récupérons par l’API FileReader.

function handleFileSelect(evt) {
  var files = evt.target.files;
  var f = files[0];
  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      document.getElementById('out').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
    };
  })(f);

  reader.readAsDataURL(f);
}

Le fichier final est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5 File Reader</title>
  </head>
  <body>
    <input type="file" id="files" />
    <output id="out"></output>
    <script>
      if (window.FileReader) {
        function handleFileSelect(evt) {
          var files = evt.target.files;
          var f = files[0];
          var reader = new FileReader();

          reader.onload = (function(theFile) {
            return function(e) {
              document.getElementById('out').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
            };
          })(f);

          reader.readAsDataURL(f);
        }
      } else {
        alert('Ce navigateur ne supporte pas FileReader');
      }
      document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>
  </body>
</html>

 

Pour le voir en action c’est par ici.