sâmbătă, 16 iulie 2011

JavaScript - Creare scripturi avansate - Javascript si PHP (Part31)

Codul PHP este executat pe server iar datele de iesire sunt transmise la navigatorul web.

Codul scriptului JavaScript este executat de browser pe calculatorul utilizatorului.

Combinand aceste doua limbaje de programare web, se pot obtine scripturi JavaScript dinamice, cu rezultate in functie de datele primite si procesate de server. Astfel, aceeasi pagina de site poate contine un cod JavaScript pentru un utilizator si alt cod JS in cazul altui utilizator.

- Sunt 2 modalitati de a combina JavaScript cu PHP ca sa se obtina un rezultat dinamic sau personalizat:

1. Prin scrierea intregului script JS in codul PHP si adaugarea acestuia in pagina web cu functia PHP "echo" (sau "print").

<?php

echo '<script type="text/javascript"> // Cod JS </script>';

?> - Atentie, trebuie sa tineti cont de modul de lucru al ghilimelelor din cod, astfel incat ceea ce va fi returnat de "echo" sa fie un script JS ca si cum a fost scris in codul HTML.

2. Prin adaugarea in scriptul JS din codul HTML doar a variabilelor PHP necesare scriptului JavaScript (returnand valoarea cu "echo").

<script type="text/javascript">

var var_js = <?php echo $var_php; ?>;

</script> - Ambele variante de cod trebuie scrise in fisiere php ca sa poata fi procesate de modulul PHP.

In continuare sunt explicate cateva exemple practice din care sa intelegeti modul de combinare PHP-JavaScript si utilitatea acestuia (Trebuie sa cunoasteti deja, macar la nivel incepator, PHP si JavaScript, si HTML).

1. Alert cu nume utilizator

De exemplu, intr-o pagina web cu sistem de autentificare sa fie afisata o fereastra Alert cu numele utilizatorului dupa ce s-a autentificat.

In acest caz presupunem ca numele de utilizator e stocat intr-o variabila de sesiune: $_SESSION['nume'].

Folosind prima metoda, codul PHP ar fi urmatorul:

<?php

session_start(); // Aceasta functie trebuie scrisa la inceputul fisierului php

// Cod php ...

echo '<script type="text/javascript">alert("Bine ai venit '. $_SESSION['nume']. '");</script>';

?>

Sau a doua varianta:

<?php session_start(); // La inceputul paginii html ?>

<!-- Cod HTML -->

<script type="text/javascript">

alert("Bine ai venit <?php echo $_SESSION['nume']; ?>");

</script> - O astfel de fereastra Alert poate fi utila in cazul notificarii utilizatorului despre date ce pot fi extrase de PHP dintr-o baza de date sau fisier, cum ar fi instiintarea unui nou mesaj privat.

2. Ceas cu ora serverului

Un ceas facut si afisat in pagina cu JavaScript va afisa ora de la calculatorul vizitatorului. Daca se doreste afisarea unei aceleasi date (de pe server) pentru toti vizitatorii, cum ar fi in cazul unor jocuri, trebuie adaugat in scriptul JS timpul serverului, dupa cum e si in urmatorul exemplu:

<div id="tag_ora"></div>

<script type="text/javascript">

<!--

// Script ora server-time, de la http://www.marplo.net

// Preia data serverului prin PHP

var serverdate = new Date(<?php echo date('y,n,j,G,i,s'); ?>);

// Defineste variabilele JS de lucru

var ore = serverdate.getHours() // Preia ora

var minute = serverdate.getMinutes() // Preia minutele

var secunde = serverdate.getSeconds() // Preia secundele

// Functia de prelucrare si afisare a datelor

function ceas() {

secunde++;

if (secunde>59) {

secunde = 0;

minute++;

}

if (minute>59) {

minute = 0;

ore++;

}

if (ore>23) {

ore = 0;

}

var output = "<font size='4'><b><font size='1'>Ora server</font><br />"+ore+":"+minute+":"+secunde+"</b></font>"

document.getElementById("tag_ora").innerHTML = output;

}

// Apeleaza functia la incarcarea paginii si la fiecare secunda

window.onload = function(){

setInterval("ceas()", 1000);

}

//-->

</script> - Testati singuri pt. a vedea rezultatul

3. Afisare date cu JavaScript de la PHP, in functie de o adresa URL

Ati vazut in site-urile pt. trafic sau afisare banner ca e necesar adaugarea in pagina a unui mic cod JS cu o anume adresa URL la atributul "src".

Acestea folosesc acelasi principiu, de combinare PHP cu JavaScript.

Adresa din codul ce trebuie adaugat in pagina apeleaza un script PHP, acesta preia cu $_GET parametri din adresa URL primita si in functie de acestia prelucreaza datele pe server si construieste pentru returnarea rezultatului un cod JavaScript si HTML (fara tagul <script>) care va determina afisarea in pagina (cu document.write, sau innerHTML intr-un anume tag) a unui cod HTML pt. banner, trafic, top, ... etc.

Ca sa intelegeti mai bine, experimentati urmatorul exemplu:

a) Creati pe server un fisier php, cu denumirea "phpjs_test.php", si adaugati urmatorul cod:

<?php

// Exemplu test, de la http://www.marplo.net

// Creaza o matrice cu denumiri

$ids = array(1=>'php-mysql', 2=>'javascript', 3=>'html');

// Preia id-ul de la adresa URL

// Va returna cu echo un link (cu denumirea asociata din matrice) intr-un cod specific JavaScript (document.write)

if (isset($_GET['id'])) {

if ($sir = $ids[$_GET['id']]) {

// Va determina afisarea unui link in pagina apelanta

echo 'document.write("<a href=\'http://www.marplo.net/'. $sir. '\'>Curs '. $sir. '</a>");';

}

}

?>

b) In acelasi director de pe server creati un fisier html (ex. "test_jsphp.html") in care adaugati urmatorul cod:

<script type="text/javascript" src="phpjs_test.php?id=2"></script>

- Apelati acest fisier html de pe server. Rezultatul va fi afisarea (determinata de "document.write()") in pagina a unui link ce a fost definit in scriptul php in functie de 'id' din adresa de la "src".

Similar se pot determina spre afisare banere sau orice altceva construit cu html in interiorul comezii "document.write()".

- Trebuie acordata atentie la imbricarea ghilimelelor in codul php de returnare a rezultatului. Rezultatul transmis de "echo" trebuie sa fie o comanda corecta JS ce poate fi recunoscuta si executata de JavaScript

JavaScript - createElement si insertBefore (Part30)

1. createElement("tag")

Creaza obiectul elementului specificat la parametrul "tag".

Sintaxa generala este urmatoarea:

document.createElement("tag");

- Unde "tag" este denumirea (selectorul) elementului HTML care se doreste sa fie creat.

- De exemplu: pentru <p> paramerul va fi "p", pentru <div> parametrul va fi "div", iar pentru o casuta <input> se specifica "input".

Iata un exemplu in care este creat tag-ul <h3>

var element = document.createElement("h3");- "element" este variabila ce stocaheaza obiectul elementului creat.

Odata creat acest element, ii putem adauga atribute si continut. Pentru aceasta i-se aplica functiile specifice, "setAttribute()" (sau "className" pt. class) si "innerHTML" (sunt prezentate in Lectia 28).

De exemplu, ii adaugam o CLASA si un text.

<script type="text/javascript">

var element = document.createElement("h3");

element.className = "o_clasa";

element.innerHTML = 'Textul din eticheta H3 creata dinamic';

</script> - Acest cod va crea un obiect "element" ce contine urmatorul cod HTML

"<h3 class="o_clasa">Textul din eticheta H3 creata dinamic</h3>".

- Similar pot fi create si alte tag-uri (elemente) HTML, pentru un <div>, in loc de "h3" scrieti "div", si tot asa pt. "span", "br", "li", ... etc.

Acum trebuie doar adaugat in pagina, in locul unde dorim. Pentru aceasta se poate folosi metoda "insertBefore()", prezentata in contnuare.

2. insertBefore()

Adauga un obiect imediat inaintea altui obiect luat ca referinta, ambii in interiorul unui element parinte.

Sintaxa generala este urmatoarea:

parinte.insertBefore(element_nou, referinta);

- "element_nou" este obiectul cu elementul pe care dorim sa-l adaugam.

- "referinta" este obiectul inaintea caruia va fi adaugat "element_nou".

- "parinte" este elementul parinte, in care se afla "referinta" si unde va fi adaugat si "element_nou"

- Daca "referinta" are valoarea null, "element_nou" va fi adaugat la sfarsitul listei nod-urilor copil din "parent", devenind astfel ultimul nod copil al acestuia.

Iata un exemplu din care sa intelegeti mai bine. Ca element nou ce va fi adaugat este folosit elementul creat mai sus, la primul subcapitol.

La click pe un buton, va fi adaugat tag-ul H3 creat mai sus, inaintea unui aume DIV (cu id="rpr")

<script type="text/javascript">

<!--

// Functia ce creaza noul element si-l adauga inaintea unui cadru cu id="rpr"

function add_h3() {

// Creaza noul element H3 si ii adauga o clasa si continut

var element = document.createElement('h3');

element.className = 'o_clasa';

element.innerHTML = 'Textul din eticheta H3 creata dinamic'

// Creaza obiectul cu elementul de reper (Adaugati-i si valoarea null pentru a vedea diferenta)

var reper = document.getElementById('rpr');

// Adauga elementul nou inaintea celui de reper

// Parinte este body

document.body.insertBefore(element, reper);

}

//-->

</script>

<div id="rpr">Elementul de reper</div>

<form action=""><input type="button" value="Click" onclick="add_h3()" /></form> - Cand apasati pe butonul "Click", se apeleaza functia "add_h3()" care va crea automat elementul <h3>, cu textul si clasa precizate, apoi il va include /afisa inaintea tag-ului cu id="rpr". Dupa cum puteti testa mai jos.

clip_image002

- Daca elementul parinte nu e BODY, ci un alt DIV, TABLE ori altceva, il preluati mai intai intr-un obiect (ex.: parinte=document.getElementById('id_parinte');) apoi il includeti in formula cu "parinte.insertBefore()".

3. Adaugare automata input (casute) in formular

Iata un exemplu practic si util de folosire a metodelor createElement() si insertBefore() pentru a adauga automat casute text intr-un formular.

Explicatiile necesare sunt in codul scriptului.

<script type="text/javascript">

<!--

// Functia creaza elementul input si-l adauga inaintea butonului Submit

function add_input() {

// Seteaza noul element input, cu atributul type=text si name=nume[]

var new_input = document.createElement("input");

new_input.setAttribute("type", "text");

new_input.setAttribute("name", "nume[]");

new_input.style.display = 'block'; // Seteaza display:block; pt. a afisa casutele unele sub altele

// Seteaza obiectele cu elementul de reper (Submit) si cadru parinte

var reper = document.getElementById('submit');

var parinte = reper.parentNode;

// Adauga elementul nou inaintea celui de reper

parinte.insertBefore(new_input, reper);

}

//-->

</script>

<form action="">

<input type="text" name="nume[]" />

<input type="submit" value="Submit" id="submit" /><br /><br />

<input type="button" value="Adauga caseta" onclick="add_input()" />

</form> - Cand dati click pe butonul "Adauga caseta", se apeleaza functia "add_input()", aceasta va crea si adauga caseta de text, dupa cum puteti testa mai jos.

clip_image004- Am adaugat la atributul "name" valoarea "nume[]" (cu paranteze patrate) deoarece, in general, datele sunt trimise la un script pe server si astfel pot fi prelucrate ca o matrice.

JavaScript - Lucrul cu getElementsByTagName (Part 29)

getElementsByTagName() este o functie, sau metoda JavaScript care obtine si face referire la toate elementele HTML a caror eticheta este spoecificata ca parametru intre paranteze. De exemplu:

document.getElementsByTagName('div')

- face referire la toate tag-urile DIV din documentul HTML.

Aceasta functie stocheaza elementele pe care le-a obtinut intr-un obiect de tip Array (o matrice secventiala), unde cheile sunt numere intregi incepand de la zero. Astfel, daca intr-un document HTML sunt 3 DIV-uri si apelam functia document.getElementsByTagName('div'), aceasta va forma un obiect ce are o matrice cu 3 elemente care contin fiecare o referinta la cate un DIV, iar pentru a face referire la primul DIV, se scrie expresia: document.getElementsByTagName('div')[0] , pentru al doilea DIV se foloseste cheia [1] si tot asa.

Proprietatile care pot fi folosite cu "getElementBiId()" (functie prezentata in lectia anterioara) le puteti folosi si cu elementele din obiectul obtinut cu "getElementsByTagName()".

Ca sa intelegeti mai bine cum se lucreaza cu aceasta functie, studiati fiecare din exemplele de mai jos.

1. Aplicarea unei proprietati elementelor cu acelasi tag

Pentru aplicarea unei proprietati elementelor HTML care au acelasi tag, trebuie parcursa matricea obtinuta cu metoda getElementsByTagName(). Ca formula generala poate fi folosit urmatorul cod:

var elemente = document.getElementsByTagName('numeTag');

for (var i=0; i<elemente.length; i++) {

elemente[i].proprietate;

}

- Unde "elemente" este o variabila in care e stocata matricea cu tag-urile obtinute

- Functia "for()" parcurge aceasta matrice, folosind si expresia "elemente.length" care preia numarul de elemente din matrice.

- Iar "elemente[i].proprietate" atribuie proprietatea dorita fiecarui element (tag).

Iata un exemplu in care atunci cand se da click pe un cuvant special definit, continutul din fiecare tag SPAN va fi subliniat si albastru

<script type="text/javascript">

function ad_style(tag) {

// Obtine obiectul cu toate tag-urile precizate

var get_tags = document.getElementsByTagName(tag);

// Parcurge matricea cu tag-urile

for (var i=0; i<get_tags.length; i++) {

// Atribue proprietati de stil

get_tags[i].style.textDecoration = 'underline';

get_tags[i].style.color = 'blue';

}

}

</script>

<h4 style="cursor:pointer;" onclick="ad_style('span')"><u>Click</u></h4>

Continut cu text incadrat in etichete SPAN:<br />

www.marplo.net : <span>Cursuri</span> si <span>tutoriale</span> web <span>gratuite</span>. - Cand apasati pe cuvantul "Click", apeleaza functia "ad_style()" careia ii transmite ca parametru numele tag-ului (aici 'span'). Functia preia tag-urile din parametrul precizat, si parcurgand matricea cu acestea, atribuie fiecaruia un stil subliniat (underline) si culoarea albastra.

clip_image002- Pentru a vedea efectul, dati click pe cuvantul "Click" de jos.

2. getElementById() si getElementsByTagName()

Cand folositi "getElementsByTagName(numeTag)" imediat dupa obiectul "document", se preia tag-urile 'numeTag' din tot documentul HTML, dar sunt cazuri cand doriti preluarea unor tag-uri dintr-o anumita portiune a paginii, cum ar fi de exemplu dintr-un DIV sau UL. In acest caz, adaugati acelui element HTML un ID (in care se afla tag-urile respective) si in codul JS definiti un obiect cu acesta folosind metoda "getElementById(ID)", apoi la acest obiect aplicati functia "getElementsByTagName()".

Sintaxa generala e urmatoarea:

var variabila = document.getElementById(ID).getElementsByTagName(numeTag)

- "numeTag" fiind tag-urile care vor fi preluate si care se afla in cadrul etichetei HTML care are id-ul "ID".

- Acestea vor fi stocate in "variabila" sub forma de matrice, pe care o puteti parcurge cu o functie "for()".

Iata si un exemplu in care sunt doua liste <ul> diferite, iar cand este apasat un cuvant special definit, va fi aplicat un efect doar tag-urilor <li> a uneia din ele.

<script type="text/javascript">

function ad_style2(id, tag) {

// Obtine elementul cu id-ul din parametru 'id'

var el_id = document.getElementById(id);

// Obtine obiectul cu toate tag-urile din 'el_id', precizate la parametru 'tag'

var get_tags = el_id.getElementsByTagName(tag);

// Parcurge matricea cu tag-urile

for (var i=0; i<get_tags.length; i++) {

// Coloreaza si ingroasa textul

get_tags[i].style.color = 'blue';

get_tags[i].style.fontWeight = 'bold';

}

}

</script>

<h4 style="cursor:pointer;" onclick="ad_style2('ul2', 'li')"><u>Click</u></h4>

<ul id="ul1">

<li>Text din ul1 ...</li>

<li>Text din ul1 ...</li>

<li>Text din ul1 ...</li>

</ul>

<ul id="ul2">

<li>Text din ul2 ...</li>

<li>Text din ul2 ...</li>

<li>Text din ul2 ...</li>

</ul> - Observati ca functia "ad_style2(id, tag)" preia doi parametri: 'id' pentru id-ul elementului principal in care se afla tag-urile, iar 'tag' pentru numele tag-urilor care vor fi preluate. In felul acesta puteti folosi aceeasi functia si pentru alte grupuri (id si tag) diferite.

- Explicatiile necesare sunt cele din codul script-ului. Pentru a vedea rezultatul, apasati pe cuvantul "Click" de mai jos

clip_image004

3. getAttribute() si getElementsByTagName()

Sunt situatii in care trebuie aplicate efecte sau proprietati JavaScript doar la unele elemente (care au acelasi atribut) dintr-o grupa cu aceleasi tag-uri. Cel mai adesea sunt cazurile in care este folosit atributul "class".

Daca doriti sa adaugati un efect sau proprietate doar elementelor HTML care au aceeasi clasa (si acelasi tag), folositi metoda getAttribute('class') in cadrul parcurgerii matricei obtinute cu "getElementsByTagName()". Ca o formula generala ar fi urmatoarea:

var elemente = document.getElementsByTagName(numeTag);

for (var i=0; i<elemente.length; i++) {

if (elemente[i].getAttribute('class')=='numeClasa') {

// Executati functia sau codul dorit

}

}

- Unde "numeClasa" e numele clasei din tag-urile "numeTag" la care doriti sa aplicati un anume cod sau functie.

Ca sa intelegeti mai bine, studiati exemplul urmator in care sunt trei etichete <span> intr-un paragraf, iar la apasarea pe un cuvant "Click", va fi adaugata o culoare de fundal doar continutului din doua etichete SPAN (care au class="cls").

<script type="text/javascript">

function ad_style3(tag, clasa) {

// Obtine obiectul cu toate tag-urile precizate

var get_tags = document.getElementsByTagName(tag);

// Parcurge matricea cu tag-urile

for (var i=0; i<get_tags.length; i++) {

// Daca elementul are clasa din parametru 'clasa'

if (get_tags[i].getAttribute('class')==clasa) {

// Ii adauga o proprietate 'backgroundColor'

get_tags[i].style.backgroundColor = '#adfead';

}

}

}

</script>

<h4 style="cursor:pointer;" onclick="ad_style3('span', 'cls')"><u>Click</u></h4>

<p>Continut cu text incadrat in etichete SPAN:<br />

clip_image006<span class="cls">Cursuri</span>, si <span class="cls">tutoriale</span> web <span>gratuite</span></p> - Cand apasati cuvantul "Click", este apelata functia "ad_style3(tag, clasa), aceasta primeste ca parametri numele tag-ului si al clasei la care va aplica efectul. Rezultatul il puteti vedea mai jos.

4. Preluarea tag-urilor la incarcarea paginii

Adaugand in etichetele HTML evenimentele JavaScript specifice, precum "onclick()", "onmouseover()" (si altele prezentate in Lectia 18), se poate apela o functie dupa executarea evenimentului respectiv. Precum in exemplele din aceasta lectie, functiile sunt apelate cu "onclick()"; dar pentru aceasta trebuie specificat acest atribut intr-o eticheta HTML, iar tag-urile dorite sunt preluate numai dupa executarea evenimentului JS.

Exista si alta metoda, JavaScript are posibilitatea de preluare a tag-urilor si stocarea evenimentelor in memorie la incarcarea paginii, lucru util cand se doreste aplicarea de proprietati si efecte la incarcarea paginii, in plus nu mai trebuie adaugat evenimentul respectiv ca atribut intr-o eticheta HTML.

In principiu, se atribuie unei variabile un obiect "tip functie" apoi aceasta variabila este apelata cu proprietatea window.onload care determina executia ei la incarcarea paginii.

Studiati cu atentie codul din exemplul urmator. Acesta preia valoarea atributului "class" si continutul fiecarui tag <li> din pagina la incarcarea acesteia si pot fi afisate intr-o fereastra Alert cand se da click pe ele.

html>

<head>

<title>Preincarcarea tag-urilor</title>

<style type="text/css">

.cli { cursor:pointer; }

</style>

<script type="text/javascript">

// Se defineste variabila cu functia obiect

var get_li = function () {

// Preia tag-urile LI din pagina

var tags_li = document.getElementsByTagName('li');

var nr_li = tags_li.length; // Obtine nr. de tag-uri LI

// Parcurge matricea cu tag-urile

for (i=0; i<nr_li; i++) {

// Aplica evenimentul 'onclick' la fiecare tag, cu o functie ce trebuie executata

tags_li[i].onclick = function () {

var clasa = this.getAttribute('class'); // Obtine valoarea clasei

var continut = this.textContent || this.innerText; // Preia continutul

alert('class='+ clasa+ ' - '+ continut); // Defineste fereastra Alert

return false;

};

}

};

// Apeleaza variabila 'get_li' la incarcarea paginii

window.onload = get_li;

</script>

</head>

<body>

<ul>

<li class="cli">Text din primul LI</li>

<li class="cli">Text din al doilea LI</li>

<li class="cli">Text din al treilea LI</li>

clip_image008</ul>

</body>

</html>

- Stilul CSS din HEAD este pentru schimbarea cursor-ului de mouse in "manuta" cand se afla deasupra fiecarui <li>.

- Observati ca nu a mai fost adaugat nici un atribut "onclick", totusi, acesta este stocat in memorie si cand dati click pe fiecare <li> va apare fereastra Alert cu datele din fiecare.

clip_image010Puteti testa acest exemplu mai jos:

JavaScript - Lucrul cu getElementById (Part 28)

ID-ul este un atribut care poate fi adaugat in etichetele (sau tag-urile) HTML. Prin valoarea data acestui atribut se atribuie un nume unic etichetei respective. Acest "id" poate fi folosit in stilurile CSS pentru a defini aspectul grafic si aranjarea in pagina a tag-ului respectiv, dar poate fi folosit si in scripturi JavaScript pentru a lucra cu elementele si continutul etichetei HTML. Astfel, id-ul poate face o legatura intre JavaScript si orice eticheta HTML din document.

Pentru a face referire intr-un script JS la o eticeta HTML, prin intermediul id-ului acesteia, se foloseste urmatoarea sintaxa:

document.getElementById("id")

- getElementById("id") este o proprietate a obiectului "document", aceasta, dupa cum sugereaza si denumirea, obtine elementul care are id-ul dintre paranteze.

- Puteti folosi si ghilimele simple (' ') pentru numele id-ului din paranteze.

Aceasta sintaxa "document.getElementById("id")" returneaza o referinta la intreg elementul HTML care are acest "id", va defini un obiect continand atributele si continutul acestuia. Pentru a face referire la anumite parti din acest obiect (element HTML), de exemplu la continut sau la un atribut "style", se folosesc proprietati specifice acestui obiect de nivel 2. Mai jos este prezentata o lista cu cele mai folosite.

Proprietati folosite cu "document.getElementById("id")"

attributes[] - contine intr-o matrice (cu index de la 0) toate atributele etichetei HTML apelate. Acestea se adauga in matrice incepand de la dreapta spre stanga. Are 2 proprietati:

name - returneaza numele atributului apelat

value - returneaza valoarea atributului apelat

childNodes - contine o ierarhie de obiecte care sunt adaugate in matrice. Aceste obiecte sunt formate din elemente ale intreg continutului tag-ului respectiv. Pentru a apela obiectele din fiecare nivel ierarhic se folosesc proprietati specifice. Pentru mai multe detalii cititi documentatia de aici.

De exemplu, daca doriti sa obtineti continutul de tip text dintr-un tag, puteti folosi expresia :

document.getElementById("id").childNodes[0].nodeValue

className - preia sau modifica valoarea atributului "class"

Exemplu: pt. preluare - var cls=obiect.className; si pt. atribuire - obiect.className='nume';

getAttribute("atribut") - obtine valoarea atributului specificat intre paranteze

setAttribute("atribut", "valoare") - modifica valoarea atributului specificat cu valoarea data

removeAttribute("atribut") - elimina existenta atributului specificat intre paranteze

href - defineste sau obtine valoarea atributului "href" (adresa URL) din etichetele pentru link-uri

innerHTML - returneaza sau schimba continutul, inclusiv cod HTML, incadrat de o eticheta HTML

src - defineste sau obtine valoarea atributului "src" din etichetele <img>

style - defineste valori ale atributului "style", folosit pentru elemente de stil CSS. Aceasta proprietate este urmata de o proprietatea tip CSS.

value - se foloseste pentru elemente de formular (din <form>), obtine sau defineste valoarea unei casete (cu un anume id) din formular

Ca sa intelegeti mai bine cum se lucreazaa cu "document.getElementById("id")" si proprietatile prezentate mai sus, iata cateva exemple cu fiecare.

1. attributes[]

In acest exemplu folosim o functie JavaScript care este actionata cand se exzecuta click pe un link, aceasta va afisa o fereastra Alert cu numele atributului al doilea din eticheta pentru link.

<script type="text/javascript">

<!--

function test(val) {

var nume_a = val.attributes[1].name;

alert(nume_a);

}

//-->

</script>

<a href="#" id="id_link" title="Link pt. test" onclick="test(this)">Un link</a> - Observati ca nu am folosit "document.getElementById("un_id")", dar am folosit proprietatea "this". Aceasta face referire la elementul curent care este actionat, astfel, in script, in loc de val.attributes[1].name se putea folosi document.getElementById('id_link').attributes[1].name, rezultatul aici este acelasi.

- Acest exemplu va afisa in pagina un link precum urmatorul, dati click pentru a vedea rezultatul.

clip_image002

- Observati ca fereastra Alert va afisa "title", numele atributului, care desi este al treile, adaugarea in matricea "attributes[]" se face de la dreapta si primul element are insex 0, al doilea 1 (aici 'title'), si tot asa.

2. childNodes

Lucrul cu childNodes necesita cunoasterea mai multor proprietati care apartin de acesta, dar aici voi prezenta un exemplu simplu ca sa intelegeti cum se foloseste.

In acest exemplu avem un DIV in cadrul careia este un text oarecare si o eticheta SPAN. Pentru a vedea rezultatul scriptului cu "childNodes", un link apeleaza functia acestui script.

<script type="text/javascript">

<!--

function test2() {

var val2 = document.getElementById("ex2").childNodes[1].childNodes[0].nodeValue;

alert(val2);

}

//-->

</script>

<div id="ex2">Un text oarecare - <span>JavaScript in span</span> - alt text</div>

<a href="#" onclick="test2()" title="Exemplu cu childNodes">Test 2</a> - "document.getElementById("ex2").childNodes[1].childNodes[0]" s-ar putea traduce: primul element ( childNodes[0] ) al elementului doi ( childNodes[1] ) din eticheta cu id="ex2", iar "nodeValue" returneaza valoarea.

clip_image004

- Acest exemplu va afisa in pagina urmatoarele doua randuri, dati click pe link-ul "Test 2" pentru a vedea rezultatul.

- Va afisa textul din SPAN, eticheta <span> cu tot continutul ei este al doilea element al DIV-ului (primul fiind sirul "Un text oarecare -"), iar sirul din cadrul etichetei SPAN este primul element al acesteia.

3. getAttribute() si setAttribute()

In acest exemplu sunt folosite doua link-uri care actioneaza o functie JS care va prelua valoarea atributului specificat (aici 'title') si o va afisa in fereastra Alert.

Al doilea link transmite parametrul 1, caz in care functia va modifica valoarea atributului "title" din primul link inainte de preluarea lui, rezultat care se va vedea in fereastra Alert.

<script type="text/javascript">

<!--

function test3(nr) {

if (nr == 1) {

document.getElementById("ex3").setAttribute('title', 'Valoare title modificata');

}

var val3 = document.getElementById("ex3").getAttribute('title');

alert(val3);

}

//-->

</script>

<a href="#" id="ex3" title="Exemplu cu getAttribute()" onclick="test3(0)">Link 1</a> - <a href="#" title="Link 2 - setAttribute()" onclick="test3(1)">Link 2</a> - Acest exemplu va afisa in pagina urmatoarele doua link-uri, dati click pe primul apoi pe al doilea si iar pe primul; veti observa diferenta.

clip_image006

Sfat: Cand doriti sa schimbati valoarea unei clase, in loc de "setAttribute()" folositi className, deoarece IE creaza probleme cu "setAttribute" pt. clase.

Exemplu:

obiect.className = 'nume_clasa';

4. href

Aici este prezentat un exemplu care modifica adresa URL adaugata in atributul 'href' al unui link.

<script type="text/javascript">

<!--

function test4() {

document.getElementById("ex4").href="http://www.marplo.net/javascript/";

}

//-->

</script>

<a href="http://www.marplo.net/jocuri/" id="ex4" title="Exemplu cu href" target="_blank">Jocuri</a> - Link-ul de mai jos, desi are scris in codul lui sa deschida pagina de jocuri, prin evenimentul 'onmouseover' care apeleaza functia "test4()" la pozitionarea mouse-ului pe link se modificat valoarea atributului 'href' si va deschide alta pagina (aceea setata in functie).

clip_image008

Similar puteti proceda si cu "src", care se refera la atributul 'src' din tag-urile <img>

5. innerHTML

Cu innerHTML se poate prelua continutul incadrat de o eticheta HTML, dar poate sa si inlocuiasca cu altul acest continut, folosind inclusiv tag-uri.

In acest exemplu avem DIV-ul de la exemplu 2 si doua link-uri, acestea apeleaza o functie JS care pentru primul link va afisa o fereastra Alert cu tot continutul DIV-ului iar pentru al doile link va inlocui acest continut cu sirul din atributul 'title' (transmis ca parametru).

<script type="text/javascript">

<!--

function test5(vl) {

if (vl == 0) {

var val5 = document.getElementById("ex5").innerHTML;

alert(val5);

}

else {

document.getElementById("ex5").innerHTML = vl;

}

}

//-->

</script>

<div id="ex5">Un text oarecare - <span>JavaScript in span</span> - alt text</div>

clip_image010<a href="#" title="Exemplu cu innerHTML" onclick="test5(0)">Afiseaza Alert</a> - <a href="#" title="Exemplu cu innerHTML - inlocuire" onclick="test5(this.getAttribute('title'))">Modifica DIV</a> - In pagina va afisa urmatorul rezultat; dati click pe primul link si apoi pe al doilea.

- Observati ca desi este folosita aceeasi expresie "document.getElementById("ex5").innerHTML", aceasta are efecte opuse.

Cand se afla in dreapta caracterului '=' (ca valoare a unei variabile), aceasta expresie obtine continutul din eticheta HTML respectiva.

Cand este scrisa in stanga egalului, aceasta expresie va inlocui continutul etichetei HTML cu valoarea adaugata dupa egal, in dreapta.

6. style

Cu style puteti modifica grafic elementele din pagina, pentru aceasta se folosesc proprietatile si valorile specifice CSS. Sintaxa generala este:

document.getElementById("id").style.proprietate="valoare"

- "proprietate" si "valoare" sunt preluate din CSS, exemplu: color (proprietate) si blue (valoare).

- diferenta apare la proprietatile CSS compuse, cum e "font-weight", "margin-top" sau "border-top-width" si altele similare. In JavaScript dispare liniuta '-' si cuvintele urmatoare se scriu cu primul caracter majuscula, astfel pentru "font-weight" din CSS in JS este "fontWeight", iar pentru "border-top-width" in JS este "borderTopWidth".

In exemplul prezentat aici avem un DIV in cadrul caruia este un link si un tag SPAN care la inceput are "display:none" (nu apare in pagina). O functie JavaScript care este apelata cu "onmouseover" face ca atunci cand mouse-ul este pe link sa apara continutul din SPAN (adauga acestuia "display:inline") si cand mouse-ul este pozitionat deasupra acestuia, textul devine albastru si ingrosat.

<script type="text/javascript">

<!--

function test6(nr) {

if (nr == 0) {

document.getElementById('ex6').style.display = 'inline';

}

else if (nr == 1) {

document.getElementById('ex6').style.color = '#0101ff';

document.getElementById('ex6').style.fontWeight = 'bold';

}

}

//-->

</script>

<div>

<a href="#" title="Exemplu cu style" onmouseover="test6(0)">Link ex6</a>

- <span id="ex6" style="display:none;" onmouseover="test6(1)">Textul din SPAN, ascuns</span>

</div> - In pagina va apare urmatorul link, pozitionati mouse-ul pe el apoi mutati cursorul pe textul care apare.

Link ex6 - Textul din SPAN, ascuns

7. value

Proprietatea value se foloseste cu elemente din formular, aceasta preia sau atribue valori in campurile din formular.

"value" se poate folosi si cu proprietati specifice lucrului cu formulare, in care se utilizeaza numele din atributul "name". (Vedeti detalii si exemple la Lectia 12 si Lectia 13).

- Pentru a folosi proprietatea "value" impreuna cu "getElementById('id')", campul sau caseta de formular la care se face referire trebuie sa aibe atribuita un "id".

Iata un exemplu simplu care afiseaza intr-o fereastra Alert textul scris intr-o caseta de text.

<script type="text/javascript">

<!--

function test7() {

var val7 = document.getElementById("ex7").value;

alert(val7);

}

//-->

</script>

<form action="" method="post">

<input type="text" id="ex7" />

clip_image012 <input type="button" value="Click" onclick="test7()" />

</form> - Codul de mai sus va afisa urmatorul rezultat.

- Scrieti ceva in caseta de text si apasati pe butonul "Click".

JavaScript - Cookie-uri–2(Part 27)

1. Fisiere cookie cu acelasi nume

Daca un browser are mai multe fisiere cookie pentru un site si au acelasi nume, definite fiecare cu alta cale in parametrul "path", si cu valori diferite, de exemplu daca avem trei fisiere cookie cu numele "color", sirul cookie ar arata astfel:

color=blue; color=green; color=white

In cazul acesta, pentru a numara valorile asociate unui nume cookie puteti folosi urmatoarea functie:

function GetCookieCount (name) {

var result = 0;

var myCookie = " " + document.cookie + ";";

var searchName = " " + name + "=";

var nameLength = searchName.length;

var startOfCookie = myCookie.indexOf(searchName);

while (startOfCookie != -1) {

result += 1;

startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLength);

}

return result;

} Impreuna cu aceasta functie care numara cate valori asociate exista, trebuie sa aveti si o functie care sa regaseasca o anumita instanta a unui cookie, cum este urmatoarea:

function GetCookieNum (name, cookieNum) {

var result = null;

if (cookieNum >= 1) {

var myCookie = " " + document.cookie + ";";

var searchName = " " + name + "=";

var nameLength = searchName.length;

var startOfCookie = myCookie.indexOf(searchName);

var cntr = 0;

for (cntr = 1; cntr < cookieNum; cntr++) {

startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLength);

}

if (startOfCookie != -1) {

startOfCookie += nameLength; // omite nume cookie anterior

var endOfCookie = myCookie.indexOf(";", startOfCookie);

result = unescape(myCookie.substring(startOfCookie, endOfCookie));

}

}

return result;

} 2. Stergerea unui cookie

Pentru a sterge un cookie, numele si calea (daca a fost specificat parametrul "path") trebuie sa fie aceleasi cu numele si calea folosite la stabilirea fisierului cookie.

Stergerea unui cookie se face prin stabilirea datei de expirare la un moment in trecut, ca in exemplul urmator:

function ClearCookie (name) {

var ThreeDays = 3*24*60*60*1000;

var expDate = new Date();

expDate.setTime (expDate.getTime() - ThreeDays);

document.cookie = name + "=ImOutOfHere; expires=" + expDate.toGMTString();

} 3. Exemplu complet utilizare cookie

Pentru a intelege mai bine cum puteti crea si folosi fisierele cookie, studiati exemplul urmator.

Exemplul este ceva mai complex, cuprinde un script cu mai multe functii care contin multe din elementele invatate in lectiile anterioare cat si altele mai avansate, pentru lucrul cu siruri.

Scopul acestui exemplu este de a intelege cum functioneaza fisierele cookie, acesta contine in sectiunea HEAD a unui document HTML un script JavaScript in care sunt definite 4 functii pentru lucrul cu fisiere cookie, iar in corpul paginii, BODY, este creat un tabel HTML cu 2 coloane, in prima este un formular pentru scrierea unor preferinte care vor fi trimise la script pentru inregistrarea acestora in cookie, iar a doua coloana contine un buton care activeaza afisarea preferintelor din cookie si un alt buton care sterge cookie-urile.

Codul complet este urmatorul:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

<title>Exemplu utilizare cookie</title>

<script type="text/javascript">

<!--

// Functia pt. setarea cookie-urilor

function SetCookie () {

// Se definesc variabilele care preiau valorile campurilor din formular

var culoare = document.preferinte.culoare.value;

var fructe = document.preferinte.fructe.value;

var citat = document.preferinte.citat.value;

// Seteaza timpul de expirare, 2 zile

var twoDays = 2*24*60*60*1000

var expDate = new Date()

expDate.setTime(expDate.getTime()+twoDays);

// Creaza cookie-urile

document.cookie = "cookie1" + "=" + escape(culoare) + "; expires=" + expDate.toGMTString() ;

document.cookie = "cookie2" + "=" + escape(fructe) + "; expires=" + expDate.toGMTString() ;

document.cookie = "cookie3" + "=" + escape(citat) + "; expires=" + expDate.toGMTString() ;

}

// Functia care verifica daca exista cookie-ul cu un anumit nume transmis ca argument

// Daca exista, prelucreaza sirul pt. extragerea valorii acestuia

// Returneaza valoarea asociata numelui

function checkCookie(c_name) {

if (document.cookie.length>0) {

c_start=document.cookie.indexOf(c_name + "=");

if (c_start!=-1) {

c_start=c_start + c_name.length+1;

c_end=document.cookie.indexOf(";",c_start);

if (c_end==-1) {

c_end=document.cookie.length;

}

return unescape(document.cookie.substring(c_start,c_end));

}

}

// Daca cookie-ul verificat nu exista

return "Nu ati adaugat inca o preferinta";

}

// Functia trimite valorile primite la apelare spre verificare la functia precedenta

// Daca numele cookie-ului exista, stocheaza valoarea intr-o matrice

// Afiseaza in pagina valorile cookie-urilor

function getCookie() {

nr = getCookie.arguments.length

var val_c = new Array(nr)

var a = 0

for (var i=0; i<nr; i++) {

valoare=checkCookie(getCookie.arguments[i]);

if (valoare!=null && valoare!="") {

val_c[a] = valoare;

a++

}

}

// Afiseaza in pagina, la id-urile indicate, valorile cookie-urilor

document.getElementById("idculoare").childNodes[0].nodeValue = val_c[0];

document.getElementById("idfructe").childNodes[0].nodeValue = val_c[1];

document.getElementById("idcitat").childNodes[0].nodeValue = val_c[2];

}

// Functia pt. stergerea cookie-urilor

function stergeCookie() {

nr_c = stergeCookie.arguments.length

var ThreeDays = 3*24*60*60*1000;

var expDate = new Date();

expDate.setTime (expDate.getTime() - ThreeDays);

for (var n=0; n<nr; n++) {

document.cookie = stergeCookie.arguments[n] + "=DataStearsa; expires=" + expDate.toGMTString();

}

}

// -->

</script>

</head>

<body>

<table border="1" bordercolor="#8888fe" width="580" cellpadding="2" cellspacing="0">

<tr><td>

<form name="preferinte">

Scrieti culoarea favorita:

<input type="text" name="culoare" size="20" maxlength="40" /><br /><br />

Scrieti fructele preferate:

<input type="text" name="fructe" size="20" maxlength="40" /><br /><br />

Scrieti o fraza (un citat) favorita:<br />

<input type="text" name="citat" size="40" maxlength="80" /><br /><br />

<input type="button" value="Favorite" name="buton" onclick="SetCookie()" />&nbsp;

<input type="reset" value="Reset" name="reset" />

</form>

</td><td>

<form name="preferinte2">

<input type="button" value="Afiseaza Favorite" name="buton" onclick="getCookie('cookie1', 'cookie2', 'cookie3')" />&nbsp;

<input type="button" value="Sterge cookie" name="Clear" onclick="stergeCookie('cookie1', 'cookie2', 'cookie3')" />

</form>

<b>Culoare favorita - </b><span id="idculoare"> </span><br />

<b>Fructe preferate - </b><span id="idfructe"> </span><br />

<b>Citat favorit - </b><span id="idcitat"> </span><br />

</td></tr>

</table>

</body>

</html> - Functiile din script au fost definite pentru acest exemplu, pentru folosirea lor in alte scripturi necesita modificari.

Dupa ce adaugati acest cod intr-un document HTML, in browser veti avea afisat urmatorul rezultat:

clip_image002

- Apasati intai butonul din dreapta "Afiseaza Favorie", vor fi afisate mesaje de eroare, precum ca nu ati adaugat inca o preferinta.

Completati in campurile din stanga preferintele dv. apoi apasati butonul "Favorite", acesta apeleaza functia "SetCookie()" care va prelua datele adaugate si le va stoca in fisiere cookie care vor expira peste doua zile de la crearea lor.

Dati click pe butonul "Afiseaza Favorite", acesta apeleaza functia "getCookie()" careia ii trimite ca argumente numele cookie-urilor a caror valoare va fi afisata, vor apare preferintele scrise de dv., preluate din cookie.

Importanta si avantajul fisierelor cookie le veti constata dupa aceasta.

Inchideti broweser-ul, redeshideti-l iar la aceasta pagina si apasati butonul "Afiseaza Favorite". Observati ca sunt afisate preferintele dv. adaugate mai devreme. Maine, daca reveniti la aceasta pagina vor fi afisate aceleasi preferinte, fara sa trebuiasca sa le mai scrieti. Aceste date sunt pastrate 2 zile in fisiere cookie dupa care vor fi sterse automat.

Daca vreti sa stergeti aceste cookie-uri mai devreme, apasati butonul "Sterge cookie", acesta apeleaza functia "stergeCookie()" careia ii trimite ca argumente numele cookie-urilor pe care sa le stearga.

JavaScript - Cookie-uri–1(Part26)

1. Fisierele cookie

Un cookie consta in principal dintr-o pereche nume=valoare, iar caracteristici mai avansate permit stabilirea unei date de expirare si pot preciza ce pagini web vad informatia cookie.

Unul dintre avantajele folosirii fisierelor cookie este persistenta acestora. Un fisier cookie poate persista luni de zile (sau ani), simplificand vizitele ulterioare ale utilizatorului pe site, deoarece informatiile referitoare la vizite si preferintele utilizatorului sunt salvate si preluate din cookie de fiecare data cand va reveni la site.

Fisierele cookie sunt deosebit de utile cand sunt folosite cu JavaScript, deoarece JavaScript are functii pentru citirea, adaugarea si editarea fisierelor cookie.

Fisierele cookie au si unele dezavantaje, fiind stocate pe calculatorul utilizatorului acestea poat fi sterse din gresela (sau intentionat).

Browserul impune restrictii privind dimensiunea si numarul de fisiere cookie care pot fi stocate, iar fisierele cookie mai noi le pot suprascrie pe cele vechi.

- Numarul total de cookie-uri pentru un server sau domeniu este de 200

- Numarul total de fisiere cookie pentru un browser este de 300

- Marimea maxima a unui fisier cookie este 4 kb.

Daca aceste limite sunt depasite, browserul va sterge cele mai vechi cookie-uri si nefolosite.

Cand un utilizator trece de la un browser la altul, fisierele cookie salvate de un browser nu sunt recunoscute de celalalt

Daca mai multi utilizatori folosesc acelasi calculator si acelasi browser ei pot folosi fisiere cookie care apartin altcuiva.

Cele mai multe browsere stocheaza informatiile cookie in fisiere text necriptate, de aceea informatiile private precum parole, numere personale nu trebuie stocate direct intr-un cookie.

Utilizatorul poate configura browserul astfel incat sa interzica anexarea de cookie, in acest caz aplicatia care foloseste cookie ar putea sa nu functioneze.

2. Stocarea si regasirea valorilor unui cookie

Numele si valorile dintr-un cookie sunt stocate si stabilite utilizand proprietatea cookie a obiectului Document.

Pentru a stoca sirul cookie intr-o variabila se foloseste o comanda precum aceasta:

var myCookie = document.cookie

Pentru a afisa intr-o pagina web sirul astfel stocat , puteti folosi comanda:

document.write(document.cookie)

JavaScript stocheaza fisierele cookie in formatul urmator:

nume1=valoare1; nume2=valoare2; nume3=valoare3

Unde "nume1", "nume2" si "nume3" reprezinta numele fiecarui cookie, iar "valoare1", "valoare2" si "valoare3" reprezinta valorile care vor fi adaugate si stocate in fiecare cookie.

Perechile nume=valoare sunt separate prin caracterul punct si virgula (;) si un spatiu, iar dupa ultima pereche nu se mai pune caracterul punct si virgula.

Pentru extragerea si utilizarea valorilor din fisierele cookie, trebuie sa prelucrati sirul obtinut prin comanda "document.cookie".

Pentru a simplifica regasirea unei valori dintr-un fisier cookie, puteti folosi o functie ca cea din urmatorul script:

<script type="text/javascript">

function GetCookie (name) {

var result = null;

var myCookie = " " + document.cookie + ";"; // toate sirurile de cookie incep cu spatiu si se incheie cu ;

var searchName = " " + name + "="; // se cauta tot ce e intre name si = urmator

var startOfCookie = myCookie.indexOf(searchName);

var endOfCookie;

if (startOfCookie != -1) { // daca gaseste ceva intre ele

startOfCookie += searchName.length; // omite nume cookie anterior

endOfCookie = myCookie.indexOf(";", startOfCookie);

result = unescape(myCookie.substring(startOfCookie, endOfCookie));

}

return result;

}

var valoare_c = GetCookie('nume_cookie');

document.write(valoare_c); // Afiseaza valoarea cookie-ului cautat, sau cuvantul null

</script> - Functia "GetCookie(name)" prelucreaza sirul obtinut de comanda "document.cookie" si verifica daca exista cookie-ul cu numele transmis ca argument functiei. Daca cookie-ul cu numele respectiv exista, atribuie variabilei "result" valoarea asociata numelui si functia va returna aceasta valoare. Daca numele nu exista, valoarea variabilei "result", si returnata de functie, ramane "null".

- Variabila "valoare_c" apeleaza functia "GetCookie()", unde 'nume_cookie' dintre paranteze, este numele cookie-ului a carui valoare doriti sa o obtineti.

Prin comanda "document.write(valoare_c)" scriptul va afisa valoarea acestei variabile, care este cea returnata de functie.

3. Stabilirea valorilor unui cookie

Combinatia nume=valoare este informatia minima de care aveti nevoie pentru a defini un cookie, dar un cookie bine definit inseamna mai mult de atat.

Iata o lista de parametrii ce pot fi utilizati pentru a specifica un cookie:

nume=valoare

expires=date

path=path

domain=nume_domeniu

secure

a. Nume si valoare

Nume si valoare poate fi orice cuvinte doriti

Exemplu:

culoare favorita=blue

id=num:1

Cea mai simpla functie pentru stabilirea unui cookie poate arata astfel:

function SetareCookie(name, value) {

document.cookie = name + "+" + escape(value);

} Pentru siguranta, valoarea este codificata folosind functia "escape()". Daca in sir ar exista un caracter ";" ar puteaa fi o problema, dar aceasta functie elimina aceasta problema.

In general operatorul = este de atribuire, dar in cazul cookie-urilor fiecare nou "name" pe care il atribuiti este adaugat la lista de cookie activa, iar daca adaugati acelasi nume se va rescrie peste cel vechi.

b. Data de expirare

Parametrul "expires=data" reprezinta data si timpul (in formatul Wdy, DD-Mon-YYYY HH:MM:SS GMT) cand cookie-ul va expira si va fi sters de pe hard-disc.

Perioada de expirare trebuie transformata in milisecunde.

Daca nu este specificat nici un timp de expirare, cookie-ul va dispare la inchiderea navigatorului.

Iata un exemplu in care data de expirare este dupa o saptamana:

var name = "culoare"

var value = "blue"

var oneWeek = 7*24*60*60*1000 // Data de expirare se stabileste in mulisecunde

var expDate = new Date()

expDate.setTime(expDate.getTime()+oneWeek);

document.cookie = name + "=" + escape(value) + "; expires=" + expDate.toGMTString() Observati ca data de expirare (dateExp) este prelucrata pentru a se incheia cu sirul GMT.

c. Path

In mod implicit fisierele cookie sunt disponibile si pentru alte pagini web din acelasi director al paginii la care au fost create.

Parametrul path permite unui cookie sa fie folosit si de pagini din alte directoare ale aceluiasi domeniu.

Daca valoarea parametrului "path" este un subsir al adresei URL a unei pagini, fisierele cookie create cu acel parametru "path" sunt disponibile pentru respectiva pagina.

De exemplu, puteti crea un cookie folosind urmatoarea comanda:

document.cookie = "nume=valoare; path=/nume_director";

Aceasta face ca fisierul cookie cu numele "nume" sa fie disponibil pentru fiecare pagina din directorul "nume_director" cat si penrtru subdirectoarele acestuia.

Daca ati avea urmatoarea comanda:

document.cookie = "culoare=blue; path=/javascript/test"; Fisierul cookie "culoare" ar fi disponibil pentru toate fisierele din directorul "javascript/test" si subdirectoare ale acestuia, dar nu va fi disponibil pt. fisierele din directorul "/javascript".

Calea generala pentru ca fisierul cookie sa poata fi folosit de toate paginile unui domeniu, din toate directoarele, este calea radacina "/" (path=/).

d. Domain

Asa cum parametrul "path" face un cookie disponibil si in alte directoare, parametrul domain il face disponibil pentru alte servere Web sau subdomenii ale aceluias site.

Folosirea parametrului "domain" impune folosirea a cel putin doua caractere punct (.) daca domeniul dvs se incheie cu .com, .net ... (de ex. .marplo.net) Sirul parametrului "domain" trebuie sa fie identic cu sfarsitul numelui de domeniu al serverului dvs.

Atunci cind se cauta un cookie in lista de cookie-uri se efectueaza si o comparatie intre valoarea acestui atribut si adresa domeniului din care s-a receptionat antetul HTTP. Comparatia se realizeaza pornind de la sufixul valorilor comparate, in sensul ca daca avem "domain=marplo.net atunci aceasta valoare se va potrivi cu un nume de gazda precum "info.marplo.net".

Dupa ce s-a efectuat aceasta comparatie, in cazul in care cookie-ul este validat se va verifica si valoarea atributului "path".

e. Secure

Daca un cookie este marcat ca secure, prin intermediul acestui atribut, va fi transmis numai daca tranzactia HTTP este una sigura (folosindu-se protocolul HTTPS).

In felul acesta un cookie este transmis doar daca intruneste toate conditiile de validitate (se potrivesc domeniul, calea de directoare, timpul de expirare si securitatea canalului de comunicatie).

Daca parametrul "secure" nu este adaugat in comanda de creare a fisierului cookie, acesta va trimis intr-o forma necriptata prin retea.

In urmaorul exemplu este prezentata o functie care defineste fisierele cookie cu toti parametri:

function SetCookie (name, value, expires, path, domain, secure) {

var expString = ((expires == null) ? "" : ("; expires=" + expires.toGMTString()));

var pathString = ((path == null) ? "" : ("; path=" + path));

var domainString = ((domain == null) ? "" : ("; domain=" + domain));

var secureString = ((secure == true) ? "; secure" : "");

document.cookie = name + "=" + escape (value) + expString + pathString + domainString +secureString;

} Observati folosirea operatorului conditional ?

Pentru a folosi acesta functie, o apelati cu orice parametrii doriti sa stabiliti si utilizati cuvantul "null" in locul parametrilor care nu conteaza.

JavaScript - Ferestre Frame(Part25)

1. Crearea cadrelor

Fereastra navigatorului poate fi impartita în mai multe frame-uri (cadre). Un frame este o parte din suprafata ferestrei browserului.

Fiecare frame prezinta în interior un document propriu (in general un document HTML). De exemplu puteti creea doua frame-uri intr-o fereastra, in primul frame puteti incarca o pagina de la o adresa (ex. google.com) iar in al doilea frame o alta pagina, de la alta adresa (ex. yahoo.com).

Crearea de frame-uri apartine limbajului HTML, dar am sa descriu cateva lucruri de baza.

Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

<frameset> , <frame> si <iframe>

Un exemplu de cod HTML care creaza o pagina cu doua frame-uri este urmatorul:

<html>

<frameset rows="50%,50%">

<frame src="pagina1.html" name="frame1">

<frame src="pagina2.html" name="frame2">

</frameset>

</html> - Proprietatea "row" din eticheta <frameset> aseaza cele doua frame-uri in linie, unul deasupra celuilalt.

Primul frame, de deasupra, incarca si afiseaza "pagina1.html" iar al doilea frame incarca si afiseaza "pagina2.html".

Daca vreti sa asezati cele doua frame-uri in coloana, unul langa altul, inlocuiti cuvantul "row" cu "cols".

Expresia "50%,50%" reprezinta dimensiunea fiecarui cadru, exprimata in procente in raport cu fereastra principala.

Fiecare frame trebuie sa aibe un nume unic, exprimat prin atributul "name" din eticheta <frame>, cu ajutorul acestui nume se poate accesa in JavaScript cadrul dorit.

Pentru mai multe detalii desprea crearea de cadre, vedeti Cadre (lectia 10) din cursul HTML.

Pentru crearea unui cadru cu <iframe> puteti folosi urmatoarea sintaxa:

<iframe src="url_pagina" width="600" height="200" align="center" scrolling="yes" frameborder="0" name="nume_frame"> </iframe>

- Unde "url_pagina" e adresa paginii care va fi incarcata in iframe, "width" si "height" reprezinta lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), "scrolling" reprezinta permisiunea de derulare a paginii din cadru (yes sau no), "frameborder" specifica daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da, 0=nu), iar "nume_frame" este numele cadrului care va fi folosit de JavaScript.

2. Obiectul Frame

Acest obiect face referire la un cadru (un frame) dintr-o structura de cadre incluse intr-o fereastra.

Intr-o pagina cu mai multe cadre, obiectul "Window" reprezinta de fapt pagina care contine tagul <frameset>, iar celelalte pagini sunt considerate cadre in acest context.

Obiectul frame are urmatoarele proprietati:

document - reprezinta documentul curent incarcat in interiorul unui cadru

frames - tablou ce contine referiri la cadrele copil

length - lungimea tabloului de cadre (nnumarul de elemende)

name - atributul "name" al etichetei <frame>

parent - fereastra principala sau cadrul principal din care sunt create cadrele copil

self - reprezinta referire la cadrul curent

top - fereastra de browser care executa scriptul

window - face referire la fereastra curenta sau la cadrul curent

Obiectul frame are urmatoarele metode:

blur() - dezactiveaza cadrul

clearInterval() - anuleaza o executie repetata

clearTimeout() - anuleaza orice executie intarziata

focus() - activeaza un cadru

print() - apeleaza caseta de dialog "Print"

setInterval() - stabileste planificarea functiei pentru executare repetata

setTimeout() - stabileste planificarea functiei pentru executare intarziata

3. Frame-uri si JavaScript

Ierarhia elementelor paginii HTML create in primul exemplu (cele 2 cadre "frame1" si "frame2" asezate in linie) este urmatoarea:

fereastra browser (parinte), care este in varful ierarhiei, aceasta contine doua cadre copii - "frame1" si "frame2"

Cu ajutorul numelor date cadrelor putem schimba informatii intre cele doua frame-uri impreuna cu fereastra principala, de exemplu putem face un link intr-un frame care sa deschida o pagina in celalalt frame.

In continuare vom studia trei cazuri de relatii si accesari intre ferestrele copil si fereastra parinte.

1. Fereastra parinte acceseaza o fereastra copil

Daca aveti un script in fereastra parinte, ca sa se acceseze prin el frame-urile trebuie doar folosit numele frame-ului.

De exemplu:

frame1.document.write("Mesaj de la fereastra parinte");

2. Fereastra copil acceseaza fereastra parinte

Acest procedeu e util cand vreti sa eliminati cadrele din fereastra principala. Eliminarea structuri de cadre se face prin incarcarea unei pagini noi in locul paginii principale care a creat frame-ul (aici fereastra parinte).

Se poate accesa fereastra parinte din interiorul unei ferestre copil cu ajutorul expresiei "parent". Pentru a incarca un document nou in fereastra parinte se foloseste "location.href", caruia ii dam un nou URL, ca in exemplul urmator:

parent.location.href = "http://adresa_url"; (adresa_url este adresa noi pagini care va fi incarcata)

3. O fereastra copil acceseaza o alta fereastra copil

Nu exista legatura directa intre cele doua cadre, primul frame nu cunoaste existenta celuilalt.

Pentru fereastra parinte, al doilea cadru (frame) este numit "frame2" iar fereastra principala, vazuta din primul frame este numita "parent". Astfel, pentru a avea acces din primul frame la obiectul "document" al celui de-al doilea frame trebuie sa scriem urmatoarele:

parent.frame2.document.write("Apel de la cadrul frame1");

4. Navigarea prin cadre

Prin "navigarea prin cadre" se intelege deschiderea paginilor intr-un frame sau in fereastra principala printr-un link din alt frame. Acest lucru se poate face prin mai multe metode.

Pentru a intelegere mai bine, vom lua un exemplu concret.

Folosim o pagina cu doua cadre, in al doilea cadru vom avea legaturi catre mai multe pagini, dar care se vor incarca in primul cadru.

<html>

<frameset rows="85%,15%">

<frame src="prima.html" name="frame1">

<frame src="meniu.html" name="frame2">

</frameset>

</html> Pagina "prima.html" reprezinta pagina initiala care va fi incarcata in primul frame, cu numele "frame1" (poate fi orice document HTML).

Pentru pagina care va fi incarcata in al doilea frame (meniu.html) vom folosi codul de mai jos pentru crearea ei.

<html>

<head>

<script language="JavaScript">

<!--

function load(url) {

parent.frame1.location.href= url;

}

// -->

</script>

</head>

<body>

<center>

<a href="javascript:load('test1.htm')">Link1</a> (<i>cu JavaScript</i>) --

<a href="test2.htm" target="frame1">Link2</a> (<i>cu target="frame1"</i>) --

<a href="test2.htm" target="_top">Link3</a> (<i>cu target="_top"</i>)

</center>

</body>

clip_image001</html>

- Pentru a vedea cum functioneaza acest exemplu, click pe acest buton ->

clip_image003

- Se observa diferitele moduri de a incarca o pagina noua.

- Primul link (Link1) foloseste functia "load()" dintr-un script

- Al doilea link (Link2) foloseste atributul "target", metoda standard HTML pentru cadre

- Al treilea link (Link3) foloseste tot atributul "target", de data aceasta prin valoarea "_top" va incarca pagina noua direct in fereastra principala, eliminand astfel cadrele.

In functie de proiectul dv. puteti decide care varianta e mai potrivita.

Folosind atributul HTML "target" este metoda cea mai simpla.

Solutia JavaScript este recomandata daca doriti sa faceti mai multe lucruri ca o consecinta a click-ului pe un link, de exemplu cand doriti ca printr-un click sa deschideti doua ferestre, in doua cadre diferite. Pentru aceasta puteti utiliza urmatorul script:

<script type="text/javascript">

<!--

function loadtwo() {

parent.frame1.location.href= "pagina1.html";

parent.frame2.location.href= "pagina.html";

}

//-->

</script> - Cand va fi apelata fuctia "loadtwo()", va incarca "pagina1.html" in "frame1" si "pagina2.html" in "frame2".

JavaScript - Obiectul window - 3(Part24)

. Ferestre "on the fly" ("din mers")

Pentru a creea diferite ferestre trebuie sa scriem mai multe fisiere HTML.

Putem scrie scripturi care sa creeze ele documentul HTML (tag-urile, etichetele) care sa apara în fereastra noua, astfel nu mai este nevoie sa cream cate un fisier pentru fiecare pagina care va fi deschisa.

Puteti incarca aceste documente generate de script intr-o fereastra separata sau intr-un frame.

In primul rand trebuie modificata sintaxa "open", astfel incat sa nu incarce nici o pagina, deci in locul unde trebuie scrisa adresa URL vom scrie numai "" (doua ghilimele duble).

Pentru a crea continutul paginii HTML care va aparea în fereastra e necesar sa folosim metoda document.write() prin care pot fi create textul si codul pentru elementele HTML ale paginii.

Iata un exemplu din care veti putea intelege mai bine:

<html>

<head>

<title>Document generat de JavaScript</title>

<script type="text/javascript">

<!--

function openWindow() {

myWindow= open("", "numeFereastra", "width=400,height=300,top=100,left=200,status=yes,toolbar=yes,menubar=yes");

myWindow.document.open();

// se creaza documentul

myWindow.document.write("<html><head><title>Document creat cu JavaScript");

myWindow.document.write("</title></head><body>");

myWindow.document.write("<center><h1>");

myWindow.document.write("Acest document a fost creat cu Java Script!");

myWindow.document.write("</h1></center>");

myWindow.document.write("</body></html>");

//Se inchide crearea documentului (nu fereastra)

myWindow.document.close();

}

// -->

</script>

</head>

<body>

<form>

<input type="button" value="On_the_fly" onClick="openWindow()">

</form>

</body>

</html> - Sa studiem functia windowOpen(). Vedem ca mai intai deschide o noua fereastra browser, cu metoda "open()".

- Primul argument al metodei este un sir gol (""), astfel nu va fi deschis un document extern. JavaScript o sa creeze noul document.

Am definit variabila "myWindow" prin care accesam noua fereastra (Observati ca nu puteti folosi numele ferestrei "numeFereastra" pentru aceasta operatie).

Dupa ce am deschis fereatra, vom deschide documentul care va fi afisat, asta se realizeaza prin

myWindow.document.open()

S-a folosit metoda "open()" a obiectului "document" (este diferita de metoda "open()" a obiectului "window"). Aceasta deschide un document in fereastra, pregatind documentul pentru urmatorul input.

Tot prin variabila "myWindow" si cu ajutorul "document.write" creem documentul dorit (codul HTML si continutul documentului afisat in noua fereastra). Puteti scrie orice etichete HTML sau text.

Dupa afisarea continutului din document, trebuie sa inchidem crearea documentul, aceasta se face prin urmatorul cod:

myWindow.document.close();

- aceasta linie de cod inchide "deschiderea de creare" a documentului, si nu fereastra.

clip_image002Dupa ce adaugati tot acest cod intr-un fisier HTML, in browser veti avea un buton ca cel de jos, apasati pe el!

Aceasta metoda de crearea a paginilor printr-un script JavaScript este recomandata pentru ferestre gen pop-up, NU pentru pagini de site (paginare) cu un continut bogat!

2. Bara de stare (statusbar)

Bara de stare (statusbar) este bara din josul ferestrei browser-ului. Programele JavaScript pot scrie in aceasta bara, pentru aceasta trebuie sa dati o valoare lui:

window.status

Urmatorul exemplu va arata doua butoane, unul pentru a afisa un text in statusbar iar celalalt pentru stergerea acestui text.

<html>

<head>

<script type="text/javascript">

<!--

function statusbar(text) {

window.status = text;

}

// -->

</script>

</head>

<body>

<form>

<input type="button" name="scrie" value="Scrie in statusbar" onClick="statusbar('Aici este bara de stare!');">

<input type="button" name="sterge" value="Stegere" onClick="statusbar('');">

</form>

</body>

</html> - Scriptul este simplu, avem o functie cu un argument "statusbar(text)", argumentul functiei (variabila "text") este transmis expresiei "window.status", care va afisea valoarea acestuia in bara de stare.

Am creat un formular cu doua butoane. Ambele butoane apeleaza prin evenimentul "onClick" functia "statusbar()". Butonul "Scrie" transmite functiei argumentul sir "Aici este bara de stare!", acest sir reprezinta valoarea variabilei "text" si va fi afisat in bara de stare.

- Pentru stergerea textului din statusbar, al doilea buton transmite functiei un sir gol, doua ghilimele simple (''), care preluat ca argument va determina expresia "window.status" sa inlocuiasca textul deja existent in bara de stare cu un sir gol.

clip_image002[4]Acest cod va arata in browser urmatoarele doua butoane:

- Apasati primul si al doilea buton, observati rezultatul obtinut in bara de stare.

Browserul Mozilla Firefox ar putea avea anulata optiunea de schimbare a textului din Statusbar, pentru activarea acestei optiuni in Mozilla Firefox, deschideti Tools - Options - Content aici asigurativa ca butonul "Enable JavaScript" este bifat, dati click pe Advanced si bifati "Change status bar text".

3. Utilizare setTimeout()

Cu ajutorul unui numarator (setTimeout) puteti face computerul sa execute un anumit cod dupa o anumita perioada de timp (specificata in milisecunde).

Sintaxa generala a acestuia este:

setTimeout("expresie", timp)

Unde "expresie" este expresia (codul) care va fi executat iar "timp" reprezinta pauza de timp - in milisecunde - dupa care va fi executata "expresie".

In urmatorul exemplu se creaza un buton iar daca apasati acest buton o fereastra va aparea dupa 3 secunde:

<script type="text/javascript">

<!--

function timer() {

setTimeout("alert('S-a folosit metoda setTimeout')", 3000);

}

// -->

</script>

<form>

<input type="button" value="Timer" onClick="timer()" />

</form> setTimeout() este o metoda a obiectului window. Aceasta metoda fixeaza pauza (intreruperea) pana la executie.

Primul argument este codul JavaScript care va fi executat dupa o anumita perioada de timp, aici avem "alert('S-a folosit metoda setTimeout')". Observati ca secventa de cod JavaScript trebuie sa fie intre ghilimile. Cel de-al doilea argument spune computerului care este momentul în care codul va fi executat, trebuie sa specificati timpul în milisecunde (3000 millisecunde = 3 secunde).

clip_image004Ruland acest exemplu intr-un browser, va arata urmatorul button:

- Click pe butonul "Timer" si asteptati 3 secunde, se va deschide o fereastra Alert.

Cerinte sistem pentru Windows 8

Microsoft, cel mai mare producător de software din lume, a anunţat în cadrul Microsoft Partner Conference din Los Angeles cerinţele minime pentru sistemul de operare Windows 8, care va fi lansat anul viitor.
wallpaper-windows-8-300x187
Windows 8 va putea rula pe o gama largă de PC-uri, deoarece nu consumă multe resurse, conform reprezentaţilor Microsoft. Astfel, Windows 8 va putea rula pe PC-uri care au procesoare de doar 1 GHz, 1 GB memorie RAM, şi 16 GB spaţiu liber pe hard disc, pentru sistemele pe 32 de biţi, valorile fiind duble pentru sistemele pe 64 biţi.
Dacă ne uităm la cerinţele minime pentru Windows 8, acest sistem de operare ar putea rula fără probleme şi pe smartphone-uri, având în vedere că cele mai performante modele au în prezent procesoare de 1,2 GHz, memorie RAM de 1GB şi spaţiu de stocare de până la 64 de GB.
“În cele două prezentări ale sistemului de operare Windows 8 am vorbit despre importanţa trendului pe care l-am început cu Windows 7, acela de a menţine cerinţele de sistem plate sau de a le reduce cu timpul”, a declarat Tami Reller, vicepreşedinte Windows & Windows Live, la conferinţa Microsoft.
Despre Windows 8 se ştie că va avea un sistem de logare prin recunoaştere facială şi va putea fi încărcat pe un hard disc extern şi rulat pe diferite dispozitive. Cei de la WinRumors au descoperit şi un nou Task Manager la Windows 8. Acesta va permite utilizatorilor să îşi dea seama mult mai rapid ce aplicaţii şi procese consumă cele mai multe resurse.

Google a anunţat câţi utilizatori are serviciul Google+

Serviciul Google + numără deja peste 10 milioane de utilizatori, la 16 zile după lansarea experimentală a acestui instrument, care permite o folosire mai personalizată a web-ului, arată directorul general al Google, Larry Page.
google_20_081867478f
"Creşterea lui Google+ a fost formidabilă", a declarat Page la o teleconferinţă, cu ocazia prezentării rezultatelor trimestriale ale grupului.
"Peste 10 milioane de persoane s-au înscris la Google+; este un succes formidabil pentru echipă", a spus Page.
"În fiecare zi au fost peste un miliard de mesaje pe Google+", a adăugat el.
Google+ a fost lansat experimental pe 28 iunie şi nu este accesibil decât cu invitaţie. Unii analişti financiari apreciază că, prin acest instrument, Google ar putea face faţă noii vedete din lumea internetului, Facebook.

Microsoft renunţă la Windows?

Microsoft, cel mai mare producător de software din lume, va lansa un sistem de operare care va rula, atât pe PC-uri, cât şi pe telefoane, tablete, televizoare şi console de jocuri. Compania ia în considerare şi renunţarea la denumirea Windows.
16729_8ad0af1c2a
Imaginaţi-vă o lume fără Microsoft Windows. Acest lucru nu este imposibil după ce Andrew Lees, preşedintele diviziei Windows Phone, a declarat în cadrul conferinţei Worldwide Partner din Los Angeles că, în curând, Microsoft va lansa un sistem de operare nou, care nu va avea nicio legatură cu Windows şi care va rula pe diferite dispozitive precum telefoane mobile, computere, tablete de internet şi televizoare.
Cu această ocazie Microsoft ar putea renunţa o dată şi pentru totdeauna la numele Windows. De ce? Pentru că denumirea de Windows se leagă în ultima vreme numai de eşecuri, precum WindowsMe, Windows Vista, Windows Phone.
Windows este în continuare lider pe piaţa sistemelor de operare, însă nu are o bază de clienţi fideli, aşa cum are Mac OSX şi Linux. Studii recente au arătat că Windows se află pe o pantă descendentă.
Un alt motiv pentru care Microsoft ar putea să renunţe la denumirea de Windows este acela că Windows este vechi. Windows datează din anul 1983, iar la realizarea sistemului s-a utilizat o concepţie bazată pe ferestre (windows), de unde vine şi numele programului. Păstrarea acestui nume, nu face bine companiei Microsoft, sunt de părere analişti.
Lance Ulanoff de la PCMag.com, scrie că Microsoft nu va renunţa niciodată la denumirea Windows. Deşi circulă zvnoruri că numele venerabilului brand sunt numărate, acest lucru nu se va întâmpla. Microsoft nu are cum să renunţe la numele unui brand care a adus miliarde creatorilor şi care a făcut mai productivă munca a sute de milioane de oameni. Microsoft nu va renunţa la acest nume aşa cum nici MCDonald’s nu va schima numele “Bic Mac” în “Big Mouth Burger”, este de părere Ulanoff.
Chiar dacă Microsoft decide să renunţe la numele Windows sau nu, este irelevant pentru tehnologie, este vorba de marketing până la urmă, scrie Dwight Silverman de la chron.com. Interesant este că reprezentanţii companiei iau în considerare acest lucru. Tu ce crezi, ar trebui Microsoft să renunţe la denumirea Windows?