Laborator 1. Introducere


Responsabil: Popovici Matei <pdmatei@gmail.com>

Data publicarii: 16-03-2008

Data ultimei modificari: 16-03-2008


Obiective:


- familiarizarea cu scripturile client-side

- intelegerea conceptelor generale JavaScript

- integrarea codului JavaScript intr-o aplicatie web


Introducere JavaScript


JavaScript este un limbaj "client-oriented", ce poate fi folosit impreuna cu HTML pentru a produce pagini dinamice, interactive. Javascript (ca si PHP) este un limbaj interpretat, si nu compilat. Codul JavaScript poate fi introdus direct in sursa HTML. Interpretorul JavaScript este chiar browser-ul web.


Ce poate face JavaScript:

- poate reactiona la evenimente: se pot scrie functii JavaScript care se executa cand un eveniment are loc. (exemple de evenimente: onLoad, onClick, onFocus, etc)

- poate citi si scrie elemente (tag-uri) HTML. Structura unei pagini web (HTML) este arborescenta, si poate fi accesata prin metode specifice (ex: functia getElementById )

- poate fi folosit pentru validarea formularelor (prin verificarea continutului campurilor, la trimitere)

- poate fi folosit pentru alte operatii "client" de tip: detectarea tipului browserului, a sistemului de operare, etc.

- poate fi folosit pentru a crea / opera cu cookie-uri


Exemplu de folosire a unui script JS:

<html>

<body>

<script type="text/javascript">

document.write("Hello World!");

</script>

</body>

</html>

Acest cod va afisa o pagina web ce contine textul "Hello World";


Includerea fisierelor externe:

Puteti include fisiere ce contin cod JavaScript. (Din ratiuni de optimizare SEO, este chiar indicat sa o faceti). In plus, puteti folosi include acelasi cod pe mai multe pagini, daca este necesar. Aceste fisiere trebuie sa aiba extensia .js. Modalitatea de includere este:

<html>

<head>

<script type="text/javascript" src="numeFisier.js"></script>

</head>

<body>

</body>

</html>

Variabile in JavaScript

Ca si in PHP, variabilele in JavaScript pot fi folosite fara a fi declarate. In plus, avem posibilitatea (nu obligatorie) de a declara variabilele inainte de folosirea lor. Variabilele in JavaScript se declara astfel:

var x;

var numeVar="exemplu";

Ca si in PHP, nu se face diferenta intre tipul variabilelor. Variabilele JavaScript sunt literali simpli (nu avem nevoie de simboli tip $, ca in PHP, pentru anuntarea unei variable).


Instructiuni si operatori in JavaScript


Sunt perfect similari cu cei din limbajele orientate obiect (JAVA, PHP). Este si cazul constructiilor if, while, for, switch.


Functii in JavaScript

Maniera de definire a functiilor in JavaScript este una uzuala. Iata un exemplu:


<html>

<head>

<script type="text/javascript">

function displaymessage()

{

alert("Hello World!");

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!" onclick="displaymessage()" >

</form>

</body>

</html>


Acest exemplu, va avea ca efect, afisarea unui Message Box in la apasarea butonului din formular. Message Box-ul contine string-ul "Hello World".


Implementarea unui drop-down menu cu JavaScript


Aveti anexat la resursele de laborator un fisier index.html, impreuna cu fisierele dropdown.css si dropdown.js.

- dropdown.css: contine stilurile aferente dropdown-ului

- dropdown.js: contine codul JavaScript care implementeaza functionalitatea dropdownului.


Meniul este implementat folosind liste: <ul> </ul> (unordered list).

O astfel de lista poate contine mai multe elemente (care vor fi afisate ca bullet-uri). Elementele se specifica cu tag-ul <li> </li>.


Examinati codul HTML. Veti observa o lista principala, care contine alte (sub)liste.


Orice element HTML are asociata o proprietate de stil display.

(puteti identifica proprietatea display in sectiunea styles, aici: http://msdn.microsoft.com/en-us/library/ms535847(VS.85).aspx#

)


display:none; va produce ca efect, ne-afisarea elementului HTML cu aceasta proprietate.

display:block; va produce afisarea elementului, pe o singura linie.


Examinati stilul .submenu din fisierul dropdown.css. Observati valoarea atributului display.

Identificati elementele ce au atribuit stilul .submenu din index.html. Veti observa ca toate sub-listele sunt setate sa nu se afiseze.


Examinati codul JavaScript din dropdown.js . Observati comportamentul functiei showLayer. Ea gaseste un element HTML dupa id-ul acestuia, si daca stilul display nu este setat, sau este "none", il modifica cu "block". (si invers, daca stilul este "block", il modifica cu "none".


Revenind la codul HTML, din index.html. Observati ca fiecare sublista are asociat un id unic (sm_1 ... sm_4). Observati de asemenea faptul ca functia showLayer va fi apelata la accesarea link-ului de desfasurare a sub-listelor.


Cand link-ul este accesat, codul JS modifica corespunzator atributul display, afisand sau ascunzand lista corespunzatoare.


Task-uri:

- Fie o ierarhie de categorii pe oricate niveluri. O categorie poate contine oricate subcategorii. Exemplu de ierarhie pe mai multe niveluri:

- laptops

- dell

- dell inspiron

- other dell models

- hp

- fujitsu siemens

- operating systems

- Windows

- XP

- Vista

- Linux


- Implementati un mecanism de afisare a ierarhiei de categorii

(3p)

- Folosind JavaScript, implementati un mecanism dinamic de tip drop-down pentru afisarea categoriilor: efectuand click pe orice categorie (de pe orice nivel), se vor desfasoara toate sub-categoriile aferente. Folositi exemplu descris anterior.

(7p)


Bonus:

- Construiti-va propriul mecanism pentru gestiunea si afisarea categoriilor (fara a va folosi de scheletul de laborator pus la dispozitie); OBS: punctajul pentru bonus nu se va acorda decat rezolvarilor scrise in laborator (nu acasa) )

(4p)


Indicatii:

- folositi fisierul Category.class.php, si metodele specifice:

- __construct - extrage din tabel o categorie dupa id;

- getCategory ($row) - construieste o categorie pe baza unui $row (vector asociativ ce contine campurile cheie/valoare)

- getRootCategory - intoarce categoria de pe nivelul 0

- hasSyblings - daca o categorie are sub-categorii, intoarce true, altfel intoarce false


- completati codul din index.php; urmariti comentariile;