INTRODUZIONE A JAVASCRIPT Cos’è? Come si usa? ? INTRODUZIONE A JAVASCRIPT ! Perché si usa? Come interagisce con HTML? ?
PER NAVIGARE SUL WEB bisogna conoscere un principio fondamentale:
MODELLO CLIENT/SERVER WEB SERVER URL INTERNET CLIENT
PERCHE’ USARE JAVASCRIPT?
l’INTERAZIONE tra l’UTENTE e il WEB …per arricchire le pagine HTML …per dargli una “logica” …per inserire dinamicità ...per inserire funzionalità … per permettere l’INTERAZIONE tra l’UTENTE e il WEB
CONTROLLO - GRAFICA - CALCOLO controllare la validità dei dati inseriti nei form fornire messaggi di avvertimento o risposte alle scelte effettuate gestire le finestre del browser gestire eventi che possono accadere durante la consultazione delle pagine, provocati dall’utente con il click del mouse eseguire calcoli matematici sui valori inseriti dall’utente
UN PO’ DI STORIA … L’azienda che ha avuto l’idea di creare un vero e proprio linguaggio per inserirlo dentro una pagina HTML è stata NETSCAPE. Inizialmente creò un linguaggio che si chiamava Livescript, poi ribattezzato in Javascript Javascript nasce a metà degli anni ’90 per un motivo ben preciso: scrivere applicazioni sia sui server Web e sia sulle pagine HTML dei client. In realtà la parte server non ha mai avuto una grande diffusione, mentre tutt’oggi la quasi totalità dei browser supporta questo linguaggio all’interno delle pagine HTML.
? COS’E’ JAVASCRIPT? LATO – CLIENT SCRIPTING E’ UN LINGUAGGIO DI
LATO - CLIENT …perché JavaScript viene eseguito sul nostro computer dal browser Questa differenza perché ci sono anche alcuni linguaggi di scripting come asp,php, perl che vengono eseguiti dal web server: si chiamano pertanto linguaggi lato server (o server side). OSS: Pertanto ciò che scriviamo ha validità solo all’interno delle singole pagine web, e non da una pagina all’altra.
SCRIPTING … perché la sintassi JavaScript possiamo scriverla direttamente dentro la pagina HTML, senza bisogno di produrre alcun file compilato. Possiamo visualizzare in qualsiasi momento il codice di una pagina HTML e leggere le righe di sintassi JavaScript. … è un linguaggio interpretato: non esiste nessun compilatore, ma è direttamente il browser, che legge le parti di codice (script) JavaScript e quindi le esegue sulla macchina client.
COME INSERIRE IL CODICE? Per scrivere la sintassi si utilizzano i tag: <SCRIPT> e </SCRIPT> così: <script language=“javascript”> istruzioni </script> Oggi si usa l’attributo type al posto di language <script type="text/javascript">
DOVE INSERIRE IL CODICE? ALL’INTERNO DI UNA PAGINA HTML Inserire il codice JavaScript nel documento fra i marcatori <HEAD> </HEAD> <HTML> <HEAD> <TITLE> Primo esempio</TITLE> <SCRIPT type="text/javascript"> alert("Questo è un esempio di Javascript, non è possibile ottenere questo effetto solo con l'HTML"); </SCRIPT> </HEAD> </HTML>
Inserire il codice JavaScript nel documento fra i marcatori <BODY> </BODY> <HTML> <HEAD> <TITLE> Ancora un esempio di JavaScript</TITLE> </HEAD> <BODY> <SCRIPT type="text/javascript"> var msg1; //dichiaro la variabile che conterrà il messaggio msg1= prompt (“Inserisci il primo messaggio”); //mostra il messaggio in una finestra di pop-up alert("Primo messaggio:" + msg1); </SCRIPT> </BODY> </HTML> Oss: ogni riga termina con un punto e virgola ( ; ). Non è sempre necessario ma è una buona regola inserirlo per delimitare la fine dell’istruzione.
Caricare il codice JavaScript da un file esterno Il file esterno ha estensione “.js” e viene richiamato all’interno della pagina html in questo modo: <HTML> <HEAD> <SCRIPT type="text/javascript" src=“FileJavaScript.js”> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Vantaggio file esterno: si può tranquillamente aggiornare quest'ultimo senza modificare il contenuto del file HTML. Attenzione: il file esterno, che può essere scritto con qualsiasi editor testuale, non dovrà contenere i tag di apertura e chiusura script.
Ancora un esempio… <HTML> <HEAD> <TITLE> Terzo esempio di script </TITLE> </HEAD> <BODY> <H1>Ecco il classico esempio </H1> <SCRIPT type="text/javascript"> <!-- document.write("Benvenuti!"); // scrive il messaggio nella pagina --> </SCRIPT> </BODY> </HTML> Oramai sono pochi i browser obsoleti che non supportano i linguaggi di scripting, in ogni caso è buona norma quella di usare i commenti per “nascondere” il codice JavaScript ai quei browser che non sono in grado di interpretarlo.
… COMMENTI Possono scriversi su di una riga con l'utilizzo dei simboli // o su più righe tra i simboli /* e */. //Questo è un commento su una sola riga /* Questo è un commento su più righe. Questa è la seconda riga. Questa è l'ultima riga. */ I commenti sono un ottimo modo per fornire un contesto al nostro codice. E’ importante commentare in fase di scrittura perché ci costringe a riflettere sulla logica.
COME FA JAVASCRIPT AD INTERAGIRE CON L’HTML? DOM (Document Object Model) E’ un modello ad oggetti con cui JavaScript gestisce le pagine, interagisce con il browser Web, usando metodi e proprietà di alcuni oggetti fondamentali. Serve per identificare in modo preciso i vari elementi HTML e le relative proprietà.
Oggetti del Browser Navigator Location History Document
Gli Oggetti sono in relazione gerarchica tra loro Il DOM può essere rappresentato come un albero Ciascun nodo è identificato da un oggetto I collegamenti tra i nodi rappresentano la relazione padre/figlio con cui è possibile navigare history location document window forms[] images[] links[] Finestra corrente aperta nel browser
OGNI OGGETTO HA DELLE PROPRIETA’ E DELLE FUNZIONI (METODI) Per accedere alle proprietà e alle funzioni usiamo la notazione .dot OGGETTO1.PROPRIETA’1 Esempio: document.title (rappresenta il titolo della pagina) document.URL (recupera l’url del documento) OGGETTO1.METODO1(arg1,…argN)
FUNZIONI DELL’OGGETTO WINDOW window.alert() mostra un messaggio pop-up all’utente window.confirm() mostra una casella di conferma (si/no) con l’utente window.prompt() mostra una casella di dialogo con l’utente window.open() apre una nuova finestra del browser
FUNZIONI DELL’OGGETTO DOCUMENT document.write():serve per scrivere direttamente all’interno della pagina Web document.open(): apre un documento per scrivervi all'interno document.close():chiude il documento dopo che è stato aggiornato
PROPRIETA’ DELL’OGGETTO DOCUMENT document.URL: contiene l’url del documento document.title: contiene il titolo della pagina attiva desunto dal contenuto compreso tra i due tag <title> e </title>; document.lastModified:contiene la data dell’ultima modifica della pagina