Scriu acest articol in speranta ca va va ajuta sa rezolvati laboratorul de IE de saptamana aceasta, urmand sa apara in curand un alt articol care sa dezbata mai pe larg acest subiect.
Scurta descriere:
Javascript este un limbaj asemanator cu Java, cu mica diferenta ca nu mai trebuie sa declaram clase pentru orice chestie.
Javascript isi creaza o reprezentare arborescenta a fisierului in care a fost inclus, elementul radacina numindu-se document. Pentru accesarea oricarui element din cadrul paginii web se va folosi functia getElementById(), care ia ca parametru id-ul elementului a carui valoare se cauta.
Un script scris in javascript va contine in cea mai mare parte functii, care vor fi apelate la apasarea unui buton, activarea unei optiuni sau alegerea unei variante dintr-un dropdown, si poate cateva variabile globale care sa tina minte valori care nu trebuie uitate dupa terminarea apelului functiei.
Cum se foloseste?
In primul rand, un fisier javascript are extensia .js.
Pentru includerea unui script intr-o pagina web se foloseste constructia:
<script type=”text/javascript”> functii_javascript </script>
, iar pentru includerea unui fisier javascript in pagina se foloseste constructia:
<script type=”text/javascript” src="cale/fisier.js"></script>
, ambele fiind incluse in tagul <head> al paginii.
Pentru folosirea unei functii definite in scriptul inclus se foloseste asocierea cu un eveniment. De exemplu, pentru un buton: <button onclick="functie()"> Submit </button>, sau pentru un select de tip droptdown: <select id="select1" onchange="functie()">.
Un exemplu de definire al unei functii ar fi urmatorul:
function sum(x,y)
{
var rez=x+y;
return rez;
}
Sa parcurgem impreuna laboratorul pentru a afla ce probleme vor fi tratate in cadrul lui.
Avem un formular simplu de comanda pentru produse format din 2 selecturi : unul pentru numele producatorului si altul pentru numele produsului (vedeti fisierul html din arhiva)
Formularul poate fi trimis la server doar daca produsul selectat apartine producatorului selectat.
Initial listele de producatori si produse sunt hardcodate.
1. Cum structuram formularul astfel incat sa fie usor de facut legatura intre producator si produs?
Simplu. Adaugam un id fiecarei optiuni de tip produs care sa faca usoara identificarea producatorului.
De exemplu:
<select id="select1">
...
<option value="Dell">Dell</option>
...
</select>
<select id="select2">
...
<option value="Dell_x30">Axim X30</option>
<option value="Dell_x50">Axim X50</option>
...
</select>
2. Afisati o eroare la apasarea butonului de submit ( la selectarea producatorului, lista de produse nu se modifica, raman toate afisate)
Se folosesc urmatoarele functii:
- functia getElementById a elementului radacina pentru aflarea valorilor selectate in cele doua dropdownuri (si campul sau value)
- functia indexOf folosita pe stringuri, pentru a afla daca numele producatorului este inclus in numele produsului (vezi reolvarea punctului 1.)
- functia alert care deschide un popup unde va afisa parametrii care ii primeste (operatorul + este folosit pentru concatenarea sirurilor)
Apelul functiei se pune pe evenimentul onclick al unui buton (vezi Cum se foloseste?).
3. Afisati o eroare la selectia gresita a produsului ( la selectarea producatorului, lista de produse nu se modifica, raman toate afisate – trebuie ca in cazul in care produsul selectat nu corespunde producatorului selectat sau invers, sa se afiseze o eroare)
Se rezolva la fel ca punctul 2. Apelul functiei se pune insa pe evenimentul onchange al selecturilor de tip dropdown (vezi Cum se foloseste?).
4. Modificati dynamic lista de produse la selectarea producatorului astfel incat sa ramana vizibile doar optiunile corespunzatoare producatorului ales.
Se folosesc doi vectori globali pentru retinerea valorilor optiunilor si a id-urilor acestora. Pentru aceasta se foloseste o variabila de tip vector: var optiuni = new Array();.
Se afla valoarea producatorului ales in primul select (getElementById), se elimina toate optiunile din al doilea select (while (selGEBI.options.length>0) selGEBI.remove(0);). Se parcurg vectorii cu valori si texte ale optiunilor eliminate si se cauta elementele care contin numele producatorului selectat. Se creaza un element de tip optiune: var y = document.createElement('option');, i se seteaza campurile value si text, si este adaugat in lista, acum goala, de optiuni pentru al doilea select: sel2GEBI.add(y,null);
Si cam asta e tot. Pentru detalii mai pe larg asupra claselor si functiilor folosite verificati pe: www.w3schools.com
Succes.
MIrror: CItiti mailul Yahoo in Gmail
Acum 15 ani
Foarte util articolul ! Rezuma tot ce este important pentru rezolvarea laboratorului pe care il vom avea aceasta saptamana !
RăspundețiȘtergereMultumim !
super tare... ar fi si mai interesant daca ati intra mai mult in detalii si sa puneti eventual tot codul :P
RăspundețiȘtergeream incercat sa fac articolul cat mai util cu putinta, dar fara sa va privez de ocazia de a invata si voi sa scrieti cod in javascript..
RăspundețiȘtergerein afara de faptul ca ati fi terminat laboratorul in 5 minute, nu v-ar fi ajutat cu nimic sa va pun rezolvarea integrala a laboratorului... :)