Inserarea unor butoane proprii de navigare intr-un document HTML
Frecvent, autorii de pagini Web doresc sa insereze in paginile lor propriile butoane de navigare. Sa presupunem ca elaboram un manual on-line care contine 20 de capitole, in documente HTML separate si un cuprins.
De data aceasta, pentru a nu scrie in fiecare document al manualului scriptul necesar pentru navigare, vom utiliza un script JavaScript extern, denumit navig.js. Acesta va fi declarat in antetul fiecarui document HTML al manualului astfel:
<SCRIPT TYPE='text/JavaScript' SRC= 'navig.js'>
<!-->
</SCRIPT>
In fiecare document HTML vom include trei butoane de navigare :
<FORM NAME='Navigare''>
<INPUT TYPE=IMAGE VALUE='prev' SRC = 'prev.gif ONCLICK='Inainte()'>
<INPUT TYPE=IMAGE VALUE='next' SRC = 'next.gif' ONCLICK='Inapoi()'>
<INPUT TYPE=IMAGE VALUE='toc' SRC = 'toc.gif' ONCLICK='Cuprins()'>
</FORM>
Vom retine structura manualului intr-un tablou :
Var Pag=new array:('index.html',”Cap1.htm',…,”Cap20.htm');
Fiecare document va contine in antet un script in care se atribuie valoarea corespunzatoare documentului din tabloul Pag unei variabile NrPag.
De exemplu:
<SCRIPT TYPE='text/JavaScript'>
var NrPag =5;
</SCRIPT>
Fisierul navig.js contine declararea tabloului si cele trei functii necesare pentru navigare (Inainte (), Inapoi (), Cuprins ()).
Functia Inainte () permite trecerea la pagina urmatoare:
function Inainte()
window.location=Pag[NrPag];
Functia Inapoi () permite revenirea la pagina precedenta :
function Inapoi()
window.location=Pag[NrPag];
Functia Cuprins () permite revenirea la pagina care contine cuprinsul, retinuta pe pozitia 0 in tablou :
function Cuprins()
Exemplu CU LAYERE
Exemplul urmator sugereaza faptul ca utilizarea layer-elor reprezinta o tehnica excelenta de animatie.
Descriere
<HTML>
<HEAD>
<TITLE> Bila </TITLE>
<SCRIPT TYPE='text/Javascript'>
var deltax=5;
function plimba ()
</SCRIPT>
</HEAD>
<BODY>
<LAYER NAME='L0' LEFT=10 TOP=10 WIDTH=500 VISIBILITY='Show'>
<H2>
Bila se rostogoleste peste text, inainte si inapoi
</H2>
</LAYER>
<LAYER NAME='L1' LEFT=20 TOP=15
OnLoad='plimba();'>
<IMG SRC='bila.gif' WIDTH=10; HEIGHT = 10> </LAYER>
</BODY> </HTML>
Observati ca in exemplu am definit doua layer-e. Primul layer contine un text. Al doilea layer este plasat peste primul si contine o imagine. La incarcarea celui de al doilea layer (evenimentul OnLoad) este apelata functia JavaScript plimba() care modifica pozitia celui de al doilea layer, simuland miscarea.
Functia plimba() utilizeaza variabila globala deltax care retine deplasarea pe directia axei Ox. Daca valoarea variabilei deltax este pozitiva, bila se misca de la stanga la dreapta, iar daca valoarea variabilei deltax este negativa, bila se misca de la dreapta la stanga. inainte de a modifica pozitia bilei, se testeaza daca bila nu a atins marginea layer-ului L0, deasupra caruia se plimba. Daca a atins marginea, bila isi schimba directia (deplasarea deltax isi schimba semnul). In caz contrar, bila isi pastreaza directia, deplasandu-se pe orizontala cu valoarea variabilei deltax. In exemplu, deplasarea se realizeaza prin intermediul functiei MoveBy, care are doi parametri (deplasarea de orizontala si verticala). Acelasi efect se putea obtine si adunand variabila deltax la bila.left (distanta dintre marginea stanga a documentului si layer-ul Ll):
bila.left+=deltax;
Utilizarea fisierelor Cookies
Netscape ofera un mecanism prin care se pot salva informatii pe calculatorul utilizatorului, informatii care se pastreaza si dupa incheierea tranzactiei HTTP, deci pot fi partajate de mai multe documente. Aceste informatii sunt memorate in fisiere text denumite cookies. Informatiile de tip cookie sunt utilizate in special pentru a „retine' anumite informatii despre utilizator, de exemplu: daca utilizatorul respectiv a mai vizitat sau nu un anumit site, daca are anumite preferinte referitor la aspectul paginii sau daca s-a inregistrat si a obtinut deja o parola de acces.
Prin intermediul script-urilor JavaScript se pot scrie si citi informatiile de tip cookie si, de asemenea, se poate genera cod HTML pe baza acestor informatii.
Datele din fisierul cookies.txt au asociat un nume, o valoare si o data la care expira, precizate astfel:
Nume = valoare; EXPIRES = data
Data trebuie specificata in formatul:
Zi din saptamana, Zi-Luna-An Ora:Minut:Secunda GMT
De exemplu:
Specificarea datei de expirare este optionala, fisierul cookie fiind pastrat in mod implicit pana la incheierea sesiunii Netscape.
Dimensiunea unui cookie nu poate depasi 4 Kb. Netscape Navigator accepta maxim 300 cookies.
Accesul la informatiile memorate in fisierul cookies.txt se realizeaza prin intermediul unei proprietati a obiectului document, denumita cookie, in care sunt retinute sub forma unui sir de caractere toate informatiile cookie asociate documentului respectiv. Prin intermediul metodelor obiectului String (de exemplu, substring, charAt, indexOf, lastlndexOf) puteti accesa valoarea memorata intr-un cookie.
Setarea unei valori cookie se poate realiza astfel:
function setCookie(nume, valoare, data_exp)
Observati ca data_exp (data expirarii) poate avea valoarea null, deci este optionala.
Pentru a memora valoarea unui cookie am utilizat functia escape. Aceasta functiei intoarce codificarea hexazecimala a argumentului sau, utilizand setul de caractere ISOLatin.
Determinarea valorii cookie cu numele nume se poate realiza astfel:
function getCookie(nume)
}
Functia unescape converteste reprezentarea hexazecimala a valorii in sir de caractere ASCI.
De exemplu, sa descriem un script care sa solicite utilizatorului la vizitarea paginii sa isi introduca numele. Numele utilizatorului va constitui un cookie si va fi folosit pentru a aminti utilizatorului ca a mai vizitat aceasta pagina Web:
<SCRIPT TYPE = “text/JavaScript”>
function getCookie(nume)
return nul1;}
function setCookie(nume, valoare, zile)
var viz;
var nume_u;
nume_u = prompt ('Cum te numesti?');
if (nume_u)
</Script>
Observati ca in exemplu am modificat functia setCookie, transmitand ca parametru obligatoriu numarul de zile dupa care expira acest cookie. in cadrul functiei setCookie am calculat data exacta la care expira, utilizand data curenta.
De asemenea, observati ca pentru fiecare nou utilizator am setat un cookie cu numele utilizatorului si cu valoarea 1.
