Introduzione a JavaScript - LIA - Laboratory of Advanced...
30
Introduzione a JavaScript Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna [email protected]
Transcript of Introduzione a JavaScript - LIA - Laboratory of Advanced...
Introduzione a JavaScript
Prof. Ing. Andrea OmiciniII Facoltà di Ingegneria, Cesena
Alma Mater Studiorum, Università di [email protected]
2
Documenti e Calcolo
HTMLLinguaggio per la descrizione di documentiInformation-orientedMobilità dei documenti
Distribuzione dell’informazione
Come distribuire la computazione col Web?Associando codice mobile alle pagine HTML
Applet Java
JavaScript
3
JavaScript vs. Java Applet
Specializzazione sul modello client as browserDinamicità“Leggerezza”Agile gestione di Regular Expressions
Perl-like
Tipizzazione debole facile prototipazione
Ereditarietà e oggettiprototipo vs. classe
…
4
Miti
JavaScript assomiglia a JavaPoco…
JavaScript è sempliceÈ facilmente usabile all’impronta
JavaScript gira su tutti i browserOhsìcerto
ma come pare a lui…
Versioni, IE vs. Mozilla (Netscape) vs. Opera vs. …ECMA
http://www.ecma-international.org/
5
Standard
ECMA 262ISO 16262ECMAScript
JavaScript, Jscripthttp://www.ecma-international.org/publications/standards/ECMA-262.HTM
http://www.ecma-international.org/publications/files/ecma-st/ECMA-262.pdf
ECMA 357E4X
ECMAScript for XMLhttp://www.ecma-international.org/publications/standards/ECMA-357.HTM
http://www.ecma-international.org/publications/files/ecma-st/ECMA-357.pdf
6
JavaScript
Linguaggio funzionale/a oggettiModelloDettagli sintattici
Lato clientIntegrazione con i browser
Lato serverNon ci interessa
EmbeddedNon so che fine abbia fatto…
7
Esempio – XHTML
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>…</title> <link href ="style.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="command.js"></script> </head> <body class="papers">…
<form action="" method="get">
…
<input type="button" value="BibTeX" class="bibBtn" onclick="showBib('volume');">
…
8
Esempio – JavaScriptabsURL = "abs/";
bibURL = "bib/";
pdfURL = "pdf/";
function showAbs(key) {
abstractWin=window.open(absURL+key+".html","abstractWindow",
"resizable=yes,dependent=yes,height=150,width=600,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no");
abstractWin.focus();
}
function showBib(key) {
bibtexWin=window.open(bibURL+key+".html","bibtexWindow",
"resizable=yes,dependent=yes,height=300,width=600,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no");
bibtexWin.focus();
}
function showPDF(key) {
top.location.href=pdfURL+key+".pdf";
}
…
9
Cosa fa JavaScript?
Controllo aspetto e contenuto documentoOggetto documentDOM
Controllo browserOggetto window
Gestione formOggetti Form, Button, …
Interazione con l’utenteGestione eventiGestione stato interazione
Cookie
10
Struttura del linguaggio
Case sensitiveProblema con HTML
SeparatoriSpazi, a capo, tabulatori, …
Punto e virgolaOpzionale, ma mettetelo
CommentiCome C, C++ e Java// per single line e /* … */ per multiline
Parole riservate
11
Tipi di dato
PrimitiviNumeri, stringhe e booleani
OggettiGenerici e speciali
window, document, Data, RegExp, …
ArrayFunzioniE4X aggiunge tipi di dato XML-like
12
Numeri
Interi e reali come IEEE 8 byteTutti double
Oggetto MathLibreria di funzioni matematiche
Valori specialiInfinityNaN…
13
Stringhe
Non esiste charApici e doppi apici
ugualicautela con (X)HTML
Concatenazionee molti altri operatori “classici”Wrapper String
“Libreria” virtuale, alla Java (funzioni statiche)
14
Boolean
false e true
Come stringhe
Convertiti automaticamente in 0 e 1NumeriQuando serve…
15
Tipi primitivi e riferimenti
AssegnamentoTra tipi non primitivi
Condivisione di riferimenti
Esempio var a = [1,2,3];
var b = a;
a[0] = 99;
alert(b);
che fa?
Prova (IE, Mozilla, Konqueror)javascript: var a = [1,2,3]; var b = a; a[0] = 99; alert(b);
che cosa produce?
16
Variabili e scope
varUsato o meno…
AmbitiGlobale
Oggetto globale
LocaleContesto d’esecuzione
No blocchi
Weboltre agli scope “classici”, gli ambiti sono documenti e finestre
17
Espressioni e operatori
Questi non li presentiamoCome C, C++, Java, più o meno…Ci guardate da soli…
C’è di tuttoNota
typeofspecie di operatore “riflessivo”
18
Istruzioni di controllo
Selezioneif, if/else, else ifswitch
Iterazionewhile, do/while, for, for/in
Funzionefunction, return
…
19
Funzioni
Oggetti di prima classeParametriLambda expression, chiusure
Esempifunction square(x) {return x*x;}
var square = new Function(“x”, “return x*x;”};
var square = function(x) {return x*x;};
Oggetti e proprietà per le funzioniL’oggetto chiamata
arguments, caller
length e arityapply e call
20
OggettiRaccolte di proprietà
con nome
Operatore newvar paper = new Object();
Definizione/accesso proprietà paper.title = “JavaScript -- Ohboy!!!”;
Enumerazionefor/in
MetodiProprietà come le altre
PrototipiNon (solo) classi e ereditarietàNel 3º standard, class e prototype properties…
21
Array
Come oggetti…var arr = new Array(1,2,3,4,5);
Accesso classicovar a = arr[3];var arr = [[2,3],[true,false],[“boh”,’mah’]];
Frammentati e dinamicisi fa quello che si vuole…
Wrapper Array
22
Espressioni regolari
Ottimo per trattere il testoInput utente
Oggetto RegExpUn sacco di dettagli rilevanti…
Ok, passiamo oltre!
23
Integrazione con i browser
Oggetto windowFinestra come contesto globale di esecuzione
var pippo e window.pippo sono la stessa cosa
Gerarchia oggetto lato clientWindow contiene
document, location, frames[], forms[], …
Modello a eventiGestori di eventi associati a tag (X)HTML
24
Il tag SCRIPT
…
<html>
<head>
…
<script type="text/javascript" language="JavaScript">
<!-- hide to old browsers
codice javascript
-->
</script>
</head>
…
25
Gestione finestre
Si controlla quasi tutto…bisogna studiare un po’meglio cominciare usando esempi già fatti…
Gerarchia di windowscreen, navigator, document, …
function showBib(key) {
bibtexWin=window.open(bibURL+key+".html","bibtexWindow",
"resizable=yes,dependent=yes,height=300,width=600,location=no,menubar=no,
scrollbars=yes,status=no,toolbar=no");
bibtexWin.focus();
}
function showPDF(key) {
top.location.href=pdfURL+key+".pdf";
}
26
DOM
Standardizzare il Document Object Model…Magari, in teoria sì, in pratica problemi
soprattutto con i frame
Per generare dinamicamente oggetti…document.write(), writeln(), open(), close()
27
Eventi
Gestori di eventionChange, onClick, onMouseDown, onSubmit, …
ProblemaDefinire un set di eventi comuni tra IE e gli altri…
Si prova…
Gestori come attributi HTML
…<form action="" method="get">…<input type="button" value="BibTeX" class="bibBtn" onclick="showBib('volume');">…
28
HTML e Form
Elementi XHTML hanno un identificatoreAttributo ID (un tempo NAME)
L’oggetto FormModuli come elementi di document.forms[]Elementi di input come elementi di document.forms[].elements[]Accesso associativo tramite nome NAME / ID
Metodi onSubmit() e reset()Se onSubmit() restituisce false annulla l’invio
Chiaro esempio di “calcolo distribuito”…
29
Sicurezza
ImplicitoNo accesso ai file localiNo funzioni di rete dirette
EsplicitoFunzionalità ristrette o con privilegiNorma “della stessa origine”Script firmati
30
JavaScript in poche ore?
Tutorial in reteSito del corsooppure http://www.google.it, cerca: JavaScript Tutorial
Esempiohttp://www.pageresource.com/jscript/
pagina dei tutorialhttp://academ.hvcc.edu/~kantopet/javascript/
LibriJavaScript - La Guida (David Flanagan, O’Reilly/Apogeo)o quello che vi pare…
