1 Javascript e CSS nelle pagine WEB Esempi applicativi Autrice: Turso Antonella Carmen
INDICE ARGOMENTI 2... 5 LEZIONE 1... 6 COSA SONO I JAVASCRIPT... 6 LEZIONE 2... 8 STRUTTURA DEL LINGUAGGIO JAVASCRIPT E GESTIONE DEGLI EVENTI... 8 LEZIONE 3... 11 ESEMPIO N. 1 - FINESTRA DI MESSAGGIO... 11 LEZIONE 4... 13 SCRIPT RICHIAMATI... 13 LEZIONE 5... 15 ESEMPIO N. 2 - CALCOLO AREA DEL RETTANGOLO... 15 LEZIONE 6... 20 IL CONTROLLO DATA E ORA... 20 1 ESEMPIO... 20 LEZIONE 7... 24 IL CONTROLLO DATA E ORA... 24 LEZIONE 8... 27 EFFETTO ROLL-OVER... 27 LEZIONE 9... 31 ESERCIZIO DI RIEPILOGO... 31... 36 LEZIONE 1... 37 CONCETTI GENERALI... 37 LEZIONE 2... 39 TIPOLOGIE DI CSS... 39 LEZIONE 3... 41 STRUTTURA DI UN CSS... 41 LEZIONE 4... 45 ESEMPIO CON I CSS INTERNI... 45 LEZIONE 5... 48 ESEMPIO CON I CSS ESTERNI... 48 LEZIONE 6... 51 SIGNIFICATO DI ALCUNE PROPRIETÀ... 51 LEZIONE 7... 53
CREARE UNA BARRA DI NAVIGAZIONE... 53 LEZIONE 8... 61 3 INSERIRE UNA IMMAGINE DI SFONDO... 61 LEZIONE 9... 66 ELENCO PUNTATO CON IMMAGINI... 66 LEZIONE 10... 71 CREAZIONE DI UN PULSANTE CON COLLEGAMENTO IPERTESTUALE... 71 LEZIONE 11... 75 CREAZIONE DI UNA PAGINA WEB COMPLETA... 75 LEZIONE 12... 80 ACCESSIBILITÀ E USABILITÀ DEI SITI WEB... 80 CONCLUSIONI... 84 NOTIZIE SULL AUTORE... 85
4
5
6 LEZIONE 1 COSA SONO I JAVASCRIPT Javascript è un linguaggio di programmazione interpretato e che è stato sviluppato da Netscape. È fondamentalmente diverso da JAVA, nonostante il nome. Javascript però richiama alcune istruzioni scritte con la sintassi del linguaggio JAVA ed è detto interpretato perché ogni istruzione viene letta ed eseguita dallo stesso browser del PC dell utente ed è quindi in grado di creare all interno della pagina web effetti dinamici lato client, a differenza delle pagine lato server (scritte con PHP o ASP), che contengono istruzioni eseguite sul server con invio del risultato dell elaborazione al browser dell utente. Il termine Script indica che le istruzioni sono composte da comandi di un linguaggio, utilizzando strutture condizionali (se..allora ) o iterative di un ciclo. I linguaggi di scripting, a differenza di quelli completi, possono omettere la descrizione del tipo di una variabile in fase di dichiarazione. Viene perciò utilizzato e integrato per diversi scopi. Alcuni esempi: per aggiornare automaticamente e in tempo reale la data; per aprire la pagina linkata in una finestra pop-up; per far cambiare l'immagine o il testo a seconda delle azioni svolte dal mouse; per scambiare una immagine con un altra al passaggio del mouse; effettuare calcoli; acquisire le scelte in un modulo interattivo e fornire messaggi di risposta all utente
7 Sebbene sviluppato da Netscape, javascript è supportato anche da Microsoft, anche se in maniera diversa. Nonostante sia un linguaggio lato client, è anche possibile utilizzare JavaScript per la scrittura di applicazioni lato server. Anche Microsoft, relativamente alla propria versione del linguaggio, JScript, è in grado di assicurarne il pieno supporto all'interno di ASP, Active Server Pages, sebbene, in quest'ultimo ambiente, gli sviluppatori preferiscano solitamente utilizzare VBScript, altro linguaggio di scripting targato interamente Microsoft e basato sulla sintassi di Visual Basic. JavaScript è inoltre in grado di interagire con altri potenti strumenti di sviluppo software per il Web quali le applet Java e i controlli ActiveX, permettendo così la creazione di applicazioni complesse. Pur essendo integrato nelle pagine HTML, non bisogna confondere HTML e Javascript, perché sono due cose completamente diverse: HTML serve per definire la struttura dei testi e la loro formattazione, mentre Javascript è un linguaggio vero e proprio che permette di creare sezioni interattive e dinamiche.
8 LEZIONE 2 STRUTTURA DEL LINGUAGGIO JAVASCRIPT E GESTIONE DEGLI EVENTI 1. STRUTTURA: Javascript viene inserito nella pagine HTML con un apposito tag <SCRIPT></SCRIPT> all interno della sezione <HEAD>. Di solito i Javascript sono costituiti da una o più procedure dette Function. Esse sono identificate da un nome e da eventuali parametri racchiusi tra parentesi tonde (). Esempio di struttura di Javascript: <SCRIPT Language = javascript > Function NomeFunction(parametri) { Istruzioni } Le parentesi graffe sono ottenute dalla combinazione TastoMaiuscolo con ALTGR e con [ e TastoMaiuscolo con ALTGR e ] Altro modo è la combinazione di ALT con 123 e ALT con 125 2. EVENTI: Il linguaggio Javascript deve la sua peculiarità proprio alla gestione degli eventi. Sono essi il fulcro della dinamicità stessa della pagina, cioè al verificarsi di un evento si genera un effetto. Ad esempio al passaggio del mouse su una foto, essa viene scambiata con un altra (effetto chiamato anche Roll-over)