Sezione 08 / 08
Come integrare LINE direttamente in una pagina HTML: scrivere su elementi, leggere input, reagire a click e usare localStorage — tutto senza scrivere JavaScript.
LINE-DOM è un layer JavaScript che permette di usare LINE come linguaggio per controllare il DOM di una pagina HTML. Si include con un singolo file line-dom.js.
Una volta incluso, si scrive codice LINE direttamente dentro tag <script> con type="text/line". LINE-DOM si occupa di compilare ed eseguire il codice, collegandolo agli elementi HTML.
<script type="text/line"> va solo codice LINE. Zero JavaScript inline. Tutta la logica di bridge sta in line-dom.js.
Il tag <script type="text/line"> accetta attributi speciali che controllano quando e come viene eseguito:
| 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 in fondo |
| counter="id" | Inietta la variabile speciale __N__ con il numero di esecuzioni, e scrive il contatore nell'elemento indicato |
| body-class="id" | Osserva l'elemento indicato e applica il suo testo come className del body |
Per inviare testo a un elemento HTML si racchiude il codice LINE tra tag con l'id dell'elemento:
| Sintassi | Effetto |
|---|---|
<id>TALK testo</id> | Sostituisce o aggiunge il testo nell'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 |
Il carattere \n dentro i tag DOM diventa automaticamente un <br> nell'HTML (non vale per gli input).
LINE-DOM inietta automaticamente il valore di ogni <input>, <textarea> e <select> che ha un id come variabile LINE prima di ogni esecuzione.
Basta che l'elemento esista nella pagina — il valore è già disponibile con @id:
Non serve dichiarare nome — LINE-DOM lo prepende automaticamente prima di eseguire il codice.
Gli input hidden funzionano come memoria persistente tra un'esecuzione e l'altra: il loro valore viene iniettato ad ogni run, quindi possono conservare lo stato.
È possibile registrare click su elementi HTML direttamente nella sintassi LINE, senza uscire dallo script:
| Sintassi | Significato |
|---|---|
THEN:btn-id | Il blocco THEN viene eseguito al click su quell'id |
GO:btn-id @{cond} @{...} | GO inline eseguito al click |
<id> dentro un corpo @{...} inline non funzionano — il preprocessore non li gestisce in quel contesto. Per blocchi che scrivono su elementi, usa sempre un THEN con nome.
LINE-DOM aggiunge il supporto al localStorage del browser tramite un tag speciale. I dati sopravvivono al ricaricamento della pagina.
Salva valore nel localStorage con chiave line_nomevar. Ad ogni esecuzione successiva, LINE-DOM inietta automaticamente il valore salvato come variabile LINE — esattamente come fa con gli input HTML.
L'attributo body-class su uno script 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.
6 domande · serve l'80% per completare il manuale
Domanda 01
Come si specifica che uno script LINE deve essere eseguito al caricamento della pagina?
Domanda 02 — Completamento
Scrivi il tag che appende il testo "fatto" all'elemento con id log.
Domanda 03
Un <input id="eta"> è presente nella pagina. Come si usa il suo valore nel codice LINE?
Domanda 04
Cosa fa <ls>punteggio = 100</ls>?
Domanda 05 — Completamento
Scrivi un blocco THEN che si attiva al click su btn-reset e scrive "0" nell'elemento score.
Domanda 06
A cosa serve l'attributo body-class="id" su uno script LINE-DOM?