{ Il mago di nome Javascript }

il metodo innerHTML

Oggi sono in vena di fare due chiacchiere… Come spesso mi accade durante le mie giornate, mi "stacco" dal reale per immergermi nei pensieri impalpabili delle mie passioni, il mondo dei codici e della programmazione web…

Tanti tanti anni fa mi accostai inevitabilmente, per mia natura curioso di come funzionasse questo strano "mondo", ai primi rudimenti tecnici delle pagine web. Da quel giorno ad oggi sono trascorsi la bellezza di circa 25 anni! Ma l'ossatura delle pagine web ancora è la medesima o quasi: il linguaggio HTML che è acronimo di HyperText Markup Language ("Linguaggio di contrassegno per gli Ipertesti"), paroloni ma in breve è un linguaggio atto a idicare e disporre gli elementi che compongono la pagina web.

Per elementi intendo dal testo alla tabella o form per invio dati. Purtroppo mi accorgo in breve tempo che conoscere questo linguaggio è un po' restrittivo, per fare un esempio, avere una penna di colore prescelto e un quaderno sul quale scrivere ma non avere idee e vocabolario...

Traducendo il mio esempio, con il Markup quindi l’HTML possiamo iniziare con il decidere di "scrivere" su una pagina web avendo a disposizione gli elementi per scegliere la "forma" e colore del testo e come disporlo in essa. Questi vengono chiamati TAG.

Ora arriviamo al punto d'interesse! Ma come faccio a fare… (qualsiasi cosa, qualsiasi azione) Dalla domanda viene insita la risposta, ci vuole ben altro oltre l'HTML.

Quindi per far funzionare le cose in una pagina web bisogna interagire con molti linguaggi ed uno, oggetto di questo articolo è proprio da definirsi un "mago": il linguaggio JavaScript.

Questo è uno dei linguaggi più avvezzo al mondo e il suo funzionamento è legato al browser sul nostro computer, pertanto viene eseguito direttamente lato "client-side" e può essere utilizzato sia per stabilire il design che eseguire vere e proprie operazioni, semplici e complesse. Direi che può assumere quasi il controllo totale delle pagine web.

Lo definisco "mago” in quanto, esegue operazioni in background (nascoste) per restituire risultati visibili a seconda del comportamento dell'utilizzatore. A questo punto è doveroso fare un piccolo esempio per capire meglio, in seguito spiego in breve il funzionamento.

Prova a passare il mouse sulla quadrato rosso?

Banale ma sorprendente… Chi conosce di più i linguaggi di programmazione avrà già intuito che possiamo capire la posizione del mouse, se passa su alcune zone o meno… Quindi è possibile studiare il comportamento degli utenti, ma non solo, altro piccolo esempio.

Prova a fare click sul pulsante?

Campo non editabile:

Anche qui con molta semplicità facciamo comparire un "campo" editabile che prima non lo era! Bhe, svelato il segreto non è magia si chiama JavaScript, linguaggio di scripting client-side per pagine web e web app. L'introduzione di questo articolo è basata sul linguaggio HTML non a caso, in realtà c'è una relazione storica tra i due linguaggi.

JavaScript è stato inventato da Netscape nel 1995 con il "primitivo" nome di LiveScript e dava la possibilità di modificare le pagine HTML in maniera dinamica basata sull'interazione dell'utente con il browser (lato client), tutto questo avviene quindi estromettendo il server. Dal connubio tra HTML e javascript veniva coniato il nome: DHTML (Dynamic HTML).

Ora sveliamo la piccola operazione di "magia", il metodo innerHTML il quale ci permette di creare nuovi elementi, quindi elementi non esistenti, nella pagina:

Codice HTML:
<button class="button" onclick="magia()">Magia</button>
<!-- Un semplice pulsante con il comando che richiama la funzione javascript -->
<span id="demo"></span>
<!-- questo span con id demo, verrà popolato al click-->

Come notate all'interno del pulsante c'è onclick="magia()" che al "click" va a chiamare la funzione magia() come indicata di seguito

Codice:
<script type="text/javascript">
function magia(){
document.getElementById("demo").innerHTML = '<h1 class="red">MAGIA!</h1>'; 
}
</script>

Dalla riga di codice si evince chiaramente il funzionamento... Sta ora a voi l'immaginazione, questo è solo l'inizio delle "magie" javascript che raccomando di non confondere mai con Java, quest’ultimo crea applicazioni eseguibili su browser o virtual machine, mentre il codice JavaScript è eseguibile unicamente su browser.

Siti Web

Da 20 anni Filomeni Maurizio si dedica con passione e tenacia al mondo del web, le sue realizzazioni sono sempre all'avanguardia perchè la sua passione divenuta professione è al passo con i tempi e sempre in fase di studio e ricerca. Grazie ai suoi collaboratori riesce a dedicare il maggior tempo alla programmazione back-end rendendo le applicazioni molto precise e sofisticate. Dopo un attento monitoraggio, Siti Web diventa Partner Partnership di Aruba Group S.p.A

Newsletter & Info

Iscriviti alla nostra newsletter per ricevere aggiornamenti e novità, non riceverai mail indesiderate da parte nostra, odiamo lo spam!


Ti Piace Siti Web?