Une solution en copiant collant les données du fichier
Récupération du fichier et utilisation d'un fichier modifié
Dans la solution précédente, on a choisi de copier-coller le contenu du fichier de données.
On peut éviter cela en procédant par exemple de la façon suivante :
- On fait une copie locale du fichier. "locale" signifie : sur sa machine, et est à mettre en opposition
à l'emplacement du fichier d'origine [le serveur du site].
- On renomme le fichier en "dataScarlett.js".
- On le modifie légérement en ajoutant "var tabPix = [" en début de fichier et "]" en fin de fichier.
On aura ainsi un fichier js avec notre variable de données. Il suffit de le charger dans l'entête de notre fichier html
et le reste du script sera identique au précedent. On aura ainsi évité des manipulations pénibles
et susceptibles d'être des sources d'erreur.
Récupération du fichier en local et utilisation sans modification
Dans cette variante, on récupère le fichier de données sur sa machine (comme avec le choix précédent) mais on
ne modifie pas ses données.
Il nous faut donc lire directement dans le fichier les données.
Pour cela, nous utilisons un élément input de type file
puis la fonction FileReader(). Vous chercherez les occurrences de ces mots sur le web pour en savoir plus.
L'exemple ci-dessous pourra vous servir de base en cas de besoin.
Utilisation des données du fichier sur le serveur sans copie locale
Dans cette variante, on décide de ne pas copier-coller les données du fichier
donnant les codes des pixels, ni d'en utiliser une version modifiée, ni même d'en faire une copie locale.
Il nous faut donc lire les données du fichier directement sur le serveur.
On cherche à récupérer les données du fichier directement dans une variable js à l'intérieur du script.
Pour cela, on peut utiliser XMLHttpRequest. Nous ne rentrons pas ici dans le détail d'utilisation
de cette fonction (chercher sur le web les très nombreuses références la concernant). Nous donnons seulement un exemple
d'utilisation qui pourra vous donner un point de départ pour aller plus loin.
Ce code relativement complexe peut être simplifié avec l'usage de jquery (solution suivante).
Remarques :
- Avec une adresse locale sur votre machine pour le fichier,
le script ne fonctionnera pas avec tous les navigateurs.
- Il faut apporter des modifications à ce script pour qu'il fonctionne avec le navigateur de microsoft.
Simplification du précédent avec jQuery
jQuery est une bibliothèque javascript qui simplifie beaucoup tout le code
javascript d'interaction avec les éléments html
ou avec des fichiers.
jQuery.ajax va permettre de simplifier l'utilisation de XMLHttpRequest comme le montre le code ci-dessous.
Il vous faudra tout de même faire un peu de recherche web sur
jQuery.ajax() pour saisir chaque étape.
Attention, avec une copie locale du fichier, il se peut que cela ne fonctionne pas (c'est une question de sécurité,
en interdisant la lecture d'un fichier sur votre ordinateur, on assure qu'un site ne puisse pas récupérer des données sur
votre machine à votre insu). Il faudra donc en général que le fichier à lire soit déposé sur un serveur.