JavascriptGiorgio Piccardo

Web Tripartito

Web TripartitoHTML cosa devo significare? (Struttura)

CSS come devo apparire? (Rappresentazione)

JS cosa devo significare? (Comportamento)

ComportamentoDefinire come la pagina si deve comportare a seguito del verificarsi di un evento.

Interazione sempre più spinta con l'utente.

Dinamicità delle pagine web.

JavascriptJavaScript è uno dei linguaggi di programmazione più usati al mondo.

Secondo un sondaggio effettuato da Stack Overflow (una delle comunità di sviluppo più conosciute al mondo) nel 2018 Javascript è il linguaggio di programmazione più diffuso e popolare al mondo.

E’ il linguaggio nativo per la programmazione web (non è possibile farne a meno).

Tipo di dato

Numeri : interi,reali...

Stringhe : "ciao"

Booleani (vero o falso) .

Oggetti

Un oggetto è una collezione non ordinata di proprietà, ciascuna formata da una coppia (nome,valore).

Dato che il nome di una proprietà è sempre una stringa, gli oggetti di fatto sono delle mappe (o dizionari) di tipo stringa->valore.

Gli oggetti sono mutabili e manipolabili soltanto per riferimento

Oggetti

Le proprietà di un oggetto possono essere lette o modificate attraverso l’operatore . (dot) oppure [ ].

Docente.nome = “Giorgio” Docente[“nome”] = “Giorgio”

Che differenza c’è tra le due modalità di accesso agli oggetti?

Oggetti

Docente.nome = “Giorgio”

“nome” è un identificativo che deve essere definito a priori, pertanto questa notazione permette di avere un numero finito di proprietà per un oggetto.

Docente[“nome”] = “Giorgio”

La seconda opzione permette di utilizzare gli oggetti come array associativi, richiedendo come chiave una stringa o qualsiasi espressione castabile a stringa.

Oggetti

Possono essere creati in 3 modi:

Utilizzando un’espressione letteralevar book = { “title”:”Javascript”, pages:200 }

Utilizzando la keyword new, seguita da un’invocazione a funzione chiamata costruttorevar b = new Date();

Invocando la funzione Object.createvar o = Object.create( {x:10, y:20} )

Strutture di ControlloIf - then - else

if (condizione) { fai qualcosa}else { fai qualcos’altro}

Esempio

if ( 3 > 2 ) {console.log(“ 3 è maggiore di 2”)}else {console.log(“La matematica è impazzita”)}

FunzioniDefinire una funzione :

function somma( x , y ) { return x + y}

Invocare una funzione :

console.log(somma( 3 , 2 )) // stamperà 5

Cos’è il DOM?Il DOM (Document Object Model) è una struttura dati ad albero che rappresenta il contenuto di un documento strutturato.

In particolare tale modello è utilizzato nei browser per rappresentare il contenuto delle pagine web.

Nel browser viene fornito l'oggetto document, utilizzabile in JavaScript che corrisponde alla radice del DOM, ovvero il nodo in cima all'albero o, vedendola in un altro modo, l'elemento che contiene tutto e non è contenuto da nulla.

Cos’è il DOM?

Manipolare il DOM

Esplorare il documento.

Trovare un elemento specifico.

Modificare un elemento.

Creare elementi.

Il ruolo di Javascript

Supporta tutte le strutture DOM di HTML.

Con Javascript è possibile eseguire alcune operazioni di manipolazione del DOM (quindi della pagina web).

Come includere JavascriptPer includere codice javascript all’interno di una pagina web si utilizza il tag <script>

Per importare un file javascript esterno si inserisce nell’header :<script type="text/javascript" src="file_javascript.js"></script>

Creare elementi - Poesiavar title = document.createElement(“h2”)title.innerText = “Soldati”var text = document.createElement(“p”)text.innerText = “Si sta come d’Autunno sugli alberi le foglie”

document.body.appendChild(title)document.body.appendChild(text)

Cambiare il contenuto Uno dei metodi di JS è getElementById() che permette di selezionare un elemento utilizzando il suo ID.

E’ possibile modificare il contenuto dell’elemento utilizzando la proprietà innerHTML. document.getElementById("prova").innerHTML = "Prova"

Cambiare un attributoJS permette di trovare un elemento e di cambiarne gli attributi.

document.getElementById('vecchia_immagine').src='nuova_immagine.jpeg'

Cambiare il CSSE’ possibile modificare il CSS dell’elemento utilizzando la proprietà style.

document.getElementById(‘nome_della_classe).style.color=’red’

Gli Eventi

Per alcuni tipi di interazione con il programma, non possiamo determinare a priori l'ordine di avvenimento. Si pensi all'utilizzo del mouse e della tastiera o anche il sopraggiungere di dati da un server esterno.

Gli EventiUn evento HTML può essere qualcosa scatenato dal browser o dall’utente.

Alcuni esempi :

Il browser ha caricato la pagina webUn bottone è stato cliccato

Gli EventiE’ possibile implementare la gestione degli eventi direttamente nel codice HTML :

<button onclick="mostra_data()"> Che data è? </button>// Attiva la funzione mostra_data()

Gli EventiE’ possibile implementare la gestione degli eventi dal file javascript.

In JavaScript è possibile definire dei gestori degli eventi, ovvero funzioni che vengono eseguite al verificarsi di un evento.

element.addEventListener(“click”, function() { console.log(‘click’)}

Il primo argomento indica il tipo di evento da gestire, in questo caso il click del mouse.

Grazie