Curs Javascript

In aceasa lectie sunt prezentate obiectele JavaScript de nivel 1: obiectul "navigator (browser)", obiectul "History" si obiectul "Location"

1. Obiectul Navigator

Obiectul Navigator reprezinta programul, aplicatia browser folosita pentru vizualizarea rezultatelor.
Cu acest obiect putem gasi informatii despre denumirea si versiunea browser-ului, precum si alte informatii care pot fi folosite in practica.
Obiectul Navigator are la randul lui doua sub-obiecte (sau obiecte copil) : "Plugin" si "Mimetype".

- Proprietati ale obiectului "navigator" sunt urmatoarele:


- Metode ale obiectului "navigator" sunt urmatoarele:
Urmatorul script afiseaza proprietatile si metodele navigatorului (browser-ului) folosit:
<body>
<script type="text/javascript">
<!--
document.write("Nume cod :".bold()+navigator.appCodeName+"<br>");
document.write("Nume browser :".bold()+navigator.appName+"<br>");
document.write("versiune :".bold()+navigator.appVersion+"<br>");
document.write("limbaj :".bold()+navigator.language+"<br>");
document.write("MIME Type :".bold()+navigator.mimeTypes+"<br>");
document.write("Platforma :".bold()+navigator.platform+"<br>");
document.write("Plugin-uri :".bold()+navigator.plugins+"<br>");
document.write("Agent :".bold()+navigator.userAgent+"<br>");
document.close();
//-->
</script>
</body>
In pagina dv. acesta afiseaza urmatorul rezultat:

2. Obiectul History

Navigatoarele web au o caracteristica numita "History" care permite urmarirea locatiilor pe care le-ati vizitat. Acest obiect contine un tablou (Array) cu paginile vizitate de client, in cadrul unei ferestre, un istoric al paginilor vizitate.
Obiectul History permite navigarea inapoi in lista istoric la paginile care au mai fost vizitate in cadrul aceleasi ferestre.

- Proprietatile obiectului "history" sunt urmatoarele"


- Metodele obiectului "history" sunt urmatoarele"
Daca dorim intoarcerea inapoi cu 3 pagini in lista istoric, putem folosi o functie si obiectul "History" ca in exemplul urmator:
<script type="text/javascript">
<!--
function inapoi3 {
    window.history,go(-3);
}
//-->
</script>
- Unde "inapoi3" este numele functiei si (-3) reprezinta numarul de pagini la care se face saltul, pornind de la pagina curenta, negativ face saltul inapoi iar daca numarul dintre paranteze este pozitiv face saltul inainte in lista istoric.

3. Obiectul Location

Acest obiect contine date despre originea unei pagini web, stocheaza informatii despre o adresa URL dintr-o fereastra specifica.

- Proprietatile obiectului "location" sunt urmatoarele"


- Metodele obiectului "location" sunt urmatoarele"
De exemplu, daca doriti sa preluati intr-un script JS parti din adresa URL, si anume domeniul si calea catre pagina curenta sau toata adresa (fara protcol, care de obicei e "http:" ori "https":), puteti folosi modelul urmator:
<script type="text/javascript">
<!--
function get_url() {
    var domeniu = window.location.hostname;           // Preia numele domeniului din adresa URL
    var cale = window.location.pathname;                 // Preia cale ce reprezinta directorul si pagina curenta
    var url = domeniu+cale;                           // Compune variabilele pt. a forma adresa URL (fara protocol)

    alert("Adresa paginii este: \n" + url);
}
//-->
</script>

<form action=""><input type="button" value="Click" onclick="get_url()" /></form>
- Acest script va avea urmatorul rezultat, va afisa in pagina butonul de mai jos care, dupa ce veti da click, va afisa o fereastra alert cu domeniul si adresa paginii curente.
- Studiati scriptul si comentariile din codul lui.

Daca doriti sa regasiti portiunea de protocol a adresei URL curente, puteti folosi urmatorul exemplu :
<script type="text/javascript">
    var protocol = window.location.protocol;
</script>

- Observati modul de lucru bazat pe obiecte. Intai se adauga obiectul de rang superior ( window ) apoi, dupa un caracter punct (.) se adauga urmatorul sub-obiect in care vrem sa lucram (aici "location"), si dupa un caracter punct adaugam proprietatea acestui obiect la care vrem sa facem referire.


Pentru o mai buna invatare, incercati sa creati singuri si alte exemple folosind si alte proprietati si metode ale obiectelor prezentate in lectie.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut face ca optiunea din <select> sa fie selectata?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>
Care din aceste valori CSS creaza culoare gradient pentru fundal?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
Care cod creaza un array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicati functia PHP folosita pentru redirect la alta pagina.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".
An The A
The garden is a place with flowers.
- Gradina este un loc cu flori.
Indicati articolul corect pentru cuvantul: "jardín" (gradina)
la los el
El jardín es un lugar de flores.
- Gradina e un loc cu flori.
Obiecte Navigator, History si Location

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (278657)
  2. Curs si Tutoriale JavaScript (135028)
  3. Node.js - Lectia de inceput, instalare (1971)
  4. Curs cu Tutoriale Node.js (4754)
  5. Cursuri limba engleza gratuite si lectii online (67518)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (36)
  2. Cursuri limba engleza gratuite si lectii online (14)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (12)
  4. Expresii uzuale din Limba Spaniola (A-D) (9)
  5. Teste spaniola - Tests y ejercicios de Español - Gramática (9)