Logo referatecarte



referat, proiect, rezumat, caracterizare, lucrare de nota 10 despre: AstronomieBiologieChimieDesenDiverseDrept
 EconomieEnglezaFilozofieFizicaFrancezaGeografie
 GermanaInformaticaIstorieItalianaMarketingMatematica
 MedicinaMuzicaPsihologieRomanaRomana1Spaniola

Tehnologii INTERNET - Configurarea documentului HTML prin scripturi JavaScript



Tehnologii  INTERNET - Configurarea documentului HTML prin scripturi JavaScript

La incarcarea unui document HTML in fereastra Netscape Navigator, sunt create o serie de obiecte. Ierarhia obiectelor Netscape Navigator este derivata din clasa Windows






Fiecare pagina Web are asociat un obiect document, creat de elementul HTML BODY. Prin intermediul proprietatilor acestui obiect, putem avea acces de exemplu la:

- culoarea de fundal (bgColor), culoarea textului (fgColor), culoarea link-urilor linkColor, vlinkColor, alinkColor), adresa documentului (URL), data la care documentul a fost modificat ultima oara (lastModified) etc.

Cele mai utilizate metode ale clasei document sunt write si writeln. Aceste metode permit afisarea unui sir de caractere in fereastra Netscape Navigator. Nu pare a fi util. Aceasta se poate face simplu, in limbajul HTML. Numai ca utilizand metodele write si writeln puteti crea un continut dinamic al paginii.

Din obiectul document sunt derivate urmatoarele obiecte:





Din obiectul Form sunt derivate obiecte corespunzatoare elementelor formularului:

Text, Textarea, Radio, Checkbox, Button, Submit, Reset, Password, FileUpload, Hidden, Select. Din obiectul Select este derivat obiectul Option. Obiectele pe care le-am denumit „derivate' functioneaza in fapt ca proprietati ale obiectului parinte.

Exemplul 1.

Daca vom include urmatorul script in antetul documentului HTML inainte de a incarca pagina, utilizatorul va fi intrebat cum se numeste, apoi va fi scris in document un mesaj de salut si o linie orizontala :

<SCRIPT TYPE=-text/JavaScript'>

<!--

Nume=prompt ('Cum te numesti?');

document.write('<H1>'+'Salut, '+Nume+'!</H1>');

document.write(„<HR>');

//-->

</SCRIPT>

Exemplul 2

In exemplul precedent am afisat un text in mod dinamic. Sa descriem un exemplu in care se modifica in mod dinamic culoarea de fundal (in functie de optiunea selectata de utilizator dintr-un formular) si, de asemenea, se incarca intr-o fereastra un document specificat de utilizator:

<HEAD>

<SCRIPT language='JavaScript'>

<!--- marcaj dre inceput de comentariu

var s='';

function incarca ()


open('http://www.'+s+'.com');

alert(s)


function fundal ()



</SCRIPT>

</HEAD>

<BODY>

<FORM NAME='COLOR'>

<P>Alegeti culoarea fundalului!

<select name='BG' onChange= 'fundal();' >

<option value='Rosu' > Rosu </option>

<option value='Verde'> Verde </option>

<option VALUE='Albastru'> Albastru </option>

<option selected value='alb'> Alb </option>

<optiom value='Galben'> Galben

</select>

</FORM>

<P> Selectati marca de masina dorita din lista de inai jos:

<FORM NAME='F'>

<SELECT NAME='Marca' OnChange='incarca();' >

<OPTION VALUE='Mitsubishi' > Mitsubishi </OPTION>

<OPTION SELECTED VALUE='Toyota'> Toyota </OPTION>

<OPTION VALUE='BMW'> BMW </OPTION>

<OPTIOM VALUE='Fiat'> Fiat </OPTION>

<OPTION VALUE='Ford'> Ford </OPTION>

</SELECT>

</FORM>

</BODY>

Acest document HTML contine doua formulare :

- formularul COLOR care contine un meniu ce permite utilizatorului sa selecteze culoarea de fundal;

- formularul F, ce permite utilizatorului sa selecteze dintr-un meniu o marca de masina.


La selectarea unei optiuni din meniul BG al formularului COLOR este apelata functia fundal () (evenimentul onchange). Functia fundal() are rolul de a schimba culoarea de fundal a documentului, in functie de optiunea utilizatorului. Pentru aceasta, este utilizata o variabila c, in care este retinut numarul de ordine al optiunii selectate de utilizator din meniu. in functie de valoarea variabilei c, se seteaza proprietatea bgcolor a documentului curent (document.bgColor). Observati ca pentru specificarea culorii se utilizeaza formatul hexazecimal. De exemplu, daca variabila c are valoarea 0, a fost selectata prima optiune din meniu (Rosu). Ca urmare, culoarea de fundal va fi FF0000.

La selectarea unei optiuni din meniul Marca al formularului F, este apelata functia incarca() (evenimentul onchange). Aceasta functie are rolul de a incarca intr-o noua fereastra pagina Web a firmei care produce marca de masina selectata de utilizator. Pentru aceasta este retinut in variabila c nuniarul de ordine al optiunii selectate de utilizator. in functie de valoarea acestei opinii, este memorat numele firmei in variabila s, pentru a construi adresa firmei. Pentru a incarca pagina Web a firmei, se apeleaza o metoda a clasei Window, care are rolul de a incarca pagina de la adresa specificata ca parametru (functia open()).


Utilizarea ferestrelor prin intermediul script-urilor JavaScript se realizeaza cu ajutorul metodelor obiectului Window:

  • open - deschide o fereastra; exista posibilitatea de a specifica dimensiunea ferestrei, continutul, daca are sau nu bare de butoane. Formatul este

open('URL','nume','Atribute')

unde URL este adresa paginii ce va fi incarcata in fereastra, Nume reprezinta numele ferestrei, iar Atribute reprezinta atributele care determina aspectul ferestrei:

- toolbar - determina vizualizarea barei de butoane;

- location - determina vizualizarea zonei de afisare a adresei paginii;

- status - determina vizualizarea barei de stare ;

- menubar - determina vizualizarea barei meniu;

- scrollbars - determina vizualizarea barelor de defilare;

- resizable - specifica daca utilizatorul poate redimensiona sau nu fereastra;

- width - specifica latimea ferestrei (in numar de pixeli);

- height - specifica inaltimea ferestrei (in numar de pixeli).


Exemplu:

window.open('','F','resizable=no,width=200,height=200')

deschide o fereastra denumita F, de dimensiuni fixe, specificate).

close - inchide o fereastra ;

alert - vizualizeaza o fereastra de avertisment;

confirm - vizualizeaza o fereastra de confirmare, prevazuta cu doua butoane de comanda (Ok si Cancel);

prompt - vizualizeaza o fereastra prin care utilizatorului i se solicita introducerea unei valori;

scrollTo - defileaza continutul unei ferestre pana intr-o pozitie specificata;

setlnterval - evalueaza o expresie sau apeleaza o functie periodic, la un interval de timp specificat;

setTimeout - evalueaza o expresie sau apeleaza o functie dupa un interval de timp specificat (o singura data).

Pentru a specifica adresa paginii care se incarca in fereastra se poate utiliza proprietatea  location.

De exemplu:

location = http://www.altavista.com

Referirea la o fereastra se poate realiza fie prin intermediul numelui specificat la deschiderea ferestrei, fie prin intermediul unor identificatori predefiniti:

self sau window - reprezinta fereastra curenta (de exemplu, window.close() sau self.close() inchide fereastra curenta);

in cazul ferestrei curente, precizarea numelui este optionala, cu exceptia cazului in care referirea la fereastra curenta este necesara intr-un script asociat unui anumit eveniment;

parent - se utilizeaza pentru un cadru (frame) si se refera la fereastra care contine elementul frameset din care face parte cadrul respectiv.


Crearea unui obiect Date se realizeaza astfel:

nume = new Date([parametri])

unde nume reprezinta numele obiectului, iar parametrii pot lipsi (se creeaza data curenta) sau pot fi un sir de caractere care reprezinta data in urmatoarea forma

'Luna Zi, An Ora: Minute: Secunde'

(de exemplu, new Date( 'Decerober 25, 1995 13:30:00')) sau o succesiune de numere intregi care reprezinta anul, luna si ziua, eventual ora, minutul si secunda (de exemplu, new Date(1995,ll,25)). Daca nu le specificati, ora, minutul si secunda sunt considerate 0.


Metodele obiectului Date sunt:

metode de tip set (setDay, setDate, setMonth, setYear, setHours, setMinutes, setSeconds, setTime) care permit atribuirea unei valori pentru ziua din saptamana (intre 0 si 6), pentru ziua din luna (intre 0 si 31), pentru luna (intre 0 si 11), an (incepand cu 1900), ore (intre 0 si 23), minute (intre 0 si 59), secunde (intre 0 si 59), respectiv specificarea datei in numar de milisecunde relativ la 1 ianuarie 1970 00 :00 :00;

metode de tip get (similare cu metodele set) care permit determinarea datei si orei corespunzatoare unui obieci Date ;

metode de tip to care permit conversia valorilor caracteristice datei si orei in siruri de caractere;

metode de tip parse care permit conversia unui sir de caractere in data.

Obiectul Function

Obiectul Function permite crearea unui obiect care contine un sir de caractere ce reprezinta cod JavaScript, ce urmeaza a fi compilat ca o functie. Declararea se realizeaza astfel:

nume = new Function ([par1,par2, ,parn], corp)

unde par1, par2, , parn„ sunt parametrii formali ai functiei, iar corp reprezinta corpul functiei (codul JavaScript ce va fi compilat). Obiectele de tip Function sunt compilate de fiecare data cand sunt folosite (deci folosirea lor este mai putin eficienta decat utilizarea functiilor uzuale).

Obiectul Math

Obiectul Math are proprietati si metode utile pentru calcule matematice:

abs - functia valoare absoluta (modul);

sin, cos, tan - functiile trigonometrice sinus, cosinus, tangenta (argumentul este exprimat in radiani);

acos, asin, atan - functiile trigonometrice inverse arcsinus, arccosinus, arctangenta (intorc o valoare exprimata in radiani);

exp, log - functiile exponentiala si logaritm natural;

ceil - functia pane intreaga superioara (cel mai mic numar intreg mai mare sau egal cu argumentul);

floor - parte intreaga inferioara (cel mai mare intreg mai mic decat argumentul);

min, max - intorc minimul, respectiv maximul dintre cele doua argumente;

pow - functia putere (primul argument este baza, al doilea exponentul);


Exemplu

Utilizand proprietatile status si defaultstatus ale obiectului Window, puteti afisa diverse mesaje pe bara de stare a ferestrei. Netscape Navigator afiseaza de obicei astfel de mesaje, cum ar fi „Contacting Host' sau Document: Done'.

Proprietatea defaultStatus defineste mesajul care se afiseaza in mod implicit (cand nu se afiseaza nici un alt mesaj).

Proprietatea status afiseaza un mesaj temporar, care apare la producerea unui eveniment (de exemplu, cand cursorul mouse-ului se deplaseaza deasupra unui link).

In exemplul urmator, afisam pe bara de stare un mesaj, atunci cand cursorul mouse-ului se deplaseaza deasupra unui link:

<A HREF ='clint.gif'

ONMOUSEOVER=”window.status='Executa un clic, pentru a incarca imaginea!'

</A>

Exemplu

Prin intermediul script-urilor JavaScript se poate realiza modificarea cadrelor unui document. Sa definim de exemplu intr-un fisier urmatoarea structura de frame-uri:

<HTML>

<HEAD>

<TITLE> Document care se inodifica</TITLE>

</HEAD>

<FRAMESET ROWS='30%, *”>

<FRAME SRC='Sus.htm' NAME='SUS' SCROLLING=”auto' MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>

<FRAME SRC='JOS.htm' NAME='JOS' SCROLLING='auto''

MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>

</FRAMESET>

</HTML>

Sa consideram ca fisierul sus.htm contine :

<HTML>

<HEAD>

<TITLE> Sus </TTTLE>

</HEAD>

<BODY BGCOLOR='#BBBBBB'>

<H2> <CENTER>Exemplu</CENTER<>/H2>

</BODY>

</HTML>


Fisierul jos.htm contine:

<HTML>

<HEAD> <TITLE> jos </TITLE>

<SCRIPT>

function Saluta(f)


</SCRIPT>

</HEAD>

<BODY BGCOLORs'225022' TEXT='FFFFFF' >

<FORM NAME='F'>

<INPUT TYPE=TEXT SIZE=20 NAME='Nume'>Numele <BR>

<INPUT TYPE=TEXT  SIZE=20 NAME='Prenuine'> Prenumele <BR>

<INPUT TYPE=BUTTON VALUE=''Saluta1' ONCLICK='Saluta(this.form)'>

</FORM>

</BODY>

</HTML>

Initial, aspectul ferestrei este :


Observati ca butonul Saluta are asociat un script prin intermediul evenimentului ONCLICK. Acest script apeleaza functia Saluta () care are ca efect afisarea unui text formatat in cadrul denumit sus.

Daca utilizatorul introduce in formular numele si prenumele sau, apoi actioneaza printr-un clic butonul Saluta, continutul cadrului sus se modifica.


Deplasarea unei imagini

Pentru a simula animatia se utilizeaza mai multe imagini (sa le numim cadre) care se succeda intr-o ordine prestabilita.

<HTML>

<HEAD>

<SCRIPT TYPE='text/JavaScript”>

anim = new Array(5);

var cadru =0;

var fcirop = null;

function Incarca_Imagini()


for (var i = 0; i<5; i++)


function animator( )



function StareButon( document. animF. animB. value = ' Start ' )


else


</SCRIPT>

</HEAD>

<BODY ONLOAD = 'Incarca_Imagini()'>

<IMG SRC='anim.gif NAME='Poza' HEIGHT=337 WIDTH=256>&nbsp;

<FORM NAME='animF'> p

<INPUT TYPE=button VALUE=Start MAME='animB'

ONCLICK=StareButon()>

</FORM>

</BODY>

</HTML>


In script-ul localizat in antetul documentului HTML sunt declarate trei variabile globale:

- anim - este un vector care contine cele 5 imagini ce vor constitui animatia;

- cadru - este un numar intreg care identifica cadrul curent;

- timp - retine valoarea returnata de functia setTimeout () si este utilizat pentru a declansa sau a opri animatia; initial i se atribuie acestei variabile valoarea null, ceea ce semnifica faptul ca animatia este oprita.

Functia Incarca_lmagini, care este apelata la incarcarea documentului HTML (evenimentul ONLOAD), are rolul de a incarca in vectorul anim imaginile din care este compusa animatia. Este necesar sa incarcam imaginile in vector, pentru a nu astepta la fiecare pas incarcarea unei noi imagini, iar succesiunea de imagini sa sugereze miscarea.

Observati ca imaginile sunt obiecte care au ca proprietate relevanta in cazul nostru ' adresa fisierului care retine imaginea (src). Pentru a fi usor de utilizat, cele cinci fisiere care contin imaginile ce constituie animatia sunt denumite anim0.gif, anim1.gif, , anim4.gif.

Functia animator are rolul de a executa animatia. Pentru aceasta, preia adresa imaginii din vectorul anim de pe pozitia corespunzatoare cadrului curent si o asociaza imaginii Poza din document. Apoi se trece la urmatorul cadru. Observati ca in cazul in care indicele cadrului este mai mare decat 4 (ultimul cadru posibil) se reia de la cadrul 0. in final este apelata functia setTimeout (), pentru a apela din noua functia animator() dupa o temporizare de 200 milisecunde.

Functia StareButon este apelata atunci cand se actioneaza cu un clic pe butonul animB (evenimentul ONCLICK) din formularul animF. Aceasta functie are rolul de a verifica starea butonului: daca valoarea butonului este Start, cand se executa un clic se declanseaza animatia, iar starea butonului devine Stop; daca valoarea butonului este Stop, animatia este oprita, variabilei timp i se atribuie valoarea null, iar valoarea butonului devine Start. Functia clearTimeout ( ) are rolul de a reseta functia setTimeout ( ) apelata in animator () pentru a opri animatia.

Utilizarea datei si orei

Prin intermediul obiectului Date puteti utiliza informatii de tip data calendaristica si timp. Urmatorul exemplu insereaza intr-un document HTML data si ora curenta:

<FORM NAME='F'>

<INPUT TYPE=text SIZE=9 NAME=''Data''>

<INPUT TYPE=text SIZE=9 NAME='Ora'>

</FORM>

<SCRIPT TYPE='text/JAVASCRIPT'>

<!--

var Azi = NEW Date()

var Luna = Azi.getMonth + 1

var Zi = Azi.getDay

var An = Azi.getYear

var S

document.F.Data.VALUE = Luna+S+Zi+S+An

document.F.Ora=Azi.getHours() + ':' + Azi.getMinutes() + ':' + Azi.getSeconds());

//-->

</SCRIPT>