Javascript
introduzione

Javascript è un linguaggio di programmazione.

Un programma è:

  • Una serie di istruzioni che il computer è in grado di eseguire
  • Che elaborano DATI (cioè informazione correttamente codificate)
  • Per risolvere un problema
  • Un computer per sua natura si limita ad eseguire le istruzioni "macchina", una serie limitata di istruzioni che la macchia, appunto, è in grado di eseguire direttamente senza l'aiuto di altro software.
  • Quando eseguo un software il computer in un secondo esegue più di un miliardo di queste semplici istruzioni

Linguaggi di programmazione

  • Sarebbe impossibile per un programmatore gestire una tale complessità maneggiando direttamente i miliardi di istruzioni macchina necessari
  • Per questo i programmatori hanno inventato i linguaggi di programmazione
  • Un linguaggio di programmazione è un linguaggio formale dotato di una sintassi ben definita che è in grado di descrivere in una forma più vicina al linguaggio naturale il processo che il computer deve eseguire e che può essere tradotto in una serie di istruzioni macchina che il computer può eseguire.
  • A seconda del metodo utilizzato per tradurre il testo delle istruzioni in linguaggio macchina vengono suddivisi in due categorie: compilati (e semi compilati) e interpretati.
Linguaggi compilati
  • Il codice sorgente viene elaborato da un programma specializzato (compilatore) che lo trasforma in codice macchina e viene impacchettato in un particolare file detto eseguibile che il computer è in grado di eseguire senza bisogno di altro software;
  • Il file eseguibile così ottenuto può essere utilizzato solo con il sistema operativo per cui è stato compilato.
Java
  • Il sorgente viene sempre compilato (il codice viene tradotto da uno specifico programma in istruzioni eseguibili), ma la macchina di riferimento non è un sistema operativo specifico (Windows, Macintosh o Linux) ma una macchina virtuale.
  • Il computer virtuale Java può essere installato su dispositivi diversi (pc con vari sistemi operativi, dispositivi mobili, ecc.) consentendo allo stesso programma scritto in Java di funzionare in tutti gli ambienti senza modifiche.
Javascript
  • Script in inglese significa "copione" o "sceneggiatura",.
  • Il browser legge una riga, la interpreta e la esegue, poi passa alla successiva e fa la stessa cosa, e così di seguito fino alla fine dello script.
  • Javascript è un linguaggio interpretato
  • L’interprete utilizzato per eseguirlo è il browser

Cosa può fare Javascript

Modificare il contenuto HTML

  • Il metodo  document.getElementById() è un metodo JavaScript che serve ad identificare un elemento HTML con un determinato id.
  • In questo esempio viene usato per trovare l'elemento HTML con id="demo" e cambiare il contenuto dell'elemento ( innerHTML ) inserendo la data corrente.
  • Il codice JavaScript viene eseguito quando viene premuto un pulsante. Clicca Result per vedere il risultato e RERUN per ricaricare.

See the Pen Modifica il contenuto HTML by Bruno Migliaretti (@magicbruno) on CodePen.

Cambiare gli attributi html

  • In questo esempio il metodo document.getElementById() viene utilizzato per modificare il valore dell'attributo src dell'elemento <img> con id="myimage". Clicca Result per vedere il risultato e RERUN per ricaricare.

See the Pen Cambia il valore di un attributo by Bruno Migliaretti (@magicbruno) on CodePen.

Cambiare gli stili css

  • In questo esempio il metodo document.getElementById() viene utilizzato per modificare il corpo del carattere dell'elemento <p> con id="demo". Clicca Result per vedere il risultato e RERUN per ricaricare.

See the Pen Cambia stile CSS by Bruno Migliaretti (@magicbruno) on CodePen.

Mostrare e nascondere

  • In questo esempio il metodo document.getElementById() viene utilizzato per mostrare e nascondere l'elemento <img> con id="myimage". Clicca Result per vedere il risultato e RERUN per ricaricare.

See the Pen Mostrare e nascondere by Bruno Migliaretti (@magicbruno) on CodePen.

Come inserire Javascript in una pagina web

Il Tag <script>

  • Il codice JavaScript va inserito tra l'apertura e la chiusura del tag <script> così:
<script> 
   alert("ciao"); 
</script>
  • Possiamo inserire il codice JavaScript in qualsiasi parte del documento (nella head oppure nel body) a seconda delle nostre esigenze.

File esterno

  • Quando si scrive codice di una certa lunghezza e/o che potrebbe essere ripetuto su più pagine
  • Quando si utilizza una libreria Javascript esistente
  • Per caricare Javascript da un file esterno si usa l'attributo src applicandolo all'elemento <script>
<script src="js/main.js"></script>

Gestione di un evento prodotto da un elemento HTML

  • Javascript è fatto principalmente per rispondere a degli eventi, come quello di un utente che clicca un elemento della pagina
  • Si può associare direttamente del codice javascript all'evento di un elemento usando appositi attributi come onclick, onload, ecc:
<button onclick="alert('Ciao!')">Cliccami !</button>

<noscript>

  • All'interno del tag <noscript> può essere utilizzata la sintassi HTML.
  • Il contenuto viene visualizzato solo se il browser non supporta Javascript o Javascript è disabilitato per scelta dell'utente.
<noscript> 
  <div> 
    <h3>
      Per visualizzare correttamente il contenuto della pagina occorre avere JavaScript abilitato
    </h3> 
  </div> 
</noscript>

Output

  •  Javascript è un linguaggio di programmazione e serve a scrivere programmi che il browser esegue. Ogni linguaggio di programmazione ha i sui canali di output.
  • Il ciclo di vita di un programma Javascript è strettamente legato alla pagina web che lo carica. I suoi canali di comunicazione son quindi legati alla pagina web:
    • Scrivere il contenuto di un elemento HTML della pagina, utilizzando innerHTML o modificarne le caratteristiche.
    • Scrivere il documento stesso utilizzando document.write().
  • e all'interazione diretta con il browser
    • Scrivere sulla finestra di alert fornita dal browser, utilizzando window.alert() .
    • Scrivere sulla console del browser, utilizzando console.log() .

document.write()

  • Il metodo document.write() viene usato per creare frammenti di HTML nel documento mentre viene caricato (facendone dipendere in contenuto, ad esempio, da determinate condizioni).
  • Se si usa quando il documento è caricato l'intero contenuto viene sovrascritto.
  • Clicca Result per vedere il risultato e RERUN per ricaricare.

See the Pen document.write by Bruno Migliaretti (@magicbruno) on CodePen.

window.alert()

  • Il metodo window.alert() consente di aprire una piccola pop-up e inviare un messaggio all'utente. 

See the Pen window.alert by Bruno Migliaretti (@magicbruno) on CodePen.

console.log()

In fase di debug (correzione degli errori di un programma) si può utilizzare cosole.log() che scrive un messaggio sulla console del browser.

<h1>Console</h1> 
   <button onclick="console.log('Bottone cliccato!')">
     Cliccami! 
  </button> 
<script> console.log("Docuemnto caricato!"); </script>