Documente Academic
Documente Profesional
Documente Cultură
efectuarea operatiilor grafice intr-un obiect de textura din afara ecranului afisarea obiectului de textura redefinirea functiei update astfel incat ea sa nu stearga ecranul intre doua desenari succesive
Se observa ca s-au obtinut mai intai dimensiunile zonei ocupate de applet, s-a creat un obiect imagine cu aceste dimensiuni, apoi un obiect de textura, pe baza acestei imagini.
modificarea functiei paint astfel incat imaginea inainte de a fi afisata este pregatita in contextul grafic al texturii extra ecran.
public void paint(Graphics g) { double alfa= nr_sec * Math.PI /30.; GraficaExtraEcran.clearRect(0,0, l, h ); // sterge vechea imagine
stergerea vechii imagini in obiectul textura, pentru a nu afecta ecranul, crearea noii imagini in obiectul textura extra ecran, deasemenea fara a afecta imaginea de pe ecran afisarea imaginii ceasului din textura pe ecran, cu ajutorul functiei drawImage() 1
Ultima etapa se desfasoara intr-un timp mult mai scurt decat cel necesar construirii imaginii direct pe ecran
In acest fel metoda update() nu mai sterge ecranul intre doua desenari succesive. Noua imagine, cu dimensiunile applet-ului, este afisata peste cea veche. De notat ca pentru a obtine animatia, vechea imagine a fost totusi stearsa, dar in obiectul textura din afara ecranului. Exemplu. Sprer deosebire de applet-ul Ceas, care desena un cerc de dimensiune fixa, urmatorul applet, CeasModificat, va desena un cerc avand raza egala cu R = min(l,h)/2-20, unde l si h sunt latimea respectiv inaltimea zonei applet definita prin tag-ul HTML:
<applet code=CeasModif width=400 height=300>
} public void run() { while (fir != null) { nr_sec++; repaint(); try { Thread.sleep(1000); } catch(InterruptedException e) {} } } public void stop() { fir.start(); fir = null; } public void paint(Graphics g) { double alfa= nr_sec * Math.PI /30.; GraficaExtraEcran.clearRect(0,0, l, h ); GraficaExtraEcran.setColor(Color.red); GraficaExtraEcran.drawOval(5,5,R+R+10, R+R+10); GraficaExtraEcran.setColor(Color.blue); GraficaExtraEcran.drawLine(xc,yc, (int)(xc+(R-10)*Math.cos(alfa)), (int)(yc+(R-10)*Math.sin(alfa)) );
Executati exemplul Observatie. Determinarea dimensiunilor zonei applet si a razei crnometrului este realizata prin secventa:
Rectangle ZonaAp = bounds(); l = ZonaAp.width ; h = ZonaAp.height; R = (l<h?l:h)/2 -20;
S-a definit un obiect dreptunghi, ZonaAp, care a fost fixat la marginile applet-ului.
Clasa Integer
Obiectul Integer este produs automat de clasa Integer, care transforma o valoare de tip int intr-un astfel de obiect. Sunt furnizate si metodele de conversie String <-> int
public final class java.lang.Integer extends java.lang.Number
// Fields public final static int MAX_VALUE; public final static int MIN_VALUE; // public public // public public public public public public public public public Constructors Integer(int value); Integer(String s); Methods double doubleValue(); boolean equals(Object obj); float floatValue(); static Integer getInteger(String static Integer getInteger(String static Integer getInteger(String int hashCode(); int intValue(); 1.8.12 long longValue(); 1.8.13 s); s, int
public static int parseInt(String public static int parseInt(String public public public public public public
radix);
static String toBinaryString(int i); static String toHexString(int i); static String toOctalString(int i); String toString(); static String toString(int i); static String toString(int i, int radix); s); s, int
radix);
Blocarea accesului altor fire la o metoda synchronized void scroll () { dist--; // Move string to left // If string has disappeared to the left, move back to right edge if (dist + ((s.length()+1)*(h *5 / 11)) == 0){ dist=l; } repaint(); }
Clasa Component
Clasa Component este o clasa abstracta pentru foarte multe clase AWT. Ea reprezinta o entitate ce are pozitie, marime, poate primi evenimente si poate fi reprezentata pe ecran.
public abstract class java.awt.Component extends java.lang.Object implements java.awt.image.ImageObserver { // Metode importante public Rectangle bounds(); 1.10.3 public boolean keyDown(Event evt, int key); 1.10.31 public boolean keyUp(Event evt, int key); 1.10.32 public public public public public public boolean boolean boolean boolean boolean boolean mouseDown(Event evt, int x, int y); 1.10.41 mouseDrag(Event evt, int x, int y); 1.10.42 mouseEnter(Event evt, int x, int y); 1.10.43 mouseExit(Event evt, int x, int y); 1.10.44 mouseMove(Event evt, int x, int y); 1.10.45 mouseUp(Event evt, int x, int y); 1.10.46
image, ImageObserver observer); image, int width, int height, ImageObserver observer); public Image createImage(ImageProducer producer); 1.10.6 public Image createImage(int width, int height); 1.10.7 public boolean 1.10.54 prepareImage(Image image, ImageObserver observer); public 1.10.55 prepareImage(Image image, int width, int height, ImageObserver observer); public boolean imageUpdate(Image img, int flags, int x, 1.10.24 int y, int w, int h); public public public public public public public public public void deliverEvent(Event evt); 1.10.8 boolean handleEvent(Event evt); 1.10.22 void disable(); 1.10.9 void enable(); 1.10.10 void enable(boolean cond); 1.10.11 Color getBackground(); 1.10.12 void setBackground(Color c); 1.10.67 Color getForeground(); 1.10.16 void setForeground(Color c); 1.10.69
public Font getFont(); 1.10.14 public void setFont(Font f); 1.10.68 public FontMetrics getFontMetrics(Font public Graphics getGraphics(); 1.10.17 public Container getParent(); 1.10.18 public public public public public public public public public public public
font); 1.10.15
boolean gotFocus(Event evt, Object what); 1.10.21 boolean lostFocus(Event evt, Object what); 1.10.39 void nextFocus(); 1.10.48 void requestFocus(); 1.10.63 void void void void void void void
paint(Graphics g); 1.10.49 paintAll(Graphics g); 1.10.50 update(Graphics g); 1.10.74 repaint(); 1.10.59 repaint(int x, int y, int width, int height); 1.10.60 repaint(long tm); 1.10.61 repaint(long tm, int x, int y, 1.10.62 int width, int height); public void reshape(int x, int y, int width, int height); 1.10.64 public void resize(Dimension d); 1.10.65 public void resize(int width, int height); 1.10.66 public public public public public // . . . } void show(); 1.10.70 void show(boolean cond); 1.10.71 Dimension size(); 1.10.72 String toString(); 1.10.73 void validate(); 1.10.75
Efect: deseneaza un vector de caractere de lungime length utilizand fontul si culoarea din contextul grafic curent. Argumente: data- vectorul de caractere offset- offset in data length- numarul de caractere ce vor fi desenate x- coordonata x y- coordonata y
data[], int offset,int
length, int
x, int
y)
Acelasi efect si aceleasi argumente, doar caracterele sunt memorate intr-un vector de octeti 6
Exemplu. Afisarea unui text care se deplaseaza in zona applet. Exemplul este preluat, cu mici modificari, din cartea Ghid de programare in JAVA de Peter Norton, aparuta la Editura Teora in 1997 in traducerea lui Florin Moraru.
import java.awt.Graphics; import java.awt.Font; /** * Peter Norton's Guide to Programming Java * The Java TextScroll Applet * This applet is used to scroll a text banner across the screen * The applet takes TEXT, LATIME, and INALTIME as parameters. */ public class TextScroll extends java.applet.Applet implements Runnable { int h; int l; char SirVector[]; String s = null; // // // // Height of applet in pixels Width of applet in Pixels Output string in array form Input string containing display text // Thread to control processing // Length of delay in milliseconds
Thread FirulScroll = null; int asteptare; boolean FirSuspendat = false; int dist=0;
int CitesteParamInt (String nume, int implicit){ String sircitit = null; int val; sircitit = getParameter (nume); if (sircitit == null){ val = implicit; } else { val = Integer.parseInt(sircitit); // conversie string->integer } return val; } public void init() { l = CitesteParamInt ("latime", 150); h = CitesteParamInt ("inaltime", 50); asteptare = CitesteParamInt ("asteptare", 50); //ms resize(l,h); // Set font based on height setFont(new Font("TimesRoman",Font.BOLD,h - 2)); s = getParameter("text");// Read input text, if null use default if (s == null) { s = "Applet-ul Java TextScroll in actiune"; } SirVector = new char [s.length()]; s.getChars(0,s.length(),SirVector,0);
public void stop() { FirulScroll = null; } // While applet is running pause then scroll text public void run() { while (FirulScroll != null) { try { Thread.sleep(asteptare); } catch (InterruptedException e) { } scroll(); } FirulScroll = null; }
synchronized void scroll () { dist--; // Move string to left // If string has disappeared to the left, move back to right edge if (dist + ((s.length()+1)*(h *5 / 11)) == 0){ dist=l; } repaint(); } public void paint(Graphics g) { g.drawChars(SirVector, 0, s.length(), dist,4 *h / 5); } // Suspend thread when mouse is pushed, resume when pused again public boolean mouseDown(java.awt.Event evt, int x, int y) { if (FirSuspendat) { FirulScroll.resume(); } else { FirulScroll.suspend(); } FirSuspendat = !FirSuspendat; return true; } }
Executa exemplul
/** * Peter Norton's Guide to Programming Java * The Java TextScroll Applet * This applet is used to scroll a text banner across the screen * The applet takes TEXT, LATIME, and INALTIME as parameters. */ public class ScrollModif extends java.applet.Applet implements Runnable { int h; // Height of applet in pixels int l; // Width of applet in Pixels char SirVector[]; // Output string in array form String s = null; // Input string containing display text String inalt = null; // Input string containing height String lat = null; // Input string containing width Thread FirulScroll = null; // Thread to control processing int asteptare=50; // Length of delay in milliseconds boolean FirSuspendat = false; int dist; // -------------------------------Graphics GraficaExtraEcran; Image ImagineText; public void init() { lat = getParameter ("latime"); inalt = getParameter ("inaltime"); if (lat == null){ // Read width as input l = 150; // If not found use default } else { l = Integer.parseInt(lat); // Convert input string to integer } if (inalt == null){ // Read height as input h = 50; // If not found use default } else { h = Integer.parseInt (inalt); // Convert input string to integer } resize(l,h); // Set font based on height setFont(new Font("TimesRoman",Font.BOLD,h - 2)); s = getParameter("text");// Read input text, if null use default if (s == null) { s = "Sir care se deplaseaza fara palpaire..."; } SirVector = new char [s.length()]; s.getChars(0,s.length(),SirVector,0); // --------------------------// Pentru reducerea palpairii: // --------------------------ImagineText = createImage ( l, h ); GraficaExtraEcran = ImagineText.getGraphics(); GraficaExtraEcran.setFont ( new Font("Courrier",Font.BOLD, h-2)); } public void start() { if(FirulScroll == null) { FirulScroll = new Thread(this); FirulScroll.start(); } }
public void stop() { FirulScroll = null; } public void run() { while (FirulScroll != null) { try {Thread.sleep(asteptare);} catch (InterruptedException e){} scroll(); } FirulScroll = null; }
synchronized void scroll () { dist--; // Move string to left // If string has disappeared to the left, move back to right edge if (dist + ((s.length()+1)*(h *5 / 11)) == 0){ dist=l; } repaint(); } // --------------------------// Pentru reducerea palpairii: // --------------------------public void paint(Graphics g) { // g.drawChars(SirVector, 0, s.length(), dist,4 *h / 5); Rectangle dreptunghi = bounds(); GraficaExtraEcran.clearRect(0,0, dreptunghi.width, dreptunghi.height); GraficaExtraEcran.drawChars(SirVector, 0, s.length(), dist,4 *h / 5); g.drawImage(ImagineText, 0, 0, this); } public void update ( Graphics g) { paint (g); } public boolean mouseEnter(java.awt.Event evt, int x, int y) { if ((asteptare-=10)<5) asteptare =5; return true; } public boolean mouseDown(java.awt.Event evt, int x, int y) { if ((asteptare +=10)>300) asteptare =300; return true; } }
Fata de exemplul precedent sunt tratate doua evenimente legate de mouse: - intrarea mouse-ului in zona applet - se mareste viteza de defilare - apasarea butonului - se scade viteza de defilare Executa exemplul
import java.awt.Color; /** * Peter Norton's Guide to Programming Java * The applet takes BACKGROUND, TEXT, WIDTH, and HEIGHT * as parameters. */ public class ScrollModif2 extends ScrollModif { String bs = null; Color backColor; public void init() { super.init(); // Input string containing background color // Background color
bs = getParameter("background"); if (bs == null){ backColor = Color.white; } else { // culoarea este data in hexa backColor = new Color(Integer.parseInt(bs,16)); } setBackground(backColor); } }
Executa exemplul
Deschiderea unei ferestre. Meniu, butoane Exemplul este preluat, cu mici modificari, din cartea Ghid de programare in JAVA de Peter Norton, aparuta la Editura Teora in 1997 in traducerea lui Florin Moraru. Aplicatia este executata sub forma unui applet si deschide o noua fereastra cu un meniu si trei butoane. 11
import java.awt.*; public class Butoane extends Frame { Label Eticheta = new Label("Sa numaram ..."); public static void main(String args[]){ Butoane win = new Butoane(); } public Butoane() { super("Butoane"); InsereazaMeniu(); InsereazaButoane(); pack(); resize(400,400); show(); } void InsereazaMeniu() { MenuBar menubar = new MenuBar(); Menu Fisier = new Menu("Fisier"); Fisier.add("Termina"); menubar.add(Fisier); setMenuBar(menubar); } void InsereazaButoane() { add("North",Eticheta); Eticheta.setAlignment(Label.CENTER); Panel panou = new Panel(); panou.add(new Button("unu")); panou.add(new Button("doi")); panou.add(new Button("trei")); panou.add(new Button("patru")); add("Center",panou); } public boolean handleEvent(Event event) { if(event.id==Event.WINDOW_DESTROY){ System.exit(0); return true; }else if(event.id == Event.ACTION_EVENT && event.target instanceof MenuItem){ if("Termina".equals(event.arg)){ System.exit(0); return true; }else{ return false; } }else if(event.id == Event.ACTION_EVENT && event.target instanceof Button){ Eticheta.setText((String) event.arg); return true; }else return false; } }
JavaScript
1. Introducere
Tabelul 1. Comparatie intre JavaScript si Java JavaScript Interpretat (necompilat) si executat la client. Java Compilat in format bytecode, descarcat de pe server si executat la client.
Orientat pe obiecte. Tipul obiectelor nu se precizeaza explicit. Orientat pe obiecte, bazat pe clase. Obiectele se Mostenirea - printr-un mecanism de prototipuri, dar se pot adauga pot grupa in clase si instante; mostenire pe baza ulterior si alte proprietati sau metode. ierarhiei claselor. Nu se pot adauga ulterior si alte proprietati sau metode claselor si instantelor. Cod sursa integrat in pagina HTML. Tipul variabilelor nu se precizeaza la declarare, ci se deduce din utilizare (stabilirea dinamica a tipului variabilelor). NU se poate scrie direct pe hard disk. Exemplul 1. <HTML> <HEAD> <TITLE>Primul Script (ex.1)</TITLE> </HEAD> <BODY> <CENTER> 13 Applet-uri accesate din pagini HTML . Tipul variabilelor TREBUIE precizat la declarare (stabilirea statica a tipului variabilelor). NU se poate scrie direct pe hard disk.
<H1>Primul Script</H1> Astazi este <SCRIPT Language="JavaScript"> var data_si_ora = new Date(); document.write(data_si_ora); </SCRIPT> </CENTER> </BODY> </HTML> Executa exemplul 1
<HTML> <HEAD> <TITLE>Primul Script</TITLE> </HEAD> <BODY> <CENTER> <H1>Primul Script</H1>
Astazi
<SCRIPT Language="JavaScript"> <!---------------------------var data_si_ora = new Date() document.write(" este " + data_si_ora + " </CENTER> ") //---------------------------> </SCRIPT> </BODY> </HTML>
Executa exemplul 2 (c1-ex2 . htm ) apoi vizualizati codul sursa al documentului afisat (CTRL/U in Netscatpe) Vizualizati fisierul html pentru exemplul 2 (c1-ex2-txt . txt ) Observatie privind functionarea metodei document.write() Daca browser-ul permite vizualizarea codului sursa HTML, atunci dupa incarcarea fisierului exemplu din coloana I-a, se va vizualiza textul din coloana a II-a. Se observa deci, ca in ambele din exemplele de mai sus codul JavaScript a disparut, fiind inlocuit cu efectul sau. Acest lucru nu este general valabil, ci doar in cazurile de utilizare a metodei document.write(), care modifica documentul HTML original. Cauza o constituie faptul ca optiunea View Page Source din browser afiseaza documentul curent (modificat de catre script) si nu documentul original HTML.
<HTML> <HEAD> <TITLE>Primul Script (ex.1) </TITLE> </HEAD> <BODY> <CENTER> <H1>Primul Script</H1> Astazi este
<BASE HREF="file:/F|/PSG/PSD_JA~1/ js2000/Cursuri/"> <HTML> <HEAD> <TITLE>Primul Script (ex.1)</TITLE> </HEAD> <BODY> <CENTER> <H1>Primul Script</H1>
14
<SCRIPT Language="JavaScript"> var data_si_ora = new Date(); document.write(data_si_ora); </SCRIPT> </CENTER> </BODY> </HTML> <HTML> <HEAD> <TITLE>Primul Script</TITLE> </HEAD> <BODY> <CENTER> <H1>Primul Script (ex.2)</H1> Astazi <SCRIPT Language="JavaScript"> <!---------------------------var data_si_ora = new Date() document.write(" este " + data_si_ora + " </CENTER> ") //---------------------------> </SCRIPT> <P>... restul documentului </BODY> </HTML>
Astazi este Sat Nov 04 10:50:04 E. Europe Standard Time 2000 </CENTER> </BODY> </HTML>
<BASE HREF= "file:/F|/PSG/PSD_JA~1/js2000/Cursuri/" > <HTML> <HEAD> <TITLE>Primul Script</TITLE> </HEAD> <BODY> <CENTER> <H1>Primul Script (ex.2)</H1> Astazi este Sat Nov 04 10:51:58 E. Europe Standard Time 2000 </CENTER> <P>... restul documentului </BODY> </HTML>
<SCRIPT Language="JavaScript"> <!---------------------------var data_si_ora = new Date() document.write(" este " + data_si_ora + " </CENTER> ") //---------------------------> </SCRIPT>
Mascarea codului prin comentariile <!--- si //---> este necesara pentru versiuni timpurii ale browserelor cunoscute
si un URL 15
Fisierele JavaScript externe nu pot contine decat declaratii si functii JavaScript, iar extensia trebuie sa fie .js, si serverul trebuie sa mapeze extensia .js la tipurile MIME application/x-javascript, pe care le va retransmite in header-ul HTTP header. Aceasta cerinta nu se aplica fisierelor locale.
Executa exemplul de mai sus Elementul HTML onLoad=actiune precizeaza tratarea unui eveniment, aici incarcarea fisierului HTML curent. In cazul nostru actiune reprezinta apelul functiei JavaScript alert(text)care are ca efect afisarea textului intr-o caseta de dialog cu un buton ok. Versiunea limbajului JavaScript poate fi precizata astfel:
<SCRIPT LANGUAGE="JavaScript1.3"> // ... </SCRIPT>
Tabelul 3. JavaScript si versiunile Netscape Navigator Netscape Navigator Navigator < 2.0 Navigator 2.0 Navigator 3.0 Navigator 4.0-4.05 Navigator 4.06-4.5 Versiunea implicita JavaScript nu accepta JavaScript JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.3 Tipul de <SCRIPT> acceptat <SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript1.1">
precedente
<SCRIPT LANGUAGE="JavaScript1.2">
precedente
<SCRIPT LANGUAGE="JavaScript1.3">
precedente
Constante JavaScript
Numere ca 42 ori 3.14159. Logice (Boolean) true sau false. Siruri: "Salut!", 'Apostrof' sau "Un 'exemplu' de siruri 'incluse' in altul"
null undefined
O expresie ce contine doar o variabila neinitializata, de exemplu n, va fi afisata undefined, iar daca mai contine si alti operanzi cu valori cunoscute, de exemplu n+3, va fi afisata NaN Caractere speciale in JavaScript Caracter
\b \f \n \r \t \' \" \\ \XXX \xXX \uXXXX
Semnificatie Backspace Form feed New line Carriage return Tab Apostrof Ghilimele Backslash (\) Caracterul cu codul octal XXX [0, 377] (codificare Latin-1) .
Caracterul cu codul hexa XX in [00, FF] (codificare Latin-1) Caracterul Unicode cu codul hexa [0000, FFFF]
Variabile
Identificator (ca in limbajul C: incep cu o litera, apoi litere si/sau cifre) Declarare (nu este obligatorie; nu necesita precizarea tipului) var i, n, pi; var Student = "Ionescu Ion"; var nmax =100, xmax=1.009, k;
Tipul variabilelor se precizeaza dinamic, in timpul executiei scriptului. Este posibil ca pe durata unei executii unei 17
variabile sa i se modifice tipul. Exemplu var an; // ... an = 2000; // an = "Sfarsit mileniu" Aceste atribuiri sunt corecte, a doua provoaca modificarea tipului numeric in tipul sir de caractere.
Expresii
In JavaScript sunt admise urmatoarele categorii de expresii:
aritmetice: rezultatul este un numar real (ex. 1.41) siruri de caractere ("Abc" sau "123") logice: rezultatul poate fi true sau false.
Operatori
[] . new (crearea unei instante) () ! ~ ++ -- - (unar) + (unar) typeof void delete (distrugerea unei instante) * % / (totdeauna furnizeaza ca rezultat un numar real) + << >> >>> < > <= >= == != === (egalitate stricta: valoare si tip) !== (inegalitate stricta: operanzii nu au aceeasi valoare si/sau nu sunt de acelasi tip) & ^ | && || ?: = += -= *= /= %= <<= >>= >>>= &= ^= |= ,
impune ca expresia sa fie evaluata fara a returna un rezultat. Poate fi util in specificarea unui link: 18
Operatorul '+' aplicat la siruri => concatenare Exemplul 3 <HTML> <HEAD> <TITLE>Exemplul 3</TITLE> </HEAD> <BODY> <CENTER> <H1>Exemplul 3</H1> <SCRIPT Language="JavaScript"> var n=2 , tagH2="</H2>"; document.write("<H2>1 + 1 =" + document.write("<H2>1 + 2 =" + document.write("<H2>1 + 3 =" + document.write("<H2>1 + 4 =" + </SCRIPT> </CENTER> </BODY> </HTML> Executa exemplul 3 Numai operatorul + provoaca o conversie a tipului numeric in tipul sir de caractere. Ceilalti operatori au o comportare diferita. Spre exemplu daca "55"+5 are ca valoare "555", expresia "55"-5 are ca valoare 50.
Instructiuni JavaScript
Instructiunile JavaScript pot fi terminate sa nu cu caracterul ; . Acest caracter este obligatoriu doar atunci cand sunt mai multe instructiuni pe acelasi rand. expresie ; if ( conditie ) instructiune if ( conditie ) instructiune_1 else instructiune_2 for ( expr1 ; expr2 ; instructiune if ( a == undefined) document.write("A = ?") expr3 ) for (i = 0; i < a.length; i++) { if (a[i] = theValue); break; }
var result = "" for (var i in obj) { result += obj_name + "." + i + " = " +
x=1;
19
n = 0 x = 0 while( n < 3 ) { n ++ x += n } do { i+=1; document.write(i); } while (i<5); var a, x, y var r=10 with (Math) { a = PI * r * r x = r * cos(PI) y = r * sin(PI/2) }
switch (expr) { case "Oranges" : document.write("Oranges are $0.59 a pound.<BR>"); break; case "Apples" : document.write("Apples are $0.32 a pound.<BR>"); break; case "Bananas" : document.write("Bananas are $0.48 a pound.<BR>"); break; case "Cherries" : document.write("Cherries are $3.00 a pound.<BR>"); break; default : document.write("Sorry, we are out of " + i + ".<BR>"); }
switch (expression){ case label : statement; break; case label : statement; break; ... default : statement; }
Nu utilizati goto !
2. continue [label] 20
Executa exemplul 4
Casete de dialog
Casetele de dialog reprezinta ferestre care au unul sau mai multe butoane, permitand atentionarea utilizatorului, solicitarea unei confirmari, sau a unei valori in cazul casetei 'prompt' care contine si un control de editare. alert(text) Provoaca aparitia unei casete cu un buton 'OK' si in care este afisat argumentul text. o caseta Displays an Alert dialog box with a message. confirm(text) Afiseaza o caseta de dialog ce contine tetul precizat ca argument si doua butoane: OK si Cancel. prompt ( text [ , valoare_initiala ] ) Provoaca aparitia unei casete cu un control de editare text in care utilizatorul va putea introduce un sir de caractere si un buton 'OK' . Controlul de editare este initializat cu valoare_initiala, daca acest argument este prezent, altfel este initializat cu textul (undefined). Exemplul 5 21
<HTML> <HEAD> <TITLE>Exemplu casete de dialog</TITLE> </HEAD> <BODY> <H3> <SCRIPT Language="javascript"> <!----------------------------if(confirm("Doriti un exemplu cu 'alert()'?")==true) alert("Mesaj de atentionare cu alert()"); document.write("Buna, " + prompt("Introduceti numele dv.","...") + " !"); //----------------------------> </SCRIPT> </H3> </BODY> </HTML>
Executati exemplul 5 Al doilea argument al lui promt(), valoare_initiala, poate fi un sir vid "". Rezultatul unui apel confirm() poate fi testat cu ajutorul instructiunii if. Exemplul 6
<HTML> <HEAD> <TITLE>Exemplu casete de dialog</TITLE> </HEAD> <BODY> <H3> <SCRIPT Language="javascript"> <!----------------------------var sir ; start1: sir = "Buna, " sir += prompt ("Introduceti numele dv.", ""); if( confirm(sir + "! Continuam ?") ) continue start1; alert("La revedere !"); //----------------------------> </SCRIPT> </H3> </BODY> </HTML>
Executati exemplul 6
Functii
In JavaScript functiile se definesc cu ajutorul cuvantului cheie function precizandu-se numele functiei si lista de argumente.
function EcuatieGrad_1(a,b) { if(a==0) return undefined else return -b/a }
Codul functiei este cuprins intre { }. Instructiunea return provoaca revenirea din functie. Daca s-a utilizat forma return expresie atunci se evalueaza expresia si rezultatul este transmis la locul apelului. Daca s-a utilizat doar return, atunci se revine la locul apelului fara a se garanta transmiterea unui anumit rezultat. 22
Transferul parametrilor este prin valoare, deci daca intr-o functie sa va modifica valoarea unui argument, aceasta modificare nu este transmisa mai departe. Nota. Exceptie de la aceasta regula fac argumentele vector sau obiect In JavaScript se pot defini si functii recursive:
function suma(n) { if (n<= 0) return 0 else return n + suma(n-1) }
Functiile trebuie sa fie definite in momentul cand sunt apelate. Se recomanda ca definitia functiilor sa fie plasata in <HEAD>, astfel incat sa poata fi apelate in <BODY>. Exemplul 7
<HTML> <HEAD> <TITLE>Exemplu functii</TITLE> <SCRIPT Language="javascript"> function EcuatieGrad_1(a,b) { if(a==0) return undefined else return -b/a } function suma(n) { if (n<= 0) return 0 else return n + suma(n-1) } </SCRIPT> </HEAD> <BODY> <H1>Exemple de utilizare a functiilor</H1> <H2> Solutia ecuatiei 2x+3=0 este x= <SCRIPT Language="javascript"> document.write( EcuatieGrad_1(2,3) ) </SCRIPT> </H2> <H2>1+2+...+10 = <SCRIPT Language="javascript"> document.write(suma(10)) </SCRIPT> </H2> </BODY> </HTML>
Executa exemplul 7
Functii Predefinite
eval(expr) Evalueaza sirul expr. Daca acesta reprezinta instructiuni, atunci vor fi executate. Pentru expresii aritmetice nu este necesara apelul functiei eval(). Exemplul 8
<HTML> <HEAD> <TITLE>Exemple eval()</TITLE> </HEAD> <BODY> <H3> Exemple eval:<li> eval( <SCRIPT Language="javascript"> <!---------------------------------------------------var sir , L="La", r=" revedere !"; sir = prompt ("Introduceti o expresie aritmetica",""); document.write(sir+') => "' + eval(sir)+'"'); alert("Valoarea expresiei este " + eval(sir)); sir = prompt ("Dati L+r",""); alert( eval(sir) ); document.write("<li>eval("+sir+ ') => "' + eval(sir)+'"'); //---------------------------------------------------> </SCRIPT> </H3> </BODY> </HTML>
Executa exemplul 8 isFinite(numar) Daca argumentul este NaN, infinit pozitiv sau negativ, atunci functia returneaza false, altfel returneaza true. isNaN(valoare) Returneaza true daca valoarea este NaN (Not a Number). parseImt (sir , [, baza_de_numeratie] ) parseFloat (sir) Analizeaza argumentul si-l converteste la int / float daca este un numar, returnand in acest caz valoarea convertita. Daca argumentul nu este un numar atunci se returneaza "NaN". Exemplul 9
<HTML> <HEAD> <TITLE>Exemplu parseInt()</TITLE> </HEAD> <BODY> <H3> <SCRIPT Language="javascript"> <!----------------------------------------------------
24
var nr , baza , rez; nr = prompt ("Scrieti un intreg intr-o baza oarecare"); baza = prompt ("Dati baza de numeratie folosita"); rez = parseInt(nr,baza); alert("Valoarea in zecimal este " + rez ); document.write("parseInt("+nr+","+baza+")=>"+rez); //----------------------------------------------------> </SCRIPT> </H3> </BODY> </HTML>
Executa exemplul 9 Number(obiect) String(obiect) Convertesc obiectul la un numar / sir. escape(sir_car) Converteste sir_car intr-un sir de caractere continand codul hexazecimal al fiecarui caracter din sir_car. unescape(sir_hexa) Argumentul este un sir ce contine coduri hexa. Functia unescape(sir_hexa) converteste argumentul intr-un sir de caractere. Exemplul 10
<HTML> <BODY>
<SCRIPT Language="javascript"> <!--------------------------var sir, sir_hexa ; sir = prompt ("Introduceti un sir ce sa contina ? = {} etc."); sir_hexa = escape(sir); alert("Functia escape(sir): returneaza" + sir_hexa); alert("Functia unescape(sir): returneaza" + unescape(sir_hexa)); //------> </SCRIPT> </BODY> </HTML>
Executa exemplul 10
Obiecte
Obiectele au asociate metode si proprietati. window.status = "Text" Pot fi definite si obiecte utilizator.
Gestiunea Evenimentelor
Tabel handler-e de evenimente Implementat
JavaScript 1.1
Eveniment Handler
onAbort onBlur onChange
Se executa codul JavaScript cod atunci cand utilizatorul renunta la incarcarea unei imagini. un element al unui formular, un cadru sau o fereastra pierde 'focus'-ul. un camp Select, Text, or Textarea pierde 'focus'-ul si valoarea sa a fost schimbata s-a efectuat clic pe un obiect al unui formular s-a efectuat clic pe un obiect al unui formular sau link. se aduce un obiect in fereastra browser window (dropping a file). incarcarea unui document sau a unei imagini a provocat o eroare o fereastra, cadru sau un element al unui formular a primit "input focus". este actionata o tasta este apasata o tasta este eliberata o tasta se termina incarcarea unei ferestre sau a tuturor cadrelor dintr-un tag FRAMESET . s-a apasat un buton s-a deplasat cursorul cursorul a parasit interiorul unei zone (image map) sau link . se deplaseaza din exterior peste un obiect. s-a eliberat un buton al mouse-ului 26
JavaScript 1.0
JavaScript 1.0
onClick JavaScript 1.2 DragDrop Error JavaScript 1.0 KeyDown KeyPress KeyUp Load onDblClick onDragDrop onError onFocus onKeyDown onKeyPress onKeyUp onLoad
se deplaseaza o fereastra sau un cadru. s-a resetat un formular (clic pe un buton Reset ). s-a redimensionat o fereastra sau un cadru. s-a selectat un text dintr-un element TEXT sau TEXTAREA. s-a efectuat 'submit' pentru un formular utilizatorul paraseste un document.
onAbort
Renuntarea la incarcarea unei imagini facand clic pe un link sau apasand butonul Stop al navigatorului Sintaxa
onAbort="handlerText" handlerText
Exemplu
<IMG NAME="aircraft" SRC="f15e.gif" onAbort="alert('You didn\'t get to see the image!')">
onBlur
Eveniment implementat in Javascript 1.3 pentru Alte versiuni
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window
JavaScript 1.0 JavaScript 1.1: event handler of Button, Checkbox, FileUpload, Frame, Password, Radio, Reset, Submit, and window
NOTE: In JavaScript 1.1, sau alte navigatoare onBlur nu are efect intr-un element FRAMESET . Exemple Exemplul 1: Verificarea introducerii unei valori Elementul cu numele "Obligat" trebuie sa aiba o valoare
<INPUT TYPE="text" VALUE="" NAME="Obligat" onBlur="verifica(this.value)">
onLoad , onUnload
27
onChange
JavaScript 1.3 FileUpload, Select, Text, Textarea JavaScript 1.0 Select, Text, si Textarea
in plus FileUpload
Urmeaza un alt exemplu, in care la fiecare modificare se va afisa continutul campurilor text de editare si numele lor. Observati utilizarea lui this, iar in functia Verifica(obiect) modul in care se obtine numele obiectului, valoarea sa si lungimea acestei valori.
<HTML> <HEAD> <TITLE>Exemplu tratare eveniment onChange</TITLE>
<SCRIPT Language="javascript"> <!----------------------------function Verifica( obiect ) { sir="La controlul "+ obiect.name +" s-a introdus '"; sir+= obiect.value.length==0 ? "(nimic)" : obiect.value; alert(sir+"'"); return true; } //----------------------------> </SCRIPT>
28
</HEAD> <BODY> <H3> <form> Introduceti un numar <input type="text" name="Numar" onChange="Verifica(this)"> <br> Introduceti un sir de caractere <input type="text" name="Sir" onChange="Verifica(this)"> </form> </H3> </BODY> </HTML>
onClick
Executes JavaScript code when a click event occurs; that is, when an object on a form is clicked. (A click event is a combination of the MouseDown and MouseUp events). Implementat Button, document, Checkbox, Link, Radio, Reset, Submit
Important . Daca handler-ul de evenimente returneaza false, atunci functie de tipul butonului se executa o actiune implicita:
Button-- nimic Buton Radio button si checkboxe-- nimic nu este selectat Buton Submit -- datele din formular nu sunt trimise Butonul Reset -- formular nu este initializat
Exemplu In exemplul care urmeaza se poate observa tratarea evenimentului onClick pentru elemente HTML tip radio, checkbox, reset, submit si link.
<HTML> <HEAD> <TITLE>Exemplu tratare evenimente onClick si onSubmit</TITLE> </HEAD> <BODY> <H3> <SCRIPT Language="javascript"> <!----------------------------function Radio (valoare) { var sir="Ati selectat " + valoare; return confirm(sir+". Sigur ?") ; } function Verific (ob) { if(ob.checked) return confirm('Chiar sunteti fumator ?');
29
else return confirm('Renuntati la fumat ?'); } function Gata () { return confirm("Trimiteti datele ?") ; } var sir_submit='Acum s-ar executa trimiterea datelor, dar se continua local.' var text_init='Prin initializare se pierd datele introduse. ' //--------------------------------------------------------------------------> </SCRIPT> <form onSubmit="alert(sir_submit); return false"> Categoria : <input type="radio" name="R" value="1" onClick="return Radio(this.value)">1 <input type="radio" name="R" value="2" onClick="return Radio(this.value)">2 <input type="radio" name="R" value="3" onClick="return Radio(this.value)" CHECKED>3 <br> <INPUT TYPE="checkbox" NAME="Promo" onClick="return Verific(this)" > Fumator <br><br> <input type="submit" value="Gata" onClick= "return Gata()"> <input type="reset" value="Initializare" onClick= "return confirm(text_init+'Doriti acest lucru ?')"> </form> <br><br> <A href="http://www.eed.usv.ro" onClick="return confirm('Doriti sa o vizitati ?')"> Pagina facultatii </A> </H3> </BODY> </HTML>
onDblClick
<HTML> <HEAD> <TITLE>Exemplu tratare onClick si onDblClick</TITLE> </HEAD> <BODY> <H3> <SCRIPT Language="javascript"> <!----------------------------var n_clic=0, n_2_clic=0 var efectuat="S-au efectuat " var si=' si ' var clic=' clicuri', dublu=' dublu' //--------------------------------------------------------------------------> </SCRIPT> Se va numara de cate ori s-a efectuat clic si dublu clic pe buton. <form>
30
<INPUT TYPE="button" NAME="B" value="Executati aici clic sau dublu clic" onClick="n_clic++" onDblClick="n_2_clic++" > <br><br> <input type="button" value="Afiseaza contori" onClick= "alert(efectuat +n_clic+clic+si+n_2_clic+dublu+clic)"> <input type="button" value="Initializare contori" onClick= "n_clic=0; n_2_clic=0"> </form> </H3> </BODY> </HTML>
onError
De exemplu se incearca window.location.href='inexistent.html' .onError poate apela:
null pentru a suprima mesajele de eroare JavaScript . Daca se face window.onerror = null, atunci utilizatorul nu va mai vedea erorile JavaScript din script. functie (textul_mesajului, URL, nr_linie_eronata). Functia trebuie sa returneze true pentru a opri dialogul standard. o variabila sau o proprietate ce contine null sau o referinta valida de functie
O functie utiliyator care trateaya erorile are trei posibilitati de actiune If you write an error-handling function, you have three options for reporting errors:
Monitorizeaza erorile dar lasa liber dialogul standard JavaScript (functia va returna false sau nu va returna o valoare) Raporteaza erorile(returneaza true) Dezafecteaza raportarea erorilor(onError = null)
Exemplu
<HTML> <HEAD> <TITLE>Exemplu tratare onError</TITLE> </HEAD> <BODY> <center> 1. Mesajul de eroare la incarcarea imaginii nu va fi afisat <br> <IMG NAME="imagine" SRC="fis_lipsa.gif" ALT="<IMG ... onError='null'>" onError="null"> <hr> 2. Niciun mesaj de eroare nu va fi afisat <SCRIPT> window.onError=null </SCRIPT> <br> <IMG NAME="imagine" SRC="fis_lipsa.gif" ALT="window.onError=null"> <hr> 3. Totusi daca un anumit obiect are un handler de eroare, mesajul va fi afisat de acesta. <SCRIPT>
31
window.onerror=null function TratareErori(imaginea) { alert("Ultima " + imaginea.name+ " NU poate fi incarcata corect") } </SCRIPT> <br> <IMG NAME="imagine" SRC="fis_lipsa.gif" ALT='onError="TratareErori(this)"' onError="TratareErori(this)" > <hr> </center> </BODY> </HTML>
onFocus
<HTML> <HEAD> <TITLE>Ciclu infinit</TITLE> <SCRIPT> var nr=0; function avert() { if(++nr>3) return; alert('Dupa ce veti da aici OK va reveni focus in input text ...') alert('si se va lansa din nou avert (insa limitat de 3 ori)') } </SCRIPT> </HEAD> <BODY><H2>Ciclu 'infinit' limitat la ... 3 iteratii</H2> <form > Introduceti un numar <input type="text" name="Numar" onFocus="avert()" > </form> <tt> <input type="text" name="Numar" onFocus="avert()" > </tt> </BODY> </HTML>
onSubmit
Executa codul JavaScript code cand un utilizator efectueaza 'submit' un formular. Daca acest cod returneaza true, atunci formularul este expediat. Daca se returneaza false, datele nu se trimit. Eexpedierea datelor prin mailto: sau news: necesita ca utilizatorul sa detina privilegiul de UniversalSendMail . Handler-ul onSubmit se poate gasi numai in elementul HTML form . In cazul butonului de tip submit poate fi 32
prezent un handler onClick care sa aiba un rol similar cu cel al handlerului onSubmit (prevenirea expedierii premature a datelor unui formular. Vezi si exemplul de la onClick
33
</SCRIPT> </HEAD> <BODY> <H1>Lista calculatoarelor</H1> <UL> <SCRIPT> SD301.afis() SD203.afis() </SCRIPT> </UL> </BODY> </HTML> Executa exemplul
Proprietatile unui obiect sunt tablouri ale caror elemente sunt proprietatile obiectului. Referirea la proprietatile unui oboiect se poate face prin indexare cu numere naturale sau cu siruri reprezentand numele proprietatii.
<HTML> <HEAD> <TITLE>Obiecte definite de utilizator</TITLE> <SCRIPT> function persoana(nume, nr) { this.nume = nume this.marca=nr }
//---------------------------------------------------function AfiseazaObiect(ob, numeOb) { var i,sir = "<P>Proprietatile obiectului <b>"+numeOb+"</b>" for (i in ob) sir += "<br>"+numeOb + "." + i + " = " + ob[i] document.write(sir) } </SCRIPT> </HEAD> <BODY> <H1>Obiecte create dinamic</H1> <SCRIPT> var prep1=new persoana, prep2=new persoana prep1.nume="Marius C." prep1["marca"]=1999 prep2["nume"]="Adi C." prep2.marca=2000 AfiseazaObiect (prep1 , "prep1") AfiseazaObiect (prep2 , "prep2") </SCRIPT> </BODY> </HTML> Executa exemplul
De fiecare data cand programul Navigator incarca un fisier html sunt create automat o serie de obiecte JavaScript corespunzator continutului fisierului incarcat. Pentru orice fisier html, sunt deschise automat urmatoarele obiecte:
navigator:
are ca proprietati numele si versiunea browser-ului, tipul MIME si plug-in -urile instalate de
client.
window:
obiectul situat la nivel superior responsabil de afisari; intr-o fereastra ce contine mai multe cadre, fereastra parinte, pentru fiecare cadru se deschide o fereastra copil careia ii corespunde un obiect de tip window . document: avand ca proprietati titlul, culoarea de background, link-urile, formularele etc. location: contine URL-ul curent. history: istoricul URL-urilor vizitate de client
Ierarhia acestor obiecte este conforma cu specificatiile HTML. Toti descendentii unui obiect pot fi considerati si ca proprietati ale obiectului parinte si se refera ca atare utilizand numele din argumentul NAME al obiectului sau numele generic al obiectului indexat.
Exemplul 1.
<FORM NAME="formular"...> Cod numeric personal :<INPUT TYPE="text" NAME="codpers"...> //... </FORM>
Anumite obiecte (vezi tabelul urmator) au proprietati care de fapt reprezinta masive. Utilizarea acestor masive ca variabile indexate poate servi la referirea unor obiecte corespunzatoare unor elemente HTML pentru care nu s-au precizat nume. Masive predefinite in JavaScript Obiect
document
Proprietate
anchors[] applets[] embeds[] forms[]
Element HTML
Un element <A> <APPLET> <EMBED> <FORM>
<IMG>
(imaginile create cu constructorul Image() nu sunt prezente in masivul images ) si <ILAYER> si obiecte
<LAYER>
<AREA HREF="...">(referitor la zone din imagini) <A HREF=""> Link create cu metoda link Checkbox, Radio, Text
argumentele unei functii tipuri MIME suportate de client (intern si prin plug-ins) plug-in -uri instalate
<OPTION> Toate elementele <FRAME>
select window
continand <FRAMESET>
istoric
Indexarea poate fi facuta prin numere ordinale sau chiar prin nume. Spre exemplu al doilea formular de pe pagina este <FORM NAME="note" ...>. El poate fi referit prin document.forms[1] sau document.forms["note"] sau document.note Toate documentele JavaScript au proprietatea length care indica numarul de elemente din tabloul respectiv. Exemplul 2. Fie fisierul HTML
<HTML> <HEAD> <TITLE>Exemplu ierarhie obiecte</TITLE> </HEAD> <BODY> <H3> <IMG SRC="bineativenit.JPG" ALT="Soyez le bienvenu !" HEIGHT=111 WIDTH=183 ALIGN=LEFT></H3>
36
<FORM name="acces" > Nume : <INPUT type="text" name="nume"><br> Parola : <INPUT type="password" name="parola"><BR> <BR> Securizat <INPUT TYPE="checkbox" NAME="Secu"> <INPUT type="submit" value="Gata" > <INPUT type="reset" value="Init"> </FORM><BR> </H3> <BR><HR><BR> <A HREF="http://www.eed.usv.ro" onClick="return confirm('Doriti sa o vizitati ?')">Pagina facultatii</A> </BODY> </HTML>
Obiectul
document
Desi nu a fost marcat in figura, elementul forms[0] poate fi referit si ca acces. Referirea obiectelor indicata in imaginea cu documentul afisat nu este unica. De exemplu campul de editare pentru parola putea fi referit ca document.acces.parola sau document.acces.elements[1] sau document.forms[0].parola sau document.forms[0].elements[1] sau 37
document.forms["acces"].elements[1] document.forms["acces"].parola.
sau document.forms["acces"].elements["parola"]sau
Continuand exemplul 2 vom insera o functie de afisare a valorilor introduse numita afis(). Aceasta functie este apelata dupa ce s-a actionat butonul gata, in tratarea evenimentului onSubmit. Exemplul 3.
<HTML> <HEAD> <TITLE>Exemplu ierarhie obiecte</TITLE> </HEAD> <SCRIPT> function afis() { var formular=document.acces alert ("S-au introdus urmatoarele date:\n\n" + "Nume : " + formular.nume.value + "\nParola: " + document.forms[0].elements[1].value + "\nSecurizat :" + document.acces.secu.checked + "\n\nFisierul imagine :"+document.images[0].src + "\nLink catre :" + document.links[0] ) return false } </SCRIPT> <BODY> <H3> <IMG SRC="bineativenit.JPG" ALT="Soyez le bienvenu !" HEIGHT=111 WIDTH=183 ALIGN=LEFT></H3> <FORM name="acces" onSubmit="return afis()"> Nume : <INPUT type="text" name="nume"><br> Parola : <INPUT type="password" name="parola"><BR> <BR> Securizat <INPUT NAME="secu" TYPE="checkbox" NAME="Secu"> <INPUT type="submit" value="Gata" > <INPUT type="reset" value="Init"> </FORM><BR> </H3> <BR><HR><BR> <A HREF="http://www.eed.usv.ro" onClick="return confirm('Doriti sa o vizitati ?')">Pagina facultatii</A> </BODY> </HTML>
Executa exemplul 3
38
Se observa din exemplu definirea unei referinte formular=document.acces care se refera la obiectul form. Starea checkbox-ului este o valoare logica obtinuta prin ocument.acces.secu.checked
Obiectul
window
Reprezinta o fereastra navigator sau un cadru, fiind obiectul situat la nivel superior pentru fiecare obiect document, Location si History. Obiectul window este implementat incepand cu JavaScript 1.0. Obiectul este creat de interpretorul JavaScript pentru fiecare element BODY, FRAME si FRAMSET, sau printr-un apel al metodei proprii window.open().
Descriere poate fi true sau false dupa cum fereastra a fost sau nu inchisa; obiectul window continua sa existe si dupa ce fereastra este inchisa un obiect ce permite accesul la facilitatile de criptare a Navigatorului. mesajul afisat implicit in bara de stare a ferestrei obiectul document un vector cu cadrele ferestrei obiectul history 39
inaltimea interioara a ferestrei (in pixeli) latimea interioara a ferestrei (in pixeli) numarul de cadre ale ferestrei contine URL-ul curent (proprietatea este asociata cu obiectul cu acelasi nume) reprezinta zona location a ferestrei; are, la randul ei o singura proprieteate: visible; daca locationbar.visible=false atunci bara de locatie a ferestrei nu va fi vizibila. idem pentru bara menu ( File, Edit, View, Go, Communicator) un sir ce specifica numele unic al ferestrei (in JavaScript 1.0 era Read-Only, in versiuni ulterioare poate fi modificat) false sau true; specifica daca actualizarile ferestrei se fac intr-un buffer offscreen (se reduce 'palpairea' ecranului, dar cere resurse de la Navigator). numele ferestrei in care se gaseste obiectul document ce a deschis fereastra curenta printr-un apel window.open(...) inaltimea exterioara a ferestrei (in pixeli) latimea exterioara a ferestrei (in pixeli) pozitia paginii curente pe OX relativ la coltul din stanga sus al ferestrei (in pixeli); propeietate este utila cand se foloseste scrollTo sau scrollBy idem pentru axa OY (si scroll vertical) numele ferestrei parinte (fereastra ce contine FRAMSET pentru cadrul din fereastra curenta) reprezinta bara de acces la bookmark; are la randul ei o singura proprietate: visible coordonatele ecran a marginii din stanga a ferestrei coordonatele ecran a marginii superioare a ferestrei reprezinta barele de defilare a ferestrei; are o singura proprietate visible; daca este true ambele bare vor fi vizibile; daca este false nu va fi vizibila niciuna un sinonim pentru fereastra curenta (exemplu self.status="Atentie") mesajul din bara de stare a ferestrei (poate fi setat oricand; pentru a fi afisat ca urmare a executiei unui handler de evenimente trebuie return true) are o singura proprietate visible; daca este true bara de stare va fi vizibila reprezinta bara de instrumente a Navigatorului (Back, Forward, Reload, Home etc.); are o singura proprietate visible un obiect reprezentand fereastra parinte situata la nivelul cel mai indepartat pe sirul predecesorilor obiectului window curent; poate fi un document sau fereastra browser-ului. un sinonim pentru fereastra curenta ( ex. window.status='Document incarcat corect')
menubar name
offscreenBuffering
opener
self status
statusbar toolbar
top
window
40
Metodele obiectului
window
Descriere
afiseaza un mesaj intr-o caseta de dialog cu un buton OK decodifica un sir codificat base-64 reface ultimul pas din history ( vezi / executa exemplul) indeparteaza focus-ul decodifica un sir codificat base-64 obiectul window sau document vor capta toate evenimentele de tipul specificat sterge un timeout setat prin metoda setInterval (vezi exemplu) anuleaza un timeout setat cu metoda setTimeout . inchide fereastra specificata (ex. window.close() sau self.close; sau geam=window.open() ... geam.close() ). afiseaza un mesaj intr-o caseta de dialog cu un buton OK si unul Cancel . Returneaza true sau false. apel: crypto.random(nr); returneaza un sir aleator de lungime nr returneaza un sir de date codificate representand o semnatura digitala pe care serverul o va recunoaste sau nu dezactiveaza setul de evenimente activate prin metoda enableExternalCapture se permite captura de evenimente in pagini incarcate die la servere diferite Cauta sirul din argument in fereastra specificata; apel find(sir , [ caseSensitive, backward])ultimele doua argumente fiind valori booleene (exemplu self.find("Examen",true, false)) atribuie focus unui anumit obiect (vezi exemplu). incarca urmatorul URL din lista history ; este similar cu butonul browser-ului si este complementara metodei back ( vezi / executa exemplul de la back) Invoca handler-ul pentru un eveniment pune in 'preference' URL-ul specificat ca home page pentru browser muta fereastra relativ cu numarul de pixeli specificat ( moveBy(orizontal,
vertical) )
confirm
crypto.random
crypto.signText
focus forward
muta coltul din stanga sus al ferestrei in punctul ecran specificat prin coordonate 41
Tipareste continutul unei ferestre sau a unui cadru afiseaza un mesaj intr-o caseta de dialog cu un buton OK si unul Cancel si preia un sir de la utilizator. Returneaza sirul citit. fereastra respectiva va trimite evenimentele specificate catre alte obiecte; aceasta metoda este in relatie cu metodele.captureEvents, routeEvent si
handleEvent
releaseEvents
resizeBy
Redimensionarea intregii ferestre deplasand coltul din dreapta-jos cu un anumit numar de pixeli. Apel: resizeBy(orizontal, vertical) Redimensionarea intregii ferestre la dimensiuni exterioare fixate. Coltul din stanga sus ramane pe loc. Apel resizeTo(pixeli_oriz, pixeli_vert). Pozitioneaza proprietatile outerWidth si outerHeight transfera evnimentul catre obiectul subordonat care il prelucreaza afiseaza continutul unei ferestre de la o coordonata data executa scroll cu deplasamente relative; apel: scrollBy(orizontal, vertical) executa scroll la un punct de coordonate date, punct ce devine coltul din stanga sus; apel: scrollTo(x,y), unde x si y (coordonate absolute) sunt dati in pixeli activeaza sau dezactiveaza toate "hot keys" intr-o fereastra fara menu, unde, de regula, acestea sunt dezactivate; apel setHotKeys (logic), unde logic poate fi true (activeaza) sau false evalueaza o expresie sau apeleaza o functie periodic, la fiecare interval de timp exprimat in milisecunde (vezi sintaxa apel si exemplu) permite utilizatorului sa redimensioneze o fereastra setResizable(true), sau interzice acest lucru : setResizable(false) evalueaza o expresie sau apeleaza o functie , o singura data, dupa ce s-a scurs un interval de timp exprimat in milisecunde (vezi sintaxa apel si exemplu) seteaza modul in care va apare afisata o fereastra(alwaysRaised , alwaysLowered, z-lock) opreste download-ul curent
resizeTo
setHotKeys
setInterval
setResizable
setTimeout
setZOptions
stop
sau false in
42
caz contrar, anulandu-se executia normala a functiei butonului de tip 'Submit'. Formularul a fost descris prin codul HTML:
<FORM NAME="f" onSubmit="return false">
deoarece fiind un exemplu pentru validarea locala a datelor nu este interesanta si partea de transmisie a datelor catre un script CGI. Din aceasta cauza ACTION nu este prezent, iar tratarea evenimentului onSubmit consta din return false ceea ce opreste transmiterea datelor.
<HTML> <Title>Exemplu focus si select</Title> <BODY> <SCRIPT> function Verifica() { var i, formular=document.f for(i=0;i<formular.length-1;i++) { var camp = formular.elements[i]; if (camp.value=="") { alert("Completati \""+ camp.name +"\"") camp.focus() // sau document.f.elements[i].focus() camp.select() return false } } alert ("Datele pot fi trimise") return true } </SCRIPT> <H3>Va rugam sa furnizati toate informatiile cerute ! <FORM NAME="f" onSubmit="return false"> Numele <INPUT TYPE="text" NAME="Nume" > <P> Grupa <INPUT TYPE="text" NAME="Grupa" > <P> Adresa email <INPUT TYPE="text" NAME="Email" > <P> <INPUT TYPE="SUBMIT" VALUE="Date completate" onClick="return Verifica()"> </FORM> </BODY> </HTML>
Executati exemplul
unde arg1, ..., argN sunt eventualele argumente ale functiei ce va fi apelata atunci cand s-a scurs intervalul specificat; expresie sau functie sunt siruri de caractere, reprezentand expresia ce va fi evaluata sau functia de apelat la fiecare perioada T_milisec 43
Executati exemplul
44
unde arg1, ..., argN sunt eventualele argumente ale functiei ce va fi apelata atunci cand s-a scurs intervalul specificat; expresie sau functie sunt siruri de caractere, reprezentand expresia ce va fi evaluata sau functia de apelat la expirarea time-out -ului milisec. Exemplul de mai jos constituie un test de reactie foarte simplu ( :-)
<HTML> <HEAD> <TITLE>Utilizare TimeOut</TITLE> <SCRIPT LANGUAGE="JavaScript"> var ceasActivat = false var ceas_ID = null function stopCeas(){ if(ceasActivat) clearTimeout(ceas_ID) ceasActivat = false }
function startCeas(){ stopCeas(); // pentru mai multa siguranta ceasul este oprit ceas_ID = setTimeout("esec()",5000) ceasActivat = true } function esec(){ stopCeas(); document.write('<H1>N-ai reusit, mai antreneaza-te !</H1>') ceas_ID = setTimeout("window.back()",3000) ceasActivat = true } </SCRIPT> </HEAD> <BODY onLoad="startCeas()"> <H2>In 5 secunde actioneaza butonul 'Gata'</H2> <FORM NAME="ceas"> <INPUT TYPE="button" VALUE ="Stop" onClick="alert('Nu acesta !')"> <INPUT TYPE="button" VALUE = "Gata" onClick="stopCeas();document.write('<H1>Bravo !</H1>')""> <INPUT TYPE="button" VALUE ="Stai" onClick="alert('Mai la stanga !')"> </FORM> </BODY> </HTML>
Descriere (JavaScript 1.2) daca este yes, noua fereastra va fi sub celelalte ferestre, indiferent daca este activa sau nu (caracteristica nu poate fi setata decat in signed scripts). (JavaScript 1.2) fereastra este situata la deschidere deasupra celorlalte (JavaScript 1.2) = yes, creaza o fereastra copil al ferestrei curente; o fereastra dependent se inchide cand fereastra parinte este inchisa. Pe platformele Windows o fereastra dependent nu este vizibila pe bara de task-uri daca are valoarea yes, creaza un buton browser standard cum ar fi What's New si What's Cool. (JavaScript 1.0 si 1.1) inaltimea ferestrei in pixeli (JavaScript 1.2) daca este no dezactiveaza hotkeys intr-o fereastra fara bara menu . (JavaScript 1.2) inaltimea interioara a ferestrei (in pixeli) (JavaScript 1.2) latimea interioara a ferestrei (in pixeli) daca este yes, se creaza un camp de intrare Location daca este yes, se creaza o bara de menu inaltimea exterioara a ferestrei (in pixeli) (JavaScript 1.2) daca este yes, se creaza o bara cu un buton Personal Toolbar daca este yes, utilizatorul poate redimensiona fereastra (JavaScript 1.2) coordonata x a coltului din stanga sus a ferestrei coordonata x a coltului din stanga sus a ferestrei daca este yes, se creaza barele de scroll daca este yes, se creaza o bara de stare in partea inferioara a ferestrei (JavaScript 1.2) daca este yes, se creaza o bara de titlu daca este yes, se creaza o bara de instrumente cum ar fi butoanele Back si Forward. (JavaScript 1.0 and 1.1) specifica latimea ferestrei in pixeli (JavaScript 1.2) If yes, creates a new window that does not rise above other windows when activated. This is a secure feature and must be set in signed scripts.
alwaysRaised dependent
directories height hotkeys innerHeight innerWidth location menubar outerHeight personalbar resizable screenX screenY scrollbars status titlebar toolbar width z-lock
open ( )
Sintaxa apelului este urmatoarea :
[<var_window>=] [ window.] open ( <URL>, <nume> [ , <caracteristici> ] )
46
este un identificator al obiectului fereastra ce va fi deschisa ; cu ajutorul lui pot fi apelate metode aplicate ferestrei care a fost deschisa. Argumentele sunt siruri de caractere. <URL> daca este prezent are ca efect incarcarea resursei specificate prin URL <nume> trebuie sa fie un identificator <caracteristici> reprezinta un sir de caractere ce contine o lista prin care se precizeaza proprietatile ferestrei ce va fi deschisa; daca lipseste fereastra va fi deschisa cu valorile implicite ale browser-ului. Exemple
unde <var_window> a=open("","AfisProp") // fereastra implicita b=window.open("","AfisProp_B") c=open("www.yahoo.com", "Cautare") // fereastra cu param. impliciti // in care se va incarca resursa specificata d=open("","Exemplu", "height=200, width=300, scrollbar=yes");
close ( )
Are ca efect inchiderea ferestrei. Exemplu: a.close() Exemplul 1 La actionarea butonului "Afiseaza proprietati" se va deschide o noua fereastra in care se vor afisa proprietatile ferestrei ce contine butonul/
<HTML> <HEAD> <TITLE>Exemplu open() si proprietati</TITLE> <SCRIPT> function afis() { var antet="<HTML><HEAD><TITLE>Proprietatile ferestrei"+ "</TITLE></HEAD><BODY>" // if(a!=undefined)if(!a.closed) return a=open("","AfisProp") a.document.write(antet); a.document.write("Fereastra topmost: \""+ window.top.document.title +"\"<br> " ); a.document.write("Fereastra parinte: \""+ window.parent.document.title +"\"<br> " ); a.document.write("Titlu fereastra: \""+window.document.title +"\"<br>" ); a.document.write("Dimensiuni: h="+window.height); a.document.write(" w="+window.width+"<br>"); a.document.write("Location= "+window.location +"<br>"); a.document.write("Menubar= "+window.menubar +"<br>"); a.document.write("Titlebar= "+window.titlebar +"<br>"); a.document.write("Toolbar= "+window.toolbar +"<br>"); a.document.write("status= "+window.status +"<br>"); a.document.write("scrollbar= "+window.status +"<br>"); a.document.write("</BODY></HTML>"); a.document.close(); <var_window> = [ window . ] close ( )
} </SCRIPT> </HEAD>
<BODY BGCOLOR="antiquewhite"> <FORM NAME="form1"> <INPUT TYPE="button" VALUE="Afiseaza proprietati" onClick = "afis()"> </FORM>
47
</BODY> </HTML>
Executati exemplul 1 Exemplul 2 Documentul creat de fisierul HTML urmator contine trei campuri de editare de tip text, in care utilizatorul este invitat sa introduca un URL. La modificarea valorii unui camp este deschisa o fereastra in care se va incarca resursa specificata, daca exista. Alaturi este un buton prin care se poate comanda inchiderea ferestrei deschise. Atunci cand documentul din pagina principala este inchis, in mod automat se va incerca inchiderea ferestrelor ramase deschise.
<HTML> <HEAD> <Title>Exemplu de deschidere/inchidere fereastre</Title> <SCRIPT> function deschide(obtext) { return window.open(obtext.value,obtext.name, "alwaysRaised=yes,height=200,width=200"); } function inchide(fer,afis) { // if(fer==undefined) alert ("Fereastra nu a fost deschisa"); // else if(fer.closed) { if(afis)alert("Fereastra este deja inchisa"); } else { fer.close(); if(afis)alert("S-a inchis fereastra "+fer.name); } } </SCRIPT> </HEAD> <BODY onUnload="inchide(u1,0);inchide(u2,0);inchide(u3,0)"> <H1>Deschide noi fereastre si incarca resursele indicate</H1> <FORM NAME=f> <P>URL_1: <INPUT TYPE="TEXT" NAME="url1" value="" onChange="u1=deschide(document.f.url1)"> <INPUT TYPE="button" VALUE="Inchide fereastra URL_1" onClick="inchide(u1,1)" > <P>URL_2: <INPUT TYPE="TEXT" NAME="url2" value="" onChange="u2=deschide(document.f.url2)"> <INPUT TYPE="button" VALUE="Inchide fereastra URL_2" onClick="inchide(u2,1)" > <P>URL_3: <INPUT TYPE="TEXT" NAME="url3" value="" onChange="u3=deschide(document.f.url3)"> <INPUT TYPE="button" VALUE="Inchide fereastra URL_3" onClick="inchide(u3,1)" > </FORM> </BODY> </HTML>
48
Executati exemplul 2 Exemplul 3 (functioneaza bine numai pe Netscape Navigator) Urmand link-ul Executati exemplul 3 in fereastra curenta va fi incarcat fisierul c3_open.htm, care va deschide o fereastra copil (dependent=yes) numita Butoane. Aceasta fereastra copil contine 2 butoane:
un buton cu textul "Deschide" pe care daca se efectueaza click se va deschide o noua fereastra copil (a ferestrei Butoane) ce va contine textul fisierului c3_open.txt un buton pe care este afisat "Inchide ex. si revine", pe care daca se efectueaza clic se inchid cele 2 ferestre copil, iar in fereastra navigatorului se revine la pagina ce contine link-ul de la care s-a plecat (Executati exemplul 3 ).
Efectuati urmatoarele manevre. 1. Activati link-ul, se va deschide fereastra "Butoane", apoi clic pe butonul "Deschide". Se deschide fereastra "TextHTML". Veti observa ca niciuna din ultimele 2 ferestre deschise nu apare pe bara de task-uri a sistemului Windows (ambele au fost deschise cu dependent=yes).. 2. Daca veti inchide fereastra "Butoane" , atunci se va inchide automat si fereastra "TextHTML" deoarece este copilul ferestrei "Butoane". 3. Cu ambele ferestre copil deschise, faceti clic pe butonul "Inchide ex. si revine". Aceasta actiune va declansa executia urmatorului cod JavaScript:
g.close(); // se inchide fereastra g //(fereastra TextHTML care a fost deschisa //prin clic pe butonul "Deschide" g.opener.close(); // se inchide fereastra care a deschis-o pe g // (fereastra Butoane) g.opener.opener.back() //se apeleaza metoda back() a ferestrei //care a deschis fereastra care a deschis-o pe g //(fereastra browser si se revine // la pagina cu link-ul de la care s-a plecat)
4. Daca se va inchide fereastra navigatorului (care contine c3_open.htm) atunci se vor inchide si cele doua ferestre "Butoane" si "TextHTML" care sunt dependente de fereastra navigator (care a deschis "Butoane" ca dependent, iar "Butoane" a deschis "TextHTML" ca dependent) Continutul ferestrelor din acest exemplu Fereastra "Navigator" Este o fereastra "alba". Ea nu contine afisat niciun text, deoarece fisierul HTML nu are <BODY> ci doar un cod JavaScript in <HEAD>.
<HTML> <HEAD> <Title>Exemplu deschidere fereastra</Title> <SCRIPT>
function Deschide(URL,nume,continut) { f=window.open("",nume,"menubar=yes,location=no,width=181,height=200"+ ",dependent,alwaysRaised=yes,resizable=yes,scrollbars=yes") f.document.write ("<HEAD><TITLE>Fereastra "+nume+"</TITLE></HEAD>") f.document.write("<BODY>" + continut + "</body>") return f } Deschide("", "Butoane" , "<FORM NAME=\"myform\">" + "<INPUT TYPE=\"button\" VALUE=\"Deschide \"" +
49
"onClick=\"g=window.open ('c3_open.txt','TextHTML'," + "\'scrollbars=yes,dependent=yes,alwaysRaised=yes,width=400,height=400,"+ "resizable=yes,screenX=200,screenY=150,\')\">"+ "<P><INPUT TYPE=\"button\" VALUE='Inchide ex. si revine'" + "onClick='g.close();g.opener.close();g.opener.opener.back()'>" + "</FORM>" ) </SCRIPT> </HEAD> </HTML>
Fereastra "Butoane" A fost creata cu ajutorul metodei document.write() aplicata ferestrei deschisa cu window.open().
<HEAD> <TITLE>Fereastra Butoane</TITLE> </HEAD> </BODY> <FORM > <INPUT TYPE="button" VALUE="Deschide text" onClick= "g=window.open ('c3_open.txt','TextHTML', 'scrollbars=yes,dependent=yes,alwaysRaised=yes,width=400' + ',height=400,resizable=yes,screenX=200,screenY=150')" > <P> <INPUT TYPE="button" VALUE="Inchide ex. si revine" onClick="g.close();g.opener.close();g.opener.opener.back()"> </FORM> </BODY>
Fereastra "TextHTML" Contine afisat textul ASCII al fisierului c3_open.txt (identic cu c3_open.htm) ca urmare a apelului:
g=window.open ('c3_open.txt','TextHTML', 'srollbars=yes,dependent=yes,alwaysRaised=yes,width=400' + ',height=400,resizable=yes,screenX=200,screenY=150')"
executat de interpretorul JavaScript atunci cand se trateaza evenimentul clic pe butonul 'Deschide' din fereastra "Butoane" De observat ca ambele ferestre copil ("Butoane" si "TextHTML") au fost deschise cu atributul alwaysRaised=yes care determina ca ele sa fie prezente deasupra celorlalte ferestre.
Obiectul Location
Este un obiect JavaScript predefinit, care poate fi accesat prin proprietatea location a obiectului window. Obiectul location contine informatii despre URL-ul curent. In general, un URL are sintaxa:
protocol//host:port/pathname#hash?search
De exemplu: http://www.eed.usv.ro/staff/comun/prezent.html#tinta_1?x=7&y=2 Informatii din URL sunt pastrate in proprietatile obiectului Location. 50
Proprietati
hash - o ancora in URL. host - domeniul sau adresa IP a serverului gazda hostname - portiunea host:port din URL. href - intregul URL. pathname - calea specificata in URL. port protocol - inceputul descrierii URL, inclusiv ':' search - sirul de date ce este trimis scriptului CGI
Metode reload() - reincarcarea documentului din fereastra replace(URL) - incarca URL -ul primit ca argument, inlocuind intrarea curenta din History Nota. Incarcarea unei anumite resurse se poate face prin modificarea proprietatii href:
window.location.href = URL location.href = URL; f.location.href = URL; // incarcare in fereastra curenta // incarcare in fereastra f
Obiectul History
Este tot un obiect JavaScript predefinit, care poate fi accesat prin proprietatea history a obiectului window care este un tablou. Obiectul contine informatii despre URL-urile vizitate Proprietati
current - specifica URL-ul din intrarea curenta in history length - numarul de intrari din lista history next - urmatoarea intrare din lista history previous - precedenta
Metode back() - incarca precedenta intrare din lista history forward() - incarca urmatoarea intrare din lista history go (n) - incarca intrarea n (relativa) din lista history si creeaza o noua intrare in lista Exemple
history.go(-3) // vizitata cu 3 click-uri in urma fereastra_x.history.back() parent.frames[1].history.back() // in al doilea cadru se va merge inapoi parent.cadrul_x.history.back() fereastra_x.cadrul_x.history.back() if (history[0].indexOf("NETSCAPE") != -1) { //prima intrare Prelucreaza(history[0]); // contine "Netscape" } document.writeln("<B>S-a vizitat:</B> " + history) // afiseaza toata istoria
51
Cadre
Exista posibilitatea afisarii mai multor documente in aceeasi fereastra a browser-ului. Acestea se numesc cadre si se definesc in fereastra parinte (documentul care este incarcat prima data). Fereastra parinte. Mai jos se prezinta definirea a 3 cadre cu ajutorul elementelor <FRAMSET> si <FRAME>. Acesta este fisierul HTML dialog_cadre.htm corespunzator ferestrei parinte.
<HTML> <HEAD> <TITLE>Exemplu cadre</TITLE> </HEAD> <FRAMESET COLS="35%,30%,35%"> <FRAME SRC="cdr1.htm" NAME="Cadru1"> <FRAME SRC="cdr2.htm" NAME="Cadru2"> <FRAME SRC="cdr3.htm" NAME="Cadru3"> </FRAMESET> </HTML>
Cadrul 1 are continutul specificat de fisierul HTML Cdr1.htm si contine un buton prin care in fereastra parinte se incarca un fisier HTML fara cadre.
<HTML> <BODY> <H2>C a d r u l 1</H2> <P> <FORM> <INPUT type="button" onClick="parent.location.href='c1-ex1.htm'" VALUE="Renunt la cadre -> ex.1"> </FORM> <P><P><HR> <P> Acelasi lucru cu link<br> <P> <A href="c1-ex1.htm" target = "top"> Renunt la cadre -> ex.1</A> </BODY> </HTML>
Cadrul 2 (fisier cdr3.htm), contine 2 butoane cu ajutorul carora se poate modifica resursa incarcata in primul cadru..
<HTML> <BODY> <SCRIPT language="JavaScript"> function incarca( url) { parent.Cadru1.location.href = url; } </SCRIPT> <H2>C a d r u l 2</H2> <P> <FORM> <input type="button" onClick="incarca('c1-ex3.htm')" Value="In Cadrul 1 -> ex.3">
52
<P> <input type="button" onClick="incarca('cdr1.htm')" Value="Se reface Cadrul 1"> </form> <HR> <P> Acelasi lucru cu link-uri<br> <P> <A href="c1-ex3.htm" target = Cadru1> In Cadrul 1 -> ex.3</A> <P> <A href="cdr1.htm" target = Cadru1>Se reface Cadrul 1</A> </BODY> </HTML>
Cadrul 3 (fisier cdr3.htm), contine 3 butoane cu ajutorul carora se poate modifica fondul in oricare din cele 3 cadre.
<HTML> <BODY> <H2>C a d r u l 3</H2> <script> var i=0; var culori = new Array("0000ff", "yellow", "ff0000") var cdr; function schimba(nr){ switch(nr) { case 1: cdr = parent.Cadru1; break; case 2: cdr = parent.Cadru2; break; case 3: cdr = parent.Cadru3; break; } cdr.document.bgColor= culori[ i++ % 3 ] return true; } </script> <FORM> <P><INPUT type="button" onClick="return schimba(1)" Value="Schimb fond in Cadrul 1"> <P><INPUT type="button" onClick="return schimba(2)" Value="Schimb fond in Cadrul 2"> <P><INPUT type="button" onClick="return schimba(3)" Value="Schimb fobd in Cadrul 3"> </FORM> </BODY> </HTML>
Obiecte predefinite
53
Obiectul Array
Obiectul Array permite manipularea masivelor in JavaScript. Crearea unui obiect Array are sintaxa
identificator = new Array(expr0, expr1, ..., exprN) identificator = new Array(lungime) unde identificator denumeste un nou obiect Array sau o proprietate a unui alt iar expr0, expr1, ..., exprN realizeaza initializarea elementelor tabloului.
obiect existent,
Exemple:
var vid = new Array(); // se creeaza un tablou vid var imagini = new Array(5); // se creeaza un tablou de 5 elemente var diverse = new Array ("Primul", x , 2000); var autori = new Array("M. Eminescu"); autori[1] = "I. Creanga" autori[2] = "L. Rebreanu" autori[3] = "I.H. Radulescu"
Un tablou are o proprietate 'length' care furnizeaza lungimea tabloului. Referirea la elementele tabloului se face cu ajutorul indicilor care incep de la 0. Un exemplu de completare dinamica si de extensie a tabloului il veti gasi inm urmatorul fisier.
<HTML> <HEAD> <TITLE>Obiect array initializat in timpul executiei</TITLE> <script> Nume = new Array() function inreg(camp) { Nume[Nume.length]=camp.value camp.value = "" camp.focus() camp.select() } function AfiseazaDate() { g=window.open('','window2', 'dependent,scrollbars=yes,width=150,height=200') g.document.writeln('<B>S-au introdus</B><OL>') for (var i=0; i < Nume.length; i++) g.document.writeln('<LI>' + Nume[i] + '</LI>') g.document.writeln('</OL>') g.document.close() }
54
</SCRIPT> </HEAD> <BODY> <FORM onSubmit="return false"> <BR>Numele : <INPUT TYPE="text" NAME="pers" onChange="inreg(this)"> <BR> <BR><INPUT TYPE="button" VALUE="Afiseaza date inregistrate" onClick="AfiseazaDate()"> </FORM> </BODY> </HTML>
Daca executati acest exemplu, introduceti mai multe nume in campul de editare (dupa fiecare dati TAB sau ENTER) apoi actionati butonul din pagina.
push (adauga la sfarsitul tabloului unul sau mai multe elemente si intoarce ultimul element introdus). pop (returneaza si indeparteaza ultimul element din tablou). shift (indeparteaza primul element ) unshift (adauga unul sau mai multe elemente in fata unui tablou si intoarce noua lungime a tabloului) reverse (inverseaza ordinea elementelor) slice (intoarce un nou tablou prin extragerea unei sectiuni a acestuia) splice (adauga si/sau indeparteaza elemente dintr-un tablou) concat join (formeaza un sir cu toate elementele tabloului) sort
Matrici
Un element al unui tablou poate fi un alt tablou, astefel se pot implementa matricile. In urmatorul exemplu se initializeaza elementele unei matrici, apoi acestea sunt afisate.
// Initializarea unei matrici a[4x3] m = new Array(4) for (i=0; i < 4; i++) { a[i] = new Array(3) for (j=0; j < 3; j++) { a[i][j] = "["+i+","+j+"]" } } // Afisarea matricii for (i=0; i < 4; i++) { str = "Linia "+i+":" for (j=0; j < 3; j++) { str += a[i][j] } document.write(str,"<p>") }
55
Exemplu. In fisierul de mai jos se prezinta o aplicatie ce utilizeaza obiectele Array, Window si Location.
<HTML> <HEAD> <Title>Exemplu cu Array, Window si Location</Title> <SCRIPT> var ferestre = new Array() function deschide(den_obiect) { var URL; switch(den_obiect) { case "select" : var ob_sel = document.f.motoare URL = ob_sel.options[ob_sel.selectedIndex].value; break; case "input": URL = document.f.utilizator.value; break;
} function inchide(afis) { if(afis!=0)alert("Se vor inchide " + ferestre.length + " ferestre") for(i=0;i<ferestre.length; i++) { var fer = ferestre [i] var FerCrt = "Fereastra " + fer.name; if(fer.closed) { if(afis!=0)alert(FerCrt + " este deja inchisa"); } else { if(afis!=0)alert(FerCrt + " se inchide !"); fer.close(); } } } </SCRIPT> </HEAD> <BODY onUnload="inchide(0)"> <H1>Deschide noi fereastre si incarca resursele indicate</H1> <FORM NAME=f> <P> URL: <INPUT TYPE="TEXT" NAME="utilizator" value="" onChange="deschide('input')"> <P> <SELECT NAME="motoare" onChange="deschide('select')"> <option value="">Motor de cautare...</option> <option value="http://www.yahoo.com">Yahoo</option> <option value="http://www.altavista.com">Altavista</option> <option value="http://www.google.com">Google</option> <option value="http://www.eed.com">In pag. facultatii</option> </select>
if (URL== "") return; g= window.open("",den_obiect+ferestre.length , "alwaysRaised=yes,height=200,width=200"); ferestre[ ferestre.length ] = g; alert("Se incarca in fereastra " + den_obiect + (ferestre.length-1) + " resursa \n" + URL) g.location.href = URL;
56
<INPUT TYPE="button" VALUE="Inchide toate fereastrele" onClick="inchide(1)" > </FORM> </BODY> </HTML>
Obiectul Math
Asigura accesul la constante si functii matematice. Este un obiect de inalt nivel si nu necesita apelarea unui constructor. Toate proprietatile sunt statice. Exemple.
aria= Math.PI * r * R; b = a * Math.sin(ungA) with (Math) { aria = PI * r*r perim = 2 * PI * r x = r*cos(alfa) y = r*sin(alfa) }
Proprietati
E - constanta lui Euler (aproximativ 2.718) LN10 - ln(10), aproximativ 2.302. LN2 - ln(2), aproximativ 0.693. LOG10E - lg(e) (aproximativ 0.434). LOG2E - logaritm in baza 2 din E (aproximativ 1.442). PI - aproximativ 3.14159. SQRT1_2 - radical din 2 impartit la 2 , aproximativ 0.707. SQRT2 - radical din 2, aproximativ 1.4141
Metode
abs(x) - modul de x acos(x) - arccos x asin(x) - arcsin x atan(x) - arctg x atan2 (x, y) - arctg x/y ceil(x) - cel mai mare intreg mai mare sau egal cu x floor(x) - cel mai mare intreg mai mic sau egal cu x cos(x) exp(x) log(x) max(x,y) min(x,y) pow(x,y) random() round(x) 57
Sectiunea 5
Obiectul String
Contine un sir de carcatere. Este creat cu ajutorul constructorului String:
obiect_sir = new String( [sir] )
Obiectul de tip String este diferit de o consanta sau variabila sir. Exemplu
s1 = "1 + 1" // o variabila s2 = new String("1 + 1") // un obiect eval(s1) // rezultat: 2 eval(s2) // rezultat: siru "1 + 1"
Se poate converti orice variabila sau obiect intr-un obiect string utilizand functia predefinita String(obiect). Proprietati
constructor - specifica functia care creeaza prototipul obiectului length - lungimea sirului prototype - permite adaugarea de proprietati la obiectul String
Metode
anchor(tinta) - creeaza o ancora cu numele 'tinta'; vezi exemplul S1 link(URL) - creaza un link cu un alt URL.; vezi exemplul S2 big - determina ca un sir sa fie listat cu fontul <BIG> ; vezi exemplul S3 small - similar <SMALL> ; vezi exemplul S3 fontsize ( marime) - similar <FONT size=marime>; vezi exemplul S3 fontcolor ( culoare)- similar <FONT color=culoare>; vezi exemplul S3 blink - similar <BLINK> fixed - <TT> bold - <B> italics - <I> strike - <STRIKE> sub - <SUB>. sup - <SUP> charAt (n) - returneaza caracterul de indice n din sir charCodeAt(n) - returneaza codul Unicode al caracterului de indice n din sir concat (sir_aduagat1, sir_aduagat2,... ) - concateneaza mai multe siruri fromCharCode (c1, c2, ... ) - intoarce un sir creat cu secventa de coduri Unicode (String.fromCharCode(65,66,67) intoarce sirul "ABC") indexOf ( text , [ ind ] ) - cauta 'text' in sir, eventual incepand de la indicele 'ind' si returneaza, daca l-a gasit, indicele din sir al primului caracter din 'text, sau -1 in caz contrar vezi exemplul S4 lastIndexOf ( text , [ ind ] ) - indicele ultimei aparitii a subsirului 'text' in sir, cautarea facandu-se de la sfarsit catre inceput, eventual incepand cu indicele ind, sau -1 daca nu s-a gasit match (expr) - se executa expresia regulata 'expr' 58
replace (expr, text ) - returneaza un nou sir prin inlocuirea cu 'text' a rezultatului cautarii cu 'expr' ( vezi exemplul S5 ) search (expr, text ) - cauta 'text' in sir cu ajutorul expresiei regulate; returneaza indicele, sau -1 daca nu a fost gasit slice (start, stop) - extrage o prtiune din sir incepand cu indicele 'start' pana la sfarsit sua, eventual, pana la indicele 'stop'; daca 'stop' <0, atunci reprezinta un offset fata de sfarsitul sirului split([separator][, limit]) - returneaza un tablou de siruri prin separarea unui sir cu ajutorul 'separator'-ului substr( start [, lungime] ) - returneaza un subsir substring (start, stop) - returneaza un subsir pana la indicele stop-1 toLowerCase - returneaza sirul convertit toUpperCase - returneaza sirul convertit valueOf - returneaza sirul ( exemplu: x = new String("Buna");
alert(x.toString()) // adfiseaza "Buna"
Exemplul S1
var sir=new string("Obiecte predefinite JavaScript"); fer.document.writeln(sir.anchor("Ob_pred"))
Exemplul S2
Exemplul S3
var sir3= "Buna ziua !" document.write( sir3.small()) document.write("<P>" + sir3.big()) document.write("<P>" + sir3.fontsize(7)) document.write("<P>" + sir3.fontcolor("red") + " rosu") document.write("<P>" + sir3.fontcolor("8000") + " maro") document.write("<P>" + sir3.fontcolor("FF00") + " tot rosu")
Exemplul S4
<HTML> <HEAD> <Title>Exemplu String</Title>
59
<SCRIPT> var s= "Buna ziua oameni buni !" alert(s.indexOf("un",5)); // alert(s.indexOf("un")); // alert(s.indexOf("Bun",5)); // 18 1 -1
// afiseaza toate aparitiile literei 'i' // 6, 15 si 20 var poz=-1; for(i=0; i<s.length; i++) { poz = s.indexOf("i",poz+1); if(poz ==-1 ) break; alert( "Am gasit 'i' in pozitia " + poz ); } s.lastIndexOf("un")); // 18 s.lastIndexOf('un',4)); // 1 s.lastIndexOf('un',0)); // -1 </script> </HEAD> <BODY> </BODY> </HTML>
Executa exemplul S4
Exemplul S5
<SCRIPT> sir = "Scolarii din parc sunt scolari silitori"; sir_nou = sir.replace(/scolari/gi, "studenti"); document.write(sir_nou)
Cookies
60
Acest mecanism permite memorarea unor informatii la client intr-un fisier numit cookies.txt. Inregistrarile pot fi transmise de un program CGI, sau create de un script JavaScript prin proprietatea document.cookie Un program CGI utilizeaza urmatoarea sintaxa pentru a include o informatie de tip cookie intr-un header HTTP:
Set-Cookie: nume=valoare [;EXPIRES=dataDeExpirare] [;DOMAIN=domeniu] [;PATH=cale] [;SECURE]
O astfel de inregistrare este numita 'cookie'. Browser-ul trebuie setat insa sa le accepte (neconditionat sau in urma confirmarii utilizatorului). Tot browserul le va sterge pe cele care au expirat. Sirurile nume si valoare nu pot contine ':' , ',' . ' ', in atare situatii trebuie utilizata functiile escape si unescape. Valoarea dataDeExpirare trebuie sa fie in format GMT :
numezi, ZI-LUN-AN HH:MM:SS GMT
Pentru a fixa termenul de expirare data mai poate fi scrisa si cu functia toGMTString. Dupa aceasta data inregistrarea este stearsa automat. Valoarea dataDeExpirare nu este obligatorie. Daca lipseste inregistrarea (cookie) este stearsa cand se paraseste sesiunea curenta cu browser-ul. Limitari ale mecanismului de cookies: maxim 300 de cookies in cookies.txt, cel mult 4 K p cookie, 20 cookies pe domeniu server. Exemplu Acest fisier este un preambul la fisierul HTML care contine cursul si este destinat sa reaminteasca celor care il utilizeaza ca "repetitio mater studiorum est". Pentru a consulta cursul se apasa butonul corespunzator care scrie o inregistrare 'cookie' pe calculatorul clientului, cu numele celui care il consulta si cu un nou termen de expirare de 2 zile. Daca in intervalul acesta clientul va vizita pagina va fi salutat cu "Bine ati revenit !". Daca el va vizita pagina mai tarziu de 2 zile i se va spune "Nu ati mai trecut pe aici in ultimele zile ..." Din considerente didactice timpul de expirare a fost setat la 3 minute, iar in pagina s+a mai atasat un buton care afiseaza 'cookies'
<HTML> <HEAD> <SCRIPT> function setCookie(nume_cookie, valoare_cookie, data_expirare) { var sir = nume_cookie + "=" + escape(valoare_cookie) + ((data_expirare== null) ? "" : ( "; expires=" + data_expirare.toGMTString())) + ";" alert("Va rugam sa acceptati inregistrarea cookie: "+ sir) document.cookie = sir } function inregistrare (nume_vizitator) { if(nume_vizitator=="") { alert("Va rog sa va introduceti numele") return false; } var acum = new Date() var termen_lim = new Date()
61
termen_lim.setTime ( acum.getTime() + 1000*60*3 ) // 3 MINUTE setCookie("CursPSD_Modul_JavaScript", nume_vizitator, termen_lim) location.href='Js_crsl.htm'; // incarca fisierul cu cursul de JS return true; } function getCookie(nume_cookie) { var sir = nume_cookie + "=" if (document.cookie.length > 0) { offset = document.cookie.indexOf(sir) if (offset != -1) { // exista offset += sir.length end = document.cookie.indexOf(";", offset) if (end == -1) end = document.cookie.length return unescape(document.cookie.substring(offset, end)) } } }
function listCookies () { if (document.cookie.length > 0) alert("Cookie(s) : " + document.cookie) else alert("Nu sunt cookies") } </SCRIPT> </HEAD> <BODY > <H1>Inregistrati-va accesul</H1> <FORM onSubmit="return false"> Numele : <INPUT TYPE="text" NAME="nume" SIZE= 10> <INPUT TYPE="submit" value="Inregistrati numele si continuam" onClick="return inregistrare(this.form.nume.value)"> <INPUT TYPE="button" value="Afisare cookies" onClick="listCookies()"> </FORM> <HR> <! --------------------------------------------------------> <SCRIPT> var numele_dv = getCookie("CursPSD_Modul_JavaScript") document.open() if (numele_dv != null) { document.forms[0].nume.value = numele_dv document.write("<P><H1>Bine ati revenit, "+ numele_dv + " !</H1>") } else { document.forms[0].nume.value = "" document.write("<P>Nu ati mai trecut pe aici in ultimele zile ...") } document.close(); </SCRIPT> </BODY> </HTML>
Executati exemplul
62
document.write("<A NAME='plug_instal'></A>") document.write("<H3>Plug-in -uri instalate</H3><UL>") for(var i=0; i< navigator.plugins.length; i++) { document.write("<LI>"); for(var j=0; j< navigator.plugins[i].length; j++) document.write( navigator.plugins[i][j].type + " ( " + navigator.plugins[i][j].enabledPlugin.name + " ) , " ) document.write("</LI>"); } document.write("</UL><A href='#inceput'><H4>Inceput de document</H4></A><HR>") document.write("<A NAME='plug_in'></A>") document.write("<H3>Tipuri MIME acceptate prin Plug-in</H3>") for(var i=0; i< navigator.mimeTypes.length; i++) if(navigator.mimeTypes[i].enabledPlugin) document.write( navigator.mimeTypes[i].type + " ( " + navigator.mimeTypes[i].description +" )<BR>"); document.write("<A href='#inceput'><H4>Inceput de document</H4></A><HR>") document.write("<A NAME='interne'></A>") document.write("<BR><H3>Tipuri MIME acceptate implicit</H3>") for(var i=0; i< navigator.mimeTypes.length; i++) if(navigator.mimeTypes[i].enabledPlugin==null) document.write( navigator.mimeTypes[i].type + " ( " + navigator.mimeTypes[i].description +" )<BR>"); document.write("<A href='#inceput'><H4>Inceput de document</H4></A><HR>") document.close()
63
Executati exemplul
Zonele carora li s-au asociat link-uri sunt cele 4 dreptunghiuri din partea superioara si cele 2 cercuri. Textul HTML este urmatorul:
<html> <title>Exemplu MAP - AREA</title> <body> <H1>Exemple din Sectiunea 5</H1> <P> <img src="exemple.jpg" width=200 height=200 border=0 usemap="#harta_imaginii" alt="Exemple din curs"> <map name="harta_imaginii"> <area shape="rect" coords="0,0,100,52" href="C5_mime.htm" onMouseOver="window.status='Exemplu MIME Plugins'; return true"> <area shape="rect" coords="100,0,200,52" href="C5_cookie.htm" onMouseOver="window.status='Exemplu cookies'; return true"> <area shape="rect" coords="0,53,100,100" href="c5-ismap.htm" onMouseOver="window.status='Exemplu ISMAP'; return true"> <area shape="rect" coords="100,53,150,100" href="c5-poza1.htm" onMouseOver="window.status='Exemplu Image - 1'; return true"> <area shape="rect" coords="151,53,200,100"
64
href="c5-poza0.htm" onMouseOver="window.status='Exemplu Image - 2'; return true"> <area shape="circle" coords="45,153,42" href="c5_animat.htm" onMouseOver="window.status='Exemplu Animatie'; return true"> <area shape="circle" coords="145,150,42" href="c5_menu.htm" onMouseOver="window.status='Exemplu menu cu butoane animate'; return true"> </map> </body> </html>
Executati exemplul
: Fiecare patratel are dimensiuni de aproximativ 25 x 25 pixeli, Imaginea este declarata ISMAP in fisierul C5_ismap. htm intr-un link astfel:
<A href="C5-ismap.htm"> <IMG SRC="patrate.jpg" BORDER=0 ISMAP></A>
Deci daca se va face clic pe imagine documentul se reincarca pe el insusi si se transmit coordonatele x si y. Exemplul care urmeaza (fisierul C5_ismap. htm ) constituie o buna ilustrare pentru functionarea metodelor utilizate.
<html> <body> <H1>Click pe imagine</H1> <P> <A href="C5-ismap.htm"> <IMG SRC="patrate.jpg" BORDER=0 ISMAP></A> <SCRIPT> sir = location.search if (sir == "") document.write("<P>Fara coordonate") else { ind_virg = sir.indexOf(",") // se cauta virgula din URL?x,y document.write("<P>Coordonata x = " + sir.substring(1, ind_virg)) document.write("<BR>Coordonata x = " + sir.substring(ind_virg+1, sir.length)) }
65
Executati exemplul
Obiectul Image
Obiectul reprezinta o imagine intr-un document HTML, fiind creat de constructorul Image sau un element IMG. Pentru fiecare elemnet IMG se creeaza un obiect Image care este pus in tabloul image[]. Fiecare obiect poate fi referit prin indexare sau cu ajutorul sirului din atributul NAME. Exemplu
<IMG NAME="foto" SRC="fis.jpg" WIDTH=100 HEIGHT=200> <!---<SCRIPT> // . . . alert("Imaginea are dimensiunile " + document.images[0].width + " x " + document.images["foto"].height + " pixeli"); // se schimba imaginea document.foto.src="alta.jpg"; </SCRIPT>
unde latime si inaltime se exprima in pixeli. Evenimente asociate : onAbort onError onKeyDown onKeyPress onKeyUp onLoad Se pot defini handler-e pentru evenimente asociate unui obiect Image prin atribuiri ca in exemplul de mai jos: imag = new Image(200,100) imag.onabort = functie1 imag.onerror = functie2 imag.onkeydown = functie3 imag.onkeypress = functie4 imag.onkeyup = functie5 imag.onload = functie6 Evenimentele onClick, onMouseOut si onMouseOver nu pot fi asociate unui obiect imagine. Exceptii constituie un obiect Area sau un element IMG in interiorul unui obiect Link.
66
Proprietate
border complete height hspace lowsrc name src vspace width
Descriere marginea imaginii atribut boolean care indica daca imaginea a fost complet incarcata inaltimea imaginii spatiu orizontal, fata de textul aflat la dreapta/stanga imaginii imaginea de rezolutie mai joasa ce va fi afisata mai intai valoarea atributului NAME din IMG. numele fisierului imagine. spatiu vertical pana la textul ce precede sau succede imaginea. latimea imaginii
Obiectul Image are ca metoda handleEvent si mosteneste metodele watch si unwatch de la Object. Pozitia si dimensiunile unui obiect Image sunt fixate la afisarea documentului de catre browser si nu pot fi modificate utilizand JavaScript In schimb se pot modifica in JavaScript valorile atributelor src si lowsrc, putandu-se deci schimba printr-o secventa de program JavaScript imaginea afisata. Exemplu
<html> <TITLE>Selectie imagine</TITLE> <body onLoad='alert("Imaginea are dimensiunile " + document.images[0].width + " x " + document.images["foto"].height + " pixeli");'> <IMG NAME="foto" SRC="alegimg.jpg" WIDTH=200 HEIGHT=200> <FORM> Patrate <INPUT type="radio" Cercuri <INPUT type="radio" Triunghiuri <INPUT type="radio" Initial <INPUT type="radio" </FORM> </body> </html>
Executati exemplul Se pot obtine animatii in JavaScript prin modificarea parametrului SRC, la intervale de timp setate cu ajutorul functiei setTimeOut(). 67
Utilitatea obiectelor Image consta in aceea ca permit incarcarea la client si memorarea mai multor imagini, chiar inainte de afisarea lor propriu-zisa. Atunci cand va fi nevoie sa fie afisate, acest lucru se va face prin schimbarea parametrului src al unui obiect creat pe baza elementului <IMG ...>. O astfele de afisare se va face mai rapid, deoarece imaginile sunt deja la client. Exemplu In exemplul precedent imaginile erau incarcate la fiecare selectie. In continuare se prezinta o varianta a exemplului precedent ce permite o schimbare mult mai rapida a imaginilor. In noua varianta imaginile sunt preincarcate la tratarea evenimentului onLoad din elementul HTML <body>. Functia preincarcare creeaza 3 obiecte Image, memorate in tabloul poze[], pe care le initializeaza cu trei imagini. Schimbarea imaginii se executa prin apelarea functiei schimba() in cursul tratarii evenimentului onKeyDown. Atunci cand se va apasa pe tasta, imaginea fiind deja in memorie afisarea ei este scurtata cu timpul de incarcare.
<html> <html> <TITLE>Schimb imaginea apasand o tasta</TITLE> <SCRIPT> var poze = Array() function preincarcare() { for(ind=0;ind<3;ind++) poze[ind]= new Image () poze[0].src='patrat.jpg' poze[1].src='cerc.jpg' poze[2].src='triung.jpg' document.onkeydown=schimba } var i=0; function schimba() { document.foto.src=poze[i].src window.status = "Este afisata imaginea: "+ poze[i].src i = ++i % 3 } </SCRIPT> <body onLoad="preincarcare()"> <H2>Actionati o tasta pentru a schimba imaginea</h2> <IMG NAME="foto" SRC="start.jpg" WIDTH=200 HEIGHT=200> </body> </html>
Executati exemplul Cu aceasta tehnica se pot realiza animatii prin afisarea succesiva peste o aceeasi zona creata cu un element <IMG> a mai multor cadre, fiecare cadru fiind un fisier imagine separat. Exemplu Functia preincarca() va crea 8 obiecte Image, pe care le va initializa cu 8 cadre succesive. Parametrii latime si inaltime a acestor obiecte sunt chiar dimensiunile zonei imagine din documentul HTML, creata cu elementul 68
<IMG>.
img[i]=new Image( document.ecran.width, document.ecran.height);
Aceeasi functie va afisa primul cadru in zona imagine a documentului . Se va observa astfel ca img[0].src este un sir ce contine referirea completa. Atunci cand acest atribut este modificat:
img[i].src= nume_img +i+ext_img;
function Viteza(cum) { if(cum=='+') { t-= delta_t; t = t<delta_t ? delta_t : t; } if(cum=='-') t += delta_t; document.forms[0].viteza.value=t; } //--> </SCRIPT> </HEAD> <BODY onLoad="preincarca(8);Viteza(' ');"> <CENTER><FONT SIZE=-2>Curs P.S.D. <A href="mailto:pentiuc@yahoo.com" onMouseOver="window.status='Trimite email la: pentiuc@yahoo.com';return true"> prof.dr.ing. Stefan-Gheorghe PENTIUC</A> </FONT><H5>Preincarcarea imaginilor / animatie JS</H5> <IMG SRC="" NAME="ecran" border="1" width=100 height=100>
69
<FORM> <INPUT type="text" NAME="fig" size=55> <P> <INPUT type="button" VALUE="STOP" onClick="stop=true"> <INPUT type="button" VALUE="Continuu" onClick="stop=false; animeaza('animat')"> <INPUT type="button" VALUE="Cate una" onClick="stop=false; animeaza('una')"> <P> Cadrele se succed la <INPUT type="text" NAME="viteza" size=5 READONLY> ms Viteza: <INPUT type="button" VALUE=" + " onClick="Viteza('+')"> <INPUT type="button" VALUE=" - " onClick="Viteza('-')"> </CENTER> </FORM> </BODY> </HTML>
Executati exemplul Desigur, performantele aceastei metode de a produce animatia desi se apropie, nu este la fel de performanta ca cea a fisierelor GIF animate. Principiul este util pentru realizarea unor meniuri cu butoane care isi modifica forma la trecerea cu mouse-ul peste ele.
In cadrul 'Menu' vor fi afisate trei butoane ale caror imagini sunt cuprinse in interiorul unor link-uri. In cadrul elementelor <A> sunt precizate ca vor fi tratate prin functia "pune()" evenimentele onMouseOver si onMouseOut. Fisierul c5_buton.htm care este afisat in cadrul 'Meniu'. Se va observa ca pentru ca imaginile butoanelor sa nu fie incadrate vizibil (deoarece se afla in interiorul unor link+uri) s-a fixat culoarea alba pentru atributele LINK, VLINK si ALINK din elementul <body>.
<html> <SCRIPT> var butoane = Array() function preincarcare() { for(ind=0;ind<6;ind+=2) { butoane[ind]= new Image () butoane[ind].src="b"+(ind/2+1)+ "_sus.JPG" document.images[ind/2].src = butoane[ind].src
70
function pune(buton, cum) { i = parseInt(buton)*2 if(cum=="jos") i++; document.images[buton].src = butoane[i].src window.status = "Este afisata imaginea: b"+ buton + "_"+cum+".jpg" } </SCRIPT> <body onLoad="preincarcare()" VLINK="#ffffff" LINK="#ffffff" ALINK="#ffffff" > <center> <H1>Modul</h1><h3>JavaScript</h3> <form> <TABLE> <tr><td> <A HREF="JS_crsl.htm" target="continut" onMouseOver="pune('0','jos')" onMouseOut="pune('0','sus')" > <IMG NAME="0" SRC="" WIDTH=80 HEIGHT=37> </A> </td></tr> <tr><td> <A HREF="JS_crs_1.htm" target="continut" onMouseOver="pune('1','jos')" onMouseOut="pune('1','sus')"> <IMG NAME="1" SRC="" WIDTH=80 HEIGHT=37> </A> </td></tr> <tr><td> <A HREF="JS_crs5.htm" target="continut" onMouseOver="pune('2','jos')" onMouseOut="pune('2','sus')"> <IMG NAME="2" SRC="" WIDTH=80 HEIGHT=37> </A> </td></tr> </table> </body> </html>
Executati exemplul
Sectiunea 6
Straturi (layer, ilayer) (numai in Netscape)
Straturile reprezinta facilitati DHTML permitand pozitionarea precisa a elementelor HTML in pagina. Evenimente
onBlur
Descriere obiectul layer de deasupra imaginea utilizata ca background culoarea pentru background
obiectul layer
documentul asociat obiectului layer pozitia orizontala in pixeli relativa la originea layer-ului parinte sirul precizat ca argument la ID in elementul HTML LAYER . obiectul layer ce contine pe cel prezent sau fereastra ce il include URL-ul continutului obiectului layer pozitia verticala in pixeli relativa la originea layer-ului parinte daca este 'show' atunci este vizibil, daca este 'hide' nu e vizibil obiectul window sau Frame ce contine layer-ul pozitia relativa in ordinea z
Exemplul L1 In acest exemplu sunt prezentate 4 straturi suprapuse: ID='triung' ce contine imaginea "triung.jpg" ID='patrat' ce contine imaginea "patrat.jpg" id="scris" ce contine textul "Exemplu straturi (layers)" id='sursa' un strat cu fondul galbui ce prezinta sursa exemplului Stratul 'scris' nu are precizata o culoare pentru fundal. Stratul 'sursa' reactioneaza la evenimentul onFocus devenind invizibil, iar la onBlur redevine vizibil. Atentie: invers nu este posibil, deoarece daca stratul nu ar fi vizibil nu ar mai putea primi focus.
<html> <TITLE>Straturi</TITLE> <body> <layer id="triung" z-index=0 <img width=200 height=200 <h5>Triunghiuri</h5> </layer> <layer id="patrat" z-index=1 <img width=200 height=200 <h5>Patrate</h5> </layer> left=20 top=20> src="triung.jpg"> left=100 top=70 > src="patrat.jpg">
72
<layer id="scris" z-index=1 left=30 top=30 width=200> <h1><i><font color="yellow">Exemplu straturi (layers)</font></i></h1> </layer> <layer id="sursa" src="c5_layertxt.htm" z-index=3 left=250 top=0 width=375> </layer> </body> </html>
Executati exemplul L1 Exemplul L2 Proprietatile straturilor pot fi modificate prin instructiuni JavaScript In al doilea exemplu sunt prezentate 4 straturi, din care initial este vizibil doar stratul "schimba" ce contine trei butoane. Celelalte trei straturi vor contine cate o imagine. Cu ajutorul butoanelor din stratul 'schimba' poate fi modificata vizibilitatea celor trei straturi, imaginea din fiecare strat (prin interschimbare intre straturi), precum si vizibilitatea stratului 2 situat in mijlocul celor trei straturi ce contin imagini. Referirea straturilor se realizeaza cu ajutorul numelor acestora. La incarcarea documentului HTML se executa functia init() care retine in tabloul de siruri nume[] valorile atributelor id ale elementelor layer.
<html> <TITLE>Straturi-2</TITLE> <script language="javascript"> function schimb_img() { var foto = new Image() foto.src = document.layers[nume[0]].document.images[0].src for(i=0;i<2;i++) document.layers[nume[i]].document.images[0].src = document.layers[nume[i+1]].document.images[0].src document.layers[nume[i]].document.images[0].src = foto.src } var nume = new Array function init() { var sir=""; for(i=0;i<4;i++) { nume[i]=new Array nume[i] = document.layers[i].id sir+="Stratul "+i+" : " + nume[i] +"\n" } alert(sir) } var ind=0; function schimb_viz() { vechi=document.layers[nume[ind]].visibility document.layers[nume[ind]].visibility= vechi=="hide"?"show":"hide" ind = (ind+1) %3; } var indz=0; function schimb_z() { document.layers['triung'].zIndex = (document.layers['triung'].zIndex+1)%3 document.layers['patrat'].zIndex = (document.layers['patrat'].zIndex + 1)%3 }
73
</script> <body onLoad="init()"> <layer id="triung" z-index=0 left=20 top=20 visibility='hide'> <img name="0" width=200 height=200 src="triung.jpg"> <h5>Triunghiuri</h5> </layer> <layer id="patrat" z-index=1 left=100 top=70 visibility='hide'> <img width=200 height=200 src="patrat.jpg"> <h5>Patrate</h5> </layer> <layer id="cerc" z-index=2 left=250 top=100 visibility='hide'> <img width=200 height=200 src="cerc.jpg"> <h5>Cercuri</h5> </layer> <layer id="buton" z-index=2 left=460 top=20 bgcolor="lightblue"> <CENTER> <b>SCHIMBA</b> <form> <input type="button" value="vizibilitate" onClick="schimb_viz()"> <p><input type="button" value="imagine" onClick="schimb_img()"> <input type="button" value="Index Z" onClick="schimb_z()"> </form> </CENTER> </layer> </body> </html>
Executati exemplul L2
Exemplul L3 Un rol important al straturilor este faptul ca permit pozitionarea cu precizie a elementelor unei pagin HTML. Acestea pot fi incluse intr-un strat iar stratul va fi pozitionat cu ajutorul atributelor left si top. Exemplul care urmeaza prezinta patru straturi. In primeler 3 se gasesc cele trei imagini cunoscute deja din exemplele anterioare, dar de dimensiuni diferite. Cel de-al patrulea strat contine doar 2 butoane si va avea o pozitie fixa. Cu ajutorul butoanelor se porni, opri sau inversa miscarea de translatie orizontala a celorlalte trei straturi. Referirea la straturi este realizata in acest exemplu prin indici intregi.
<html> <TITLE>Straturi - 3</TITLE> <script language="javascript"> var dx = new Array(-10,-10,-10) var stop=true; var XMAX=500 function start() { if (stop) return for(i=0;i<3;i++) { x = document.layers[i].left + dx[i] if(dx[i]<0 && x<=0) { dx[i] = -dx[i] x=0; } xmax=XMAX - document.layers[i].document.width if(dx[i]>0 && x>xmax) { dx[i] = -dx[i] x=xmax; } document.layers[i].left = x
74
} setTimeout("start()", 200) } function invers() { for(i=0;i<3;i++) dx[i] = -dx[i] } </script> <body> <layer id="triung" z-index=0 left=20 top=20 > <img width=200 height=200 src="triung.jpg"> </layer> <layer id="patrat" z-index=1 left=100 top=70 width=175> <img width=175 height=175 src="patrat.jpg"> </layer> <layer id="cerc" z-index=2 left=250 top=120 width=150> <img width=150 height=150 src="cerc.jpg"> </layer>
<layer id="buton" z-index=2 left=500 top=0 bgcolor="yellow" height=270 width=127> <center><br> <form> <input type="button" value="start deplasare" onClick="stop=false;start()"> <p> <input type="button" value="stop deplasare" onClick="stop=true"> <p> <input type="button" value="schimbare sens" onClick="invers()"> </form> </center> </layer> </body> </html>
Executati exemplul L3
In general, in afara unor exceptii cum ar fi layers, IE accepta sintaxa Netscape Navigator, in timp ce invers adesea nu este adevarat. De aici si recomandarea de a lucra in mediul Netscape si apoi de a testa rezultatul in IE. Determinarea tipului de browser se poate face cu ajutorul obiectului navigator, implementat atit in IE cat si in Netscape..
<html> <body> <script> var agt = navigator.userAgent.toLowerCase(); var esteNav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1)); var esteIE = (agt.indexOf("msie") != -1); if(esteNav) alert ("Navigator Netscape"); else if(esteIE) alert ("IE") else alert ("Nu este nici Navigator nici IE") </script> </body> </html>
Executati exemplul O alta modalitate de a determina tipul de navigator este verificarea existentei unor anumite obiecte predefinite.
<html> <body> <script> // daca admite layerseste Netscape Communicator 4 sau ulterior ns4 = (document.layers) ? true : false // daca suporta proprietatea 'all' este IE 4 sau ulterior ie4 = (document.all) ? true : false // verificam daca este Internet Explorer 5 if (ie4) { if (navigator.userAgent.indexOf('MSIE 5') > 0) ie5 = true; else ie5 = false; } else { ie5 = false; } if(ns4) alert("Netscape 4.xx") if(ie5) alert ("IE 5") if(ie4) alert ("IE 4") </script> <!--[if IE 5]> Navigatorul este IE 5 <![endif]-->
76
<!--[if IE 4]> Navigatorul este IE 4 <![endif]--> <!--[if IE 3]> Navigatorul este IE 3 <![endif]--> </body> </html>
Executa exemplul Verificarea browserului IE 5 poate fi realizata si prin comentariile conditionale if: Astfel, avem posibilitatea de a scrie parti alternative de functii JavaScript n functie de navigator sau de versiunea de JavaScript: <script language="JavaScript"> if (navigator.userAgent.indexOf("4.0") != -1) jsVersion = "1.2"; else if (navigator.userAgent.indexOf("3.0") != -1) jsVersion = "1.1"; else jsVersion = "1.0"; </script>
Obiectul Navigator
In Netscape obiectul navigator are urmatoarele proprietati si metode.
Proprietati
appCodeName - numele de cod al browser-ului (exemplu Mozilla) appName - numele browser-ului (de regula Netscape) appVersion - versiunea Navigator-ului in formatul : n.mm[lb](platforma;tara) language - limbajul in care este prezentat meniul etc. mimeTypes - un masiv cu tipurile MIME suportate de client platform - masina pe care s-a compilat navigatorul plugins - un masiv cu toate plug-ins -urile instalate la client. userAgent - header-ul user-agent
Metode
javaEnabled - verifica daca este permis Java plugins.refresh - face ca nou instalatele plug-ins -uri sa fie disponibile si reincarca documentele ce le contin preference - permite ca un script certificat sa citeasca si sa seteze anumite preferinte Navigator taintEnabled - permite data tainting
<html> <body> <script> var agt = navigator.userAgent.toLowerCase(); var esteNav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1)); if(esteNav) alert "\nappCodeName = " "\nappVersion = " "\nlanguage = " "\nplatform = " "\nuserAgent = " "\njavaEnabled = " ("navigator.appName = " + navigator.appName + + navigator.appCodeName + + navigator.appVersion + + navigator.language + + navigator.platform + + navigator.userAgent + + navigator.javaEnabled() );
Executati exemplul
78
// sfera doc.write("Sphere {2} }"); // inchide documentul doc.close(); return false; // pentru a nu se efectua link-ul } </script> </head> <body> <H1>Document VRML</H1> <P> <A HREF="" onClick="return Scena_vrml()"> <h3>Se deschide o noua fereastra cu o scena VRML</h3> </A> </body> </html>
Executa exemplu VRML Observatie. Deschiderea noii ferestre este declansata printr-un clic efectuat asupra unui link din pagina. Pentru a nu se modifica pagina, functia care deschide fereastra returneaza false.
79