design web - competentedigitale.ro · internetul este cea mai mare retea de informatii si...

1

DESIGN WEB

--ssuuppoorrtt ddee ccuurrss--

CCrraaiioovvaa,, 22001122

2

Internet. Servicii Internet

INTERNETUL este cea mai mare retea de informatii si comunicare din lume, o retea globala de

retele de computere interconectate, care permit transmiterea de mesaje electronice catre alti

utilizatori si acces la informatii stocate în computere din lumea întreaga. Este o retea

asemanatoare cu o sosea virtuala, cu o multitudine de benzi pe care circula în ambele directii

diferite tipuri de date: texte, poze, filme, programe. Fiecare calculator functioneaza fie

independent (off-line) fie conectat la Internet (on-line). Orice computer care foloseste Internetul

se numeste host (gazda).

SERVICIILE OFERITE DE INTERNET

a) WWW (World Wide Web) reprezintă totalitatea documentelor disponibile pe Internet sub forma

de fisiere având un format grafic particular, având la baza un limbaj numit HTML (Hyper Text

Mark-up Language). Aceste documente se numesc pagini Web. Paginile Web pot fi legate între

ele prin legaturi numite hyperlinks (hiperlegaturi). Documentele construite cu hyperlinks se

numesc hypertext daca contin text simplu, sau hypermedia daca sunt incluse si sunete, imagini

grafice sau video. Practic, World Wide Web este o parte a retelei Internet, în timp ce Internet

este o retea globala de retele.

b) E-mail – posta electronica pe Internet, reprezintă schimbul de mesaje personale dintre diferiti

utilizatori. Minimul necesar pentru acest serviciu: un computer conectat la Internet, un program

special pentru e-mail, o adresa proprie de e-mail.

c) Chat - conversatie pe Internet – este posibil datorita unor locatii pe Internet numite Chat-

rooms (camere virtuale de conversatie) în care se poate discuta cu alte persoane simultan.

Exemple de programe pentru chat: IRC (Internet Relay Chat), ICQ sau mIRC (mIRC se gaseste

la adresa http://www.mirc.de). Chat-ul se gaseste din ce în ce mai mult în numeroase site-uri

web.

d) Newsgroups (Usenet) - ultimele noutati pe o tema anumita. Aici lumea poarta conversatii la

„nivel înalt”; puteti contribui cu idei la tema în discutie si sa raspundeti la întrebari. Spre

deosebire de un chat, discutiile nu se poarta în timp real. Forumurile functioneaza asincron, în

special la dialogurile ce se poarta intre fusuri orare diferite.

3

e) Telnet – permite conectarea la un calculator (server) aflat la distanta. În acest caz

calculatorul care se conecteaza este un simplu terminal.

f) FTP – File Transfer Protocol – serviciu pentru copierea (transferul) fisierelor de pe un

computer pe un altul, prin intermediul Internetului.

UTILIZABILITATEA, ERGONOMIA SI ACCESIBILITATEA SITURILOR WEB

Mediile web accesibile trebuie să fie şi utilizabile, adică să îmbine armonios caracteristicile

utilizatorului, caracteristicile activităţii şi caracteristicile sistemului (interfaţa utilizator). Altfel

exprimat, utilizabilitatea unei interfeţe utilizator este determinată de combinaţia setărilor făcute

de utilizator, adică ceea ce încearcă acesta să facă, cu modul în care utilizatorul îşi îndeplineşte

sarcina cu sistemul pe care îl foloseşte. Sistemele trebuie să dispun caracteristici ale

utilizabilităţii, cum sunt: uşurinţă în utilizare, învăţare uşoară şi compatibilitate între activitatea

(acţiunea) utilizatorului şi scopurile activităţii. Factorii care influenţează aceste elemente sunt:

tehnologia web, proiectarea orientată utilizator şi legislaţia.

Conţinutul celor mai importante standarde care se referă la accesabilitatea web este produs de

către W3C. Acesta este creat pentru a îmbunatăţi accesabilitatea site-urilor web şi se împarte în 3

categorii distincte de standarde:

Web Content Accessiblity Guidelines (WCAG) – explică cum se poate face conţinutul

paginilor web accesibil pentru persoanele cu dizabilităţi. Principalul obiectiv este să

promoveze accesabilitatea pentru un public foarte variat.

User Agent Accessibility Guidelines (UAAG) – oferă indicaţii pentru crearea de agenţi pentru

utilizatori, care sa înlăture barierele accesibilităţii web pentru persoanele cu dizabilităţi

(vizuale, de auz, fizice, cognitive şi neuronale). Pe lângă faptul că ajută dezvoltatorii de

browsere HTML şi de media playere, acest document va fi şi în favoarea dezvoltatorilor de

tehnologii asistive, întrucât explică la ce tipuri de informaţie şi de control se poate aştepta

tehnologia asistivă din partea unui user agent.

Authoring Tool Accessiblity Guidelines(ATAG) – include instrucţiuni pentru dezvoltatorii de

“authoring tool” pentru web. Instrumentele folosite la crearea acestor tipuri de informaţii

trebuie să fie la rândul lor, accesibile. Acest document face parte dintr-o serie de documente

care fac referinţă la accesabilitate, toate fiind publicate de W3C în Web Accessibility

Initiative(WAI).

4

CSS

Introducere in CSS

CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor

web (de exemplu formatare text, background sau aranjare in pagina, etc.).

Beneficiile sintaxei CSS sunt:

formatarea este introdusa intr-un singur loc pentru tot documentul

editarea rapida a etichetelor

datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului

paginii, implicit incarcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:

nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline

nivelul 2 este informatia introdusa in blocul HEAD, nivelul 3 este reprezentat de comenzile

aflate in pagini separate, tip externe.

Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practic deoarece

poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot folosi acelasi fisier extern

CSS) eliminand timpul necesar introducerii codului corespunzator in fiecare pagina si totodata

editarea lor intr-un singur loc pentru mai multe fisiere.

Extensia acestor fisiere este .css.

Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii:

<link rel="stylesheet" type="text/css" href="fisier_css.css">

Atributele indica urmatoarele: rel - fisierul este tip styleshhet

type - tip text ce contine comenzi CSS

href - fisierul sau adresa fisierului CSS.

Comenzile de nivel 2 sunt cele gazduite oriunde intre perechea de etichete <head> si </head>

conform sintaxei:

<style type="text/css">

... declaratii CSS ...

</style>

5

Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru a

ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style.

O declaratie CSS are sintaxa:

nume_proprietate:valoare_proprietate;

Exemplu:

<html>

<head>

<title>CSS Example</title>


p {

color: red;

}

a {

color: blue;

}

</style>

Codul de mai sus face toate paragrafele din pagina rosii si toate link-urile albastre. Fiind o

metoda similara cu cea in-line nu este foarte recomandata.

Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi

CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:

<eticheta style="codul CSS dorit">

...textul sau obiectul asupra caruia este aplicat codul CSS...

</eticheta>

Exemplu:

<p style="color: red">text</p>

Codul de mai sus face un anumit paragraf rosu.

6

Elementele class si id

id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci cand dorim sa

aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de

browsere numele asociate zonelor nu vor contine caracterul _.

Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML,

plasandu-se un nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD

sau intr-un fisier extern.

Exemplu: folosirea elementului id

<html>

<head>

<title>Exemplu 2_1</title>




</style>

</head>

<body>

<p id="albastru">Text albastru introdus prin id "albastru"</p>

Text negru

</body>

</html>

Elementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau

pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD sau intr-un

fisier extern.

Exemplu: folosirea elementului class

<html>

<head>





</style>

</head>

<body>

<p class="rosu">Primul text rosu introdus prin class "rosu"</p>

Text negru <p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>

</body>

</html>

7

Casete in CSS In CSS fiecarui element HTML ii este asociata o caseta. Caseta are patru parti:

marginea (margin) este spatiul exterior chenarului pana la celelalte elemente

chenarul (border) este o bordura care inconjoara elementul

completarea (padding) stabileste distanta dintre continut si chenar

continutul include informatia utila (text, tabele, imagini, formulare, etc.)

Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate

dimensiunile prezentate in continuare.

Proprietatile width si height

Latimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height. Aceste

atribute pot fi adaugate sau suprascrise prin comenzi CSS.

Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii

<html>

<head>





</style>

</head>

8

<body>

<img src="margini.gif">

</body>

</html>

Proprietatile padding si margin

Proprietatea padding stabileste distanta dintre obiect si chenar simultan pentru toate

laturile. Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, padding-

left sau padding-right.

Proprietatea margin stabileste distanta dintre chenar si celelalte obiecte din pagina

simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top,

margin-bottom, margin-left sau margin-right.

Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt (puncte) sau cm

(centimetri).

Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga si 25px

fata de latura de sus

<html>

<head>





</style>

</head>

<body>

<img src="margini.gif">

</body>

</html>

Proprietatea border

9

Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea

chenarului este border avand proprietatile asociate width, style si color. Pentru a fi siguri ca

aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie sa declaram

pentru border cel putin width si style.

border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt

(puncte), cm (centimetri) sau in (inci).

border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove,

ridge, inset si outset.

border-color stabileste culoarea chenarului si poate fi exprimata prin valoare

hexazecimala sau in cuvinte.

Exemplu: definim noua clase utilizand proprietatile border-width border-style si border-

color

<html>

<head>





</style>

</head>

<body>

<div class="clasa1">border-width: 2px; border-style: dotted; border-

color: red;</div><br>

<div class="clasa2">border-width: 3px; border-style: dashed; border-

color: blue;</div><br>

<div class="clasa3">border-width: 2px; border-style: solid; border-

color: green;</div><br>

<div class="clasa4">border-width: 3px; border-style: double; border-

color: black;</div><br>

<div class="clasa5">border-width: 2px; border-style: groove; border-

color: silver;</div><br>

10

<div class="clasa6">border-width: 3px; border-style: ridge; border-

color: lime;</div><br>

<div class="clasa7">border-width: 2px; border-style: inset; border-

color: yellow;</div><br>

<div class="clasa8">border-width: 3px; border-style: outset; border-

color: aqua;</div><br>

<div class="clasa9">border-width: 2px; border-style: hidden; border-

color: olive;</div>

</body>

</html>

11

Stiluri pentru text

Proprietatea font-family

font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le

recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si

tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de

exemplu serif, sans-serif sau monospace).

In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele

duble pentru ca browserul sa le interpreteze impreuna.

Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua

fonturi din lista, folosindu-l pe al treilea

<html>

<head>





</style>

</head>

<body>

<p>Text scris cu cu fontul Arial</p>

Text negru

<p>Text scris cu cu fontul Arial</p>

</body>

</html>

Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML

<html>

<head>


</head>

<body>

<p style="font-family: font1,font2,arial;">Text scris cu cu fontul

Arial</p>

Text negru

<p style="font-family: font1,font2,arial;">Text scris cu cu fontul

Arial</p>

</body>

</html>

Proprietatea font-size

12

Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt),

keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.

Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli

<html>

<head>





</style>

</head>

<body>

<p>Text scris cu font de 20px</p>

Text negru

</body>

</html>

Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.

Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc

dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.

CSS keyword numar FONT size xx-small 1

x-small 2

small 3

medium 4

large 5

x-large 6

xx-large 7

Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din

cuvintele de mai sus.

Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi

vizualizata diferit de browsere diferite.

Ca verificare folositi acelasi exemplu schimband 20px cu 200%.

Proprietatea font-style

font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si

italic.




</style>

13

Proprietatea font-weight

font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de

la 100 la 900 sau BOLD, BOLDER, LIGHTER.




</style>

Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite

de caracterul ; (punct si virgula).

Exemplu: folosirea unui stil compus aplicat etichetei p

<html>

<head>





</style>

</head>

<body>

<p>Text scris cu Arial, 20px, italic, 800</p>

Text negru

</body>

</html>

Aliniere

text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left,

right si center ca si eticheta align din HTML.

In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:




</style>

Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului

14

<html>

<head>





</style>

</head>

<body>

<div class="pecentru"><img src="poza.jpg"></div>

Text neformatat

<div class="pecentru">Text formatat</div>

</body>

</html>

vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua

valorile: top, middle si bottom.

In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td> ale tabelului




</style>

float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In

functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii.

Exemplu: cream clasa auto si o aplicam inaginii

<html>

<head>





</style>

</head>

<body>

<img src="poza.jpg" class="auto">

Textul se aliniaza la dreapta, iar poza la stanga datorita clasei

"auto".

</body>

</html>

Tabulare

http://www.drogoreanu.ro/tutorials/css/exemplu4_2.html

15

Proprietatea text-indent este folosit pentru alinierea textului in interior avand valori exprimate

in inci (in), centimetri (cm) sau pixeli (px).

In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior




</style>

Decorare

Proprietatea text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea

valorile underline, line-through sau none.

Exemplu: stilul asociat etichetei p este prezentat in HEAD <html>

<head>





</style>

</head>

<body>

Text normal

<p>Text subliniat</p>

</body>

</html>

Culoare

color defineste culoarea textului dintr-o zona sau intraga pagina.

Exemplu: stilul asociat etichetei p este prezentat in HEAD <html>

<head>





</style>

</head>

<body>

Text normal

<p>Text albastru</p>

</body>

</html>

http://www.drogoreanu.ro/tutorials/css/exemplu4_3.html

16

Stiluri pentru legaturi

In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate

in interiorul etichetei BODY. Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa

CSS.

Exemplu

<html>

<head>





</style>

</head>

<body>

Text normal

<a href="exemplu4_4.html">link</a> catre exemplul 4_4

</body>

</html>

a defineste stilul general pentru legatura

a:link defineste stilul legaturii nevizitate

a:visited defineste stilul legaturii vizitate

a:active defineste stilul legaturii active (nu prea se foloseste)

a:hover defineste stilul cand mouse-ul este deasupra legaturii

Culoare de fond

background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.

Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p

<html>

<head>

17



</style>

</head>

<body>

Text normal

<p>Text cu background rosu</p>

</body>

</html>

18

Stiluri pentru liste

Proprietatea list-style-type

Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS in

zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul Netscape nu

permite asocierea comenzilor CSS decat pentru eticheta li.

Sintaxa este:




</style>

valoarea poate fi:

valoare disc disc disc

circle cerc

square patrat

decimal numere intregi

lower-roman numere romane, caractere mici (i, ii, iii, iv)

upper-roman numere romane, caractere mari (I, II, III, IV)

upper-alpha litere mari (A, B, C, D)

lower-alpha litere mici (a, b, c, d)

none nimic

Exemplu: lista ordonata folosind marcaje cu litere mici

<html>

<head>





</style>

</head>

<body>

Necesar materiale:

<ol>

<li>caramida</li>

<li>ciment</li>

<li>ipsos</li>

</ol>

19

</body>

</html>

Proprietatea list-style-image

In afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin

comansa CSS list-style-image. Imaginile sunt introduse prin adresa url().

Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif

<html>

<head>





</style>

</head>

<body>

Necesar materiale:

<ul>

<li>caramida</li>

<li>ciment</li>

<li>ipsos</li>

</ul>

</body>

</html>

20

Pozitionarea in CSS

Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata

obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.

Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile

LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).

Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate

fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau

imagine.

Exemplu: am aplicat pozitionarea absoluta etichetei h4

<html>

<head>


</head>

<body>

<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>

<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>

</body>

</html>

Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare

si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si

top.

Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ

<html>

<head>





</style>

</head>

<body>

<div class="absolut">Pozitionare absoluta, independent de celelate

obiecte din pagina</div>

Text

<div class="relativ">Pozitionare relativa, dupa "Text"</div>

</body>

</html>

21

Proprietatea Display

Exista elemente html care sunt delimitate de celelalte elemente sau de elemente de acelasi tip

printr-un salt in linie (enter, line break, br). Spunem ca aceste elemente sunt afisate in block.

- <h1>, <h2>, <h3>, etc

- <div> <p>, <li>

Deasemenea exista elemente care sunt afisate in pe acelasi rand fara sa influienteze cursul pagini.

-<span>, <a>

Spunem ca aceste elemente sunt afisate inline.

Cu ajutorul CSS afisarea elementelor poate fi schimbata si anume putem afisa elemente precum

div paragraf etc inline si elemente precum linkuri span etc in block.

div {display:inline;}

Exemplul de mai sus va afisa toate div-urile pe aceasi linie.Se foloseste in general cu clase sau id

in css pentru a personaliza doar div-urile care se vor personalizate. Ex: bara de meniuri orizontala

div.bara_orizontala {display:inline;}

Mai jos am exemplificat un link afisat in block, introducand un salt in linie inainte si dupa el.

a {display:block;}

Se foloseste in general cu clase sau id in css pentru a personaliza doar link-urile care se vor

personalizate. Ex: sidebar.

a.sidebar_links {display:block;}

Vom folosi proprietatea display in css pentru a ascunde un element in html si proprietatea

visibility pentrs a nu afisa acelasi element html.

Intrebarea logica ar fi: Si care este diferenta?

p.ascuns {visibility:hidden;}

visibility:hidden; ascunde paragraful pastrand insa spatiul rezervat in cursul paginii. Celelalte

elemente se vor comporta ca si cand paragraful ar fi afisat pe pagina chiar daca acesta nu este

vizibil.

p.ascuns {display:none;}

display:none; ascunde paragraful fara sa pastreze spatiul rezervat acestuia in pagina. Celelalte

elemente vor ocupa spatiul rezervat acestuia.

22

Crearea unui meniu de navigare folosind o lista structurala

Pentru site-urile noi ar fi bine sa eviti folosirea tabelurilor pentru layout sau foloseste-le numai

acolo unde este absolut necesar. Eliminand elementele tabelare vei vedea ca pagina ta va contine

mult mai putin markup. Un sistem de navigare este pur si simlu o lista cu locuri pe care

utilizatorii le viziteaza pe site, deci o lista neordonata este modalitatea ideala de a marca

navigarea ta.

Sistemul de navigare din imaginea de mai jos este structurat ca o lista si formatat (styled)

folosind CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head>

<title>Lists as navigation</title>

<meta http-equiv="content-type"

content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="listnav1.css" />

</head>

<body>

<div id="navigation">

<ul>

<li><a href="#">Recipes</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Buy Online</a></li>

</ul>

23

</div>

</body>

</html>

#navigation {

width: 200px;

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

#navigation li a:link, #navigation li a:visited {

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em;

border-left: 12px solid #711515;

border-right: 1px solid #711515;

background-color: #B51032;

color: #FFFFFF;

text-decoration: none;

}

Pentru a crea un sistem de navigare bazat pe o lista neordonata, mai intai creaza lista, plasand

fiecare link de legatura/navigare inauntrul unui element <li>.

<ul>





</ul>

Apoi, incadreaza textul cu <div> si cu un ID corespunzator (element de identificare, denumire).

24

<div id="navigation">

<ul>





</ul>

</div>

Aceasta marcare nu arata extraordinar daca lasam formatarea implicita a browserului.

Primul lucru care trebuie facut este sa stilizam incadrarea care contine legaturile de navigare, in

acest caz:

#navigation: #navigation {

width: 200px;

}

Am oferit lui #navigation o latime. Daca acest sistem de navigare ar face parte dintr-o pagina de

layout CSS, am adauga informatii de pozitionare si la acest ID. Acum stilizam lista:

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

Regula de mai sus scoate bulinele de listare si spatiul de la margine pe care browserul il aplica

implicit atunci cand afiseaza o lista.

25

Pasul urmator este sa stilizam elementele li din #navigation, pentru a le pune o margine

inferioara:

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

In final stilizam linkul in sine:

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em;

border-left: 12px solid #711515;

border-right: 1px solid #711515;

background-color: #B51032;

color: #FFFFFF;

text-decoration: none;

Cea mai mare parte din munca este realizata aici, la crearea regulilor CSS pentru a aduga margini

de stanga si dreapta, scoaterea sublinierii etc. Prima declarare de proprietate in aceasta regula

seteaza proprietatea display pe block. Aceasta face linkul sa afiseze ca element bloc, adica zona

fiecarui buton de navigare sa fie activa cand muti cursorul peste ea; acelasi efect il vezi daca

folosesti o imagine pentru navigare.

26

JavaScript

Notiuni introductive Pentru a insera JavaScript într-un document HTML deja existent, este necesara introducerea în fisier a

etichetei <script> si </script>. Aceasta eticheta necesita aributul "type", sau atributul "language" (acesta

din urma este depreciat in standardul XHTML) care va specifica browser-ului limbajul folosit pentru

interpretarea codului inclus.

In interiorul etichetei <script> ... </script> vom scrie codul nostru.

Pentru scrierea si executarea programelor JavaScript avem nevoie de un editor simplu de texte (cum ar fi

Notepad pentru Windows sau emacs pentru Unix) si un browser (ex. Mozilla Firefox, Internet Explorer).

- Atributul "language" (care insa nu este folosit in XHTML, ci doar in paginile web standard HTML) – va

avea urmatoarea sintaxa: language="JavaScript", aceasta specifica browser-ului ce limbaj este

folosit

- Atributul "type" – inlocuitorul lui "language" – va avea urmatoarea sintaxa:

type="text/javascript", aceasta spune browser-ului ca scriptul este scris in format plaintext.

Putem, de asemenea, sa introducem instructiunile JavaScript intr-un alt fisier, extern, care va avea

extensia ".js", pentru editarea acestui fisier este nevoie la fel de un editor simplu de texte. Avantajul fiind

ca putem folosi acelasi cod in mai multe pagini HTML si in cazul necesitatii unei modificari in codul

JavaScript, modificam doar datele dintr-un singur fisier (cel cu extensia ".js"), dezavantajul acestei

metode este faptul ca intr-un fisier extern ".js" nu putem folosi etichete HTML, ci numi instructiuni

JavaScript.

In cazul in care codul JavaScript se afla intr-un fisier extern, eticheta <script> din pagina HTML va trebui

sa contina atributul "src" a carui valoare determina locatia fisierului in care se afla codul JavaScript.

In fisierul extern cu extensia "js" nu trebuie sa scriem eticheta "<script>", scriem direct instructiunile

scriptului.

Iata un exemplu de script JavaScript scris in interiorul unei pagini web (XHTML):

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Cod JavaScript</title>

27

</head>

<body>

<script type="text/javascript">

document.write("Textul care va fi afisat pe ecran");

</script>

</body>

</html>

Si pt. HTML:

<html>

<head>


</head>

<body>


document.write("Textul care va fi afisat pe ecran");

</script>

</body>

</html>

Comanda document.write este folosita pentru a tipari ceva in pagina.

Rezultatul acestui script, afisat in pagina web (XHTML si HTML) va fi urmatorul:

Textul care va fi afisat pe ecran

Daca dorim sa incarcam scriptul dintr-un fisier extern (de exemplu "cod.js"), codul nostru in

documentul HTML va arata astfel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />


</head>

<body>

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

</body>

</html>

- Iar fisierul "cod.js" va contine :

28

document.write("Textul care va fi afisat pe ecran")

Rezultatul afisat in pagina web va fi acelasi ca-n exemplele anterioare.

Folosirea variabilelor

Intr-un script (sau program) se folosesc date constante dar si date variabile care isi schimba

valorile in timpul executei programului. Aceste date se numesc variabile.

Variabila = numele unei locatii din memoria calculatorului, folosita pentru a memora date.

Modul cel mai simplu de a folosi si a face referire la o astfel de data variabila este de a o denumi. Numele

variabilei permite accesul la valoarea ei precum si schimbarea valorii daca este necesar.

Se poate crea o variabila si sa-i atribuim o valoare prin doua metode:

- Cu declaratia var

var nume = valoare

- Fara declaratia var

nume = valoare

- Unde 'nume' este numele variabilei iar 'valoare' este valoarea pe care i-o atribuim.

Tipuri de variabile - Spre deosebire de alte limbaje (cum sunt Pascal sau C), JavaScript nu are tipuri fixe

de date, adica permite schimbarea tipului unei variabile in cadrul scriptului, acesta poate recunoaste

singur cand datele sunt de tip "sir", numerice sau alt tip.

De exemplu:

var x = "xyz"; x = 8;

- Observati ca valorile de tip 'sir' (formate din litere) se scriu intre ghilimele, iar cele 'numerice' pot fi

scrise si fara ghilimele.

Durata de viata a unei variabile - O variabila scrisa in cadrul unei functii este o variabila locala, valoarea

ei fiind recunoscuta numai in cadrul acelei functii, cand se iese din functie variabila este distrusa. Astfel, o

alta functie poate declara si folosi o variabila cu acelasi nume, JS (Java Script) trateaza cele doua variabile

29

ca fiind diferite (functiile si lucrul cu acesta vor fi explicate in lectiile urmatoare).

Se pot declara si variabile, in afara oricarei functii, care sa fie folosite de toate functiile, acestea se

numesc variabile globale si sunt valabile de la incarcarea paginii web pana la inchidere, in orice script JS.

Operatorii

Cu ajutorul operatorilor manipulam, combinam si modificam datele dintr-un prrogram sau script.

Acestia sunt de mai multe feluri, in aceasta lectie sunt prezentati tipurile de operatori folositi in

JavaScript.

Operatori aritmetici

Putem spune ca operatorii aritmetici sunt principalii operatori folositi cu numere, acestia

efectueaza operatiile aritmetice cunoscute: adunare (+), scadere (-), inmultire (*), impartirere

(/). Pe langa acesti patru operatori, in programare sunt folositi inca trei operatori aritmetici :

Modulul (%) - acesta determina restul impartirii a doua numere Eexemplu:

o 8%3 da rezultatul 2 10%2 da rezultatul 0

Incrementare (++) - Acest operator creste valoarea cu o unitate, este des folosit in programare, in lucrul cu variabile.

De exemplu, daca avem variabila 'i', putem folosi operatorul de incrementare astfel: i++ care este similar cu i = i+1. Exemplu:

o x = 7; x++; rezultatul va fi x = 8

Decrementare (--) - Acest operator scade valoarea cu o unitate.

De exemplu, daca avem variabila 'i', putem folosi operatorul de decrementare astfel: i-- care este similar cu i = i-1. Exemplu:

o x = 7; x--; rezultatul va fi x = 6

30

Cei doi operatori de incrementare (++) respectiv decrementare (--) pot fi folositi atat ca prefix (in fata variabilei) ++i respectiv --i cat si ca sufix (dupa numele variabilei) i++ respectiv i--. Valoarea obtinuta este aceeasi, insa ordinea operatiei si rezultatul atribuirii valorii sunt diferite.

Folosirea operatorului ca prefix determina in primul rand modificarea valorii si apoi are loc atribuirea acesteia.

In cazul folosirii operatorului ca sufix, intai este atribuita valoarea variabilei si apoi variabila este incrementata (sau decrementata).

Operatori de atribuire

In cazul acestui operator JavaScript actioneaza mereu de la dreapta la stanga ; se evalueaza

operandul din dreapta iar valoarea se atribuie variabilei din stanga semnului "=" .

Mai jos puteti vedea un tabel din care puteti intelege modul de lucru si actiune al operatorilor de

atribuire:

Operator Exemple Este acelasi cu

= x = y x = y

+= x += y x = x+y

-= x -= y x = x-y

*= x *= y x = x*y

/= x /= y x = x/y

%= x %= y x = x%y

Operatori de comparare

Expresiile care folosesc acesti operatori pun o intrebare despre doua valori pe care le compara.

Raspunsul poate fi TRUE sau FALSE.

Un operator de comparatie des folosit este operatorul de identitate (egalitate), reprezentat prin

doua semne egal "==". Este diferit de simplul "=", operatorul '==' compara doua valori

determinand daca acestea sunt identice, adica egale atat ca valoare cat si ca tip.

Operatori de comparatie sunt prezentati in tabelul urmator:

Operator Semnificatie Exemple

== Egal 3 == 8 returneaza FALSE

!= Diferit 3 != 8 returneaza TRUE

> Mai mare 3 > 8 returneaza FALSE

< Mai mic 3 < 8 returneaza TRUE

>= Mai mare sau egal 3 >= 8 returneaza FALSE

<= Mai mic sau egal 3 <= 8 returneaza TRUE

31

Operatori logici (booleeni)

Similar cu operatori de comparatie, operatorii logici compara doua expresii si returneaza TRUE

sau FALSE.

Acesti operatori sunt:

&& - si (and) - Compara doua expresii si returneaza TRUE daca amandoua sunt adevarate, in caz contrar returneaza FALSE. Eexemplu:

o x = 5 y = 8 x<7 && y>3 (returneaza TRUE)

|| - sau (or) - Compara doua expresii si returneaza TRUE daca cel putin una din ele este adevarata, in caz contrar returneaza FALSE. Eexemplu:

o x = 5 y = 8 x>7 || y<3 (returneaza FALSE)

! - not - este operator unar, foloseste o singura expresie si returneaza TRUE daca expresia este falsa, daca expresia este adevarata returneaza FALSE. Eexemplu:

o x = 5 y = 8 !(x==y) (returneaza TRUE deoarece 'x' nu este egal cu'y')

Operator pentru string (sir)

Un string este in general un sir de caractere, intre ghilimele.

Pentru a alatura (concatena) doua variabile string impreuna se foloseste operatorul de

concatenare a sirurilor +

Exemplu:

t1 = "Astazi este o zi" t2 = "frumoasa" t3 = t1+t2 (Variabila 't3' va contine sirul "Astazi este o zifrumoasa")

Observati ca nu este saptiu intre 'zi' si 'frumoasa'. Pentru a adauga spatiu intre siruri, sunt doua modalitati:

1 - Adaugati spatiu intre variabilele string Exemplu:

o t1 = "Astazi este o zi" t2 = "frumoasa"

32

t3 = t1+" "+t2 (Variabila 't3' va contine sirul "Astazi este o zi frumoasa")

2 - Adaugati spatiu in una din variabilele string Exemplu:

o t1 = "Astazi este o zi" t2 = " frumoasa" t3 = t1+t2 (Variabila 't3' va contine sirul "Astazi este o zi frumoasa")

Operatorul typeof

Acest operator returneaza tipul de date continut la momentul respectiv de operandul sau. Este util

in special pentru a determina daca o variabila a fost definita cu un anumit tip de date.

Studiind tabelul urmator puteti intelege modul de operare al acestuiai operator:

Operator Descriere

typeof parseFloat returneaza sirul 'function'

typeof 33 returneaza sirul 'number'

typeof "un anume text" returneaza sirul 'string'

typeof true returneaza sirul 'boolean'

typeof window returneaza sirul 'object'

Operatori pentru functii

Functiile vor fi explicate in una din lectiile urmatoare, totusi este util sa fiti familiarizati cu doi

operatori:

1. Primul se numeste operator de apelare si este reprezentat printr-o pereche de paranteze

rotunde () care urmeaza intodeauna dupa numele functiei, astfel o functie va fi declarata astfel:

function nume_functie() {

// Corpul functiei

}

Apoi operatorul de apelare este folosit din nou cand functia este apelata in interiorul scriptului:

nume_functie()

Parantezele aratand ca este folosita o functie.

Al doilea operator pentru functii este virgula "," - care se foloseste pentru a separa mai multe argumente

pe care le primeste o functie.

33

Argumentele sunt scrise intodeauna in interiorul parantezelor rotunde si sunt separate prin virgula.

Astfel o functie cu doua argumente ar arata:

function nume_functie(arg1, arg2) {

// Corpul functiei

}

Operatori pentru structuri de date (obiecte)

Acesti operatori sunt necesari atunci cand lucram cu structuri de date, sau obiecte.

In JavaScript obiectele sunt folosite la gruparea informatiilor pentru a servi unui scop specific.

1. Un operator care ar trebui cunoscut bine este punctul "." , numit operator pentru membrul

unei structuri. Acesta ne permite sa ne referim la un membru ( variabila ,functie sau obiect ) care

apartine obiectului specificat.

Sintaxa este urmatoarea :

numeObiect.nume_Variabila numeObiect.nume_Functie() numeObiect.alt_Obiect

Aceasta modalitate de referire la o informatie, numita notatie cu punct, returneaza valoarea

variabilei, functiei sau obiectului aflat cel mai in dreapta.

2. Operatorul pentru element din matrice, numit si operator indice al tabloului, se foloseste

pentru a accesa o data specifica, o cheie, dintr-un tablou de date. Acesta este simbolizat printr-o

pereche de paranteze drepte [ ] , si permite sa ne referim la orice membru al unui tablou.

Tablourile sunt obiecte JavaScript si vor fi detaliate in lectiile urmatoare.

Sintaxa de folosire a operatorului pentru tablou este :

nume_tablou[cheie]

34

Operatorul conditional "?"

JavaScript contine si un operator conditional ? : care atribuie o valoare unei variabile pe baza

unei conditii.

Sintaxa de folosire a acestui operator este urmatoarea:

variabila = (conditie)?val1:val2

Modul de operare este urmatorul - se evalueaza conditia, daca este adevarata atunci variabila ia valoarea 'val1', altfel ia valoarea 'val2'. Iata un exemplu: <script type="text/javascript">

vizitator = "barbat"

mesaj = (vizitator=="barbat")?"Stimate domn":"Stimata doamna"

document.write(mesaj) </script>

Daca variabila "vizitator" este egala cu 'barbat', variabila "mesaj" primeste valoarea 'Stimate domn", altfel

primeste valoarea "Stimata doamna". Iar instructiunea de afisare "document.write()" va afisa valoarea lui

"mesaj".

10. Precedenta operatorilor Cand in expresii se folosesc mai multi operatori, JavaScript tine cont de precedenta (importanta)

predefinita a fiecarui operator. Precum in aritmetica, intr-o ecuatie cu adunare si inmultire (2+3*4

), daca nu sunt paranteze, se executa intai inmultirea, aceasta avand precedenta superioara fata de

adunare. La fel e si cu operatorii in programare.

Daca apar mai multi operatori cu aceeasi precedenta, JavaScript ii va evalua de la stanga spre

dreapta.

In tabelul urmator sunt prezentati operatorii in ordinea precedentei lor, unde operatorii din partea

de sus a tabelului au precedenta maxima:

Operator Nume operator

() [] . de apelare, pt. structuri de date

! ++ -- de negare, incrementare

* / % de inmultire, impartire

+ - de adunare, scadere

< <= > >= de comparatie

== != de egalitate

&& SI logic

|| SAU logic

35

Operator Nume operator

? : conditionnal

= += -= *= /= %= de atribuire

, virgula

Instructiuni conditionale

Partea cea mai interesanta, dar si dificila, in scrierea unui script este proectarea acestuia astfel

incat sa ia decizii in timp ce este executat.

Cu ajutorul instructiunilor conditionale putem face programele sa testeze diferite conditii dupa

care sa decida modul de executie a datelor.

In Java Script sunt urmatoarele instructiuni conditionale:

if - executa comenzile dorite cand o conditie este adevarata.

if ... else - executa anumite comenzi cand o conditie este adevarata si alte comenzi cand aceasta

este falsa.

switch - selecteaza care comanda va fi executata.

1. Instructiunea "if"

Se poate spune ca instructiunea "if" este una din cele mai des folosite.

Forma generala a acestei instructiuni este urmatoarea :

if (conditie) { codul care va fi executat daca este adevarata conditia }

- Unde 'conditie' poate fi orice expresie logica.

Daca rezultatul conditiei este TRUE se executa codul dintre acolade, in caz contrar, cand conditia

returneaza FALSE, se trece peste acest cod.

Iata un exemplu practic. Urmatorul script afiseaza "Buna ziua" daca ora este mai mare decat 11.

Se foloseste obiectul Date care determina data curenta (va fi explicat mai amanuntit in alta lectie).


<!--

// daca ora > 11,

// va scrie în fereastra Buna ziua!

36

var d = new Date()

var time = d.getHours()

if (time>11) {

document.write("<b>Buna ziua!</b>")

}

//-->

</script>

- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'time' preia numai ora din

variabila 'd'. Conditia din instructiunea "if" verifica daca ora este mai mare decat 11 si in caz adevarat

executa comanda dintre acolade, care afiseaza mesajul.

Daca ora este mai mica decat 11 scriptul nu va executa instructiunea dintre acolade.

2. Instructiunea "if ... else"

In exemplul anterior am vazut ca este afisat "Buna ziua!" daca ora > 11 iar in caz contrar nu se

intampla nimic.

Folosind instructiunea "if ... else" putem stabili comenzi care sa fie executate cand conditia

instructiunii "if" este FALSE.

Forma generala a instructiuni "if ... else" este urmatoarea :

if (conditie) { codul care va fi executat daca este adevarata conditia } else { codul care va fi executat daca conditia este falsa }

- Unde 'conditie' poate fi orice expresie logica.

Daca rezultatul conditiei este TRUE se executa codul dintre primele acoladele, care apartin de

"if", in caz contrar, cand conditia returneaza FALSE, sunt executate comenzile din a doua grupa

de acolade (dupa else).

Iata din nou exemplul de mai sus, de asta data folosindu-se instructiunea "if ... else".

Scriptul afiseaza "Buna ziua!" daca ora este mai mare decat 11, in caz contrar afiseaza 'Este ora

...'.


<!--

// daca ora > 11,

// va scrie în fereastra Buna ziua!

37

// Alfel afiseaza "Este ora ..."

var d = new Date()

var time = d.getHours()

if (time>11) {

document.write("<b>Buna ziua!</b>")

}

else {

document.write("<b>Este ora " +time+ "</b>")

}

//-->

</script>

- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'time' preia ora din variabila 'd'.

Conditia din instructiunea "if" verifica daca ora este mai mare decat 11 si in caz adevarat executa

comanda dintre primele acolade.

Daca ora este mai mica decat 11 scriptul va executa comanda din grupul de acolade determinat de

"else". (Observati folosirea operatorului de concatenare +).

3. Instructiunea switch

Aceasta instructiune e folosita pentru a compara o valoare cu altele dintr-o lista.

Sintaxa generala a instructiuni "switch" este urmatoarea.

switch (expresie) { case valoare1: cod executat daca expresie = valoare1 break case valoare2: cod executat daca expresie = valoare2 break case valoare3: cod executat daca expresie = valoare3 break default : cod executat daca expresie e diferit de valoare1, valoare2 sau valoare3 }

38

- Prima data este evaluata expresia scrisa intre paranteze rotunde, apoi valoarea expresiei este comparata

pe rand cu fiecare valoare determinata de "case". Daca se gaseste o identitate se executa codul asociat

acelui "case". Apoi se iese din instructiunea "switch".

Daca, parcurgand fiecare "case", nu se gaseste o egalitate, se executa codul de dupa "default".

Prin folosirea lui "break" se opreste parcurgerea corpului instructiunii atunci cand s-a gasit o valoare egala

cu 'expresie' si se iese din "switch".

Iata un exemplu de script care afiseaza un mesaj in functie de zilele saptamanii:




</script>

- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'ziua' care preia numarul zilei din

variabila 'd' (duminica = 0, luni = 1, ...). Se intra in corpul instructiunii "switch" si se verifica, pe rand,

fiecare valoare "case" cu valoarea variabilei 'ziua', cand se gaseste egalitatea se executa comanda asociata

acelui 'case' si se iese din "switch".

Daca nici una din valorile 'case' nu este egala cu valoarea variabilei 'ziua', se va executa comanda de dupa

'default', care afiseaza mesajul: "Mai e pana sambata".

Iata inca un exemplu cu "case", de data aceasta foloseste valori de tip sir (string).


<!--

39

var nume = "Marius";

switch (nume) {

case "Cristi":

document.write("Coleg");

break

case "Marius":

document.write("Frate");

break

case "Maria":

document.write("Sora");

break

default:

document.write("Altcineva");

}

//-->

</script>

Instructiuni ciclice (repetitive)

Instructiunile repetitive se folosesc atunci cand se doreste efectuarea unei comenzi de mai multe

ori.

In java script putem folosi urmatoarele instructiuni ciclice:

for - la fel ca si in alte limbaje de programare, executa codul de un numar specificat de ori

for ... in - executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect

while - repeta codul atata timp cat o anumita conditie este adevarata

do ... while - intai executa o data codul apoi il repeta atata timp cat o anumita conditie este

adevarata

1. Instructiunea for

Aceasta are urmatoarea forma generala:

for (incepere_nr; conditie_nr; ciclu) {

cod care va fi executat

}

- Unde "incepe_nr" e folosit la 'initializare' pentru a da o valoarea initiala numarului de repetari, de multe

ori prin aceasta se declara o variabila care poate fi folosita ca un contor al ciclului.

"conditie_nr" verifica daca numarul de cicluri se incadreaza intr-o anumita valoare si daca rezultatul este

40

TRUE se executa inca o data codul dintre acolade.

"ciclu incrementeaza sau decrementeaza valoarea la care a ajuns contoarul ciclului, apoi aceasta valoare

este verificata din nou de "conditie_nr" pana cand rezultatul este FALSE.

Aceste trei expresii dintre parantezele rotunde sunt optionale, dar daca este omisa una din ele, caracterul

punct si virgula ";" trebuie sa ramana pentru ca fiecare expresie sa ramana la locul ei.

In interiorul instructiunii for (ca si la instructiunea "if"), intre acolade, pot fi introduse si alte instructiuni

"for", sau alte instructiuni conditionale, acest lucru se numeste imbricarea instructiunilor.

Iata un exemplu simplu de utilizare a instructiunii "for":




</script>

- Se atribue lui 'x' valoarea 1, se verifica conditia (x<5) care este adevarata si se executa corpul

instructiunii (dintre acolade, care afiseaza "x este 1) apoi se incrementeaza valoarea lui 'x' cu o unitate

(x++), acum 'x are valoarea 2. Se verifica din nou conditia (x<5) si fiindca este adevarata, se executa iar

corpul instructiunii apoi se incrementeaza valoarea lui 'x', ..., si tot asa pana cand 'x' va ajunge sa aibe

valoarea 5 care la verificarea conditiei returneaza FALSE, moment in care se termina executia

instructiunii "for".

Acest script va afisa urmatorul rezultat:

x este 1

x este 2

x este 3

x este 4

2. Instructiunea for ... in

Pentru utilizarea acestei instructiuni trebuie sa aveti cunostinte despre obiectele JavaScript asa ca

va trebui sa reveniti asupra ei dupa ce le veti invata - in lectiile urmatoare .

Cu "for ... in" se executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect.

Acest ciclul se poate executa cu orice obiect JavaScript, indiferent daca are sau nu proprietati.

41

Pentru fiecare proprietate se executa cate o iteratie, daca obiectul nu are nici o proprietate nu se

desfasoara nici un ciclu.

Instructiunea "for ... in" are urmatoarea forma generala:

for (nume_proprietate in obiect) {

instructiuni

}

- Unde "nume_ proprietate" este un literal de tip sir generat de JavaScript. Pentru fiecare

repetare a executiei instructiunii, lui "nume_proprietate" i-se atribuie urmatorul nume de

proprietate continut in "obiect", pana cand sunt folosite toate.

3. Instructiunea while

Aceasta instructiune repeta un cod atata timp cat conditia este adevarata.

Comanda actioneaza similar cu instructiunea "for", dar nu include functiile de initializare si

incrementare a variabilelor.

Instructiunea "while" are urmatoarea forma generala:

while (conditie) {

codul care va fi executat

}

Iata exemplu anterior, de la instructiunea "for", aici este scris in varianta instructiunii "while": <script type="text/javascript">



</script>

42

- Prima data am declarat variabila 'x' dandu-i valoarea 1.

Instructiunea "while" verifica conditia (aici x<5) care este adevarata si permite executarea

corpului functiei dintre acolade care afiseaza "x este 1" si incrementeaza valoarea lui 'x' cu o

unitate. Acum 'x' are valoarea 2, se verifica conditia, care este adevarata si se executa iar codul

dintre acolade, ..., si tot asa pana cand la verificarea conditiei rezultatul este FALSE, moment in

care se termina rularea instructiunii "while".


x este 1 x este 2 x este 3 x este 4

4. Instructiunea do ... while

Forma generala a acestei instructiuni este:

do {


}

while (conditie)

Asemanatoare in mare parte cu instructiunea "while", instructiunea "do ... while" intai executa codul din

corpul instructiunii, dupa care verifica conditia, apoi il repeta pana cant conditia returnbeaza FALSE.

Astfel corpul functiei este executat cel putin o data, chiar daca conditia nu este adevarata.

Iata un exemplu din care puteti intelege mai bine aceasta instructiune:




</script>

- Aceasta functie afiseaza "x este 8".

Observati ca desi conditia este falsa (x<5), codul dintre acolade este totusi executat o singura data.

43

Instructiunile break si continue

Cand este folosita o instructiune ciclica, aceasta continua sa se repete pana cand conditia este

FALSE. Aceasta excutie poate fi schimbata cu ajutorul instructiunilor break si continue, care

dau posibilitatea intreruperii ciclului sau iesirea din acesta inainte de a se ajunge la sfarsit (la

ultima acolada).

break - intrerupe definitiv executarea ciclului.

Iata un exemplu din care puteti intelege modul de lucru a lui break:


for (x=1; x<10; x++) {

document.write("<br /> X este "+x);

if (x==3) {

break;

}

}

</script>


X este 1

X este 2 X este 3

Fereastra Alert

Probabil ati intalnit pana acum, de mai multe ori exemple cu "Alert".

Fiind un element simplu si deja cunoscut, voi face o scurta prezentare a sintaxei acestuia.

Crearea ferestrelor alert se face cu sintaxa:

window.alert("mesaj")

- Unde "mesaj" este textul care va apare in fereastra Alert.

Urmatorul exemplu deschide o fereastra cu mesajul "Bine ai venit". <script type="text/javascript">



</script>

In browser va apare o fereastra ca in imaginea urmatoare

44

Fereastra Confirm

Fereastra de confirmare se creaza cu sintaxa:

window.confirm("intrebare")

In fereastra de confirmare va apare textul "intrebare" si doua butoane "OK" si "Cancel".

Aceasta fereastra este folosita pentru a fi executata o comanda cand este apasat butonul "OK"

(returneaza TRUE) si alta comanda cand este apasat butonul "Cancel" (returneaza FALSE)

Urmatorul exemplu deschide o fereastra "Confirm" in care apare intrebarea "Rezultatul lui 0+0

este 0?". Daca este apasat butonul "OK" apare o fereastra Alert cu mesajul "Corect", iar daca este

apasat butonul "Cancel" apare o fereastra Alert cu mesajul "Incorect"




</script>

In browser va apare o fereastra ca in imaginea urmatoare

45

Functii

Functiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un program.

O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi utilizate usor si de

mai multe ori prin apelarea functiei care le contine.

Daca un program necesita multe linii de cod, folosind functiile putem imparti codul in parti mai

mici pe care le putem utiliza separat acolo unde este nevoie.

Pot fi doua feluri de functii:

predefinite - cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", ...

Create de programator

o - care returneaza o valoare

o - care nu returneaza o valoare

1. Crearea (definirea) functiilor

O functie se defineste la inceputul fisierului, in sectiunea head si poate fi folosita in cadrul

paginii prin apelarea ei. Scriptul care contine definirea unei functii se adauga in sectiunea "head"

pentru a fi siguri ca aceasta a fost incarcata inainte de a fi apelata.

Pentru crearea unei functii se foloseste cuvantul function urmat de numele pe care vrem sa-l dam

functiei dupa care putem adauga intre paranteze rotunde argumentele (numite si atribute) functiei

(separate prin virgula daca sunt mai multe) si intre acolade corpul functiei care contine codul care

trebuie executat.

Forma generala a unei functii este urmatoarea:

function nume_functie(argument1, argument, ...) {


}

Argumentele sunt variabile folosite de functie si a caror valoare este preluata la apelarea functiei.

Atributele nu sun obligatorii, o functie poate fi definita si fara argumente, dar se pastreaza

parantezele rotunde, astfel sintaxa unei functii fara argumente este urmatoarea:

46

function nume_functie() {


}

2. Instructiunea return

O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return. Aceasta

specifica valoarea pe care o returneaza functia cand este apelata.

Iata un exemplu din care pouteti intelege modul de aplicare a instructiunii return:

function suma(x, y) {

z = x+y;

return z

}

- "suma" reprezinta numele functiei (puteti da orice nume care respecta regulile limbajuli si nu

sunt identice cu cele rezervate, cum ar fi "function"), "x, y" reprezinta argumentele functiei a

caror valoare este data cand functia este apelata. Intre acolade avem codul care trebuie executat si

care, prin instructiunea "return" va returna valoarea lui "z" care reprezinta suma lui "x" si "y".

Astfel valoarea returnata de functia "suma()" va fi valoarea pe care o are "z".

3. Apelarea functiilor

Dupa ce am creat o functie, pentru a fi folosita, fuctia trebuie apelata.

- O functie care contine argumente se apeleaza in felul urmator:

nume_functie(argument1, argument, ...)

- O functie fara argumente se apeleaza in felul urmator:

nume_functie()

Observati ca la apelul functiei nu se mai folosesc cuvantul "function" si acoladele

In locul in care am apelat astfel o functie va fi executat corpul acelei functii.

47

4. Exemple de scripturi cu functii

In continuare studiati exemplele de mai jos, care folosesc functii simple, astfel veti intelege mai

bine modul de lucru si executie a unei functii.

Exemplu 1 - functie fara argument

Urmatorul exemplu prezinta un script care afiseaza un text:

<html>

<head>




</script>

</head>

<body>


exemplu1()

</script>

</body>

</html>

- Observati ca functia "exemplu1" a fost definita in sectiunea head a documentului HTML si apoi a fost apelata in sectiunea "body", unde va afisa textul "Bine ati venit!"

Exemplu 2 - functie cu un argument Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o fereastra "alert" care va

afisa un text in functie de argumentul transmis.

Specificatie - Sintaxa generala a functiei "alert" din JavaScript este: alert('Text'), aceasta deschide o

fereastra de atentionare in care este afisat mesajul dintre paranteze "Text".

<html>

<head>

48



</script>

</head>

<body>

<form>

<input type="button" onclick="exemplu2('Buna dimineata!')"

value="dimineata" />

<input type="button" onclick="exemplu2('Buna ziua!')"

value="ziua" />

</form>

</body>

</html>

Acest cod va afisa in pagina HTML urmatorul rezultat:

- Studiati cu atentie scriptul si modul in care acesta este apelat.

Textul afisat de "alert" este preluat de la valoarea argumentului functiei "exemplu2" care l-a randul lui il

preia din ceea ce este scris la apelarea functiei.

- "onclick" (la click) este o comanda JavaScript care specifica momentul cand trebuie sa fie executata

functia.

Cand apasati cele doua butoane veti obtine o fereastra 'Alert' cu doua mesaje diferite (specificate la

fiecare apelare a functiei "exemplu2")

49

Obiectele Java Script

In lumea din jurul nostru obiectele sunt de exemplu: o carte, o masina, un televizor; in JavaScript

obiectele sunt de exemplu: un formular, o fereastra, butoane, imagini ...

Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte.

Obiectele au anumite proprietati, de exemplu in lumea reala televizoarele au butoane, masinile au

roti; asa si in JavaScript obiectele au proprietati: formularele au buton, ferestrele au titluri.

Pe langa obiecte si proprietati, in JavaScript avem si termenul "metode".

Metodele reprezinta functiile pe care un obiect poate sa le faca. Ferestrele se deschid cu metoda

"open()", butoanele au metoda "click()". Parantezele rotunde "()" arata ca se face referire la o

metoda, nu la o proprietate.

Astfel, putem rezuma ca un obiect este o colectie de proprietati si functii (metode)

Sintaxa pentru folosirea obiectelor este:

obiect.prorietate

obiect.metoda()

- Punctul (.) se foloseste pentru a specifica detinatorul metodei sau proprietatii. Obiectele din JavaScript le putem cataloga in trei categorii principale:

- Obiecte pe partea de client

- Obiecte pe partea de server

- Obiecte esentiale

Astfel avem mai multe tipuri de obiecte care pot fi folosite, pentru incepatori e bine de stiut in

principal obiectele pe partea de client si cele esentiale, cum sunt: "string", "math" sau cele care

vin de la etichetele HTML.

Mai multe astfel de obiecte pot forma o celula (o grupa) numita "clasa", astfel, diferite obiecte

incorporate pentru o executie comuna formeaza un "set de clase" care se mai numeste si

"biblioteca de clase", iar mai exact pentru limbajul JavaScript "biblioteca de obiecte

JavaScript", si pot fi refolosite.

50

1. Obiectul string

String (sau sir) se foloseste pentru a prelua text.

Proprietatea acestui obiect este:

length - returneaza numarul de caractere dintr-un sir (string)

Metodele obiectului string sunt urmatoarele:

anchor() - Returneaza un sir ca si "anchor"

big() - Returneaza un sir cu text mare

blink() - Returneaza un sir care clipeste

bold() - Returneaza un sir cu litere ingrosate

charAt() - Returneaza un caracter de la pozitia care este specificata

charCodeAt() - Returneaza codul ASCII al unui caracter de la o pozitie specificata

concat() - Returneaza doua siruri concatenate

fixed() - Returneaza un sir cu caractere tip

fontcolor() - Returneaza un sir cu o culoare specificata

fontsize() - Returneaza un sir cu litere de o anume marime

fromCharCode() - Returneaza valoare Unicode a unui caracater

indexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca subsirul nu

e gasit, valoarea -1

italics() - Returneaza un sir in italic (scris aplecat)

lastIndexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca acesta

nu e gasit, -1 (Importanr: se incepe din dreapta sirului spre stanga)

link() - Returneaza un sir ca hyperlink

match() - Similar cu indexOf si lastIndexOf, dar aceasta metoda returneaza sirul

specificat sir, sau "null", in locul unor valori numerice

replace() - Inlocuieste intr-un sir unele caractere specificate cu altele noi specificate.

search() - Returneaza un numar intreg daca sirul contine caracterele specificate, altfel

returneaza -1

slice() - Returneaza un sir incepand de la pozitia index specificata

small() - Returneaza un sir cu caractere mai mici

51

split() - Imparte un sir in mai multe siruri, in functie de caracterele specificate

strike() - Returneaza un sir taiat cu o linie la mijloc

sub() - Returneaza un sir ca indice

substr() - Returneaza un subsir specificat astfel, exemplu: 12,8 returneaza 8 caractere,

incepand de la caracterul al 12-lea (se incepe de la 0)

substring() - Returneaza un subsir specificat astfel, exemplu: 8,12 returneaza toate

caracterele, incepand de la caracterul al 8-lea, pana la al 12-lea

sup() - Returneaza un sir ca putere (superscript)

toFixed(n) - Returneaza sirul numeric rotunjindu-l la o valoare cu 'n' zecimale

toLowerCase() - Converteste un sir in litere mici

toUpperCase() - Converteste un sir in litere mari

In continuare este prezentat un exemplu in care se foloseste proprietatea "length" pentru a afla

cate elemente are un sir si metoda "indexOf" prin care verificam daca un sir dat contine un

anumit cuvant specificat. Daca este gasit cuvantul, se returneaza pozitia primei litere din el, in

caz contrar apare mesajul "Cuvantul nu a fost gasit"


var str="Filme, Cursuri, Jocuri si Animatii"

document.write(src+"<br />")

document.writeln("Acest sir are "+ str.length + " caractere")

var pos=str.indexOf("Jocuri")

if (pos>=0) {

document.write("Jocuri incepe de la pozitia: ")

document.write(pos + "<br />")

}

else

{

document.write("Cuvantul nu a fost gasit!")

}

</script>

Primului caracter din sir are pozitia 0, al doilea caracter are pozitia 1, si tot asa ....

Dupa ce este adaugat intr-un document HTML, acest script va afisa in pagina urmatorul rezultat:

52

Filme, Cursuri, Jocuri si Animatii

Acest sir are 34 caractere Jocuri incepe de la pozitia: 17

- Iata un alt exemplu in care este foloseste metoda replace(). Avem un sir din care vom pastra doar numerele, eliminand toate celelalte caractere. <script type="text/javascript">



</script>

- In acest exemplu avem variabila "sir" ce contine sirul complet si o variabila "sablon" ce contine

o expresie regulata care reprezinta toate caracterele non-numerice, \D fiind echivalent cu [^0-9]

(mai multe detalii despre expresiile regulate gasiti la: RegExp Javascript).

- Expresia sir.replace(sablon, '') inlocuieste cu '' (adica nimic) caracterele din "sir" care se

incadreaza in "sablon".

- document.write(sir) va afisa sirul care a ramas, adica 12378

Obiectul Array (tablou sau matrice)

Obiectul Array (numit si matrice sau tablou de date) se foloseste pentru a stoca mai multe valori

intr-un singur nume de variabila.

Fiecare valoare stocata devine un element al tabloului, acesta are asociat un "numar index" (sau

cheie). Cu ajutorul acestei chei se poate face referire la oricare element din tablou.

Cu operatorul new se poate crea o "instanta" (incepere) a obiectului Array, ca in exemplul

urmator:

var nume_colegi = new Array(4)

- Unde intre parantezele rotunde este trecut numarul de elemente ale tabloului, aici 4.

Numarul de elemente, cheile, incep implicit de la 0.

http://www.javascriptkit.com/javatutors/redev2.shtml

53

Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat de o pereche de

paranteze patrate, in interiorul carora se adauga cheia specifica fiecarui element, apoi semnul egal

si valoarea dorita. Dupa cum puteti vedea in urmatorul exemplu:

nume_colegi[0] = "Cristi" nume_colegi[1] = "Ion" nume_colegi[2] = "Simona" nume_colegi[3] = "Adi"

Sau puteti scrie si astfel:

var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');

- In cazul acesta cheile se subanteleg si sunt aceleasi ca in prima varianta, incepand cu 0.

Pentru a face referire la un anumit element din tablou si pentru a extrage anumite valori din

Array, se scrie numele tabloului si intre parantezele patrate cheia specifica acelui element; ca in

exemplul urmator:

coleg = nume_colegi[0] colega = nume_colegi[2]

Astfel, variabila "coleg" va avea valoarea "Cristi" si variabila "colega" valoarea "Simona".

Pentru a afla numarul de elemente ale unui Array, se foloseste proprietatea "length", ca in

exemplu urmator:

nr_colegi = nume_colegi.length

Obiectul Array are urmatoarele metode:

concat() - Returneaza un tablou rezultat din concatenarea a doua tablouri join() - Returneaza un tablou format din toate elementele unui tablou concatenat reverse() - Returneaza inversul unui tablou slice() - Returneaza o parte specificata a unui tablou sort() - Returneaza tabloul ordonat

Urmatorul exemplu foloseste o instructiune "for" care parcurge un tablou (aici tabloul "nume_colegi"), extrage valoarea fiecarui element si o afiseaza.

54




</script>

55

Ierarhia Java Script

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.

JavaScript intelege fereastra browser-ului ca pe un obiect window, acesta contine

anumite elemente, cum ar fi de exemplu bara de stare (status bar).

In fereastra browser-ului putem incarca (afisa) un document HTML (sau si de alt tip, dar

aici ne referim la HTML). Aceasta pagina din interiorul navigatorului este un obiect

document.

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:

this.nume_proprietate

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

Obiectul document are urmatoarele proprietati:

alinkColor - culoarea unei legaturi active

all - tabloul tuturor etichetelor HTML din document

anchors - tabloul de obiecte "Anchor", in ordinea specificata in sursa

applets - tabloul de obiecte "Applet"

bgcolor - culoarea de fundal a documentului

56

classes - tabloul claselor paginilor cu stiluri

cookie - fisier cookie asociat cu documentul

domain - domeniu al documentului

embeds - tablou de obiecte inglobate

fgcolor - culoarea textului in document

forms[] - tablou de obiecte "Form" (formular)

formName - specifica instanta "Form" care este accesata prin folosirea valorii atributului "name"

din eticheta <form>

height - specifica inaltimea documentului in pixeli

ids - tabloul identificatorilor paginii cu stiluri

images - tablou de obiecte "Image"

lastModified - data cand a fost modificat ultima oara documentul

layers - tablou de obiecte "Layer"

linkColor - culoarea legaturilor

links - tablou de obiecte "Link", ce corespund tuturor link-urilor HREF din document, in ordinea

specificata in sursa

plugins - tablou de obiecte inglobate

referrer - adresa URL (externa) a documentului la care a fost legat documentul curent

tags - tabloul etichetelor paginii cu stiluri

title - titlul documentului

URL - adresa URL a documentului curent

vlinkColor - culoarea legaturilor vizitate

width - specifica latimea documentului in pixeli

lastModified - URL-ul documentului

Obiectul document are urmatoarele meode:

captureEvents() - captureaza evenimentele care vor fi tratate de document

close() - inchide fluxul datelor de iesire spre document

contextual() - permite sa aplicam in mod selectiv un stil unui element HTML care apare intr-un

anumit context specific

getSelection() - intoarce textul selectat

handleEvent() - apeleaza handlerul pentru evenimentul specificat

open() - deschide fluxul datelor de iesire spre document

57

releaseEvents() - elibereaza evenimentele capturate de document

routeEvent() - dirijeaza evenimentele capturate spre alte obiecte

write() - adauga text in document

writeln() - adauga text si un caracter linie noua in document (textul pe linia lui)

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>

Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un albastru desechis), culoarea

textului rosu, a legaturilor verde si titlul "Lectie Java Script".

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>


<!--

function afisare()

{

nume = document.nume_form.nume_camp.value;

return nume

}

58

//-->

</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>

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:

document (pagina HTML) -> Forms[0] (sau numele formularului din

"name" - intregul formular) -> {Element[0] (primul camp din

formular), Element[1] (butonul din formular)}

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 :

document.forms[0].elements[0]

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:

name = document.forms[0].elements[0].value;

59

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:

<form name="nume_form">

Nume: <input type="text" name="nume_element" value="">

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;"

60

DOM - Modelul Obiectului Document

DOM (Document Object Model) defineste o structura logica si standardizata a documentelor, o

ordine prin care putem parcurge si edita elemente si continut din documente HTML sau XML.

Structura DOM este o ierarhie de obiecte, compatibila cu a limbajului JavaScript sau cu a

oricarui limbaj bazat pe obiecte.

In schema urmatoare puteti vedea modelul si ierarhia obiectelor:

61

Obiecte pe partea de client

Elementele principale legate de lucrul pe partea de client din JavaScript se axeaza pe ceea ce

putem face cu paginile HTML, mai exact - ceea ce poate face vizitatorul cu scriptul Javascript

incarcat in pagina HTML.

Primul set de obiecte are o legatura cu navigatorul si cu etichetele HTML din acesta.

Puteti accesa sau transfera continutul unei eticheta HTML (de exemplu dintr-un <div> ... </div>)

utilizand id-ul acesteia, folosind expresia:

nume_var = document.getElementById("id").innerHTML;

sau

nume_var = document.getElementById("id").childNodes[0].nodeValue;

- Aici, "nume_var" este o variabila care preia continutul incadrat de tag-ul HTML care are

atributul id="id".

Pentru a schimba sau adauga continut intr-un element HTML cu un id specific, folositi expresia

de mai sus in sens invers, adica:

document.getElementById("id").innerHTML = "continut"

Unde "id" este valoarea atributului "id" din etiheta HTML respectiva iar "continut" este

continutul (text, tag-uri) care va fi adaugat in aceasta eticheta HTML (va inlocui orice alt context

care se afla in cadrul acestui element HTML).

Majoritatea obiectelor JavaScript din nivelul 2 sunt vazute ca obiecte ale tag-urilor HTML, dupa

cum puteti observa in lista de mai jos, in care sunt prezentate obiectele JavaScript si etichetele

HTML corespunzatoare:

Button - <input type="button">

Checkbox - <input type="checkbox">

Hidden - <input type="hidden">

62

Fileupload - <input type="file">

Password - <input type="password">

Radio - <input type="radio">

Reset - <input type="reset">

Select - <select>

Frame - <frame>

Document - <body>

Layer - <layer> sau <ilayer>

Link - <a href="">

Image - <img>

Area - <map>

Anchor - <a name="">

Applet - <applet>

Plugin - <embed>

Form - <form>

Submit - <input type="submit">

Text - <input type="text">

Textarea - <textarea>

Option - <option>

Exemplu

Iata un alt exemplu, cu o actiune inversa celui de sus. Adica, textul introdus intr-un camp

textarea, dupa apasarea unui buton va fi inclus in pagina in cadrul unei etichete HTML <div>,

fara ca pagina sa fie reincarcata.

Retineti, aceasta actiune este pe partea de client, vizibila doar de utilizatorul actual, nu modifica

pagina originala de pe server si dupa inchiderea navigatorului textul introdus dispare.

<html>

<head>

<title>Script JS</title>


<!--

function ScrieDiv(){

63

valText = document.formular2.text2.value;

document.getElementById("div_id2").innerHTML = valText;

}

// -->

</script>

</head>

<body>

<div id="div_id2">Aici va apare textul din formular</div><br>

<form name="formular2">

<textarea cols="30" rows="5" name="text2" id="textul2"></textarea> <br>

<input type="button" value="Afiseaza" onclick="ScrieDiv();" />

</form>

</body>

</html>

Evenimente JavaScript

Evenimentele sunt elemente foarte importante in programarea JavaScript. Acestea sunt actiuni

provocate de cele mai multe ori de vizitatorul paginii.

Daca vizitatorul apasa un buton din pagina se provoaca evenimentul "Click". Daca mouse-ul este

deasupra unui link, se declanseaza un eveniment "MouseOver".

JavaScript poate reactiona la unele evenimente. Aceasta se poate realiza cu ajutorul "event-

handlers" (manageri de evenimente sau gestionar de evenimente).

Handlerele de evenimente se adauga ca atribute ale etichetelor HTML.

De exemplu, daca dorim sa apelam o functie "nume_functie()" de fiecare data cand s-a modificat

un anumit obiect Text, procedam astfel: atribuim functia "nume_functie()" handlerului de

eveniment "onChange" al obiectului Text respectiv, ca in exemplul de mai jos:

<input type="text" size="25" name="nume" onChange="nume_functie(this)">

- "onChange" este atribut al etichetei <input>, a carui valoare, intre ghilimele, este functia

"nume_functie()". In locul functiei dintre ghilimele putem sa scriem direct tot codul din functie, separand

prin caracterul ; comenzile JavaScript (acest lucru este nerecomandat in cazul unui cod mare).

64

Evenimentele JavaScript

In continuare este prezentata o lista cu evenimentele care pot fi folosite in programarea

JavaScript:

onClick - Se executa la apasarea unui click pe un obiect.(document, link, buton,

checkbox, buton radio, buton reset sau submit)

onDblClick - Executa actiunea la efectuarea a doua clickuri unul dupa altul

on MouseOver - Actioneaza cand se pozitioneaza mouse-ul deasupra unui link sau unei

imagini

onMouseOut - Actioneaza cand se muta mouse-ul de pe un hiperlink sau o imagine

onMouseMove - Actioneaza cand se misca mouse-ul

onMouseDown - Actioneaza cand tinem apasat unul din butoanele mouse-ului, pe un

document, buton sau link

onMouseUp - Actiunea se executa atunci cand este eliberat degetul de pe unul din

butoanele mouse-ului

onFocus - Actiunea apare cand este activat un obiect camp: caseta password, camp text,

bloc de text, camp FileUpload dintr-un formular HTML.

onChange - Actiunea apare cand se modifica continutul unui camp dintr-un formular

HTML (o parola, text, bloc de text, sau FileUpload) si cand acesta pierde focalizarea

onBlur - Este inversul lui "onFocus()", este declansat atunci cand un obiect nu mai este

activ, prin trecerea la o alta resursa

onLoad - Actioneaza cand browserul a terminat de incarcat un document, imagine sau

toate Frame-urile dintr-un <FRAMESET>

onUnload - Actiunea apare cand se iese din un document si se incarca un altul.

onKeydown - Actiunea apare cand se apasa o tasta

onKeyUp - Actiunea apare dupa ce am terminat de apasat pe o tasta

onKeyPress - Apare la apasarea unei taste (precede "KeyDown")

onSubmit - Actiunea apare la inaintare (trimiterea) unui formular

onReset - Actiunea apare la reinitializarea unui formular

onSelect - Actiunea apare cand utilizatorul selecteaza text dintr-un obiect Text sau

Textarea.

65

onAbort - Actiunea se executa in momentul in care se renunta la incarcarea unei imagini,

ferestre

onError - Actiunea apare cand actiunea de incarcare a unei imagin sau document

esueaza.

onMove - Actiunea se declanseaza cand se comanda deplasarea ferestrei sau cadrului

onResize - Actiunea se declanseaza atunci cand se comanda redimensionarea ferestrei sau

cadrului

In continuare sunt prezentate obiectele impreuna cu evenimentele pe care le pot folosi:

Evenimente ale ferestrelor

o - onload

- onunloavd - onresize: (in Netscape)

- onmove

- onabort

- onerror

- onfocus

- onblur

Evenimente de mouse:

o - onmousedown

- onmouseup

- onmousemove

- onmouseover

- onmouseout

- ondblclick

- onclick

Evenimente ale formularelor si elementelor acestora:

o - onsubmit

- onreset

- onchange

- onselect

- onclick

66

- onblur

- onfocus

Evenimente ale tastelor

o - onkeydown

- onkeyup

- onkeypress

Exemple cu evenimentele JavaScript

Pentru a intelege mai bine modul de folosire a evenimentelor, studiati cu atentie exemplele de

mai jos.

Exemplu "onClick"

Daca dorim executia unei anumite actiuni la apasarea unui click de mouse, folosim "onClick".

form>

<input type="button" value="Apasa" onClick="alert('Salut')" />

</form>

Exemplu "OnMouseOver - onMouseOut - onClick"

<html>

<head>


function setfocus() {

document.form2.camp.select();

}

</script>

</head>

<body>

<br>

<a href="http://www.marplo.net"

OnMouseOver="this.style.color='red';"

OnMouseOut="alert('Fereastra deschisa cu onMouseOut')">

Apasa aici pentru a vizita America!

67

</a>

<form name="form2">

<input type="text" name="camp" size="30" value="orice text">

<input type="button" value="Selecteaza" onclick="setfocus()">

</form>

</body>

</html>

Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:

- Cand se pozitioneaza mouse-ul pe legatura "Apasa aici pentru a vizita America!", culoarea

textului devine rosu (datorita expresiei "this.style.color='red'" - "this" face referire la obiectul

curent care e actionat).

Dupa ce mutati mouse-ul de pe link, se va deschide (prin evenimentul "onMouseOut") o fereastra

Alert.

Cand apasati butonul "Selecteaza", va fi selectat textul din campul de text.

68

Obiectul image

Folosind JavaScript puteti crea o multime de efecte imaginilor de pe site.

In aceasta lectie si in urmatoarea veti invata sa lucrati cu obiectul image, sa creati efecte cu

ajutorul imaginilor, folosid JavaScript.

Imaginile in pagina web

In JavaScript toate imaginile sunt reprezentate intr-o matrice numita images. Aceasta este o

proprietate (si subobiect) a obiectului "document".

Pentru indexarea in matrice (sau tablou), fiecare imagine de pe o pagina web are un anumit

numar (index). Prima imagine are numarul 0, cea de-a doua imagine are numarul 1 si asa mai

departe.

Astfel, se poate face referire la prima imagine folosind expresia "document.images[0]".

Fiecare imagine dintr-un document HTML este considarata un obiect Image.

Un obiect Image are mai multe proprietati care pot fi accesate prin JavaScript. De exemplu puteti

vedea dimensiunile unei imagini folosind proprietatile "width" si "height".

Urmatorul exemplu returneaza lungimea (in pixeli) a primei imagini din document:

document.image[0].height

Declararea imaginii care apare in pagina web se face cu sintaxa HTML:

<img src="fisier.gif" name="nume_img" id="id_img" />

Daca sunt mai multe imagini pe o singura pagina, e mai dificil sa se lucreze cu ele folosind numarul

indexului, de aceea se poate atribui fiecarei imagini cate un nume (cu atributul "name").

O alta metoda este folosirea proprietatii "getElementById("id_element"), unde "id_element" este id-ul

imaginii dat cu atributul "id="..."", ca in exemplu urmator:

document.nume_img.height o sau

document.getElementById("id_img").height

Obiectul "image" are o singura metoda:

69

handleEvent() - reprezinta evenimentul specificat pentru executarea unei anumite actiunie

Proprietatile obiectului image sunt urmatoarele:

Border - poate fi doar citita si este latimea marginii din jurul imaginii specificata în pixeli

Alt - specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata de browser)

Align - unde sa fie plasata imaginea

Complete - poate fi doar citita si este o valoare booleana care permite sa stim daca imaginea a

fost descarcata complet.

Height - inaltimea in pixeli a imaginii

Hspace - se refera la spatiul din dreapta si stanga imaginii (in pixeli)

Lowsrc - specifica un URL al unei imagini ce va fi afisata la o rezolutie scazuta

Name - se foloseste pentru a da nume unei imagini

Src - specifica URL-ul (adresa si numele) imaginii

usemap - eticheta map

Vspace - spatiul dintre partea de sus si de jos a imaginii

Width - latimea in pixeli a imaginii

Incarcarea unei imagini noi

Daca doriti sa schimbati imaginile pe pagina prin JavaScript, se foloseste propprietatea src.

Ca si in eticheta <img>, proprietatea "src" reprezinta adresa imaginii afisate.

Cu JavaScript putem da o noua adresa imaginiii care trebuie incarcate in pagina, astfel imaginea

de la noua adresa va inlocui vechea imagine.

Iata un exemplu prin care puteti intelege cum se face aceasta schimbare de imagini:

<img name="imagine" src="img1.jpg" width="155" height="155">

<form>

<input type="button" onClick="document.imagine.src='img2.jpg'"

value="Schimba imaginea">

</form>

- Imaginea "img1.jpg" este incarcata si ia numele "imagine".

- Cu linia de cod "document.imagine.src='img2.jpg' se inlocuieste fosta imagine "img1.jpg" cu o

noua imagine "img2.jpg", prin apasarea butonului "Schimba imaginea".

70

- Imaginea noua va fi afisata in acelasi loc, suprafata de afisare a imaginii ramane aceeasi.

Exemplu

Iata inca un exemplu in care avem o pagina HTML cu doua link-uri (legaturi) care, printr-un

script JS schimba afisarea mai multor imagini in acelasi loc. Imaginile sunt declarate si stocate

intr-o variabila tablou "imagini". Pentru schimbarea imaginilor se folosesc 2 functii: "gonext" si

"goback".

<html>

<head>

<title>Titlu</title>




</script>

</head>

<body>

<h4 align=center>Imagini<br>

<img src="img/img1.jpg" name="imgs" width="155" height="155"><br>

<a href="javascript:goback()"><<- Precedenta</a> |

<a href="javascript:gonext()">Urmatoarea ->></a>

</h4>

71

</body>

</html>

Preincarcarea imaginilor In exemplul precedent a fost explicat modul de incarcare a unei imagini noi in locul altei imagini

folosind JavaScript. Acest exemplu prezinta dezavantajul ca browserul trebuie sa astepte afisare

noi imagini pana cand aceasta este incarcata iar in cazul unor imagini mari asteptarea poate dura

prea mult. Acest lucru poate fi evitat prin "preincarcarea imaginilor", toate imaginile folosite in

pagina vor fi incarcate la deschiderea acesteia (printr-un script JS) si vor fi afisate doar atunci

cand este executata o comanda de afisare.

Iata un exemplu prin care puteti intelege cum se face aceast lucru:




</script>

<img name="imagine" src="img1.jpg" width="155" height="155">

<form>

<input type="button" onclick="document.imagine.src=hiddenImg.src"

value="Schimba imaginea">

</form>

- In interiorul scriptului, prima linie creaza un nou obiect "Image".

A doua linie defineste adresa imaginii noi care va fi incarcata si reprezentata prin obiectul

"hiddenImg". Astfel imaginea "img2.jpg" este incarcata (dar nu afisata) cand este executata

aceasta linie de cod (la deschiderea paginii). Imaginea este pastrata in memorie pentru folosire

ulterioara, si anume cand este apasat butonul "Schimba imaginea", care prin codul

"document.imagine.src=hiddenImg.src" va afisa imaginea "img2.jpg" in locul celei actuale

(img1.jpg). Afisarea se face imediat, fara a mai astepta incarcarea acesteia.

Daca numarul si marimea imaginilor este mare va dura mai mult incarcarea initiala a paginii, de

aceea e bine sa aveti in vedere viteza conexiunii pentru a sti ce metoda este mai indicata.

72

Bibliografie

Situri Web la cheie. Solutii profesionale de implementare, Sabin Buraga, Editura Polirom

Proiectarea siturilor Web. Design si functionalitate, sabin Buraga, editura Polirom

Cum sa creezi un site Web, Scott Mitchel, Editura Teora

HTML, XHTML CSS si XML prin exemple, Teodoru Gugoiu, editura Teora

www.w3schools.com/js/

www.w3schools.com/css/default.asp

design web - competentedigitale.ro · internetul este cea mai mare retea de informatii si...

Documents