Curs Javascript

JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie. Toate elementele sunt vazute ca obiecte si fiecare obiect are anumite proprietati si metode sau alte obiecte.
Cu JavaScript putem manipula usor obiectele. Pentru aceasta este importanta intelegerea ierarhiei obiectelor HTML.

1. Obiectul document

Acesta este unul din obiectele cele mai importante in JavaScript, este folosit foarte des.
Obiectul Window lasa continutul unui document web in grija obiectului Document, acesta este responsabil de continutul afisat pe o pagina si se poate lucra cu el pentru afisarea de paginii HTML dinamice.
Obiectul document contine mai multe proprietati, cum ar fi culoarea de fundal a paginii (bgcolor) sau alte obiecte, cum sunt tag-urile HTML. De retinut ca toate elementele HTML sunt proprietati ale obiectului document, si la randul lor acestea sunt obiecte. Un obiect HTML este de exemplu un formular, o eticheta DIV sau un link.
Pentru a desemna obiectul sau proprietatea curenta pe care dorim sa o folosim, adaugam cuvantul this urmat de caracterul punct (.) si numele proprietatii, dupa cum vedeti in urmatoarea sintaxa:

Astfel aceasta expresie se adreseaza proprietatii "nume_proprietate" din obiectul curent.

Obiectul document are urmatoarele proprietati:
Obiectul document are urmatoarele meode:
In urmatorul exemplu puteti vedea cum au fost folosite proprietatile obiectului document pentru stabilirea culorii de fundal, a textului, link-urilor si titlul unei pagini web:
<script type="text/javascript">
<!--
    document.bgColor = '#eaeafe'
    document.fgColor = '#fe1111'
    document.linkColor = '#01ff01'
    document.title = "Lectie JavaScript"
//-->
</script>
Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un albastru desechis), culoarea textului rosu, a legaturilor verde si titlul "Lectie Java Script".

2. Obiectul document si Formulare

Formularele de asemenea pot fi considerate si tratate ca obiecte dintr-un document HTML, acestea fiind sub-obiecte ale obiectului "document", astfel se apeleaza impreuna cu acesta.
Penru a intelege mai bine lucrul cu obiectul document si cum se lucreaza cu ierarhia obiectelor, studiati si urmatorul exemplu:

<html>
<head>
<script type="text/javascript">
<!--
function afisare()
{
nume = document.nume_form.nume_camp.value;
return nume
}
//-->
</script>
</head>
<body >
<form name="nume_form">
Name: <input type="text" name="nume_camp" value=""><br>
<input type="button" value="Apasa" name="Buton" onClick="alert('Salut ' +afisare())">
</form>
</body>
</html>
Acest cod va afisa in pagina urmatorul formular:
Name:
Dupa ce scrieti in campul "Name" un nume si apasati butonul "Apasa" va apare o vereastra Alert cu mesajul "Salut "nume" ".
Ierarhia obiectelor din pagina afisata de acest exemplu este urmatoarea: Daca de exemplu doriti sa aflati ce se introdce in primul element din formular, trebuie sa va ganditi cum sa accesati acest obiect.
Pornim din vârful ierarhiei "document", urmarim calea catre primul formular "forms[0]" pana la obiectul numit "elements[0]" (se adauga toate numele obiectului pe masura ce le depasim). Astfel putem accesa primul element prin : Pentru a afla ce text a fost introdus, apelam valoarea acelui element. Pentru elemente din formular (tip "input") se foloseste proprietatea "value". Acesta arata valoarea casetei "input" respective (aici textul introdus in campul de text). Acum putem afla valoarea cu ajutorul urmatoruli cod: Valoarea este stocata in variabila "name", pe care o putem folosi in script.
Astfel, putem crea o fereastra cu ajutorul liniei de cod "alert("Salut! " + name)", unde "name" va fi valoarea variabilei "name" care reprezinta textul introdus in primul element din primul formular.

Daca aveti formulare de dimensiuni mari, poate deveni dificila apelarea obiectelor dupa ordinea lor, prin numere intre paranteze patrate. Daca am avea trei formulare si vrem sa apelam al cincisprezecelea element (camp) din al treilea formular, ar trebui sa scriem "document.forms[2].elements[14]". Pentru a facilita astfel de apelari, se pot da nume unice diferitelor obiecte, folosind atributul "name", dupa cum puteti vedea in exemplu urmator: Astfel "forms[0]" este de asemenea "nume_form" si in loc de "elements[0]" puteti utiliza "nume_element" (specificat cu atributul "name" in eticheta <input>).
Prin urmare, in loc de a scrie
name = document.forms[0].elements[0].value;
Se poate scrie:
name = document.nume_form.nume_element.value;

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()
var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can
 Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gusta
Me gustan las frutas dulces.
- Imi plac fructele dulci.
Ierarhia Java Script

Last accessed pages

  1. Data si ora - Exercitii incepatori (8435)
  2. Editare clasa la obiecte din Library (68)
  3. Verbe reflexive 1 (11805)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (70607)
  5. Script Upload pentru Galerie de Imagini si fisiere Audio (918)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (105)
  2. Gramatica limbii engleze - Prezentare Generala (49)
  3. Coduri pt culori (43)
  4. Cursuri limba engleza gratuite si lectii online (40)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (40)