generalità cos'è javascript? javascript è un linguaggio per le pagine web. gli script in...

Generalità

Cos'è JavaScript?

JavaScript è un linguaggio per le pagine Web. Gli script in JavaScript possono essere inclusi nelle pagine HTML.

Con JavaScript si possono migliorare le pagine HTML con elementi veramente interessanti (ad esempio rispondere agli eventi attivati dagli utenti)

In Internet è possibile trovare numerosi esempi di script Javascript e vedere pagine potenziate con questo linguaggio.

JavaScript

Generalità

Qual è la differenza tra Java e JavaScript?

Java non è la stessa cosa di JavaScript. Si tratta di due diverse tecniche per la programmazione: Java è un linguaggio di programmazione; Javascript è un linguaggio per realizzare script (scripting language).

Con Java si possono realizzare veri e propri programmi, con Javascript si possono creare degli effetti nelle pagine Html evitando di avere a che fare con la programmazione pura.

Quindi l'obiettivo principale di Javascript è quello di essere facile da comprendere e da usare, senza preoccuparsi troppo della programmazione.

JavaScript

Generalità

Il primo browser a supportare Javascript è stato Netscape Navigator 2.0. Naturalmente anche le versioni successive lo supportano. Anche Microsoft Internet Explorer (a partire dalla versione 3.0) supporta Javascript.

Realizzare script con Javascript è veramente semplice; tutto ciò che occorre conoscere sono alcune tecniche di base e qualche trucco per superare i problemi che si possono presentare. Naturalmente occorre conoscere anche HTML!!!

JavaScript

Generalità

Inserimento degli script

Dove possono essere inseriti gli script: Nell’intestazione della pagina tra i tag <HEAD>, nel tag <SCRIPT>. Si usa spesso per le funzioni Nel corpo della pagina tra i tag <Body>, nel tag <SCRIPT>. All’interno di un tag HTML. È il caso dei gestori degli eventi e consente di lavorare con gli elementi HTML. In questo caso non è necessario utilizzare il tag <SCRIPT>• In un file a sé stante. Questi file hanno estensione .JS ed è possibili inserirli specificando un file nel tag <SCRIPT>.

JavaScript

La sintassi del linguaggio

Le variabili

Un identificatore deve cominciare con una lettera o con il simbolo _ (underscore).

Ricordare che Javascript è case sensitive.

Le variabili possono essere:

globalilocali(solo all'interno di una pagina: non esistono variabili che mantengano il proprio valore se la pagina nella quale sono dichiarate viene chiusa).

JavaScript


Le variabili

Le variabili globali devono essere dichiarate (quelle locali no) e possono essere non tipizzate (non è obbligatorio dichiararne il tipo).

Per la dichiarazione di una variabile si usa la keyword var, ad esempio:

var x;

var i = 2;

JavaScript


Le variabili

Una variabile può assumere come valori:

numeristringheboolean (true e false) (ed inoltre i valori undefined e null)

Per l'assegnazione si usa l’operatore =

Es: X = 2

Notare le forme:

X+= 3 (incrementa x di 3)

X-= 3 (decrementa di 3)

X++ (incrementa x di 1)

X-- (decrementare x di 1)

JavaScript


Operatori aritmetici

Quelli standard per le quattro operazioni e poi:

++ (incremento), - - (decremento), % (modulo).

Operazioni di I/O

Il modo normale di realizzare operazioni di I/O nelle pagine HTML è attraverso le forms. E' però possibile utilizzare altre tecniche.

Per l'Output si può usare la finestra di alert:

alert()

(dentro la parentesi si scrverà la stringa, la variabile, ecc. che si vole visualizzare)

JavaScript


Operazioni di I/O

Per scrivere sulla pagina si usa document.write() (metodo dell’oggetto document); es.:

document.write(x+”<BR>”); scrive il valore di x e va a capo

Per assegnare ad una variabile un valore in input si può usare la finestra predefinita prompt:

x = prompt(“x = “);

ed immettere il valore nella finestra che viene aperta.

JavaScript


Le stringhe

Esempi:

s= “questa è la stringa S”;

s1 = s + “nuova”;

s1 += “aggiornata”;

Alcune funzioni per operare sulle stringhe:

s.lenght per avere la lunghezza di una stringa

s.charAt(index)

s.toLowerCase()

s.toUpperCase()

JavaScript


Operatori e espressioni condizionali

== < >

!= (diverso) <= >=

&& (and) || (or) ! (not)

JavaScript


Strutture

La sequenza si realizza separando gli statement con il punto e virgola. Una sequenza di statement va racchiusa fra le parentesi { } (che corrispondono al begin…..end)

La selezione può essere realizzata con lo statement if … else

if (condition){statements1}

else {statements2}

(n.b.: la parte else è facoltativa e può essere omessa; le parentesi graffe sono necessarie solo se c'è più di un'istruzione)

es.: if (a== true && b == false ) window.alert(“a e b non sono uguali”);

JavaScript


Strutture

Esiste anche uno statement switch (analogo alla CASE del Pascal):

switch (expression){

case label :

statements;

break;

case label :

statements;

break;

...

default : statements;

}

JavaScript


Strutture

I cicli

Lo statement for

for (initial-expression; condition; increment-expression){

statements

}

es.:

for (x = 1 ; x<10 ; x++) {

document.write(x + “ “);

}

JavaScript


Strutture

I cicli

Lo statement do …..while (sostituisce la repeat del Pascal ma la condizione del while è una condizione di permanenza nel ciclo):

do

statements

while (condition);

Lo statement while:

while (condition){

statements

}

JavaScript


Gli Array

Definizione di un array:

A = new Array(arrayLength);

(gli elementi vanno da 0 ad arrayLength );

es: A = new Array(4); per un array di cinque elementi

Per selezionare l’elemento di posto i dell’array A si scrive A[i]

Una proprietà degli array: A.length

JavaScript


Gli Array

Un Array bidimensionale:

myVar="Multidimensional array test; "

a = new Array(4)

for (i=0;i <4;i++) {

a[i] = new Array(4)

for (j=0;j <4;j++) {

a[i][j] = ""

}

}

JavaScript


Alcuni oggetti predefiniti di Javascript

Gli oggetti di javascript si dividono in

Oggetti predefiniti (del linguaggio) es.: Date, MathOggetti del browser es.: Window, Navigator, Frame, Button. etc.Oggetti personalizzati (costruiti dall’utente)

JavaScript



Math Permette di utilizzare proprietà e funzioni matematiche

Alcune funzioni: Math.sin(x),Math.ceil(x), Math.floor(x), Math.round(x)

Math.abs(x)

JavaScript



Date Permette di lavorare con data e ora.

A = new Date() costruisce un oggetto A di tipo Date che ha come valore la data di oggi e l’ora attuale

Es.:

B= new Date(6,20,2001);

Metodi: getDate(), getTime(), GetMonth(), setDate() ecc.

Es.: A.getDate()

Date.parse(dateString) converte da stringa a data (numero di millisecondi dal 1 gen 1970). Es.: Date.parse(“June,20,1999”)

toString() restituisce una stringa a partire da una data. Es.: x.toString()

JavaScript


Eventi

Sono associati agli oggetti, e gli script che li gestiscono sono chiamati gestori degli eventi (event handlers).

Ricordiamo fra gli eventi:

eventi del mouse: onMouseOver, onMouseOut, onClick….

event della tastiera: onKeyPress, onKeyDown, onKeyUp…..

L’evento onLoad che indica il termine del caricamento di un oggetto document.

JavaScript


Esempio di handler (gestore di eventi)

<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"

onclick="window.open('mydoc.html', 'newWin')">

E' utile ricordare in questo contesto l’uso della speciale keyword this che indica l’oggetto corrente; ad esempio:

<INPUT TYPE="button" NAME="Button1" VALUE="cliccami"

onClick="window.alert(‘hai cliccato ‘+this.name)>

JavaScript


L’oggetto window

Per aprire una finestra si usa il metodo window.open() con vari parametri:

WinObj = window.open(“URL”, “nome” ,”lista di attributi”)

La variabile WinObj serve per memorizzare il nuovo oggetto window ed ad essa si deve fare riferimento per accedere ai metodi ed alle proprietà dell’oggetto.

URL è l’URL del documento da caricare.

nome è il nome della finestra (da usare ad es. come target nel tag frame).

JavaScript


L’oggetto window

Es.:

finestrella = window.open(“mydoc.html”, “fin1” , “width = 100 , heigth = 120, toolbar = 0, status =0”);

msgWindow=window.open("sesame.html")

Per chiudere la finestra:

finestrella.close();

nb: si può anche usare per la finestra corrente window.close() o self.close()

JavaScript


L'oggetto frame

Dopo aver costruito tre frame all’interno di una stessa finestra, come ad esempio:

<FRAMESET ROWS="90%,10%">

<FRAME SRC="titolo.htm" NAME="titolo">

<FRAMESET COLS="30%,70%">

<FRAME SRC="menu.htm" NAME="menu">

<FRAME SRC="main.htm" NAME="main">

</FRAMESET>

</FRAMESET>

Ci si può riferire al frame con il suo nome o, in alternativa, o all’array frames dove sono memorizzati nell’ordine in cui sono creati.

JavaScript


L'oggetto frame

Qundi:

top.frames[0] o parent.frames[0] corrisponde a titolo

top.frames[1] o parent.frames[1] corrisponde a menu

top.frames[2] o parent.frames[2] corrisponde a main

Ad esempio:

<INPUT TYPE="button" VALUE="solo titolo" onClick="top.frames[0].location='altrapagina.html'">

JavaScript

Esempi ed esercizi

Esempi ed esercizi in JavaScript

(file doc)

JavaScript

generalità cos'è javascript? javascript è un linguaggio per le pagine web. gli script in...

Documents