Usare LINE per controllare il DOM di una pagina HTML senza scrivere JavaScript.
LINE-DOM è un layer JavaScript che permette di usare LINE come linguaggio per controllare il DOM di una pagina HTML, senza scrivere JavaScript.
<!-- Interprete LINE -->
<script src="interpreter.js"></script>
<!-- Bridge DOM -->
<script src="line-dom.js"></script><script type="text/line"> va solo codice LINE. Zero JavaScript inline.<script type="text/line">| Attributo | Effetto |
|---|---|
trigger="id" | Esegue il codice al click sull'elemento con quell'id |
autorun | Esegue il codice al caricamento della pagina |
replace | Sovrascrive il contenuto dell'elemento target invece di aggiungerlo |
counter="id" | Inietta la variabile speciale __N__ e la scrive nell'elemento indicato |
body-class="id" | Osserva l'elemento e applica il suo testo come className del body |
onclick="btnId:label,…" | Collega il click di #btnId al blocco label |
<script type="text/line" trigger="btn-invia" replace>
risposta = Hai cliccato!
<risultato>TALK @risposta</risultato>
</script>
<button id="btn-invia">Invia</button>
<div id="risultato"></div>Si racchiude il codice LINE tra tag con l'id dell'elemento di destinazione:
| Sintassi | Effetto |
|---|---|
<id>TALK testo</id> | Sostituisce il contenuto dell'elemento |
<id=after>TALK testo</id> | Appende in fondo al contenuto esistente |
<id=before>TALK testo</id> | Inserisce all'inizio del contenuto esistente |
<.classe>TALK testo</.classe> | Scrive su tutti gli elementi con quella classe CSS |
<.classe=after>TALK testo</.classe> | Appende a tutti gli elementi con quella classe |
Il carattere \n dentro i tag DOM diventa automaticamente un <br> nell'HTML (non vale per gli input).
<p id="saluto"></p>
<script type="text/line" trigger="btn" replace>
<saluto>TALK Ciao, mondo!</saluto>
</script>LINE-DOM inietta automaticamente il valore di ogni <input>, <textarea> e <select> che ha un id come variabile LINE prima di ogni esecuzione. Non serve nessuna dichiarazione.
<input id="nome" type="text">
<button id="btn">Saluta</button>
<div id="output"></div>
<script type="text/line" trigger="btn" replace>
<output>TALK Ciao, @nome!</output>
</script>Gli input hidden funzionano come memoria persistente tra un'esecuzione e l'altra.
Si può registrare il click su un elemento direttamente nella sintassi LINE:
| Sintassi | Significato |
|---|---|
THEN:btn-id nomeblocco | Il blocco THEN viene eseguito al click su quell'id |
GO:btn-id @{cond} @{…} | GO inline eseguito al click |
<script type="text/line" autorun>
THEN:btn-maiuscolo
<output>TALK CIAO</output>
THEND
</script><id> dentro un corpo @{...} inline non funzionano. Per blocchi che scrivono su elementi, usa sempre un THEN con nome.<ls>LINE-DOM supporta la persistenza dei dati tra ricaricamenti tramite un tag speciale:
<ls>nomevar = valore</ls>Salva valore nel localStorage con chiave line_nomevar. Ad ogni esecuzione successiva, il valore viene iniettato automaticamente come variabile LINE.
<input id="nome">
<button id="btn-salva">Salva</button>
<div id="benvenuto"></div>
<script type="text/line" autorun>
<benvenuto>TALK Ciao, @nome!</benvenuto>
</script>
<script type="text/line" trigger="btn-salva">
<ls>nome = @nome</ls>
</script>body-classL'attributo body-class crea un MutationObserver: osserva l'elemento indicato e applica automaticamente il suo testo come classe del body. Combinato con variabili CSS, permette di cambiare tema senza JavaScript.
<span id="tema" hidden></span>
<script type="text/line" trigger="btn" replace body-class="tema">
<tema>TALK dark</tema>
</script>body.dark { --bg: #111; --fg: #eee; }
body.light { --bg: #fff; --fg: #111; }Ogni volta che il codice viene eseguito (ad esempio al click di un trigger), l'intero script viene ri-eseguito dall'inizio. Questo significa che le variabili si resettano a ogni esecuzione. Per la persistenza dello stato usare <ls> (localStorage) o input hidden.