-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathLexeme.htm
142 lines (131 loc) · 4.16 KB
/
Lexeme.htm
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
<html>
<head>
<title>Lexèmes</title>
<style>
CODE, PRE {
background: #FFE;
border: 1px solid #DDD;
box-shadow: 0 0 .5em #ccc;
color: #000;
font-weight: bold;
padding: 0 .5em;
}
PRE {
font-size: 1.2em;
padding: 1em;
}
SECTION {
margin: .5em;
}
</style>
</head>
<body>
<a href="index.htm">Index</a>
<h1>Lexèmes et structure de données</h1>
<p>Les lexèmes sont des unités lexicales ou syntaxiques (mots, phrases...).</p>
<p>
Il faut pouvoir former avec les lexèmes un <b>arbre de données</b>.<br>
Pour cela, la fonction globale <code>Lexeme</code> nous retourne un objet <b>noeud</b> pouvant réaliser cette tâche.
</p>
<p><b>NB</b>: <cite>
La création de ces noeuds et les opérations réalisées dessus <a href="Lexeme.comparaison.htm">prennent du temps</a>.<br>
Une structure adéquate nous permet de gagner du temps !
</cite></p>
<section><h2>Syntaxe</h2>
<pre>var oNode = Lexeme ( oLexeme )</pre>
</section>
<section><h2>Argument</h2>
<p>Elle prend en argument l'objet <code>oLexeme</code> issu d'une analyse.</p>
<p>Pour l'analyse lexicale, il est de la forme :</p>
<pre>
oLexeme={
token:'INCREMENT_OPE', // nom du token (renommé si défini)
value:'++', // valeur du token, NB: la valeur d'un parent est égale à ''
css:'operator numeric', // classes css associées
rule:'JS', // Syntaxe qui à créé le lexème
// Position dans la source
index:12, // index du premier caractère
lineStart:2, // ligne du premier caractère
lineEnd:2, // ligne du dernier caractère
// Propriétés avancées
bParent:false, // Indique si il s'agit d'un lexème parent
bParentLimit:false, // Indique si il s'agit d'une limite d'un parent
bRescan:false // Indique si il s'agit d'un lexème parent issu d'un double scannage
}
</pre>
<p>Pour l'analyse syntaxique il est à définir...</p>
</section>
<section><h2>Valeur retournée</h2>
<p>
Elle retourne un objet noeud pouvant former une structure arborescente.<br>
A cet objet est ajouté l'attribut <code>oValue</code>, affecté avec la valeur <code>oLexeme</code>: <code>oNode.oValue === oLexeme</code>.
</p>
<p>L'objet retourné est au choix :</p>
<ul>
<li><b>Un HTMLElement</b>
<ul>
<li style="color:green;">Permet d'afficher facilement le résultat de l'analyse.</li>
<li style="color:green;">Pas de fichier supplémentaire à charger.</li>
<li>Pour l'instant mon éditeur de texte est plus rapide avec !</li>
</ul><br></li>
<li><b>Un objet JavaScript implémentant l'interface des HTMLElement</b>
<ul>
<li style="color:red;">Pas forcement plus performant: création plus rapide, méthodes plus lentes... .</li>
</ul></li>
</ul>
<section><h3>Interface requise</h3>
<ul>
<li>appendChild ( eNode )</li>
<li>hasChildNodes ()</li>
<li>insertBefore ( eNode, eNextSibling )</li>
<li>removeChild ( eChild )</li>
<li>firstChild</li>
<li>lastChild</li>
<li>nextSibling</li>
<li>parentNode</li>
<li>previousSibling</li>
<li>... voir aussi getElementsByTagName ( sTagName )</li>
</ul>
</section>
</section>
<section><h2>Exemple de fonction</h2>
<pre>
var Lexeme =function( o ){
var m = document.createElement( o.token )
m.oValue = o
// Stylisation de l'élément
m.className = o.css
// Affichage en info bulle du lexème
m.title = JSON.stringify( o, null, '\n' )
// Contenu texte de l'élément
if( o.value ) m.innerHTML = o.value
return m
}
</pre>
</section>
<script src="js/framework.js"></script>
<script src="js/lexer.class.js"></script>
<script src="js/lexer.automaton.js"></script>
<script src="js/lexer.automaton.modules.js"></script>
<link rel="stylesheet" type="text/css" href="css/syntaxes.css">
<script>
function colorize ( e ){
var sText = e.innerHTML
e.innerHTML = ''
e.appendChild( AutomatonLexer( sText, 'JS' ))
}
var Lexeme =function( o ){
var m = document.createElement( o.token )
m.oValue = o
m.className = o.css
m.title = o.token
if( o.value ) m.innerHTML = o.value
return m
}
var aPRE = document.getElementsByTagName('PRE')
for(var i=0, ni=aPRE.length; i<ni; i++ ) colorize( aPRE.item(i))
var aCODE = document.getElementsByTagName('CODE')
for(var i=0, ni=aCODE.length; i<ni; i++ ) colorize( aCODE.item(i))
</script>
</body>
</html>