Archives de
Tag: js

for en JavaScript sur un tableau

for en JavaScript sur un tableau

Commentaires 0 Commentaire

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

Commentaires 3 commentaires

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.