11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Lire un fichier texte sans serveur

Bonjour,

Je voudrais réaliser un petit jeu (trouver un maximum de mots à partir de lettres tirées aléatoirement) en html + jquery + css. Ma cible : les mobiles.

Mon problème : je dispose d'une liste de quelques milliers de mots dans un fichier texte et je ne souhaite pas utiliser AJAX car je voudrais que l'application soit autonome.

Mais apparemment, javascript ne peut pas lire de fichier en local.
Localstorage ne semble pas non plus adapté (si j'ai bien compris, il faut d'abord rentrer les données sur chaque navigateur).

J'ai surement raté quelque chose car il doit bien y avoir une autre solution que de créer un tableau avec plusieurs milliers de mots Smiley lol

Merci de votre aide
Modérateur
Bonjour,

Javascript peut plus ou moins lire en local sous condition, mais de toute façon, ce n'est pas ça qui fera que ton fichier texte sera stocké sur la machine de l'utilisateur. Comme au départ, le fichier texte est sur le serveur, autant inclure son contenu tout simplement dans ta page (par exemple comme contenu d'un <div> que tu caches via un display:none, mais il y a des tas d'autres options).

Amicalement,
Merci de ta réponse.

parsimonhi a écrit :

autant inclure son contenu tout simplement dans ta page (par exemple comme contenu d'un &lt;div&gt; que tu caches via un display:none, mais il y a des tas d'autres options).


C'est ce que je voulais éviter, mais si il n'y a pas d'autre voie... Comment puis-je faire pour incorporer ce fichier de façon structurée ? Actuellement c'est une simple liste de mots, mais longue, longue...

Amicalement

private joke : le go, c'est la loi du talion : oeil pour oeil...
Modifié par kristen (21 Dec 2014 - 18:44)
Modérateur
Bonjour,

kristen a écrit :
C'est ce que je voulais éviter, mais si il n'y a pas d'autre voie...


Il faut bien que les données de ton fichier soit quelque part ! Smiley cligne Si tu ne veux pas les récupérer par AJAX, il faut les mettre dans ton document HTML, ou dans une ressource chargée avec ton document.

kristen a écrit :
Comment puis-je faire pour incorporer ce fichier de façon structurée ? Actuellement c'est une simple liste de mots, mais longue, longue...


Tout dépend du niveau d'efficacité que tu recherches. S'il n'y a "que" quelques milliers de mots, à ta place, je ne me casserai pas trop la tête, tu mets tout tel quel dans un <div> via php, puis tu insères une petite fonction javascript en fin de fichier HTML qui lira le innerHTML de ton div, et le rangera dans un tableau javascript dont tu pourras utiliser le contenu comme tu voudras. Tout ça est très rapide : une fraction de seconde.

Par exemple, en supposant que ton fichier s'appelle dico.txt et que les mots dedans sont séparés par des espaces (à titre d'exemple, je me suis contenté de réécrire la liste de mots dans un autre <div>) :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="dico" style="display:none">
<?php print file_get_contents("dico.txt");?>
</div>
<div id="output">
</div>
<script>
var a;
function prepareDico()
{
	var e=document.getElementById("dico"),k,t="";
	a=e.innerHTML.split(" ");
	for (k=0;k<a.length;k++) t+=(a[k]+"<br>");
	document.getElementById("output").innerHTML=t;
}
window.addEventListener("load",prepareDico,false);
</script>
</body>
</html>


Amicalement,
Modifié par parsimonhi (21 Dec 2014 - 19:35)
Modérateur
Bonjour,

Voici un exemple rudimentaire du jeu :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script>
function setQuestion()
{
	var k,nv=2+Math.floor(Math.random()*5),nc=2+Math.floor(Math.random()*(7-nv)),q="";
	var V=["A","E","I","O","U","Y"];
	var C=["B","C","D","F","G","H","J","K","L","M","N","P","Q","R","S","T","V","W","X","Z"];
	for (k=1;k<=nv;k++) q+=V[Math.floor(Math.random()*6)];
	for (k=1;k<=nc;k++) q+=C[Math.floor(Math.random()*20)];
	document.getElementById("question").innerHTML=q;
}
function checkDico()
{
	var q,r,k;
	q=document.getElementById("question").innerHTML;
	r=document.getElementById("response").value.toUpperCase();
	for (k=0;k<r.length;k++)
		if (q.indexOf(r[k])<0)
		{
			document.getElementById("result").innerHTML="Perdu";
			return;
		}
	for (k=0;k<a.length;k++)
		if (r==a[k].toUpperCase())
		{
			document.getElementById("result").innerHTML="Gagné";
			return;
		}
	document.getElementById("result").innerHTML="Perdu";
}
</script>
</head>

<body>

<div id="dico" style="display:none"><?php print file_get_contents("dico.txt");?></div>
<span id="question"></span>
<input id="response" type="text">
<button onclick="checkDico()">OK</button>
<button onclick="setQuestion()">Un autre</button>
<div id="result"></div>

<script>
var a,f=function(){a=document.getElementById("dico").innerHTML.split(/\s/);setQuestion();};
window.addEventListener("load",f,false);
</script>

</body>
</html>


Amicalement,
Ahhh mais tu ne mérites vraiment pas ton nom, Parsimonhi !...

Mille mercis pour ton temps et tes conseils.
Je me colle au codage de suite.
Pour info, je réécris un jeu que j'avais déjà fait il y a des années en turbo-pascal (Kej-Mesk, encore dispo sur un site très moche kristen.tonnelle.pagesperso-orange.fr/kt/index.htm.

Amicalement
Modifié par kristen (21 Dec 2014 - 21:53)
@parsimonhi : Pourquoi ne pas avoir mis les données directement dans un tableau javascript ou dans du json ?
Je pense qu'on peut vachement simplifier tout ça quand même. J'aurais dis aussi JSON pour un truc bien plus facile à manipuler et qui sera très facilement exportable. Il suffira d'associer la valeur du fichier à une variable JS via PHP (ou lire le contenu avec l'objet JSON en JS) et de travailler directement avec ça au lieu d'avoir la contrainte de l'écrire dans le HTML.
On pourrait aussi utiliser Ajax en combinant à la nouvelle API "appcache" qui rendrait les choses encore plus simple (mais à voir pour une rétrocompatibilité).
Bonjour.

Je n'ai pas compris cette phrase...
kristen a écrit :
je ne souhaite pas utiliser AJAX car je voudrais que l'application soit autonome

Tu utilises javascript, donc Ajax est intégré ? ...Ou j'ai raté un truc.
SolidSnake a écrit :
Bonjour.

Je n'ai pas compris cette phrase...

Tu utilises javascript, donc Ajax est intégré ? ...Ou j'ai raté un truc.


C'est peut-être moi qui suis dépassé... Bon, je souhaite éviter les solutions ajax parce qu'autant que je comprenne, elles nécessitent un serveur et je voudrais pouvoir simplement pouvoir filer le jeu par simple copie de fichiers pour que tout le monde puisse y jouer sur son ordi.
Modérateur
Bonjour,

benj a écrit :
@parsimonhi : Pourquoi ne pas avoir mis les données directement dans un tableau javascript ou dans du json ?


benj a écrit :
J'aurais dis aussi JSON pour un truc bien plus facile à manipuler et qui sera très facilement exportable. Il suffira d'associer la valeur du fichier à une variable JS via PHP (ou lire le contenu avec l'objet JSON en JS) et de travailler directement avec ça au lieu d'avoir la contrainte de l'écrire dans le HTML. On pourrait aussi utiliser Ajax en combinant à la nouvelle API "appcache" qui rendrait les choses encore plus simple (mais à voir pour une rétrocompatibilité).


Je pense que ce serait bien mieux avec de l'AJAX moi aussi, mais la contrainte initiale était "pas d'AJAX".

Amicalement,
Modifié par parsimonhi (22 Dec 2014 - 15:48)
parsimonhi a écrit :
Je pense que ce serait bien mieux avec de l'AJAX moi aussi, mais la contrainte initiale était &quot;pas d'AJAX&quot;.

Il n'y a pas besoin d'ajax pour écrire un tableau dans le code source ! Aussi au format json avec JSON.parse().
Modérateur
Bonjour,

Oui, mais dans ce cas, ça nécessite de préparer les données côté serveur et les mettre dans un fichier .js avec j'imagine une ligne du genre var a={... ici les données...}, non ?

De plus, utiliser du JSON n'avance pas spécialement ici me semble-t-il, car il est probable que les données seront au final rangées dans un bête tableau (certes un cas particulier de JSON). Un simple split() en javascript (ou explode() en php si on veut fabriquer le .js automatiquement côté serveur) conduisent dans le cas présent au même résultat et surement plus rapidement.

Si c'était mon projet, je garderais le fichier texte tel quel, car facile à mettre à jour, je récupérerais le contenu via un bout d'AJAX côté client en début de session sans aucun traitement côté serveur (il a déjà bien asse à faire, le serveur), et je finirais par un simple split() javascript du responseText en le rangeant dans un tableau js. Zero php donc, et une fonction de quelques lignes en javascript.

Amicalement,
Oui dans ce cas-ci le format json n'apporte pas grand chose.
var dico = ["mot1","mot2",...];

A priori il n'y a pas besoin de mettre à jour régulièrement le dictionnaire. Celui ci pourra être généré une bonne fois pour toute avec par exemple un explode() en php.

En tous cas je comprends mieux la raison de ton code donné plus haut.
Modifié par benj (22 Dec 2014 - 18:23)
Modérateur
Bonjour,

kristen a écrit :
C'est peut-être moi qui suis dépassé... Bon, je souhaite éviter les solutions ajax parce qu'autant que je comprenne, elles nécessitent un serveur et je voudrais pouvoir simplement pouvoir filer le jeu par simple copie de fichiers pour que tout le monde puisse y jouer sur son ordi.


Dans ce cas là (pas de serveur du tout), soit tu copies en dur ta liste de mots dans un <div> (au lieu de l'inclure avec du php comme je l'avais proposé), soit tu fabriques un fichier .js contenant un var a = ["mot1","mot2",...]; avec la liste de tous tes mots, fichier que tu peux générer automatiquement une fois pour toute avec tout outil à ta convenance (avec du perl, ou avec un éditeur de texte avec une bête fonction rechercher/remplacer, ou même un bout de php ou de javascript), et une ligne <script src="dico.js"></script> dans ton fichier HTML.

Ceci étant, il n'est pas clair que ça marche sur les mobiles aussi facilement que ça, la possibilité de stocker et d'ouvrir un fichier local (cette fois-ci ton fichier HTML) et d'en exécuter le contenu dans un navigateur ne sera pas à la portée de tout le monde. Je n'ai par exemple là tout de suite aucune idée de la manière de faire ça avec mon téléphone dont je me sers pourtant depuis des années (il faut dire aussi que je me sers principalement de mon téléphone pour téléphoner, ce qui n'aide pas). Si c'est possible de le faire et que je cherche un peu, certes, je vais trouver, mais combien vont faire l'effort ?

Amicalement,
parsimonhi a écrit :
Bonjour,

une ligne <src="dico.js"></script>; dans ton fichier HTML.

Ceci étant, il n'est pas clair que ça marche sur les mobiles aussi facilement que ça, la possibilité de stocker et d'ouvrir un fichier local (cette fois-ci ton fichier HTML) et d'en exécuter le contenu dans un navigateur ne sera pas à la portée de tout le monde.



Ça veut dire qu'il y des restrictions même sur l'inclusion d'un fichier js ?
Sujet clos
Aller à