Javascript e CSS nelle pagine WEB

Транскрипт

1 1 Javascript e CSS nelle pagine WEB Esempi applicativi Autrice: Turso Antonella Carmen

2 INDICE ARGOMENTI LEZIONE COSA SONO I JAVASCRIPT... 6 LEZIONE STRUTTURA DEL LINGUAGGIO JAVASCRIPT E GESTIONE DEGLI EVENTI... 8 LEZIONE ESEMPIO N. 1 - FINESTRA DI MESSAGGIO LEZIONE SCRIPT RICHIAMATI LEZIONE ESEMPIO N. 2 - CALCOLO AREA DEL RETTANGOLO LEZIONE IL CONTROLLO DATA E ORA ESEMPIO LEZIONE IL CONTROLLO DATA E ORA LEZIONE EFFETTO ROLL-OVER LEZIONE ESERCIZIO DI RIEPILOGO LEZIONE CONCETTI GENERALI LEZIONE TIPOLOGIE DI CSS LEZIONE STRUTTURA DI UN CSS LEZIONE ESEMPIO CON I CSS INTERNI LEZIONE ESEMPIO CON I CSS ESTERNI LEZIONE SIGNIFICATO DI ALCUNE PROPRIETÀ LEZIONE

3 CREARE UNA BARRA DI NAVIGAZIONE LEZIONE INSERIRE UNA IMMAGINE DI SFONDO LEZIONE ELENCO PUNTATO CON IMMAGINI LEZIONE CREAZIONE DI UN PULSANTE CON COLLEGAMENTO IPERTESTUALE LEZIONE CREAZIONE DI UNA PAGINA WEB COMPLETA LEZIONE ACCESSIBILITÀ E USABILITÀ DEI SITI WEB CONCLUSIONI NOTIZIE SULL AUTORE... 85

4 4

5 5

6 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 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 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 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)