le grec ancien : du bouton aux fenêtres

Version imprimable

11/03/2011, 21h59
le goss

le grec ancien : du bouton aux fenêtres

Bonsoir à tous, :P

Je ne suis vraiment pas calé en javascript... mais j'en ai besoin pour mon travail.
Voilà :
Je voudrais créer un script qui me permettrait d'avoir dans une fenêtre, la conversion en html de caractères en grec ancien figurant sur des boutons (avec accents et esprits), et dans une autre fenêtre la "mémorisation" des boutons sur lesquels je clique. Parce que saisir du grec en code html, c'est vraiment pas de la tarte...

Exemple :
1. Sur un bouton, j'ai le caractère "ά" (bon, là, c'est de l'unicode),
2. quand je clique dessus, dans une 1ère fenêtre apparaît un joli "ἀ"
et ainsi de suite pour écrire un texte complet.
3. dans une 2nde fenêtre le caractère "ά" est gardé en mémoire, ainsi que les autres caractères.

J'ai pensé aussi à un système de "substitution" qui donnerait un truc du genre:
1. je saisis "/a" dans une zone de saisie
2. dans une 1ère fenêtre apparaît un joli "ἀ" et ainsi de suite pour écrire un texte complet.
3. dans une 2nde fenêtre le caractère "ά" est gardé en mémoire.

Comme j'aime bien me débrouiller par moi-même, merci de me faire connaître juste le principe sur un petit exemple que j'adapterai selon mes besoins.

Merci pour votre aide !

en fait une sorte de clavier virtuel en grec ancien ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript" charset="utf-8"> var greek =new Array() greek['ἀ']='ἀ' </script> </head> <body> <input type="button" value="ἀ" onclick="document.getElementById('page').innerHTML+=this.value;document.getElementById('code').value+=greek[this.value]" /> <div id="page"> </div> <textarea id="code"> </textarea>
[edit]
arrrgggg le forum a modifié mon script à cause des caractères ...
l'array littéral devrait avoir le caractère grec en indice et pas son htmlentity
bon alors si c'est comme ça on va faire plus simple:
Code:

1 2 3 4 5 6 <input type="button" value="ἀ" onclick="document.getElementById('page').innerHTML+=this.value;document.getElementById('code').value+='&#'+this.value.charCodeAt(0)" /> <div id="page"> </div> <textarea id="code" cols="150" rows="10" > </textarea>

en y ayant repensé un peu:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script type="text/javascript" charset="utf-8">
function greek(val){
 document.getElementById('page').innerHTML+=val;
 document.getElementById('code').value+='&#'+val.charCodeAt(0)
 }
 
function init(){
var clavier=document.getElementById('clavier')
var touche=document.createElement('input')
touche.type='button'
touche.value=''
 
 
 
var i=7935
var line=0
while (++i<7958){
lettre = touche.cloneNode(true)
lettre.value=String.fromCharCode(i);
lettre.onclick=function(){greek(this.value)}
lettre.style.width="30px"
clavier.appendChild(lettre)
 
if(++line%10==0){clavier.appendChild(document.createElement('br'))}
}
}
 
</script>
</head>
 
<body onload="init()">
<div id="clavier"></div>
 
 
<div id="page">
</div>
<textarea id="code" cols="150" rows="10" >
</textarea>
 
</body>

je ne connais pas les codes caractères mais il suffit de les mettre dans un array et de boucler dessus

13/03/2011, 15h12
le goss

Woouuaaaaaaaahhhhhhhh !!! :)
C'est trop fort !
Merci pour le temps que tu as passé à ce script.
Sans vouloir abuser, te serait-il possible de me faire connaître la démarche pour une substitution de caractères, c'est-à dire :

1. Je saisis un "a" (avec mon clavier)
2. un "α" (alpha) s'ajoute aux autre caractère (juste en dessous des boutons)
3. son code html "α" apparaît dans la fenêtre au-dessous

Ce qui permet
- une saisie beaucoup plus rapide des caractères non-accentués (via le clavier du pc),
- une alternance avec l'utilisation des boutons pour les autres

Tiens, je suis tombé la dessus. C'est un peu ce que je cherchais, sauf que le résultat est de l'unicode.. et peut-être pas en javascript :
http://users.ox.ac.uk/~tayl0010/poly...-inputter.html

Pour le code html des caractères, je devrais les trouver sans trop de difficultés, et les rajouter à cette discussion. Ce qui permettra d'avoir un script complet et performant quant au but poursuivi. ça pourra certainement servir à d'autres !
Et je pourrais bientôt mettre un joli "résolu".

Merci encore !
13/03/2011, 18h05
SpaceFrog

tu veux dire associer une lettre grecque à chaque touche de ton clavier ?
Il faudra surveille le keypress ou keydown en recupérer le keycode et retourner la lettre associée, c'est jouable.
14/03/2011, 09h34
Loceka

les &#... sont de toute façon le code unicode des caractères.

Sinon pour te casser encore moins la tête tu peux même faire une boucle pour remplir automatiquement les lettres (genre afficher tous les caractères entre 945 (03B1) et 969 (03C9)). Tu peux trouver les codes caractère sur wikipédia.

Après dans le code du lien que tu as donné tu as un exemple de récupération des événements clavier, y'a même les méta keys (shift, ...). Après il suffit de lier une action à la touche désirée (genre écrire 'alpha' quand on tape 'a'). Là encore il est à mon avis possible d'utiliser des boucles pour pas se farcir les 26*2 lettres, y'a juste pour les combinaisons (trémas, accents, ...) qu'il sera probablement nécessaire de faire du cas par cas.
14/03/2011, 09h38
SpaceFrog

Ben si le codes se suivent ... suffirait d'ajouter le différentiel.

ça y est, je l'ai retrouvé ! un ami m'avait fait un script pour faire cette substitution de touche, mais uniquement pour les lettre non-accentuées.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Grec to unicode</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="CONTENT-LANGUAGE" content="French" /> 
 
<style type="text/css">
body{
background-color:#C3E2D4;
font-family:'Times';
font-size:30px;
}
 
input{
border-color:#AFC5FF;
background-color:#A0D5C9;
}
 
textarea{
border-color:#AFC5FF;
background-color:#A0D5C9;
font-family:'Courier New';
font-size:20px;
}
 
td{
color:#000000;
text-align:center;
}
 
.titre{
color:#000000;
text-align:center;
font-weight: bold;
background-color:#A0D5C9;
}
</style>
 
<script language="javascript" type="text/javascript">
function remplace(lettre)
{
var lettre;
var corresp;
var longueur;
var longueur2;
var ssespace;
var val;
lettre = document.getElementById('brut').value;
 
switch (lettre)
{
case "0":
corresp = "0";
break;
case "1":
corresp = "1";
break;
case "2":
corresp = "2";
break;
case "3":
corresp = "3";
break;
case "4":
corresp = "4";
break;
case "5":
corresp = "5";
break;
case "6":
corresp = "6";
break;
case "7":
corresp = "7";
break;
case "8":
corresp = "8";
break;
case "9":
corresp = "9";
break;
case " ":
corresp = " ";
break;
 
case "(":
corresp = " (";
break;
case "-":
corresp = " - ";
break;
case ")":
corresp = ") ";
break;
case ",":
corresp = ", ";
break;
 
case "a":
corresp = "&alpha;";
break;
case "z":
corresp = "&zeta;";
break;
case "e":
corresp = "&epsilon;";
break;
case "r":
corresp = "&rho;"; 
break;
case "t":
corresp = "&tau;";
break;
case "y":
corresp = "&psi;"; 
break;
case "u":
corresp = "&upsilon;";
break;
case "i":
corresp = "&iota;";
break;
case "o":
corresp = "&omicron;";
break;
case "p":
corresp = "&pi;";
break;
 
case "q":
corresp = "&theta;";
break;
case "s":
corresp = "&sigma;";
break;
case "d":
corresp = "&delta;";
break;
case "f":
corresp = "&phi;";
break;
case "g":
corresp = "&gamma;"; 
break;
case "h":
corresp = "&eta;"; 
break;
case "j":
corresp = "&sigmaf;";
break;
case "k":
corresp = "&kappa;";
break;
case "l":
corresp = "&lambda;";
break;
case "m":
corresp = "&mu;";
break;
 
case "w":
corresp = "&omega;";
break;
case "x":
corresp = "&chi;";
break;
case "c":
corresp = "&xi;"; 
break;
case "b":
corresp = "&beta;";
break;
case "n":
corresp = "&nu;";
break;
 
case "A":
corresp = "&Alpha;";
break;
case "Z":
corresp = "&Zeta;";
break;
case "E":
corresp = "&Epsilon;";
break;
case "R":
corresp = "&Rho;";
break;
case "T":
corresp = "&Tau;"; 
break;
case "Y":
corresp = "&Psi;";
break;
case "U":
corresp = "&Upsilon;";
break;
case "I":
corresp = "&Iota;";
break;
case "O":
corresp = "&Omicron;";
break;
case "P":
corresp = "&Pi;";
break;
 
case "Q":
corresp = "&Theta;";
break;
case "S":
corresp = "&Sigma;";
break;
case "D":
corresp = "&Delta;";
break;
case "F":
corresp = "&Phi;";
break;
case "G":
corresp = "&Gamma;";
break;
case "H":
corresp = "&Eta;";
break;
case "K":
corresp = "&Kappa;";
break;
case "L":
corresp = "&Lambda;";
break;
case "M":
corresp = "&Mu;";
break;
 
case "W":
corresp = "&Omega;";
break;
case "X":
corresp = "&Chi;";
break;
case "C":
corresp = "&Xi;"; 
break;
case "B":
corresp = "&Beta;";
break;
case "N":
corresp = "&Nu;";
break;
 
 
 
 
 
default:
corresp = null;
break;
}
 
if(corresp == "1" || corresp == "2" || corresp == "3" || corresp == "4" || corresp == "5" || corresp == "6" || corresp == "7" || corresp == "8" || corresp == "9" || corresp == "0"){
document.getElementById('lilypond').value = document.getElementById('lilypond').value + corresp;
}
else if(document.getElementById('lilypond').value == "" && corresp != null){
document.getElementById('lilypond').value = corresp;
}
else {
val = "";
longueur = 0;
ssespace= "";
val = escape(document.getElementById('lilypond').value);
longueur = val.length;
longueur2 = longueur-3;
ssespace = val.substr(longueur2,3);
 
if(ssespace == "%0A" && corresp != null){
document.getElementById('lilypond').value = unescape(val) + corresp;
}
else if(corresp != null){
document.getElementById('lilypond').value = document.getElementById('lilypond').value + corresp;
}
}
document.getElementById('brut').value = "";
var sc=document.getElementById("lilypond");
document.getElementById("grec").innerHTML  = document.getElementById("lilypond").value;
sc.scrollTop = sc.scrollHeight;
}
 
function enter(){
document.getElementById('lilypond').value = document.getElementById('lilypond').value + "\n";
var sc=document.getElementById("lilypond");
sc.scrollTop = sc.scrollHeight;
}
 
</script>
 
   </head>
   <body>
 
<div align="center">
<span style="font-weight:bold">Grec to Unicode (sans accent)</span><br /><br />
Ecrire ici : <input type="text" name="brut" id="brut" onKeyUp="if (event.keyCode == 13){enter()}else{remplace(document.getElementById('brut').value)}" /><br /><br />
<textarea cols="90" rows="8" name="lilypond" id="lilypond" ></textarea><br /><br />
<div id="grec" name="grec"  style="height:45px; width:500px; border:1px solid #687597"></div><br /><br />
 
<table width=90% border=3 cellspading=1 style="font-size:30px;">
    <tr>
    	<td colspan="44" class="titre">CORRESPONDANCES</td>
    </tr>
 
	<tr>
    	<td>&alpha;</td>
        <td>&beta;</td>
        <td>&gamma;</td>
        <td>&delta;</td>
        <td>&epsilon;</td>
        <td>&zeta;</td>
        <td>&eta;</td>
        <td>&theta;</td>
        <td>&iota;</td>
        <td>&kappa;</td>
        <td>&lambda;</td>
        <td>&mu;</td>
        <td>&nu;</td>
        <td>&xi;</td>
        <td>&omicron;</td>
        <td>&pi;</td>
        <td>&rho;</td>
        <td>&sigma;</td>
        <td>&sigmaf;</td>
        <td>&tau;</td>
        <td>&upsilon;</td>
        <td>&phi;</td>
        <td>&chi;</td>
        <td>&psi;</td>
        <td>&omega;</td>
    </tr>
    <tr>
    	<td>a</td>
        <td>b</td>
        <td>g</td>
        <td>d</td>
        <td>e</td>
        <td>z</td>
        <td>h</td>
        <td>q</td>
        <td>i</td>
        <td>k</td>
        <td>l</td>
        <td>m</td>
        <td>n</td>
        <td>c</td>
        <td>o</td>
        <td>p</td>
        <td>r</td>
        <td>s</td>
        <td>j</td>
        <td>t</td>
        <td>u</td>
        <td>f</td>
        <td>x</td>
        <td>f</td>
        <td>w</td>
    </tr>
</table>
 
<br />
<input type="button" value="R&eacute;initialiser les cadres" onClick="javascript:document.getElementById('lilypond').value = ''; document.getElementById('brut').value = '';" />
 
 
 
   </body>
</html>

Est-ce qu'il n'y aurait pas un moyen de "fondre" les 2 scripts ? :P

@ Loceka : "les &#... sont de toute façon le code unicode des caractères."
caractères qui génèrent des anomalies dans d'affichage de mon navigateur (que je ne rencontre que sous Ubuntu et non sous Windows). En effet, selon la police utilisée, les lettres grecques accentuées sont reconnaissables, soit, mais grossières.

Vos idées sont très intéressantes. Mais pour moi qui n'en suis qu'au stade de la "pataugeoire javascript", je suis complètement dépassé. Quant au grand bassin, faudra attendre encore un peu que je sache nager. :cry:

Merci pour vos lumières.