Documente Academic
Documente Profesional
Documente Cultură
PREFA
Cartea este destinat tuturor celor care posed cunotine de nivel mediu n
domeniul limbajelor de programare. De asemenea, se adreseaz n special celor care doresc
s se perfecioneze n utilizarea tehnologiile Web. Elevii, studenii i cadrele didactice au
prin aceast carte un instrument util n obinerea de competene n utilizarea tehnologiei
JavaScript privind dezvoltarea de pagini Web dinamice.
Septembrie 2006
Conf. univ. dr. Marin Vlada,
Universitatea din Bucureti
marinvlada@gmail.com
Isaac Newton
Internet
Obiective:
- dezvoltarea capacitii de a nelege transformrile prin
care a trecut Internetul.
- manifestarea unor atitudini favorabile fa de cunoatere
i de tiin n general.
1.1. Scurt istoric
Internetul a aprut ca o necesitate a oamenilor de a comunica la distane mari.
Printre primele ncercri ale oamenilor de a comunica cu ajutorul aparatelor ar putea
fi considerat telegraful, inventat n 1840. Telegraful a fost primul instrument care a utilizat cablul
pentru a transmite semnale pe distane mari.
n 1962 au aprut primele discuii despre conceptul de Reea galactic n care se
imagina un set de computere interconectate prin intermediul crora oricine putea avea acces
rapid la datele i programele celorlali. n esen, acest concept este foarte asemntor cu
Internetul de astzi.
Pentru a explora acest concept, n 1965 a fost creat experimental, prima reea prin
linie telefonic de vitez mic (dial-up), crend astfel prima reea de computere, dispus pe o
suprafa ntins.
n 1968 DARPA (Defense Advanced Research Projects Agency) mpreun cu BBN
(Bolt, Beranek & Newman) au dezvoltat conceptul, realiznd prima reea de computere, numit
ARPAnet. ARPAnet a fost o reea naional, construit la nivelul Statelor Unite ce se baza pe
schimbul de pachete de date.
IMPs (Interface Message Processors) reprezint interfaa unui sistem independent
care poate fi utilizat de orice computer din reeaua ARPAnet. O parte din software-ul pentru
reeaua ARPAnet se afl n IMPs i o parte n host. La nceput, n reea, mesajele se
transmiteau de la host la host, host-urile avnd drepturi egale i se utiliza o linie telefonic de 56
kbps.
Dezvoltnd teoria schimbului de pachete ntre dou host-uri, ARPA (Advanced
Research Projects Agency - Agenia pentru Proiecte de Cercetare Avansat) a decis ca n
1969 U.C.L.A. (University of California Los Angeles) s devin primul nod de reea. De acum se
puteau conecta cercettorii i centrele de cercetare implicate, utiliznd IMPs.
Al doilea nod a fost creat la Stanford Research Institute (S.R.I.) i includea funcii cum
ar fi meninerea unor tabele cu numele host-urilor pentru a realiza o mai bun adresare. Prima
legtur ARPAnet a fost stabilit pe 21.11.1969 ntre U.C.L.A. i S.R.I.
n 1970, au urmat nc dou noduri la University of California Santa Barbara i
University of Utah. Aceste noduri au declanat de fapt apariia Internetului.
Definiie
O reea de calculatoare reprezint un ansamblu de calculatoare autonome,
interconectate, ce folosesc o singur tehnologie pentru a putea realiza un schimb de date i a
folosi n comun resursele.
ntr-o reea, calculatoarele pot fi conectate prin cablu de cupru, fibr optic, radiaii
infraroii, microunde sau satelii de comunicaii. Datorit distanei dintre dou sau mai multe
computere conectate, reelele au fost clasificate iniial n: reele locale i reele extinse.
Progresul tehnologiei i al echipamentelor de reea, a dus ulterior, la o clasificare mai
detaliat a reelelor n funcie de dimensiunile sale i anume:
reea de birou Desk Area Network DAN n care fiecare component a computerului
aflat pe birou, cum ar fi: ecranul monitorului, unitile de CD-ROM, CD-Writer, DVD-
ROM, DVD-Writer, Combo Drive, dispozitivele periferice precum: WebCam, imprimanta,
scanner-ul, pot fi accesibile din reea. O reea de felul acesta se realizeaz pentru a avea
acces la toate resursele ce pot fi solicitate de o aplicaie de reea.
reea personal Home Phoneline Networking Alliance HPNA utilizeaz o tehnologie
relativ nou ce permite construirea unei reele private, utiliznd firul de telefon existent.
Accesul la Internet se realizeaz printr-un singur computer, ce permite conectarea la
Internet i a altor computere fr a fi necesar un router.
reea local Local Area Network LAN se extinde pe o suprafa mai mic de 1
Kilometru i poate fi compus din: computere, plci de reea, dispozitive periferice,
dispozitive de reea, dispozitive media. Reelele locale permit partajarea eficient att a
resurselor software ct i a celor hardware.
reea metropolitan Metropolitan Area Network MAN se poate ntinde pe suprafaa
unui ora, putndu-se extinde pe o suprafa de zeci de kilometri.
reea extins Wide Area Network WAN se extinde pe o suprafa geografic mare
(mai mare dect MAN) i realizeaz interconectarea LAN-urilor. WAN-urile permit
partajarea resurselor pe distane foarte mari, stabilirea comunicaiilor n timp real, permit
servicii de pot electronic (e-mail), comer electronic (e-commerce), transfer de fiiere
(file transfer).
Internetul nu reprezint o singur reea de calculatoare, ci o reea de reele rspndite
pe tot globul.
Definiie
Internet-ul este o reea de reele extins pe tot globul, alturnd multe guverne,
universiti, calculatoare personale i furniznd o infrastructur pentru utilizarea documentelor
de tip hipertext, serviciilor de e-mail, transfer de fiiere i alte resurse computaionale. Aceast
vast reea de reele de computere, acioneaz ca o singur i uria reea pentru a transporta
date i mesaje din orice col al lumii, de-a lungul unor distane mari.
Internetul a revoluionat lumea prin posibilitile de comunicare i diseminare a
informaiilor, ca mediu pentru colaborare i interaciune ntre computere individuale indiferent de
poziia geografic.
Caracteristici:
Cea mai mare reea din lume;
Utilizeaz protocoalele TCP/IP i schimbul de pachete;
Ruleaz n orice substrat de comunicare.
Cum te poi conecta la Internet?
Pentru a avea acces la aceast vast reea de reele i la resursele de care dispune,
utilizatorii trebuie s apeleze la un furnizor de servicii Internet (Internet Service Provider ISP),
numit i provider Internet. Un ISP este o organizaie sau o firm ce poate oferi utilizatorilor
acces la Internet i la alte servicii nrudite cum ar fi: Internet transit, nregistrare pentru nume de
domeniu, Web hosting, conexiune prin dial-up, acces prin linie nchiriat (leased line) i
colocaie.
Internet transit furnizeaz o conexiune dedicat la Internet ce permite o rat foarte
mare de transfer a datelor. Acest tip de conexiune se utilizeaz atunci cnd se creaz o reea
privat ce conine mai multe computere i toat reeaua utilizeaz aceeai conexiune la
Internet.
Nume de domeniu sau Domain Name System (DNS) permite clienilor i gazdelor
Internet s se adreseze unii celorlali utiliznd nume n loc de adres IP. Exemple de nume de
domeniu: www.yahoo.com, www.einformatica.ro. Exemple de adrese IP: 193.226.18.252,
68.142.226.32.
O adres IP reprezint adresa de identificare n reeaua Internet, a unui computer
sau dispozitiv. Protocolul de baz din Internet care stabilete modalitatea n care se realizeaz
transferul datelor ntre dou sau mai multe computere este IP sau Internet Protocol. n
momentul de fa se utilizeaz versiunea 4 pentru protocolul Internet, numit i IPv4. O adres
IPv4 o putem scrie ca patru grupe de numere n baza 10 ntre 0 i 255 desprite prin puncte
sau patru grupe de numere n baza 2, de la 0.0.0.0 pn la
11111111.11111111.11111111.11111111. Numrul total de adrese IPv4 diferite este de 232.
Datorit dezvoltrii rapide a Internetului, cererea de adrese IP unice este deosebit de
mare, fapt ce poate duce la epuizarea adreselor IP unice existente. Pentru a rezolva diferena
dintre cererea i oferta de adrese IP, n prezent se dezvolt i se mbuntete o nou
versiune a protocolului Internet, numit IPv6. IPv6 permite o adresare pe 128 bii fa de 32 de
bii la IPv4 i poate furniza un numr de cel puin 3,4*1038 adrese IP unice.
Web hosting sau gzduire Web presupune furnizarea de ctre un ISP a tuturor
resurselor hardware i software de care este nevoie pentru oferirea serviciului de gzduire a
unui site Web sau a unor informaii n format electronic i asigurarea conexiunii acestuia la
Evaluare
W.W.W.
Obiective:
- s neleag noiunile de WWW, URL i HTTP
- s neleag paii care se parcurg pentru a se afia o
pagin Web.
2.1. World Wide Web
Dezvoltarea rapid a Internetului duce la dezvoltarea celei mai utilizate laturi ale ei i
anume: World Wide Web-ul.
Definiie
WWW (World Wide Web) reprezint o reea care utilizeaz protocolul HTTP n scopul
de a stabili legturi ntre documente aflate n diverse puncte din Internet. n acelai timp este
utilizat ca resurs pentru servicii, informaii, publicaii electronice.
Web-ul funcioneaz dup modelul client-server. Pe server ruleaz o aplicaie ce
conine site-uri Web i permite utilizatorilor client s le acceseze cu ajutorul unor aplicaii,
numite browser-e ce se afl pe computerul client. Legtura dintre aplicaia client i aplicaia
server se poate realiza numai dup ce pe ambele computere se realizeaz o conexiune la
Internet. Server-ul ce are ca rol posibilitatea de accesare on-line a site-urilor Web este cunoscut
sub numele de server Web.
Cerere Internet
Navigator Web Server Web
Rspuns Intranet
Figura 1.
n Figura 1. putem vedea care sunt paii ce se fac pentru a fi afiat o pagin Web i anume:
o utilizatorul scrie n bara de adrese a navigatorului (browser Web) numele site-ului, de
exemplu: http://www.yahoo.com
o navigatorul Web face o cerere ctre Internet
o ruterele Internetului examineaz cererea pentru a determina crui server s-i fie transmis
o ruterele transmit cererea ctre server-ul Web al crui nume se afl imediat n dreapta
expresiei http://
o server-ul Web accept URL-ul i decide dac i ce anume va returna ca rspuns ctre
browser
o server-ul interpreteaz, execut fiierul cerut i l trimite ctre browser-ul Web, posibil
modificat sau generat.
o browser-ul Web primete fiierul i l afieaz pentru a putea fi vzut de ctre utilizator
Actualul preedinte al World Wide Web Consortium, Tim Berners-Lee, a inventat
WWW n 1989, iar n 1990 a scris primul browser.
Ce este URL?
U.R.L. sau Uniform Resource Locator este o adres Web. Ea este compus
din patru pri: numele protocolului (Ex: HTTP, scriem http://), locaia site-ului (Ex:
WWW), numele organizaiei care ine site-ul (Ex: yahoo), sufixul care identific tipul
organizaiei (Ex: .com). Pentru exemplul dat, introducem adresa: http://www.yahoo.com
Dar HTTP?
H.T.T.P. sau Hypertext Transfer Protocol (Protocol de Transfer Hipertext) este un
protocol Internet care definete modul n care comunic browser-ele Web i serverele i
modalitatea de transferare a documentelor HTML.
Mai multe pagini Web conectate ntre ele prin legturi de tip hipertext sau hipermedia,
ce au un subiect comun, formeaz un site Web.
Orice site Web are o prim pagin, care se numete de regul home page i se
salveaz cu numele index.html sau index.htm. Aceast prim pagin este ca o copert de carte
ce trebuie s ne atrag i s ne sugereze ce se afl n interior. Un site bun este acela n care
informaiile sunt uor de gsit i accesat, coninnd legturi ctre celelalte pagini ale site-ului
printr-un meniu, iar din toate paginile exist o legtur ctre prima pagin. Cnd construim
design-ul unui site Web, trebuie s ncercm s crem ceva unic, cu structura i combinaia
nuanelor de culori adaptat coninutului.
Structura unui site Web este de obicei organizat ntr-una din cele trei moduri:
o Liniar. Organizarea liniar a informaiilor presupune scrierea lor ntr-o anumit ordine
stabilit de ctre autor, ca ntr-un roman. Parcurgerea informaiilor se face n totalitate,
de la nceput pn la sfrit.
o Arborescent. Acest mod de organizare presupune structurarea informaiilor i
organizarea lor ntr-o anumit ordine pe niveluri sau capitole. Pentru a putea ajunge la o
anumit informaie nu va fi necesar parcurgerea n ntregime a coninutului, ci doar a
ramurii respective a arborelui sau a capitolului. Aranjarea informaiilor se face de la
modul general la detaliu, n funcie de parcurgerea arborelui.
o Aleatoare. Organizarea aleatoare seamn cu gndirea uman, n care se poate ajunge
de la o informaie la alta aparent aleator, nestructurat, ca ntr-o pnz de pianjen. De la
acest mod de aranjare a informaiilor vine numele Web, care n traducere liber este
pnz de pianjen. Organizarea aleatoare a informaiilor ntr-un site se aseamn cumva
cu gndirea uman asociativ pentru care orice nou informaie se leag de o alta
existent deja prin asociere de idei. Site-ul construit dup o structur aleatoare, nu
conine un meniu i nici nu are informaiile structurate n capitole, dar l putem parcurge
trecnd de la o pagin la alta n momentul n care considerm c legturile care ni se
ofer, sunt demne de interes.
Evaluare
HTML
Obiective:
- s neleag noiunile de HTML,
SGML, XHTML, XML, DTT
3.1. Introducere
Primul pas realizat de ctre cercettori pentru a transmite mai multe informaii n
reea, ctre oricine dorete s le cunoasc, a fost realizarea paginilor Web, construite cu
ajutorul limbajului HTML. O pagin Web scris cu HTML are extensia .htm sau .html. De la
prima versiune HTML, care dateaz din 1992 pn acum, adic HTML 4.01, acest limbaj a
suferit multe mbuntiri, cum ar fi: internaionalizarea limbajului, utilizarea indiferent de
platform, printarea, permiterea scripturilor, a stilurilor precum CSS, a obiectelor i nu n ultimul
rnd corectarea erorilor.
Ce este HTML?
HTML HyperText Markup Language este un limbaj de marcare utilizat pentru
crearea documentelor care conin text, grafic, tabele, liste, imagini, sunete, secvene video i
legturi ctre alte documente prin World Wide Web.
Browser-ele precum: Internet Explorer, Mozilla Firefox, Netscape, Opera
interpreteaz fiierele scrise cu HTML i le afieaz. Afiarea aceleiai pagini difer puin n
funcie de varianta browser-ului. Pentru ca rezultatul s fie ct mai asemntor, indiferent de
browser, trebuie s utilizm etichetele standard HTML, adic formatul SGML. HTML este o
aplicaie SGML.
Ce este SGML?
SGML Standard Generalised Mark-up Language este un sistem ce definete
limbajele de marcare. HTML este un exemplu de limbaj de marcare.
Limbajele de marcare, ca i cerinele utilizatorilor i a Web-design-erilor au evoluat.
Istoria computerelor ne spune c tot ceea ce nu a reuit s se dezvolte i s se adapteze noilor
cerine, a fost uitat i a disprut. n ncercarea de a pstra HTML-ul, dezvoltatorii lui ncearc
s-l transforme ntr-un limbaj de marcare bazat pe XML, modularizndu-l. Toate aceste
transformri se fac n ideea de a face mai uoar combinarea lui cu alte limbaje de marcare, de
a corecta problemele de accesibilitate, prelucrare a formularelor, internaionalizare care se
cunosc deja. Un limbaj n plin dezvoltare, care corespunde standardelor XML este XHTML.
Ce este XHTML?
XHTML The Extensible HyperText Markup Language este o familie de tipuri de
documente i module actuale sau viitoare care reproduc HTML. Tipurile de documente din
familia XHTML se bazeaz pe XML.
Ce este XML?
XML The Extensible Markup Language reprezint un limbaj de marcare extins ce
permite crearea unor documente compatibile cu SGML ce pot fi utilizate n Internet i suport o
varietate de aplicaii.
El a fost conceput pentru a avea puterea i flexibilitatea SGML fr complexitatea lui.
Un document care este strict conform cu XHTML este un document XML ce ndeplinete
criteriile unui DTD.
Ce este DTD?
DTD Document Type Definition - reprezint o colecie de declaraii de marcare XML
ce definete o structur de elemente i atribute pentru a fi utilizate ntr-un document.
Pagini Web cu JavaScript Diana Elena Diaconu
12
Obiective:
- s neleag diferenele dintre
tipurile de documente HTML;
- s poat utiliza noiunile
prezentate pentru a realiza o
pagin Web
SFAT Putei s verificai dac o pagin Web este valid W3C, la adresa: http://validator.w3.org/
Etichetele ntre care se ncadreaz o pagin Web sunt <html> i </html>. Este
important de reinut faptul c etichetele pe care le deschidem trebuie s le i nchidem.
Primii pai pentru realizarea unei pagini Web sunt:
o se scrie codul surs al paginii Web cu ajutorul unui editor de texte, cum ar fi Notepad;
o se salveaz documentul cu extensia .htm sau .html;
o se deschide fiierul cu extensia .htm sau .html pentru a putea vedea cum interpreteaz
browser-ul codul surs HTML.
OBS Salvai toate documentele cu care lucrai la realizarea unui site ntr-un singur folder. De
exemplu, pentru un site avei nevoie de mai multe pagini cu extensia .htm sau .html,
imagini, fiiere multimedia.
3.4. Culori
Paginile Web implicit au culoarea alb pentru fundal i negru pentru text. Aceste culori
se pot schimba, dac tim numele culorii n limba englez sau codul culorii n hexazecimal. n
continuare avem un tabel cu cele mai importante culori. Trebuie reinut faptul c putem avea
foarte multe nuane de culori, plecnd de la culorile de baz, deoarece o culoare o putem scrie
ca fiind un numr n hexazecimal de la #000000 pn la #FFFFFF.
OBS Cu toate c funcioneaz foarte bine, acest mod de a atribui culori elementului body, nu
este de preferat deoarece n browser-ele audio se specific inutil toate aceste
atribute. Modalitatea cea mai bun este de a crea un stil propriu fiecrei formatri,
aa cum vom vedea n exemplul urmtor.
Exemplu
<html>
<head><title>Stil</title>
<style type="text/css">
body {background:#EEEEEE;color: blue}
A:link{color=#008000}
A:visited{color:#808000}
A:active{color:#00FF00}
</style></head>
<body>
Vizitati portalul profesorului modern:<br /> <a
href="http://www.didactic.ro">didactic.ro</a>
</body></html>
Acelai exemplu se poate scrie i cu stilul salvat ntr-un fiier separat de documentul
.html, ca n tabelul urmtor. Aceast modalitate de lucru cu stiluri este mai uor de modificat i
are ca avantaj faptul c putem utiliza acelai stil pentru mai multe pagini dintr-un site Web.
ex_stil_1.css fisier.html
body {background:#EEEEEE;color: <html>
blue} <head><title>Stil</title>
A:link{color=#008000} <link rel="stylesheet" type="text/css"
A:visited{color:#808000} href="ex_stil_1.css">
A:active{color:#00FF00} </head>
<body>
Vizitati portalul profesorului modern:<br
/> <a
href="http://www.didactic.ro">didactic.ro
</a>
</body></html>
Exemplu
<html>
<head><title>abreviere si
acronim</title></head>
<body>
<abbr lang="ro" title="World Wide
Web">WWW</abbr> reprezinta o retea care
utilizeaza protocolul
<abbr lang="ro" title="Hypertext Transfer
Protocol"> HTTP</abbr> in scopul de a
stabili legaturi intre documente aflate n
diverse puncte din Internet.<br>
</body>
</html>
()
()
() ____
| _/__|_\
| | ___ |
| () ()
|__ __ __ __ __
</pre></body>
</html>
3.9. Liste
Avem trei modaliti de afiare a informaiilor n: liste ordonate, liste neordonate i definiii.
Liste neordonate - Unordered Lists (UL) - se ncadreaz ntre etichetele <ul></ul>. Fiecare
element al listei ncepe cu eticheta <li>. Atributul type al listei neordonate poate lua valorile:
square, circle sau disc, n funcie de cum dorim s fie afiat semnul din faa elemntelor
listei.
Exemplu
<html>
<head><title>liste neordonate</title></head>
<body>
Culori
<ul>
<li>alb</li>
<li>gri</li>
<li>negru</li></ul>
Zile
<ul type="square">
<li>luni</li>
<li>marti</li>
<li>miercuri</li></ul>
Fructe
<ul type="circle">
<li>fragi</li>
<li>capsuni</li>
<li>banane</li> </ul>
</body></html>
Liste ordonate Ordered Lists (OL) - se ncadreaz ntre etichetele <ol></ol>. Fiecare
element al listei ncepe cu eticheta <li>. Atributul start al listei ordonate specific numrul de la
care ncepe numrtoarea pentru itemii listei. Fr acest atribut, numrtoarea ncepe de la 1.
Atributul type definete tipul numerotrii elementelor listei n felul urmtor:
Liste de definiii Definition Lists (DL) se ncadreaz ntre etichetele <dl></dl> i sunt puin
diferite fa de celelalte liste deoarece fiecare element al listei este format din dou pri:
termenul de definit i definiia. ntr-o definiie, termenul care trebuie definit ncepe cu eticheta
<dt>, iar definiia termenului ncepe cu eticheta <dd>.
Exemplu
<html>
<head><title>liste de definitii</title></head>
<body>
<dl>
<dt>HTML</dt>
<dd> HyperText Markup Language este un limbaj de
marcare utilizat pentru crearea documentelor care
contin text, grafica, tabele, liste, imagini,
sunete, secvene video si legaturi catre alte
documente prin World Wide Web.
</dd>
</dl>
</body>
</html>
Imbricarea listelor se realizeaz prin inserarea unei liste n interiorul altei liste. Se pot insera
liste ordonate n interiorul celor neordonate sau invers, liste de definiii n interiorul celor
ordonate, ca n cazul exemplului de mai jos i alte modaliti.
3.10. Tabele - se scriu ntre etichetele <table> i </table>. Un tabel este mprit n rnduri
ncadrate ntre etichetele <tr> i </tr> (table row) i fiecare rnd este mprit n celule cu
ajutorul etichetelor <td> i </td>. O celul poate conine text, imagini, liste, paragrafe,
formulare.
Etichete specifice tabelelor:
o table definete un tabel;
o th definete antetul unui tabel;
o tr definete rndul unui tabel;
o td definete celula unui tabel;
o caption definete legenda unui tabel;
o colgroup definete grupe de coloane ale unui tabel;
o col definete valoarea atributului pentru una sau mai multe coloane ale unui tabel;
o thead definete capul unui tabel;
o tbody definete corpul unui tabel;
o tfoot definete partea de jos a unui tabel.
Exemplu Primul tabel este centrat, are marginea 1 i distana dintre coninutul celulei i margini
este de 10%; al doilea tabel are marginea mai mare, de 8, spaiul dintre celule mai
mare 5% iar limea tabelului este 50% din limea suprafeei de afiare a browser-
ului; al treilea tabel are vizibile doar marginile verticale i colorate fundalurile a dou
celule cu bgcolor.
<html>
<head><title>tabele</title></head>
<body>
<table border="1" bgcolor="silver" align="center"
cellpadding=10%>
<caption>Primul tabel</caption>
<tr> <th>culori</th>
<th>flori</th> </tr>
<tr> <td>alb</td>
<td>ghiocel</td> </tr>
<tr> <td>rosu</td>
<td>trandafir</td> </tr>
</table>
Alt tabel:
<table border="8" cellspacing=5% width=50%>
<tr> <th>culori</th>
<th>flori</th> </tr>
<tr> <td>alb</td>
<td>ghiocel</td> </tr>
<tr> <td>rosu</td>
<td background="trandafir.jpg"> trandafir
<br><br></td> </tr>
</table>
tabelul 3
<table frame="vsides">
<tr> <th>culori</th>
<th>flori</th> </tr>
<tr> <td bgcolor="green">verde</td>
<td>iarba</td> </tr>
<tr> <td bgcolor="red">rosu</td>
<td>trandafir</td> </tr>
</table>
</body></html>
Exemplu de legtur relativ ctre un document care se afl n acelai folder cu documentul
apelant, respectiv un exemplu de legtur absolut ctre un document din spaiul
Web.
<html>
<head><title>legaturi</title>
</head>
<body>
<a href="pagina.html">
Legatura</a> catre un document.
<p>
<a href="http://www.einformatica.ro/">
Legatura
</a> catre un site din spatiul World Wide Web.
</p>
</body>
</html>
Elementul <frameset> definete un set de cadre, unde fiecare cadru deschide separat cte o
pagin Web. Pentru a realiza acest lucru, se utilizeaz atributele: cols coloane i rows linii.
Exemplu
Pagina principal:
<html>
<frameset cols = "30%, 70%">
<noframes>
<body> Browser-ul dumneavoastr nu poate
afia cadre!</body></noframes>
<frame src ="meniu.html" />
<frame src ="pagina simpla.html" />
</frameset>
</html>
Elementul <iframe> creaz un frame care conine o alt pagin Web, ca n exemplul urmtor.
Exemplu Acest element se utilizeaz n cazul n care dorim s afim coninutul altei pagini
Web pe o suprafa mic, delimitat de noi ntr-o anumit zon a paginii principale.
Pagina principal:
<html>
<head><title>Flori</title>
</head>
<body>
<h2><p align="center">Flori</p>
</h2>
<hr>Trandafir
<iframe src="trandafir.html"
align="middle" frameborder=1 height=40%
width=30% scrolling="yes"></iframe>
<p>Zambila
<iframe src="zambila.html"
frameborder=0></iframe></p>
</body>
</html>
Fiierul trandafir.html:
<html>
<head><title>Trandafir</title>
</head>
<body>
<h3>Trandafir</h3>
<img src="trandafir1.jpg"><br />
Sa nu uitam nicicand sa iubim
trandafirii!
</body>
</html>
Fiierul zambila.html:
<html>
<head><title>Zambila</title></head>
<body bgcolor="azure">
<h3>Zambila</h3>
<img src="zambila.jpg"><br />
Zambila este o floare de climat
subtropical-temperat, originara din
Orientul Apropiat.<br />
</body>
</html>
3.13. Formulare HTML HTML Form sunt utilizate pentru a selecta diferite tipuri de
intrri ale utilizatorilor.
Etichetele formularelor HTML:
<form> - definete un formular pentru o intrare a utilizatorului;
<input> - definete intrarea unui cmp;
<textarea> - definete aria textului (text-area);
<label> - definete o etichet de control
<fieldset> definete un fieldset;
<legend> - definete legenda unui fieldset;
<select> - definete o list selectabil;
<optgroup> - definete o opiune a unui grup;
<option> - definete o opiune;
<button> - definete un buton pe care se apas
3.13.1. Elementul form poate conine un cmp de text, checkboxes, butoane radio. Formularele
sunt utilizate pentru a trimite datele introduse de ctre utilizator ctre un URL specificat.
3.13.4. Elementul label definete o etichet de control. Cu ajutorul elementului label se poate
aciona un buton radio att prin acionarea lui direct ct i prin executarea unui click pe
textul asociat butonului radio.
Exemplu de utilizare a elementului: img. Dac imaginea se afl n acelai folder n care avem i
pagina Web, atunci o apelm prin numele ei, alfel suntem nevoii s scriem calea
unde se afl imaginea, pentru ca browser-ul s tie unde s o caute. Este de preferat
s nu dm toat calea n care se afl imaginea, adic: c:/fisiere/site/imagini/t2.jpg
sau alta, ci doar imagini/t2.jpg. Diferena const n faptul c dac dm toat calea,
n momentul n care mutm pagina Web pe alt computer, nu mai vedem imaginile,
pentru c au alt cale.
3.14.2. Elementul map definete maparea imaginii pe parte de client, asta presupune c
imaginea conine zone n care poi executa click pentru a realiza o aciune.
3.15. Fundal HTML HTML Background este utilizat pentru a mbuni aspectul unui
site Web. Pentru a realiza acest lucru, trebuie gsit o gam de culori i nuane de culori pentru
fundal i text astfel nct s se potriveasc i s rezulte un aspect plcut. Un lucru important n
alegerea fundalului este realizarea unui contrast destul de puternic pentru ca utilizatorii s poat
parcurge coninutul site-ului cu uurin.
Ca fundal se pot alege nuane de culori sau imagini. n alegerea unei imagini pentru
fundal trebuie s inem seama de impactul pe care o s-l aib asupra utilizatorilor. Dac
imaginea are un contrast puternic, ar fi indicat o prelucrare cu ajutorul unui editor de imagini,
cum ar fi: Adobe Photoshop, Corel Drow, Paint Shop Pro i exemplele pot continua.
Un alt aspect important ar fi faptul c o imagine de dimensiuni mici se multiplic pe
suprafaa fundalului i poate duna aspectului final. Pentru a rezolva acest lucru, am putea crea
noi o imagine de fundal simetric, n aa fel nct dac aezm mai multe imagini una lng
alta, rezultatul s fie plcut.
Din ce n ce mai puine site-uri profesioniste renun la imaginile pentru fundal n
favoarea unei singure culori, de regul alb sau gri deschis. Cea mai potrivit culoare pentru text,
n cazul acesta este negru.
n continuare voi prezenta exemple pozitive de combinaii de culori i exemple la care
imaginea de fundal nu se potrivete cu nuana aleas pentru text.
Exemplu de utilizare a elementului: bgcolor. Alegerea nuanelor de culori este total greit
datorit contrastului foarte slab dintre ele. Culorile alb i galben pentru text sunt dificil
de asociat cu fundalul, poate cu excepia culorii negre.
<html>
<head><title>fundal</title>
</head>
<body bgcolor="aliceblue" text="yellow">
<p>Text care nu se vede :)</p>
<font color="white">
Oare de ce?</font>
</body></html>
Exemplu Se vede vreo diferen ntre cele dou exemple? Bineneles. Acest lucru se
realizeaz dup o prelucrare atent a imaginii. Primul lucru pe care trebuie s-l facem
este s avem o imagine ntr-adevr bun, adic s aib o rezoluie mare, dup care
cutm un element care ne place pentru a-l prelucra. Dup ce v alegei obiectul, l
izolai, scpai de fundal, i aplicai diverse efecte (blur, illumination, ...) n funcie de
preferine i i adugai un fundal potrivit, de preferat o singur culoare. Dac avei o
imagine ca aceasta, care conine o floare, orice alt element decorativ ncarc pagina.
Nu trebuie s uitm scopul final i anume faptul c un site trebuie s transmit n
primul rnd informaie.
<html>
<head><title>fundal cu zambile
roz</title>
</head>
<body background=zambila6.jpg
text=hotpink>
<h2>
<p align=center>Nu-i asa ca va
plac
zambilele?</p></h2>
</body>
</html>
OBS nainte de a alege o imagine pentru fundal trebuie s ne punem urmtoarele ntrebri:
o Imaginea aleas de noi va crete cu mult timpul de ncrcare a paginii?
o Se potrivesc culorile predominante ale imaginii alese de noi cu restul paginii ?
o Imaginea transmite aceeai idee vizitatorului, ca restul site-ului?
o Imaginea de fundal distrage atenia vizitatorului site-ului?
Exemplu n acest exemplu am utilizat cte un stil pentru a formata elementele <h2>, <p> i
<h4> dintr-o pagin web.
<html>
<head><title>font</title>
</head>
<body>
<h2 style="color:royalblue"
face="Verdana">Ochii tai</h2>
<p style="color:navy" face="Monotype Corsiva">
Daca mai crezi cat de cat in minuni,<br/>
Sa te vad trei zile, sa nu te vad trei
luni,<br/>
Si s-o luam iar si iar<br/>
De la capat...<br/>
Spune-mi, cum ti s-ar parea?</p>
<h4 style="color:royalblue" face="Verdana">
Alexandru Andries</h4>
</body>
</html>
Exemplu
<html>
<head><title>coloane</title></head>
<body>
<center><h2>Clasificarea retelelor
in functie de dimensiunile
sale</h2></center>
<table>
<tr><td bgcolor="DDDDDD"><b>Retea de
birou</b></td>
<td><b>Retea personala</b></td></tr>
<tr><td bgcolor="EEEEEE"> Desk Area
Network DAN n care fiecare
component a computerului aflat pe
birou, cum ar fi: ecranul
monitorului, unitile de CD-ROM,
CD-Writer, DVD-ROM, DVD-Writer,
Combo Drive, dispozitivele
periferice precum: WebCam,
imprimanta, scanner-ul, pot fi
accesibile din reea</td>
<td> Home Phoneline Networking
Alliance HPNA utilizeaz o
tehnologie relativ nou ce permite
construirea unei reele private,
utiliznd firul de telefon existent.
Accesul la Internet se realizeaz
printr-un singur computer, ce
permite conectarea la Internet i a
altor computere fr a fi necesar un
router.</td> </tr>
</table>
</body>
</html>
Evaluare
C.S.S.
Obiective:
- s neleag noiunea de stil HTML
- s neleag paii care se parcurg pentru a se introduce
un stil ntr-o pagin Web.
4.1. Cascading Style Sheet
Pn acum am nvat cum s crem pagini Web frumos formatate, cu text nclinat
sau subliniat, de dimensiuni sau culori diferite. Acum v imaginai c avei de construit un site
care s conin text formatat n acelai fel i pentru acest lucru trebuie s scriei cod pentru
fiecare poriune de text separat i pentru fiecare pagin Web. n felul acesta o pagin Web
devine din ce n ce mai ncrcat. Putem schimba acest lucru dac n loc de formatarea
separat a poriunilor de text, am utiliza stiluri scrise separat ntr-un fiier pe care l-am putea
apela din interiorul tuturor paginilor site-ului nostru. Cu alte cuvinte, am putea scrie un singur
fiier ce conine CSS, cu ajutorul cruia s formatm toate paginile Web dintr-un site.
O pagin Web scris cu CSS poate fi interpretat mai uor i corect de ctre diferite
browser-e, cum ar fi cele destinate persoanelor cu dizabiliti. Aceste browser-e parcurg
paginile Web i le transform. Principalele aciuni sunt: mrirea sau micorarea dimensiunii
textului afiat, transformarea coninutului paginii Web n fiiere audio sau fiiere interpretabile de
ctre un dispozitiv Braille.
Pentru a interpreta ct mai corect coninutul unei pagini Web, acesta trebuie s poat
fi vzut simplu, neformatat, toate formatrile s fie fcute cu ajutorul CSS-urilor.
n afara acestor avantaje, CSS este folosit pentru a putea crea pagini cu stil, care s
ncnte privirea utilizatorilor.
Un stil este compus din dou pri: selectorul i declaraia. Selectorul este un element
HTML ce poate realiza formatarea paginii Web (cum ar fi: body, H1, p) i acioneaz ca o
legtur ntre pagina Web i stil. Declaraia conine elementele ce vor duce la formatarea
propriu-zis a documentului.
Selector Declaraia
Proprietatea Valoarea
Body { background-color: beige}
H2 {color: red}
P {font-family: Verdana}
n exemplul de mai sus, stilul H2 declarat n antetul paginii Web, va schimba culoarea
tuturor textelor din pagin, ce utilizeaz H2.
Un selector direcioneaz un stil ctre un anumit loc dintr-un document HTML. El
poate fi construit n multe feluri, prin combinaii ntre blocurile:
o Element
o Class
o Id
Selectorul Element poate fi definit cu ajutorul etichetelor de genul: <H2>, <p> care
formateaz o poriune de text, ntr-un anumit fel. Odat definit stilul cu ajutorul acestor etichete,
atunci cnd le utilizm n cadrul paginii Web, ele vor avea acelai efect n toat pagina. De
exemplu, dac pentru H2 definim n cadrul stilului i culoarea maron, atunci, <H2> va avea
aceast culoare oriunde va fi utilizat n cadrul paginii Web. n concluzie, acest tip de selector are
dezavantajul c odat definit eticheta, nu mai poate fi utilizat cu efectul ei implicit, ci doar cu
cel dat de stilul definit.
Exemplu de utilizare a elementului div. n acest exemplu am utilizat stilul div pentru a scrie
textul cu culoarea albastr.
<html>
<head><title>div</title>
<style type="text/css">
div
{color:blue; background:cyan;
font-family:cursive;
font-style:italic;
font-size:12pt;
border-style: inset;
border-width: 0.07in;
border-color: blue;}
</style>
</head>
<body>
<div>
<h3>Ceva ca rugaciunea</h3>
Nu stiu ce am,<br />
Ca nu dorm cand dorm<br />
Nu stiu ce am,<br />
Ca nu sunt treaz,<br />
Cand stau de veghe.<br />
<p>Marin Sorescu</p>
</div>
</body></html>
4.1.4. Elementul span se utilizeaz pentru a grupa mai multe elemente inline ntr-un document.
4.1.6. Elementul basefont definete fontul de baz dintr-un document. Dac nu este setat,
fontul de baz este iniializat cu 3.
4.1.7. Elementul center centreaz textul dintr-un document i se scrie ntre etichetele <center>
i </center>.
Exemplu de utilizare a elementului center. n acest exemplu, titlul este scris centrat cu ajutorul
etichetei <center> (nu este stil), iar pentru restul textului, acelai efect este produs cu
ajutorul stilului CSS (varianta acceptat de HTML 4.01 i XHTML 1.0 Strict DTD).
<html>
<head><title>center</title>
</head>
<body>
<center>Dans n ploaie </center><br
/><br />
<p type="text/css" style="font-size=15;
text-align:center;">
Lsai ploaia s m mbrieze i
destrame-m vntul,<br />
lubii-mi liberul dans fluturat peste
voi
-<br />
Genunchii mei n-au srutat niciodat
pmntul,<br />
Prul meu nu s-a zbtut niciodat-n
noroi!<br />
<br /><br />
Ana Blandiana</p>
</body>
</html>
<html>
<head>
<title>class</title>
<style type="text/css">
.titlul_poeziei { font-family: Georgia, "Times
New Roman", Times, serif; font-size: 24px;
font-style: normal; line-height: 10mm; font-
weight: bolder; font-variant: normal; color:
#0000FF; letter-spacing: 2mm; word-spacing:
10mm; text-align: center; vertical-align:
top; border-color: black black #0000FF;
border-bottom-width: medium}
.textul_poeziei { font-family: Georgia, "Times
New Roman", Times, serif; font-size: 14px;
font-style: oblique; font-weight: lighter;
color: #0033FF}
.autorul_poeziei { font-family: Arial, Helvetica,
sans-serif; font-size: 16px; font-style:
italic; line-height: 20mm; font-weight: bold;
color: #0000FF; text-indent: 50pt}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p class="titlul_poeziei">Fior </p>
<p class="textul_poeziei">Cine esti, ori ce
esti,<br>
Abur ori duh coborât din povesti,<br>
Unda prelinsa sa ma învenine,<br>
Stea fulgerata în mine? </p>
<p class="autorul_poeziei">Nicolae Labis</p>
</body></html>
OBS
Un element HTML poate avea doar un singur atribut class. Este greit s scriem
<p class="titlul_poeziei" class="textul_poeziei">
Fior
</p>
n exemplul de mai sus, stilurile: .titlul_poeziei, .textul_poeziei, .autorul_poeziei pot fi
utilizate de ctre orice elemente HTML, nu numai de ctre elementul <p>.
Dimensiunea textului
Dup cum am spus mai sus, textul poate fi redimensionat cu ajutorul urmtoarelor elemente:
Point sau pt, Dimensiunea standard a textului afiat ntr-un editor de texte este de
10pt. Cnd utilizai pt, cel mai indicat este s folosii dimensiuni mai mari sau egale cu 10 pt.
Acest mod de dimensionare a textului este utilizat n special de ctre cei care doresc s
tipreasc documentul i doresc o bun ncadrare a textului n pagin.
Exemplu: p1 {font-size: 20 pt;}
Ems este o unitate de msur relativ la orice element printe a textului care-l
conine. De exemplu, dac definim elementul printe
p1 {font-size: 20 pt;}, dup care definim
p2{font-size: 2em;}
dimensiunea celui de-al doilea text este de dou ori mai mare dect a primului text.
Pixel sau px este o modalitate de a dimensiona textul cu ajutorul dimensiunii unui
pixel. Acest mod este util pentru afiarea unui text, dar nu i pentru printarea lui.
Pagini Web cu JavaScript Diana Elena Diaconu
47
P3 {font-size: 33px; }
Procent sau % este o dimensiune relativ la orice element printe, ca i ems.
P4 {font-size: 150%; }
Alte uniti de msur care pot fi utilizate sunt: in (inch), ex (x-height), cm (centimetri),
mm (milimetri), pc (picas). Aceste elemente pot da o dimensiune clar a textului, spre deosebire
de urmtoarele care sunt parte a specificaiilor CSS i definesc o dimensiune aproximativ: xx-
small, x-small, small, medium, large, x-large, xx-large. Am spus aproximativ deoarece
browser-ele interpretez puin diferit aceste elemente.
Scroll colorat Stilurile se pot aplica i asupra barei de derulare, dup cum putem vedea n
exemplul acesta .
<html>
<head>
<title>Bara de derulare</title>
<style>
body
{ background-color: #9DFF9D;
scrollbar-3dlight-color:#15FF15;
scrollbar-arrow-color:#001155;
scrollbar-base-color:#033000;
scrollbar-darkshadow-color:#000d00;
scrollbar-face-color:15FF15;
scrollbar-highlight-color:#0d0000;
scrollbar-track-color:#006000;
scrollbar-shadow-color:#22d000 }
p {color: #006000;}
</style></head>
<body>
<p>Testament literar <br /><br />
Urmaşilor mei
Văcăreşti!<br />
Las vouă moştenire:<br />
Creşterea limbei romăneşti<br
/>
S-a patriei cinstire.<br /><br />
Ienăchită Văcărescu</p>
</body></html>
<html>
<head><title>tipuri de cursor</title>
<style type=text/css>
.s1 {background-color:#B3FFFF;
cursor:auto;}
.s2 {cursor:crosshair;}
.s3 {cursor:default;}
.s4 {background-color:#B3FFFF;
cursor:e-resize;}
.s5 {background-color:#B3FFFF;
cursor:help;}
.s6 {cursor:inherit;}
.s7 {cursor:move;}
.s8 {background-color:#B3FFFF;
cursor:ne-resize ;}
.s9 {background-color:#B3FFFF;
cursor:n-resize;}
.s10 {cursor:nw-resize;}
.s11 {cursor:pointer;}
.s12 {background-color:#B3FFFF;
cursor:s-resize;}
.s13 {background-color:#B3FFFF;
cursor:se-resize;}
.s14 {cursor:sw-resize;}
.s15 {cursor:text;}
.s16 {background-color:#B3FFFF;
cursor:wait;}
.s17 {background-color:#B3FFFF;
cursor:w-resize;}
</style>
</head>
<body>
<table>
<tr><td class=s1>Cursor de tip auto</td>
<td class=s2>Cursor de tip
crosshair</td></tr>
<tr><td class=s3>Cursor de tip
default</td>
<td class=s4>Cursor de tip e-
resize</td></tr>
<tr><td class=s5>Cursor de tip help</td>
<td class=s6>Cursor de tip
inherit</td></tr>
<tr><td class=s7>Cursor de tip move</td>
<td class=s8>Cursor de tip ne-
resize</td></tr>
<tr><td class=s9>Cursor de tip n-
resize</td>
<td class=s10>Cursor de tip nw-
resize</td></tr>
<tr><td class=s11>Cursor de tip
pointer</td>
Text cu umbr n acest exemplu am utilizat stiluri pentru a afia un text cu efectul de umbr.
<html>
<head>
<title>Efect text</title>
<STYLE type=text/css>
DIV
{ position: absolute;
font-size: 16px;
left: 20px;
top: 20px; }
</STYLE>
</head>
<body style="margin: 0px">
<STYLE type=text/css>
.umbra
{ left: 1px;
top: 1px;
color: #999999; }
.original
{ left: 0px;
top: 0px;
color: #0000FF; }
</STYLE>
<DIV class=citat>
<DIV class=umbra>Priveste atent in tine
insuti. <br />
Inlauntrul tau este izvorul binelui, <br
/>
totdeuna va tisni de acolo puterea, <br />
daca ai sa sapi necontenit si cu
staruinta.<br /><br />
Marcus Aurelius, Catre sine</DIV>
<DIV class=original>Priveste atent in tine
insuti. <br />
Inlauntrul tau este izvorul binelui, <br
/>
totdeuna va tisni de acolo puterea, <br />
daca ai sa sapi necontenit si cu
staruinta.<br /><br />
Marcus Aurelius, Catre sine</DIV>
</DIV>
</body>
</html>
JavaScript
Obiective:
- s neleag noiunea de JavaScript
- s neleag avantajele i dezavantajele utilizrii
scripturilor JavaScript.
5.1. Introducere
Acest capitol este aproape imposibil de asimilat dac nu ai parcurs capitolele
anterioare. Este important s cunoatei deja noiunile de Internet, WWW i s titi s creai
pagini Web simple n HTML. n afar de acestea, ar fi bine s fii familiarizai cu un limbaj de
programare cum ar fi: C, C++, C#, Visual Basic sau Java, dar nu este o condiie fr de care s
nu putei trece mai departe.
Corporaia Netscape Communications a creat limbajul de scriptare LiveScript pentru
Web designers i dezvoltatori. n decembrie 1995, LiveScript a fost redenumit JavaScript i
lansat ca parte component a browser-ului Netscape Navigator 2.0 de ctre Netscape
Corporation i Sun Microsystems
JavaScript a fost proiectat ca fiind un limbaj de scriptare simplu, pentru programatori
nceptori care nu cunosc Java i pentru Web designers. Acest limbaj de scriptare este simplu,
deoarece la scrierea unui script nu suntem obligai s declarm variabilele nainte de a le utiliza
i nici s utilizm un compilator. Browser-ul este cel care interpreteaz scriptul i care ne arat
dac avem greeli. Nu este nevoie s utilizm un compilator Java sau C, nu este necesar s
instalm diverse soft-uri pe computerul nostru pentru a putea vizualiza rezultatul. Nu avem
nevoie dect de un browser. Browser-ul care a interpretat pentru prima dat scripturile
JavaScript este Netscape, dup care au urmat Internet Explorer, Opera, Mozilla i altele.
JavaScript este interpretat de ctre browser-e i poate funciona indiferent de
platform. Sistemele de operare pe care poate fi interpretat un script JavaScript sunt: Windows,
UNIX, Macintosh.
Cu JavaScript putem crea pagini Web dinamice, interactive, pop-up, bare de
navigare, putem trimite date pentru verificare prin Internet, putem controla applet-uri Java.
JavaScript este un limbaj care poate fi utilizat att pe parte de client ct i pe parte de server.
JavaScript este un limbaj de scriptare bazat pe obiecte, nu orientat pe obiecte cum
este limbajul de programare Java. JavaScript nu este Java, chiar dac asemnarea numelor
poate duce la aceast confuzie. Cu JavaScript nu putem crea applet, dar l putem interpreta,
dup ce l crem cu Java.
JavaScript este un limbaj interpretat de ctre browser i nu are nevoie s fie compilat
nainte de a fi rulat. Browser-ul analizeaz fiecare element al paginii Web pe rnd, mprindu-l
n componente mai mici.
n funcie de locul unde este plasat un script, scriptul poate fi pe parte de client sau pe
parte de server. Dac scriptul ruleaz n browser-ul clientului, atunci l numim script pe parte de
client, aa cum sunt majoritatea script-urilor.
Ca rspuns la provocarea lansat de Netscape, au aprut i alte limbaje de scriptare
asemntoare:
o Microsoft a lansat propriul limbaj de scriptare cu numele VBScript, iar n iulie 1996 a
lansat Internet Explorer 3.0 cu JScript inclus;
o ECMA a lansat n iunie 1997 o versiune numit ECMAScript, care este de fapt standard
interneional pentru JavaScript.
Rezultatul la care trebuie sa ajung orice firm ce dorete s furnizeze un limbaj de
scriptare este c acel limbaj trebuie s ruleze independent de platform pentru a tri n spaiul
Pagini Web cu JavaScript Diana Elena Diaconu
52
Web. Acest lucru duce la concluzia c, att utilizatorii ct i dezvoltatorii de soft trebuie s
lucreze mpreun pentru a gsi soluii utile tuturor.
Bineneles c JavaScript are i dezavantaje, cum ar fi faptul c se pot crea bucle
infinite cu ajutorul instruciunilor repetitive sau atacuri asupra computerelor care permit rularea
diverselor scripturi, dar un utilizator Internet cu puin experien nu ar trebui s-i fac
probleme. Orice limbaj de programare poate fi folosit att pentru a crea lucruri bune, ct i
pentru a crea lucruri rele. JavaScript este doar un limbaj de scriptare, adic un instrument!
Important! JavaScript este case-sensitive, adic este important s utilizm numele variabilelor
aa cum le-am declarat, cu litere mari sau mici. Dac am declarat o variabil cu
numele X1, nu o putem folosi ca x1, ci doar cu numele X1.
<html>
<head><title>Operatorul logic &&</title>
</head>
<body>
<pre>
<script language="JavaScript">
var x=0, y=3;
document.writeln("x=0 y=3\n");
document.writeln("z=x&&y => z= ",
z=x&&y);
document.writeln("z=(!x)&&y => z= ",
z=(!x)&&y);
document.writeln("z=0&&1 => z= ",
z=0&&1);
document.writeln("z=(4<=2)&&(5>=4)=>z=",z=(
4<=2)&&(5>=4));
document.writeln("z=(x==0)&&(y==3)=>z=",z=(
x==0) &&(y==3));
</script>
</pre>
</body>
</html>
<html>
<head><title>Operatorul logic ||</title>
</head>
<body>
<pre>
<script language="JavaScript">
var x=0, y=3;
document.writeln("x=0 y=3\n");
document.writeln("z=x||y => z= ",
z=x||y);
document.writeln("z=(!x)||y => z= ",
z=(!x)||y);
document.writeln("z=0||1 => z= ",
z=0&&1);
document.writeln("z=(4<=2)||(5>=4)=> z= ",
z=(4<=2)||(5>=4));
document.writeln("z=(x==0)||(y==3)=> z= ",
z=(x==0)||(y==3));
</script>
</pre>
</body>
</html>
<html>
<head>
<title>Operatorul logic |
</title>
</head>
<body>
<pre>
<script language="JavaScript">
var x=5, y=0;
document.writeln("x=5 y=0\n");
document.writeln("z=x|y => z= ", z=x|y);
document.writeln("z=x|(!y) => z= ", z=x|(!y));
document.writeln("z=0|1 => z= ", z=0|1);
document.writeln("z=(4<=2)|(5>=4)=> z=
",z=(4<=2)|(5>=4));
document.writeln("z=(x==5)|(y==0)=> z= ",
z=(x==5)|(y==0));
</script>
</pre>
</body>
</html>
<html>
<head>
<title>
Operatorul logic ^
</title>
</head>
<body>
<pre>
<script language="JavaScript">
var x=5, y=0;
document.writeln("x=5 y=0\n");
document.writeln("z=true^false => z= ",
z=true^false);
document.writeln("z=x^y => z= ", z=x^y);
document.writeln("z=x^(y^2) => z= ", z=x^(y^2));
document.writeln("z=x^(!y) => z= ", z=x^(!y));
document.writeln("z=1^1 => z= ", z=1^1);
document.writeln("z=(4<=2)^(5>=4)=> z= ",
z=(4<=2)^(5>=4));
document.writeln("z=(x==5)^(y==0)=> z= ",
z=(x==5)^(y==0));
</script>
</pre>
</body>
</html>
<html>
<head>
<title>
Operatorii de atribuire
</title>
</head>
<body>
<pre>
<script language="JavaScript">
var x=2;
y=3;
document.writeln("x=2 y=3\n");
document.writeln("x+=y => x=",x+=y);
document.writeln("x-=y+1 => x=",x-=y+1);
document.writeln("y%=2 => y=",y%=2);
document.writeln("y<<=x => y=",y<<=x);
document.writeln("x>>>=y => y=",x>>>=y);
</script>
</pre>
</body>
</html>
5.4. Instruciuni
n JavaScript instruciunile se clasific n: instruciuni primitive, instruciuni
condiionate (de decizie) i instruciuni repetitive. Instruciunile reprezint aciunile ce trebuiesc
executate pentru a putea obine anumite rezultate.
Instruciunea compus
Pentru cazul n care trebuiesc executate mai multe instruciuni mpreun se utilizeaz
instruciunea compus:
{
instruciune 1;
instruciune 2;
..................
instruciune n;
}
Instruciunea compus se utilizeaz atunci cnd dorim s grupm mai multe
instruciuni, pentru a putea fi executate n ordine.
Instruciunea expresie
O instruciune expresie poate fi: o expresie, o atribuire sau apelul unei funcii.
OBS n acest exemplu am utilizat funcia eval, ce ne permite evaluarea unor date citite de la
tastatur prin intermediul unei csue de dialog. Vom studia acest funcie mai trziu.
Exemplu de utilizare a instruciunii expresie, pentru calcularea mediei aritmetice a dou numere
citite de la tastatur.
<html>
<head>
<title>
Media aritmetica
</title>
</head>
<body>
<pre>
<script language="JavaScript">
document.writeln("Se citesc doua numere x
si y\nSa se afiseze media aritmetica a
lor.");
x=eval(prompt("Dati x:"));
y=eval(prompt("Dati y:"));
document.writeln("x=",x,"\ny=",y);
document.writeln("\nRaspuns:");
ma=(x+y)/2;
document.writeln("Media aritmetica ma=",
ma);
</script>
</pre>
</body>
</html>
<html>
<head>
<title>Instructiunea if</title>
</head>
<body>
<pre>
<script language="JavaScript">
document.writeln("Se citeste un numar
x.\nDaca x<1, F=x-1\n x=1, F=x\n x>1,
F=x+5");
x=eval(prompt("Dati numarul x:"));
document.writeln("Raspuns:");
if (x<1)
document.writeln("F= ",x-1);
else
{
if (x==1)
document.writeln("F= ",x);
else
document.writeln("F= ",x+5);
}
</script>
</pre>
</body></html>
OBS n acest exemplu am utilizat metoda sqrt() ce returneaz rdcina ptrat a unei valori
numerice. Aceasta este o metod a obiectului Math.
Exemplu Se citesc trei numere a, b i c. S se precizeze dac pot fi laturile unui triunghi.
<html>
<head><title>Triunghi</title></head>
<body>
<pre>
<script language="JavaScript">
a=eval(prompt("Dati a="));
b=eval(prompt("Dati b="));
c=eval(prompt("Dati c="));
if((a>0)&&(b>0)&&(c>0)&&(a+b>c)&&(a+c>b)&&(b+
c>a))
document.writeln("Cele trei valori:
",a,",",b,",",c,"\npot fi laturile unui
triunghi");
else
document.writeln("Cele trei valori:
",a,",",b,",",c,"\nNU pot fi laturile unui
triunghi");
</script></pre>
</body></html>
Instruciunea for
Sintaxa pentru instruciunea repetitiv cu numr cunoscut de pai for:
for (val1; cond.;pas) Principiul de execuie este urmtorul:
instruciune - se evalueaz condiia cond.;
- dac se ndeplinete condiia cond. , se incrementeaz
valoarea iniial val1. cu valoarea pasului pas. i se
repet execuia instruciunii pn cnd nu se mai
ndeplinete condiia.
Exemplu de utilizare a instruciunii for. Se vor afia primele numere impare pn la 20.
<html>
<head>
<title>Instructiunea for</title>
</head>
<body>
<pre>
<script language="JavaScript">
var i=1;
document.writeln("Se vor afisa primele\n numere
impare, pana la 20.");
for(i=1; i<=20; i=i+2)
document.writeln(i);
</script>
</pre>
</body></html>
Exemplu Vom afia suma numerelor pare pn la un n citit de la tastatur. Pentru a realiza
acest lucru, am utilizat metoda prompt() ce deschide o fereastr n care se cere
numrul n i funcia eval() ce evalueaz valoarea introdus de ctre utilizator. Datele
de nceput i de sfrit sunt afiate n corpul pagini web.
<html>
<head>
<title>Instructiunea for </title>
</head>
<body>
<pre>
<script language="JavaScript">
document.writeln("Suma numerelor
pare,\npana la un n dat\n");
n=eval(prompt("Dati numarul:"));
var suma=0;
for (i=0; i<=n; i=i+2)
suma=suma+i;
document.writeln("Suma=",suma);
</script>
</pre>
</body>
</html>
<html>
<head>
<title>Instructiunea for</title>
</head>
<body><pre>
<script language="JavaScript">
n=eval(prompt("Dati numarul:"));
var e=0;p=1;
for (i=1; i<=n; i++)
{p=p*i;
e=e+(i*(i+2))/p;}
document.writeln("E=",e);
</script></pre>
Pagini Web cu JavaScript Diana Elena Diaconu
70
</body></html>
Exemplu S se afieze minimul i maximul din n numere citite de la tastatur.
<html>
<head>
<title>
Instructiunea for
</title>
</head>
<body>
<pre>
<script language="JavaScript">
n=eval(prompt("Dati numarul n="));
x=eval(prompt("Dati numarul 1"));
min=x;
max=x;
for (i=2; i<=n; i++)
{
x=eval(prompt("Dati numarul ",i));
if (x<min)
min=x;
if (x>max)
max=x;
}
document.writeln("Elementul
minim=",min);
document.writeln("Elementul
maxim=",max);
</script>
</pre>
</body></html>
Exemplu S se afieze dac un numr citit de la tastatur este prim sau nu. Am utilizat funcia
sqrt() ce returneaz radicalul unui numr.
<html>
<head>
<title>Numar prim</title>
</head>
<body>
<pre>
<script language="JavaScript">
n=eval(prompt("Dati un numar:"));
prim=1;
for(i=2;i<=Math.sqrt(n);i++)
if (n%i==0)
prim=0;
if (prim==1)
document.writeln("Numarul ",n," este
prim.");
else
document.writeln("Numarul ",n," nu este
prim.");
</script>
</pre>
</body>
</html>
Instruciunea while
Sintaxa pentru instruciunea repetitiv cu test iniial i cu numr necunoscut de pai while:
while ( cond.) Principiul de execuie este urmtorul:
instruciune - se evalueaz condiia cond.;
- ct timp se ndeplinete condiia cond., se execut
instruciunea instruciune;
- cnd valoarea condiiei devine 0 (zero), adic fals, se
trece la urmtoarea instruciune.
Pagini Web cu JavaScript Diana Elena Diaconu
71
Exemplu de utilizare a instruciunii while. S se afieze valoarea corespunztoare Unicode
pentru toate numerele introduse de la tastatur, pn cnd introducem cifra zero.
<html>
<head>
<title>Instructiunea while </title>
</head>
<body>
<pre>
<script language="JavaScript">
n=prompt("Dati un numar:","");
while (n!=0)
{
document.writeln("nr=",
n.charCodeAt(0));
n=prompt("Dati un numar:","");
}
</script>
</pre>
</body></html>
Exemplu Se citesc pe rnd cifrele unui numr. S se afieze numrul obinut prin aranjarea
cifrelor n ordinea citirii lor.
<html>
<head>
<title>
Cifre
</title>
</head>
<body>
<pre>
<script language="JavaScript">
var n=0;
x=eval(prompt("Dati prima cifra:"));
while ((x>=0)&&(x<=9))
{
n=n*10+x;
x=eval(prompt("Dati urmatoarea cifra:"));
}
document.writeln("Numarul obtinut este: ",
n);
</script>
</pre>
</body>
</html>
Instruciunea do...while
Sintaxa pentru instruciunea repetitiv cu test final i cu numr necunoscut de pai
do...while:
do Principiul de execuie este urmtorul:
{ - se execut instruciunile;
instruciune 1; - se evalueaz condiia cond.;
instruciune 2; - dac valoarea rezultat este diferit de zero (adevrat),
.. se repet execuia instruciunii pn cnd aceasta
instruciune n;
devine zero (fals);
}
while ( cond.) - se trece la instruciunea urmtoare
Exemplu Se citete un numr natural pozitiv. S se afieze cte cifre conine numrul.
<html>
<head>
<title>Nr. cifre</title>
</head>
<body>
<pre>
<script language="JavaScript">
var s=0;
n=eval(prompt("Dati un numar:"));
x=n;
if (n>=0)
{ sau
do
{ n=Math.floor(n/10);
s++; }
while (n!=0)
document.writeln("Numarul ",x," are
",s," cifre.");
}
else
document.writeln("Numarul ",x," nu
este pozitiv.");
</script>
</pre>
</body>
</html>
Evaluare
Funcii JavaScript
Obiective:
- s neleag noiunea de funcie JavaScript
- s poat utiliza o funcie JavaScript acolo unde este necesar.
- s neleag noiunile de apelare i parametrii ai funciilor
- s poat crea un script ce utilizeaz funcii predefinite JavaScript
6.1. Introducere
Atunci cnd dorim ca pagina Web s ndeplineasc o anumit cerin, crem o
funcie JavaScript ce va avea ca scop executarea acelei cerine. Funciile JavaScript le putem
crea noi sau putem utiliza funcii predefinite ale limbajului, cum ar fi: escape(), eval(), pe care o
s le studiem n acest capitol. Apelarea unei funcii se face prin numele ei, atunci cnd este
necesar. O funcie poate fi poziionat n partea de sus a paginii, adic n antet sau n exterior,
ntr-un alt fiier.
Pentru a rezolva problema din exemplul de mai jos, am apelat funcia cmmdc, care,
pentru a returna cel mai mare divizor comun dintre dou valori x i y primite ca parametri, se
autoapeleaz pn cnd se ndeplinete condiia y=0. Autoapelarea unei funcii poart numele
de recursivitate.
Exemplu de utilizare a unei funcii JavaScript n head. Se citesc dou numere naturale de la
tastatur. S se afieze cel mai mare divizor comun al celor dou numere, utiliznd
algoritmul lui Euclid.
<html>
<head>
<title>
Functie JavaScript in head
</title>
<script language="JavaScript">
Pagini Web cu JavaScript Diana Elena Diaconu
77
function cmmdc(x,y)
{ if (y==0)
return x;
else
return cmmdc(y,x%y); }
</script>
</head>
<body><pre>
<script language="JavaScript">
x=eval(prompt("Dati primul numar:"));
y=eval(prompt("Dati al doilea numar:"));
document.writeln("cmmdc= ",cmmdc(x,y));
</script>
</pre>
</body></html>
OBS n exemplul de mai sus am utilizat return pentru a ntoarce un rezultat prin numele
funciei.
Exemplu de utilizare a unei funcii JavaScript exterioar. Pentru aceasta, se creaz o funcie
simpl, ca cea de mai jos, care se salveaz cu extensia .js. n cazul nostru, am
salvat fiierul cu numele ff.js.
function f()
{
alert('Salutari dintr-un script
exterior!');
}
Exemplu n acest exemplu avem funcia culori, care va putea fi apelat de mai multe ori,
pentru valori diferite. Dac dm click pe butonul pe care scrie Rosu, se va transmite
funciei prin variabila x, valoarea Red. Aceast valoare va defini culoarea de fundal
a unei pagini Web.
<html>
<head>
<title>Functii</title>
<script type="text/JavaScript">
function culori(x)
{
document.writeln("<body bgcolor="+x+">");
document.writeln("Pagina cu fundal de culori
diferite.");
}
</script>
</head>
<body>
<form>
Dati click pe un buton pentru a afisa <br />o
Exemplu Un exemplu similar cu cel de mai sus, dar n care avem doi parametri transmii la
apelul realizat de ctre evenimentul onClick. Cei doi parametri vor modifica valorile
implicite ale culorii fundalului i textului.
<html>
<head>
<title>Functii</title>
<script type="text/JavaScript">
function culori(x,y)
{
document.writeln("<body bgcolor="+x+" text =
"+y+">");
document.writeln("<b> Pagina cu fundal si text
<br /> de culori diferite.");
}
</script>
</head>
<body>
<form>
Dati click pe un buton pentru a afisa <br /> o
culoare diferita a fundalului si a<br />
textului<br /><br />
<input type="button" onclick=
"culori('Red','blue')" value="Rosu">
<input type="button" onclick=
"culori('black','Yellow')" value="Galben">
<input type="button" onclick="culori('green')"
value="Albastru">
</form>
</body>
</html>
Exemplu n acest exemplu, se apeleaz funcia lista din interiorul unei instruciuni de afiare,
prin lista(U, Primavara, "Vara", "Toamna", "Iarna"). La execuia funciei, se parcurg
parametri cu ajutorul arguments.length. Parametrul U de la apel se introduce n
funcie pentru a afia o list neordonat (Unordered Lists) UL. Pentru a afia o list
ordonat, trebuie s nlocuim U cu O, de la Ordered lists.
Exemplu Un exemplu asemntor cu cel de mai sus, dar n care aceeai funcie va putea fi
apelat de mai multe ori, pentru a realiza calcularea mediei cu mai muli sau mai
puini parametri.
<html>
<head>
<title>
Functii cu mai multi parametri
</title>
<script type="text/JavaScript">
function medie()
{
var s = 0
for(var i=0; i<arguments.length; i++)
s=s+arguments[i] ;
var ma=s/arguments.length
alert(ma);
}
</script>
</head>
<body>
<pre>
<form>
Dati click pe un buton pentru a afisa media
aritmetica
<br /><br />
(1+2+3)/3= <input type="button" onclick=
"medie(1,2,3)" value="Apasati!">
(2+4-6+8)/4= <input type="button" onclick=
"medie(2,4,-6,8)" value="Apasati!">
(2+6+7+33-72)/5= <input type="button" onclick=
"medie(2,6,7,33,-72)"
value="Apasati!">
</form>
</pre>
</body>
</html>
Exemplu Se transform mai nti caracterul $ n codul ASCII corespunztor i napoi din codul
ASCII n caracterul iniial. Dup aceasta, se transform un ir de caractere n codul
ASCII corespunztor i invers.
<html>
<head>
<title>Functiile escape() si unescape() </title>
</head>
<body>
<pre>
<script language="JavaScript">
x=escape("$");
document.writeln("Codul ASCII al caracterului $ este: "+x);
y=unescape(x);
document.writeln("unescape("+x+") este: "+y);
document.writeln("La fel si pentru: ");
x=escape("~!#^");
document.writeln("Codurile ASCII ale caracterelor ~!#^ sunt: "+x);
y=unescape(x);
document.writeln("unescape("+x+") este: "+y);
</script>
</pre>
</body>
</html>
Scriptul FTR.js este cel de mai jos. n acest script avem dou funcii: Transform(),
care transform caracterele n coduri ASCII i ReTransform() care convertete codurile ASCII n
caracterele introduse iniial.
function Transform()
{
cod = escape(x.tr.value);
cod = cod.replace(/\//g,"%2F");
cod = cod.replace(/\?/g,"%3F");
cod = cod.replace(/=/g,"%3D");
cod = cod.replace(/&/g,"%26");
cod = cod.replace(/@/g,"%40");
x.re_tr.value = cod;
}
function ReTransform()
{
RTr.innerHTML =
unescape(x.re_tr.value);
}
1 pentru k = 0 sau k = n
C = k 1
k
n
C
n 1 + C k
n 1 pentru k = 1, 2 , ...n 1
Exemplu Am utilizat pentru verificarea funciei isFinite(), att numere ce au zecimale finite, ct
i numere ale cror zecimale nu sunt ntr-un numr finit.
<html>
<head>
<title>
Functia isFinite()
</title>
</head>
<body>
<pre>
<script type="text/JavaScript">
document.writeln("isFinite(2)="+isFinite(2));
document.writeln("isFinite(2.12345)= "+
isFinite(2.12345));
document.writeln("isFinite(Math.pi)= "+
isFinite(Math.pi));
var x=2/5;
document.writeln("x=2/5 <br />
isFinite(Math.x))= "+isFinite(Math.x));
</script>
</pre>
</body>
</html>
Funcia isNaN() evalueaz argumentul pentru a determina dac este numr sau nu. n cazul n
care argumentul este numr, returneaz false, altfel returneaz true.
Exemplu de utilizare a funciei isNaN().
<html>
<head>
<title>
Functia isNaN()
</title>
</head>
<body>
<pre>
<script type="text/JavaScript">
document.writeln("isNaN(2)="+isNaN(2));
document.writeln("x=2/5 <br />
isNaN(Math.x)="+isNaN(Math.x));
document.writeln("isNaN(Math.pi)="+isNaN(Math.pi));
document.writeln("isNaN(3.2345)="+isNaN(3.2345));
document.writeln("isNaN(3,2345)="+isNaN(3,2345));
document.writeln("isNaN('cuvant')="+isNaN('cuvant')
);
</script>
</pre>
</body>
</html>
<html>
<head>
<title>Functia parseFloat()</title>
</head>
<body>
<pre>
<script type="text/JavaScript">
document.writeln("parseFloat(2)="+parseFloat(2));
document.writeln("parseFloat(-1.45)="+parseFloat(-1.45));
document.writeln("parseFloat(+1.45)="+parseFloat(+1.45));
document.writeln("parseFloat(-1450e-3)="+parseFloat(-1450e-3));
document.writeln("parseFloat(-0.0145E+2)="+parseFloat(-0.0145E+2));
var x=2/3;
document.writeln("x=2/3 <br /> parseFloat(x)="+parseFloat(x));
document.writeln("parseFloat(3.2345)="+parseFloat(3.2345));
document.writeln("parseFloat(3,2345)="+parseFloat(3,2345));
document.writeln("parseFloat('cuvant')="+parseFloat('cuvant'));
</script>
</pre>
</body>
</html>
Funcia parseInt() transform un ir de caractere ntr-un numr de tip Int. Lng irul de
caractere, poate fi specificat baza de numeraie din care va fi transformat n baza 10. Cu
ajutorul funciei parseInt(), putem transforma un numr din bazele de numeraie 2, 8, 10, 16, n
baza 10, dac va fi specificat baza din care va fi transformat numrul. Dac primul caracter din
ir nu este numr, sau dac nu va fi specificat corect baza de numeraie, funcia va returna
NaN (adic Not a Number).
Sintaxa: parseInt ( ir de caractere[,baza de numeraie] )
Exemplu n urmtorul exemplu transformm un numr citit de la tastatur, din baza 2 n baza
10. Pentru aceasta, am transformat numrul cu parseInt i am verificat cu isNaN,
dac ceea ce a tastat utilizatorul este sau nu numr.
<html>
<head>
<title>Functia parseInt</title>
<script language="JavaScript">
function t(x)
{ y=parseInt(x,2);
if (isNaN(y))
document.writeln("Nu ati tastat un
numar in baza 2!");
else
document.writeln("Numarul transformat
\nin baza 10 este:<b> ",y,"</b>");
}
</script></head>
<body><pre>
<script language="JavaScript">
x=eval(prompt("Dati un numar in baza
2:"));
t(x);
</script></pre>
</body></html>
Funcia String() transform un obiect specificat ntr-un String (ir de caractere). Dac obiectul
este Date, funcia va returna un ir de caractere ce reprezint data calendaristic, dup cum
putem vedea n exemplul de mai jos.
Sintaxa: String (obiect )
Exemplu Funcia transform parametrul introdus, n ir de caractere.
<html>
<head>
<title>functii si stiluri</title>
<style>
.s1
{ font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #006633;
background-color: #91FFC8;
}
.s2
{ font-family: Georgia, Times New Roman, Times, serif;
font-size: 16px;
color: #990000;
background-color: #FF8282;
}
.s3
{ font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #3333FF;
Pagini Web cu JavaScript Diana Elena Diaconu
89
background-color: #9B9BFF;
}
</style>
<script>
function f1()
{
var reg=/\n/g;
var getElementById=document.formular.ta.value;
y=getElementById.replace(reg,"<BR>");
document.getElementById("target").innerHTML=y;
}
var t=0;
var a=new Array("s1","s2","s3");
function f2()
{
t=0;
document.getElementById("abc").className=a[t];
}
function f3()
{
t=1;
document.getElementById("abc").className=a[t];
}
function f4()
{
t=2;
document.getElementById("abc").className=a[t];
}
function f()
{
document.getElementById("target").className=document.
getElementById("abc").className;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div id=target class=s2>Scrieti un text si dati click!
</div>
</td>
</tr>
</table>
<form name=formular>
<textarea name=ta class=s1 id=abc>
Spune, inimioară
Ienachită Văcărescu
</textarea>
<br />
Scrieti un text si dati click.
<input type=button value="Apasati!" onclick="f1()"><br />
Alegeti un stil si dati click.
Pagini Web cu JavaScript Diana Elena Diaconu
90
<input type=button value="Stil 1" onclick="f2()"><br />
Alegeti alt stil si dati click.
<input type=button value="Stil 2" onclick="f3()"><br />
Alegeti alt stil si dati click.
<input type=button value="Stil 3" onclick="f4()"><br />
Dati click pentru a utiliza stilul.
<input type=button value="click" onclick="f()"><br />
</form>
</body>
</html>
document.all.a2.style.color="#FF3C3C"
document.all.a2.style.fontStyle="oblique"
document.all.a2.style.textAlign="left"
document.all.a2.style.marginTop="12px"
document.all.a3.style.color="red"
document.all.a3.style.fontWeight="bold"
document.all.a3.style.fontStyle="normal"
document.all.a3.style.textAlign="right"
document.all.a3.style.marginTop="12px"
}
</script>
</head>
<body>
<div id=a1>Ce albaştri sunt</div>
<div id=a2>
Vremea a zburat,<br />
Tu nu te-ai schimbat...<br />
Cum ai făcut?<br />
Mă priveşti mirată<br />
Si imbujorată<br />
Ca la-nceput...<br /></div>
<div id=a3>Alexandru Andrieş</div>
<br><a href="#" onClick="f();return
false">Dati click pentru a vedea pagina cu CSS
in Internet Explorer!</a>
</body>
</html>