INTRODUZIONE A JAVASCRIPT Cos’è? Perché si usa? Come si usa? ? ! Come interagisce con HTML? ?

INTRODUZIONE A INTRODUZIONE A

JAVASCRIPTJAVASCRIPT

Cos’è?

Perché

si usa?

Come si usa?

?

!

Come interagisce

con HTML?

?

PER NAVIGARE SUL WEBPER NAVIGARE SUL WEBbisogna conoscere un principio bisogna conoscere un principio

fondamentale:fondamentale:

MODELLO CLIENT/SERVERMODELLO CLIENT/SERVER

CLIENT

WEB SERVER

URL INTERNET

PERCHE’PERCHE’

USARE USARE

JAVASCRIPT?JAVASCRIPT?

…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

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

CONTROLLO - GRAFICA - CALCOLO

L’azienda che ha avuto l’idea di creare un L’azienda che ha avuto l’idea di creare un vero e proprio linguaggio per inserirlo vero e proprio linguaggio per inserirlo dentro una pagina HTML è stata dentro una pagina HTML è stata NETSCAPE. Inizialmente creò un NETSCAPE. Inizialmente creò un linguaggio che si chiamava Livescript, poi linguaggio che si chiamava Livescript, poi ribattezzato in Javascriptribattezzato in Javascript

Javascript nasce a metà degli anni ’90 per Javascript nasce a metà degli anni ’90 per un motivo ben preciso: un motivo ben preciso: scrivere scrivere applicazioni sia sui server Web e sia sulle applicazioni sia sui server Web e sia sulle pagine HTML dei client. pagine HTML dei client. In realtà la parte server non ha mai avuto In realtà la parte server non ha mai avuto una grande diffusione, mentre tutt’oggi la una grande diffusione, mentre tutt’oggi la quasi totalità dei browser supporta questo quasi totalità dei browser supporta questo linguaggio all’interno delle pagine HTML.linguaggio all’interno delle pagine HTML.

UN PO’ DI STORIA …UN PO’ DI STORIA …

COS’E’ JAVASCRIPT?COS’E’ JAVASCRIPT?

E’ UN LINGUAGGIO DI

SCRIPTING

LATO – CLIENT

LATO – CLIENT

?

SCRIPTING

LATO - CLIENTLATO - 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.

SCRIPTINGSCRIPTING… 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 COME INSERIRE IL CODICE?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">

DOVEDOVEINSERIRE IL CODICE?INSERIRE IL CODICE?

1. 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>

ALL’INTERNO DI UNA PAGINA HTML

2. Inserire il codice JavaScript nel documento fra i marcatori <BODY> </BODY>

<HTML>

<HEAD>

<TITLE> Ancora un esempio di JavaScript</TITLE>

</HEAD>

<BODY>


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.

3. Caricare il codice JavaScript da un file esterno

Il file esterno ha estensione “.js” e viene richiamatoall’interno della pagina html in questo modo:

<HTML>

<HEAD>

<SCRIPT type="text/javascript" src=“FileJavaScript.js”>

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Attenzione: il file esterno, che può essere scritto con qualsiasi editor testuale, non dovrà contenere i tag di apertura e chiusura script.

Vantaggio file esterno: si può tranquillamente aggiornare quest'ultimo senza modificare il contenuto del file HTML.

Ancora un esempio…<HTML>

<HEAD>

<TITLE> Terzo esempio di script </TITLE>

</HEAD>

<BODY>

<H1>Ecco il classico esempio </H1>




</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 COME FA JAVASCRIPT AD INTERAGIRE CON L’HTML?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

History

Location

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 locationdocument

window

forms[] images[] links[]

Finestra corrente aperta nel browser

OGNI OGGETTO HA DELLE PROPRIETA’ E DELLE FUNZIONI

(METODI)

OGGETTO1.PROPRIETA’1

Per accedere alle proprietà e alle funzioni usiamo la notazione .dot

OGGETTO1.METODO1(arg1,…argN)

Esempio:

document.title (rappresenta il titolo della pagina)

document.URL (recupera l’url del documento)

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

INTRODUZIONE A JAVASCRIPT Cos’è? Perché si usa? Come si usa? ? ! Come interagisce con HTML? ?

Documents

Transcript of INTRODUZIONE A JAVASCRIPT Cos’è? Perché si usa? Come si usa? ? ! Come interagisce con HTML? ?