HTML – CSS - JavaScript, classi 3c-3d

HTML – CSS - JavaScript, classi 3c-3d
Spunti per ripasso
•
•
•
•
•
•
Implementare una gallery di 100 immagini con nome foto1.jpg … foto100.jpg:
◦ inizialmente mostrando una foto alla volta, con due link all'immagine precedente e
successiva
◦ quindi mostrando su una riga in alto 5 foto in miniatura ed a centro pagina la terza
immagine delle 5 sopra raffigurate. Cliccando su una delle miniature sopra dovrà
essere caricata l'immagine selezionata a centro pagina e dovranno essere
aggiornate tutte le miniature in modo che l'immagine selezionata sia la terza della
serie
Implementare una “nuvola” a comparsa usando la pseudoclasse :hover e gli operatori di
relazione “spazio” o “>”.
Implementa un semplice menù a tendina
Realizza un form con un controllo JavaScript per
◦ verificare che tutti i campi siano stati compilati
◦ calcolare il “totale” della spesa (se hai realizzato un form stile “carrello della spesa”
o prenotazione B&B o simile)
Fogli di stile CSS:
◦ cosa sono? CSS di cosa è acronimo? A cosa servono i CSS? Perché sono stati
affiancati all'HTML?
◦ spiega la differenza fra padding, border e margin
◦ in quali modi riesci ad associare un foglio di stile ad un file HTML?
◦ in quali modi (id, tag, classe, pseudoclasse etc) puoi assegnare uno stile ad uno (o
più) elementi HTML? Spiega e fai un esempio.
◦ cosa sono le pseudoclassi? Quali conosci? A cosa servono?
◦ la proprietà position può assumere 4 valori: static, fixed, relative, absolute. Spiega la
differenza fra le 4 impostazioni e indica in quali casi dovrai specificare i parametri
top, bottom, left, right
◦ come si fa ad integrare un'immagine all'interno di un testo?
◦ che differenza c'è fra un elemento “inline” ed un elemento “block” ? A cosa servono
i tag HTML div e span ?
◦ è possibile impostare uno stile diverso per la stampa? Se sì in che modo?
Linguaggio JavaScript:
◦ che tipo di linguaggio è? Dove e per cosa viene usato? Java o JavaScript sono la
stessa cosa?
◦ come si include del codice JavaScript in una pagina HTML?
◦ come si definisce una funzione JavaScript?
◦ come si richiama una funzione JavaScript ad un determinato evento della pagina
HTML? Quali eventi conosci? Fai un esempio. [ onclick, onfocus, onsubmit, onload,
onblur, ondbclick, onchange, onmouseover, etc ]
◦ come posso associare ad una variabile JavaScript un determinato elemento HTML
presente nella pagina? Spiega e mostra un esempio [document.getElementById('..')]
◦ come posso leggere o impostare l'attributo di un tag HTML tramite JavaScript?
spiega e mostrane un esempio. [ ???.attributoHtml = ... ]
◦ come posso leggere o impostare lo stile CSS di un tag HTML tramite JavaScript?
spiega e mostrane un esempio. [ ???.style.proprietà_css = ... ]
◦ quale funzione posso usare per mostrare un messaggio all'utente?
HTML – CSS - JavaScript, classi 3c-3d
Spunti per ripasso
•
•
•
•
•
•
Implementare una gallery di 100 immagini con nome foto1.jpg … foto100.jpg:
◦ inizialmente mostrando una foto alla volta, con due link all'immagine precedente e
successiva
◦ quindi mostrando su una riga in alto 5 foto in miniatura ed a centro pagina la terza
immagine delle 5 sopra raffigurate. Cliccando su una delle miniature sopra dovrà
essere caricata l'immagine selezionata a centro pagina e dovranno essere
aggiornate tutte le miniature in modo che l'immagine selezionata sia la terza della
serie
Implementare una “nuvola” a comparsa usando la pseudoclasse :hover e gli operatori di
relazione “spazio” o “>”.
Implementa un semplice menù a tendina
Realizza un form con un controllo JavaScript per
◦ verificare che tutti i campi siano stati compilati
◦ calcolare il “totale” della spesa (se hai realizzato un form stile “carrello della spesa”
o prenotazione B&B o simile)
Fogli di stile CSS:
◦ cosa sono? CSS di cosa è acronimo? A cosa servono i CSS? Perché sono stati
affiancati all'HTML?
◦ spiega la differenza fra padding, border e margin
◦ in quali modi riesci ad associare un foglio di stile ad un file HTML?
◦ in quali modi (id, tag, classe, pseudoclasse etc) puoi assegnare uno stile ad uno (o
più) elementi HTML? Spiega e fai un esempio.
◦ cosa sono le pseudoclassi? Quali conosci? A cosa servono?
◦ la proprietà position può assumere 4 valori: static, fixed, relative, absolute. Spiega la
differenza fra le 4 impostazioni e indica in quali casi dovrai specificare i parametri
top, bottom, left, right
◦ come si fa ad integrare un'immagine all'interno di un testo?
◦ che differenza c'è fra un elemento “inline” ed un elemento “block” ? A cosa servono
i tag HTML div e span ?
◦ è possibile impostare uno stile diverso per la stampa? Se sì in che modo?
Linguaggio JavaScript:
◦ che tipo di linguaggio è? Dove e per cosa viene usato? Java o JavaScript sono la
stessa cosa?
◦ come si include del codice JavaScript in una pagina HTML?
◦ come si definisce una funzione JavaScript?
◦ come si richiama una funzione JavaScript ad un determinato evento della pagina
HTML? Quali eventi conosci? Fai un esempio. [ onclick, onfocus, onsubmit, onload,
onblur, ondbclick, onchange, onmouseover, etc ]
◦ come posso associare ad una variabile JavaScript un determinato elemento HTML
presente nella pagina? Spiega e mostra un esempio [document.getElementById('..')]
◦ come posso leggere o impostare l'attributo di un tag HTML tramite JavaScript?
spiega e mostrane un esempio. [ ???.attributoHtml = ... ]
◦ come posso leggere o impostare lo stile CSS di un tag HTML tramite JavaScript?
spiega e mostrane un esempio. [ ???.style.proprietà_css = ... ]
◦ quale funzione posso usare per mostrare un messaggio all'utente?