Curs Javascript pentru incepatori . Partea V
04 Iunie 2011 de Mihail Alin
Autor : Mihail Alin
Important!! : Textul si imaginile continute in acest curs sunt proprietatea Rotuts.com si nu pot fi copiate/refolosite pe alte pagini/e-books fara acordul nostru.
Important!! : Textul si imaginile continute in acest curs sunt proprietatea Rotuts.com si nu pot fi copiate/refolosite pe alte pagini/e-books fara acordul nostru.
+ Partea I
+ Partea II
+ Partea III
+ Partea IV - Obiectele in JavaScript
+ Partea V - Obiectele location si history
+ Partea VI - Obiectul Document
+ Partea VII - Obiectul form
Obiectele location si history
1. Ce este un URL ?
Pe internet , forma de identificare a unei resurse sau a unui serviciu se face prin intermediul unui URL ( Uniform Resource Locator ). Un URL-ul este o modalitate standard de a ne referi la o resursa specifica.
Sintaxa unui URL este urmatoarea :
Cel mai des intalnit si cel mai cunoscut tip de URL este cel care ne permite sa accesam pagini web din World Wide Web.Astfel , http://www.rotuts.com/index.php este un URL .
Folosind alte protocoale , putem accesa alte resurse , dar sintaxa ramane la fel :
- mailto:ex@yahoo.com
- Etc ….
Dupa cum puteti vedea , putem distinge, partea cu protocolul , calculatorul/server-ul pe care dorim sa il accesam si locatia la care dorim sa ajungem in acel calculator.
Folosind obiectul location, putem accesa directia URL a paginii web care este incarcata .Acest lucru ne poate ajuta pentru a incarca pagini de forma directa, fara a fi nevoie de a introduce URL-ul in campul de adresa al browser-ului sau prin intermediul unui link.
2. Obiectul Location
Obiectul location reprezinta un URL complet. Daca va aduceti aminte de ierarhia obiectele prezentata in a 4-a parte a acestui curs javascript pentru incepatori , stiti deja ca location este o proprietate a obiectului window.
Asta inseamna ca putem folosi atat sintaxa window.location cat si doar location , atat timp cat exista doar un obiect window .
Sa vedem urmatorul exemplu :
<html>
<head>
<title>Curs JavaScript pentru incepatori ! Obiectul location</title>
<script type="text/javascript">
<!—-
//www.rotuts.com
document.write("<b>Proprietate href :</br> " + location.href + "<br/>");
document.write("<b>Proprietate hash :</br> " + location.hash + "<br/>");
document.write("<b>Proprietate host :</br> " + location.host + "<br/>");
document.write("<b>Proprietate hostname :</br> " + location.hostname + "<br/>");
document.write("<b>Proprietate pathname :</br> " + location.pathname + "<br/>");
document.write("<b>Proprietate port :</br> " + location.port + "<br/>");
document.write("<b>Proprietate protocol :</br> " + location.protocol + "<br>");
document.write("<b>Proprietate search :</br> " + location.search + "<br/>");
//-->
</script>
</head>
<body>
</body>
</html>
Obiectul location are 8 proprietati si 2 metode care nu se prea folosesc . Cu ajutorul acestui scurt script imprimam pe pagina valorile acestor proprietati.
Urmatoarea imagine arata rezultatul atunci cand deschidem fisierul HTML intr-un browser, asa explicatia ce urmeaza o sa fie mai usor de inteles :
- Proprietatea href este cea mai importanta . Aceasta contine un sir de text care include URL-ul complet al paginii .Aceasta valoare poate fi obtinuta sau poate fi modificata. Observa cum , in acest caz , ne indica ca URL-ul paginii este un loc din hard disk-ul nostru ( %20 reprezinta un spatiu ) .
Daca dam o valoare proprietatii href , modificam adresa paginii web care se incarca in browser.- Proprietatea hash este un sir de text care incepe cu #.Specifica un "anchor name" intr-un HTTP URL . Intr-un URL apare intotdeauna dupa simbolul #. In cazul nostru, URL-ul paginii nu contine aceasta proprietate.
- Proprietatile host si hostname sunt similare si reprezinta calculatorul care il accesam. In plus, proprietatea host include portul folosit.
- Proprietatea pathname reprezinta partea URL-ului care indica structura folder-elor in care este localizat fisierul .
- Proprietatea port reprezinta portul folosit de server-ul care mentine pagina.Nu se pera foloseste.
- Proprietatea protocol reprezinta tipul protocolului folosit.Observa cum ne indica ca protocolul folosit este file deoarece pagina este un fisier situat in calculatorul local.
- Proprietatea search se foloseste atunci cand URL-ul contine un anumit criteriu de cautare . Aceasta este folosita de motoarele de cautare atunci cand noi introducem unul sau mai multe cuvinte despre care dorim informatii .Daca incercati sa cautati un anumit lucru pe pagina noastra , rotuts.com , puteti vedea In URL-ul paginii cu rezultatele cautarii semnul ?, proprietatea search contine tot ce urmeaza dupa acest semn.
Cum pagina o avem pe calculatorul nostru ( local ) , nu putem vedea prea multe detalii ale obiectului location . Folosim acelasi script dar de data aceasta pagina am urcat-o pe un server web :
Acum proprietatile obiectul location s-au schimbat.
Observa ca acum protocolul este http si in plus , putem obtine numele server-ului in care sta fiserul nostru cu ajutorul proprietatii host sau hostname.
3.Actualizarea adresei
Acum, ca cunoastem obiectul location , trebuie sa il punem in aplicare.
Sa ne imaginam urmatoarea situatie : tocmai ce am schimbat locatia paginii noastre web , adresa acesteia care toti o cunosteau , acum , nu mai este valida .
Care este solutia pentru a nu pierde fanii paginii noastre ?? Pe adresa veche , intretinem o pagina de redirectionare catre adresa noua .
Putem folosi proprietatea href pentru a actualiza pagina , astfel putem accesa alt URL :
<html> <head> <title>Curs Javascript pentru incepatori ! Actualizarea adresei</title> </head> <body onLoad="js:location.href='http://www.rotuts.com/'"> </body> <h1>Adresa paginii noastre a fost schimbata</h1> <h3>Acum , sunteti redirectionat catre noua adresa, Multumim</h3> </html>
In exemplul de mai sus actualizam proprietatea href atunci cand pagina curenta este incarcata folosind evenimentul onLoad al etichetei body.In acest caz , suntem redirectionati catre www.rotuts.com .
Intr-o situatie ca aceasta , folosind un simplu script ca cel din exemplul nostru , utilizatorul nu trebuie sa intervina pentru a ajunge pe pagina corecta . Acest lucru este foarte important deoarece noi , ca proprietari ai unei pagini web , nu dorim ca un utilizator al paginii noastre sa isi schimbe parerea din bine in rau si sa doreasca sa se duca pe o alta pagina web.
4.Obiectul history
Obiectul history ne permite sa accesam lista istoricului al navigatorului . In aceasta lista sunt situate acele adrese web ( URL ) pe care noi le-am vizitat intr-o determinata sesiune.
Trebuie tinut cont de un lucru atunci cand invatam acest obiect ; sa intelegem ca ne putem deplasa prin aceasta lista, dar NU putem accesa adresele web pe care le contine.
Aceasta este o masura de securitate : nimeni nu poate/nu trebuie sa cunoasca locurile pe care le-am vizitat.
Unica proprietate a obiectului history este length., care ne spune numarul de locuri vizitate in sesiunea actuala , adica , de cand am deschis browser-ul.
Obiectul history atribuie un indice fiecarui loc pe care l-am vizitat . Pagina actuala are indícele 0 , in timp ce locurile anterioare au valorile -1, -2 , etc… .Documentele care s-au incarcat dupa au indícele 1,2, etc … , acestea apar doar cand s-a folosit butonul Back al navigatorului sau metoda obiectului history, back().
Exemplu :
<html> <head> <title>Curs JavaScript pentru incepatori ! Obiectul History</title> </head> <body> <input type="button" onClick="history.back()" value="Du-te inapoi"/> <input type="button" onClick="history.forward()" value="Du-te inainte"/> <br/><br/> <a href="http://www.rotuts.com">Mergi pe pagina Rotuts.com </body> </html>
In acest exemplu folosim metodele obiectului history pentru a naviga inainte si inapoi.Avem la dispozitie trei metode pentru a reusi navigarea inainte si inapoi.
- back() : indeplineste aceeasi functie ca butonul Back al navigatorului.Este utila in ferestrele in care am indicat sa nu apara ToolBar-ul . In acest caz, un buton care sa ne duca inapoi , ar fi indicat .
- forward() : indeplineste aceeasi functie ca butonul Forward al navigatorului.Are inteles doar atunci cand , anterior, s-a folosit metoda back() sau butonul Back al navigatorului a fost apasat.
- go(numar | "text" ) : aceasta metoda ne permite navigarea la un determinat URL din lista. Se poate indica o pozitie relativa cum ar fi : go(-2); sau un text , indicand navigarea la pagina care contine acel text in titlu .
Trebuie sa va amintiti ca aceste metode nu intorc nici o valoare , astfel incat nu putem obtine absolut nici o informatie aditionala ; indeplinesc functia lor si doar atat.
De exemplu , ganditi-va ce s-ar intampla daca metoda go ar intoarce o valoare true sau false depinzand daca a putut sau nu sa acceseze pagina . In acest caz , script-ul ar sti daca noi am accesat o determinata adresa .
Folosind metodele back si forward , obtinem exact acelasi rezultat ca si cand am apasa pe butoanele respective ale navigatorului .Aceste doua butoane ale navigatoarelor folosesc aceeasi metoda pentru a functiona. Ganditi-va la puterea pe care Javascript ne-o ofera permitand-une sa lucram cu obiectele navigatorului.
Link catre partea a 6-a a acestui curs javascript pentru incepatori .
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta