Javascript
HTML per definire il contenuto delle pagine web CSS per specificare il layout delle pagine web JavaScript per definire il comportamento delle pagine web Javascript: linguaggio di programmazione
JavaScript è il linguaggio di programmazione per HTML – Accedere agli elementi HTML – Cambiare il valore di un attributo HTML – Cambiare gli stili – Rimuovere/Aggiungere elementi e attributi HTML – Gestire eventi in una pagina HTML Javascript: cosa possiamo fare?
DOM standard per l’accesso ai documenti Definisce: – Gli elementi HTML come oggetti – Le proprietà degli elementi HTML – I metodi per accedere agli elementi HTML – Gli eventi per tutti gli elementi HTML HTML DOM (Document object model)
JavaScript può essere utile per: – Leggere/Modificare una proprietà di un elemento HTML es. modificare l’HTML di un paragrafo – Validazione di un input form es lunghezza di una stringa maggiore di 6 caratteri – Visualizzare del contenuto dinamico in una pagina es. Visualizzare il risultato di una operazione – Gestione di eventi onChange, onClick, onLoad,...onChangeonClickonLoad Javascript: esempi
– JS Window JS Window – JS Screen JS Screen – JS Location JS Location – JS History JS History – JS Navigator JS Navigator – JS Popup Alert JS Popup Alert – JS Timing – JS Cookies Browser object model (BOM)
Si può accedere agli elementi di una pagina: tramite il suo id tramite il tag name tramite la classe Si può accedere agli elementi di un oggetto es. un form HTML DOM (Document object model)
Esercitazione 4 Aprite la cartella js Aprite il file LeggiEmodifica.html con il browser e con NotePad Visualizzare il saluto in un popup (alert(...)) Aprite il file valida.html con il browser e con NotePad Modifica la funzione js in modo tale che visualizzi un messaggio di errore se l’input è superiore a 10 caratteri
Esercitazione 4 Aprite il file somma.html con il browser e con NotePad Modifica la funzione js in modo tale che calcoli la moltiplicazione di due numeri, al posto della somma Aprite il file CambiaFoto.html con il browser e con NotePad Modifica la funzione FotoPiccola in modo tale che setti la larghezza dell’immagine a 350px, dopo aver caricato l’immagine