html5-web-applications-by-ewaycorp

Lezioni

Lezione 3: Esercitazione su gestione eventi

1 apr , 2014  

Nella scorsa lezione abbiamo iniziato l’esplorazione di Javascript, del suo ruolo fondamentale per dominare e gestire gli elementi della pagina, di come questo viene
incluso, sia inline, che su file esterni locali e remoti.

La lezione si è conclusa con la presentazione degli array: su questo argomento (gli array) ci fermiamo qui e verrà ripreso quando si parlerà di JSON.

Adesso ci occupiamo degli aspetti generali della pagina, di come catturare gli elementi e di come gestire gli eventi, quindi gli argomenti di questa lezione sono:

  • Tipologie di oggetti
  • Gestione degli eventi in JavaScript
  • BOM, Oggetto window: proprieta e metodi
  • BOM, Oggetto navigator
  • DOM, Interfaccia element: metodi e attributi
  • DOM, Oggetto document: metodi e attributi

Tipologie di oggetti

Gli oggetti disponibili per l’utilizzo negli script delle pagine HTML5 e (X)HTML possono
essere di tre diversi tipi:

  • nativi: sono quelli messi a disposizione dal linguaggio;
  • appartenenti al BOM (Browser Object Model): sono oggetti forniti dall’ambiente del browser e che permettono di interagire con quest’ultimo, quindi NON a LIVELLO DELLA PAGINA;
  • appartenenti al DOM (Documet Object Model): sono oggetti che operano sugli elementi presenti all’interno della pagina visualizzata dal browser.

Gli oggetti appartenenti al DOM appaiono quindi integrati all’interno del BOM.

Gestione degli eventi in JavaScript
JavaScript interagisce con gli attributi di evento definiti in (X)HTML per permettere di invocare funzioni in risposta alle azioni dell’utente sugli elementi della pagina.

Ecco i principali tipi di evento:

  • Eventi di documento: Apertura e chiusura di documenti
  • Link: Chiamate di link
  • Eventi di form: Eventi dovuti alla pressione di bottoni, caselle di controllo, bottoni di invio o di reset
  • Eventi di disattivazione, attivazione e modifica in campi di testo, aree di testo e liste di selezione
  • Eventi di selezione in campi e aree di testo
  • Eventi di selezione in campi e aree di testo
  • Eventi di immagini: caricamento di immagini
  •  Eventi del mouse: ingresso o uscita del cursore dal box di un elemento

In HTML5 ambito mobile abbiamo anche gli eventi relativi al “touch” : “touchstart”, “touchmove”, “touchend” tra i principali.

Contenuto riservato agli studenti del corso.

SEO Manager presso Condé Nast SpA


, , , ,