3DIT

HTML e JavaScript

Argomenti discussi in classe:

• 1. Basi dell'HTML. Tag: h1, p, html, body, head, altro...

  2. DIV e divisione della pagina in blocchi semantici (sotto esempio blocchi.html e div.html)

  3. Tabelle (sotto esempio tabelle.html)

  4. MENU con i rollover (sotto menu2.html)

  5. Form, modulo dati con caselle di testo, ecc... e un esempio di bottone che richiama una funzione javascript (formbrutto.html)

  6. Esercizi 1 sui form (casella di testo qui in basso)

Esercizio 1 su form e JavaScript

Realizza una pagina web che:

• • Premendo un tasto mostri in una casella un numero a caso tra 1 e 100 (Cerca come estrarre un numero a caso in javascript)

  • Date due caselle di input, premendo un tasto mostri il maggiore tra i due numeri (uso di if).

  • Date tre caselle che rappresentano i lati di un triangolo dire se si tratta di un triangolo isoscele o equilatero.

Abbellisci un po' la pagina (legend e fieldset...).

• 1. Utilizzo delle condizioni in javascript e visualizzazione di una immagine. (Esempio)

  2. Uso di posizioni assolute e font google e javascript per fare un gioco: Indovina il numero! Qui di seguito uno screen shot.

Indovina il numero:

• • Il programma sceglie un numero a caso da 1 a 100

  • L'utente inserisce un numero nella casella e preme il tasto

  • Se il numero è più piccolo compare un'immagine che dice che è più basso. Analogamente dice se è più alto o corretto.

  • Quando il numero viene indovinato il programma scrive il numero di tentativi impiegati

  • Aggiungete un tasto che cambia il numero da indovinare e azzera il numero di tentativi

  • Aggiungete colori e immagini per fare il programma carino

  • Usate i posizionamenti assoluti per posizionare gli elementi

  • Usate un font google a scelta per il testo

Vettori in Javascript

I vettori sono un insieme di dati, generalmente dello stesso tipo.

var elenco = [1,20,5]; // Determina un vettore di tre elementi. Il primo ha indice 0, il secondo 1 e il terzo 2

console.log(elenco[2]); // Stampa nella console il terzo elemento del vettore.

In classe abbiamo fatto un esercizio che usando la proprietà length (che restituisce la lunghezza del vettore) stampa il contenuto di un vettore e cerca un elemento al suo interno.

Qui potete trovare l'esempio fatto in classe.

Esercizio Vettori

• 1. Dato un tasto sulla pagina: Stampa in qualche modo una frase scelta a caso tra alcune frasi preimpostate. Magari un simpatico saluto.

  2. Date due input box e un bottone: In uno inserisco una lettera, nell'altro una frase, poi premuto un tasto dice sì o no se trova la lettera nella frase.

  3. Data una casella di testo e un pulsante: scrive la parola inserita al contrario

L'impiccato

Con il codice dell'impiccato di base che trovi sotto:

• 1. Scrivi quanti tentativi fa l'utente

  2. Scrivi quanti tentativi sbagliati fa l'utente

  3. In base ai tentativi sbagliati cambia il disegno dell'impiccato

  4. Aggiungi altre parole della stessa lunghezza

  5. Aggiungi un tasto per ripartire

  6. Abbelliscilo a piacere

  7. Aggiungi delle parole di lunghezza diversa

Riferimenti:

www.w3schools.com, il sito di riferimento con tutorial e guide per imparare l'HTML, javascript e altro

www.w3resource.com, un altro bel sito con guide, tutorial ed esercizi per molti linguaggi (HTML, Javascript, ecc...)