HTML Struttura della pagina: <HTML> <BODY> <script> .... </script> </BODY> </HTML>
<B><I><U><STRIKE><SUB><SUP>: Bold, Inclinato, Underlined, Sbarrato,Pedice,Apice <H1><H2>...<H6>: Dimensioni titoli H1 grande, H6 piccolo <CENTER>: centrato;<CODE>: isospaziato; <BR>:A capo; <P>: Paragrafo; <HR>: Riga orizzontale; <FONT color='red' face='symbol'>: font ('symbol' per il greco, altrimenti 'arial' etc..) <IMG SRC="Bubi.jpg">: Immagine <DIV ALIGN="left"> .... </div> division aligned to left (right / middle) <TABLE BORDER=1><TH><TR><TD>: Tabella, Table Header, Table Row, Table Data <SCRIPT>: programmi JavaScript;<SCRIPT SRC="unaLibreria.js"></SCRIPT> include un file di libreria JavaScript <UL><LI>: Lista unordered, dato... ; <OL><LI>: Lista ordinata, dato... <A href="http://....."> testo </A> Link <A href="mailto://....."> testo </A> Per farsi scrivere <SPAN style="position:absolute; left:350; top:200;"> . </SPAN> scrive un punto in coordinate (350,200) (alla base della grafica) <SPAN style="position:absolute; left:100 top:200;"><IMG ....> </SPAN> mette una immagine in coordinate (350,200) <XMP> eXaMPle : visualizza esattamente come scritto (rispettando a capo e spazi) <FORM NAME="dat"> modulo per inserire dati <INPUT TYPE=TEXT NAME="c1" ONCHANGE="f1(dat.c1.value)"> casella I/O <INPUT TYPE=BUTTON VALUE="SUL BOTTONE" ONCLICK="f2(dat.c1.value)"> bottone <TEXTAREA NAME="at1" ROWS=10 COLS=40 ONCHANGE="f3(dat.at1.value)"> area I/O </FORM> <APPLET CODE="nome.class" ></APPLET> inserisce una applet
JS
Note Generali 1) MAIUSCOLE e minuscole sono diverse!!!!!!!!!: le istruzioni non funzionano e x Ŕ una variabile diversa da X 2) I COMMENTI si fanno con //..... oppure /* commento ..... */
Variabili
Intere o Reali var i=23,r=1.5E-234;
var infi=Number.POSITIVE_INFINITY;
var epsilon=Number.MIN_VALUE;
Stringhe var t1="testo 1",t2='testo 2'; (Non chiudere le virgolette andando a capo!)
Vettori o Matrici var v=[1,4,3,'pippo']; (valgono tipi misti)

var a= new Array();a[0]=23;
a[9999999999999999999999999999999999999998]=12;
(Indici non usati non occupano memoria se non si dichiara dimensione)

var mat=[[11,12],[21,22]];
Su basi non decimali var nDecimale=233; var nOttale=0176; (Inizia per zero) var nHex=0xFFCA; (Inizia per 0x)
Logiche var pioveOnonPiove=true; var pioveEnonPiove=false;
(funzioni) var f=function(x){return x*x+4};
Pattern di ricerca stringhe (espressioni regolari) var patt=/\d*/;
Oggetti (modo 1) var punto =new Object(); punto.x=2.3;punto.y=-4.1;
(modo 2) var punto={x:2.3,y:-4.1};
esempio var rettangolo{SpgAltoSx:{x:punto.x,y:punto.y},SpgBassoDx:{x:punto.x+l,y:punto.y+h}}; (Il rettandolo Ŕ definito dai suoi due spigoli che sono due punti a doppia coordinata) var Xsup=rettangolo.SpgAltoSx.x;
Date var epifania=new Date(98,0,6);
Finestre var w2=window.open("","finestra2");w2.document.writeln('ciao');
Operatori
Aritmetici: + - * / Math.pow(x,2) Math.sin(alpha) etc..
Modulo: 8 % 5 --> 3
Assegnazione: =
Incremento, decremento ++ += -- -=
Moltiplicare per, dividere per, fare modulo con: *= /= %=
Confronto: Uguale: == Diverso: != Minore: < Minore o Uguale <=
Logici: Not: ! And: && ; Or: ||;
Di bit: scorri a sinistra: << scorri a destra: >> & and bit a bit | or bit a bit
esempio:if !( (x>=2 && x<5) || (x>7 ) ){ alert('ciao') } // Se non Ŕ vero che x appartiene a [2,5) oppure che x>7 allora di 'ciao!'
Istruzioni
for for(inizializzazione;cond PERMANENZA NEL CICLO;incremento){}; es. for(var i=10;i>=1;i--){alert(i)} // conta da 10 a 1
Input var l=prompt("lato");
var eu=prompt("valore Euro","1936.27");
var x=document.dati.nome.value; // Da una form chiamata 'dati' con un input (type text) chiamato 'nome'
Output
alert("area="+l*l); // su finestrella
document.writeln("area="+l*l); // su documento
var w2=window.open("","finestra2");w2.document.writeln("area="+l*l);// su documento 2
document.dat.at1.value = "area="+l*l // su una form
if if(cond){istruzioni}; // if
if(cond){}else{}; // if/else
x = (x>0)? x : -x ; // assegnazione condizionale
switch switch(a){ // if multiplo non necessariamente mutuamente esclusivo case 2:{istruzioni;break;} // se a==2 poi esclude altri case 3:{istruzioni;break;} // se a==3 poi esclude altri case a>(b*2):{istruzioni;break;} // se a>(b*2) (valutato in esecuzione) case -3:{istruzioni;} // se a==-3 analizzera' comunque a<100 (no break) case a<100:{istruzioni;break;} // ultimo caso previsto default:{istruzioni;break;} // in ogni altro caso (facoltativo) }
while while(cond){istruzioni}; // esegue ripetutamente se cond. (forse mai) es. var i=0;while(++i<=10){alert(i)}; // conta da 1 a 10 do{istruzioni}while(cond); // esegue ripetutamente se cond. (almeno una volta) es. do{a=prompt('vuoi smettere?')}while(a.toUpperCase()!='SI');
Funzioni Math.
Ee  |abs(x)Valore assoluto |cos,sin,tan,acos,asin,atan,atan2trigonometriche in radianti
LN10 ln(e) |ceil(x)Arrotondamento all'intero superiore |exp,log(x)Esponenziali
LN2 ln(2) |ceil(x)Arrotondamento all'intero inferiore |pow(x,y)x y
LOG2Elog2(e) |round(x)Arrotondamento all'intero pi¨ vicino |sqrt(x)radice quadrata
LOG10Elog10(e) |max(x,y)Maggiore tra due numeri |random()Numero casuale tra 0 e 1
PIpi |max(x,y)Minore tra due numeri
Funzioni Array.
var v1=v1.concat(v2) Unisce due array
var s=v1.join('?')Restituisce una stringa con gli elementi di v1 separati da un carattere o una stringa (defualt ',')

Esempio v1=[3,5,6] stampa 3?5?6

Si pu˛ usare per stampare matrici (usando la funzione di stringa 'split()'): var mat=[[3,4,6],[2,4,7],[1,3,433]]; document.write('<table border><tr><td>'+mat.join('<tr><td>').split(',').join('<td>')+'</table>'); Stampa:
v1.reverse() Inverte l'ordine degli elementi del vettore
v1.sort() ordina un vettore alfabeticamente
v.sort(function(a,b){return (a-b)});// lo ordina numericamente
Funzioni Stringa. anchor();big();blink();bold();charAt();charCodeAt();concat();fixed();fontcolor();fontsize(); fromCharCode();indexOf();italics();lastIndexOf();link();match();replace();search(); slice();small();split();strike();sub();substr();sup();toLowerCase();toSource();toString(); toUpperCase()
Funzioni Varie stringa.length; escape();eval();isFinite();isNaN();number();parseFloat();parseInt();string();taint();unescape();untaint()
ProprietÓ screen .height .width
ProprietÓ function arguments[] ; caller; toString()
ProprietÓ function arguments[] ; caller; toString()
gnMath _a,_b,....,_z :variabili definite come 'a','b',...,'z' _A,_B,....,_Z :variabili definite come 'A','B',...,'Z' _include,_aleph,... :variabili con un spazio davanti include_,aleph_,... :variabili con un spazio in fondo _include_,_aleph_,... :variabili con un spazio davanti e in fondo VARIABILI Matematiche A , a , ag , ag , agBig , agBOTTOM , agMIDDLE , agTOP , aleph , alpha , and , angle , apix , approx , aq , aq , aqBig , aqBOTTOM , aqMIDDLE , aqTOP , at , at , atBig , atMIDDLE , atTOP , B , bar , bar , beta , biapix , bifreccia , biimp , bitilde , bra , cap , cg , cg , cgBig , cgBOTTOM , cgMIDDLE , cgTOP , coincide , comma , cq , cq , cqBig , cqBOTTOM , cqMIDDLE , cqTOP , cr , Csi , Csi , csi , ct , ct , ctBig , ctBOTTOM , ctBOTTOM , ctMIDDLE , ctTOP , cuori , cup , Delta , delta , diesis , diff , dot , dot , dots , downarrow , Downarrow , dp , E , empty , epsilon , eq , erba , eta , exists , f , fiori , forall , Gamma , gamma , ge , grades , gt , H , I , imm , include , included , includedeq , includeeq , infty , inset , int , intBig , intBOTTOM , intMIDDLE , intTOP , iota , Jota , Kappa , kappa , ket , Lambda , lambda , leftarrow , Lefttarrow , leq , lev , line , lt , M , minus , mu , N , n0 , n1 , n2 , n3 , n4 , n5 , n6 , n7 , n8 , n9 , nablagiu , ne , noinclude , nolispe , not , notinset , nu , nu , O , o , Omega , Omega , omega , omegabar , overscore , P , p , pc , pe , Phi , phi , PI , pi , picche , plus , pm , point , PPI , prop , Psi , psi , psi , pv , qp , quadri , Re , registered , ret , rho , rightarrow , Rigtharrow , root , Sigma , sigma , slash , square , SSigma , star , T , tau , teta , tilde , times , tm , tp , tp , Tr , tra , tx , underscore , Uparrow , vel , X , Y , yupsilon , Z , zeta bold(a,b,...,u) :restituisce in bold la stringa a+b+....+u compatta(a,b,...,u) :restituisce la stringa a+b+..+u (come join) compattaABvC(X,y,Z):restituisce una stringa X+(B+y[0],B+y[1],..,B+y[n-1])+Z ;serve per costruire righe o colonne (header, corpo ripetuto, tail) fontChar(f,c) :restituisce il carattere numero c del font f. frac(num,den) :restituiste la stringa html per stampare una frazione join(a,b,...,u) :restituisce una stringa a+b+...+u (per continuare a usare la virgola come accorpatore) l(a,b,...,u) :restituisce una stringa dove a,b,...,u sono impacchettati in una riga di tabella in modo da impedire al browser di andare a capo, in pratica forza la stampa in linea lc(a,b,...,u) :come l() ma con centratura verticale (utile per le frazioni) mat31(a,b,c) :restituisce 3 dati incolonnati log10(x) :restituisce LOG in base 10 di x overline(x) :per mettere il simbolo di vettore su x pow(a,b) :restituisce b in apice rispetto ad a red(a,b,...,u) :restituisce in bold la stringa a+b+....+u say('x') :stampa il nome di una variabile seguito dal suo valore sayl('x') :idem e va a capo ssay('a','b',...,'u') :stampa il nome e i valori di una lista di variabili saySymbols() :stampa tutti i simboli presenti in gnmath sub(a,b) :restituisce b in sub rispetto ad a sup(a,b) :restituisce b in sup rispetto ad a toVett(a,b,...,u) :restituisce un 'vettore' con dentro a,b,...,u w(x) :stampa x ww(a,b,.....,u) :stampa a,b,...,u wwl(a,b,....,u) :stampa a,b,...,u e poi va a capo
gnrandom // en(x) Esponential Notation // trunc(x,n) // sn(x) Scientifi Notation // intrnd(a,b) // realrnd(a,b) // trunc(x,n) // round(x,n){ // hide(x,n){ // construct a vector with many wrong results and the n-th result correct // hide2(x,n){ // idem like hide but with alternate sign to confuse ideas // rnd(){return Math.random()} // returns a real number between 0-1 // intrnd(a,b) // realrnd(a,b){ // return a real number between a and b // scegli(a) // choise(a) // E(x) // mischia(v){ // scambia (lunghezza Vettore*4) volte coppie del vettore // intero(a,b)
gnGraph // drawArc(x,y,l,h,alpha0,alpha1): draw an arc of oval from alpha0 to alpha1 (radians) // drawImage(x,y,fileName) : draws an image (fileName) in x,y // drawOval(x,y,width,heigth): draw an oval (or circle) (use last setColor color) // drawLine(x0,y0,x1,y1): draws a line from x0,y0 to x1,y1 // drawRect(x0,y0,width,heigth): draws a rectangle // drawString(s,x,y): draws a strings s in x,y // fillArc(x,y,l,h,alpha0,alpha1): draw a filled arc of oval from alpha0 to alpha1 (radians) // fillRect(x0,y0,width,heigth,color): draw a filled rectangle (need color) // fillOval(x,y,width,heigth): draw a filled oval (or circle) (use last setColor color) // setColor(c); sets the color of next figures to be c (unsetted color is black) // setPoint(x,y); draw a point in x,y (black or of the color setted by setColor()
for
// ------------------- FUNZIONI ------------------------------------------- <head><script> // alcuni esempi function dw(x){document.writeln(x);} function quadrato(x){var y=x*x;return y;} function prodottoScalare(v1,v2){for(var i=0,s=0;i<=v1.length-1;i++){s+=v1[i]*v2[i]}; return s;} function fact(x){return ( (x<=1)? 1 : x*fact(x-1) ); }; </script></head> <script> dw('quadrato di 2='+quadrato(2)+'<br>'); dw('prodotto scalare di [1,4] e [2,-3]='+prodottoScalare([1,4],[2,-3])+'<br>'); dw('5!='+fact(5)); </script> function max(){ // funzione a numero di argomenti variabile var m=Number.NEGATIVE_INFINITY; for(var i=0;i<arguments.length;i++){ if (arguments[i]>m) {m= arguments[i];} } return m; } a=5;b=34;c=1;d=-12;e=21; alert(max(a,b)); alert(max(a,c,e)); alert(max(a,b,c,d,e)); // varie ricerche max alert(max.toString()); // visualizza il listato della funzione max funzione=prompt('fornire la funzione in x'); // chiede la funzione eval('function f(x){' + funzione + '}'); // crea la funzione dinamicamente alert (f.toString()); // segnala il suo valore per x=1 // ------------------- OGGETTI ------------------------------------------- function Complex(x,y){ this.r=x; this.i=y; this.modulo=function(){ return Math.sqrt(this.r*this.r+this.i*this.i); } this.coniuga=function(){ this.i *= -1; // effettua la coniugazione return (new Complex(this.r,this.i)); // ma la restituisce anche } this.toString=function(){ return ( this.r+ '+ ' +this.i+'<b> i</b> ' ); } }; Complex.somma = function(a,b){return new Complex( a.r+b.r, a.i+b.i );} Complex.zero = new Complex(0,0); a= new Complex(1,2); b= new Complex(-1,2); c = Complex.somma(a,b); document.writeln(a+'<br> '+b+'<br> '+c+'<br> '+c.coniuga()); // stampa: 1+ 2 i -1+ 2 i 0+ 4 i 0+ -4 i // Recupero delle proprietÓ e metodi di istanza: for (p in a){document.writeln('<br>'+p+'='+a[p])}; /* stampa: r=1 i=2 modulo=function(){ return Math.sqrt(this.r*this.r+this.i*this.i); } coniuga=function(){ this.i *= -1; // effettua la coniugazione return (new Complex(this.r,this.i)); // ma la restituisce anche } */ // Recupero delle proprietÓ e metodi di classe: for (p in Complex){document.writeln('<br>'+p+'='+Complex[p])}; /* stampa: somma=function(a,b){return new Complex( a.r+b.r, a.i+b.i );} zero=0+ 0 i */ // ------------------- ARRAY ------------------------------------------- // join e array di oggetti v = [new Complex(1,3),new Complex(-1,3),new Complex(1,-3)] document.writeln(v.join('<br>')); // stampa: 1+ 3 i ,-1+ 3 i ,1+ -3 i // split e regular espression s = " 12,23 4 5 65,2;66;1"; // una stringa contenente numeri v = s.split(/[,\s;]/) // crea un vettore dividendola dove trova "," spazio oppure ";" document.writeln(v.join()+'<br>'); // lo converte in stringa e la stampa: 12,23 4 5 65,2;66;1 document.writeln('<table border=1><tr><td>'+v.join('<tr><td>')+'</table>'); // lo converte in stringa separando gli elementi con '<tr><td>' // stampa quindi una colonna/tabella v.reverse(); // lo inverte document.writeln(v.join()+'<br>'); // v=[1,66,2,65,5,4,23,12] v=v.concat(222,333,444); // lo riscrive concatenandovi 3 elementi document.writeln(v.join()+'<br>'); // v=[1,66,2,65,5,4,23,12,222,333,444] v.sort() // lo ordina lessicograficamente document.writeln(v.join()+'<br>'); // v=[1,12,2,222,23,333,4,444,5,65,66] v.sort(function(a,b){return (a-b)});// lo ordina numericamente document.writeln(v.join()+'<br>'); // v=[1,2,4,5,12,23,65,66,222,333,444] v.sort(function(a,b){return (a%2-b%2)});// lo ordina sulla base del modulo 2 document.writeln(v.join()+'<br>'); // v=[2,4,12,66,222,444,1,5,23,65,333] v2=v.slice(0,3); // ne prende i primi tre elementi document.writeln(v2.join()+'<br>'); // v=[2,4,12] v3=v.slice(3,-1); // ne prende gli elementi dal quarto al penultimo document.writeln(v3.join()+'<br>'); // v=[66,222,444,1,5,23,65] stringa=v3.join(); // ------------------- ESPRESSIONI REGOLARI ---------------------------------- // sono le stesse del PERL var a="stringa molto (pippo) lunga con parola pippo sbagliata molte (pippo) volte"; a=a.replace(/pippo/gi,"pluto"); // Ora Ŕ a posto document.writeln(a.match(/[aml]/g));// segnala a,m,l,l,l,a,a,l,a,l,a,l,a,a,m,l,l,l // ------------------- FUNZIONI PROPRIETARIE --------------------------- var a=127.25;document.writeln(a.toString(2));//1111111.01 document.writeln(a.toString(3));//11201.02020202020202020202020202020 document.writeln((255323223).toString(16).toUpperCase());//F37EC57 document.writeln(parseInt("200",3));// 18 eval(stringa);//il valore di (stringa) diventa l'istruzione eseguita Math. abs .floor .round .ceil .exp .log .min(a,b) .max(a,b) .pow(base,espon.) .sqrt .sin .cos .tan .tan .asin .acos .PI .random() String.fromCharCode(i) // carattere unicode i stringa. anchor big bold charAt charCodeAt concat fixed fontcolor fontsize indexOf italics lastIndexOf link match replace search slice small split strike sub substring sup toLowerCase toUpperCase toSource // ------ LIBRERIA GRAFICA: http://digilander.iol.it/areatecno/funzioni.txt --- (da verificare: non consolidata) setColor("red"); point(x,y);punto(x,y); drawLine (x0,y0,x1,y1); drawRectangle(x0,y0,l,h) drawOval(x0,y0,r1,r2); drawPicture(x0,y0,nomeFile); moveAt(x,y); fillRectangle(x0,y0,l,h); fillOval(x0,y0,r1,r2); drawString(s,x0,x1);