CUPRINS

Partea I - HTML
Capitolul 1 ..............................................................................................1
Spaiul World Wide Web ......................................................................1
1.1 Introducere n realizarea unui site................................................3
1.2 Protocoale i adrese URL ............................................................4
1.3 Crearea unui site gratuit...............................................................6
1.4 Crearea paginilor Web .................................................................7
Capitolul 2 ..............................................................................................8
HTML noiuni de baz ..........................................................................8
2.1. Elemente standard ale unei pagini Web......................................8
2.2 Titluri pentru pagini web .............................................................9
2.3 Paragrafe i linii ..........................................................................10
2.4 Elementul <PRE> .......................................................................13
2.5 Linii orizontale.............................................................................16
Capitolul 3 ..............................................................................................17
Stiluri de text ..........................................................................................17
3.1 Stiluri fizice de text......................................................................17
3.2 Stiluri logice de text.....................................................................20
3.3 Fonturi..........................................................................................24
Capitolul 4 ..............................................................................................27
Liste ......................................................................................................27
4.1 Liste ordonate (Ordered lists) ......................................................27
4.2 Liste neordonate (Unordered Lists) .............................................29
4.2.1 Atributele elementului LI....................................................32
4.3 Liste de definiii (Definition Lists) ..............................................33
Capitolul 5 ..............................................................................................35
Tabele ......................................................................................................35
5.1 Generaliti...................................................................................35
5.2 Atributele etichetei <TABLE> ....................................................36
5.2.1 Elementul TH......................................................................43
5.2.2 Elementul CAPTION..........................................................43
5.3. Atributele elementului TR ..........................................................44
5.4 Atributele elementelor TD i TH ................................................46
5.5 Gruparea liniilor i coloanelor unui table ....................................50
I

5.5.1 Gruparea liniilor..................................................................50

5.5.2 Gruparea coloanelor............................................................52
Capitolul 6 ..............................................................................................54
Imagini ....................................................................................................54
6.1 Introducerea imaginilor n paginile Web .....................................56
6.2 Atributele Elementului IMG........................................................56
Capitolul 7 ..............................................................................................63
Legturi (Link-uri) ................................................................................63
7.1 Elementul A ................................................................................63
7.2 Legturi ctre alte pagini Web.....................................................65
7.3 Legturi cu imagini ......................................................................66
7.4 Legturi cu adrese URL relative..................................................68
7.5 Legturi ctre informaii non Web..............................................70
7.6 Legturi ctre fiiere non HTML................................................71
7.7 Legturi interne n cadrul unei pagini..........................................72
7.8 Trimiterea automat a unui e_mail ..............................................76
7.9 Culorile legturilor.......................................................................77
Capitolul 8 ..............................................................................................78
Elementele de structur: HTML, HEAD i BODY ............................78
8.1 Blocul de antet <HEAD></HEAD> ........................................78
8.1.1 Elementul TITLE ................................................................78
8.1.2 Elementul BASE................................................................79
8.2.3 Elementul META...............................................................80
8.2 Blocul de corp <BODY></BODY> .......................................87
8.3 Blocul de comentarii ....................................................................88
8.4 Blocul de centrare ........................................................................89
Capitolul 9 ..............................................................................................90
Cadre 90
9.1 Bazele organizrii cadrelor ..........................................................90
9.2 Elementul FRAMESET ...............................................................93
9.3 Elementul FRAME ......................................................................94
9.4 Cadre destinaie............................................................................96
9.5 Cadre interioare............................................................................98
Capitolul 10 ............................................................................................100
Formulare ...............................................................................................100
10.1 Elementul FORM.......................................................................101
II

10.2 Transmiterea i citirea datelor....................................................104

10.3 Elementul INPUT ......................................................................106
10.4 Elementul TEXTAREA .............................................................116
10.5 Elementul SELECT ...................................................................117
Capitolul 11 ............................................................................................120
Hri de imagine.....................................................................................120
11.1 Definirea hrilor imagine pe server ..........................................120
11.2 Definirea unei hri imagine la client ........................................121
11.3 Progamul MAP THIS ................................................................125
Capitolul 12
Faciliti suplimentare Multimedia
12.1 Multipurpose Internet Mail Extensions(MIME)
12.2 Aplicaii Plug-in i ActiveX
12.2.1 Plug-in-programe de completare
12.2.2 ActiveX
12.3. Elemente OBJECT i PARAM
12.4 Elementul MARQUEE

131
131
131
133
133
134
134
141

Partea II CSS
Capitolul 13 ............................................................................................144
CSS-Cascading Style Sheets (Foi de stil n cascad)...........................144
13.1 Introducere n modelele de stiluri ..............................................144
13.2 Stiluri interne (in-line) ...............................................................144
13.3 Foi de stil n pagin....................................................................146
13.4 Foi de stil externe.......................................................................149
13.5 Stiluri n cascad........................................................................150
13.6 Stiluri pentru diferii selectori....................................................152
13.6.1 Selectorul ID ....................................................................152
13.6.2 Selectorul CLASS.............................................................153
13.6.3 Pseudo-clase......................................................................155
13.6.4 Pseudo-element ................................................................158
13.7 Elementele DIV i SPAM..........................................................159
Capitolul 14 ............................................................................................160
CLASE DE PROPRIETI n CSS ....................................................160
14.1 Casete n CSS.............................................................................160
14.2 Fonturi n CSS ...........................................................................161
14.3 Proprieti pentru TEXT ............................................................164
III

14.4 Proprieti pentru padding .........................................................167

14.5 Proprieti pentru bordur..........................................................169
14.6 Proprieti pentru partea margin ................................................172
14.7 Proprieti de culoare pentru casete ...........................................174
Capitolul 15 ............................................................................................180
Poziionarea elementelor n pagin n CSS .........................................180
15.1 Arborele unei pagini ..................................................................181
15.2 Proprietatea Display...................................................................183
15.3 Elemente flotante .......................................................................186
15.4 Elemente poziionate..................................................................188
15.5 Proprietatea z-index ...................................................................194
Partea III JavaScript
Capitolul 16 ............................................................................................195
JavaScript Elemente de baz .............................................................195
16.1 Introducere n JavaScript ...........................................................195
16.2 Primul script n JavaScript.........................................................198
16.3 Tipuri de date i variabile ..........................................................201
16.3.1 Tipuri de date ....................................................................202
16.3.2 Variabile............................................................................203
16.4 Expresii i Operatori ..................................................................206
16.5 Metoda document.write()...........................................................215
Capitolul 17 ............................................................................................216
INSTRUCIUNI IN JAVASCRIPT ....................................................216
17.1 Instruciuni .................................................................................216
17.1.1 Instruciuni de decizie.......................................................216
17.1.2 Instruciuni de ciclare........................................................225
17.2 Funcii n Java Script .................................................................233
17.2.1 Definirea i apelarea unei funcii ......................................233
17.2.2 Domeniul de valabilitate a variabilelor.............................235
17.2.3 Parametri ...........................................................................238
17.2.4 Funcii predefinite.............................................................240
17.2.5 Recursivitate .....................................................................241
Capitolul 18 ............................................................................................242
OBIECTE ...............................................................................................242
18.1 Obiecte create de utilizator ........................................................242
18.2 Obiecte intriseci .........................................................................251
18.2.1 Obiectul Math......................................................................251
IV

18.2.2 Obiectul String ..............................................................253

18.2.3 Obiectul Array...............................................................259
Capitolul 19 ............................................................................................265
INTERACIUNE JAVASCRIPT HTML ........................................265
19.1 Legtura ntre JavaScript i HTML ...........................................266
19.2 Funciile setTimeout() si clearTimeout()..................................267
19.3 Elementul <FORM> n JavaScript ............................................270
19.3.1 Validarea datelor...............................................................271
19.3.2 Obiectele din Formular .....................................................272
19.3.3 Utilizarea evenimentului onchange ..................................273
19.3.4 Evidenierea seleciei csuelor de validare utiliznd
JavaScript.................................................................................................276
19.3.5 Listele de opiuni schimbate dinamic cu ajutorul butoanelor radio,
folosind JavaScript...................................................................................277
19.3.6 Trimiterea unui formular utiliznd evenimentul onsubmit
......................................................................................................279
19.3.7 Activarea, Dezactivarea, Citirea unor elemente realizate cu
funcii JavaScript .....................................................................................281
19.4 Imagini n JavaScript .................................................................282
19.4.1 Evenimentele onclick i ondblclick ..................................283
19.4.2 Evenimentul onmousemove..............................................285
19.4.3 Evenimentele onmouseover si onmouseout......................286
19.4.5 Realizarea unei animaii....................................................287
Capitolul 20 ............................................................................................289
ELEMENTE AVANSATE JAVASCRIPT..........................................289
20.1 Legtura ntre HTML, JavaScript i CSS ..................................289
20.2 Obiectul WINDOW ...................................................................293
20.2.1 Deschiderea i nchiderea unei ferestre ............................294
20.2.2 Activarea i dezactivarea unei ferestre .............................294
20.2.3 Metoda scrollTo() .............................................................294
20.3 Obiectul DOCUMENT ..............................................................294
20.3.1 Proprietatea images a obiectului document ......................294
20.3.2 Proprieti de culoare ale obiectului document.................294
Anexe
ANEXA A - Culori .................................................................................304
ANEXA B - Entiti................................................................................308
ANEXA C CSS - Specificaii de stil .....................................................312
Bibliografie selectiv ...............................................................................317
V

UNIVERSITATEA SPIRU HARET

FACULTATEA DE MATEMATIC - INFORMATIC

COD_CURS:
TEHNOLOGII WEB

CURS:
TIP CURS :

OBLIGATORIU LA SECTIA DE MATEMATICA INFORMATICA, ANUL IV,

SEMESTRUL I, LA TOATE FORMELE DE INVATAMANT: ZI, FR, ID

DURATA:
SEMESTRUL II, 2 ORE DE CURS, 2 ORE DE LABORATOR
Nr.CREDITE:
TITULAR:
LECTOR DR. FLORENTINA RODICA NICULESCU
E-MAIL:
rodicaniculescu@gmail.com
LOCUL DE :
MUNCA

UNIVERSITATEA SPIRU HARET

FACULTATEA DE MATEMATICA INFORMATICA
BUCURESTI, ROMANIA

Perioada de accesare a cursului : 1 MARTIE. 2007 - 1 AUGUST 2007

MANUALE :
PROIECTAREA PAGINILOR WEB HTML, CSS,
RECOMANDATE
JavaScript, Florentina Rodica Niculescu, Editura Fundaiei
Romnia de Mine, Bucuresti 2007;
HTML, XHTML, CSS i XML prin EXEMPLE
Ghid practic, Editura Teora, 2005.

Obiectivul cursului : CURSUL DE TEHNOLOGII WEB ARE CA OBIECTIV NSUIREA

CUNOTINELOR DE PROGRAMARE HTML, NECESARE REALIZRII PAGINILOR WEB(FIIERE
HTML). CURSUL ESTE PREDAT IN SEMESTRUL II AL ANULUI UNIVERSITAR, CU EXAMEN LA
SFARSITUL SEMESTRULUI II. PROGRAMA ANALITICA A CURSULUI URMARESTE FORMAREA UNUI
ORIZONT ASUPRA SPATIULUI WORLD- WIDE WEB, SI POSIBILITATEA STUDENTILOR DE A PUTEA
SA REALIZEZE PAGINI WEB(FISIERE HTML) ATRACTIVE. NTREGUL CONTINUT AL PROGRAMEI
CURSULUI CUPRINDE TOATE NOTIUNILE NECESARE REALIZARII PAGINILOR SI FORMATARII LOR,
ASTFEL INCAT STUDENTUL SA POATA REALIZA UN SITE CARE SA AIBA UN ASPECT CAT MAI
ATRACTIV.
MODUL DE STABILIRE A NOTEI FINALE:

INVATAMNT CURSURI DE ZI :

NOTA DE LA TESTUL GRILA (PE CALCULATOR). NOTA

SE POATE MARI CU 2 PUNCTE PENTRU STUDENTI CU ACTIVITATE LA SEMINAR SI CARE

AU PREZENTAT UN PROIECT (PROIECTUL TREBUIE SA CONTINA UN SITE CU CATEVA
PAGINI WEB).

INVATAMNT CURSURI ID / FR :

NOTA DE LA TESTUL GRILA (PE CALCULATOR).

CONSULTATII PENTRU STUDENTI: N FIECARE MIERCURI INTRE ORELE 13.30- 15,

FACULTATEA DE MATEMATICA - INFORMATICA, SEDIUL CENTRAL DIN STR. ION GHICA NR. 13,
ET. 2, tel. 3140075, 3140076

PROGRAMA ANALITIC A CURSULUI

TEMA I
INTRODUCERE N COSTRUIREA UNUI SITE
- Obinerea unui site gratuit
- FTP
- Scrierea unui fiier HTML
HTML
- Structura unei pagini
- Stiluri fizice si logice de text
- Elementele :PRE, NOBR, WBR
- Lise
- Tabele
- Imagini
- Legturi
- Hri imagine
- Elemente de baz :HTML, HEAD, BODY
- Elementele : BASE, META STYLE, SCRIPT
- Cadre: FRAMESET, FRAME, IFRAME
- Formulare
- Elementele: OBJECT , MARQUEE i tehnologia ActiveX
- Caractere HTML
- Teste in cursul PROIECTAREA PAGINILOR WEB HTML, CSS, JavaScript,
Florentina Rodica Niculescu, Editura Fundaiei Romnia de Mine, Bucuresti 2007;

Acest fiier conine rezumatul a 12 lecii despre HTML

Lecia 1: Spaiul World Wide Web
Limbajul HTML se va prezenta n leciile urmtoare. Pentru a scrie fiiere HTML(pagini
web), urmm paii:
cu My Computer sau Explorer ne situm n folderul unde dorim s se gseasc fiierele
cu ajutorul menu-ului contextual (click cu butounul drept al mouse-ului) alegem New Text Document. Programul NOTEPAD va crea un fiier cu extensia .txt
ne poziionm pe fiier i din menu-ul contextual alegem comanda RENAME, pentru a
schimba numele fiierului i extensia n .html sau .htm. Extensia .htm este asociat
browser-ului Internet Explorer, i deci fiierul va avea icon-ul browser-ului
un dublu click pe fiier are ca efect lansarea browser-ului, care va afia fiierul
(coninutul va fi vid)
din menu-ul principal din Internet Explorer, View->Source, NOTEPAD va ncarc
codul HTML al fiierului (coninutul va fi vid)
scriem un text la alegere, de exemplu se creaz un site, se salveaz fiierul
n fereastra browser-ului se apas butonul Refresh, prin care comandm browser-ului
s rencarce fiierul care a suferit modificri
se trece iar n NOTEPAD (View-Source) pentru a continua s scriem fiierul HTML
Observaie:
Pentru a scrie codul unui fiier HTML, nu trebuie s fim conectai la Internet.

Lecia a-2-a: HTML noiuni de baz

O pagina Web este un domeni HTML(un fisier text) cu extensia de nume de fisier
.html sau .htm
Un document HTML standard contine un bloc <html>...</html>, in interiorul
caruia exista alte doua blocuri: <head>...</head> si <body>...</body>.
Titlul unei pagini Web este reprezentat de continutul blocului <title>...</title>
care apare in interiorul blocului <head>...</head>.
Continutul unei pagini Web este reprezentat de ceea ce exista in interiorul
blocului <body>...</body>.
Browser-ul inlocuieste o serie de caractere de spatiu alb(spatiu, TAB, CR/LF) cu
un singur caracter spatiu.
Eticheta <br> obliga browser-ul sa afiseze continutul care urmeaza de la
inceputul unui rand nou
Pentru a afisa textul pe un singur rand, trebuie sa-l introduceti intr-un bloc
<nobr>...</nobr>.
Pentru a pastra formatarea existenta in documentul sursa, utilizati elementul
<pre>...</pre>.

1. Lecia a-3-a: Stiluri de text

Stiluri fizice de text

Textul din interiorul elementului <body>...</body> va fi afisat cu parametrii
prestabiliti ai browser-ului, daca nu sunt precizate stiluri pentru respectivul text.
Pentru a schimba stilul de text, puteti utiliza stilurile fizice:<tt> pentru text tip
teleimprimator, <i> pentru text xursiv, <b> pentru text aldin, <big> pentru text
mai mare, <small> pentru text mai mic, <strike> sau <s> pentru text taiat cu o
linie si <u> pentru text subliniat.
Stilurile de text fizice pot fi imbricate.
Elementul pentru text scris la exponent este <sup> si pentru text scris la indice
este <sub>.
Unele dintre stilurile de text fizice sunt considerate depasite si se recomanda
utilizarea tehnologiei CSS in locul lor.
Stiluri logice de text

Intr-o pagina Web, titlurile pot fi inserate cu ajutorul elementelor <h1>, <h2>,
<h3>, <h4>, <h5> si <h6>.
Puteti insera paragrafe utilizand elementele <p> si citate utilizand elemente
<blockquote>(pentru citate la nivel de bloc) si elemente <q>(pentru citate in
interiorul unui rand).
Pentru a insera linii orizontale, se utilizeaza elementul <hr>.
Pentru a insera blocuri de impartire, generice, utilizati elementul <div> pentru
separari la nivel de bloc si elementul <span> pentru separari in interiorul
randului.

Blocurile de text performant pot fi inserate utilizand elementele <pre>,

<plaintext> sau <xmp>.
Exista etichete speciale pentru elementele de fraza, cum ar fi <em>, <strong>,
<dfn>, <code>, <samp>, <kbd>, <var>, <cite>, <abbr>, si <acronym>.
Elementul <center> poate fi utilizat pentru a centra orice continut.
Tipuri de litera
Pentru a defini o culoare in codul HTML, puteti utiliza un nume de culoare
standard sau o definitie RGB.
Pentru a preciza culoarea de fundal a unei pagini Web, utilizati atributul bgcolor
al elementului <body>.
Pentru a preciza culoarea textului dintr-o pagina Web, utilizati atributul text al
elementului <body>.
Pentru a preciza marginile uneu pagini Web in Internet Explorer, utilizati
atributele leftmargin, rightmargin, topmargin si bottommargin ale elementului
<body>.
Pentru a preciza marginile unei pagini Web in Netscape Navigator, utilizati
atributele marginwidth si marginheight ale elementului <body>.
Elementul <basefont> va permite sa precizati un tip de litera pentru urmatoarea
sectiune a unei pagini Web, utilizand atributele color, face si size.
Elementul <font> va permite sa precizati un tip de litera pentru un bloc de text,
utilizand atributele color, face si size.
Atributele font si face accepta liste de nume de tipuri de litera, separate prin
virgule.

Lecia a-4-a: Liste

Pentru a insera liste intr-o pagina Web, utilizati elementul <ol> pentru liste
ordonate si elementul <ul> pentru liste dezordonate.
Pentru a insera un articol intr-o lista, utilizati elementul <li>.
Simbolurile introductive pentru listele dezordonate pot fi precizate utilizand
valorile disc, circle sau square ale atributului type.
Simbolurile introductive pentru listele ordonate pot fi stabilite atribuind
atributului type valori care reprezinta cifre arabe, litere mici sau mari si cifre
romane scrise cu litere mici sau mari.
Listele pot fi imbricate.
Puteti stabili proprietatile pentru elementele <li> individuale, utilizand atributele
value si type.
O lista de definitii (<dl>) este formata din termeni de definiti <dt> si definitii
(descrieri) elementele <dd>.
Alte tipuri de liste sunt lista de directoare (<dir>) si lista de meniuri (<menu>).

Lecia a-5-a:Tabele

Tabelele pot fi inserate intr-o pagina Web utilizand elementul <table>.

Un tabel este compus din linii(elemente <tr>) si celule(elemente <td>).
Pentru a adauga o bordura la un tabel, utilizati atributul border al elementului
<table>.
Pentru a atribui o culoare bordurii, utilizati atributul bordercolor.
Atributele frame si rules ale elementului <table> va permit sa proiectati bordurile
pentru liniile, coloanele si celulele unui tabel.
Un tabel poate fi aliniat utilizand atributul align.
Spatiul alb din jurul unui tabel poate fi stabilit cu ajutorul atributelor hspace si
vspace ale elementului <table>.
Atributul cellspcing determina distanta dintre celulele adiacente, iar atributul
cellpadding determina distanta dintre continutul si bordura unei celule.
Pentru un tabel sau o celula, pot fi stabilite dimensiuni fixe folosind atributele
width si height.
Folosind atributul bgcolor,puteti stabili culoarea de fundal pentru un tabel, iar
folosind atributul background puteti preciza o imagine de fundal.
Pentru a defini antetul unui tabel, utilizati elementul <th>.
Pentru a alinia datele intr-un tabel, utilizati atributele align si valign atasate la
elemente <tr>, <td> sau <th>.
Pentru a extinde o celula peste celulele adiacente, utilizati atributele colspan si
rowspan ale elementelor <td> sau <th>.
Pentru a adauga un titlu la un tabel, utilizati elementul <caption> in interiorul
elementului <table>.
Pentru a adauga o structura la un tabel, utilizati elementele <thead>,<tfoot> si
<tbody>.
Pentru a stabili proprietatile coloanelor unui tabel, utilizati elementul
<colgroup>.

LECTIA A-6-A: IMAGINI

Intr-o pagina Web puteti insera mai multe tipuri de imagini(formatul GIF
recomandat pentru desene, formatul JPEG recomandat pentru fotografii, formatele
PNG si TIFF pentru imagini cu scop general si formatul BMP pentru Internet
Explorer).
Pentru a insera o imagine, utilizati elementul <img>.
Adresa Internet a unei imagini este precizata de atributul scr, care accepta ca
valori orice adrese URL(Uniform Resource Locator) valide(relative sau absolute).
Pentru a adauga un chenar la o imagine, specificati atributul border.
Pentru a specifica dimensiuni fixe pentru o imagine, utilizati atributele width si
height.
Imaginea poate fi aliniata pe orizontala sau pe verticala cu ajutorul atributului
align.
Utilizati atributele hspace si vspace pentru a preciza dimensiunile spatiului alb din
jurul imaginii.

Atribute suplimentare pentru elementul <img>sunt alt(pentru alternativa text) si

lowsrc(pentru imagini inlocuitoare, cu rezolutie scazuta).
Pentru a preciza o imagine de fundal pentru o pagina Web, utilizati atributul
background al elementului <body>.

LECIA A 7-A: LEGATURI

Legaturile sunt utilizate pentru navigarea la resurse Internet.

O legatura poate fi inserata folosind elementul <a>.
Resursa Internet indicata de catre legatura este precizata de atributul href al
elementului <a>.
Legaturile pot fi definite folosind adrese URL absolute sau relative.
Pentru a defini o imagine ca legatura, inserati elementul <img> in interiorul
elementului <a>.
Pentru a defini o legatura la o resursa de pe sistemul local, utilizati protocolul
file:///.
Pentru a defini o legatura la im site FTP, utilizati protocolul ftp://.
Pentru a defini o legatura la o adresa de e-mail, utilizati protocolul mailto:.
Pentru a naviga in interiorul unei pagini Web, utilizati elementul <a> impreuna
cu atributul name.
Pentru a defini fereastra in care va fi incarcata noua resursa indicata de catre o
legatura, atasati atributul target la elementul <a>.
Pentru a particulariza culoarea legaturii, utilizati atributele link, alink si vlink ale
elementului <body>.
Pentru a defini un prefix pentru toate atributele href dintr-o pagina Web, inserati
in elementul <head> un element <base>, impreuna cu atributul href.

LECIA A 8-A:METADATE

Metadatele sunt informatii inserate in elementul <head> utilizat la descrierea

paginii Web si care transmit informatie robotilor Internet si motoarelor de cautare.
Metadatele nu sunt afisate de catre browser.
Pemtru a insera metadate, se utilizeaza o pereche de atribute: name si content sau
http-equiv si content.
Atributul content contine datele propriu-zise.
Atributul name este utilizat pentru a insera date cum ar fi description(pentru
introducerea unei descrieri), keywords(pentru a defini un set de cuvinte cheie),
author(pentru a adauga informatie despre creator) si copyright(pentru a defini
detalii despre dreptul de copyright).
Atributul http-equiv este utilizat pentru a insera date cum ar fi creation-date(data
crearii), expires(data actualizarii), from si replay-to(pentru a insera o adresa de
e-mail care permite comunicarea cu realizatorul paginiisau site-ului Web),
content-type(pentru a descrie tipul de fisier), refresh si pragma(pentru
reimprospatarea automata a browser-ului).

Pentru a adauga un comentariu intr-o pagina Web, utilizati elementul <!--...-->.

Lecia a 9-a:Cadre

Cadrele sunt utilizate pentru afisarea simultana a mai multor pagini Web in
aceeasi fereastra de browser.
Cadrele se definesc utilizand elementul <frame> in interiorul elementului
<frameset>, care inlocuieste elementul <body> obisnuit dintr-un fisier HTML.
Atributele cols si rows ale elementului <frameset> va permit sa impartiti fereastra
brouser-ului in cadre verticale(cols) si orizontale(rows).
Elementul <frameset> are si alte atribute, cum ar fi border(afiseaza o bordura),
bordercolor(atribuie o culoare bordurii), frameborder(stabileste vizibilitatea
bordurilor) si framespacing(pentru Internet Explorer).
Elementul <frame> are atribute similare, cum ar fi bordercolor si frameborder.
Alte atribute ale elementului <frame> sunt marginheight si marginwidth(care
definesc spatiul alb dintre continut si marginile cadrului), name (ataseaza cadrului
un identificator unic), noresize(dezactiveaza redimensionarea cadrelor prin clic si
trage cu mouse-ul), scrolling(ataseaza bare de derulare) si src(defineste adresa
URL a paginii care va fi incarcata in respectivul cadru).
Elementul <base> plasat in interiorul elementului <head> impreuna cu atributul
target va permit sa definiti o destinatie pentru legaturile plasate intr-o pagina
Web.
Exista patru valori magice pentru atributul target: _self, _blank, _parent si _top.
Elementul <noframes> plasat in elementul <frameset> va permite sa configurati
o pagina Web care sa poata fi afisata si de browserele mai vechi.
Elementul <iframe> va permite sa inserati cadre in-line oriunde intr-o pagina
Web obisnuita. Elementul <iframe> accepta toate atributele unui element
<frame> obisnuit, avand in plus si unele atribute specifice elementului <image>,
cum ar fi width, height, align, hspace si vspace.
Lecia a-10-a:Formulare

Formularele sunt utilizate pentru transmiterea datelor catre o aplicatie pe parte de

client sau pe parte de server de la o adresa e-mail.
Pentru a insera un formular, se utilizeaza elementul <form> impreuna cu
atributele specifice.
Atributul action al elementului <form> stabileste destinatarul datelor transmise
de catre formular(aplicatie pep arte de server sau adresa e-mail).
Atributul method al elementului <form> determina metoda prin care datele sunt
transmise de catre formular(metoda GET adauga datele la adresa URL, ,etoda
POST transmite datele intr-o tranzactie separata).
Atributul enctype al elementului <form> determina metoda de codificare
utilizata la transmiterea datelor.
Elementele componente ale formularului se introduc in interiorul elementului
<form>.

Puteti adauga tipuri diferite de elemente de formular precizand diferite valori

pentru atributul type al elementului <input>: text pentru campuri de text,
password penrtu parole, hidden pentru campuri ascunse, checkbox pentru casete
de validare, radio pentru butoane radio, image pentru butoane imagine, file
pentru incarcarea fisierelor, button pentru butoane generice, submit pentru
butoane de tip transmitere si reset pentru butoane de tip anulare.
Elementul <textarea> va permite sa adaugati campuri de text xu mai multe
randuri.
Elementul <button> va permite sa adaugati butoane particularizate.
Elementul <select> va permite sa adaugati o lista de optiuni definite cu
elementul <option>. Utilizatorul nu va putea selecta decat o singura optiune, cu
exceptia cazului in care la elementul <select> este adaugat atributul multiple.
Pentru toate componentele elementului <form> exista mai multe atribute cu
semnificatii similare, cum ar fi:name(identificator unic), value(o valoare initiala
sau eticheta de pe butoane), disable(dezactiveaza un element),readonly(nu
permite editarea valorii elementului), maxlength(stabileste numarul maxim de
caractere), size(marimea, in caractere, a zonei vizibile), checked(pentru casete de
validare si butoane radio), selected(pentru optiunile selectate), cols si
rows(pentru marimea zonei vizibile la elementul <textarea>), src si align(pentru
elemente de tip imagine).
Atributul accesskey va permite sa selectati un element de formular folosind
scurtatura.
Atributul tabindex va permite sa schimbati ordinea de parcurgere a elementelor
de formular cand se utilizeaza tasta TAB.
Datele transmise de un formular prin metoda GET sunt adaugate la sfarsitul
adresei URL, dupa un simbol ?, sub forma de lista de perechi nume=valoare
separate prin simbolul &.

LECIA A-11-A:IMAGINI HARTI

Puteti utiliza o imagine harta pentru a defini mai multe legaturi catre resurse
Internet diferite.
Inserarea unei imagini harta este un proces in mai multi pasi, ce includ declararea
hartii, descrierea ei si definirea legaturilor.
Pentru a declara o imagine ca imagine harta, utilizati elementul <img> impreuna
cu atributul usemap,care creeaza o ancora pentru identificatorul de harta.
Pentru a descrie o harta, utilizati elementul <map> impreuna cu atributul name,
care are ca valoare un identificator de harta, si inserati in ele elemente <area>
pentru fiecare zona activa.
Atributul shape al elementului <area> se utilizeaza la definirea tipului de
zona(rect, circle, poly sau default).
Atributul coords al elementului <area> se utilizeaza la definirea coordonatelor
propriu-zise ale zonei active.

Atributul href al elementului <area> se utilizeaza la definirea adresei URL a

resursei Internet indicate in zona activa.
Atributul target al elementului <area> se utilizeaza la precizarea ferestrei in care va fi

incarcata noua resursa.

De asemenea, puteti crea o imagine harta folosind elementul <object>.

Lecia a-12-a:Multimedia

Limbajul HTML are capacitatea de a ingloba fisiere multimedia.

Browserele rezolva fisierele multimedia utilizand programe de completare sau
aplicatii ajutatoare.
Tipul unui fisier multimedia este determinat de extensia de nume de fisier sau de
tipul MIME atasat.
Puteti crea o legatura la un fisier multimedia utilizand elementul <a> impreuna
cu atributul href.
O resursa multimedia poate fi inglobata intr-o pagina Web utilizand elementul
<embed> impreuna cu atributele specifice:src(pentru precizarea fisierului
multimedia), type(pentru precizarea tipului MIME asociat),width si height( pentru
precizarea spatiului din pagina Web alocat resursei multimedia).
O metoda generala de inserare a oricarui tip de resurse(inclusiv fisiere
multimedia, contrale ActiveX si miniaplicatii Java) consta in utilizarea
elementului <object> impreuna cu atributele specifice: data(pentru precizarea
adresei URL a resursei), type(pentru a preciza tipul MIME asociat), classid(pentru
a preciza identificatorul controlului ActiveX), width si height(pentru a preciza
spatiul alocat resursei in pagina Web), align(pentru alinierea resursei), hspace si
vspace(pentru definirea spatiului alb din jurul resursei) si border(pentru definirea
unei borduri).

TEMA II
CSS (Cascading Style Sheets)
-

Introducere in CSS
Crearea stilurilor inline
Crearea foilor de stil interne unei pagini
Crearea foilor de stil externe (fisiere .css)
Proprietai de Fonturi n CSS
Proprietai de Text n CSS
Casete n CSS
Poziionare n CSS
Teste in cursul PROIECTAREA PAGINILOR WEB HTML, CSS, JavaScript,
Florentina Rodica Niculescu, Editura Fundaiei Romnia de Mine, Bucuresti 2007;

Acest fiier conine 3 lecii despre CSS ( numerotate n continuarea prii I - HTML)

Lecia a-13-a: Introducere in CSS

CSS inseamna Cascading Style Sheets(foi de stil in cascada) si va permite sa

imbunatatiti prezentarea unei pagini Web;
O foaie de stil consta intr-o serie de reguli;
O regula este definita de un selector(care precizeaza unde se aplica regula) si o
declaratie(care specifica un stil);
Declaratia este o serie de perechi proprietate:valoare delimitate prin simbolul
punct si virgula;
Proprietatile sunt cuvinte rezervate;
Valorile utilizeaza o sintaxa specifica;
Pentru a defini un stil in-line, precizati valoarea style a unui element HTML;
Pentru a defini un stil in interiorul unui document HTML, utilizati un element
<style> plasat in interiorul unui element <head>.
Pentru a defini un stil intr-un fisier extern, creati o foaie de stil si, utilizand un
element <link> plasat in interiorul elementului <head>, cereti browserului sa
afiseze documentul care face referire la foaia de stil.
Atributele obligatorii pentru elementul <link> sunt: rel cu valoarea stylesheet,
type cu valoarea text/css si href care are ca valoare adresa URL a fisierului care
contine foaia de stil;
La orice elemente HTML pot fi atasate atribute universale.Aceste atribute
universale sunt:id(defineste un identificator unic), class(ataseaza elementul la o
clasa), style(ataseaza un stil), title(ataseaza un titlu), lang(defineste limba) si dir
(defineste directia de afisare);
CSS defineste prioritatea de aplicare a stilurilor la afisarea unui element: mai intai
stilurile in-line, apoi cele din document, apoi stilurile din fisiere externe si, in
final, stilul HTML;
Un selector poate fi definit ca selector universal, de clasa, id, descendent, copil,
frate, adiacent, atribut sau grupat;
Pentru a particulariza legaturile, utilizati pseudo-clasele:link, :visited, :hover,
:active si :focus;
Alte pseudo-clase includ:first-child, :first-line si :first-letter.
Pentru a insera un comentariu, utilizati sintaxa limbajului C:/*...*/;
Cand atribuiti o valoare unei proprietati, asigurati-va ca valoarea se gaseste in
intervalul corespunzator proprietatii.

Lecia a-14-a: Clase de proprieti n CSS

Tipuri de litere in CSS

Pentru a defini un font, utilizati proprietatea font-family si atribuiti-i ca valoare

o lista de nume de fonturi separate prin virgula;

Exista cinci fonturi generice: serif, sans-serif, cursive, fantasy si monospace;

Utilizati proprietatea font-style pentru a atribui stilului de font valorile normal,
italic sau oblique;
Utilizati proprietatea font-variant pentru a atribui variantei de font valorile
normal sau small-caps;
Utilizati proprietatea font-weight pentru a preciza ingrosarea fontului;
Utilizati proprietatea font-stretch pentru a preciza alungirea fontului;
Utilizati proprietatea font-size pentru a preciza dimensiunea fontului;
Utilizati proprietatea font-size-adjust pentru a stabili valoarea aspectului
fontului;
Utilizati proprietatea font ca o scurtatura pentru definirea tuturor proprietatilor
de font utilizand o lista de valori delimitate prin spatii: <style> <variant>
<weight> <size/height> <family>;
Pentru a obliga browserul sa descarce si sa utilizeze un anumit font, inserati o
directiva @font-face impreuna cu o proprietate src ce are ca valoare adresa URL a
fontului.

Text in CSS
CSS are mai multe proprietati care controleaza aspectul textului;
Proprietatea text-indent determina indentarea primului rand dintr-un bloc de
text;
Proprietatea text-align determina alinierea unui bloc de text;
Proprietatea text-decoration determina decoratiunile din text(underline,overline,
line-through sau blink);
Proprietatea text-shadow aseaza o umbra la text;
Proprietatea letter-spacing determina spatiul suplimentar dintre doua litere
adiacente;
Proprietatea word-spacing determina spatiul suplimentar dintre doua cuvinte
adiacente;
Proprietatea text-transform determina utlizarea majusculelor intr-un bloc de
text(uppercase, lowercase, none sau capitalize);
Proprietatea white-space determina cum sunt interpretate spatiile albe(pre,
nowrap sau normal).

Lecia a-15-a: Poziionarea elementelor n pagin n CSS

O ntrebare fireasc pe care ne-o punem este: Cum aranjeaz browser-ul n pagin diverse
elemente HTML (imagini, text, tabele, liste, etc.) Rspunsul la aceast ntrebare este subiectul
acestui capitol.
Aa cum s-a menionat i n capitolele precedente, elementele HTML pot fi:
elemente de nivel de bloc sunt elementele care sunt afiate la rnd nou (de exemplu:
P, DIV, TABLE, TR, OL, LI, UL, DL, DT, H1...H6)
Elemenete de nivel de text (in-line) - sunt elemente care sunt afiate pe linia curent
(de exemplu: B, I, IMG, BIG, SMALL ,S, U, SPAN, etc.).
Browser-ul cnd primete macheta unei pagini identific:

arborele documentului, care arat aranjarea elementelor ntr-un fiier HTML

tipul elementelor (de nivel de bloc sau inline)
obiecte flotante
obiecte poziionate
n seciunile urmtoare se vor prezenta aceste elemente.
n anexa B este dat tabelul cu codul unor caractere speciale.
Pentru a introduce caractere speciale n HTML se utilizeaz marcaje speciale numite
entiti sau referine de entiti. Entitiile (marcajele pentru caracterele speciale) nu sunt incluse
ntre paranteze unghiulare(<>). Acestea se introduc ncepnd cu caracterul ampersand(&) i
terminnd punct i virgul(;). Pentru unele caractere exist dou posibiliti de scriere a unui
caracter special i anume:
prin secvena
ampersand(&)
diez(#)
un numr(160)
punct i virgul(;)
de exemplu pentru caracterul special dolar($) se folosete scrierea &#036
prin secvena
ampersand(&)
un text
punct i virgul(;)
De exemplu pentru caracterul copyright se poate folosi &copy; dar i &#169.
Orice caracter se poate scrie cu prima form menionat mai sus, dar unele caractere speciale
admit ambele forme. De exemplu, literele cu diacritice romneti nu au forma a doua de
reprezentare.
Exemple de texte cu caractere speciale:
ara mea este frumoas i bogat i se numete Romnia:
&#354;ara mea este frumoas&#259; &#351;I
bogat&#259 &#351;i se numes&#351;te Romnia
La muli ani! La&nbsp;mul&#355;&#160; ani &#033
Aria cercului este R2 :
Aria cercului este &#960;R²
sau Aria cercului este &#960;R&sup2
sau Aria cercului este &#960;R&#178

Arborele unei pagini

Aezarea implicit a elementelor n pagin se mai numete i aezare n flux normal. n
capitolul precedent s-a artat c orice element HTML poate fi privit ca o caset (box) i cu
ajutorul stilurilor se poate vizualiza caseta (culori de font, bordur, textur) i dimensiunea
(height i width).
Un element poate deine alte elemente, de exemplu DIV poate conine SPAN, un element
TD poate conine un element OL sau IMG. n acest caz spunem c elementele sunt imbricate i
deasemenea casetele corespunztoare lor sunt imbricate. Casetele imbricate vor fi aezate de ctre
browser n caseta printe, la nivel de bloc sau linie.
Aceast aezare n flux normal se mai numete i model caset i genereaz grafic un
arbore de elemente. O pagin are doi copii: HEAD i BODY. Se consider frunze ale arborelui
orice secven de text care nu are copii.

Codul de mai jos va avea arborele din figura 15.1

<HTML> <HEAD>
<STYLE>
* {border-style:solid; border-color:blue;border-width:thin; margin:5pt}
/*bordura solid, de culoare blue, pentru toate elementele HTML,
cu exceptia frunzelor(text normal),
bordura exterioara este pentru elementul radacina a documentului HTML*/
body *{background:LightGreen;}
/*Casetele de la primul nivel a lui body )de exemplu DIV,
sunt pe fundal verde deschis*/
body ** {background:yellow;}
/*Caseta la nivel 2 a lui body (de exemplu OL pe fundal galben)*/
body ** *{background:cyan;line-height:70%}
/*Casetele de nivel 3 a lui body (de exemplu LI pe fundal cyan*/
body {border-color:red;border-style:dotted;}
/*Bordura rosie pentru body */
</STYLE> </HEAD>
<BODY>
Pozitionarea casetelor in<B>flux normal</B>
si descoperirea <I>Arborelui paginii</I>
<P> Prietenul meu<IMG src ="friend.jpg" width="50" height="50"> Boby
<TABLE cellspacing=5 height=20>
<TR ><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE>
</P>
<DIV style="padding:10pt 5pt ;">
<SPAN>
<B> Bloc de diviziune </SPAN> </B>
<OL style="padding:5pt 20pt 2pt;">Lista casetelor
<LI>Arbore - flux normal
<LI>Flotante
<LI>Pozitionate
</OL>
<TABLE cellspacing=5 height=20>
<TR><TD>b11<TD>b12
<TR><TD>b21<TD>b22
</TABLE>
</DIV></BODY> </HTML>

HTML

HEAD

BODY

FRUNZ

FRUNZ

TABEL

IMG

TR

TR

SPAN

LI

LI

TABEL

OL

LI

TR

TR

Figura 15.
Arborele

1
TD

TD

TD

TD

TD

TD

TD

TD

unui document

Proprietatea Display
Css ofer posibilitatea de a schimba modul de afiare a tipului elementelor (bloc i
inline), prin utilizarea proprietii display.
Valorile posibile ale proprietii display sunt:
inline elementele se afieaz n continuarea rndului curent
block elementele se afieaz la nceput de rnd
none elementul nu se va afia
Proprietatea Display poate fi aplicat la majoritatea elementelor HTML.
Dac n exemplul de mai sus se adaug n cod foaia de stil:
*{display:block}
elementele vor fi afiate de la rnd nou, aa cum se observ n figura 15.2.

Figura 15. 2 Proprietatea Display:block

Dac se dorete ca toate elementele din exemplul 15.1 s fie afiate inline, se va scrie
urmtoarea foaia de stil:
*{display:inline}
iar browser-ul le va afia aa cum se observ n figura 15.3.

Figura 15. 3 Proprietatea Display:inline

Se poate ca numai anumitor elemente s li se schimbe modul de afiare,
de exemplu, elementul de bloc TABEL dorim s fie afiat inline i elementul de text B s fie
afiat la nivel de bloc. n acest caz, adugm n exemplul 15.1, urmtoarele linii de cod :
Table {display:inline}
B {display:block}

Figura 15. 4 Proprietatea Display:inline i block

Elemente flotante
Modul normal de aezare a elementelor n pagin poate fi modificat cu ajutorul obiectelor
flotante i poziionate.
Obiectele flotante se definesc cu ajutorul proprietii float care se poate ataa la orice
element. Valorile posibile sunt:

none caseta nu e flotant

right caset flotant spre dreapta
left caset flotant spre stnga
Observaie
Obiectele flotante se pot defini:
cu atributul align, pentru elementele HTML care-l accept (de exemplu <img
align=left>)
cu CSS pentru elementele care nu accept atributul align (de exemplu OL, UL, etc.)
Dac n exemplul din figura 15.1 adugm liniile de mai jos la foaia de stil
OL{float:left}
i n corpul programului nlocuim elementul TABLE care definete primul tabel, cu <TABEL
style=float:right>, iar elementul IMG, cu <IMG align=left>, atunci va aprea imaginea i
primul tabel aliniat la dreapta i lista aliniat la stnga, ca n figura de mai jos:

Figura 15. 5 Proprietatea float

Browser-ul execut urmtorii pai la ntlnirea unui element flotant:
fluxul normal de aezare n pagin este ntrerupt
elementul flotant este afiat n poziia indicat (stnga, dreapta) ncepnd din rndul
urmtor
se afieaz elementele din flux de la punctul n care a fost ntrerupt, ncepnd cu spaiul
rmas liber de deplasarea obiectului flotant

casetele elementelor flotante se pot suprapune peste casetele din fluxul normal
dar nu i coninutul lor

Elemente poziionate

CSS ofer posibilitatea de a schimba fluxul normal de aezare a elementelor n pagin i

cu ajutorul proprietii POSITION, care poate fi ataat oricrui element n foaia de stil sau ca
valoare a atributului STYLE.
Valorile posibile sunt:
static aezarea se face n flux normal (valoare implicit)
absolute elementul iese din fluxul normal i este afiat la o distan relativ fa de
primul printe poziionat
relative elementul rmane n fluxul normal dar este poziionat la o distan relativ
cu poziia sa normal (elementul se poate suprapune peste altele)
fixed elementul iese din fluxul normal i e afiat ntr-o zon vizibil. El rmne fix
cnd se deruleaz pagina cu barele de defilare
Marginile casetei corespunztoare elementului poziionat sunt definite de proprietiile:
top
right
bottom
left
Valorile posibile sunt:
o lungime dat n: cm, mm , px, pt, em
un procent - relativ la printe

Proprietatea z-index
Dac se modific fluxul normal cu ajutorul elementelor flotante sau elemente poziionate
(absolute, relative, fixe) exist posibilitatea ca anumite elemente s se suprapun, aparnd ca o
stiv de casete, care sunt afiate n ordinea n care au fost introduse. Dac dorim s nu se
suprapun casetele trebuie s fim foarte ateni la scrierea coordonatelor marginilor (ceea ce este
foarte greu.)
Proprietatea z-index ne ajut s stabilim ordinea de afiare a casetelor suprapuse. Valorile
posibile sunt:
auto - valoarea implicit
numr - numr ntreg pozitiv care determin nivelul n stiv relativ la printe
n intreriorul aceluiai printe sunt afiate casetele n ordinea descresctoare a
numrului de nivel (valoarea lui z-index)

TEMA III
JAVASCRIPT
- Introducere n JAVASCRIPT
- Tipuri de date i variabile
- Operatori: aritmetici, relaionali, logici,de atribuire, condiional
- Instruciuni: if, compus, while, for
- Funcii : variabile locale i globale, parametrii, recursivitate, funcii speciale
- Obiecte create de utilizator n JavaScript
- document.write
- Obiectul Math
- Obiectul String

Obiectul Array

Teste in cursul PROIECTAREA PAGINILOR WEB HTML, CSS, JavaScript,

Florentina Rodica Niculescu, Editura Fundaiei Romnia de Mine, Bucuresti 2007;

Acest fiier conine 5 lecii despre limbajul JavaScript (numerotate n continuarea

prii a II-a CSS)

Lecia a-16-a: JavaScript Elemente de baz

JavaScript este un limbaj de programare orientat obiect, care va permite sa
construiti aplicatii prin utilizarea obiectelor. Un obiect este un document, un buton sau un
element care apare intr-un formular. Fiecare obiect are proprietatile sale informatii
despre obiect, cum ar fi dimensiunile si culoarea. De asemenea, fiecare obiect are
metodele sale, care sunt actiunile efectuate de catre obiect, cum ar fi prelucrarea unui
formular atunci cand utilizatorul executa clic pe butonul Submit.
Accedeti la proprietatile si metodele unui obiect scriind numele obiectului, urmat
de un punct si de numele proprietatii sau metodei pe care doriti sa o utilizati in programul
dumneavoastra JavaScript. Aceasta este denumita sintaxa cu punct.
O aplicatie JavaScript reactioneaza la evenimente care se petrec in timpul rularii
aplicatiei. Un eveniment este de obicei o actiune intreprinsa de persoanele care folosesc
aplicatia, de pilda un clic pe butonul Submit sau pe butonul Cancel. Permiteti
programului JavaScript sa reactioneze la evenimente, definind rutine de tratare a
evenimentelor. O rutina de tratare a evenimentelor este o sectiune din aplicatia
dumneavoastra care este apelata de fiecare data cand un anumit eveniment are loc in timp
ce aplicatia ruleaza.
Un program JavaScript este inclus intre etichetele <script> ale unei pagini
HTML. Etichetele <script>pot fi scrise intre etichetele <head> si <body> ale unei
pagini web. Este recomandabil sa includeti programul JavaScript intr-un comentariu
HTML, intre etichetele <script>, in asa fel incat browserele mai vechi, care nu pot
intelege JavaScript, sa nu poata afisa programul dumneavoastra JavaScript pe ecran.
Acum, pentru ca v-ati facut o impresie generala despre JavaScript si pentru ca stiti
cum sa scrieti o aplicatie simpla JavaScript, este timpul sa discutam despre aspecte mai
interesante ale limbajului JavaScript. In capitolul urmator veti invata sa stocatisi sa
folositi informatiile intr-un program JavaScript.
Variabilele si valorile literale sunt folosite impreuna cu operatorii pentru a
construi o expresie. Un operator este un simbol care ii arata browserului cum sa calculeze
o expresie. Un operator ii cere browserului sa efectueze operatia cu valorile si variabilele
dintr-una sau din ambele parti ale operatorului. Valorile si variabilele se numesc
operanzi.
Operatorii aritmetici sunt utilizati pentru a-i cere browserului sa efectueze calcule
aritmetice. Operatorii logici sunt utilizati pentru a combina doua expresii. Operatorul de
atribuire este folosit pentru a copia o valoare din partea stanga a operatorului in partea
dreapta a operatorului, care este, de obicei, o variabila. Operatorii de comparatie compara
doua valori. Operatorul conditional ii cere browserului sa evalueze o situatie si sa
intreprinda o actiune daca situatia are caracter de adevar si o alta actiune in caz contrar.
Expresiile pot deveni complexe, mai ales atunci cand, in cadrul aceleiasi expresii
sunt efectuate mai multe operatii. Atunci cand calculeaza o expresie, browserul respecta
un set de reguli numit ordinea operatiilor(precedenta operatiilor). Aceste reguli ii indica
browserului in ce fel sa calculeze o expresie complexa. Puteti simplifica o expresie

complexa prin plasarea parantezelor in jurul sectiunii pe care doriti ca browserul sa le

execute acordandu-le prioritate.
Variabilele, operatorii si expresiile sunt elemente fundamentale ale limbajului
JavaScript. Considerati-le caramizile si mortarul constructiei unei aplicatii JavaScript. In
urmatorul capitol, veti folosi variabilele, operatorii si expresiile pentru a ii cere
browserului sa ia o decizie si sa execute declaratiile JavaScript in mod repetat in cadrul
unui program JavaScript.

Lecia a-17-a:Instruciuni i funcii

Instruciuni
In acest capitol ati invatat doua tehnici de programare importante in JavaScript:
cum sa determinati browserul sa ia o decizie prin folosirea instructiunii il si a instructiunii
switch...case si cum sa determinati browserul sa execute instructiuni in mod repetat, fara
ca programul sa fi enevoit sa copieze de mai multe ori grupul de instructiuni.
Instructiunea if contine o expresie conditionala, si un bloc de program. Daca
expresia conditionala are valoarea true, atunci browserul executa instructiunile din cadrul
blocului de program. Browserului i se pot oferi instructiuni alternative, prin folosirea
instructiunii elsein tandem cu instructiunea if. Daca instructiunea conditionala este falsa,
atunci browserul executa instructiunile din cadrul blocului de program else.
Uneori veti dori ca browserul sa testeze alta conditie atunci cand expresia
conditionala din cadrul instructiunii if este falsa. Browserul poate fi determinat sa faca
acest lucru prin folosirea instructiunii if...else if. Partea else if a acestei instructiuni
contine o alta expresie conditionala si instructiuni din cadrul blocului de program, care
sunt executate in cazul in care a doua expresie conditionala are valoarea true. O alta
versiune a instructiunii if este instructiunea if...else if...else, similara cu instructiunea
if...else, in care instructiunile din cadrul blocului de program else sunt executate daca nici
prima nici a doua expresie conditionala nu este adevarata.
Ati invatat de asemenea modul de folosire al intructiunii switch...case pentru a
determina browserul sa ia o decizie prin intermediul programului dumneavoastra
JavaScript. Partea switch din cadrul instructiunii contine o valoare care este comparata cu
valorile din partea case a instructiunii. Daca exista o egalitate, atunci sunt executate
instructiunile din partea case. Daca nu exista o egalitate, aceste instructiuni sunt omise.
Ultima instructiune din cadrul portiunii case este reprezentata in mod obisnuit de
instructiunea break. Instructiunea break ii cere browseului sa iasa din cadrul instructiunii
switch...case fara a mai evalua valorile urmatoare. Instructiunea break poate fi folosita si
pentru a-i cere browserului sa iasa din orice ciclu fara a fi necesara finalizarea acesteia.
Daca valoarea de schimb nu este egala cu nici una dintre valorile de caz,
browserul executa instructiunile care apar dupa sectiunea prestabilita a instructiunii
switch...case. Sectiunea prestabilita este optionala.
Un browser poate repeta instructiunile prin plasarea de instructiuni in cadrul celor
patru tipuri de cicluri: ciclu for, ciclul for in, ciclul while si ciclul do...while. Fiecare
ciclu are o expresie conditionala ce trebuie indeplinita pentru ca browserul sa intre in
ciclu si sa execute instructiunile din cadrul blocului de program al ciclului. Exista o
singura exceptie: instructiunile din ciclul do...while sunt executate cel putin o data
indiferent de valoarea true sau false a expresiei conditionale.

Funcii
In acest capitol, ati invatat sa impartiti aplicatiile dumneavoastra JavaScript pe
grupuri de instructiuni, fiecare din acestea efectuand un anumit fel de sarcini. Aceste
grupuri se numesc functii. Apelati o functie ori de cate ori doriti ca una dintre aceste
sarcini sa fie efectuata in programul dumneavoastra JavaScript.
Trebuie sa definiti o functie inainte sa o apelati. O definitie de functie consta
dintr-un nume de functie, paranteze si blocul de program al functiei, loc unde plasati
instructiunile executate la apelarea functiei.
O functie poate detine toate informatiile de care are nevoie pentru indeplinirea
sarcinii. Alte functii au nevoie de informatii suplimentare, care sa le fie transferate de
instructiunea care apeleaza functiile . informatiile transferate unei functii se numesc
argumente.
Un argument este inclus intre paranteze, in definitia functiei, si utilizat ca
variabila in cadrul functiei. Pot fi folosite mai multe argumente; argumentele trebuie sa
fie separate prin virgula.
O functie poate returna o valoare instructiunii care a apelat functia, utilizand o
instructiune de retur. O instructiune de retur cuprinde cuvantul cheie return, urmat de
valoarea returnata de functie. Instructiunea care a apelat functia poate atribui valoarea
returnata unei variabile, poate folosi valoarea returnata in cadrul unei expresii sau poate
ignora valoarea returnata.
Apelati o functie utilizand numele de functie, urmat de paranteze. O functie poate
fi apelata de oriunde din programul JavaScript sau utilizand cod HTML din pagina web.
Dupa ce aveti functiile in arsenalul de instrumente de lucru, e timpul sa treceti
mai departe. Urmatorul capitol abordeaza manipularea sirurilor. Ganditi-va la un sir ca la
orice text si la manipularea unui sir ca la un mod prin care JavaScript prelucreaza textul.

Lecia a 18-a: OBIECTE

n limbajele de programare orientate pe obiect, deci i n JavaScript, elementele de baz
sunt obiecte. Un obiect este un lucru din lumea nconjurtoare. Obiectele sunt n esen colecii de
proprieti i metode. Proprietile sunt valori, iar metodele funcii. La membrii unui obiect
(proprieti i metode) ne putem referi ori prin numele obiectului, punct i numele proprietii sau
metodei, sau cu ajutorul unui tablou, astfel:
nume_obiect.nume_proprietate/metoda
nume_obiect[proprietate/metoda]
n JavaScirpt exist obiecte create de utilizator, obiecte intrisenci i obiecte ale browserului. Obiectele browser-ului sunt obiecte care implic intervenia browser-ului, ca de exemplu,
obiectul document i windows, care vor fi tratate n capitolul 20.

Obiecte create de utilizator

n JavaScript exist trei metode de a crea obiecte.
1. Costrucia obiectelor folosind funcia prototip
Din teoria limbajelor de programare orientate pe obiect se cunoate

faptul c obiectele se pot crea cu funcii prototip, numite i constructori.

Un constructor este invocat folosind operatorul new, care rezerv spaiu de memorie
pentru obiect i returneaz adresa spaiului respectiv de memorie.
De exemplu, declaraia z=new complex(1,2), nseamn c se rezerv memorie pentru
numrul complex 1+2i, i adresa este ncrcat n z, astfel:
1

z
Obiectul nou creat se poate invoca cu cuvntul this.
n exemplul urmtor se creaz i se iniializeaz obiectul vector. Se invoc obiectul
curent prin ambele metode: folosind caracterul ., pentru a ne referi la proprietatea lungime
vector, i folosind parantezele drepte [ ], pentru a ne referi la componentele vectorului obiect.
<HTML> <HEAD>
<SCRIPT language="JavaScript">
function Initializare_vect(lung)
{
this.lungime=lung
for(i=0;i<this.lungime;i++); this[i]=0
}
</SCRIPT> </HEAD>
<BODY> <SCRIPT language="JavaScript">
vect=new Initializare_vect(20)
document.write("lungimea vectorului este "+ vect.lungime+ "<BR>")
for(i=0;i<vect.lungime;i++)
document.write(vect[i]+ " " )
</SCRIPT>
</BODY></HTML>
S considerm exemplul des utilizat n programarea orientat pe obiecte, i anume acela de
a creare, modificare i operaii cu numere complexe.
n codul de mai jos se creaz i se modific un numr complex.
<HTML> <HEAD>
<SCRIPT language="JavaScript">
function complex(a,b)
{
this.real=a; this.imag=b
}
function modific(z)
{
z.real= 5 + ++z.real; z.imag=2 + ++z.imag
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
z = new complex(1,1)
document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>")
modific(z)
document.write("Dupa modificarea parametrilor"+"<BR>")
document.write("z.real= " + z.real +" z.imag= "+z.imag )

</SCRIPT></BODY> </HTML>
2. Metoda de creare a obiectelor utiliznd tipul Object
Un obiect poate fi creat i cu ajutorul tipului Object. S considerm exemplul din figura
2, n care se modific un numr complex cu ajutorul funciei modific(). Dac se folosete tipul
Object, nu mai este nevoie de funcia constructor complex(), iar funcia modific() va fi
considerat o metod a obiectului creat. Vom avea astfel codul:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
z=new Object()
z.real=1 ;z.imag=1
z.modific=modific
function modific(z)
{
z.real= 5 + ++z.real
z.imag=2 + ++z.imag
}
</SCRIPT>
</HEAD>
<BODY><B>Tipul Object </B><BR>
<SCRIPT language="JavaScript">
document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>")
z.modific(z)
document.write("Dupa modificarea parametrilor "+" <BR>")
document.write("z.real= " + z.real +" z.imag= " + z.imag )
</SCRIPT> </BODY> </HTML>
3. Metoda de creare a obiectelor folosind o list

Aceast metod const n aceea prin care obiectului i se atribuie o list de

componente. Componentele sunt incluse ntre acolade i separate prin virgul, astfel:
Obiect={propr1:val1;propr2=val2;metoda1:nume1, metoda2:nume2, ..}
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
z={real:2, imag:3, modific:modific}
function modific(z)
{
z.real= 5 + ++z.real
z.imag=2 + ++z.imag
}
</SCRIPT>
</HEAD>
<BODY>
<B> Metoda a 3 de construire a obiectelor <BR>
folosind lista pentru declararea proprietatilor si metodelor </B><BR>
<SCRIPT language="JavaScript">
var i
for (i in z) document.write(i+" ") document.write("<BR>")

for (i in z) document.write(z[i] + " ")

modific(z)
document.write("<BR>"+"Dupa modificarea parametrilor" + "<BR>")
document.write("z.real= " + z.real +" z.imag= " +z.imag)
</SCRIPT></BODY> </HTML>

Obiecte intriseci
n JavaScript exist mai multe obiecte definite i recunoscute de browser. n aceast
seciune se vor prezenta succint cele mai folosite obiecte intriseci ale limbajului JavaScript:
Math, String i Array.

Obiectul Math
Obiectul Math conine o serie de proprieti i metode care permit efectuarea unor
calculelor matematice. Constantele sunt proprietile obiectului iniializate. Cele mai utilizate
constante sunt : PI (3.14...) i E ( 2,71...).
Metodele obiectului Math sunt funcii matematice, cunoscute ca funcii implicite ca i n
alte limbaje de programare. Aceste funcii returneaz o valoare, care poate fi numr real, ntreg,
natural sau unghi n radiani.
Cele mai importante metode ale obiectului Math sunt:
abs(x) returneaz valoarea absolut a numrului real x (modul)
cos (x) returneaz cosinusul numrlui x
sin(x) returneaz sinusul numrului x
tan(x) - returneaz tangenta numrlui x
acos(x) arccosinus, returneaz unghiul n radiani
asin(x) - arcsin, returneaz unghiul n radiani
atan (x) arctagent, returneaz unghiul n radiani
floor(x) returneaz partea ntreag a numrului real x ([x])
random( ) returneaz un numr aleator n [0,1)
round(x) returneaz cel mai apropiat ntreg de argumentul x (rotunjurea lui x)
sqrt (x) returneaz radicalul numrului real x
pow (x,y) returneaz x la puterea y
exp(x) returneaz e la puterea x
log(x) returneaz logaritm n baza e din x

2.

Tablouri si siruri

Obiectul Array(Tablouri)
Un tablou are un nume si cuprinde unul sau mai multe elemente. In JavaScript,
elementele sunt folosite aproape la fel ca variabilele. Fiecare element este identificat de
un indice. Indicele primului element este 0, al celui de-al doilea este 1 si asa mai departe.
O valoare poate fi atribuita unui element in doua moduri: plasand-o intre
parantezele constructorului Array() la declararea tabloului sau utilizand operatorul de
atribuire in cadrul unei instructiuni JavaScript.

Puteti determina numarul de elemente dintr-un tablou utilizand proprietatea length

a obiectului tablou. Accedeti la proprietatea length specificand numele tabloului, urmat
de un punct si de cuvantul length.
Puteti accede la valoarea unui element specificand numale tabloului, urmat de
indicele elementului, inclus intre paranteze drepte. Daca trebuie sa accedeti la toate
elementele tabloului, folositi un ciclu for. Initializatorul unui ciclu for este folosit ca
indice pentru elementele tabloului.
Obiectul tablou are mai multe metode pe care le puteti utiliza pentru a lucra cu
elementele tabloului. De exemplu, metoda sort() sorteaza elementele tabloului. Matoda
slice() ia o succesiune de elemente ale tabloului si le foloseste pentru a crea un tablou
nou. Metodele concat() si join() transforma elementele unui tablou in sir. Metoda shift()
sterge si returneaza primul element al tabloului, iar apoi muta celelalte sarcini cu cate o
pozitie mai sus pe lista. Metoda push() creeaza un nou element, pe care il adauga la
sfarsitul tabloului si-i atribuie noului element valoarea pe care o includeti intre pranteze.
Metoda reverse() inverseaza ordinea valorilor din tablou. Metoda pop() returneaza si
sterge ultimul element al tabloului.
Obiectul String (Siruri )
In acest capitol, ati invatat sa faceti minuni cu sirurile. Ati invatat sa concatenati
doua siruri, pentru a alcatui un sir nou. Ati mai invatat sa extrageti o parte din sir
utilizand metoda split(), metoda substring() si metoda substr(). Metoda split() imparte un
sir in parti numite subsiruri, utilizand un sir de delimitare pentru a determina partile.
Ambele functii substring() si substr() sunt folosite pentru a copia intr-un alt sir caractere
selectate dintr-un sir.
Ati vazut ca un sir este de fapt un tablou de caractere, in care fiecare caracter este
un element al tabloului si este identificat de un indice. Puteti utiliza metoda charAt()
pentru a copia un anumit caracter din tablou. Metoda indexOf() este utilizata pentru a
determina indicele unui anumit caracter.
Ati mai invatat sa determinati lungimea sirului utilizand valoarea length a
obiectului sir. Si ati mai vazut cum sa puteti converti un sir intr-un anumit numar,
utilizand metoda parseInt() si metoda parseFloat(), sau cum puteti converti un numar
intr-un sir, utilizand metoda toString().

Lecia a-19-a:Interaciune JavaScript HTML

Legtura dintre HTML i JavaScript poate fi sintetizat n urmatorii pai:
Elementele HTML au atribute care caracterizeaz elementul respectiv. De
exemplu, elementul TABLE, are atributele: border, width, height, align,valing,
cellspacing, cellpadding, bordercolor, bgcolor,rules,frame. Majoritatea
elementelor HTML (excepie: body, head, html, base, basefont) au atributul ID,
sau NAME, dup care elementul poate fi identificat.
Sintaxa elementelor HTML este
<element atribut1 = valoare1 .atribut n=valoare n) [.]</element>

n HTML nu se face distincie ntre literele mari i cele mici cnd scriem
atribute, de exemplu atributul border sau BORDER sau Border semnific
acelai lucru.
n HTML exist 18 tipuri de evenimente : onclick, onload, onunload,
ondblclick, onmouseover, onmouseout, onmousemove, onmouseup,
onmousedown, onfocus, onlbur, onkeypress, onkeydown, onkeyup, onselect,
onchange, onsubmit, onreset.
O componenta HTML poate recepiona enumite evenimente, de exemplu
elementul button, poate recepiona onclick, ondblclick.
Pentru JavaScript, elementele HTML sunt obiecte. Atributele componentelor
HTML sunt n JavaScript, proprietile obiectelor. n timpul afirii unei pagini
web, proprietile obiectelor pot fi modificate dinamic ntr-un script.
O component HTML este o instan a unui obiect. De exemplu, dac avem
ntr-o pagin web urmtorul tag:
<IMG ID=poza SRC=p1.jpg>
elementul IMG devine obiectul IMG
o component a obiectului IMG este poza
atributul src din HTML devine proprietatea src a obiectului poza.src
p1.jpg este valoarea atributului src din HTML, i valoarea proprietii src a
obiectului poza.src
n JavaScript se face distincie ntre litere mari i mici, aa c atributul SRC din
HTML trebuie scris ca proprietate n JavaScript cu litere mici.
Evenimentele pot fi recepionate de anumite componente (asa cum am mai
precizat).
Executarea unui eveniment, lanseaz n execuie o funcie scris ntr-un script.
Apelul funciei se face n cadrul codului HTML, ca atribut al unui element
HTML. De exemplu, pentru evenimentele onload (ncarcarea) i unload
(descarcarea) unei pagini web, se creaz dou funcii, aa cum reiese din
exemplul de mai jos:
<HTML> <HEAD>
<TITLE>Apel funcie din HTML</TITLE>
<SCRIPT language="JavaScript">
function salutare() {alert ("Bun, sunt Ana Ionescu")}
function la_revedere() {alert ("Pa, ne mai auzim la telefon")}
</SCRIPT> </HEAD>
<BODY onload="salutare()" onunload="la_revedere()">
</BODY>
</HTML>

Formulare
Puteti aduce un formular la viata utilizand JavaScript. Un formular cuprinde
elemente cum ar fi butoane radio si casete de validare, utilizate pentru a strange
informatii de la utilizatori. Un element poate contine unul sau mai multe atribute, cum ar
fi un nume, si alte valori care pot fi modificate de instructiuni dintr-un program Java
Script.

Un program JavaScript poate fi executat cand are loc un eveniment, in timp ce

utilizatorul tasteaza informatii intr-un formular. Un eveniment este ceva ce utilizatorul
efectueaza cu formularul, cum ar fi un clic pe un buton, selectarea unei casete de validare
sau deplasarea indicatorului mouse-ului in afara unui element. In acest capitol ati invatat
despre diferitele evenimente care au loc in timp ce formularul este afisat pe ecran.
Identificati elementul caruia doriti sa-i raspundeti, utilizand numele evenimentului
din cadrul etichetei de deschidere a elementului, care este efectualt de eveniment. Mai
trebuie sa asociati numele functiei JavaScript care doriti sa fie apelata cand are loc
evenimentul.
Pot fi apelate doua tipuri de functii JavaScript: functii interne, definite de
JavaScript cum ar fi submit() si reset(), si functii pe care le definiti de obicei in eticheta
<head> a paginii. Puteti accede la orice aspect al unui element si il puteti modifica
utilizand o functie JavaScript.
Elemente rollover
Un element rollover reprezinta o cale simpla de a va inviora pagina web pe
masura ce vizitatorii la pagina dumneavoastra trec cu mouse-ul peste pagina web. De
fiecare data cand indicatorul mouse-ului trece peste un obiect de pe pagina web, browserul semnaleaza petrecerea unui eveniment onmouseover. Un eveniment onmouseout este
generat dupa aceea cand indicatorul mouse-ului se deplaseaza in afara obiectului. Puteti
proiecta pagina dumneavoastra web pentru a efectua o actiune ca raspuns la aceste
evenimente.
Specificati actiunea care trebuie sa aiba loc atribuind cate o valoare atributelor
onmouseover si onmouseout ale etichetei <img> si ale etichetei ancora. Valoarea poate fi
la fel de simpla ca resetarea valorii unui alt atribut, cum ar fi atributul src al etichetei
<img>, sau poate apela o functie JavaScript. O functie JavaScript poate fi definita sa
efectueze una sau mai multe actiuni ca raspuns la evenimentele onmouseover si
onmouseout, incluzand mai multe instructiuni JavaScript in definitia functiei.
Majoritatea browserelor recunosc elemente rollover; totusi alte browsere nu le
recunosc, asa ca va trebui sa testati compatibilitatea browserului cu obiectul
document.images. Daca nu recunoaste acest obiect, atunci browserul nu recunoaste
elemente rollover.

3.

Lecia a-20-a: Elemente avansate JavaScript

Pentru a face legtura ntre HTML, JavaScript i CSS trebuie tiut c:

Elementele HTML sunt obiecte n JavaScript. Fiecrui element i se poate asocia un id
cu ajutorul cruia avem acces la proprietile obiectului respectiv
n JavaScript fiecare obiect are proprietatea style cu excepia obiectelor:HTML,
HEAD, BODY, BASE i BASEFONT
Proprietatea style n JavaScript este tot de tip obiect. Obiectul style are la rndul lui alte
obiecte corespunztoare atributelor de stil din CSS.
n JavaScript se folosete pentru a defini un stil pentru un obiect id-ul scris cu litere
mici, iar .class este folosit doar n HTML
Numele acestor obiecte sunt:

numele atributelor corespunztoare din CSS, dar obligatoriu scrise cu litere mici.
De exemplu: color n CSS este tot color n JavaScript
o dac numele din CSS a unui atribut are n componen caracterul - (linie),
atunci acesta este eliminat i ce urmeaz este scris cu liter mare. De exemplu:
font-size n CSS este fontSize n JavaScript
Cu ajutorul limbajului JavaScript se pot schimba dinamic valorile proprietilor
(obiectelor) obiectului style
o

Obiectul WINDOW
Puteti deschide o noua fereastra apeland metoda window.open() din programul
dumneavoastra JavaScript. Metoda window.open() determina browserul sa deschida o
noua fereastra pe ecran. Nu trebuie sa-i transferati metodei window.open() vreun
parametru daca doriti sa folositi parametrii si pozitia standard pentru ferestre, determinata
de browser.
Totusi puteti specifica dimensiunea si stilul ferestrei transferand metodei
window.open() parametrii adecvati. Metoda window.open() accepta trei parametri: o
referinta la continutul noii ferestre, numele noii ferestre si un sir care stabileste diferite
stiluri de fereastra, printre care se numara dimensiunea si pozitia ferestrei.
Pozitia ferestrei poate fi stabilita explicit, specificand coordonatele in pixeli
pentru coltul din stanga sus al ferestrei. Unii programatori in JavaScript stabilesc coltul
din stanga-sus al noii ferestre in raport cu rezolutia ecranului, adunand sau scazand pixeli
din parametrii sceen.width si screen.height.
Dupa deschiderea unei noi ferestre, puteti utiliza metoda document.write() pentru
a scrie etichete HTML si text in noua fereastra, permitandu-va sa utilizati JavaScript ca sa
creati continut dinamic pentru ferestre-dar numai daca ferestrele se afla in acelasi
domeniu.

Obiectul DOCUMENT
Obiectul document este i el ca i obiectul window un obiect des utilizat n JavaScript.
Despre unele metode i proprieti ale obiectului (document.write(), document.images,
document.forms, etc.) s-a discutat n capitolele precedente.
n continuare se prezint proprietile principale ale obiectului document, precum i cele
mai importante metode ale sale.
Unele proprieti sunt de tip obiect, aa cum proprietatea document a obiectului window,
este obiectul document.

PROPRIETATEA ALL
Proprietatea all este cea mai important proprietate a obiectului document. Este o
proprietate de tip obiect, care are la rndul ei alte proprieti i metode. Este un obiect vector al
tuturor elementelor care se gsesc ntr-o pagin, aa cum forms, images sunt obiecte vector al
tuturor formularelor, respectiv al tuturor imaginilor dintr-o pagin.
Fiecare element al vectorului all este tot un obiect. De exemplu, elemente (obiecte) ale
vectorului all sunt: HTML, HEAD, BODY, cte un element pentru fiecare imagine (IMG),
paragraf (P), etc.

Cele mai importante proprieti ale obiectului vector all sunt:

tagName reine tipul, de exemplu IMG, P, etc. Dac exist de exemplu o imagine
ntr-o celul a unui tabel se va afia TABLE, TR, TH sau TD, IMG
length indic numrul de elemente ale vectorului all
id afieaz id-ul elementelor pentru care atributul id a fost definit

Metodele obiectului all[i] sunt:

item(id) returneaz elementul cu id indicat. n exemplul de mai jos se scrie valoarea

unui buton, de exemplu Activeaza()

tags(tip) returneaz un vector de un tip dat. De exemplu, funcia de mai jos numar
elementele de tip paragraf (elementul P) dintr-o pagina i le coloreaz n rou

Proprietatea images a obiectului document

Despre aceast proprietate s-a vorbit i n capitolul precedent, la seciunea animaie.
Images este vector care conine toate imaginile dintr-un document. Fiecrei imagini i se asociaz
cte un element de tablou n funcie de ordinea imaginilor n pagin. Funcia urmtoare afieaz
sursa imaginilor dintr-un document.
function imagini() {
for (i=0; i<document.images.length; i++)

alert(document.images[i].src)}

Proprieti de culoare ale obiectului document

Proprietile de culoare sunt mai rar folosite din cauz c este mult mai util s se
foloseasc stilurile. Proprietile de culoare sunt pentru fond, font i legturi.
Acestea sunt:
bgColor pentru culoarea de fond a documentului
fgColor pentru culoarea fontului
linkColor culoarea pentru legturi (textul legturilor)

Metoda write() a fost prezentat n capitolul 17, avnd nevoie s fie folosit n
exemplificri. Amintim c ea este utilizat pentru a scrie n document i se aplic sub forma
document.write(text).
Dac textul conine tag-uri HTML, sau este un fiier html, browser-ul interpreteaz tagurile i le afieaz.
n exemplul de mai jos scrim citeva tag-uri html astfel:
<Script language=JavaScript>
document.write(<A href=http://www.edu.ro> Informatii MEC</A>)
document.write(<BR>)
document.write(<IMG src=flori.jpg>
</Script>

ELEMENTE AVANSATE DESPRE HTML I JAVASCRIPT

-

Interaciunea dintre HTML i JavaScript

Imagini
Elementul INPUT (button, radio, checkbox, text, password)
Elementul TEXTAREA
Elementul LABEL
Evenimentele: onfocus, onblur, onload i onunload
Obiectul window
Obiectul document

Bibliografie minim
1.
2.
3.

Florentina Rodica Niculescu, Proiectarea paginilor Web HTML, CSS,

JavaScript, Editura Fundaiei Rommnia de Mine, Bucureti, 2007
Teodoru Gugoiu , HTML, XHTML, CSS i XML,Editura Teora, 2005
Tudor Sorin, Crearea i programarea paginilor Web, Editura L&S Soft, 2006

Bibliografie facultativ

4.
5.
6.

Dave Taylor, Crearea paginilor Web cu HTML 4, Editura Teora 1999

Michael B Karbo, Grafic Web, Editura Egmont, 2003
Mihaela Brut, Sabin Buruga, Prezentri multimedia pe Web, Editura Polirom,
2004

PREZENTAREA CURSULUI

Prin structura i coninutul programei cursului, studenii vor dobndi cunotinele necesare
pentru a crea pagini Web utiliznd tehnologiile HTML, CSS i Java Script. Fiecare
caracteristic a acestor tehnologii este definit, analizat i exemplificat. De asemenea
sunt prezentate toate atributele marcajelor HTML i proprietile foilor de stil CSS,
mpreun cu valorile lor posibile. Sunt prezentate modul n care proiectantul unui site poate
integra HTML, CSS i JavaScript pentru a crea pagini Web profesioniste.