Curs HTML

Monkey Member HTML and Java Training Course
HTML INTRODUCERE
Ce este World Wide Web?
World Wide Web este un network de resource informative . El se bazeaza pe trei mecanisme pentru a face aceste resurse
utile pentru o audieta larga.
1. O forma uniforma de notatii pentru a pozitiona resursele pe Web.
2. Protocoale pentru a accesa resursele pe Web (ex. HTTP).
3. Hypertext, este o modalitate usoara de navigare (HTML).
Introducere in URL-uri
Fiecare resursa care se gaseste pe Web document HTML, imagine, video clip si program are o adresa care se numeste
URL si anume Universal Resourse Identifier sau pe scurt URL.
Aceasta are trei parti importante:
1. O schema de numire care ne permite sa accesam usor aceea resursa
2. Numele masini pe care se gaseste resursa
3. Numele resursei respective dindu-se un path pina la resursa respectiva
Sa consideram urmatoarea resursa URL necesara pentru a descrie urmatoare specificatie HTML:
http://www.ecadro.com/cursuri/javahtml/
Aceasta linie trebuie citita in felul urmator : Acesta este un document care se gaseste pe internet via HTTP si care se
gaseste mai exact pe masina www.ecadro.com in urmatorul director : /cursuri/javahtml/. Celalate scheme care se pot gasi pe un
document HTML include adrese de tipul mailto pentru e-mail si ftp pentru FTP.
Sa consideram mai jos un cod de URL care contine si o adresa de casuta postala:
aici avem un paragraf care contine text
Pentru comentarii referitoare la cele referite anterior va rugam sa trimiteti un e-mail
la urmatoarea adresa :
<A href=mailto:epopa@ecadrocom.com> Emilian Popa </A>
Identificarea fragmentului din text
Citeva URL se refera la identificarea unei resurse . Acest tip de URL se termina cu caracterul #urmat de o ancora care
se numeste identificator de fragment. De exemplu sa consideram un URL care duce la sectiunea section_2 :
http://www.ecadro.com/html/top.html#section_2
URL Relative
Engineering and Drafting Service SRL

Bulevardul Decebal Bl. U12 sc. 1 ap.10 Dolj Craiova 1100 011-40-51-437231 ecad@ecadro.com
Confidential
Page 1
3/25/2016
Un URL relativ nu contine nici o informatiei . Si in path se refera la resursa care se gaseste pe aceeasi masina. Sa
consideram un exemplu:
Astfel daca vom avea urmatoarea adresa URL http://www.ecadro.com/support/intro.html, atunci un URL relativ la
aceasta adresa va fi: <A href=supplieres.html>Suppliers</A> care de fapt se refera la urmatoarea adresa URL :
http://www.ecadro.com/support/suppliers.html
Un alt exemplu il consitituie o adresa de genul:
<IMG src=../icons/logo.gif alt=logo> care de fapt se refera la urmatoarea adresa de URL:
http://www.ecadro.com/icons/logo.gif
In limbajul HTML un URL este folosit pentru:
link la o alta resursa sau document

link la un fisier de style exterior sau la un script
Include imaginii, obiecte si applets in pagina
Creeaza o harta de imagine
Trimite o forma
Creaza un document frame
Citeste o referinta externa
Vom prezenta in continuare resursele URL care se gasesc pe internet:
Protocol
Accesabilitate
http://
Documente HTML
Documente HTML secrete (cu
grad de secURLtate ridicat)
Documente HTML pe hard
discul computerului tau
Site FTP si fisiere
Meniu Gopher si documente
GrupURL de discutie
GrupURL de discutie
Mesaje e-mail
Sesiune telnet la distanta
https://
file://
fpt://
gopher://
news://
news:
mailto:
telnet:
Ce este HTML ?
Pentru a publica o informatiei pe intreg globul, a fost nevoie de o limba universala, care sa fie folosita pentru aceast
task si pe care toate computerele de pe glob sa o inteleaga. Astfel pentru Wold Wide Web a fost aleasa drept limba de
comunicare limbajul HTML care este prescurtarea de la : Hyper Text Markup Language.
Acest limbaj le permite autorilor sa :
Publice documente on-line care sa contina, texte, tablele si imagini, etc.

Sa aduca online informatii folosind hypertext link-uri, si o apasare de mouse

Confidential
Page 2
3/25/2016
Sa proiecteze forme care sa fie folosite pentru a face tranzatii cu computere de pe retea, si pentru a cauta informatii,
pentru a face rezervarii si pentru a cumpara produse.
Istoria limbajului HTML pe scurt

HTML a fost dezvoltat de Tim Berners-Lee cind lucra pentru CERN, si a fost introdus pe browserul Mosaic dezvoltat de
NCSA. El a devenit foarte cunoscut incepind cu anul 1990 odata cu cresterea imensa a internetului. In acest timp
HTML-ul a fost dezvoltat in mai multe moduri.
Sub tutela firmei Internet Engineering Task Force a fost dezvoltat HTML 2.0. Pina in ianuarie 1997 au fost dezvoltate
noi versiuni de HTML ajugindu-se la versiunea 3.2.
Foarte multi oameni au fost de acored ca acest limbaj trebui sa poate fi citit de cit mai multe programe si sa fie acelasi
pe orice platforma existenta . Aceasta va duce la micsorarea costurilor pentru cei care dezvolta internetul pentru ca vor
trebui sa realizeze o singura versiune si nu va mai fi nevoie sa realizeze cite o versiune pentru fiecare browser.
HTML a fost dezvoltat cu viziunea ca toate devicele care exista la ora actuala sa poata citi informatie de pe Web si aici
putem aminti: PCs cu ecrane grafice avind diferite rezolutii si adincime a culori, telefoane celulare etc.
HTML 4.0
HTML 4.0 duce la extensia limbajului HTML cu mecanisme despre stiulul pagini, script, framuri si alte obiecte, de
asemenea s-au introdus facilitati care sa suporte textul de la dreapta la stinga, de a creea tabele si de a realiza forme care
sa poate fi folosite de oameni cu probleme.
Internationalizarea
Aceasta versiune de HTML a fost scrisa de experti in cimpul international, astfel ca aceste documente sa poata fi scrise
in orice limba si transportate de a lungul intregului glob (odata cu adoptarea RFC2070).
Un important pas a fost realizat odata cu adoptarea stasului ISO/IEC: 10646 care se refera la documente HTML si de
fapt a fost primul document care se referea la caracteristici cum ar fi: caractere internationale, directia textului,
punctuatia, si alte probleme globare.
Accesabilitatea
Odata cu cresterea comunitati Web si odata ce membri isi diversifica abilitatile si aptitudinele, este crucial sa se aduca
tehnologia pe o linie care sa fie apropiata de necesitatiile acestora. HTML a fost de a semenea dezvoltat in versiunea 4.0
sa ajute pe cei care au probleme fizice. Aceste optiuni care au fost introduse incepind cu versiunea 4.0 cuprind:
o mai buna distinctie intre structura documentului si prezentarea, folosindu-se mai mult pagini de stil in loc sa se
foloseasca elemente de prezentare HTML si atribute.
Forme mai bune, incluzind si chei de acesabilitate si denumiri active
Abilitatea de a afisa o descriere a obiectului selectat
Posibilitatea de a crea harta unei imagini si de a pune linkuri pe portiuni de imagine
A fost extinsa comanda table
Posibilitatea a folosi o descriere lunga pentru tabele, imagini si framuri.

Confidential
Page 3
3/25/2016
Cred ca acest capitol va captat atentia si a aparut curiozitatea pentru acest nou domeniu care va permite sa lucrati intr-o
o noua lume a informatici si anume WWW.
Text si Grafica pe Web

Odata cu desvoltarea celor doi browseri care exista in acest moment Netscape si IE a fost posibil sa se realizeze link-uri
la fisiere audio, la fisier video si fisiere in diverse formate grafice. Aceste fisiere pot fi trimise pe Web de catre server la
fel de usor ca si un fisier avind formatul HTML. Vom prezenta in continuare cele mai folosite formate multimedia:
Formatul Fisierului
Tipul Fisierului
Extensia
Sun Systems sound

Windows sound
Audio Interchange
MPEG audio
SoundBlaster VOiCe
RealAudio
CompuServe GIF
JPEG(compresat)
TIFF
Windows Bitmap
Apple Picture
VRML
MPEG video
QuickTime
Video for Windows
Macromedia Shockwave
ASCII text
Postscript
Adode Acrobat
Fractal Animation
audio
audio
audio
audio
audio
audio
grafica
grafica
grafica
grafica
grafica
animatie 3D
video
video
video
prezentare multimedia
text
text formatat
text formatat
grafica
.au
.wav
.aiff,.aifc
.mpg,.mpeg
.voc
.ra,.ram
.giff
.jpeg,.jpeg
.tif,.tiff
.bmp
.pict
.wrl
.mpg,.mpeg
.mov,.moov,.qt
.avi
.dcr
.txt,.text
.ps
.pdf
.fli,.flc
Servicii internet si adrese

Pe linga faptul ca poate transfera cu usURLnta fisiere avind formatele de mai sus Internetul este renumit prin faptul ca
poate accesa cu usurinta alte servicii cum ar fi: e-mail, newgroups, servere ftp etc. Vom incerca in continuare sa
explicam modul cum o adresa este codificata de catre serverele internet:
Dupa cum se stie serviciul e-mail este folosit pentru a trimite fisiere text (ASCII) intre doi utilizatori ai serviciului
internet. Astfel daca un utilizator a trimis un mesaj catre un alt utilizator al serviciilor internet atunci acest mesaj a ajuns
intr-o casuta de pe un server internet pe care o are cel de al doilea utilizator si de aici acesta poate sa citeasca, sa
raspunda, sau sa trimita mesajul unei alte persoane.
Formatul general al unei adrese de internet este:
username@host-sub-domeniu. server
unde:
Confidential
Page 4
3/25/2016
username este numele utilizatorului serviciului internet, de exemplu username-ul meu (acountul meu) este epopa
host-sub-domeniu este o parte a serverului HTML (optionala)
server este serverul HTML (gazda)
Un exemplu de adresa de e-mail este epopa@mail.worldnet.net sau epopa@mci.com.

Se observa ca ultima parte a adresei seamna cu extensia unui fisier si ne spune ce server este cel pe care il foloseste
utilizatorul . Astfel vom incerca in continuare sa prezentam cele mai utilizate servere:
Tipul Serverului
(domeniului)
Tipul Organizatiei
.com
.edu
.org
.net
.gov
.mil
.ca
.ro
Comercial
Educational
Organizatie/Asociatie
Retea de computere
Server al Guvernului
Server Militar
Server Canadian
Server Romanesc
Pentru a intelege mai bine ce este un server si ce sunt subdomeniile putem face analogia cu o petrecere in care gazda
invita foarte multi invitati. Cei care se ocupa de invitati sunt cei care servers si ei trebuie sa asculte ce le spune gazca
care controleaza petrecerea. La fel si serverul (gazda) are in control mai multe sub-domenii care contin informatii si pe
care le controleaza. Astfel pot fi servere care au numai fisierele HTML, pot fi servere care au serviciu ftp si care dau
fisierele mai largi si pot fi servere care duc la bun sfirsit serviciu de e-mail sau grupuri de discutie.
Un server trebuie inteles ca fiind un computer pe care se gasesc software care permit trimiterea de pagini HTML si alte
formate pe care le-am aratat anterior. Acest server trebuie sa aiba o conecxiune rapida la internet care sa permita
trimiterea si primirea a mai multor date in acelasi timp. Acest flux de date este masurat in bps adica bites pe secunde si
se traduce ca fiind numarul de bites pe care acel server il poate trimite intr-o secunda. Vom prezenta in continuare
tipurile de conexiuni la internet posibile si rata de transfer a accestora:
Viteza conexiuni
Technologia folosita
14.4/28.8 Kbps/56Kbps
56Kbps
64 Kbps
128 Kbps
<1.5 Mbps
1.5 Mbps
45 Mbps
Modemuri
Linie de 56Kbps
Canal ISDN Single-B
Rata ISDN de baza
Rata primara ISDN
Linie dedicata T-1
Linie dedicata T-3
Introducere in HTML
HTML este un sistem care se foloseste pentru a defini o harta a unui document. Aceasta harta cuprinde structura
documentului, prezentarea si alte informatii care vor apare odata cu creerea documentului de catre browserul care citeste
acest document.
Vom prezenta mai jos un exemplu de document HTML :
Confidential
Page 5
3/25/2016
<HTML>
<HEAD>
<TITLE>Acesta este primul document HTML</TITLE>
</HEAD>
<BODY>
<P> Bine v-am gasit pe Web !
</BODY>
</HTML>
Se observa ca un document este impartit in mai multe sectiuni o astfel de sectiune este <HEAD></HEAD> care este
partea de sus a domunetului si <BODY></BODY> care este corpul documentului . In partea de sus a documentului se observa ca
apare titlu documentului iar in corpul documentului apare continutul documentului .
Seminar:
1.
2.
3.
4.
5.
In directorul dumneavoastra creati un fisier primul.html

Deschideti-l folosind aplicatia NotePad
Tasta-ti textul de mai sus
Salvati documentul
Deschideti din nou documentul folosind MS IE sau Netscape.
Linie orizontala
Pentru a introduce o linie orizontala intr-un fisier HTML se foloseste tag-ul <HR> Acest tag poate avea la rindul lui
urmatoarele atribute:
align=left | right |center care permite aliniarea linie la stinga ecranului, la dreapta sau in centru (implicit este
align=center);
noshade linia nu va avea umbra;
size = pixels ne da marimea latimi liniei in pixeli ;
width = procent este lungimea liniei referitoare la ecran in procente; 100% este implicit;
color = nume culoare seteaza culoarea liniei; exemplu color=blue;
<html>
<head>
<title>Folosirea liniei intr-un fisier HTML</title>
</head>
<body>
Linie avind lungimea egala cu latimea ecranului.
<HR>
Linie avind lungimea egala cu 50% din latimea ecranului.
<HR width=50%>
Linie avind lungimea egala cu 50% din latimea ecranului aliniata la stinga.
<HR align=left width=50%>
Linie avind lungimea egala cu 50% din latimea ecranului aliniata central.
<HR align=center width=50%>
Linie avind lungimea egala cu 50% din latimea ecranului aliniata la dreapta.
<HR align=right width=50%>
Linie cu grosime de 10 pixeli fara umbra.
<HR size=10 noshade>
Confidential
Page 6
3/25/2016
Linie cu grosime de 5 pixeli cu umbra.

<HR size=5>
</body>
</html>
Seminar
1. Creati un fisier linie.html
2. Editati acest fisier folosind notepad.exe.
3. Introduceti codul de mai sus.
4. Salvati fisierul .
5. Folositi IE sau Netscape pentru a vedea rezultatele in browser.
Paragraf
Un paragraf in limbajul HTML se introduce folosind perechea de taguri <p> si </p> . El se introduce intotdeauna intre
perechea de taguri <body> si </body>.
Vom considera in continuare un exemplu de paragraf:
<html>
<head>
<title>Primul nostru pargraf</title>
</head>
<body>
<p>
Aici vom introduce textul pentru paragraful nostru. Nu conteaza cit de mare este, cite spatii
au fost folosite intre cuvinte si cind am decis sa apas tasta return. El va creea un alt paragraf numai
atunci cind vom folosi alte doua combinatii de taste p si /p..
</p>
<p>
Aici am introdus un alt paragraf .
</p>
</body>
</html>
Trecere la linie noua <BR>
doua
S-a observat in cazul anterior ca browser-ul nu tine cont de tasta <Return> atunci cind a fost apasata intre cele
tag-uri <p> si </p>.
Vom considera in continuare un exemplu pentru a intelege mai bine aceasta problema:
<html>
<head>
<title>Folosirea paragrafului</title>
</head>
<body>
<p>
Emilian Popa
Calea Bucuresti
Craiova
Confidential
Page 7
3/25/2016
Romania
</p>
</body>
</html>
Daca vom bate acest text intr-un editor si vom folosi IE sau Netscape pentru a observa rezultatele vom obtine:
Emilian Popa Calea Bucuresti Craiova Romania
Se observa ca in acest caz browser-ul nu a tinut cont de modul cum am asezat noi text-ul intre cele doua taguri
<p> si </p>. El a pus cuvintele in ordine fara a tine cont de linii si anume nu a tinut cont de spatiile intre cuvinte si de
tasta Return. Pentru a inlatura aceasta problema in limbajul HTML a fost introdusa comanda <HR> care are drept scop
trecerea la linia urmatoare in cadru unui document. In acet caz codul sursa HTML va arata astfel:
<html>
<head>
<title>Folosirea paragrafului</title>
</head>
<body>
<p>
Emilian Popa <BR>
Calea Bucuresti <BR>
Craiova <BR>
Romania <BR>
</p>
</body>
</html>
Seminar
1. Creati un fisier p1.html folosind notepad.exe
2. Introduceti codul din primul exemplu al acestui paragraf
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vizualiza fisierul HTML
5. Editati fisierul folosind notepad.exe si faceti modificarile din exemplu de mai sus
6. Salvati fisierul
7. Folositi IE sau Netscape pentru a vizualiza fisierul HTML.
Alignierea obiectelor intr-o pagina HTML

Obiectele pot fi aligniate intr-o pagina HTML folosind perechi de tag-uri cum ar fi:
<left></left>
<right></right>
<center></center>
- acest tag va alignia toate obiectele care sunt intre cele doua tag-uri la stinga pagini
- acest tag va alignia toate obiectele care sunt cuprinse intre cele doua tag-uri la
dreapta pagini.
- acest tag va alignia toate obiectele cuprinse intre cele doua tag-uriin centru pagini

Confidential
Page 8
3/25/2016
Codul sursa este urmatorul:

<html>
<head>
<title>Folosirea tagurilor de aliginiere</title>
</head>
<body>
<center>
<p>Acest text este aligniat central.</p>
</center>
<left>
<p>Acest text este aligniat la stinga. </p>
</left>
<right>
<p>Aceast text este aligniat la dreapta. </p>
</right>
</body>
</html>
Seminar
1. Creati un fisier a1.html folosind notepad.exe
2. Introduceti codul de mai sus
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vizualiza fisierul HTML.
Caractere de referinta
Caracterele de referinta sunt nume simbolice si numerice pentru anumite caractere care pot fi incluse in codul HTML.
Aceaste caractere sunt recunoscute dupa faptul ca incep cu carcaterul (&) si se termina folosind caracterul (;).
&lt reprezinta semnul <

&gt reprezinta semnul >
&quot reprezinta caracterul
&#229 in zecimal reprezinta caracterul a cu un cerc deasupra lui
este spatiul ASCII
&#x0009 este tab-ul ASCII
&nbsp pentru spatiu
&copy pentru semnul de copyright
&reg pentru semnul de registrat
&#36 pentru semnul dolarului
&#37 pentru semnul procentului
&#177 pentru semnul plus minus
&#188 pentru fractia 1/4
<html>
<head>
Folosirea de caractere speciale
Confidential
Page 9
3/25/2016
</head>
<body>
<p>
< - caracterul mai mic<br>
> - caracterul mai mare<br>
" - caracterul "<br>
å - caracterul 229<br>
È - caracterul 200<br>
- caracterul tab ASCII<br>
- caracterul spatiu<br>
© - carcaterul copyright<br>
® - caracterul marca registrata
</p>
</body>
</html>
Seminar
1. Creati un fisier car.html folosind notepad.exe
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vizualiza fisierul
Linia de comentarii
Pentru a introduce o linie de comentarii intr-un fisier HTML se foloseste urmatorul format:

Vom prezenta in continuare un exemplu de fisier HTML care foloseste linie de comentariu:
<html>
<head>
<title>Folosirea liniei de comentariu</title>
</head>
<body>
<p>Vom prezenta in continuare modul de realizare a unei linii de comentariu.</p>
<-- Aceasta este o linie de comentariu -->
</body>
</html>
Seminar
1. Creati un fisier com.html
2. Introduceti textul de mai sus
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vedea cum arata acest fisier.
Formatarea textului folosind tag-urile pentru hedere

O problema pe care ne-o punem atunci cind folosim limbajul HTML este cum introducem mai multe tipuri de text intrun document. De aceea au fost creati implicit sase hedere:
Confidential
Page 10
3/25/2016
H1 care este cel mai mare text posibil de afisat

H2 care este setul mijlociu din setul mare de text
H3 este cel mai mic set din seturile mari
H4 are acceasi marime ca si textul regulat dar este mai pronuntat
H5 este urmatorul ca marime in setul mic dar este mai mic decit text-ul regulat
H6 este cel mai mic text posibil
Vom considera urmatorul exemplu pentru a exemplifica toate aceste subset-uri de hedere posibile intr-un fisier HTML:
<html>
<head>
<title>Folosirea hedere-lor</title>
</head>
<body>
<H1>Acest text a fost scris folosind heder-ul H1</H1><br>
<p>Acesta este un text simplu.</p>
<H4>Acest text a fost scris folosind heder-ul H4</H4>
</body>
</html>
Seminar
1. Creati un fisier text.html
2. Introduceti codul HTML de mai sus
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vedea cum arata fisierul
Modul de afisare a unui text poate de asemenea sa fie controlat folosind urmatoarele perechi de tag-uri:
<B>, </B> - pentru a schimba textul in bold
<I>, </I> - pentru a schimba textul in italic
<U>, </U> - pentru a schimba textul in text subliniat
<EM>, <EM> - va afisa un text de tip italic dar mai puternic
<STRONG>,</STRONG> - va afisa textul sub forma bold
<TT>,</TT> - text monospatiu
Vom prezenta in continuare un fisier in care vom discuta toate aceste tag-uri:
<html>
<head>
<title>Folosirea tagurilor pentru text</title>
</head>
<body>
<p>Aceasta este un text regulat </p><br>
<B>Acesta este un text bold tag B si /B<BR>
<I>Acesta este un text italic- tag I si /I<BR>
<U>Aceasta este un text subliniat tag U si /U<BR>
<EM>Aceasta este un text italic si puternic tag EM si /EM<BR>
Confidential
Page 11
3/25/2016
<STRONG>Acesta este text cu caractere strong tag STRONG si /STRONG.<BR>

<TT>Aceasta este text monospatiu tag TT si /TT.
</body>
</html>
Seminar
1. Creati un fisier text.html
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vizualiza acest fisier text.html
Acestia sunt tag-urile implicite pentru realizarea formatari text-ului dar exista de asemenea si alte tag-uri definite pentru
a defini text cum ar fi de exemplu:
<code>,</code> - textul dintre aceste doua tag-uri va apare in acelasi mod ca si tag-ul TT
<kbd>,</kbd> - textul dintre aceste doua tag-uri va apare in format keyboard
<samp>,</samp> - textul dintre aceste doua tag-uri va apare ca text monospatiu
<var>,</var> - textul dintre aceste doua tag-uri va apare italic
<cite>,</cite> - textul dintre aceste doua tag-uri va fi italic si va reprezenta text din bibliografie
<blockquote>,</blockquote> - un alt mod de a afis un text - paragraf distantat
<dfn>,</dfn> - definitie de termeni text regular
<address>, </address> - text care este folosit pentru a defini o adresa si apare italic
Vom considera in continuare un exemplu in care vom folosi toate aceste perechi de tag-uri:
<html>
<head>
<title>Folosirea altor tag-uri</title>
</head>
<body>
<code>
Acest text a fost creat folosind tag-ul code.<br>
</code>
<kdb>
Acest text a fost creat folosind tag-ul kbd. <br>
</kdb>
<samp>
Aceasta este un text monospatiu folosind tag-ul samp. <br>
</samp>
<var>
Aceast text este italic si a fost folosit tag-ul var. <br>
</var>
<cite>
Aceast text a fost creat folosind tag-ul cite si va apare italic. <br>
</cite>
<blockquote>
Acest text a fost creat tagul blockquote.<br>
</blockquote>
<dfn>
Acest text a fost creat folosind tag-ul dfn.
</dfn>
<br>
Confidential
Page 12
3/25/2016
<address>
Acest text a fost creat folosind tag-ul address.<BR>
Emilian Popa <BR>
Calea Bucuresti<BR>
Craiova <BR>
Dolj<BR>
</address>
</body>
</html>
Seminar
1. Creati fisierul tag.html folosind notepad.exe.
3. salvati fisierul
4. Folositi IE sau Netscape pentru a vizuliza fisierul.
Am vazut ca in cazul paragrafului obisnuit tagurile <p> si </p> spatiile si tastele return sunt ignorate de catre browserul
IE sau Netscape. Sunt insa situatii cind dorim sa avem textul cu un anumit format de aceea a fost introdusa o alta
comanda de formatare si anume perechea de tag-uri <pre> si </pre> .
Mai jos vom considera un exemplu in care vom folosi atit perechea de taguri <p> si </p> cit si perechea de taguri <pre>
si </pre> pentru a obtine un text formatat.
<html>
<head>
<title>Folosirea textului formatat</title>
</head>
<body>
<p>
Singur vintul, colo iata.
Adormise la racoare
Sub o salcie plecata
Somnoros in sus el cata
catre soare.
Mai e mult ! Si ca sa-i fie
Scurta vremea, pina pleaca,
El se uita pe cimpie,
Fluiera si nu mai stie
Ce sa faca.
</p>
<pre>
Singur vintul, colo iata.
Adormise la racoare
Sub o salcie plecata
Somnoros in sus el cata
catre soare.
Mai e mult ! Si ca sa-i fie
Scurta vremea, pina pleaca,
El se uita pe cimpie,
Fluiera si nu mai stie
Confidential
Page 13
3/25/2016
Ce sa faca.
</pre>
<p>
Partea de sus a textului a fost introdus folosind tag-ul <b> p </b> si <b> /p </b> .<br>
</p>
<p>
Partea de jos a textului a fost introdus folosind tag-ul <b> pre </b> si <b> /pre </b> .
</p>
</body>
</html>
Liste ordonate si neordonate tag-urile <OL>, </OL> si <UL>, </UL>

De multe ori intr-un fisier trebuie sa inseram o lista folosind numere- lista care poarta denumirea de lista ordonata si o
lista folosind buline lista care poata denumirea de lista neordonata.
Formatul pentru o lista ordonata este:
<OL>
<LI> Optiunea 1
<LI> Optiunea 2
<LI> Optiunea 3
<LI> Optiunea 4
<LI> Optiunea 5
</OL>
Formatul pentru o lista neordonata este :
<UL>
<LI> Optiunea 1
<LI> Optiunea 2
<LI> Optiunea 3
<LI> Optiunea 4
<LI> Optiunea 5
</UL>
Vom introduce cele doua coduri de liste intr-un fisier HTML:
<html>
<head>
<title>Folosirea listelor ordonate si neordonate</title>
</head>
<body>
<p> Aceasta este o lista ordonata </p> <br>
<OL>
<LI> Optiunea 1
<LI> Optiunea 2
Confidential
Page 14
3/25/2016
<LI> Optiunea 3
<LI> Optiunea 4
<LI> Optiunea 5
</OL>
<br>
<p>Aceasta este o lista neordonata.</p><br>
<UL>
<LI> Optiunea 1
<LI> Optiunea 2
<LI> Optiunea 3
<LI> Optiunea 4
<LI> Optiunea 5
</UL>
</body>
</html>
Seminar
1. Creati un fisier lista.html
2. Introduceti textul de mai sus
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vedea cum arata fisierul respectiv
Exista atribute care pot fi folosite atunci cind definim o lista ordonata:
type = stilul folosit pentru lista poate fi 1,A,a, I, i etc

start=numar acest atribut specifica care este numarul cu care incepe lista implicit este 1
value=number acest atribut seteaza valoarea curenta a elementului listei
Vom prezenta in continuare un exemplu in care o sa folosim toate aceste tipuri de liste:
<html>
<head>
<title>Atributele unei liste ordonate</title>
</head>
<body>
<p>Lista implicita</b><br>
<OL>
<LI> Opt 1
<LI> Opt 2
<LI> Opt 3
<LI> Opt 4
<LI> Opt 5
</OL>
<p>Lista care incepe cu numarul 4</p><br>
<OL start=4>
<LI> Opt 1
<LI> Opt 2
<LI> Opt 3
<LI> Opt 4
<LI> Opt 5
</OL>
<p>Lista care foloseste cifre romana</p>
Confidential
Page 15
3/25/2016
<OL type=I>
<LI> Opt 1
<LI> Opt 2
<LI> Opt 3
<LI value=10> Opt 4
<LI> Opt 5
</OL>
</body>
Seminar
1. Creati un fisier ol.html
3. Salvati fisierul
Lista neordonata are urmatorul atribut:
type care poate fi disc, square si circle
<html>
<head>
<title>Atributele unei liste ordonate</title>
</head>
<body>
<p>Lista implicita type=disc</b><br>
<UL type=disc>
<LI> Opt 1
<LI> Opt 2
<LI> Opt 3
<LI> Opt 4
<LI> Opt 5
</UL>
<p>Lista cu atributul type=square</p><br>
<UL type=square>
<LI> Opt 1
<LI> Opt 2
<LI> Opt 3
<LI> Opt 4
<LI> Opt 5
</UL>
<p>Lista cu atributul type=circle</p>
<UL type=circle>
<LI> Opt 1
<LI> Opt 2
<LI> Opt 3
<LI> Opt 4
<LI> Opt 5
</UL>
</body>
</html>

Confidential
Page 16
3/25/2016
Seminar
1. Creati fisierul ul1.html folosind notepad.exe
3. Salvati fisierul
Liste de definitii
Vom prezenta in continuare un mod de definire a unei liste:
<DL>
<DT> Administrator
<DD> O persoana care administreaza bunurile unei firne
<DT> Contabil
<DD>O persona care administreaza contabilitatea unei firme
<DT>Director Technic
<DD>O persoana care conduce din punct de vedere tehnic o companie
<DT>Director General
<DD>O persoana care conduce o anumita companie.
</DL>
<HTML>
<HEAD>
<TITLE>Folosirea unei liste definite</TITLE>
</HEAD>
<BODY>
<p> Vom prezenta in continuare o lista definita </p>
<DL>
<DT> <b><i>Administrator</b></i>
<DD> O persoana care administreaza bunurile unei firne
<DT> <b><i>Contabil</b></i>
<DD>O persona care administreaza contabilitatea unei firme
<DT><b><i>Director Technic</b></i>
<DD>O persoana care conduce din punct de vedere tehnic o companie
<DT><b><i>Director General</b></i>
<DD>O persoana care conduce o anumita companie.
</DL>
</BODY>
</HTML>
Seminar
1. Creati fisierul listdef.html
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vizualiza fisierul HTML
Confidential
Page 17
3/25/2016
Se pot de asemenea creea liste in interiorul altor liste . Vom prezenta mai jos un exemplu de astfel de lista:
<html>
<head>
<title>Lista in lista</title>
</head>
<body>
<pre>Mai jos este prezentata o lista in interiorul altei liste.</pre>
<OL>
<LI> Introducere
<LI> Capitolul 1
<UL>
<LI> Sectiunea 1.1
<LI> Sectiunea 1.2
<LI> Sectiunea 1.3
</UL>
<LI> Capitoul 2
</OL>
</body>
</html>
Seminar
1. Creati un fisier lista1.html
2. Editati acest fisier folosind notepad.exe si introduceti codul de mai sus
3. Salvati fisierul respectiv
4. Folositi IE sau Netscape pentru a vizualiza fisierul respectiv
Imagini grafice pentru pagina Web

Pentru a pune grafica intr-un fisier HTML exista urmatoarea :
<IMG SRC=fisier imagine>
sau
<IMG SRC=path/fisier imagine>
Aceasta comanda afiseaza continutul unei imagini grafice intr-un fisier HTML pentru a afisa aceasta imagine se poate
folosi denumirea fisierului imagine si a URL-ului. De asemenea se poate folosi tag-ul ALT pentru a afisa o descriere pentru
imaginea grafica.
<IMG SRC=imagine.gif ALT=Aceasta este prima imagine din fisier !!>
De asemenea se poate folosi si tagurile pentru alignierea unei imagine grafica intr-un fisier HTML acest lucru se poate
realiza folosind tag-ul align care poate lua urmatoarele valori:
align=top | middle

Confidential
Page 18
3/25/2016
Astfel daca vom folosi comanda align=top atunci text-ul care urmeaza dupa o imagine grafica va fi aligniat la partea de
sus a imagini, pe cind comanda align=middle va alignia text la mijlocul imagini.
Vom considera in continuare un exemplu de folosire a comenzi align.
<html>
<head>
<title>Alignierea unui text la o imagine grafica</title>
</head>
<body>
<img src=mat.gif align=top alt=Exemplu de matrita> Aceasta este un exemplu de text aliniat la
partea de sus a imagini. <br>
<HR>
<img src=mat.gif align=middle alt=Exemplu de matrita> Acesta este un exemplu de text aligniat
la partea de mijloc a unei imagini.
</body>
</html>
Daca veti pune mouse-ul deasupra imagini pentru o perioada de timp va apare descrierea data de tag-ul alt.
Seminar
1. Creati un fisier img.html
2. Introduceti in acest fisier codul HTML de mai sus
3. Salvati fisierul
5. Puneti mouse-ul pe o imagine si asteptati pina cind va apare descrierea data de tag-ul ALT.
Hypertext si link-uri la alte pagini HTML

Tag-ul care ne permite sa definim un hyperlink is <A>. El este un container care poate contine text sau imagine si el
trebuie sa se termine cu tag-ul </A>. Vom considera in continuare un exemplu:
<A HREF=URL>Descrierea link-ului</A>
Aceasta liniei introdusa in fisierul tau HTML iti va permite sa apesi pe textul Descriere link pentru a deschide pagina
URL. Vizualizarea link-ului este foarte simpla pentru ca odata plasat maouse-ul deasupra lui acesta se schimba din sageata in
mina care ar vrea sa apese o tasta.
<a href=link.html>Descrierea link-urilor</A>
va deschide fisierul HTML link.html care se gaseste in directorul curent, pe cind :
<a href=http://www.ecadro.com/index.html>Lista servici</a>
va deschide fisierul index.html care se gaseste pe serverul http://www.ecadro.com
Pe linga link-urile externe limbajul HTML ne permite sa realizam link-uri la anumite sectiuni ale unui document. Pentru
a realiza acest lucru va trebui mai intii sa definim ancorele care definesc sectiunile si apoi sa definim link-urile care ne duc la
sectiunile respective.
O ancora pentru o anumita sectiune se defineste astfel:
<a name=nume_ancora> Inceputul sectiuni </a>
Confidential
Page 19
3/25/2016
Pentru ca browser-ul sa ajunga la aceea sectiune va trebui sa definim link-ul in felul urmator:
<a href=#nume_ancora>Link la sectiunea definita anterior</a>
Sa consideram cazul unei liste de vopsele :
<html>
<head>
<title>Folosirea link-urilor de sectiune</title>
</head>
<body>
<p style="font: 18pt times">Pachetele de produse oferite de firma noastra</p>
<OL>
<LI><a href="#100ab50"> Pachetul 100 AB 50 </a>
<LI><a href="#200ab50"> Pachetul 200 AB 50 </a>
</OL>
<HR width=50% size=3 align=left>
<pre style=" font: 16pt times " ><a name="100ab50"><b> Pachetul 100 AB 50 </a>
<a href="#top">top</a></b></pre>
<OL>
<LI> Periute de dinti
<LI> Spray pentru improspatarea respiratiei
<LI> Deodorant
<LI> Gel pentru dus
<LI> Sapun deodorant
<LI> Sapun de toaleta
<LI> Spuma de ras
<LI> Detergent rufe
<LI> Inalbitor universal
<LI> Spray pentru prespalare
<LI> Spray pentru incaltaminte
<LI> Concentrat de curatare
<LI> Spray pentru lustruit mobila
<LI> Detergent pentru toaleta
<LI> Detergent lichid pentru vase
<LI> Bureti de bucatarie din otel
<LI> Sampon pentru covoare si tapiterie
<LI> Produs pentru curatat obiecte metal
<LI> Spray pentru curatarea geamurilor
<LI> Spray pentru finisare
<LI> Spray pentru lentile
</OL>
<HR size=3 width=50% align=left>
<pre style=" font: 16pt times " ><a name="200ab50"><b> Pachetul 200 AB 50 </a>
<a href="#top">top</a></b></pre>
<OL>
<LI> Periute de dinti
<LI> Spray pentru improspatarea respiratiei
<LI> Deodorant
<LI> Gel pentru dus
<LI> Sapun deodorant
Confidential
Page 20
3/25/2016
<LI> Sapun de toaleta

<LI> Spuma de ras
<LI> Detergent rufe
<LI> Inalbitor universal
<LI> Spray pentru prespalare
<LI> Spray pentru incaltaminte
<LI> Concentrat de curatare
<LI> Spray pentru lustruit mobila
<LI> Detergent pentru toaleta
<LI> Detergent lichid pentru vase
<LI> Bureti de bucatarie din otel
<LI> Sampon pentru covoare si tapiterie
<LI> Produs pentru curatat obiecte metal
<LI> Spray pentru curatarea geamurilor
<LI> Spray pentru finisare
<LI> Spray pentru lentile
<LI> Lotiune dupa ras
<LI> Crema exfoliata
<LI> Sampon cu balsam
<LI> Sampon anti-matreata
<LI> Spuma voluminoasa
<LI> Apa de gura
<LI> Lotiune pentru miini si corp
<LI> Balsam pentru rufe
</OL>
</body>
</html>
Seminar
1. Creati un fisier link1.html folosind notepad.exe
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vizualiza acest fisier
<html>
<head>
<title>Realizarea unui meniu</title>
</head>
<body>
<p style="font: 20pt times; font-weight: bold">LINK-uri UTILE</p>
<UL>
<LI><a href="www.ptc.com"> Site-ul firmei PTC</a>
<LI><a href="www.hp.com"> Site-ul firmei HP</a>
<LI> <a href="www.compaq.com">Site-ul firmei Compaq</a>
<LI> <a href="www.dell.com">Site-ul firmei Dell</a>
</UL>
</body>
</html>

Confidential
Page 21
3/25/2016
Seminar
1. Creati fisierul link2.html folosind notepad.exe
3. Salvati fisierul
Se pot realiza si alte tipuri de link-uri . Astfel se pot pune intr-un fisier HTML link-uri care sa ne permita sa trimitem un
fisier sau sa aducem anumite fisiere de pe un server ftp sau un server de tip gopher.
Pentru a trimite un email se foloseste urmatoare linie de link:
<a href=mailto:epopa@mci.com> Emilian Popa </a> Acest text trebuie scris sub urmatoarea forma:
Aceasta linie de comanda ne permite sa trimitem un e-mail la adresa epopa@mci.com atunci cind apasam pe aceasta
adresa de e-mail.
Se mai pot folosi si alte servici internet, spre exemplu putem pune pe site fisiere care pot fi luate de alti folosind
serviciul ftp. Pentru a realiza acest lucru se foloseste comanda :
<a href=ftp://ftp.cdrom.com/tmp/noilefis.zip>Noua arhiva cu fisierele folosite </a>
Pentru a aduce aceste fisiere pe computerul tau vei folosi serviciile ftp care vor salva fisierele curente pe computerul tau.
Se poate de asemenea accesa o anumita sectiune dintr-un fisier HTML comanda pentru a accesa acea sectiune este:
<a href=sport1.html#Sporturi>Sport</a> care va accesa sectiunea Sporturi din fisierul sport1.html .
Se poate de asemenea crea un link la o pagina web folosind o imagine drept descrierea link-ului in locul unui text.
Pentru a realiza acest link putem folosi comanda:
<a href=sport.html alt=Informatii din sport><img src=sport.gif></a>
In acest caz daca se va apasa pe link-ul respectiv atunci va fi afisat fisierul sport.html.
Tabele
Vom discuta in contnuare despre tabele si folosirea lor in limbajul HTML. Formatul general pentru un tabel este:
<TABLE>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
In acest caz vom avea un tabel care are un rind si doua coloane. Se observa ca pentru a defini acest tabel a fost folosit
mai intii obtiunea <table></table> care este folosita pentru a defini tabelul respectiv si apoi optiunea <tr></tr> pentru a
defini un rind in tabelul respectiv. Obtiunile <td></td> definesc o coloana in cadru tabelului respectiv. Sa creem in
continuare un tabel care are doua linii si doua coloane. Textul sursa pentru a defini acest tabel este:
<HTML>
<HEAD>
Confidential
Page 22
3/25/2016
<TITLE>Acesta este un tabel cu doua linii si doua coloane</TITLE>

</HEAD>
<BODY>
<TABLE>
<TR>
<TD>rindul 1 coloana 1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Pentru a incerca acest cod HTML va trebui :
Seminar
1. Creati un fisier pe care il numiti tabel.html.
2. Editati acest fisier folosind notepad.exe
5. Deschideti fisierul folosind IE sau Netscape.
Marginea tabelului este data de numarul de pixeli virtuali care sunt prezentati in jurul tabelului . Comanda pentru a alege
o grosime pentru tabel este <table border=n> Unde n reprezinta numarul de pixeli care definesc grosimea tabelului.
In cazul in care vrem sa realizam un tabel care are grosimea de 1 pixel comenziile care trebuiesc folosite pentru acest
lucru sunt:
<table border=1>
<tr>
<td>Coloana 1</td><td>Coloana 2</td>
</tr>
</table>
Seminar
1. Deschideti fisierul anterior
2. Modificati definitia grosimi tabelului
3. Salvati fisierul
4. Incarcati fisierul in IE sau Netscape.
Obsevati modificarile pe care aceasta comanda le are asupra grosimi tabelului.
Exista si alte atribute pe care le putem folosi impreuna cu comenzile pentru tabele :
align = x
border = x
cellspacing = x
cellpading = x
acestei celule
Aceasta comanda va alinia tabelul la stinga sau la dreapta pagini.

Aceasta comanda defineste marimea grosimi tabelului de a lungul tabelului.
Aceasta comanda va defini spatiul care este lasat intre doua coloane a unui tabel
Aceasta comanda defineste spatiul care este lasat in interiorul unei celule in jurul muchiilor

Confidential
Page 23
3/25/2016
width =x% sau width=x

Aceasta comanda defineste latimea unui tabel referitor la latimea browserului si
poate fi exprimata in procentaj sau in pixeli.
Spre exemplu urmatoarea comanda este:

<table border=2 cellspancing=10 cellpadding=10 width=75%>
Seminar
Deschideti fisierul definit anterior si modificati atribute pentru tabelul definit anterior.
Salvati fisierul
Incarcati-l in IE sau Netscape.
Se pot pune atribute pentru celule de asemenea :
align = x
Aceasta comanda va fi folosita pentru a alinia textul din interiorul unei celule . Astfel textul din
interiorul unei celule poate fi aligniat la stinga, la dreapta sau in mijlocul celulei
colspan=x
In aceast caz aceasta celula va ocupa spatiul a x coloane
rowspan=x Celula va ocupa spatiul a x rindURL
valign =x
Se foloseste pentru a alignia textul in interiorul unei celule si poate fi aligniat la partea de sus, mijloc
sau jos . Optiunile folosite in acest caz sunt: top, middle sau bottom pentru celula.
<html>
<head>
</head>
<body>
<table border=1 cellpading=10 cellspacing=10 width=400>
<tr>
<td align=left valign=middle width=50%>
Coloana 1, rindul 1
</td>
<td align=left valign=middle width=40%>
Coloana 2, rindul 1
</td>
</tr>
</body>
</html>
Seminar:
Creati un fisier tabel1.html
Editati acest fisier
Introduceti codul de mai sus
Salvati fisierul
Deschideti fisierul folosind IE sau Netscape
Modificati parametrii pentru table
Salvati
Reincarcati fisierul in IE sau Netscape (Refresh)
Modificatii parametrii pentru celula
Salvati
Reincarcati fisierul in IE sau Netscape(Refresh)
In continuare vom folosi optiunile rowspan si colspan aceste doua optiuni ne permit sa creem celule care au spatiul egal
cu cel ocupat de x rinduri sau celule care au marime egala cu spatiul ocupat de x coloane.
Sa consideram in continuare un astfel de exemplu:
Confidential
Page 24
3/25/2016
Exemplu rowspan = 2
<html>
<head>
<title>Un alt mod de a creea tabele</title>
</head>
<body>
<table border=1>
<tr>
<td rowspan=2> rindul 1 col. 1 <br>
rowspan=2
</td>
<td> rindul 1 col. 2 </td>
<td> rindul 1 col 3 </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Exemplu colspan = 2
<html>
<head>
<title>Un alt mod de a creea tabele</title>
</head>
<body>
<table border=1>
<tr>
<td colspan=2> rindul 1 col. 1 <br>
rowspan=2
</td>
<td> rindul 1 col 3 </td>
</tr>
<tr>
</tr>
</table>
</body>
Confidential
Page 25
3/25/2016
</html>
Seminar
Creati un fisier tabel2.html
Editati acest fisier folosind notepad.exe
Introduceti codul html pentru primul exemplu de mai sus
Salvati fisierul
Folositi IE sau Netscape pentru a vedea tabelul
Editati din nou fisierul tabel2.html folosind notepad
Faceti schimbarile conforme cu al doilea exemplu de mai sus
Salvati fisierul
Folositi IE si Netscape pentru a vedea tabelul
In continuare vom discuta modul de colorare a celulelor unui tabel folosind posibilitatile pe care ni le pune la dispozitie
limbajul HTML . Pentru a defini o culoare in acest limbaj se foloseste un numar hexadecimal cum se va vedea mai
departe.
Pentru a adauga culoare la o celula se foloseste atributul bgcolor si numarul hexadecimal care defineste culoarea
respectiva. Vom considera in continuare exemplu unui tabel in care am folosit mai multe culori pentru celulele tabelului.
<html>
<head>
<title>Tabel cu celule colorate</title>
</head>
<body>
<table border=1>
<tr>
<td bgcolor=#CC9999> rindul 1 coloana 1</td>
<td bgcolor=#FFCC99> rindul 1 coloana 2</td>
<td bgcolor=#CCCCCC> rindul 1 coloana 3</td>
</tr>
<tr>
<td bgcolor=#CCCCCC> rindul 2 coloana 1</td>
<td bgcolor=#CC9999> rindul 2 coloana 2</td>
<td bgcolor=#FFCC99> rindul 2 coloana 3</td>
</tr>
</table>
</body>
</html>
Vom prezenta in continuare o lista cu cele mai folosite culori in limbajul HTML:

Confidential
Page 26
3/25/2016
Bineinteles ca in interiorul unei celule din tabel putem introduce o imagine dupa cum se va vedea in exemplu care
urmeaza:
<html>
<head>
<title> Tabel cu imagini</title>
</head>
<body>
<table border=1>
<tr>
<td>
<img src=cellphone.gif>
</td>
<td>
rindul 1 coloana 2
</td>
</tr>
<tr>
<td>
rindul 2 coloana 1
</td>
<td>
rindul 2 coloana 2
</td>
</tr>
</table>
</body>
</html>
Seminar
1. Creati un fisier tabimg.html
2. Editati acest fisier folosind notepad.exe
4. Salvati fisierul
5. Incarcati fisierul folosind IE sau Netscape

Confidential
Page 27
3/25/2016
Pentru tabele se poate folosi tagul <th> in locul tagului <td> pentru a realiza hedere-le tabelului. Prin heder se intelege
un text scris ingrosat care sa scoata in evidenta capetele de tabele. Vom prezenta in continuare un exemplu:
<html>
<head>
<title> Folosirea hederelor de tabele</title>
</head>
<body>
<p style="font: 16pt times"><i>Procentajul vinzarilor realizate</i></p>
<table border=1>
<tr align="center">
<th>
Anul
</th>
<th>
Pantofi %
</th>
<th>
Ghete %
</th>
</tr>
<tr align="center">
<th>
1970
</th>
<td>
50%
</td>
<td>
50%
</td>
</tr>
<tr align="center">
<th>
1980
</th>
<td>
76%
</td>
<td>
24%
</td>
</tr>
<tr align="center">
<th>
1990
</th>
<td>
40%
</td>
<td>
60%
Confidential
Page 28
3/25/2016
</td>
</tr>
</table>
</body>
</html>
Seminar
1. Creati un fisier theder.html
3. Salvati fisierul
Frames - o alta modalitate de a impartiti pagina Web

La fel ca si tabelele framuri-le sunt impartite in linii si coloane. Marimea acestora este determinata de un numar
care defineste procentajul coloanei sau rindului sau numar de pixeli. Vom considera in continuare codul sursa pentru a
realiza impartirea ecraului intr-o portiune in partea stinga care poate fi folosita pentru meniu si o portiune in dreapta
care este portiunea in care vor fi afisate datele principale. In cele doua portiuni ale ecranului vor fi afisate cite o pagina
avind codul sursa HTML corespunzator. Astfel portiunea din stinga va contine portiunea corespunzatoare meniului si
aici va fi folosit codul sursa corespunzator fisierului meniu.html. In portiunea din dreapta se va afisa fereastra principala
a carui cod sursa se va gasi in fisierul prin.html.
Fisierul meniu.html va avea urmatoarul cod HTML:
<html>
<head>
<title>Meniu</title>
</head>
<body>
<div align=left>
Optiunea I
<p>
Optiunea II
<p>
Optiunea III
<p>
Optiunea IV
</div>
</body>
</html>
Fisierul princ.html va avea urmatorul cod HTML:
<html>
<head>
<title>Fisierul principal HTML pentru frame</title>
</head>
<body>
<p align=right>
Aceast fisier contine fisierul HTML princ.html si el va fi folosit pentru a afisa
informatiile principale . De asemenea fisiere corespunzatoare linkurile din meniul afisat in
Confidential
Page 29
3/25/2016
partea stinga vor afisa continutul fisierului in aceasta portiune dupa cum se va vedea mai
tirziu. Prin link se intelege relatia care se realizeaza intre un cuvint si un grup de cuvinte prin
care atunci cind vom apasa pe acest cuvint sau grupuri se va deschide un fisier HTML .
</body>
</html>
Acum ca am creat cele doua fisiere HTML va trebui sa creem fisierul care sa imparta ecranul in doua regiuni, de fapt
fisierul care defineste cele doua framuri pe care sa le folosim ulterior. Vom denumi acest fisier frame.html si el va fi
fisierul care va trebui sa fie incarcat atunci cind dorim sa vedem rezultatul codului care au fost scrise in cele trei fisiere.
A aparut in codul sursa de mai sus si tagul div care va fi discutat atunci cind vom discuta tipurile de stiluri pentru o
pagina Web.
Codul sursa al fisierului frame html este:
<html>
<head>
<title>Impartirea in frame-URL</title>
</head>
<frameset cols=250, *>
<frame src=meniu.html>
<frame src=princ.html>
</frameset>
</html>
In codul sursa al fisierului frame.html au aparut doua noi comenzi astfel comanda <frameset > este comanda care
imparte de fapt spatiul ecran in mai multe regiuni. De exemplu comanda <frameset cols=25%,25%,25%,25%>
imparte spatiul ecran in patru coloane egale , pe cind comanda <frameset rows=25%,25%,25%,25%> va imparti
spatiul ecranului in patru rindURL egale. Odata impartit spatiul in regiuni va trebui sa definim fisierul HTML care va fi
folosit pentru afisare in portiunea respectiva, acest lucru se va realiza folosind comanda : <frame src=fisier.html> . Va
trebui sa definim atitea fisiere HTML cite regiuni avem definite.
Este esential faptul ca in acest caz perechea de comenzii <frameset></frameset> inlocuieste perechea <body></body>.
Seminar
1. Tastati codul sursa HTML in fisierul meniu.html si salvati fisierul (folosind Notepad.exe).
2. Tastati codul sursa HTML in fisierul princ.html si salvati fisierul (folosind Notepad.exe).
3. Tastati codul sursa HTML in fisierul frame.html si salvati fisierul (folosind Notepad.exe).
4. Folositi IE sau Netscape pentru a incarca fisierul frame.html .
5. Modificati valorile corespunzatoare impartiri ecranului din fisierul frame.html .
6. Salvati fisierul.
7. Folositi IE sau Netscape pentru a incarca fisierul frame.html si a observa modificariile.
8. Modificati fisierul frame.html astfel sa avem rindURL in loc de coloane .
9. Salvati fisierul .
10. Folositi IE sau Netscape pentru a incarca fisierul frame.html si a observa modificariile.
Vom discuta in continuare tag-urile care pot fi folosite cu comanda <frameset>:
cols=x Acest atribut creaza coloane, va trebui aici sa dam o valoare pentru fiecare portiune in care a fost impartit
ecranul. Se poate realiza acest lucru folosind procente sau valori care reprezinta numarul de pixeli pentru portiunea
respectiva.

Confidential
Page 30
3/25/2016
rows=x Creaza rinduri folosind acelasi algoritm care a fost folosit pentru a creea coloane.
border=x Aceasta comanda este folosita de Netscape (versiuni aparute dupa versiunea 3.0) pentru a controla grosimea
marginii . Valoarea este data in pixeli.
frameborder=x Este folosita de IE pentru a controla latimea margini in pixeli. Pentru Netscape versiuni mai recente de
versiunea 3.0 acest tag poate lua valori yes sau no.
framespacing=x Este folosit de IE pentru a controla latimea margini
Tag-URLle pentru comanda <frame> sunt :
frameborder=x Vom folosi aceasta comanda pentru a afisa grosimea unui frame individual . Pentru Netscape aceasta
comanda va avea optiuni yes si no pe cind pentru IE va trebui sa introducem o valoare in pixeli
marginheight=x Aceasta optiune este folosita pentru a controla imaltinea margini frame-ului
marginwidth=x Comanda care va fi folosita pentru a defini marimea latimi in pixels.
name=x Acest tag este critic pentru ca ne permite sa dam nume la o anumita portiune a unui frame ce ne va permite sa
deschidem anumite fisiere html in acesta portiune folosind acest nume.
noresize Daca vom plasa acesat tag in definitia unui anumit frame atunci nu modificarea acestei portiuni nu va mai fi
permisa si frame-ul va fi fixat in aceasta pozitie.
scrolling=x Aici se pot folosi argumente cum ar fi yes, no si auto care ne permit sa controlam aparitia unei bare de tip
scrollbar . Daca s-a folosit comanda auto atunci aparitia acestei bare va fi lasata in seama browser-ului care va afisa o
astfel de bara atunci cind va fi necesar.
src=x Aceasta comanda ne va permite sa folosim anumit cod HTML in potiuni definite anterior.
Seminar
1. Editati fisierul frame.html folosind aplicatia notepad.exe
2. Modificati linia care defineste frame-URLle astfel: <frame src=princ.html> sa arate ca mai jos:
<frame src=princ.html marginwidth=10 marginheight=10 noresize scrolling=auto>
3. Folositi IE sau Netscape pentru a incarca fisierul si pentru a observa modificarile care s-au facut in acel fisier
4. Editati fisierul frame.html folosind notepad.exe.
5. Modificati linia care defineste frame-URLle punind pentru tag-ul scrolling valoarea yes
6. Folositi IE sau Netscape pentru a incarca fisierul si a observa modificariile care s-au facut in acel fisier.
Vom discuta in continuare modul in care putem folosi optiunea target pentru a deschide un cod HTML intr-o anumita
portiune de pe ecran.
Vom creea cite un fisier HTML pentru fiecare obtiune din meniu.html. Astfel codul sursa pentru optiunea 1 va fi
opt1.html pentru optiunea 2 va fi opt2.html si asa mai departe pina la optiunea 4.
<html>
<head>
<title>Optiunea I</title>
</head>
<body>
Confidential
Page 31
3/25/2016
<p> Aceasta este optiunea I din meniu.

</body>
</html>
Seminar
1. Folositi notepad.exe si creati cite un fisier opt1.html pina la opt4.html
2. Codul HTML pentru fiecare din aceste fisiere arata ca cel de mai sus.
3. Editati fisierul meniu.html si modificati codul HTML ca mai jos:
<html>
<head>
</head>
<body>
<div align=left>
<a href=opt1.html target=princ>Optiunea I</a>
<p>
<a href=opt2.html target=princ>Optiunea II</a>
<p>
<a href=opt3.html target=princ>Optiunea III</a>
<p>
<a href=opt4.html target=princ>Optiunea IV</a>
</div>
</body>
</html>
4. Editati fisierul frame.html si modificati fisierul ca mai jos:
<html>
<head>
<title>Impartirea in frame-uri</title>
</head>
<frameset cols=250, *>
<frame src=meniu.html>
<frame src=princ.html name=princ>
</frameset>
</html>
5. Incarcati fisierul frame.html folosind IE sau Netscape si apasati pe optiunile din meniu.
Vom discuta in continuare valorile implicite HTML pentru functia target:
target=_blank va deschide fisierul HTML care este apelat intr-un nou browser
target=_self In acest caz fisierul HTML care este apelat va fi incarcat in fereastra in care se gaseste link-ul respectiv
target=_parent In acest caz fisierul HTML care este apelat va fi incarcat in fereastra parinte
target=_top In acest caz fisierul HTML va fi incarcat in intreaga fereastra principala peste orice structura frame
existenta.
Seminar
1. Editati fisierul meniu.html
2. Modificati codul sursa ca-n exemplu de mai jos
<html>
<head>
Confidential
Page 32
3/25/2016
</head>
<body>
<div align=left>
<a href="opt1.html" target=_self>Optiunea I</a>
<p>
<a href="opt2.html" target=_blank>Optiunea II</a>
<p>
<a href="opt3.html" target=_parent>Optiunea III</a>
<p>
<a href="opt4.html" target=_top>Optiunea IV</a>
</div>
</body>
</html>
3. Incarcati fisierul in IE sau Netscape si observati modificarile facute apasind pe fiecare link in parte. Pentru a reveni
la modul de asezare initial folositi comanda <Back> a browserului.
4. Modificati continutul fisierului frame.html sa nu mai contina margini modificind linia <frameset> ca mai jos:
<frameset frameborder=0 framespacing=0 border=0 cols="250, *" >
5. Incarcati fisierul in IE sau Netscape si observati noile modificari.
Se pune problema folosiri acestui cod HTML pe browsere care nu au posibilitatea de a afisa frame-uri in acest cod se
foloseste perechea de optiuni <noframes></noframes>. Intre aceste doua tag-uri se va introduce codul HTML care face
acelasi lucru ca si meniul.
Seminar
1. Editati fisierul frame.html
2. Inserati cele doua tag-uri <noframes></noframes>
3. Intre aceste doua tag-uri introduce urmatorul cod HTML
<noframes>
<center>
Bine ati venit. Ne pare bine sa va afisam site-ul nostru fara obtiunea frame. Pentru a vedea acest site
cu frame-uri va rugam sa faceti upgrade la browser.
</center>
<a href=opt1.html target=_blank>Optiunea I</a>
<a href=opt2.html target=_blank>Optiunea II</a>
<a href=opt3.html target=_blank>Optiunea III</a>
<a href=opt4.html target=_blank>Optiunea IV</a>
4.
</noframes>
Folositi IE si Netscape pentru a vedea noul cod HTML.
Folosirea comenzii <style> atunci cind creem o noua pagina Web.

Deoarece toti cei care folosesc HTML sunt designeri grafici care au folosit in trecut a fost nevoie sa se defineasca ceva
care sa controleze in acelasi mod textul si grafica unei pagini (modificarea culori unui text, a fontului de caractere,
heder-ul marginile, umbre pentru text si ferestre grafice etc).
Exista trei tipURL de <style> care pot fi folosite :

Confidential
Page 33
3/25/2016
Inline style sheet aceasta comanda foloseste tagurile HTML existente la care adauga stylul necesar. Spre exemplu
un paragraf poate fi controlat folosind comanda style=x in interiorul tagului <p>. O alta metoda consta in
folosirea tagurilor <span> si style=x combinate.
Embedded style sheet Aceast stil ne permite sa controlom stilul unei pagini folosind perechea de comenzii <style>
si </style> . Cele doua perechi de comenzii pot fi adaugate intre tagul <html> si tagul <body> al unui fisier HTML.
External linked style sheet In acest caz se va creea un fisier care va contine codul extern pentru style si el va avea
extensia .css si va fi incarcat de cite ori este necesara folosirea acestui stil. In acest caz modul de definire este diferit
de modul logic de folosire a stilului intr-un fisier HTML.
Vom discuta in continuare primul caz si anume Inline style sheet:

<html>
<head>
<title>Folosirea comenziilor Style si Span </title>
</head>
<body>
<p style=font: 28pt arial>
Aceast paragraf a fost creat folosind fontul arial definit cu ajutorul comenzii style.
</p>
<br>
<span style=font: 32pt technic>
Acest paragraf a fost creat folosind fontul technic definit cu ajutorul comenziilor span si style.
</span>
</body>
</html>
In exemplu de mai sus pe linga cele doua comenzii style si span care ne permit sa creem stilURL definite in cadru
tagurilor HTML am folosit si comanda <br> care adauga un rind nou in fisierul intre cele doua paragrafe definite
folosind tagul <p>.
Seminar
1. Creati un fisier style.html in fisierul de lucru si editatil folosind notepad.exe
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vedea cum arata acest document .
5. Modificati marimea caracterelor si observafi modificarile in browser.
In locul comenzi <span> se poate folosi si comanda <div> . Astfel pe cind comanda <span> este folosita pentru a defini
stil URL pentru citeva cuvinte, propozitii sau litere intr-un cuvint comanda <div> este folosita pentru a defini un stil
pentru un intreg paragraf.
Folosirea unui Stilului Individual pentru o intreaga pagina Web

Vom considera in continuare un exemplu de astfel de stil, asa cum am aratat in descrierea acestui mod de a defini stilul
va trebui sa creem o pereche de tag-uri <style></style> intre tag-urile <html> si <body> in care vom defini stilurile de
text pe care vrem sa le folosim ulterior.
Codul HTML este prezentat mai jos:
<html>
<head>
<title>Folosirea Stilului Individual pentru o pagina Web</title>
Confidential
Page 34
3/25/2016
</head>
<style>
BODY {background: #000000; color #FFFFFF; margin-top: .25in; margin-left:.75in; marginright:.75in}
H3 {font: 24pt verdana; color: #0000FF}
P {font: 18pt times; text-indent:0.5in }
A {color: #FF0000}
</style>
<body>
<h3>Exemplu de definire generala a stiului pentru o pagina Web</h3>
<p>In acest exemplu culoarea fontului, culoarea textului, marginile pagini in partea de sus
stinga si dreapa au fost setate folosind comanda style.</p>
<br>
<p>
De asemenea am redefinit tagul H3 sa contina fontul verdana avind marimea de 24 pt si
coloarea albastra. Tagul p a fost modificat sa aiba fontul times new roman 19 pt .
</p>
<a href=style.html>Linkul a fost definit sa aiba culoarea rosie</a>
</body>
</html>
Seminar
1. Creati un fisier numit style1.html folosind notepad.exe
3. Salvati acest fisier
4. Folositi IE sau Netscape pentru a vedea cum arata acest fisier
5. Modificati codul HTML dupa cum urmeaza (modificati culorile pentru background si text)
<html>
<head>
</head>
<style>
P {font: 18pt times; text-indent:0.5in;color: #FFFFFF }
A {color: #FF0000}
</style>
<body>
<br>
<p>
coloarea albastra.
</p>
<a href="style.html">Linkul a fost definit sa aiba culoarea rosie</a>
</body>
</html>
Confidential
Page 35
3/25/2016
6.
Folositi IE sau Netscape pentru a vedea modificarile
Folosirea unui fiser extern in care a fost definit stilul pe care il folosim intr-un
fisier
Vom prezenta in continuare modul cum putem acesa un fiser extern cu extensia .css in care am definit stilul pe care
vrem sa-l folosim in continuare. Pentru a realiza acest lucru va trebui sa creem un fisier numit style.css si sa introducem
in acel fisier urmatorul cod HTML:
<style>
A {color: #FF0000}
</style>
Se observa ca au fost introduse definitiile dintre cele doua tag-uri <style></style> din exemplu anterior.
Pentru a incarca acest cod intr-un fisier HTML ce urmeaza sa facem este sa inseram urmatorul cod in fisierul HTML
intre tag-urile <head></head> <link rel=stylesheet href=style.css type=text/css>
Codul sursa HTML in acest caz va arata in felul urmator:
<head>
<title>Folosirea unei fisier extern de style</title>
<link rel= stylesheet href=style.css type=text/css>
</head>
Seminar
1. Creati un fisier style.css avind urmatorul cod HTML:
<style>
A {color: #FF0000}
</style>
2. Editati fisierul style.html definit anterior si modificati-l sa arate ca mai jos:
<html>
<head>
</head>
<link rel=stylesheet href="style.css" type="text/css">
<body>
<br>
Confidential
Page 36
3/25/2016
<p>
coloarea albastra.
</p>
<a href="style.html">Linkul a fost definit sa aiba culoarea rosie</a>
</body>
</html>
3. Salvati fiserul respectiv
4. Incarcati fisierul in IE sau Netscape pentru a vedea modificarile facute.
Atributele pentru un text specific
font-family acest argument se refera la alegerea fontului care urmeaza a fi folosit pentru un anumit text. Exemplu
pentru folosirea acestui argument :{font-family: Times}; daca pe un anumit computer nu exista un anumit font
atunci se poate alege un font care sa fie o alternativa pentru acesta {font-family: times, garamond} sau se poate
folosi numele unei famili de fontURL cum ar fi spre exemplu: {font-family: serif} Cele mai cunoscute familii de
fonturi sunt : Serif, Sanserif, Cursive, Fantasy, Monospace.
font-size defineste marimea unui caracter si poate fi exprimata in: puncte, inch, centimetri, pixeli si procentaj.
Pentru puncte simbolul folosit este pt spre exemplu {font-size: 18pt}, pentru inch simbolul folosit este in spre
exemplu {font-size: 1in}; pentru centimetri simbolul folosit este cm spre exemplu: {font-size: 5cm}; pixeli px spre
exemplu {font-size: 24px} iar pentru procent se foloseste simbolul % spre exemplu: {font-size: 50%}
font-style defineste tipul de stil folosit pentru text si poate fi italic sau bold. Spre exemplu {font-style: italic}
font-weight marimea latimi literelor se numeste weight si acest parametru poate lua mai multi parametri pentru
un anumit font si anume: extra-light, demi-light, light, medium, extra-bolt, demi-bolt, bolt
text-decoration Acest atribut contine marimi cum ar fi: none, underline, italic, line-through
line-height Acest parametru defineste inaltimea textului in acelasi mod ca si fon-size folosind pentru marime
parametrii cum ar fi punctele, inch, centimetrii, pixeli etc. Un exemplu de folosire a acestui parametru este
redefinirea tag-ului de paragraf P {line-height: 14pt}
Vom incerca in continuare sa dam citeva exemple in care a fost folosit stilul pentru definirea modului cum un paragraf
poate fi afisat pe ecran.
<html>
<head>
<title>Folosirea comenzii style</title>
<style>
BODY {background: #000000; margin-top:.25in; margin-left:.75in;
margin-right:.25in;}
</style>
</head>
<body >
<p align=center style="font : 28pt times ; color : #FFFF00">
Technoredactare profesionala
</p>
<br>
<p align=left style="font: 20pt times; color:#FFFFFF">
<i style="font: 30pt; font-style:italic; font-weight:bold">M</i>ulte dintre principiile de baza ale
technoredactarii computerizate au fost deja abordate in numerele anterioare ale revistei noastre.<br>
O data ce ati patruns in tainele realizarii unor buletine informative atractive, calitatea documentelor
tiparite scoase de o imprimanta laser sau cu jet de cerneala nu va va mai multumi. Este momentul sa
Confidential
Page 37
3/25/2016
recurgeti la serviciile unui birou DTM sau la o imprimanta speciala care va vor transforma
documentele create prin technoredactare computerizate in produse tiparite profesional.
<br><br>
<i style="font: 30pt; font-style:italic; font-weight:bold">P</i>rimele cuvinte scrise au aparut acum
400 de ani, pe vremea cind fenicienii foloseau simboluri pentru reprezentarea cifrelor si a obiectelor si
pentru a tine evidenta contabila a propietatilor fiecarui individ. Scrierea acelor vremuri era compusa
din zeci de mii de simboluri, fiecare dintre ele reprezentind un singur obiect ori o singura actiune, si
era complet diferita de scrierea alfabetica pe care o folosim astazi.<br><br>
<b style="font: 24pt; color:#FF0000"><i style="font: 30pt; font-style:italic; fontweight:bold">C</i>arti din piatra !</b>
<br><br>
<i style="font: 30pt; font-style:italic; font-weight:bold">I</i>nventarul hirtie era inca foarte departe,
asa ca majoritatea acestor simboluri erau gravate pe bucati de piatra ori lut proaspat. Nici unele, nici
altele nu erau usor de purtat sau de pastrat. Fenicienilor le-ar fi fost cam greu sa gaseasca o incapere
suficient de mare pentru a depozita tablitele de argila care sa cuprinda textul pentru un singur ziar, ca
sa nu mai vorbim despre cel al unei carti!
</p>
</body>
</html>
Seminar
1. Creati fisierul tech.html si introduceti textul de mai sus folosind notepad.exe.
2. Salvati fisierul.
3. Folositi IE sau Netscape pentru a observa modificarile care au fost facute textului de catre comenziile de stil.
Atributele pentru margini si alinierea unui text
margin-left pentru a seta o margine in partea stinga se pot folosi puncte, inch, centimetri sau pixeli. Spre exemplu
pentru a seta o margine de inches se va folosi comanda {margin-left: 0.75in}
margin-right este identica cu setarea de mai sus numai ca in acest caz se seteaza marginea din dreapata. Spre
exemplu {margin-right: 75px}
margin-top seteaza o margine in partea de sus al unui fisier HTML . Spre exemplu {margin-top: 20pt}
text-indent - se foloseste pentru a crea spatiu si se pot folosi inch, pixeli, centimetri sau puncte {text-indent :
0.5in}. Avind acelasi efect ca si apasarea tastei tab.
text-align se foloseste pentru a alinia textul care urmeaza si care poate fi aligniat la stinga, dreapta sau in centru.
Seminar
1. Editati fisierul tech.html si modificati-l conform codului de mai jos.
<html>
<head>
<title>Folosirea comenzii style</title>
<style>
BODY {background: #000000; margin-top:.25in; margin-left:.75in;
Confidential
Page 38
3/25/2016
margin-right:.25in;}
</style>
</head>
<body >
<p align=center style="font : 28pt times ; color : #FFFF00">
Technoredactare profesionala
</p>
<br>
<p align=left style="font: 20pt times; color:#FFFFFF">
<i style="font: 30pt; font-style:italic; font-weight:bold; text-indent:0.75in">M</i>ulte dintre
principiile de baza ale technoredactarii computerizate au fost deja abordate in numerele anterioare ale
revistei noastre.<br>
O data ce ati patruns in tainele realizarii unor buletine informative atractive, calitatea documentelor
tiparite scoase de o imprimanta laser sau cu jet de cerneala nu va va mai multumi. Este momentul sa
recurgeti la serviciile unui birou DTM sau la o imprimanta speciala care va vor transforma
documentele create prin technoredactare computerizate in produse tiparite profesional.
<br>
</p>
2.
3.
</body>
</html>
Salvati fisierul .
Folositi IE sau Netscape pentru a vedea rezultatele acestui fisier. Se observa spatiul de la inceputul paragrafului
datorat optiuni text-indent.
Modificarea fontului pentru a fi aligniat la stinga sau la dreapta

Pentru un text al unui style se poate adauga aligniere astfel acesta poate fi aligniat la stinga, central sau la dreapta.
Vom creea un fisier HTML si in cadru acelui fisier o sa modificam formatul hedere-lor H1, H2, H3 etc.
<html>
<head>
<title> Folosirea stylului si a fontului aligniat</title>
</head>
<style>
BODY{margin-left:0.75in; margin-right:0.75in;margin-top:0.10in}
H1{font-family:lucida handwriting, arial, helvetica; font-size: 16pt; font-style:normal; textalign:left}
H2 {font-family: lucida handwriting, arial, helvetica; font-size: 14pt; font-style: normal; textalign: right}
P{font-family; garamond; font-size: 12pt; font-style:normal; line-height:11pt}
A{text-decoration: none; font-weight:bold}
</style>
<body>
<H1>Ce este o baza de date ?</H1>
<p style=text-align: right>
O baza de date este o colectie de date care sunt stocate intr-o maniera structurala.
Exemple de baze de date pe care le folositi usual sunt: cartea de telefon, cartea cu cecuri,
fiecare zi din viata ta. Aceasta baza de date este organizata in asa fel incit sa sorteze,
analizeze, si sa caute in continutul acestei baze de date.<br>

Confidential
Page 39
3/25/2016
Principalul element stocat pentru o baza de date este recordul. Fiecare din acesta
inregistrare contine cimpuri care se numesc cimpuri. In cartea de telefon fiecare nume
introdus impreuna cu informatiile despre el este o inregistrare. Aceasta la rindul ei contine
cimpuri de informatie cum ar fi : nume, strada, bloc si numar de telefon.
</p>
<H2>De ce trebuie sa folosim baze de date</H2>
<p style=text-align: left>
De ce sa folosim o baza de date? Care sunt avantajele folosiri acesteia?<br>
Creerea unei baze de date ne permite sa folosim unelte care ne pot ajuta sa:<br>
<OL>
<LI> Sa adaugam si sa stergem recorduri
<LI> Sa gasim si sa editam recorduri
<LI> Sa vedem o parte din baza de date
<LI> Sa facem analiza statistica pentru intreaga baza de date
</OL>
</p>
</body>
</html>
Seminar
1. Creati un fisier text1.html folosind notepad.exe
3. Salvati fisierul
Modificarea culori fontului si a cimpului pe care este scris

Se poate adauga culoare la cimpul pe care este scris textul folosind comanda : {background: #99CCCC} si de asemenea
se poate folosi culoare pentru text cu ajutorul comenzii {color : #FF6663}. Aceste comenzi vor trebui introduse in
portiunea de definire a stilului pentru H1 si H2 dupa cum se arata mai jos:
H1{font-family:lucida handwriting, arial, helvetica; font-size: 16pt; font-style:normal; text-align:left;background:
#99CCCC;color:#FF6633}
H2 {font-family: lucida handwriting, arial, helvetica; font-size: 14pt; font-style: normal; text-align: right;background:
#99CCCC;color:#FF6633}
Seminar
1. Editati fisierul text1.html folosind notepad.exe
2. Modificati codul de mai sus introducind cele doua comenzi pentru culoare hirtiei si pentru culoarea textului
3. Salvati fisierul
Gruparea stilului de fonturi

Daca pentru hedere folosim aceeasi definitie de font acestea pot fi grupate folosind o definitie comuna:
H1{font-family:arial; font-size:14pt; color:#000000}
In loc sa folosim definirea stilului ca mai sus putem folosim o definire comuna:
Confidential
Page 40
3/25/2016
H1, H2, H3{font-family:arial; font-size:14pt; color:#000000}

De asemenea pentru a defini stilul unui font in loc sa folosim o definitie greoaie de tipul:
BODY{font-family: arial, san-serif; font-size:12pt; line-height: 14pt; font-weight: bold; font-style: normal}
putem folosi:
BODY {font: bold normal 12pt/14pt arial, san-serif}
De asemena si marginile pot fi grupate dupa cum urmeaza :
BODY {margin: 0.10in .75 in .75in}
Creerea de clase pentru anumite taguri HTML

Anumite tag-uri HTML existente pot fi extinse daca li se adauga extensii la denumirea tagurilor. De exemplu daca vreau
sa folosesc doua stiluri diferite pentru un anumit heder care la rindul lui sa poate fi folosit pentru un anumit paragraf
atunci putem defini clase ale aceluiasi heder.
H2.left {font: arial 14pt; color: #FF0033; text-align: left}
H2.right{font: arial 14pt; color: #FF0033; text-align:right}
Sintaxa care este folosita pentru a folosi aceste definiti intr-un fisier HTML este:
<H2 class=left>Acest text este aligniat la stinga</H2>
<H2 class=right>Acest text este aligniat la dreapta</H2>
Seminar
1. Editati fisierul text1.html folosind notepad.exe
2. Inlocuiti definitia stilului cu urmatoarea definitie
<style>
BODY{margin: 0.10in 0.50in 0.50in}
H1.left{font: 16pt lucida handwriting; text-align:left}
H2.right{ font: 16pt lucida handwriting; text-align:right}
P.left{font: 12pt /11pt garamond; text-align: left}
P.right{font: 12pr arial; text-align:right; margin: 0in .75in .50in}
A{text-decoration: none; font-weight : bold}
</style>
3. Inlocuiti liniile care foloses hederele H1, H2,P dupa cum urmeaza
<H1 class=left>Ce este o baza de date ?</H1>
<H2 class=right>De ce trebuie sa folosim baze de date</H2>
Primul paragraf va fi <p class=right>, iar al doilea va fi <p class=left>
4. Salvati fisierul
5. Folsiti IE sau Netscape pentru a vizualiza fisierul
Definirea unei forme intr-un fisier HTML

Formele sunt pagini Web care sunt folosite pentru a dialoga cu un anumit utilizator si care permit acestuia sa modifice
mai multe cimpuri de input si sa trimita pagina unui server Web sau unui server de mesaje electronice.

Confidential
Page 41
3/25/2016
Formatul general al unei forme este:

<FORM method=Cum sa trimit action=script>
datele formei
</FORM>
Exemplu:
<FORM method=post action=mailto:epopa@mci.com>
datele formei
</FORM>
Dupa cum se observa din descrierea de mai sus sunt doua tipuri de tag-uri care pot fi folosite una este method si a doua
este actiunea. Astfel drept metoda poate fi folosita :POST si GET . POST este folosita atunci cind se foloseste o
cantitate mai mare de date pe cind GET este folosita pentru a trimite un singur raspuns cum ar fi spre exemplu un cimp
text.
In creerea unei forme se folosesc cimpuri de text. checkboxuri, meniuri si laberuri care controleaza aceste elemente.
Le vom discuta in continuare pe rind :
Linie de text:
<TEXTARE NAME= numele variabilei ROWS=numar COLS=numar>
Textul implicit
</TEXTARE>
Astfel in acest cimp se va afisa textul implicit care poate avea un numar de rinduri ROWS si un numar de coloane
COLS. Aici vom putea textul pe care il dorim si acest text va fi preluat de variabila pe care o definim atunci cind vom
trimite forma respectiva.
<html>
<head>
<title>Exemplu de text introdus cu comanda TEXTAREA</title>
</head>
<body>
<form>
<textarea name="text1" rows="10" cols="50">Comentariile d-voastra:
</textarea>
</form>
</body>
</html>
Seminar
1. Creati un fisier text1.html folsind notepad.exe
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vizualiza acest document
Confidential
Page 42
3/25/2016
Tag-ul INPUT
Formatul general al unei comenzi input este :
<INPUT TYPE=tipul de input name=variabila size=numar maxlength=numar>
Drept tipuri de input pot fi folosite:
text aceasta comanda creeaza o singura linie text a carei lungime poti sa o alegi . Atit numarul de
caractere cit si lungimea maxima acestei linii poate fi aleasa . De aceea este posibil sa se introduca o linie
care are un numar de caractere mai mare sau mai mic decit ce este vizibil pe ecran.
Un exemplu de astfel de text este :
<input type=text name=last_name size=40 maxlength=40>
Se poate de asemenea introduce o valoare implicita pentru aceasta variabila acest lucru este realizat
folosind tag-ul value=valoare implicita
<html>
<head>
<title>Exemplu de folosirea butonului text</title>
</head>
<body>
<form>
Prenume:<input type=text name=prenume size=15 maxlength=15><br>
Nume: <input type=text name=nume size=15 maxlength=15><br>
Tara : <input type=text name=tara size=15 value=Romania>
</form>
</body>
</html>
Seminar
1. Creati un fisier form1.html folosind notepad.exe
3. Salvati fisierul
4. Folositi IE si Netscape pentru a vizualiza acest fisier
password aceasta comanda este similara cu comanda text numai ca in acest caz literele vor fi ascunse si
vor apare puncte sau alte simboluri pentru a ascunde continutul cuvintului care este folosit drept parola
<input type=password nume=parola size=25 maxlength=25>
<html>
<head>
<title>Folosirea unei parole</title>
</head>
<body>
<p>Forma pentru introducerea parolei</p>
<form>
Introduceti parola: <input type="password" name="parola"
size=12 maxlength=12>
</form>
Confidential
Page 43
3/25/2016
</body>
</html>
Seminar
1. Creati un fisier parola.html folosind notepad.exe
3. Salvati fisierul
4. Folositi IE sau Netscape pentru a vizualiza documentul respectiv
checkbox acest buton va permite sa realizati interfete de tip buton apasat pentru interfata dumneavoastra.
Acestea la rindul lor pot fi apasate sau nu in functie de aceasta stare pot transmite starea lor odata cu
trimiterea formei respective. Formatul acestei comenzii este:
<input type=checkbox name=butonil 1 CHECKED>Butonul 1
<input type=checkbox name=butonul 2> Butonul 2
Vom prezenta in continuare un exemplu folosind butoane checkbox:
<html>
<head>
<title>Meniu folosind butoane de tipul checkbox</title>
</head>
<body>
Ce calculator folositi pentru a accesa internetul :
<hr size=3 width=38% align=left>
<form>
<input type="checkbox" name="but1" checked> Pentium 133<br>
<input type="checkbox" name="but2" > Statie grafica Sun<br>
<input type="checkbox" name="but3" > Statie grafica HP<br>
<input type="checkbox" name="but4" > Statie grafica IBM
</form>
</body>
</html>
Seminar
1. Creati un fisier but1.html folosind notepad.exe
3. Salvati fisierul
radio s-a observat ca-n cazul butoanelor de tip checkbox puteam alege mai multe variante si selectarea
unui buton nu ducea la deselectarea altora. Pentru a realiza acest lucru se vor folosi butoane de tip radio.
In acest caz pentru fiecare buton de tip radio este necesar cimpul VALUE care trebuie sa ia o valoare
diferita pentru fiecare buton.
<input type=radio name=computer value=Pentium 133> Pentium 133
<input type=radio name=computer value=Statie Sun> Statie Sun
<input type=radio name=computer value = Statie HP> Statie HP
Confidential
Page 44
3/25/2016
<input type=radio name=computer value=Statie Compaq> Statie Compaq

Vom folosi acest cod intr-un fisier HTML.
<html>
<head>
<title>Folosirea butoanelor radio</title>
</head>
<body>
<p>Folosirea butoanelor radio pentru a selecta un computer</p>
<hr size=3 width=38% align=left>
<form>
<input type=radio name=computer value=Pentium 133> Pentium 133<br>
<input type=radio name=computer value=Statie Sun> Statie Sun<br>
<input type=radio name=computer value = Statie HP> Statie HP<br>
<input type=radio name=computer value=Statie Compaq> Statie Compaq
</form>
</body>
</html>
Seminar
1. Creati un fisier radio.html folosind notepad.exe
4. Folositi IE sau Netscape pentru a vizualiza documentul
hidden acest tip de buton nu este folosit pentru a introduce date ci numai pentru a transmite valori pentru
o variabila catre un server Web sau un server de mesaje electronice. Formatul acestui buton este:
<input type=hidden name=variabila 1 value=valoare>
reset acest buton reseteaza toate valori introduse anterior . Formatul comenzii este :
<input type=RESET Value=Resetam valorile cimpurilor formei> sau <input type=RESET>
submit aceast buton este folosit pentru a trimite o forma completata anterior. Formatul acestei comenzi
este: <input type=SUBMIT> sau <input type=SUBMIT value=GO>
Vom considera in continuare un exemplu de o forma simpla:

<html>
<head>
<title>O forma simpla</title>
</head>
<body>
<form>
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
<input type="hidden" name="var1" value="ascuns"><br>
<input type="RESET" value="Reseteaza" >
<input type="SUBMIT" value="Trimite">
</form>
</body>
</html>
Seminar
Confidential
Page 45
3/25/2016
1.
2.
3.
4.
Creati un fisier form1.html

Introduceti codul de mai sus
Salvati fisierul
Folositi IE sau Netscape pentru a vizualiza fisierul
Vom considera in continuare un exemplu general de forma pe care o putem folosi pe pagina noastra Web pentru a prelua
informatii de la utilizator:
<html>
<head>
<title>Un exemplu de forma folosita pe site pentru a cere informatii</title>
</head>
<body>
<form method="post" action="mailto:epopa@mci.com">
<p style="font : 18pt times; font-weight:bold">Abonati-va la lista noastra de mesaje
</p><br>
<p style="font: 14pt times">Va rugam sa introduceti urmatoarele
informatii:</p><br>
Nume : <input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
<br>
Compania: <input type="text" name="companie">
E-mail: <input type="text" name="email"><br><br>
Unde a-ti auzit de noi:
<input type="radio" name="unde" value="internet">Internet
<input type="radio" name="unde" value="ziare">Ziare
<input type="radio" name="unde" value="tv">Televizor
<input type="radio" name="unde" value="radio">Radio
<br><br>
<p style="font:14pt times;">Comentariile d-voastra:</p><br>
<textarea name="comentariu" rows=8 cols=55>
</textarea>
<input type="reset" value="Sterge valorile introduse">
<input type="Submit" value="Trimite valorile introduse">
</form>
</body>
</html>
Seminar
1. Creati un fisier fm.html folosind notepad.exe
3. Salvati fisierul
Exemplu urmator il va constitui o lista de definiti, acesta ne permite sa alegem o optiune dintr-o lista data. Pentru a face
acest lucru va trebui sa definim lista de obiecte folosind urmatoarele comenzii:
<Select name=optiune>
Confidential
Page 46
3/25/2016
<option selected value=Romania>

<option selected value=USA>
<option selected value=Germania>
<option selected value=Iugoslavia>
</select>
Vom prezenta in continuare un exemplu in care am folosit aceasta metoda de selectie:
<html>
<head>
</head>
<body>
<form method="post" action="mailto:epopa@mci.com">
Tara de origine:
<select name="option">
<option selected value="Romania">Romania
<option selected value="USA">USA
<option selected value="Germania">Germania
<option selected value="Iugoslavia">Iugoslavia
</select>
Judetul:
<option selected value="Dolj">Dolj
<option selected value="Arges">Arges
<option selected value="Cluj">Cluj
<option selected value="Dimbovita">Dimbovita
</select>
Continetul:
<option selected value="Europa">Europa
<option selected value="America de Nord">America de Nord
<option selected value="America de Sud">America de Sud
<option selected value="Asia">Asia
<option selected value="Africa">Africa
</select>
</form>
</body>
</html>
Seminar
1. Creati un fisier numit select.html si introduceti codul de mai sus folosind notepad.exe
2. Salvati acest fisier
JAVA SCRIPT INTRODUCERE

Lectia 1
Confidential
Page 47
3/25/2016
Multe pagini web folosesc CGI scripts care inseamna ca de fapt completezi o pagina de informatii si apoi apesi butonul Submit
care va apela un script CGI care va folosi aceste informatii. Dar aceste programele CGI sunt lente de aceea a fost necesar sa se
dezvolte alte aplicatii care sa mareasca viteza de reactie a pagini web si astfel a aparut un nou limbaj numit JAVA si in cazul
nostru vom studia JAVA script. In acest program imaginiile se pot schimba odata ce pui mousul deasupra lor sau calcule se pot
face fara a fi nevoie sa mai facem aplicatii CGI in spatele acestor aplicatii. Ce este mai important despre acest limbaj este ca nu
trebuie sa folosesti nici un limbaj de programare ce ai nevoie este un browser si un calculator care nici nu trebuie sa fie legat la
reteaua de calculatoare.
Astfel se stie ca stuctura unui program HTML este urmatoarea :
<html>
<head>
<title>
</title>
</head>
<body>
</body
</html>
Programele Java Script vor fi pozitionate intre </title> si </head>.
Ca si programul HTML Java Script este un program a carui sursa poate fi tastata in orice procesor text. El va fi inserat in
programul HTML care descrie pagina ta. Asa cum am aratat anterior el poate fi pozitionat intre </title> si </head> dar sunt
cazURL in care codul sursa va putea fi pozitionat si in segmentul <body></body> al fisierului HTML. Trebuie mentionat ca
inceputul unui paragraf care foloseste Java Script are urmatoarea structura : <script language = Java Script> si se termina ca
fiecare comanda din limbajul HTML cu cunoscuta structura </script>. Pentru prima formulare language=Java Script poate fi
ignorata pentru ca limbajul Java Script este cel implicit pentru toate browserele care exista pe piata la ora actuala.
Tot ce urmeaza dupa // pe aceeasi linie este considerat comentariu. De asemenea se poate folosi si sistemul de comentarii pe care
il gasiti in limbajul C /* pentru inceputul comentariului si */ pentru sfirsitul comentariului. Un exemplu de comentariu este aratat
mai jos:
/* acesta este inceputul comentariului
linia 1 comentariu
linia 2 comentariu
linia 3 comentariu
acesta este sfitrsitul comentariului*/
O alta metoda de a adauga text in limajul tau este sa folosesti o cazuta de dialog :
Alert (Va rugam sa folositi numai cifre !) aceasta linie de limbaj va afisa o fereastra care va avea acest dialog in interiorul ei.
O alta metoda care se foloseste pentru comentariu o puteti vedea in exemplu de mai jos :
<html>
<head>
<title>
<script language=Java Script>
<! va acunde acest comentariu pentru alti utilizatori
// sfirsitul comentariului ascuns -->
</script>
</title>
</head>
<body>
</body>
</html>
Exemplu 1

Confidential
Page 48
3/25/2016
Vom incerca acum sa creem un program care sa aiba structura generala HTML + Java.
Pentru a realiza acest lucru vom deschide un promp DOS alegind meniul <Start> <Program Files>
si <MS-DOS Prompt>. Vom schimba directorul de lucru intr-un director pe care il vom folosi pentru a creea acest program:
cd director_name este comanda pe care va trebui sa o folosim daca acest director nu exista il putem creea folosind comanda
mkdir director_name. Aici vom folosi editorul edit care este un editor universal care il gasiti sub Windows 98, NT , comanda
folosita va fi : edit ex1.html care ne va plasa in interiorul editorului edit. Aici vom tasta urmatorul text:
<html>
<head>
<title> Acesta este un ex. 1
</title>
</head>
<body>
alert(Acesta este primul meu program in Java Script !);
alert(Acest program a inceput sa-mi placa !);
</script>
</body>
</html>
Apoi vom salva programul in acest editor si vom deschide un browser, iar de aici vom folosi comanda <File> <Open> pentru a
deschide fisierul respectiv. In acest caz vom avea o pagina goala pentru ca acest program nu face nimic in acest moment.
Concluzie
In aceasta lectie am invatat care este structura unui program HTML + Java Script unde trebuie scris un programel in Java Script
si cum putem vedea un program HTML + Java Script.
Lectia 2
In aceasta lectie vom invata cum sa definim variabile; sa facem calcule ; sa definim o ramura de tip if-then; sa definim un link si
sa inlocuim o imagine cu alta.
Orice programator stie ca o variabila este o lacatie de memorie si care are denumire si valoare. Astfel atunci cind scriem x=2 in
locatia de memorie care corespunde variabilei x punem valoarea numerica intreaga 2. Un alt exemplu este y=x+4 in acest caz in
locatia de memorie y punem o valoare care este egala cu suma valori aflata in locatia de memorie x plus valoarea 4. Vom defini
in continuare un program in Java Script care ne va arata modul de definire a valorile pentru aceste variabile :
<HTML>
<head>
<title> Acesta este al doilea exemplu de Java Script
</title>
// urmatoarele linii declara variabile
var secs_per_min = 60;
var mins_per_hour = 60;
var hours_per_day = 24;
var days_per_year = 365;
</script>
</head>
<body>
</body>
</HTML>
Se observa ca pentru a declara o variabila folosim cuvintul <var> dupa care numele variabile (definim de fapt locatia de memorie
care programatorii experimentati stiu ca este locala sau globala) si acesteia la rindul ei ii dam o valoare. De obicei nu este necesar
Confidential
Page 49
3/25/2016
sa dam aceasta valoarevariabilei cum nu este necesar nici sa folosim cuvintul <var>, dar pentru o usURLnta de citire a
programului recomandam folosirea tehnicii cum de altfel recomandam folosirea unor nume de variabile care sa fie sugestive. In
secventa de declarii de variabile putem face si calcule .
<HTML>
<head>
<title>
Calcule odata cu declararea variabilelor
</title>
var secs_per_min=60;
var mins_per_hour=60;
var hours_per_day=24;
// facem calcule
var secs_per_day=secs_per_min*mins_per_hour*hours_per_day;
</script>
</head>
<body>
</body>
</HTML
Acum ca am definit variabilele si am facut calculele necesare se pune problema cum afisam aceste valori in fisierul HTML si
implicit pe pagina WEB . Pentru a realiza acest lucru va trebui sa folosim comanda document.writeln(nume_variabile) aceasta
comanda va afisa continutul aflat la adresa de memorie numa_variabila pe pagina web.
<html>
<head>
</head>
<body>
<title> Lucru cu variabile
</title>
var donut_price = 1;
var gas_price = 2;
var miles = ;
var gas_100miles= 10;
var gas_price_total= gas_price * miles*10/100;
var no_donut=100;
var price_donut_total= donut_price* no_donut;
var price=price_donut_total+gas_price_total;
document.writeln(<b>La aceasta calatorie ati cheltuit :);
document.writeln(price </b>);
</script>
</body>
<\html>
Am definit pina acum numai variabile de tip numeric vom incerca in continuare sa definim variablile de tip string. Aceste
variabile sunt definite folosind acolade dupa cum se observa in exemplele de mai jos:
Var var_string = Aceasta este o variabila de tip string;

Confidential
Page 50
3/25/2016
De asemenea noi putem citi valoarea unei variabile de la tastatura folosind urmatoarea sintaxa :
Var var_string1= promt(Introduce-ti stringul dorit :, string1);
Putem de asemenea sa concatenam mai multe stringURL pentru a creea un altul acest lucru se realizeaza in urmatorul mod:
<html>
<head>
<title>
</title>
</head>
<script language= Java Script>
var string1=Aceasta este stringul 1;
var string2=Acesta este stringul 2;
var string3=string1+string2;
document.writeln(string3);
</script>
<body>
</body>
</html>
Sunt mai multe tricURL pe care le putem face cu variabilele de tip string :
Astfel daca declaram o variabila string var st1=String1 este acesta; putem apoi sa declaram o variabila st2 care este
variabila st1 dar care este scrisa folosind italics. Pentru a realiza acest lucru va trebui sa folosim comanda:
Var st2=st1.italics();
Daca vrem sa definim o variabila care are acelasi continut ca si variabila st1 dar care are toate caracterele scrise cu litere mari
atunci o metoda de a defini aceasta variabila este : var st3=st1.toUpperCase(); , pentru a schimba culoarea putem folosi :
Var st4=st1.fontcolor(red); Aceste lucrURL se pot realiza si prin concatenare cum urmeaza :
Var st2=<i>+st1+</i>; sau st4=<font color=red>+st1+</font>;
Exemplu 2. Folosirea comenziilor de lucru cu stringURL in Java Script.
Acum ca am invatat cum sa lucram cu stringURL in Java Script vom incerca sa creem un program care va prelua de la tastarura
nume, prenumele, virsa, sexul si le va afisa in pagina web. Ca si in exemplu anterior ce urmeaza sa facem este sa deschidem un
fisier folosind comanda edit ex2.html si dupa cum ne arata extensia acest fisier este un fisier HTML . In acest fisier vom scrie
codul programului nostru care arata ca-n exemplu de mai jos:
<html>
<head>
<title>
Folosirea variabilelor de tip string intr-un fisier Java Script
</title>
</head>
<body>
var nume=prompt(Introduceti numele :,);
var prenume=prompt(Introduceti prenumele,);
var virsta=prompt(Introduceti virsta,);
var sex=prompt(Introduceti sexul M/F:,);
alert(Va multumim pentru input .);
document.writeln(A-ti introdus urmatoarele date :);
document.writeln(<br>);
document.writeln(Sunteti );document.writeln(prenume + + nume);
document.writeln(Virsta dumneavostra este: );
Confidential
Page 51
3/25/2016
document.writeln(virsta);document.writeln(si aveti sexul );

document.writeln(sex);document.writeln(<br>);
</script>
</body>
</html>
Ramificatii if then
O metoda de ramificare in Java Script este folosirea comenzii if then care ne permite sa verificam o relatii care daca
este adevarata ne va permite sa realizam anumite comenzii daca nu este adevarata se va sari peste aceste comenzii.
Formatul general al comenzii if-then este descrisa mai jos:
if (relatie)
{
comanda1;
comanda2;
comandan;
}
Se observa ca formatul acestei comenzii este identic cu formatul comenzii if din limbajul C. Cit priveste operatorii
logici putem folosi >, <, >=, <=, ==, !=, &&, ||. Daca aveti cunostiinte de C atunci veti observa ca acesti operatori sunt de fapt
operatorii folositi in limbajul C.
var1 > var2 aceasta conditie va fi adevarata daca continutul variabilei var1 va fi mai mare decit continutul variabilei
var2 si va fi falsa daca continutul variabilei var1 va fi mai mic sau egala cu continutul variabilei var2.
var1<var2 aceasta conditie va fi adevarata daca continutul variabilei var1 va fi mai mic decit continutul variabilei var2
si va fi fals daca continutul variabilei var1 va fi mai mare sau egal cu continutul variabilei var2.
var1>=var2 aceasta conditie este adevarata daca continutul variabilei var1 este mai mare sau egala cu continutul
variabilei var2 si va fi falsa daca continutul variabilei var2 va fi mai mica decit continutul variabilei var1
var1<=var2 aceasta conditie este adevarata daca continutul variabilei var1 este mai mic sau egal cu continutul variabilei
var2 si este falsa daca continutul este mai mare
var1!=var2 aceasta conditie este adevarata daca continutul celor doua variabile este diferit si falsa in caz contrar
var1==var2 acesta conditie este adevarata daca continutul variabilei var1 este egal cu continutul variabilei var2 si falsa
in caz contrar
&& este operatorul si ne permite sa compunem conditii
|| este operatorul sau si este folosit pentru a compune conditii
Vom incerca in continuare sa dam un exemplu privind folosirea ramificarii de tip if-then. Sa consideram cazul in care sunteti
intrebat daca sunteti casatorit sau nu si daca sunteti casatorit daca aveti vreun copil.
<html>
<head>
<title>
Folosirea conditiei if-then intr-un fisier Java Script
</title>
</head>
<body>
<script>
var nume=prompt("Introduceti numele :","");
var prenume=prompt("Introduceti prenumele","");
var virsta=prompt("Introduceti virsta","");
var sex=prompt("Introduceti sexul M/F:","");
alert("Va multumim pentru input .");
Confidential
Page 52
3/25/2016
var casatorit=prompt("Sunteti casatorit da/nu","");

if (casatorit=="da")
{
var copil = prompt("Aveti copii da/nu","");
if (copil=="da")
{
document.writeln(nume);
document.writeln("<br>");
document.writeln("casatorit");
document.writeln("are copii");
};
if (copil=="nu")
{
document.writeln("casatorit");
document.writeln("nu are copii");
};
};
if (casatorit=="nu")
{
document.writeln("necasatorit");
};
</script>
</body>
</html>
Definirea link-URLlor
Daca mutam cursorul deasupra unui text sau daca apasam un link atunci JavaScript va creea un eveniment. Un
eveniment de tip link este denumit is JavaScript onClick, si ne va trimite in alta pagina care este definita de link-ul
respectiv. Exista o alta obtiune care ne permite sa trimitem utilizatorul in alta pagina WEB atunci cind cursorul se
gaseste deasupra unui link. In acest caz se observa ca nu avem definit limbajul JavaScript si acest lucru este posibil
pentru ca in cazul functiilor onClick tot ce este intre paranteze este considerat limbaj JavaScript.
<a href=# onClick=alert(Ooo, apasa din nou !)>Apasa te rog ! </a>
La prima vedere pare un link obisnuit dar ce face acel onClick in cadru acestei functii . Aceasta instructiune ne spune ca
atunci cind cineva apasa pe acest link se va rula codul sursa aflat intre ghilimele.
Asa cum am aratat anterior exista optiunea care face acelasi lucru dar de data asta atunci cind mouse-ul este deasupra
linkului respectiv.
<a href=# onMouseOver=alert(Hee hee !) > Mouse deasupra !</a>
In continuare vom incerca cele doua comenzi intr-un program html.
Confidential
Page 53
3/25/2016
<html>
<head>
<title>
</title>
</head>
<body>
<a href=# onClick=alert(Apasa din nou !);> Apasa te rog </a>
<br>
<a href=# onMouseOver=alert(Mouse deasupra!!);>Mouse deasupra</a>
</body>
</html>
Dupa cum se stie de la html link-ul este folosit pentru a ne trimite intr-o alta pagina sau la un segment din cadru paginei
curente. In cazul nostru link-ul nu ne trimite nicaieri ci a fost folosit numai pentru a testa comenziile onClick si
onMouseOver.
Schimbarea Imaginii intr-un program html

O functie foarte folosita astazi de JavaScript o constituie schimbarea unei imaginii atunci cind ne gasim cu cursorul
deasupra imaginii. In acest caz avem o imagine pozitionata intr-un fisie html. Se stie din cursul de html structura acestei
comenzii:
<img src=nume_imagine1.gif name=image1>
<a href =# onMouseOver=document.imagine1.src=imagine2.gif;;>Schimba imaginea </a>
Vom scrie in continuare codul care ne permite sa schimbam doua imagini folosind doua link-URL din pagina la inceput.
Sa presupunem ca avem doua imagini una se numeste car1.gif si a doua se numeste car2.gif. Ne propunem sa creem
doua linkURL care sa ne permita sa schmibam aceste doua imagini una cu alta atunci cind mutam mouse-ul deasupra.
<html>
<head>
<title>
</title>
</head>
<body>
<a href=# OnMouseOver=document.image1.src=car2.gif;>Schimba</a><br>
<a href=# OnMouseOver=document.image1.src=car1.gif;>Schimba la loc</a>
<br>
<center>
<img src=car1.gif image1>
</center>
</body>
</html>
Acest programel ne va permite sa schimbam o imagine folosind doua link-URL Schimba si Schmba la loc. Aceste doua
link-URL vor schimba imaginiile intre ele atunci cind cursorul se va gasi deasupra imaginii respective.
Vom folosi mai sus acelasi exemplu dar in acest caz vom schimba imaginea in momentul in care vom apasa folosind
mouse-ul. Codul sursa pentru aceasta aplicatie va fi :
<html>
<head>
<title>
</title>
Confidential
Page 54
3/25/2016
</head>
<body>
<a href=# OnMouseOver=document.image1.src=car2.gif;>
<center>
<img src=car1.gif image1>
</center>
</a>
<br>
</body>
</html>
Se observa ca in acest caz link-ul il constituie figura respectiva. Acest lucru ne permite sa creem meniURL simple.
Manipularea ferestrelor
Se stie ca ferestre pot fi deschise in mediul HTML in felul urmator :
<a href=your_file.html targer=windows1> Va deschide o fereastra</a>
Aceast link va deschide o fereastra care va contine continutul fisierului your_file.html in fereastra windows1.
In JavaScript comanda se asemana :
Window.open(URL,name, features); unde URL este fisierul care urmeaza a fi deschis name este numele ferestrei
in care va deschide acest fisier si features sunt forme pe care le poate avea fereastra pe care acesta o deschide.
Vom da un exemplu de link care este folosit pentru a deschide o fereastra:
<a href=# onClick=windows.open(ex1.html,window1)>Apasa aici te rog</a>
Atunci cind vei apasa pe acest link o noua fereastra se va deschide si va avea continutul fisierului ex1.html.
Deoarece formele features sunt optionale ele pot fi lasate in afara programului.
Von discuta in continuare formele de ferestre html care pot fi deschise folosind aceasta comanda JavaScript.
Acestea sunt:
location deschide o fereastra care are zona in care putem tasta adresa la care vrem sa ajungem
menubar aceasta optiune ne permite sa deschidem o fereastra care are meniu bar
status este o fereastra ajutatoare care apare in partea de jos a ferestrei
scrollbars aceasta comanda ne permite sa afisam un scrollbar atunci cind este necesar
resizable fereastra poate fi modificata
width este latimea ferestrei in pixeli
height este inaltimea ferestei in pixeli
toolbar aceasta va deschide un bar care va contine urmatoarele butoane : Forward, Back, Stop, Home
Vom scrie in continuare un program care sa ne permita sa testam toate aceste forme ale unei ferestre.
<html>
<head>
<title>
Folosirea ferestrelor intr-un fisier de tip HTML
</title>
</head>
<body>
<a href="#" onClick="window.open('ex2.htm','exemplu1');">
Fara features
</a> <br>
<a href="#" onClick="window.open('ex2.htm', 'exemplu1','location')">
Location</a><br>
<a href="#" onClick="window.open('ex2.htm', 'exemplu1','menubar')">
Confidential
Page 55
3/25/2016
Menubar</a><br>
<a href="#" onClick="window.open('ex2.htm','exemplu1','status')">Status</a><br>
<a href="#" onClick="window.open('ex2.htm','exemplu1','scrollbars')">Srollbars</a><br>
<a href="#" onClick="window.open('ex2.htm','exemplu1','resizable')">Resizable</a><br>
<a href="#" onClick="window.open('ex2.htm','exemplu1','toolbar')">ToolBar</a><br>
<a href="#" onClick="window.open('ex2.htm','exemplu1','directories')">Directories</a><br>
<a href="#" onClick="window.open('ex2.htm','exemplu1','width=400, height=400')">Width and
Height</a><br>
<br>
</body>
</html>
Se observa ca aceste forme sunt optionale si atunci cind nu ai ales nici una Pro/ENGINEER le va pune implicit pe toate.
Dupa ce am invatat cum sa deschidem ferestre va fi timpul sa invatam cum sa manipulam aceste ferestre. Dupa cum se
stie JavaScript este un limbaj bazat pe DOM (document object model). Spre exemplu un obiect este window si pentru
acest obiect putem acesa mai multe caracteristici.
var status = window.status;
Aceasta comanda defineste o variabila status care contine continutul aflat in window.status. De asemenea nu numai ca
putem sa le citim dar putem de asemenea sa le modificam spre exemplu : window.status=Acest mesaj a fost
modificat !.
<html>
<head>
<title>
</title>
</head>
<body>
<script language="JavaScript">
window.status="Alege o optiune din meniu";
</script>
<a href="#" onMouseOver="window.status='Apasa aici pentru meniul1'; return true;">
Am schimbat mesajul</a><br>
<a href="#" onMouseOver="window.status='Apasa aici pentru meniul2'; return true;">
Am schimbat mesajul</a><br>
<br>
</body>
</html>
In exemplu de mai sus am folosit fereastra de informatii pentru ai data utilizatorii informatii despre ce urmeaza a face.
Am folosit direct JavaScript pentru a afisa un mesaj in fereastra de mesaje si apoi am folosit doua lincURL pentr u a
schimba mesajul care apare in fereastra de mesaje.
In continuare vom vedea care sunt operatiile pe care le putem face cu ferestrele folosite. Astfel pentru a putea efectua
operatii cu aceste ferestre va trebui mai intii sa definim o variabila care sa defineasca numele ferestrei. Comanda folosita
in JavaScript este:
var new_window=window.open(hello.html,wind1,width=200,height=200);
Se observa care este structura acestei comenzii este asemanatoare cu structura comenzii window.open cu singura
deosebire ca in acest caz am definit o variabila care este atasata la aceea fereastra.
Cele mai simple operatii pe care le putem face cu astfel de ferestre sunt aducerea in fata sau trimiterea in spate a
ferestrei la care ne referim.
Astfel pentru a duce in spate o fereastra vom folosi comanda:

Confidential
Page 56
3/25/2016
new_window.blur();
Iar pentru a aduce in fata o fereastra comanda este :
new_window.focus();
Vom considera in continuare urmatorul exemplu:
<html>
<head>
<title>
</title>
</head>
<body>
var new_window=window.open("ex1.html","fereastra1","width=200, height=200");
</script>
<a href="#" onMouseOver="new_window.focus();return true;">Afiseaza fereastra</a>
<br>
<a href="#" onMouseOver="new_window.blur();return true;">Ascunde fereastra</a>
</body>
</html>
In acest exemplu vom deschide mai intii o fereastra din limbajul JavaScript si apoi vom manevra aceea fereastra
trimizind-o in fata sau in spate depinzind care este link-ul peste care am pus mouse-ul in acest caz.
Se stie ca in programarea html putem sa definim o structura de ferestre care se numesc frame. Vom prezenta mai jos un
exemplu de astfel de structura:
<frameset row=25%>
<frame src=exemplu1.html name=window1>
<frame src=exemplu2.html name=window2>
</frameset>
Acest exemplu imparte fereastra in doua zone o zona care contine 25% din fereastra si a doua zona care contine restul.
In prima fereastra vom avea continutul fisierului exemplu1.html si in fereastra a doua vom avea continutul fisierului
exemplu2.html.
<FRAMESET>
<FRAME NAME="win1" SRC="ex1.html">
<FRAME NAME="win2" SRC="ex2.html">
</FRAMESET>
Sa consideram cazul de mai sus in care am impartit fereastra principala in doua subferestre numite win1 si win2 si care
contin la rindul lor doua fisiere html.
In fereastra win1(fisierul ex2.html) vom pune doua linkURL can exemplu de mai jos.
<A HREF=primul.html" TARGET="win2">Meniul 1</A>
<A HREF="second.html" TARGET="win2">Meniul 2</A>
In acest caz avem doua meniURL care vor deschide alte fisiere html atunci cind vom apasa pe linkul respectiv si le vor
deschide in fereastra win2 datorita obtiuni TARGET folosita.
Exista mai multe optiuni implicite pentru optiunea TARGET si vom incerca in continuare sa le descriem pe fiecare din
acestea.

Confidential
Page 57
3/25/2016
Optiuni pentru parametru Target

_blank deschide fisierul html intr-un nou document care nu este denumit
_parent deschide fisierul html la care se refere in fereastra superioara fisierului in care se gaseste link-ul
_search Incarca documentul html in browser's search optinue posibila petru Internet Explorer 5.
_self
Incarca fisierul in acelasi document in care a fost scris link-ul anterior.
_top
Incarca fisierul in cea mai de sus fereastra.
Exista de asemenea un parametru care ne da denumirea unei ferestre spre exemplu parametru window.name ne va
returna numele ferestrei deschise.
Codul pentru a returna numele unei ferestre este :
<html>
<head>
<title>
Returneaza numele unei ferestre
</title>
</head>
<body>
<script language=JavaScript>
alert(Numele ferestrei in care te aflii este :+window.name);
</script>
</body>
</html>
Am vazut ca este functie care ne permite sa deschidem o fereastra, exista de asemenii functii care ne permit sa inchidem
ferestre aceste functii sunt: window.close() si self.close();
Exista de asemenea si optiunea close() care inchide fereastra activa si daca aceasta fereastra este fereastra principala
atunci aceasta optiune va inchide atit browserul cit si fereastra activa . Deci in acest caz ve-ti avea un mesaj de la
browser si unul de la JavaScript.
Exista de asemenea functii care ne permit fereastra care este deschisa aceste functii pe permit sa mutam fereastra intr-un
anumit punct sa afisam un anumit punct din fereastra si multe altele.
window.moveTo(iX, iY) muta pozitia ferestrei la un anumit x si y
window.moveBy(iX, iY) muta fereastra folosind valorile pentru offset date anterior
window.scrollTo(iX, iY) face scroll in fereastra prin la un anumit x, y
window.scrollBy(iX, iY) face scroll in fereastra mutind x, y pixelli fereastra
window.resizeTo(iWidth, iHeight) seteaza marimile latime si lungime ale ferestrei
window.resizeBy(iX, iY) mareste marimea curenta a ferestrei folosind valorile iX si iY
Vom folosi doua din aceste functii intr-un script:
<html>
<head>
<title>
Manipularea ferestrelor deschise
</title>
</head>
<body>
var win=window.open(ex1.htm,win1);
for (i=0;i<75;i++)
{
win.moveTo(2*i ,2*i);
win.resizeBy(-i,-i);
Confidential
Page 58
3/25/2016
}
</script>
</body>
</html>
Exista functii care ne permit sa creem un document html si sa scriem in interiorul acesteia folosind limbajul JavaScript.
<html>
<head>
<title>
Un document HTML scris in JavaScript
</title>
</head>
<body>
var win = window.open("", "win",width=300, height=300);
var win1 = win.document;
win1.open("text/html", "replace");
win1.write("<HTML><HEAD><TITLE>HTML scris in JavaScript</TITLE></HEAD><BODY>Bine
v-am gasit !!!</BODY></HTML>");
win1.close();
</script>
</body>
</html>
Aceasta succesiune de comenzii va nou deschide un document si va scrie cod in acel documeny dupa care il va
inchide si in acelasi timp il va afisa.
Lansarea ferestrelor in html

Atributul target ne lasa sa specificam care este fereastra in care vrem sa deschidem noul fisier. In general sintaxa acestei
comenzii este :
<a href= target=windowName></a>
<form action= method= target=windowname>.</form>
windowname poate fi text, si va cauza ca nul URL sau forma de raspuns sa fie deschisa intr-o anumita fereastra.
Sa presupunem ca vrem sa deschidem un URL intr-o fereastra si aici avem doua link-URL care vor folosi aceeasi
fereastra deschizind alte doua fisiere URL.
Codul pentru aceste doua comenzii este:
<a href=ex1.html target=same>here</a> unde same este numele ferestrei curente
<a href=index.html target=same>here</a>
Un alt punct important este ca noua fereastra va avea acelasi propietati ca si fereastra originala deci va avea aceeasi
inaltime, latime si acelasi meniURL.
Poti sa iei avantajul folosiri atributului target pentru a incarca o fereastra sau un frame intr-o anumita fereastra daca ii
stii numele. HTML are mai multe nume de ferestre standard:
Target=_blank va deschide site-ul intr-o fereastra noua . Utilizond acest atribute fortam browserul sa deschida fisierul
intr-o fereastra noua.
Target=_self
In acest caz browserul va deschide fisierul html in aceeasi fereastra in care avem link-ul de start
Target=_parent
Va deschide fisierul html in fereastra parinte a fisierului curent
Target=_top
Va deschide noul fisier html intr-o fereastra noua fereastra originala a browserului.
Aceasta comanda este echivalenta cu comanda _self numai ca in acest caz nu avem parinte la fereastra curenta.

Confidential
Page 59
3/25/2016
Daca pentru o anumita pagina toate linkURLle se deschid intr-o anumita fereastra, putem folosi urmatoarea insiruire de
comenzii <base target=windowname> care vor trebui plasate intre <head> si </head>.
Lansarea ferestrelor cu ajutorul scriptului JavaScript

Functia window.open() va deschide o noua fereastra pentru browser. Sintaxa generala pentru aceasta comanda este:
Window.open(windowURL, windowName, windowFeatures) asa cum am mai amintit anterior.
Pentru a lasa o fereastra va trebui sa folosim urmatorul code:
Function lanseazaFereastra(newhttp, name, forme, targetname)
{
var departe=open(newhttp, name, forme);
if (departe.opener==null) departe.opener=window;
departe.opener.name=targetname;
return departe;
}
function lanseazaFereastra1()
{
fer1=lanseaza(ex1.html,win1, height=200, width=75,windows1)
}
Aceast cod trebuie plasat intre <head>si </head> apoi el poate fi apelat in functii cum ar onLoad=lanseazaFereastra1()
Sau onClick=LanseazaFereastra1 sau atunci cind avem un link:
<A HREF="javascript:LanseazaFereastra1 ()">...</A>
Odata definita fereastra ea poate fi inchisa folosind sintaxa: fer1.close() sau poate fi incarcat un alt fisier in aceasta
fereastra folosind comanda:
Fer1.location.href=
Problema ce se pune este ce vom obtine in acest caz daca fereastra nu exista in acest caz vom obtine un mesaj de eroare
de aceea este bine sa se verifice daca fereastra exista. Sa consideram exemplu urmator care verifica daca fereastra exista
si daca exista o inchide.
if (window.fer1) fer1.close(); Aceasta fereastra nu este insa suportata de toate browserele de aceea exista alte doua
posibilitati de a verifica daca o fereastra exista:
if (window.fer1 && fer1.moveTo) fer1.moveTo(0,0);
if (window.fer1 && window.moveTo) fer1.moveTo(0,0);
Vom considera in continuare un exemplu care va folosi cele discutate anterior:
<html>
<head>
<script>
function lF(newhttp, name, forme, targetname)
{
var departe=open(newhttp, name, forme);
if (departe.opener==null)
departe.opener=window;
departe.opener.name=targetname;
return departe;
}
function lF1()
{
fer1=lF("ex2.htm","win1", "height=400, width=275","w1")
}
Confidential
Page 60
3/25/2016
function lF2()
{
fer2=lF("par.htm","win2", "height=400, width=275","w2")
}
function lF3()
{
fer3=lF("sc1.htm","win3", "height=400, width=275","w3")
}
function lF4()
{
fer1.location.href="sc1.htm"
}
</script>
</head>
<body>
<A HREF="#" onclick="lF1()">...1....</A><br>// va creea win1 si va deschide ex2.htm
<A HREF="#" onclick="lF2()">...2...</A><br>// va creea win2 si va deschide par.htm
<A HREF="#" onclick="lF3()">...3...</A><br>// va creea win3 si va deschide sc1.htm
<A HREF="#" onclick="lF4()">...4...</A><br>// va deschide sc1.htm in win1
</body>
</html>
Frames and JavaScript

Escaping Frames
Cind creezi un web site te astepti ca userul sa incarce acest site in fereastra principala si nu in alta fereastra din frame.
Pentru a realiza acest lucru poti sa adaugi cod in JavaScript care va realiza acest lucru pentru tine.
if (window!=top) top.location.href=location.href;
<.script>
In acest caz se verifica daca fereastra in care vrem sa deschidem site-ul este top sau fereastra principala si daca nu este
atunci site-ul va fi deschis in fereastra principala. La fel ca si conditia window!=top care verifica daca fereastra in care
vrem sa deschidem este fereastra principala putem folosi si conditia window!=parent care evalueaza daca pentru
fereastra curenta exista parinti.Daca exista parinti atunci nu este fereastra principala si atunci site-ul cu a fost deschis in
fereastra principala.
Daca conditia este adevarata atunci comanda top.location.href=location.href; va redeschide site-ul in fereastra
principala.
Lectia 3 (Operatori generali loop, arrays, functions etc)

Sa presupunem ca odata vrei sa faci anumite lucrURL de mai multe ori si anume sa presupunem ca vrei sa ceri o parola
de la cineva . Acest lucru se poate realiza folosind exemplu de mai jos:
<html>
<head>
<title>
</title>
Confidential
Page 61
3/25/2016
</head>
<body>
var parola= George Vasile
var answer=prompt(Va rugam sa introduceti parola,);
if (answer!=parola)
{
answer=prompt(Va rugam sa introduceti parola,);
if (answer!=parola)
{
document.write(Parola incorecta !!);
}else
{
document.write(Parola corecta !!);
}
}else
{
document.write(Parola corecta !!);
}
</script>
</body>
</html>
Acest exemplu foloseste un ciclu if pentru a intreba de parola dar nu intreaba in acest caz numai de doua ori si se pune
problema ce se va intimpla in cazul in care vrem sa intrebam mai mult decit de doua ori, va trebui sa punem mai multe
comenzii de tip if else? Raspunsul este nu pentru ca limbajul JavaScript ne permite sa folosim comenzii de tipul loop
care ne usureaza munca in astfel de cazURL.
Sa consideram cazul de mai sus si sa vedem cum putem rezolva aceeasi problema folosind un ciclu de tip loop.
<html>
<head>
<title>
Exemplu de JavaScript folosind functia loop
</title>
</head>
<body>
var parola=acosdpci;
var raspuns;
while(parola!=raspuns)
`
{
answer=prompt(Care este parola :);
}
</script>
</body>
</html>
Sa consideram un alt exemplu in acest caz avem o linie de text si vom fi intrebati sa adaugam citi x vrem la sfirsitul
acelei linii putem raspunde cu un numar intre 1 si 10. Codul sursa pentru acest program in acest caz este :
<html>
<head>
<title>
Adaugam x la capatul unui fisier text
Confidential
Page 62
3/25/2016
</title>
</head>
<body>
var width=prompt(Cite x vreti : [1-10] :, 5);
var a_line=;
var loop=0;
while (loop<width)
{
a_line=a_line+x;
loop=loop+1;
}
document.writeln(Ai introdus : );
document.writeln(loop);
</script>
</body>
</html>
Se stie ca in general programatorii sunt lenesi si pentru aceasta ei au creat scurtatURL cum este cea care urmeaza :
a_line=+x; si care este identica cu a_line=a_line+x;
loop++; care este identica cu loop=loop+1;
Comanda for
Ca si in C si in JavaScript avem optiunea for care de se va vedea ca este identica cu cea pe care o avem in C.
for (i=0; i<20;i++)
{
}
Primul termen i=0 defineste punctul de start al ciclului for, cel de-al doilea termen defineste punctul de sfirsit si ultimul
reprezinta modul de modificare a parametrului i. Sa consideram exemplu anterior pe care o sa-l rescriem folosind bucla
for.
<html>
<head>
<title>
Exemplu de bucla for in JavaScript
</title>
</head>
<body>
var lat=prompt(Cite x vreti,5);
var al_line=;
for (i=0; i<lat; i++)
{
al_line=al_line+x;
}
document.writeln(Ai introdus :);
document.writeln(al_line);
</body>
</html>
Sa consideran acum un exemplu in care avem bucla in bucla sau bucla incrutisata .
<html>
<head>
Confidential
Page 63
3/25/2016
<title>
Acest exemplu ne arata modul cum poate fi folosita o bucla in bucla
</title>
</head>
<body>
var lat=prompt(Introduceti latimea:,5);
var lung=prompt(Introduceti lungimea,5);
var a_line=;
for (i=0;i<lat;i++)
{
for(j=0;j<lung;j++)
{
a_line=a_line+x;
a_line=a_line+ ;
}
document.writeln(a_line);
a_line=;
}
</script>
</body>
</html>
Exemplu de mai sus nu face decit sa creeze un caroiaj creat din x si spatii goale ca in exemplu de mai jos:
/123456789
1xxxxxxxxx
2xxxxxxxxx
3xxxxxxxxx
4xxxxxxxxx
5xxxxxxxxx
6xxxxxxxxx
7xxxxxxxxx
8xxxxxxxxx
care a fost creat folosind o latime egala cu 9 si o lungime egala cu 8.
Vectorii in JavaScript
Folosirea vectorilor ne permit sa creem lucrURL mai usor spre exemplu putem sa definim o bucle dupa elementele unui
vector si apoi sa facem ceva cu acestea. Un exemplu il constituie realizarea unui show de slidURL. Pentru a realiza acest
lucru vom defini un array care sa contina paginile pe care vrem sa le afisam si apoi vom folosi o bucla pentru a le afisa.
<html>
<head>
<title>
Exemplu de show folosind array
</title>
</head>
<body>

Confidential
Page 64
3/25/2016
var url_names=new
Array(slide1.html,slide2.html,slide3.html,slide4.html,slide5.html);
var a_url;
for (loop=0;loop<url_names.length;loop++)
{
a_url=http://www.+url_names[loop]+/;
var new_window=open(a_url,new_window, width=300, height=300);
alert(hit ok for next site);
}
</script>
</body>
</html>
Intrucit nu avem fisiere html create in acest moment vom considera un exemplu mai simplu pentru a demonstra folosirea
functiei array.
<html>
<head>
<title>
Folosirea functiei array pentru cazul a mai multor culorii
</title>
</head>
<body>
var colors=new Array(red,blue,purple,green);
for (i=0;i<colors.length;i++)
{
var element=colors[i];
document.writeln(element);
}
</script>
</body>
</html>
Array in Document Object Model

Sa consideram urmatorul cod sursa :
var change=prompt(Change which image (0 or 1), );
window.document.images[change].src=three.jpg;
In acest caz avem un document html care are doua imagini, apoi vom fi intrebati care imagine vrem sa o schimbam si va
trebui sa alegem intre 0 sau 1. Odata aleasa imaginea care urmeaza a fi schimbata urmatoarea linie schimba imaginea
aleasa
cu imaginea three.jpg.
In trecut am folosit o sintaxa de forma celei de mai jos:
document.image_name.src=some_image.gif;
Ce trebuie insa stiut este ca intr-un document imaginile sunt numerotate astfel fiecare imagine are un loc in vectorul de
imaginii. Astfel document.images[0] este prima imagine, document.images[1] este a doua imagine si asa mai departe.
Numarul de imaginii dintr-un document va fi dat de parametru document.images.length.
Astfel daca vrem sa schimbam toate imaginile dintr-un document va trebui sa folosim urmatorul cod sursa:
for (loop=0;loop<document.images.length;loop++)
Confidential
Page 65
3/25/2016
{
document.images[loop].src=spacer.gif;
}
Creerea unui array 2D

Inainte de a discuta cum un astfel de array este creat sa discutam modul cum un array este create:
varmyarray=newArray(3)
Comnada de mai sus creeaza un vector cu trei compartimente. El este reprezentat grafic ca mai jos:
Un array 2D este creat la fel de simplu ca si un array normal. In acest caz vom declara un array pesta altele folosite
drept sisteme. Nu trebuie sa iti fie teama este foarte simplu.
Creerea unui array 2D

Un array cu doua dimensiuni poate fi ilustrat grafic astfel:
Dupa cum se vede, trebuie sa declaram un array pentru fiecare subarray in parte. Modul cum translatam aceasta idee
este foarte simplu:
var myarray=new Array(3)
for (i=0; i <3; i++)
myarray[i]=new Array(3)
Este simplu sau nu ? Este si si acest caz cheia folosiri acestui array este functia loop. Utilizind comanda loop, noi am
incrementat prin intreg vectorul original declarind un nou vector la fiecare stop.
Pentru a accesa valorile care sunt tinute de catre array va trebui numai sa folosim paranteze drepte:
myarray[0][0]="Compaq 486"
myarray[1][0]="Dell 486"
myarray[2][0]="IBM 486"

Confidential
Page 66
3/25/2016
The trickest part of a two dimensional array may be keeping track of all the storage compartments in the array!
Partea cea mai complicata intr-un array de doua dimensiuni este sa pastram urma tuturor compartamentelor intr-un
array.
Un array 3x3 are 9 compartimente , sa creem in continuare un array 2D care are 15 compartimente.
for (i=0; i <3; i++)
Daca stii cum sa folosesti comanda for atunci poti sa creezi vectori cu cite compartimente vrei .
Un array 2D are o structura care contine un arbore de subvariabile care exista intr-o variabila principala:
In acest caz varfiabila principala este Compaq care contine in interior alte subvariabile (486,586). Va trebui sa
folosesti un array 2D numai cind esti intr-o situatie similara cu ceea de mai sus, unde gruparea unei variabile principale
este neceasra.
Sa vedem cum putem considera un exemplu de un vector 2D. In acest exemplu vom creea un banner simplu care se
roteste,
Iar unul din aceste bannere este afisat aleator cind pagina se va incarca:
<script>
for (i=0; i<3; i++)
myarray[0][0]="<a href='firstbanner.htm'><img src='firstbanner.gif'></a>"
myarray[0][1]="<a href='firstbanner.htm'>Click here for our sponsor!</a>"
myarray[1][0]="<a href='secondbanner.htm'><img src='secondbanner.gif'></a>"
myarray[1][1]="<a href='secondbanner.htm'>Click here for our sponsor!</a>"
myarray[2][0]="<a href='thirdbanner.htm'><img src='thirdbanner.gif'></a>"
myarray[2][1]="<a href='thirdbanner.htm'>Click here for our sponsor!</a>"
var whichbanner=Math.round(2*Math.random())
document.write(myarray[whichbanner][0]+"<br>")
document.write(myarray[whichbanner][1]+"<br>")
</script>
Noi folosim un array 2D (3x2) pentru a stora 3 bannere, deoarece o imagine si un text link este necesar pentru fiecare
banner.
Variabila whichbanner, care contine un numar aleator intre 0 si 2 determina care banner este incarcat. Apoi vom folosi
comanda document.write() pentru a scrie dinamic codul pentru banner.
Functii
Functiile sunt rutine scrise in java script care ne permit sa folosim anumite linii de cod fara a mai fi nevoie in viitor sa
scriem acele linii de cod.
Sa consideram cazul afisarii timpului folosind JavaScript:
<a href=# onClick=
var the_date = new Date();
var the_hour = the_date.getHours();
Confidential
Page 67
3/25/2016
var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();
var the_time=the_hour + : + the_minute + :+the_second;
alert(Este ceasul : + the_time);>Time !</a>
Aceaste insiruiri de comenzi vor trebui folosite de cite ori avem nevoie sa afisam ceasul intr-un fisier html. Dar daca va
trebui sa afisam ceasul de 10 ori va trebui sa folosim aceste insiruiri de comenzii de 10 ori, de aceea in momentul in care
vrem sa modificam aceste subrutine va trebui din nou sa modificam de 10 ori. Pentru a inlatura acest dezavantaj putem
folosi o functie care sa ne permita sa modificam o singura data pentru ca apoi sa fie apelata de cite ori este nevoie.
<html>
<head>
<title>
Functie fara parametrii
</title>
</head>
<body>
<!hide me
function spuneTimpul()
{
var data=new Date();
var ora=data.getHours();
var minute=data.getMinutes();
var seconde=data.getSeconds();
var timp=ora+:+minute+:+secunde;
alert(Timpul este:+timp);
}
// show mw
</script>
</body>
</html>
Functii cu parametrii
Pina acum am folosit functii fara parametrii care nu pot duce la reducerea timpului pentru a tasta si de aceea este mult
mai eficient sa se defineasca functii cu parametrii functii care pot returna valori odata ce au fost apelate.
Vom folosi un exemplu simplu de functie care apeleaza parametrii si returneaza valoare.
<head>
<script language="javascript">

</script>
</head>
<body>
<script>
document.write("5 la puterea a doua =", rid_la_patrat(5), ".")

Confidential
Page 68
3/25/2016
</script>
<br>
</body>
Creerea de functii robuste

Inainte de a incepe sa discutam este bine sa definime notiunea de functie robusta. O functie robusta este o functie care
accepta orice numar de parametrii, in contrar cu o functie normala, la care numarul de parametrii aceptat este presetat, si
nu poate fi alterat.
Sunt in genral, doua tipURL de functii in JavaScript una fara parametrii si alta cu parametrii. Mai jos incercam sa
aratam un exemplu din fiecare aceste doua functii:
//function with no parameters
function buna(){
alert("Buna")
}
//function with one parameters
function scrie(cuvint){
alert(cuvint)
}
doilea
In cazul primei functii de cite ori aceasta functie este apelata va afisa o mesaja de dialog si va spune buna pe cind in alt
caz aceasta functie va afisea o fereastra de dialog care va contine inputul functiei.
Limitarile functiei normale

Trebuie spus insa ca exista limitari ale functiilor. O functie poate avea 1,2,3 sau o suta de parametrii. Dar nu poate avea
toti acesti parametrii la un loc. Avem nevoie de 2 parametrii sau avem nevoie de 100 parametrii ? Daca pentru o functie
care trebuie sa accete doi parametrii vom introduce 100 atunci aceea functie va da un mesaj de eroare.
Vectorul de argumente este secretul robutetei unei functii
Argumentul array este un argument secret care exista in interiorul fiecarei functii. Un astefel de input este folositor
pentru ca fiecare element va fi pus intr-o pozitie in acest vector si de asemenea vom putea considera numarul total de
parametrii.
Sintaxele folosite sunt:
functionname.arguments.lengthcontinenumaruldeargumenteintroduse
functionname.arguments[0]continevaloareaprimuluiargumentintrodus
functionname.arguments[1] contine valoarea celui de-al doilea argument introdus
"
"
arguments si lengrth sunt denumiri ale codului JavaScript pe cind functionname este numele pe care l-ati dat functiei la
initializare.
Confidential
Page 69
3/25/2016
function numere(unu, doi, trei,patru){

alert("Total # of parameters="+numere.arguments.length)
for (i=0;i<arguments.length;i++)
alert(numere.arguments[i])
}
Anterior a fost definita o functie care are trei parametrii . va trebui sa o apelam si sa vedem ce putem sa obtinem datorita
argumentelor.
<script>
//call the function
numere("Cine","esti","tu", ?)
</script>
Crearea funtiei robuste

Cu ajutorul unui vector de argumente si cu citeva schimbari majore pentru functie, putem creea o functie care accepta
orice numar de argumente. Va trebui sa creem o functie robusta, o functie care arata la fel ca si functia definita anterior
dar nu are parametrii definiti anterior ci sunt definiti intr-un vector de argumente.
function robust()
{
}
Acum ca am inteles care este definitia functiei, va trebui sa creem un mecanism care sa utilizeze vectorul de argumente
pentru a stora toti parametrii, astfel ca portiunea de functie care ramine sa isi poata face jobul cu acestea. Vom putea
folosi o simpla comanda de tip loop:
function robust(){
for (i=0;i<robust.arguments.length;i++)
//do whatever
}
Exemple
Sa definim mai jos citeva exemple de functii robuste:
Exemplu 1
Primul exemplu este un exemplu de sumare, unde o functie adauga toate numerele care I-au fost date drept argumente:
function adunare(){
for (i=0;i<adunare.arguments.length;i++){
total+=adunare.arguments[i]; // aici este bine sa se evite formularea total=total+adunare.arguments[i] care
// va transforma caracterul total in parametru string .
}

Confidential
Page 70
3/25/2016
//call the function

adunare(3,5,3,5,3,2,6)
Vom prezenta in continuare codul sursa pentru acest exemplu:
<html>
<head>
<title></title>
function adunare()
{
var total=0;
total=parseFloat(total);
for(i=0;i<arguments.length;i++){
total+=parseFloat(arguments[i]);}
return total;
}
</script>
</head>
<body>
var nr1=prompt("Introduceti primul numar:",0);
var nr2=prompt("Introduceti al doilea numar:",0);
var nr3=prompt("Introduceti al treilea numar:",0);
var suma=adunare(nr1,nr2,nr3);
document.writeln("Suma este :");
document.writeln(suma);
</script>
</body>
</html>
In acest exemplu vom putea introduce de la tastatura cite numere dorim si putem calcula suma acestora. Functia adunare
descrisa anterior nu are nici un argument si poate primi cite argumente dorim.
Exemplu 2 Creerea unei functii robuste pentru incarcarea imaginiilor
Implicitr de cite ori dorim sa incarcam imagini, trebuie sa trecem prin mai multe etape pentru a creea o imagine obiect
pentru fiecare imagine si apoi pentru fiecare imagine obiect , trebuie sa specificam patul la obiectul respectiv. Folosind o
functie robusta va trebui numai sa introducem calea la obiect si imaginea va fi incarcata in memorie.
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
Functia de mai sus poate fi folosita in codul sursa html in felul urmator:

Confidential
Page 71
3/25/2016
<head>
<script>
preloadimages("firstimage.gif","secondimage.gif",
"thirdimage.gif")
</script>
</head>
Codulaplicatieieste:
<html>
<head>
<title>Incarcareaimaginilorinmemorie</title>
<scriptlanguage="JavaScript">
varmyimages=newArray()
functionpreloadimages()
{
for(i=0;i<preloadimages.arguments.length;i++)
{
myimages[i]=newImage();
myimages[i].src=preloadimages.arguments[i];
}
}
</script>
<script>
preloadimages("but1_on.gif","but2_on.gif","but3_on.gif");
document.writeln(myimages[0].src);document.writeln("<br>");
document.writeln(myimages[1].src);document.writeln("<br>");
document.writeln(myimages[2].src);
</script>
</head>
<body>
</body>
</html>
Introducere in Forme
Pentru a intelege mai bine care este rolul acestor forme si cum le putem aplica va trebui sa discutam aceste forme in
formatul HTML . Vom trece mai intii in revista toate functiile care exista in formatul html pentru creerea unei forme si
apoi vom discuta modul de creere in java.
Functiile folosite in limbajul HTML pentru creerea unei forme sunt:
Definire form
<FORM ACTION="URL" METHOD=GET|POST></FORM>
ncrcare fisier
<FORM ENCTYPE="multipart/form-data"></FORM>
Cmp input
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">
Nume cmp
<INPUT NAME="***">
Confidential
Page 72
3/25/2016
Valoare cmp
<INPUT VALUE="***">
Apsat?
<INPUT CHECKED>
(checkbox si radio)
Dimensiune cmp
<INPUT SIZE=?>
(n caractere)
Dimensiune maxim
<INPUT MAXLENGTH=?> (n caractere)
List de selectie
<SELECT></SELECT>
Nume list
<SELECT NAME="***"></SELECT>
Numr de optiuni
<SELECT SIZE=?></SELECT>
Optiuni multiple
<SELECT MULTIPLE> (se pot selecta mai multe optiuni)
Optiune
<OPTION> (elemente ce pot fi selectate)
Optiune implicit
<OPTION SELECTED>
Dimensiune fereastr input text
<TEXTAREA ROWS=? COLS=?></TEXTAREA>
Nume fereastr
<TEXTAREA NAME="***"></TEXTAREA>
Spatiere text
<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
Deci dupa cum toata lumea stie formele sunt folosite pentru a permite interatii in pagina ta web. Aici utilizatorul poate
introduce informatii care apoi sunt introduse si procesate de un script. De obicei o forma incepe cu :
<FORM ACTION= METHOD=> si se termina cu </FORM>.
Comenziile de introducere a astfel de date sunt : <INPUT NAME=name SIZE=####> unde name este numele variabilei
care va prelua acest input, iarb size ne va da care este marimea cimpului pentru aceea variabila.
Aceasta comanda ne permite sa introducem text, deci un string avind numarul de caractere egal cu marimea data de
parametrul size.
Un alt tip de parametru il constituie area care ne permite sa introducem text, aceasta arie poate fi definita folosind
rindURL si coloane. Formatul folosit pentru o astfel de comanda este :
<TEXTAREA NAME=name ROWS=### COLS=###> si se termina cu formatul </TEXTAREA>
Tot ce a fost introdus va apare in parametru name si el va avea o lungime data de numarul de coloane si numarul de
rindURL.
Formatul general pentru introducerea datelor este:
<INPUT NAME=name TYPE=type VALUE=value> se observa ca ce apare in acest caz este type care ne permite sa
definim tipul de butoane pe care vrem sa-l folosim si poate fi : radio sau checkbox pentru introducerea datelor si summit
si reset pentru trimiterea intregii forme sau pentru resetarea valorilor acestei forme.
Un exemplu folosirea formei summit este un buton care ne permite sa trimitem utilizatorul in alta pagina si codul sursa
este:
<FORM ACTION="ex1.htm">
<INPUT TYPE="submit" VALUE="Go Back">
</FORM>
Aceasta forma va creea un button pe post de link.

Confidential
Page 73
3/25/2016
Acum sa discutam folosirea acestor forme intr-un fisier JavaScript, la fel ca si incazul links[] exista un vector forms[]
care lucreaza in acelasi mod. Astfel prima forma de pe pagina va fi referita folosind document.forms[0] si in plus avem
un vector elements[] care este corespunzator fiecarei forme. Am vazut ca forma generala pentru o forma este:
<FORM NAME=form1>
<INPUT SIZE=20 NAME=input1>
</FORM>
Pentru a ne referi la cimpul respectiv putem folosi structura : document.form1.input1 acest lucru este posibil pentru ca
am folosit nume pentru forma si pentru input. Pentru celalalte tipURL de input exista de asemenea valori pentru anumiti
parametrii astfel pentru text blanks si text areas exista parametru value pentru radio buttons si checkboxes exista
parametru checked.
Aceasta functie este apelata apoi intr-un fisier HTML:
<html>
<head>
<title>
Folosirea limbajului JavaScript cu forme
</title>
function cl()
{
alert("Sunteti in fuctie"+"\nSi a-ti introdus:"+
"\nText="+document.form1.text1.value+"\n"+
"Radio 1="+document.form1.radio1.checked +"\n"+
"Radio 2="+document.form1.radio2.checked+"\n"+
"Check ="+document.form1.check1.checked);
}
</script>
</head>
<body>
<form name="form1">
Text: <input name="text1" size=40><br>
Radio 1: <input type="radio" name="radio1"><br>
Radio 2: <input type="radio" name="radio2"><br>
Checkbox : <input type="checkbox" name="check1"><br>
<input type="button" value="checked" onClick="cl()">
<br>
</form>
</body>
</html>
Sa consideram un exemplu asemantor cu cel anterior numai ca in acest caz vom alte doua functii:
Setf() si clearf(). Setf() va setaparametrii intiali pentru o anumita forma si clearf() va sterge parametrii unei anumite
forme.
Codul html pentru aceast fisier html este:
<html>
<head>
<title>
Folosirea limbajului JavaScript cu forme
</title>
Confidential
Page 74
3/25/2016
function cl()
{
alert("Sunteti in fuctie"+"\nSi a-ti introdus:"+
"\nText="+document.form1.text1.value+
"\nText="+document.form1.text2.value+"\n"+
"Radio 1="+document.form1.radio1.checked +"\n"+
"Radio 2="+document.form1.radio2.checked+"\n"+
"Check ="+document.form1.check1.checked);
}
function setf()
{
document.form1.text1.value="Numele d-voastra";
document.form1.text2.value="Prenumele d-voastra";
document.form1.radio1.checked=1;
document.form1.check.checked=1;
}
function clearf()
{
document.form1.text1.value="";
document.form1.text2.value="";
document.form1.check.checked=0;
}
</script>
</head>
<body>
<form name="form1">
Nume: <input name="text1" size=40><br>
Prenume:<input name="text2" size=40><br>
Masculin: <input type="radio" name="radio1"> Feminin: <input type="radio" name="radio2"><br>
Aveti 18 ani : <input type="checkbox" name="check1"><br>
<input type="button" value="Set" onClick="setf()">
<input type="button" value="Clear" onClick="clearf()">
<input type="button" value="Send" onClick="cl()">
<br>
</form>
</body>
</html>
Vom considera in continuare un exemplu in care vom creea o forma folosind JavaScript pentru a realiza un link la o
anumita pagina.
<html>
<head>
<title>
Folosirea formelor pentru a genera un link
Confidential
Page 75
3/25/2016
</title>
function show_link()
{
document.link_form.link_val.value=document.links[0].href;
}
function set_link()
{
document.links[0].href=document.link_form.link_val.value;
}
</script>
</head>
<body>
<form name=link_form>
<a href=http://www.netscape.com onMouseOver=windows.status=variable Link; return true; >Variable
Link</a>
<input type=button value=Show onClick=show_link();><p>
<input name=link_val size=60>
<input type=button value=Set onClick=set_link();>
</form>
</body>
</html>
In cazul de mai sus am definit o forma care are un link in interiorul ei si apoi am definit doua butoane unul numit show
si unul numit set. Intre ele exista o variabila de tip text link_val care va pastra valoarea introdusa pentru link si de
asemenea va seta aceasta valoare cind va fi necesar.
Pentru butonul Show vom citi variabila document. links[0].href care contine valoare pentru primul link si apoi va fi
stocata li variabila document.link_form.link_val.value care este un cimp de tip text. Buttonul Set va lucra in alt mod va
citi variabila document.link_form.link_val.value si o va seta in variabila document.links[0].href care este primul link de
pe pagina . Astfel se va putea folosi aceasta valoare ca input pentru link-ul respectiv.
Vom analiza in urmatorul exemplu folosirea comenzii <textare name=text1 rows=10 cols=60> unde vom scrie un text
care apoi va fi schimbat folosind doua linkURL aflate sub acel text.
<html>
<Head>
<title>
Exemplu folosind un cimp de text cu mai multe rindURL si coloane
</title>
</head>
<body>
<form name="form_2">
<textarea name="text1" rows=10 cols=35>
Ion avea o palarie
Intinsa-asa ca o tipsie
Si apierdut-o (nu stiu cum);
Marin ar fi gasit-o in drum
Si-a pus-o, deci, pe cap, Marin
Si-a pornit la drum senin."
</textarea>
</form>
<a href="#" onMouseOver="document.form_2.text1.value='Ion avea o palarie'+
Confidential
Page 76
3/25/2016
'\nIntinsa-asa ca o tipsie'+
'\nSi apierdut-o (nu stiu cum)'+
'\nMarin ar fi gasit-o in drum'+
'\nSi-a pus-o, deci, pe cap, Marin'+
'\nSi-a pornit la drum senin.';"
>Prima parte</a><br>
<a href="#"
onMouseOver="document.form_2.text1.value= '\nAcum, sa vezi ce ghinion:'+
'\nMarin se creda-a fi Ion'+
'\nIon are si el un spin;'+
'\nCa e Marin sau nu-I Marin.'
;">A doua parte</a>
</body>
</html>
Urmatorul exemplu il constituie un exemplu de calculator pe o linie . In acest caz avem un cimp in care putem sa scriem
relatia pe care vrem sa o evaluam urmata de un buton care ne permite sa efectuam calculele si care va apela functia din
JavaScript care ne permite sa evaluam expresia respectiva. Apoi vom avea un cimp de tip text care la rindul lui va afisa
continutul pe care il vom gasi dupa ce vom evalua expresia din exemplu anterior. Pentru a evalua aceasta expresie se
foloseste functia eval() care va evalua valoarea introdusa in primul cimp si apoi va afisa rezultatul acestei evaluari.
Sa consideram in continuare codul sursa pentru aceast program html.
<html>
<head>
<title>
Exemplu de calculator
</title>
</head>
function calculeaza()
{
document.calculator.rezultat.value=eval(document.calculator.expresie.value);
}
</script>
<body>
<form name=calculator>
<input name=expresie size=20>
<input type=button value== onClick=calculeaza();>
<input name=rezultat size=10>
</form>
</body>
</html>
Am tot folosit in exemplele de mai sus cimpURL de tip text, este timpul sa discutam despre evenimentele care pot sa
para atunci cind avem un cimp de tip text. Avem trei astfel de evenimente: onBlur, onFocus si onChange.
OnFocus = este evenimentul care apare cind cineva apasa in interiorul unui text;
OnBlur = este evenimentul care apare cind cineva se muta in afara cimpului text;
OnChange= este evenimentul care apare cind cineva a modificat cimpul text;
Sa incercam sa facem un exemplu privind aceste evenimente:
<html>
<head>
<title>
Exemplu de text care se schimba
</title>
Confidential
Page 77
3/25/2016
function writeIt(the_word)
{
var the_word_with_return=the_word+\n;
window.document.form1.first_text.value=word_with_return;
}
</script>
</head>
<body>
<form namr=form1>
<input type=text name=first_text onFocus=writeIt(focus); onBlur=writeIt(blur);
onChange=writeIt(change);>
</form>
</body>
</html>
Ce este nou cu acest exemplu este faptul ca apelarea cimpului in forma poate fi facut cu ajutorul DOM (document object
model). Astfel daca vrem sa schimbam un cimp input intr-o procedura JavaScript procedura pentru a realiza acest lucru
este:
window.document.nume_forme.nume_cimp.value.
Trimiterea formelor
Dupa poate deja stiti formele sunt obiecte, ele au propriile lor metode, propietatii si evenimente. Un eveniment pe care
ar trebui sa-l stii inca din html este onSubmit. Acest eveniment poate apare in doua situatii cind userul apasa pe butonul
enter sau cind userul apasa pe butonul de sumitere.
De obcei daca apasam pe un buton submit care nu a fost programat sa faca ceva poate duce la reincarcarea paginii intrun editor cum ar fi Netscape. De aceea este bine sa punem forma sa returneze true sau false.
<html>
<head>
<title>
Buton pentru submit
</title>
</head>
<body>
<form onSubmit=return false;>
<input type=submit value=Submit>
</form>
</body>
</html>
Aceasta comanda return false este o buna comanda pentru a oprii browserul pentru a face ceea ce face de obicei. Se
poate folosi nu numai pentru form dar si pentru link-URL.
Spre exemplu urmatorul link:
<a href=# onClick=return false>Link-ul 1</a> Deoarece acest link returneaza false cind este apasat el nu face nimic
in document. Sa consideram de data aceasta un alt tip de input si anume choose_category. Pentru a intelege o astfel de
categorie
Confidential
Page 78
3/25/2016
Vom considera exemplu de mai jos:

<html>
<head>
<title>
O categorie pentru selectie
</title>
</head>
<body>
<form name=form1>
<select name=choose_category
onChange=(window.document.form1.choose_category.options[selectedIndex].text) ;
>
<option selected>Dogs
<option>Fish
<option>Birds
</select>
</form>
</body>
</html>
In acest exemplu avem o lista de elemente din care putem alege un element. Cu ajutorul evenimentului onChange atunci
cind am selectat un element din lista acesta va apare in casuta cu text.
Un alt exemplu de selectie este cel in care avem multiple texte din care putem alege optiunea pe care o dorim. Sa
consideram codul sursa de mai jos:
<select name="ex1" multiple>
<option>Opt1
<option>Opt2
<option>Opt3
<option>Opt4
</select>
In exemplu de mai sus avem o lista care are 4 element utilizatorul putind alege o optiune din aceasta lista.
Manipularea butoanelor radio si check boxelor in JavaScript

Radio and check boxes are an intergral part of forms that allow a surfer to make a selection with a simple click of the
mouse. These form controls are not nearly as commonly manipulated in JavaScript when compared to <textarea>
elements, mainly because a lot of developers aren't aware that radio and check boxes can too be dynamically accessed
and their values changed using JavaScript. In this tutorial, we'll show just how that's done.
The distinction between a radio and a check box
Before we officially jump in, its important to first make sure that everyone's clear on the distinction between a radio and
a check box.
Only one radio box in a group can be selected at a time, whereas with check boxes, multiple selections are allowed. I
hope no one finds the need to use checkboxes for the first question!
How to access a radio/check box in JavaScript

Confidential
Page 79
3/25/2016
So, how exactly does one access a radio or checkbox in JavaScript? Well, like you would with any other form elementthrough its name. Whether it is a radio or a check box makes no difference to JavaScript. The below defines a radio
button with the name "test", and uses JavaScript to access it:
<form name="example">
<input type="radio" name="test">
</form>
<script>
//accesses the button called "test"
document.example.test
</script>
Changing the state of a box
Accessing a box (radio or check) by itself is useless if we can't go on to manipulate the state of it. The state of a box can
be of two things- "on" when its selected, and "off", when its not. This state is represented in JavaScript by a boolean
property called "checked":
property
checked
function
Contains a boolean value indicating whether a box is selected or not. Writable.
Using this property, we can not only determine the state of a box, but change it as well, by assigning either a value of
"true" or "false" to it.
//alerts whether a box is checked
alert(document.example.test.checked)
//Dynamically selects a box
document.example.test.checked=true
Now that we know how to access and manipulate a single box, lets expand our workarea to cover an entire group of
boxes.
Grouping multiple boxes together
We rarely see only one radio or checkbox by itself in a form. The nature of them requires that they exist as a group:
By now, we know that the default way to access any one box is through its name. Having said that, imagine having a
group of 50 radio buttons. Accessing them would require us to give each and every button an unique name. Furthermore,
in a scenerio where we need to apply a loop through all of the radio buttons, it will mean manually writing out 50 lines
of code to access and reach every of the 50 buttons. Hardly even an acceptable thought.
So you say to yourself, like you often do as you gaze towards the sky: "There must be something better out there". Well,
I hate to break it to you, but there isn't- in life, that is. In JavaScript, however, there is. There is a technque that will
allow us to easily and efficiently access a radio or check box in a group. The key is to give each box the same exact
name. By doing so, JavaScript creates an array out of the boxes with this same name, and allows us to access the
individual boxes as an array element. Lets demonstrate this concept with a form that contains 10 check boxes:
<form name="example">
<input type="checkbox" name="myboxes"><br>
Confidential
Page 80
3/25/2016

</form>
In the above form, we gave each box the same name. See just how easy it is now to access the individual check boxes:
As you can see, by giving each checkbox the same name, they turn into an array of checkboxes, and we all know the
beauty of arrays in terms of power and versatility.
In the final part of our tutorial, lets wrap things up by examining some techniques available in determining which box is
selected in a group.
Techniques for determining which box is selected in a group
There are, in general, two techniques that can be used to determine which box(s) are checked in a group. To start things
off, lets first create a sample form that contains 5 radio boxes:
<form name="tv">
NBC: <input type="radio" name="station"><br>
CBS: <input type="radio" name="station"><br>
ABC: <input type="radio" name="station"><br>
CNN: <input type="radio" name="station"><br>
ESPN:<input type="radio" name="station"><br>
</form>
Perhaps you work for NBC, and would like to write a script that does one thing if NBC was selected, and another if not.
Regardless of what you want the script to do, what you really want is for the script to to able to determine which box
was checked. Lets examine the two techniques that will help us achieve this
1) Use a for-loop to loop through the box array, and pick out the one that's selected
This "brute force" technique calls for a loop to check the entire array of boxes, and simply pick out the one that's
selected:
//a variable that will hold the index number of the selected radio button
var theone
for (i=0;i<document.tv.station.length;i++){
if (document.tv.station[i].checked==true)
theone=i
}
2) Use the onClick event handler inside the <input> tag to react to the selected box
Another method to determine which box is selected is to use the onClick event handler. Since <input> tags in general all
react to onClick events, this is a simple way to determine the selection of a surfer:
<script>
var theone
</script>
<form name="tv">
NBC: <input type="radio" name="station" onClick="theone=0"><br>
Confidential
Page 81
3/25/2016
CBS: <input type="radio" name="station" onClick="theone=1"><br>

ABC: <input type="radio" name="station" onClick="theone=2"><br>
CNN: <input type="radio" name="station" onClick="theone=3"><br>
ESPN:<input type="radio" name="station" onClick="theone=4"><br>
</form>
Whenever the user checks one of the radio boxes, variable "theone" is set to the index number of the box.
In the above two examples, we've shown how to determine the selection when only one box at a time can be selected. In
the case where multiple seclections are possible (such as with check boxes), using a for-loop should be prefered over the
onClick event to "scan" the entire array and store in the index number of all selected boxes.
DOM Document Object Model

DOM lucreaza prin creerea de obiecte. Aceste obiecte au obiecte copii si propietatii si la rindul lor acesti copii obiecte
au obiecte copii si propietati si asa mai departe. Aceste obiecte pot fi referite fie prin mutarea hierarhiei in jos sau
explicit dins un atribut ID cum ar fi spre exemplu: <img src=floare.gif id=blue1)
O lista a obiectelor din top cuprinde :
Window
- location
- frames
- history
- navigator
- event
- screen
- document
- links
- anchors
- images
- filters
- forms
- applets
- embeds
- plug-ins
- frames
- scripts
- all
- selection
- stylesheets
- body
Aceasta este o lista scurta si asa cum am mai aratat ne putem referi la un obiect fie prin a specifica numele, fie prin a
specifica ID acelui obiect. Daca spre exemplu vrei sa schimbi al 23lea element de pe pagina in albastru, poti sa folosesti
urmatoarea comanda:
document.all(23).style.color=blue;
Sau daca stii ca elementul la care te referi a fost Freddie atunci poti sa folosesti comanda:
document.all(Freddie).style.color=blue;
Sau putem sa trecem peste ierarhie si sa notam:
Confidential
Page 82
3/25/2016
Freddie.style.color=blue;
Folosirea stringURLlor in JavaScript

Dupa cum se stie o variabila de tip string este orice insiruire de caractere care este cuprinsa intre ghilimele. O variabila
de tip atring poate avea unul sau mai multe caractere car epot fi scrise intre doua ghilimele sau numai una singura. Un
string gol poate fi reprezentat prin doua rindURL de ghilimele fara nimic intre ele. Cel mai obisnuit mod de a asigna o
variabila de tip string este :
Var mystring=Rocky Raccoon
O alta metoda care este folosita in IE 4 este:
Var mystring= new String(Rocky Raccoon)
Desi cea de a doua formulare este mai rar folosita se obtine folosind aceasta formulare un obiect mai robust decit in
primul caz. Desi JavaScript nu limiteaza lungimea unei variabile string mojoritatea browserelor o limiteaza la 256
caractere de aceea este bine ca un string sa fie impartit in mai multe bucatele care trebuiesc concatenate folosind
operatorul +.
Putem concatena stringURL in mai multe modURL si o sa incercam sa le explicam mai jos:
var greeting;
greeting=Hey + Jude;
var name=Jude;
var greeting=Hey+name;
O alta metoda care se foloseste este:
Var greeting=Hey;
Var name =jude;
Greeting=greeting+name;
Propietatile unei variabile de tip string

Lungimea este propietatea unui string si poate fi folosita pentru a parcurge un intreg string caracter cu caracter:
Var mystring;
Var character=new Array();
For (I=0;I<mystring.length; I++)
Character[I]=mystring.charAt[I];
O alta functie care este utila in lucru cu variabile de tip strring este extragerea si gasirea unor substringURL.
Sa consideram un exemplu:
Newstring= You say goodbye, I say => hello.substring(23,28); din stringul dat anterior se vor extrage caracterele
incepind de la numarul 23 la 28 avind in vedere ca primul caracter este caracterul 0.
Exista de asemenea o alta functie care face acelasi lucru dar care preia si primul caracter substr. Sa consideram un alt
exemplu: newstring = "Dear Prudence".substr(5,8);
Functia CharAt extrage caracterul aflat la o anumuita pozitie intr-un string . O folosire a functie CharAt este pentru a
extrage caracterul $ inainte de a folosi valoarea in calcule:
Var dollarsign=dollaramount.charAt(0)
If (dollarsign==$) alert(Youve got money );
Confidential
Page 83
3/25/2016
Functiile IndexOf si LastIndexOf ne vor returna primul caracter dintr-un substring al unui string dat. Diferenta dintre
cele doua metode este ca indexOf cauta substringul de la inceputul stringului pe cind lastindexOf cauta substringul
incepind de la capatul stringului dat.
Sa consideram urmatorul exemplu:
Var title =Oh bla dee oh bla da
Var newstring=title.indexOf(bla);
Newstring3
Var newstring2=title.lastIndexOf(bla);
Newstring214
Daca nu a fost gasit acest substring in stringul respectiv atunci va fi returnata valoarea 1. In asa fel putem sa veficam
aceasta valoare pentru a fi sigURL ca un string este in interiorul altuia.
If (title.indexOf(duh)==-1) alert(String not found !);
Conversia variabilelor de tip string

toLowerCase() va returna stringul respectiv convertit in caractere mici
toUpperCase() va returna stringul respectiv convertit in caractere mari
charCodeAt() returneaza codul caracterului aflat intre parantezele functiei
fromCharCode() returneaza valoarea alfanumerica pentru un cod caracter
Number()- converteste un string intr-un numar fara a tine cont de tip
Primele doua metode se explica singure astfel functia toLowercase() va returna stringul respectiv cu caractere mici pe
cind toUpperCase() va returna stringul respectiv folosind caractere mari.
Var string1=document.all.inputbox1.value;
Var string2=document.all.inputbox2.value;
If (string1.loLowerCase()==string2.toLowerCase()) alert(Strings are equivalent.);
Metode de convertire a stringURLlor de caractere, astfel daca folosim :
Myhtml=Penny Lane.italics();
Aceasta intructiune este identica cu urmatoarele instructiuni din html: <i>Penny Lane</i>
Pe de alta parte atit functiile fontcolor cit si fonsize amindoua necesita argumente. Astfel parametru fontcolor necesita o
culoare ca valoare si poate fi un numar hexazecimal sau poate fi o culoare ct. Fontsize ne da marime de caracter de la 1
la 7 care corespunde marimii fontului.
Vom considera in continuare urmatorul exemplu :
myhtml=Yellow submarine.fontcolor(yellow);
care este identic cu urmatoarele comenzii in html:
<font color=yellow>Tellow submarine</font>
Mai exista alte doua metode care ne permit sa formatam stringURL pentru a creea text cu tagURL HTML si anume
anchor(anchorname) si link(location). Anchor va adauga tagURL anchor si un nume la un string ca in exemplu
urmator:
Var myhtml=Let It Be.anchor(Song);
Care este identic cu urmatorul cod in html:
myhtml <a name=song>Let It Be </a>
Comanda link(location) pe de alta parte creeaza un link html la o anumita locatie:
Spre exemplu:
Var myhtml=Let it be.link(ex1.html);
Myhtml <a href=ex1.htm>Let It be</a>
Odata aceste stringURL create poti sa le plazezi in codul html folosind :
Document.all.elementid.innerHTML=myhtml;
Aceste functii care lucreaza cu variabile de tip string pot fi combinate pentru a creea functii complexe:
astchar = mystring.charAt(mystring.length-1);
In acest caz din stringul mystring citim ultimul caracter, pentru a realiza acest lucru folosim functiile:
Confidential
Page 84
3/25/2016
Mystring.length si charAt().
Vom prezenta in continuare un cod html in care folosim mai multe functii care ne permit operatii cu functiile string:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!-function replaceStr(origStr, deleteStr, replaceStr) {
var left = getStrLeft(origStr, deleteStr);
var right = getStrRight(origStr,deleteStr);
var newstring = left + replaceStr + right;
if (newstring != replaceStr)
document.all.newbox.value = newstring;
else
document.all.newbox.value = origStr;
}
function deleteStr (origStr, deleteStr) {
var left = getStrLeft(origStr, deleteStr);
var right = getStrRight(origStr,deleteStr);
var newstring = (left + right);
if (newstring != "")
document.all.newbox.value = newstring;
else
document.all.newbox.value = origStr;
}
function getStrLeft(origStr, findStr) {
var position = origStr.indexOf(findStr);
if (position == -1)
return "";
else
return (origStr.substring(0, position));
}
function getStrRight(origStr, findStr) {
var position = origStr.indexOf(findStr);
if (position == -1)
return "";
else
return (origStr.substring(position +
findStr.length,origStr.length));
}
//-->
</SCRIPT>
</HEAD>
<BODY >
<LABEL for = "origbox"> Original string: </LABEL>
<BR>
<INPUT type = "text" id = "origbox" style =
"width:400">
<BR>
<BR>
<LABEL for = "deletebox"> Delete: </label>
<INPUT type = "text" ID = "deletebox" >
<LABEL for = "replacebox"> Replace: </LABEL>
Confidential
Page 85
3/25/2016
<INPUT type = "text" id = "replacebox" >

<BR>
<BR>
<INPUT type = "button" id = "Delete" value =
"Delete String" onclick =
"deleteStr(origbox.value,deletebox.value)">
</BUTTON>
<input type = "button" id = "Replace" value =
"Replace String" onclick = "replaceStr(origbox.value,
deletebox.value, replacebox.value)"></BUTTON>
<BR>
<BR>
<LABEL for = "newbox"> New string: </LABEL>
<INPUT type = "text" id = "newbox" style =
"width:325">
</BODY>
</HTML>
Specificarea unui fisier care contine codul sursa pentru JavaScript

In loc sa tastam codul sursa in fisierul HTML putem sa creem un fisier text care sa fie folosit external pentru fisierul
nostru
HTML.
<html>
<head>
<title>my page</title>
<script src="jscript.js">
...
</script>
</head>
<body>
</body>
</html>
In acest caz in loc sa punem codul sursa intr-un fisier html il vom punem intr-un alt fisier care va fi apelat atunci cind
fisierul html va fi incarcat. In cazul nostru fisierul care contine codul sursa este jscript.js. Comanda folosita pentru a
accesa acest fisier este <script src=jscript.js>
Totdeauna fisierele externe au extensia js.
De asemenea este bine sa verificam daca cel care citeste paginile noastre web poate sa acceseze fisiere care contin cod
java script. Pentru a face acest lucru putem folosi urmatoarea sursa cod:
<noscript>
<b>this page uses javascript, so you need to get netscape navigator 2.0
or later!
<br>
<a href="http://home.netscape.com/comprod/mirror/index.html">
<img src="nsnow.gif"></a>
if you are using navigator 2.0 or later, and you see this message,
you should enable javascript by choosing network preferences from
Confidential
Page 86
3/25/2016
the options menu.

</noscript>
Creating and referencing external JavaScript libraries NS 3+, IE 4+

Back in the days of NS 2, if you wanted to use a piece of JavaScript code on multiple pages, it would mean, well, typing
out this same code on multiple pages. Most "mainstream" programming languages, such as C or C++, support "code
libraries", where a programmer can save a commonly used piece of code as a library file, and simply reference that file
from pages that all need to access and use that code, saving time and space. As JavaScript became more and more
popular, and people everywhere began creating more and more complex JavaScript codes, the nice people at NS saw the
need to extend JavaScript to too support external code libraries. In this tutorial, I'll discuss just exactly how to create
JavaScript libraries, and when you should use 'em. Sounds like fun!
Before we move forward, it's important to first point out that NS 2 and IE 3 do NOT support external JavaScript
libraries. I'll discuss how these "low level" browsers treat JavaScript libraries soon.
General syntax for creating JavaScript libraries

All JavaScript libraries consists of two parts 1) The library itself, which is simply a file, saved with the extension .js,
that contains some JavaScript code, and 2) A <script> tag, defined on the page(s) that uses the library, used to "connect"
to the library. For the sake of our discussion, let's pretend you've just created a fabulous code that writes out today's
date:
<script>
function todaydate(){
var today_date= new Date()
var myyear=today_date.getYear()
var mymonth=today_date.getMonth()+1
var mytoday=today_date.getDate()
document.write(myyear+"/"+mymonth+"/"+mytoday)
}
</script>
Using the above code, lets create a library out of it, so multiple pages can all display a nice date without having to
physically include the above code on that page.
Step 1: Open up your text editor (such as notepad), type out the above code, and save it as an individual file with the
extension .js (ie: displaydate.js). Type out everything above, except the surrounding <script> tags.
Step 2: On all pages that use the above library, create a reference to it by using the below code. It consist of a <script>
tag with the optional src property included inside:
<script src="displaydate.js">
</script>
Now, as mentioned in the beginning of this tutorial, NS 2 and IE 3 do not support external JavaScript libraries. So what
do you think will happen when these browsers sees the above reference to a library? Absolutely nothing! To them, its
just a no-good script that contains no code inside of it, which works to our advantage (degrades well).
While the biggest reason for using JavaScript libraries is obvious (allows you to easily distribute one code for use on
many pages), a secondary reason is not. A JavaScript library, when used on multiple pages, is actually more efficient
than directly embedding the code inside the library on each page. Once the browser encounters the library the first time
around, it saves the containing code in cache. Subsequent requests for the library on other pages will result in the library
being loaded from cache, or the speed demon!

Confidential
Page 87
3/25/2016
Using the JavaScript library syntax to overcome a document.write() bug

Deviating a bit, let's talk about a little lady bug found in the document.write() method. The document.write() method,
when used inside a table to write out text, can cause problems when viewed under NS 3 (only NS 3-). Specifically, the
output does not show! For example, if I were to include the below script at this point in the page:
<script>
document.write("hi there")
</script>
Viewers of NS 3 would see nothing, nada. The reason is because the code is inside a table, and the document.write()
method has trouble displaying the text when it's inside a holding cell for NS 3- users. The solution? While it's definitely
not pretty, one way to work it so the text shows for NS 3 users is to embed the code inside a JavaScript library. For some
reason known only to the creators of the NS browser, it works. So, assuming you've embedded the above
document.write() code inside a JavaScript library called "writetext.js", you would call it like any library to display the
text:
<script src="writetext.js">
</script>
Evenimentele caracteristice aplicatiei Netscape

Actiunile utilizatorilor in JavaScript se numesc evenimente. Browserul continuu monitorizeaza elementele documentelor
pentru a reactiona la actiunile userului. Vom discuta in acest capitol modul cum Netscape controleaza aceste
evenimente .
Cel mai simplu mod de a prelua un eveniment este modul cum este controlat un eveniment care a fost implementat
pentru prima data in netscape 2.x si IE ver 3.x. Acest eveniment este implementat in tag HTML . Mai jos este dat un
exemplu de document care foloseste acest mod in tag-URLle aplicatiei:
<html>
<head>
<title>Hello/Goodbye</title>
</head>
<body onload=alert(Hello) onUnload=alert(Goodbye)>
</body>
</html>
Acest exemplu va afisa un mesaj Hello cind pagina a fost incarcata si un mesaj Googbye cind ai renuntat la aceea
pagina.
Se observa cum fiecare din aceste evenimente are un atribut distinc. Pentru fiecare eveniment se pune un singur
statement:
alert(-----);
Exista de asemenea posibilitatea de a include diferite statemnetURL in eveniment folosind ; .
<html>
<head>
<title>Hello</title>
</head>
<body onLoad=alert(Hello!);alert(How are you?)>
</body>
</html>
Ca in orice alt script, tu nu ai nevoie de semicoloane dupa ultimul statement. Daca vei plasa fiecare din aceste
statemente pe o linie separata nu vei avea nevoie de semicoloane deloc
Confidential
Page 88
3/25/2016
<html>
<head>
</head>
<body onLoad=alert(Hello)
alert(How are you ?)>
</body>
</html>
Aceste functii sunt independente la caracterele folosite. Spre exemplu ONLOAD,onLoad si onload fac acelasi lucru in
interiorul unui cod HTML. Este bine stiut ca pentru a delimita un cod JavaScript in interiorul unui cod HTML se vor
folosi ghilimelele iar in interiorul ghilimelelor duble se vor folosi ghilimelele simple. Datorita acestui lucru este bine de
cele mai multe ori sa se defineasca o functie si aceasta functie sa fie chemata de catre evenimentul din cadru codului
html.
Vom prezenta mai jos un astfel de exemplu:
<html>
<head>
function welcome()
{
alert(Hello);
}
</script>
</head>
<body onLoad=welcome()>
</body>
</html>
Un alt evenimet care poate apare este onClick() care poate controla apasarea butoanelor de catre utilizator . Vom da in
continuare un exemplu:
function clicked()
{
alert(You clicked a button.);
}
</script>
<form>
<input type=button value=click here onClick=clicked()>
</form>
Evenimentele din Browser care trebuiesc privite ca si propietati

Cind JavaScript a debutat in Netscape Navigator 2.0x in Februarie 199, un mod obisnuit de a capta evenimente a fost in
tag HTML . Cele mai multe dintre obiecte au unul sau mai multe evenimente care puteau fi capturate prin aceasta
metoda. Deoarece fiecare dintre acestea au fost plasate in tag-ul corespunzator, ele au devenit propietatii read-only
ponetru JavaScript.
Odata pagina incarcata tu nu poti sa schimbi modul cum aceste evenimente sunt controlate. Acest mod de implementare
mai este inca suportat si este de cele mai multe ori cea mai buna solutie , dar au fost introduse si functii aditionale .
In Netscape 3.0x fiecaryi eveniment putem sa-I asignam o functie cum ar fi spre exemplu:
Object.eventhandler=function;
Sau in caz concret window.onload=welcome;

Confidential
Page 89
3/25/2016
In acest caz a fost asignata functia welcome la incarcarea fisierului. Se observa ca in acest caz evenimentul trebuie scris
folosind caractere mici cum ar fi onload in loc onLoad. In versiunea 4.0x acest lucru nu mai este cerut dar el este cerut
de versiunea 3.x pentru Netscape. De aceea evenimentele scrise cu litera mica sunt compatibile in versiunile mai mici.
Sa consideram un exemplu prezentat anterior drept referinta:
<html>
<head>
function welcome()
{
alert(Hello);
}
</script>
</head>
<body onLoad=welcome()>
</body>
</html>
Vom prezenta in continuare acelasi script dar scris acum in JavaScript 1.1.
<html>
<head>
function welcome()
{
alert(Hello);
}
window.onload=welcome;
</script>
</head>
<body>
</body>
</html>
Sa consideram de asemenea exemplu cu butonul descris anterior:
<!
function clicked()
{
alert(You clicked a button.)
}
//
</script>
<form name=myform>
<input type=button value=click here name=mybutton onClick=clicked()>
</form>
Echivalentul tepretic in JavaScript 1.1 pentru acest script este:
<html>
<head>
<!
Confidential
Page 90
3/25/2016
function clicked()
{
alert(You clicked a button);
}
//
</script>
</head>
<body>
<form name=myform>
<input type=button value=click here name=mybutton>
</form
document.myForm.mybutrton.onclick=clicked;
</script>
</body>
</html>
Aici trebuie sa fim atenti deoarece numai functia onLoad o putem apela inainte de a defini obiectul pentru ca este
incarcata inainte de a fi incarcat obiectul respectiv, dar in cazul unui button nu este corect deoarece apelam un obiect
care nici nu a fost creat.
Vom prezenta in continuare o lista a obiectelor si a evenimentelor care sunt suportate de acestea:
Object
Window
Link
Area*
Image*
Form
Text
textarea
password
Event Handler Property

onload
onunload
onblur
onfocus
onclick
onmouseout*
onmouseover
onmouseout*
onmouseover*
onabort*
onerror*
onload*
onreset*
onsubmit
onblur
onchange
onfocus
onselect
Button
reset
submit
radio
checkbox
onclick
Select
onblur
onchange
onfocus
Confidential
Page 91
3/25/2016
FileUpload
onblur*
onfocus*
onselect*
Ce este cu steluta este suportate de Netscape numai in versiunea 1.1 si nu in versiunea 1.0 .
Capturarea evenimentelor
Netscape 4.0x ne permite sa folosim o noua metoda de captare a evenimentelor. In versiunile vechi exista un singur mod
si anume avem funtii in html si JavaScript. In versiunea 4.0x tu poti sa captezi evenimentele in obiecte cum ar fi
ferestre, layere sau documente inainte ca venimentul sa-si atinca tinta. Spre exemplu poate veti dori ca obiectele
document sa preia evenimentele mouseover (trebuie sa ne aducem aminte ca mouseover este in eveniment, pe cind
onmouseover este o functie care preia evenimente) nu conteaza unde apar in document.
JavaScript functii referitoare la evenimente te lasa acum sa capturezi si sa preiei evenimente inainte ca acestea sa isi
atinga tinta. Implicit toate evenimentele sunt capturate de tinta lor implicit. Spre exemplu daca utilizatorii apasa un
buton atunci evenimentul este capturat ede functia onClick .Va trebui explicit sa permiti aceasta capabilitate pentru
obiecte cum ar fi window, layer si document. Aceasta capabilitate poate fi scoasa in orice moment. Pentru a realiza acest
tasc se vor folosi urmatoarele metode:
Window.captureEvents()
Layer.captureEvents()
Document.captureEvents()
Window.releaseEvents()
Layer.releaseEvents()
Documenr.releaseEvents()
Spre exemplu daca vrei ca un document sa capturezwe evenimentele in orice moment cind documentul este incarcat, va
trebui sa rulezi functia window.captureEvents() cind pagina este incarcata. CaptureEvents() and releaseEvents() necesita
un argument care sa specifice ce tip de document avem.
Window.captureEvents(Event.click);
Window.captureEvents(Event.mousedown);
Window.releaseEvent(Event.mousedown);
Window.captureEvents(Event.mouseup);
Window.releaseEvents(Event.mouseup);
Window.captureEvents(Event.mousedown | Event.mouseup)
Window.releaseEvents(Event.mousedown | Event.mouseup )
Se observa ca evenimentul si nu functia care captureaza evenimentul este scris cu litere mari. Astfel Event.click este
valoarea evenimentului click pe cind Event.keypress este valoarea returnata de functia keypress.
Se stie de asemenea ca pot fi realizate mai multe evenimente in acelasi timp. Acest lucru se poate realiza daca se va
folosi separatorul | pipe. Sa consideram urmatorul script:
Window.captureEvents(Event.click | Event.mousedown | Event.mouseup);
Window.captureEvents(Event.mousedown);
Window.captureEvents(Event.mouseup);

Confidential
Page 92
3/25/2016
Procesarea evenimentelor capturate

Functia captureEvents() nu are nici un efect pina nu vei asigna o functie care sa preia evenimentul respectiv. Pentru a
prelua toate evenimentele de tip click de pe pagina ta va trebui sa creezi o functie care sa preia acest eveniment si o
functie care va fi specifica fiecarui eveniment. Mai jos este un exemplu:
Function processClicks(e)
{
window.captureEvents(Event.CLICK);
window.onclick=processClicks;
}
Fara a specifica o functie care sa preia evenimentele click la nivelul ferestrei, toate evenimentele click vor fi capturate la
acest nivel si nu va avea nici o influenta pentru ca nu va fi transmis la o functie care sa proceseze acest eveniment. Se
observa existenta parametrului e in definirea functiei.
Deoarece obiectele de tip Event nu sunt suportate de versiunile vechi de Navigator, sau de IE atunci functia
window.captureEvents() va trebui sa aiba un if care sa ne permita sa verificam daca browserul respectiv suporta obiecte
Event. Putem de asemenea sa verificam daca browserul suporta window.captureEvents() sau document.layer . Vom
prezenta mai jos un exemplu:
Function processClick(e)
{
// comenzii care sa controleze evenimentele click
}
if (window.captureEvents)
window.captureEvents(Event.click); // apasarea in fereastra este un eveniment
window.onclick=processClicks; / / onclick este functia care preia acest eveniment
Functia de procesare a evenimentelor

O functie care proceseaza evenimente poate returna o valoare booleana. Spre exemplu un link poate fi conditional ,
urmat de o functie care va procesa evenimentele de tip click si vor returna true si nu va procesa nici o functie cind
evenimentul returneaza false.
function microsoft(e)
{
return false; //
}
</script>
In acest exemplu pentru ca functia returneaza false atunci aceasta functie nu va returna nimic.
<a href=http://www.netscape.com onClick=return microsoft()>Netscape</a>
Aceasta functie poate fi folosita sa verifice daca informatia introdusa de utilizator este corecta si daca este atunci va
putea fi accesat acest link daca nu atunci va trebui sa anuleze link-ul respectiv ceea ce face exemplu de mai sus.
Vom vedea in continuare un alt exemplu in acest caz pentru o forma pe care o trimitem.
<form name=myform action=>
.
<input type=submit value=submit>
</form>
function cancelSubmit(e)
{
Confidential
Page 93
3/25/2016
return false; //anuleaza evenimentul

}
document.myForm.onsubmit=cancelSubmit;
</script>
Trecerea valorilor returnate de evenimentelor

Inainte de a returna false sau adevarat un eveniment proceseaza functii care pot sa trimita un eveniment la un anumit
receiver. Fiecare obiect care poate controla evenimente se numeste eveniment receiver. Spre exemplu daca vrei sa
capturezi toate apasarile de mouse in un document, exceptie facind acelea pentru un buton specific, poti sa verifici daca
itentia este acel button. Daca asa , atunci poti sa trimiti un obiect prin handleEvent().
Spre exemplu daca vrei ca toate click-URLle sa mearga la primul link de pe o pagina, poti sa folosesti acest eveniment:
Function processClicks(e)
{
document.links[0].handleEvent(e);
}
Bineinteles ca acest link trebuie sa aiba posibilitatea de controla acest eveniment.
Sa consideram urmatorul exemplu:
<A HREF=.>.</a>
function processClicks(e)
{
}
function firstLink(e)
{
alert(Evenimentul primului link din document va apela aceasta functie )
}
window.captureEvents(Event.click);
window.onclick=precessClicks;
document.links[0].onclick=firstLink;
</script>
In acest caz oriunde ai apasa in interiorul unui document el va fi reditionat la primul link din document. Si atunci va fi
accesata functia firstLink().
Sa vedem o alta metoda pentru primul link dintr-un document:
<a href=></a>
function processClicks(e)
{
alert(Evenimentele controlate de fereastra vor chema aceasta functie);
document.link[0].handleEvent(e);
}
{
alert(Primul eveniment care controleaza acest link va accesa aceasta functie);
}
window.captuewEvents(Event.Click);
window.onclick=processClicks;
document.links[0].onclick=firstLink;
</script>
Confidential
Page 94
3/25/2016
Chiar daca tu apesi pe link objectul window si anume functia onclick va captura acest eveniment . Evenimentele sunt
duse in jos in ierarhie de la nivelul mare la nivelul de jos.
De asemenea numai primul eveniment pe pagina va captura acest eveniment. Spre exemplu in scriptul care urmeaza
nici unul dintre link-URL vor fi cancelate si atunci cind vei apasa pe pagina vor fi transferate la o noua pagina:
<a href=http://www.netscape.com/>Netscape</a><br>
<a href=http://www.microsoft.com>Microsoft</a>
function processClick(e)
{
}
{
return false;
}
window.captureEvents(Event.CLICK);
window.onclick = processClicks;
document.links[0].onclick = firstLink;
</script>
Propagarea evenimentelor
Daca este chemata o functie routeEvent() functie care se gaseste in interiorul unei functii ce evalueaza un eveniment .
Daca alt obiect (document sau layer) incearca sa captureze un eveniment, atunci o functie de procesare a evenimentului
va apare.
Functia routeEvent() returneaza valoarea returnata de urmatorul captor de evenimente care capteaza evenimentul
respectiv daca exista. Daca nu exista nici un captor de evenimente in ierarhie atunci returneaza false sau underfined,
null.
Un eveniment cade jos catre tinta pe care urmeaza sa o genereze. Nu preia functii generatoare de evenimente care nu se
gasesc in calea ei. Spre exemplu daca apesi pe un link si acest link apeleaza functia routeEvent() functie care se gaseste
in interiorul obiectului fereastra si aici nu gaseste nici o functie generatoare de evenimente atunci o sa treaca la obiectele
de tip document . Daca la rindul acestora obiectele de tip document nu au functii care sa genereze evenimente spre
exemplu document.onclick atunci se va captura link-ul insusi. Daca acest link nu are nici o functie care preia evenimente
atunci functia routeEvent() va returna false si evenimentul se va evapora.
In cadru unui call al functiei routeEvent() pentru un evenimet care trebuie sa afiseze o noua pagina, actiunea are loc fara
a returna capturarea obiectului.
Sa consideram urmatoarele documente:
main.html
Acest fisier va contine urmatorul cod :
<html>
<head>
<title>Main Document #1</title>
function mainProcessLinks(e)
Confidential
Page 95
3/25/2016
{
alert(The event was captured in the main document.)
}
document.captureEvents(Event.click);
document.onclick=mainProcessLinks;
</script>
</head>
<body>
<ILAYER name=sub src=sub1.html><ILAYER>
<form>
<input type=button name=mainButton Value=main Button onclick=alert(this.name)>
</form>
</body>
</html>
sub1.html
<html>
<head>
<title>Layer Document #1</title>
function layerProcessLinks(e)
{
alert(The event was captured in layer document.)
}
document.captureEvents(Event.CLICK);
document.onclick=layerProcessLink;
</head>
<body>
<form>
<input type=button name=layerButton value=layer button onclick=alert(this.name)>
</form>
</body>
</html>
Exercitii:
In continuare vom analiza si vom folosi pentru training mai multe exemple de programele care va pot fi folositoare:
Exemplu 1
=======
<script language ="JavaScript">
function nu_apasa_tasta()
{
alert('Tastatura a fost inhibata);
}
document.onkeydown=nu_apasa_tasta;
</script>

Confidential
Page 96
3/25/2016
Acest script defineste o functie nu_apasa_taste() care este apelata de cite ori o tasta este folosita. Functia cea mai importanta este
Document.onkeydown care este apelata de cite ori o tasta a fost apasata si care in cazul de fata afiseaza un mesaj care ne spune ca nu
putem folosi tastatura.
Exemplu 2
========
Mai jos este un alt script care de data asta asteapta o perioada de timp pentru a face saltul de la pagina curenta la o noua pagina. Este
folositor in momentul in care dorim sa ne mutam site-ul si pentru o perioada de timp trebuie sa realiza transferul de la o pagina la alta.
var noua_pagina="http://www.ecadro.com"
document.write(Va rugam sa asteptati pina ati fost trimis la noua pagina ' + noua+pagina)
function DeschideNouaPag()
{
location.href=noua_pagina;
}
setTimeout ("DeschideNouaPag()", 1000);
</script>
Variabila noua_pagina contine informatii despre pagina unde vrem sa ajungem iar functia DeschideNouaPag() este folosita pentru a
trimite utilizatorul la noua pagina dupa un interval de timp. De obicei se pune un link si o functie care face transferul automat.
Exemplu 3
========
Acest script va rula o melodie atunci cind vom pagina respectiva.
<!-if(navigator.userAgent.indexOf("MSIE") != -1)
document.writeln ('');
else
document.writeln ('<EMBED SRC="imagine.mid" AUTOSTART="true" HIDDEN="true" VOLUME="80%">');
//-->
</script>
<script language="Javascript">
<!-Exemplu 4
========
Sa definim o functie in JavaScript care sa ne afiseze timpul in acest moment:
<html>
<head>
<title>
</title>
function getTime()
{
var acum=new Date();
// citim data curenta si o storam in variabila acum
var ora=acum.getHours();
// din variabila acum citim ora
var minute=acum.getMinutes();
// din variabila acum citim minutele
var secunde=acum.getSeconds();
// din variabila acum citim secundele
acum=null;
var am_pm="";

Confidential
Page 97
3/25/2016
// variabila care ne va spune daca este dupa amiaza sau dimineata

if (ora>=12)
{
ora-=12;
am_pm="PM";
}
else
{
am_pm="AM";
}
if ( minute < 10) minute="0" + minute;
return ora+":"+minute+":"+secunde + " "+ am_pm;
}
</script>
</head>
<body>
<form name="ora">
<input name="ora_text" size=8>
</form>
<script>
var a1=getTime();
document.ora.ora_text.value=a1;
</script>
</body>
</html>
Exemplu 5
========
Este un calculator care ne permite sa efectual operatii simple scris in JavaScript.
<html>
<head>
<title>
Calculator in JavaScript
</title>
</head>
<body>
<form name="calculator">
<input name="afisaj" size=9><br>
// defineste cimpul de afisaj
<input type="button" value="7" nClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'7';">
// adauga valoarea 7 la valoarea care se gaseste in cimpul de afisaj
<input type="button" value="8" nClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'8'">
<input type="button" value="9" nClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'9'">
<input type="button" value=":" onClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'/'"><br>
// adauga simbolul / la valoarea care se gaseste in cimpul de afisaj
<input type="button" value="4" onClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'4'">
<input type="button" value="x" onClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'*'"><br>
// adauga simbolul * la valoarea care se gaseste in cimpul de afisaj
<input type="button" value="-" onClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'-'"><br>
// adauga simbolul - la valoarea care se gaseste in cimpul de afisaj

Confidential
Page 98
3/25/2016
<input type="button" value="." onClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'.'">

// adauga simbolul . la valoarea care se gaseste in cimpul de afisaj
<input type="button" value="+" onClick="document.calculator.afisaj.value=document.calculator.afisaj.value+'+'">
// adauga simbolul + la valoarea care se gaseste in cimpul de afisaj
<input type="button" value=" = " onClick="document.calculator.afisaj.value=eval(document.calculator.afisaj.value)">
// evalueaza expresia care se gaseste in cimpul de afisaz si returneaza valoarea obtinuta
<br>
<input type="button" value="Clear" onClick="document.calculator.afisaj.value=' '">
</form>
</body>
</html>
Exemplu 6
========
In acest exemplu vom folosi JavaScript pentru a creea un meniu dinamic. In acest caz vom folosi imaginii pe post de link si in functie de
pozitia mouse-ului vom schimba imaginea meniului. Astfel daca cursorul se gaseste pe imaginea corespunzatoare meniului 1 atunci
aeasta va fi inlocuita cu o alta imagine, daca in schimb nu se mai gaseste pe aceea imagine va fi inlocuita cu imaginea initiala, daca se
va apasa pe imagine se va deschide o fereastra cu continutul unui fisier html.
<html>
<head>
<title>
</title>
</head>
<body>
<A href="#" onMouseOut="document.but1.src='but1_on.gif';"
onMouseOver="document.but1.src='but1_off.gif';"
onClick="window.open('ex1.htm', 'win1');"
>
<IMG SRC="but1_on.gif" name="but1">
</A><br>
>
</A><br>
>
</A><br>
<br>
</body>
</html>
Aceasi varianta poate fi scrisa in asa fel incit sa nu mai deschida o noua fereastra ci sa deschida in anumita fereastra dintr-un frame
folosind optiunea target din structura comenzii folosita pentru link:
<html>
<head>
<title>
</title>
</head>
<body>
<A href="ex1.htm" onMouseOut="document.but1.src='but1_on.gif';"
onMouseOver="document.but1.src='but4_on.gif';"
target=princ>

Confidential
Page 99
3/25/2016
</A><br>
target=princ>
</A><br>
target=princ>
</A><br>
<br>
</body>
</html>
Exemplu 7
========
In acest caz de cele mai multe ori trebuie sa incarci in memorie imaginile pentru butoane. Pentru a realiza acest lucru
trebuie sa folosim un script care sa incarce imaginiile in memorie.
image1 = new Image();
image1.src = "image1.gif";
image2 = new Image();
image2.src = "image2.gif";
</script>
Exemplu 8
========
Crearea unui image slide show. Pentru a creea un slide show va trebui mai intii sa adunam citeva imaginii pe care vrem
sa le punem in show.
Va trebui apoi sa incarcam aceste imaginii in memorie inainte de a fi afisate, acest lucru este necesar deoarece
schimbarea intre imaginii trebuie sa se faca instantaneu fara pauze.
<head>
<script language="JavaScript1.1">
<!-var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
image3.src="thirdcar.gif"
//-->
</script>
</head>
Se observa ca in acest caz codul pentru imagini a fost inserat in hederul fisierului html .
Codul pentru a afisa prima imagine este:
<body>
<img src=firstcar.gif name=slide width=100 height=56>
</body>
Se observa ca am dat imagini un nume care ne va permite sa realizam manipularea ferestrei pentru a accesa imaginea.
Confidential
Page 100
3/25/2016
<!
var step=1
function slideit()
{
if (!document.images)
return
document.images.slide.src=eval(image+step+.src)
if (step<3)
step++
else
step=1
set Timeout(slideit(),2500)
slideit()
//
</script>
Daca vom pune aceste functii impreuna intr-o pagina atunci o sa avem un show cu imaginii care se schimba.
<html>
<head>
<!-var image1=new Image()
//-->
</script>
</head>
<body>
<img src="firstcar.gif" name="slide" width=100 height=56>
<script>
<!-//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
Confidential
Page 101
3/25/2016
</body>
</html>
Exemplu 9
========
Crearea unui slide show folosind mouse-ul pentru a face tranzitia de la o imagine la alta.
La inceput va trebui sa folosim un tag de imagini pentru a pune un link la o imagine existenta :
<a href=javascript:slidelink()>
<img src=firstcar.gif name=slide width=100 height=56>
</a>
Ce avem este javascript:slidelink() care in loc sa apeleze un URL va executa o functie avaScript.
In urmatoarea etapa va trebui sa definima functia slidelink().
<script>
<!
var step=1
var whichimage=1
function slideit()
{
return
document.images.slide.src=eval(image+step+.src)
whichimage=step
if (step<3)
step++
else
step=1
setTimeout(slideit(),1800)
}
slideit();
function slideit()
{
if (whichimage==1) window.location=link1.htm
else
if (whichimage==2) window.location=link2.htm
else if (whichimage==3) window.location=link3.htm
}
//
</script>
Dupa cum se observa in acest caz avem un parametru whichimage care tine minte care imagine a fost incarcata inainte
de a schimba pagina web prin pastrarea parametrului care se gaseste in step. Apoi in functie de acest parametru se va
rechema un alt fisier html.
<html>
<head>
<!-//preload images
Confidential
Page 102
3/25/2016

//-->
</script>
</head>
<body>
<a href="javascript:slidelink()"><img src="firstcar.gif" name="slide" border=0 width=100 height=56></a>
<script>
<!-var step=1
var whichimage=1
function slideit(){
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
else if (whichimage==3)
}
//-->
</script>
</body>
</html>
Exemplu 10
=========
Deschiderea unei ferestre si inchiderea ei automata :
var popupWin = null;
// url este pagina care urmeaza a fi deschisa
// name este numele ferestrei
// rs=resizable
// sc=scroll
// w=width
// h=height
function openWindow(url, name, rs, sc, w, h) {
Confidential
Page 103
3/25/2016
var resize = "";

var scroll = "";
if (isNav3 || isNav4 || isIE4) {
if (rs)
resize = "resizable,";
if (sc)
scroll = "scrollbars,";
if (popupWin != null && !popupWin.closed) {
oldWin = popupWin;
oldWin.name = "oldWin";
oldWin.close();
}
popupWin = window.open(url, name, resize + scroll + 'width=' + w + ',height=' + h);
if (popupWin.opener == null)
popupWin.opener = popupWin;
popupWin.opener.name = "origWin";
popupWin.focus();
return false; // for links
} else {
return true;
}
}
var referPath
referPath = window.location
//-->
</SCRIPT>
Exemplu 11
========
Banners cu text care se roteste
Dynamic HTML deschide noi posibilitatii. Cu versiunile anterioare de HTML si JavaScript nu a fost posibil sa
schimbam continutul unei pagini decit dupa ce a fost incarcata in memorie.
Vom incerca in acest exemplu sa vedem cum putem schimba un element code. Vom creea un banner cu text rotational .
Pentru a realiza acest lucru v atrebui mai intii sa :
- determinam care este browserul care ruleaza
- sa creem un container pentru scriptul care roteste textul
- sa modificam codul HTML existent
- Sa rotim banner-ul
O sa consideram primul pas si anume determinarea browserului care ruleaza. Vom folosi pentru detectare Javascript 1.2
care a fost prima data suportat de Navigator 4.0 si Explorer 4.0 si trebuie sa fim sigURL ca utilizatorii care au browsere
vechi il pot folosi.
Sunt doua metode pentru a determina care este browserul care ruleaza:
- Poti sa evaluezi navigator.appVersion si navigator.userAgent.
- Poti sa verifici daca browserul supporta anumite obiecte sau propietatii pe care scriptul le cere.
Scriptul pe care il prezentam creeaza doua variabile care sunt folosite pentru a determina daca browserul care ruleaza
este Navigator 4.0 or >4.0 sau Explorer 4.0 sau >4.0.
<script LANGUAGE=JavaScript>
<!
var bname=navigator.appName;
Confidential
Page 104
3/25/2016
var bVer=parseInt(navigator.appVersion);
var NS4=(bName==Netscape&&bVer>=4);
var IE4=(bName==Microsoft Internet Explorer && bVer>=4);
//
</script>
Scriptul de mai jos face acelasi lucru verificind daca browserul suporta anumite obiecte specifice:
<!
var NS4=(document.layers)?1:0;
var IE4=(document.all)?1:0;
if (IE4||NS4) document.write(Ai un browser de generatie >= 4.0);
//
</script>
NS4 este true daca browserul supporta obiecte de tipul document.layers (Netscape ver 4.0 sau >4.0). Daca supporta
obiecte de tipul document.all atunci browserul este IE 4.0 sau mai mare. Ultima comada de tip if verifica daca NS4 sau
IE4 sunt true si scrie un mesaj pentru utilizator confirmind existenda unui browser care are versiunea >=4.0.
Containerul HTML
Este timpul apoi sa creem data care va fi inserata la un anumit punct in document. Trebuie sa definim exact pozitia
bannerului nostru si de aceea vom folosi <span>..</span>.
Navigator 4.x poate sa scrie cod HTML la un element pozitionat (position:absolute) asa ca va trebui sa pozitionam
elementul respectiv. Dar deoarece va trebui sa plasam elemntul respectiv in document va trebui sa specificam
elementele de pozitionare
left si top.
<span id=banner style=position:absolute;></span>
Daca vrei sa pozitionezi bannerul folosind coordonatele exacte putem folosi propietatile left si top.
<span id=banner style=position:absolute; left: 100; top: 300;>
</span>
Am promis ca vom creea un script care poate rula si in browseri mai vechi de versiunea 4.0 . De aceea daca ai un
browser care este mai vechi de versiunea 4.0 atunci va trebui sa pui intre <span></span> textul dorit. Daca in schimb nu
vrei un banner static sau nu ai unul din browserele vechi va trebui sa pastrezi definitia <span></span> goala.
In functie de cum ai decis sa pui acest element in document, el va trebui sa fie urmat de doi <BR>. Deoarece este un
element pozitionat continutul care a fost plasat dupa banner nu conteaza pentru spatiul bannerului. De aceea doua
tagURL <BR> sunt necesare.
Daca ne uitam la definitia functiei <SPAN> de mai sus care arata ca mai jos:
<SPAN ID=banner style=position:absolute;></span>
Astfel atributul ID este similar cu atributul NAME din definitiile folosite in codul HTML . Aceast atribut ID va fi folosit
pentru a referi elementul in JavaScript. Astfel in Netscape acest obiect va fi referit de document.banner pecind in
Internet Explorer el este referit de document.all.banner sau simplu banner .
Acum poate ai inteles de ce este necesar sa folosim functia pentru detectarea browserului.Astfel in concluzie putem
spune ca Microsoft si Netscape au ajuns la un comun punct de vedere in ceea ce priveste CSS dar nu au ajuns in ceea ce
Confidential
Page 105
3/25/2016
priveste reprezentarea obiectelor. Netscape trateaza pozitionarea elementelor ca si o noua fereastra browser, asa ca poti
sa scrii in obiectele document, pe cind IE are o propietate care se refera la continutul din interior: innerHTML .
De aceea este necesar sa scriem o functie care aloca continutul obiectelor.
Function display(id, str)
{
if (NS4)
{
with(document[id].document)
{
open();
write(str);
close();
}
}
else
{
document.all[id].innerHTML=str;
}
}
Pentru a roti bannerul nostru vom folosi aceasta functie :
display(banner,new code here);
Rotirea mesajelor
Acum va trebui sa punem totul impreuna pentru a face bannerul sa se roteasca. Pentru inceput va trebui sa setam
evenimentul
Onload pentru a porni bannerul.
onload=start;
Deoarece onload este o propietate a unui obiect window, poti sa omiti specificatia obiectului. In acest caz window este
obiectul implicit.
Functia start() va porni asa cum ii spune si numele bannerul respectiv.
Function start()
{
setInterval(update(),2000);
}
Se observa ca am asignat functia setInterval() la o variabila, deci va fi posibil sa oprim bannerul. Vom folosi
setInterval() pentru a apela functia update() la fiecare interval de 2000 ms care sunt de fapt 2s.
In general, the setInterval() este o functie care apeleaza o expresie sau o alta functie dupa ce un numar de millisecunde
au trecut. Acesta functie de timp va continua pina cind fereastra, frame-ul a fost inchis sau functia clearInterval() a fost
apelata.
Var varName=setInterval(statement,msec);
Se observa ca aplicatia de tip banner nu este apelata decit dupa ce pagina a fost in intregime incarcata, pentru ca functia
a fost initializata de evenimentul onload. Daca acest lucru nu este ceva care te multumeste poti sa stergi acest cod si sa
pui oriunde
In document urmatorul script:
Confidential
Page 106
3/25/2016
start();
</script>
Asa cum vezi functia update()este functia care avanseaza bannerul si reseteaza counter-ul daca ultimul element din array
a fost atins.
Function update()
{
display(banner,ar[num]);
num++;
if (num==ar.length) num=0;
}
In vectorul ar vom pastra messajele din banner:
Var ar=new Array();
ar[0]=<STRONG>Hot sites:</STRONG><a href=/js> Doc JavaScript</a>
ar[1]=<strong>Hot sites</strong><a href=/dhtml> Dynamic HTML Lab
ar[2]=<strong>Hot sites:</strong><a href=/3d> 3D Animation Workshop</a>
Daca vom initializa variabila num cu valoarea 0 atunci bannerul va porni cu primul mesaj.
Var num=0;
Codul aplicatiei:
<HTML>
<HEAD>
<TITLE>Title Here</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;
onload = start;
var ar = new Array();
ar[0] = "<STRONG>Hot sites:</STRONG> <A HREF='/js/'> -->Doc JavaScript</A>";
ar[1] = "<STRONG>Hot sites:</STRONG> <A HREF='/dhtml/'> -->Dynamic HTML Lab</A>";
ar[2] = "<STRONG>Hot sites:</STRONG> <A HREF='/3d/'> -->3D Animation Workshop</A>";
var num = 0;
function start() {
setInterval("update()", 2000);
}
function update() {
display("banner", ar[num]);
num++;
if (num == ar.length) num = 0;
}
function display(id, str) {
if (NS4) {
with (document[id].document) {
open();
write(str);
close();
}
} else {
Confidential
Page 107
3/25/2016
document.all[id].innerHTML = str;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SPAN ID="banner" STYLE="position: absolute;"><I>the banner -->
is loading</I></SPAN><BR><BR>
</BODY>
Exemplu 12
=========
Folosirea functiei <select></select> pentru a creea un meniu.
<html>
<head>
<title></title>
<SCRIPT LANGUAGE="JavaScript">
<!-function load(form) {
var url = form.list.options[form.list.selectedIndex].value;
if (url != "") location.href = url;
return false;
}
// -->
</SCRIPT>
</head>
<FORM NAME="menu" METHOD="POST" onSubmit="return load(this)">
<SELECT NAME="list" onChange="load(form)">
<OPTION VALUE="http://www.ecadro.com/princ.html" SELECTED>Corporate Info
<OPTION VALUE=" http://www.ecadro.com/cinfo.html">Specials&News
<OPTION VALUE=" http://www.ecadro.com/conv_2d.html">2D Conversion
<OPTION VALUE=" http://www.ecadro.com/conv_3d.html">3D Conversion
<OPTION VALUE=" http://www.ecadro.com/fea_3d.html">FEA Models
<OPTION VALUE=" http://www.ecadro.com/render_3d.html">Rendering
<OPTION VALUE=" http://www.ecadro.com/price.html">Price
<OPTION VALUE=" http://www.ecadro.com/Contact.htm">Contact us
<OPTION VALUE=" http://www.ecadro.com/gallery.html">Gallery
</SELECT>
<INPUT TYPE="submit" VALUE="Load">
</FORM>
</body>
</html>

Confidential
Page 108
3/25/2016
DHTML INTRODUCERE
DHTML ne ajuta sa creem documente care sa incorporeze layere, pozitionare, selectare de pagina si animatie pe o
singura pagina de web folosind script si pagini de stil.Pentru a creea un cod DHTML care sa ruleze in orice browser, exista o
anumita insiruire de comenzii care trebuiesc respectate.
1.
Inainte de a realiza un proiect va trebui sa-ti pui ideeile pe hirtie , acestea cuprizind informatii detaliate despre
grafica si iteratiile din pagina, de asemenea va trebui sa te duci sa gasesti resurse in DHTML pentru ca poate nu esti
la fel de documentat ca in JavaScript si Style Sheet development.
2. Creeaza-ti mediul aplicatiei tale prin programele scrise in JavaScrpt care sa-ti permita sa citeste compatibilitatea
browser-ului si rezolutia ferestrei. Gndestete cum vrei sa afisezi pagina ta fie intr-o fereastra care exista, fie intr-un
frame fie intr-o fereastra noua.
3. Planificati si dezvoltati grafica pentru a beneficia de avantajele mediului DHTML incluzind marimea ferestrei si
pozitia.
4. Incepe prin a creea foi cu layer de stil si umplele cu grafica si text.
5. Seteaza-ti variabilele DOMS (Document Object Switch) astfel ca programul tau sa ramina compatibil intre
browsere.
6. Implementeaza un script pentru incarcarea imaginiilor in memorie daca vrei sa ai animatiei in timp real.
7. Pozitioneaza dinamic layerele dupa ce imaginea a fost incarcata in memorie.
8. Creeaza animatia pentru introducere si pentru a pastra site-ul interesat.
9. Adauga controale interactive pentru navigatie in meniu si pentru scroll in pagina.
10. Pune in comun ceea ce ai invatat cu alti.
Crearea mediului pentru site-ul tau
Setarile pentru mediu browserului te va ajuta sa vizualizezi modul cum va arata pagina ta . Tot aici va trebui sa faci
separatie intre browsers care suporta DHTML si cei care nu suporta.
O astfel de rutina este prezentata mai jos:
function Is()
{
var agent=navigator.userAgent.toLowerCase();
this.major=parseInt(navigator.appVersion);
this.minor=parseFloat(navigator.appVersion);
this.ns=((agent.indexOf(mozilla)!=-1)&&((agent.indexOf(spoofer)==-1)&&
(agent.indexOf(compatible)==-1)));
this.ns2=(this.ns&&(this.major==3));
this.ns4b=(this.ns&&(this.major<=4.04));
this.ns4=(this.ns&&(this.major>=4));
this.ie=(agent.indexOf(msie)!=-1);
this.ie3=(this.ie&&(this.major==2));
this.ie4=(this.ie&&(this.major>=4));
this.op3=(agent.indexOf(opera)!=-1);
this.win=(agent.indexOf(win)!=-1);
this.mac=(agent.indexOf(mac)!=-1);
this.unix=(agent.indexOf(X11)!=-1);
}
Var is=new Is();// este variabila care apelata in script ne va returna ce tip de browser avem.
Confidential
Page 109
3/25/2016
Pentru a afla compatibilitatea browserelor se folosesc agentii navigator.userAgent si navigator.appVersion sunt testati
pentru a vedea care este valoarea obiectelor lor.Se testeaza astfel daca browserul este Netscape, Explorer , Opera apoi se
testeaza care este versiunea si care este platforma de operare.
Aceaste teste sunt necesare pentru ca unele din aceste browsere au functii care realizeaza incarcarea imaginiilor cum ar
fi spre exemplu Netscape cu versiune mai mare de 4.04.
Sa creem un program html care foloseste rutina anterioara si care afiseaza in browser aceste verificarii:
<HTML>
<HEAD>
<title>
Detectarea Browserului
</title>
function Is()
{
var agent=navigator.userAgent.toLowerCase();
this.major=parseInt(navigator.appVersion);
this.minor=parseFloat(navigator.appVersion);
this.ns=((agent.indexOf('mozilla')!=-1)&&((agent.indexOf('spoofer')==-1)&&
(agent.indexOf('compatible')==-1)));
this.ns4b=(this.ns&&(this.major<=4.04));
this.ns4=(this.ns&&(this.major>=4));
this.ie=(agent.indexOf("msie")!=-1);
this.ie3=(this.ie&&(this.major==2));
this.ie4=(this.ie&&(this.major>=4));
this.op3=(agent.indexOf("opera")!=-1);
this.win=(agent.indexOf("win")!=-1);
this.mac=(agent.indexOf("mac")!=-1);
this.unix=(agent.indexOf("X11")!=-1);
document.writeln("navigator.userAgent=");document.writeln(navigator.userAgent);document.writeln("<br>");
document.writeln("navigator.appVersion=");document.writeln(navigator.appVersion);document.writeln("<br>");
document.writeln("parseInt(navigator.appVersion)=");document.writeln(parseInt(navigator.appVersion));document.write
ln("<br>");
document.writeln("parseFloat(navigator.appVersion)=");document.writeln(parseFloat(navigator.appVersion));document.
writeln("<br>");
}
</script>
</HEAD>
<body>
<script>
var este=new Is();
document.write("Este Netscape=");document.writeln(este.ns);document.writeln("<br>");
document.write("Este Netscape ver 2 =");document.writeln(este.ns2);
Confidential
Page 110
3/25/2016
document.write("Este Netscape ver 4b =");document.writeln(este.ns4b);
document.writeln("<br>");document.writeln("<br>");
document.write("Este Explorer =");document.writeln(este.ie);
document.write("Este Explorer ver 3 =");document.writeln(este.ie3);
document.write("Este Explorer ver 4 =");document.writeln(este.ie4);
document.write("Este Opera ver 3 =");document.writeln(este.op3);
document.writeln("Este Windows=");document.writeln(este.win);document.writeln("<br>");
document.writeln("Este Mac=");document.writeln(este.mac);document.writeln("<br>");
document.writeln("Este UNIX=");document.writeln(este.unix);document.writeln("<br>");
</script>
</body>
</HTML>
Acum ca am detectat ce browser avem trebuie sa detectam ce rezolutuie avem pentru a putea planifica pagina DHTML
si modul cum va fi afisata de a llungul a mai multor platforme.Screen resolution este de fapt marimea in pixeli a a
intregului ecran in functie de marimea ferestrei, deci in concluzie este marimea in pixeli a ferestre browserului care este
deschisa.
Cind creem o noua fereastra este bine sa cunoastem care este rezolutia pentru a determina care este pozitia si marimea
noi ferestre. Mai jos avem o functie care ne ajuta sa capturam rezolutia si sa o storam intr-o variabila var.
Var screen_width=screen.width;
Var screen_height=scren.height;
Pentru a putea construi layoutul paginei tale este important sa cunoastem de fapt care este spatiul in fereastra. Deci
vpom folosi un script care va citi spatiul din fereastra si-l va stoca in variabilele available_width si available_height
pentru al folosi mai tirziu si pentru a putea realiza trecerea de a lungul unor browseri va trebui sa punem functia onLoad
in interiorul tagului <BODY> .
Capturarea Rezolutiei Ferestrei

<BODY BACKGROUND="images/sky.jpg" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO"
onLoad="
if(is.ns4) {
available_width=innerWidth;
available_height=innerHeight;
preLoad();
} else if(is.ie4) {
available_width=document.body.clientWidth;
preLoad();
}"
onResize="history.go(0)">
Una din consideratiile pe care trebuie sa le iei in considerare este determinarea modului cum pagin ava fi afisata .

Confidential
Page 111
3/25/2016
function openWindow() {
if(is.ns4 || is.ie4") {
var window_left = (screen.width-800)/2;
var window_top = (screen.height-600)/2;
window.open('cURLous_eye.htm','cURLousEye','width=800,height=600,top=' + window_top + ',left='
+ window_left + '');
}
}
Link to external files

Ai optiunea de a creea definitia pagini si codului JavaScript pe pagina continind HTML. Cu DHTML poti sa controlezi
aceste fisiere separat folosind un link extern. Aceste link-URL vor trebui plasate in portiunea <head></head> din fisierul
HTML.
<script language=JavaScript SRC=script.js> </script>
<link rel=stylesheet type=text/css HREF=styles.css TYTLE=style>
Sunt technici de dezvoltare grafica care sunt specificie mediului DHTML. Aceste technici in general folosesc natura de
transparenta a imaginii GIF si abilitatea de a suprapune layere de imaginii.
Layere
Sunt de fapt blocul de baza care ne eprmit sa suprapunem text si sa pozitionam text si grafica oriunde vrem .
Constructia unei pagine cu layere

O pagina generala de layer incepe cu atributul <DIV> si contine tagURLle ID= si STYLE=.
In interiorul layerului, poti sa-ti plasezi cod HTML care sa contina scriptURL, applets si controale. Layer-ul va fi apoi
inchis folosind obtiunea : </DIV>.
Sa consideram codul sursa pentru creerea unui layer:
<div id=layername style=position:absolute;top:10px;left:10px;width:100px;height:100px clip:rect(0 100 50 0);
z-index:2; visibility:hidden;>
<font class=MAIN>Standard HTML text, images and links</FONT>
</div>
Atributul ID confera unicitate unui layer . De obicei se foloseste convectia de notare lowercaseUppercase cum ar fi spre
exemplu ID=myLayer. Acest ID poate in viitor referit in JavaScript atunci cind dinamic vom schimba atributele
layerului.
Atributul STYLE va contine propietatii fizice cu, ar fi poziti, latimea si inaltimea precum si vizibilitatea.
Atributul position: absolute; ii atribuie acestui layer coordonate relative la screen stiindu-se ca coordonatele de sus ale
browserului au valorile 0,0. Layerele pot fi asezate unul relativ la altul si in acest caz se va folosi atributul de pozitionare
relativa (position=relative;).
Optiunea top: 10px; ne va da pozitia verticala a layerului fata de muchia de sus, astfel pentru exemplu anterior layerul a
fost pozitionat la 10 pixceli de muchia de sus. Left: 10px; atribuie pozitia in stinga a layerului si anume va fi la 10 px
fata de muchia din stinga.

Confidential
Page 112
3/25/2016
Width:100px; atribuie latimea layerului, iar height=100px; atribuie inaltimea layerului . In cazul anterior atit latimea cit
si inaltimea sunt 100 px.
Clip: rect(0,100,50,0); defineste fereastra de a lungul layerului folosind comanda rect(Top,Right,Bottom,Left) pentru a
defini areea respectiva. Numai portiunea din layer care va fi in interiorul areie respective va fi vizibila. In acest exemplu
avem top=0px; right=100px;bottom=50px si left=0px; Dar cum layerul are 100x100px, iar area are 100x50px numai
jumatate din layer va fi vizibil.
z-index: 2; atribute care defineste care este ordinea de asezare a layerelor. Un index z-index=1 indica faptul ca layer-ul
respectiv este cel mai de jos in stack. Poti de aceea sa asezi un alt layer peste acesta folosind z-index=2;
Visibility:hidden; este atributul care defineste daca layer-ul respectiv este ascuns sau nu. Layere care au attributul
Visibility=hidden nu pot fi vazute pe cind layere care au atributul visibility=visible pot fi vazute. Atributul de
visibilitate ca si toate atributele unui layer pot fi usor controlate din interiorul unui script JavaScript.
Constructia Dinamica a layerelor

Layerele pe care le folosim in aceste tutoriale sunt diferite pentru ca sunt dinamice. Un layer dinamic poate fi controlat
cu ajutorul JavaScript. La inceput vizibilitatea este setata sa fie hidden si odata ce pagina a fost incarcata si layere-le au
fost pozitionate dinamic bazindu-se pe rezolutie, atributul visibility a fost schimbat in on.
Vom prezenta mai jos un exemplu de creere a unui layer dinamic:
<DIV ID=sfera STYLE=position: absolute; width: 102px; height: 102px; z-index:9; visibility: hidden;>
<IMG NAME=sphere1_image SRC=images/sfera1.gif width=102 height=102 border=0>
</DIV>
Controlul fontURLlor
O foie de stil poate precis controla tipul de font, marimea, stilul si culoarea. Beneficiile folosirii unei foie de style este
faptul ca se poate face o singura modificare si fondul va fi modificat in toate paginiile paginei tale web. O sa incercam
in exemplele urmatoare sa definim si sa folosem stilURL de font.
Sa presupunem ca dorim sa creem un font numit PRINC iteratiunea de comenzii necesara pentru a realiza acest lucru
este:
.PRINC
{
font-size: 10pt;
font-weight:100;
color : #DDDDBB;
font-family: verdana, arial, helvetica, sans-serif;
}
Pentru a folosi acest font definit intr-un fisier HTML putem folosi insiruirea de comenzii:
<FONT CLASS=PRINC>Font Control</FONT>
In plus ca poti sa-ti definesti propriile tale nume poti de asemenea sa alterezi tagURLle html cum ar fi spre exemplu
tagul <B>.
B
{
font-size: 9pt;
font-weight: 100;
font-family: CoURLer New, arial, helvetica, sans-serif;
color: #FFFFFF;
Confidential
Page 113
3/25/2016
}
Sa vedem intr-un exemplu cum putem creea si folosi fontu-ri noi. Pentru a putea realiza acest lucru va trebui mai intii sa
definim un fisier styles.css care va contine definitiile noastre.
In cazul nostru o sa definim fontul PRINC si PRINC1:
.PRINC
{
font-size: 10pt;
font-weight:100;
color : #DDDDBB;
}
.PRINC1
{
font-size: 6pt;
font-weight:60;
color : #DDDDBB;
}
Apoi vom salva fisierul cu numele styles.scc . Vom vedea in continuare cum vom putea folosi acest fisier in codul nostru
html . In sectiunea dintre <head> si </head> va trebui sa folosim urmatoarea comanda:
<LINK REL=stylesheet TYPE="text/css" HREF="styles.css" TITLE="style">
<html>
<head>
<title></title>
<LINK REL=stylesheet TYPE="text/css" HREF="styles.css" TITLE="style">
</head>
<body>
<FONT CLASS=PRINC>Font Control PRINC</FONT>
<FONT CLASS=PRINC1>Font Control PRINC1</FONT>
</body>
</html>
Sa consideram si exemplu in care definim stilURLle in cadru unui fisier html si le folosim in acelasi timp:
<html>
<head>
<title>Folosirea definitiei de stylURL</title>
</head>
<body>
<style>
.PRINC
{
font-size: 10pt;
font-weight:100;
color : #DDDDBB;
font-family: "verdana", "arial", "helvetica", sans-serif;
}
.PRINC1
{
Confidential
Page 114
3/25/2016
font-size: 6pt;
font-weight:60;
color : #DDDDBB;
font-family: "verdana", "arial", "helvetica", sans-serif;
}
</style>
<FONT CLASS=PRINC>Font Control PRINC</FONT><br>
<FONT CLASS=PRINC1>Font Control PRINC1</FONT>
</body>
</html>
DOMS
Pentru a face codul DHTML compatibil atiti in browsere cum ar fi Netscape si Explorerf un DOM (document object
model script ) este folosit. Mai jos este descris un script care este folosit pentru a asigna browser-ului variabile specifice
cum ar fi doc, sty si htm depinzind de browser-ul folosit. Aceste variabile vor fi folosite apoi pentru a creea metode
JavaScript pentru a salva necesiatea scrieri unui cod pentru fiecare browser.
if (is.ns4)
{
doc=document;
sty=;
htm=.document;
}
else
if (is.ie4)
{
doc=document.all;
sty=.style;
htm=;
}
Fuctia is() pe care am descris-o anterior va fi folosita pentru a testa daca este Netscape sau Explorer. Astfel daca is.ns4
va returna true atunci vom avea Netscape, daca is.ie4 atunci ceea ce vom avea va Explorer.Variabila doc este folosita
deoarece browsere se refera la documente in mod diferit . Astfel document.object este folosit de Netscape pe cind
document.all.object este folosit de Exoplorer. Variabila sty este folosita pentru a determina cum sunt referite foile de
style pentru cele doua programe: Astfel Netscape foloseste : netscape.style_name.object pe cind Explorer foloseste
document.all.style_name.style.object . Variabila htm este folosit apentru a determina cum cele doua browser folosesc
objecte html cu un style sheet layer. Pe cind Netscape foloseste document.style_name.document.object, Explorer
foloseste document.all.style_name.style.object .
Preincarcarea imaginiilor
Pentru a realiza animatie in timp real cu DHTML este bine sa incarcam imaginiile in memoria browserului. Acest lucru
este realizat folsoind o metoda de incarcarea imaginiilor si odata imaginile incarcate in memorie ele pot fi controlate
prin program pentru a produce animatie.
var count =0;
function preLoad()
{
sfera1=new Image();
sfera1.onLoad=(is.ns4b) ? loadCheck() : loadCheck;
Confidential
Page 115
3/25/2016
sfera1.src=sfera1.gif;
sfera2=new Image();
sfera2.onLoad= (is.ns4b) ? loadCheck() : loadCheck;
sfera2.src=sfera2.gif
}
function loadCheck()
{
count++;
if (count==2)
{
positionLayers();
}
}
The preLoad() este initiata de functia onLoad() acest eveniment aflindu-se in interiorul tagului <BODY> dupa cum se
vede aici:
<BODY onLoad=preLoad()>
Primul pas este de a creea o functie preload() si de a creea o imagine obiect si de asigna aceasta functie unei variabile:
var imageName= new Image()
To determina daca imaginea este incarcata evenimentul imageName.onload-loadCheck este folosit pentru a apela functia
:
loadCheck() de fiecare data in memorie si astfel se verifica daca imaginea a fost imarcata in memorie. Astfel daca
image.onLoad va returna true imaginea a fost incarcata in memorie in schimb daca image.onLoad va returna false
imaginea nu a fost incarcata in memorie.Dupa ce a fost incarcata in memorie un atribut de tip src va fi asignat acestei
imaginii:
imageName.src=image.gif.
Functia LoadCheck() este simpla si are o variabila count care este incrementata odata ce imaginea a fost creata in
memorie . Odaca ce valoarea a fost incrementata la doi inseamna ca imaginea a fost incarcata in memorie si poate fi
apelata functia pentru pozitionarea layerelor.
Pozitionarea
Initial creem un sheet dinamic fara a folosi atributele left si top si visibility a fost setata sa fie hidden. Dupa ce imaginea
a fost incarcata vom putea utiliza layere obiect, sa pozitionam dinamic aceste layere si apoi sa le facem vizibile.
Functia de pozitionare a layerelor.
Function positionLayers()
{
sfera1Img=eval(doc+[sfera1Lyr]+.document);
sferaObj=eval(doc+[sfera1Lyr]+sty);
sfera1Obj.left=7;
sfera1Obj.top=availabl_height-230;
sfera2Img=ecal(doc+[sfera2Lyr]+.document);
sfera2Obj=eval(doc+[sfera2Lyr]+sty);
sfera2Obj.left=parseInt(sfera1Obj.left)+40;
sfera2Obj.top=parseInt(sfera1Obj.top)+74;
sfera1Obj.visibility=visible;
sfera2Obj.visibility=visible;
Confidential
Page 116
3/25/2016
animate();
}
Primul pas in pozitionarea layerelor este: positionLayers() care este folosita pentru a defini doua tipURL de layere
objects utilizind variabile DOMS. Primul tip de layer este de tip imagine si este folosit pentru a accesa propietatile unei
imaginii plasata pe un layer si definita cum urmeaza :
Sfera1Img=eval(doc+[sfera1Lyr]+.document);
Dupa cum se stie doc este un parametru care defineste diferentele dintre Netscape si Explorer pentru orice document
care se gaseste in interiorul pagini DHTML. Sfera1Lyr este ID layerului si odata acesta definit este asignat unei
variabile sfera1Img care este folosita in viitor pentru a controla imaginea dinamic in interiorul layerului.
Al doilea tip este folosit pentru a accesa direct propietatile layerului si poate fi construit cu ajutorul urmatoarei variabile
DOMS.
Sfera1Obj=eval(doc+[sfera1Lyr]+sty);
Dupa cum se stie sty este un parametru care este folosit pentru a cntrola diferentele dintre Netscape si Explorer pentru
orice obiect care se gaseste intr-un sheet de layere. Odata creat acest obiect de tip layer este asignat variabilei sfere1Obj
si este folosit mai tirziu pentru manipularea atributelor layerelor.
Manipularea pozitie layerelor

Odata layerele definite se pot schimba atributele left si top pentru aceste layere dupa cum se vede mai jos:
Sfera1Obj.left=7;
Sfera1Obj.top=available_height-200;
Sfere1Obj.left=parseInt(sfera2Obj.left)+40;
Sfera1Obj.top=parseInt(sfere2Obj.top)+74;
Manipularea vizibilitatii Layerului

Asa cum am mai aratat odata un layer creat se poate modifica modul de afisare a acestui layer folosind atributele de
vizibilitate cum ar fi: visible and hidden.
Sfera1Obj.visibility=visible;
Sfera1Obj.visibility=hidden;
Sfera2Obj.visibility=visible;
Sfera2Obj.visibility=hidden;
Manipularea Layerului z-index

Dupa cum am mai amintit odata creat un layer I se poate atribui o anumita ordine folosind attibutul z-index.Comenziile
folosite pentru acest lucru sunt:
Sfera1Obj.zIndex=11;
Sfera1Obj.zIndex=9;
Astfel a pus layerul sfera1 pe al 11lea nivel si apoi l-am mutat pe al 9-lea nivel. Intre cele doua puneri pe nivele diferite
se pot realiza modicarii in grafica layerului Sfera1.

Confidential
Page 117
3/25/2016
Animatie
Exista doua tipURL de animatie si anume animatia imaginei ai animatia layerului. Desi sunt doua tipURL de animatie
diferite ele pot fi folosite si impreuna pentru a produce animatie complexa dar pot fi folosite si separat.
Layer animation
Prin animatia unui layer se intelege de fapt mutarea pozitie left si top pentru un layer in bucla recursiva .
function animateLayer()
{
var x_pos1=parseInt(sfera1Obj.left);
var x_pos2=parseInt(sfera1Obj.left);
if (x_pos1<47)
{
sfera1Obj.left=x_pos1+2;
sfera2Obj.left=x_pos2-2;
setTimeout(animateLayers(),1);
}
}
Primul pas pe care trebuie sa-l faci intr-o animatie este sa storezi pozitia curenta pentru layerul pe care il animezi intr-o
variabila in cazul nostru var x_pos1=parseInt(sfera1Obj.left); Functia parseInt() converteste pozitia layerului intr-un
numar care pastreaza compatibilitatea nai multor browsere. Deoarece noi mutam doua obiecte cel de-al doilea obiect
este storat in x_pos2.
Apoi vom testa pozitia curenta cu cea pe care o dorim intr-un sfirsit astfel vom avea :
if (x_pos1<47) atunci ce va fi in interiorul functiei if va fi executat si anume vom muta layerul prin mutarea pozitie
stinga a acestuia: sfera1Obj.left=x_pos1+2; Aceasta comanda va muta pozitia layerului cu doi pixeli catre dreapta. Poti
astfel sa controlezi pozitia si mutarea layerului prin adaugarea si scaderea unor numere la pozitia curenta.
Functia setTimeout() este folosita pentru a apela recursiv functia animateLayers() la un interval de 1 millisecunda.
Poti sa maresti viteza sau sa incetinezi viteza prin modificarea timpului de delay pentru bucla. Astfel se va realiza
animatia pina cind layerul va ajunge in pozitia finala.
Lista comenziilor HTML

Creaza o linie de comentariu si poate ascunde codul JavaScript

pentru browserele care nu suporta acest cod.
<COMMENT></COMMENT>
Este un alt mod de a afisa comentariu in interiorul unui fisier

HTML.
<HTML></HTML>
Include intre ele codul HTML
<HEAD></HEAD>
Include capul unui document HTML
<BODY></BODY>
Include corpul unui document HTML

Atribute:

Confidential
Page 118
3/25/2016
BACKGROUND= o pagina grafica care va fi folosita

drept fundal pentru fisierul tau
BGCOLOR= O culoare care poate fi folosita pentru fundal
TEXT= Culoarea care este folosita pentru textul unei
pagini.
LINK= - Culoarea care este folosita pentru link-urile din
pagina
ALINK= - Culoarea care este folosita pentru link-urile
active
VLINK= - Culoarea care este folosita pentru link-urile
care urmeaza
BGPROPERTIES= Propietatile imagini pentru fond, se
poate folosi numai valoarea FIXED
pentru a preveni mutarea imagini
folosind barele scrolling.
TOPMARGIN= Care este marginea de sus a pagini in
pixeli
BOTTOMMARGIN= Care este marginea de jos a pagini
in pixeli
JAVA INTRODUCERE
Istoria limbajului Java
In 1990 un domn pe nume James Gosling I s-a dat drept tasc de a creea programe pentru a controla electronicele .
Gosling si echipa lui de oameni de la Sun Microsystems au inceput sa-si dezvolte propriu lor soft folosing C++ ,
limbajul pentru care cei mai multi programatori au gindit ca este cel mai mare lucru pentru natura sa de obiect orientat . Ei au
gasit ca C++ nu a fost un program bine ales pentru proiectele lui si echipa lui. Ei au ajuns la probleme cu aspecte complicate ale
C++ cum ar fi multiple intercalari intre clase si baguri de programare cum ar fi pierderi ale memoriei.
Gosling a decisa sa vina cu propria lui varianta simplificata de limbaj de programare care au inlaturat toate problemele
pe care le avea C++.
Desi Gosling nu tinea cont de complexitatea limbajului cum ar fi C++, lui nu I-a placut sintaxa de baza si modul cun
formele acestui obiect-orientated limbaj apar. Asa cind s-a apucat sa proiecteze noul lui limbaj, el a folosit C++ ca model, si a dat
la o parte forme din C++ care faceau limbajul dificil de folosit cu proiectele lui de consumator-electronic. Cind Gosling a
completat noul lui limbaj de programare, el a avut un nou limbaj de programare pe care l-a numit Oak. (Se spune ca numele de
Oak vine de la faptul ca Gosling s-a uitat pe fereastra lui si a vazut un arbore oak dupa ce a terminat limbajul de progamare).
Oak a fost pentru prima data folosit intr-un proiect numit Green, unde echipa de proiectare a dorit sa dezvoltat un
sistem de control pentru a fi folosit acasa. Acest nou sistem il ajuta pe utilizator sa manipuleze o serie de aparate electronice, cum
ar fi TV, VCR, luminile si telefoanele, toate cu ajutorul unui computer numit *7 (Star Seven). Acest sistem avea un ecran sensibil
la atingere pe care propietarul il utiliza sa selecteze si sa controleze aparatele suportate de control.
Ecranul care afisa meniurile aplicatiei *7 constituite din figuri animate, cum ar fi Duke (acum micutul care poate fi considerat
mascota Java) . Odata ce ve invata Java vei vedea o multime de astfel de omuleti care sar in sus pe site-ul lui Sun Microsystems
si care sunt de asemenea folositi in citeva exemple de applets Java.

Confidential
Page 119
3/25/2016
Urmatorul pas pentru Oak a fost video la cerere (VOD) proiect, in care acest limbaj a fost folosit ca baza pentru softul
care controla un sistem de televiziune interactiv. Nici *7 si nici VOD nu au dus la produse finale, si au dat limbajului Oak sansa
sa se dezvolte si sa se maturizeze. Atunci cind Sun a descoperit acest limbaj el s-a numit Oak dar S-a descoperit ulterior ca
acest nume a fost ales deja si a fost schimbat in Java, care era un limbaj simplu dar puternic pe miinile lui. Ceea ce era mai
important era faptul ca nu depindea de platforma pe care era rulat acest program , asta insemna ca programele care erau
dezvoltate cu Java putea rula pe orice sistem fara a fi schimbate. Aceasta independenta de platforma a cerut sa se foloseasca un
format special pentru programele compilate in Java. Astfel fisierul format care se numeste byte-code, poate fi citit si executat pe
orice sistem care are un interpretor Java. Bineinteles ca interpretorul Java poate fi scris special pentru orice sistem pe care el o sa
ruleze. In 1993, dupa ce World Wide Web a transformat internetul bazat pe text in internet bazat pe grafica , echipa Java a realizat
ca limbajul pe care l-au dezvoltat poate fi perfect pentru programarea Web. Echipa a venit cu conceptul de programare de aplette
Web, programe mici care pot fi incluse in paginile Web, si chiar mai departe pentru a creea un complicat Web Browser (acum
numit HotJava) care demonstreaza puterea limbajului.
In al doilea trimestru din 1995, Sun Microsystems a anuntat oficial Java. Noul limbaj a fost repede inteles ca o scula
puternica pentru a dezvolta aplicatii pentru internet. Netscape Communicator, dezvoltatorul aplicatie Netscape navigator Web
browser a adaugat suportul pentru Java si la fel si Internet Explorer incepind de la versiunea beta ofera suport Java. Astfel dupa
cinci ani de dezvoltare Java si-a gasit casa lui.
Exemple de utilizare applet Java

Se poate rula applets fara a avea un browser Java, acest lucru se face cu ajutorul unei aplicatii care ne permite sa vedem
rezultatul acestor aplicatii. Aceasta aplicatie este scrisa pentru fiecare sistem de operare in parte astfel daca aplicatia este scrisa
pentru Windows 95,98 atunci aceasta aplicatie poate fi rulata numai sub aceste sisteme de operare si in DOS.
Pentru a vedea un aplet va trebui sa executam un fisier HTML care va avea urmatoarea structura de cod :
<html>
<head>
<title>Exemplu de utilizare applet</title>
Confidential
Page 120
3/25/2016
</head>
<body>
<applet code=Clock.class width=200 height=200 alt=Exemplu de applet ceas name=ceas
align=middle>
</applet>
</body>
</html>
De asemenea se poate apela un aplet cu parametrii, pentru a realiza acest lucru se poate folosi urmatoarea comanda:
<applet code=applet1.class name=cod1 width=200 height=200>
<param name=nume value=valoare>
</applet>
Local si remote applets

Deci se poate scrie pagini de WEB folosind doua tipuri de applet-uri locale si remote, vom invata in continuare
care este diferenta dintre aceste doua tipuri de applet.
Un applet local este unul care este pe computerul tau nu este necesar sa te conectezi la internet pentru a accesa acest
applet fisierele acestuia se gasesc pe masina pe care se ruleaza aplicatia appletviewer.
Codul sursa pentru un astfel de applet local este:
<applet codebase="director" code="codsursa.class" width=120 height=120>
</applet>
Astfel parametrul codebase va cuprinde directorul in care se gaseste codul sursa pentru appletul respectiv iar
parametrulcode va contine sursa acestui applet.
Applet de la distanta poate fi aflat oriunde in camera urmatoare sau la mii kilometrii distanta de computerul pe care ne
gasim. Pentru a rula acest applet va trebui sa fie mai intii downloaded pe computerul curent via internet si apoi poate fi lansat in
memorie si afisat de aplicatia appletviewer.
Pentru a pune acest applet in pagina ta Web va trebui mai intii sa stii unde este localizat sa ii cunosti parametrii astfel ca
acest applet sa functioneze corect. De obicei aceste informatii se gasesc intr-un fisier care contine toate informatiile despre
aceasta aplicatie.
<applet codebase="http://www.ecadro.com/applets/" code="clock.class" width=120 height=120>
</applet>
Se observa ca pentru a pozitiona acest applet intr-un fisier HTML va trebui mai intii sa definim locul unde este appletul
respectiv folosind parametru codebase si apoi fisierul sursa va fi specificat folosind comanda code.
Trebuie sa discutam despre client-server in ceea ce priveste punctul de vedere al unui applet. Astfel locul unde este
pozitionat codul sursa al unui applet se numeste server, iar care cere acesul la aceasta resoursa pentru a afisa-o intr-un fisier
HTML se numeste client.
Limbajele de programare au fost dezvoltate la fel cum si limba vorbita a fost dezvoltata in timp. Ei au fost constant
redefinite si sa implineasca schimbarile de care au avut nevoie utilizatorii sai. Ca si C++ Java este un amalgam de tehnici
dezvoltate de a lungul anilor. De aceea pentru a explota OOP (obiect-oriented programming) va trebui sa ne uitam la istoria
limbajelor de programare. Dupa ce veti intelege de unde OOP vine si cum a fost dezvoltata veti intelege ce face limbajul de
programare un limbaj orientat pe obiecte.

Confidential
Page 121
3/25/2016
De switch-uri la obiecte
Primele computere erau compuse din switch-uri care pot fi schimbate si care pot contine informatie de tip 1/0 in functie
de pozitia acestor intrerupatoare apoi au aparul limbajele cod masina care s-au dovedit a fi foarte greoaie si de aceea peste aceste
limbaje cod masina au fost create limbaje care sa ne permita sa scriem mai usor cod sursa cum ar fi Fortran , Pascal, C si C++.
Sa consideram in continuare urmatoarea aplicatie :
O familie a petrecut noaptea de anul nou si trebuie sa faca curat dupa aceast chef. Pentru a realiza acest lucru va trebui
sa scriem un program ca mai jos:
-
stringem platourile de pe masa

stringem tot ce a mai ramas si ducem in bucatarie
mergem in bucatarie si spalam vasele
spalam pe jos
mergem in sufragerie
aspiram
stergem praful
mergem in dormitor
aspiram
stergem praful
mergem in baie
spalam pe jos
etc
Acest tip de limbaj este cel care era dezvoltat odata ce a fost dezvoltat Fortran-ul si alte limbaje de programare epoca
numita in istoria programari dark age of computing.
Odata cu dezvoltarea limbajelor de programare programatori trebuiau sa se concentreze mai mult a ceea ce trebuia sa
faca programele respective decit a codului sursa, aparind asa zisi senior programatori care scriau pseudo cod si care la rindul
lui era trebui in limbaj de programare folosind junior programatori
In ziua de astazi odata cu dezvoltarea programelor high-level, a fost necesar ca acestia sa isi imparta programul in
sectiuni logice care sa reprezinte tascurile generale ce urmeaza a fi indeplinite. In acest caz s-a nascut programarea structurala in
care programtori sunt mai mult preocupati de aplicatia top-down in care programatori sunt concentrati pe functiile generale decit
pe detalii cum aceste functii sa fie implimentate. Cind programatori gindesc si programeaza in modul top-down ei pot cu usurinta
duce la bun sfirsit proiecte uriase fara a avea probleme de cod.
Astfel programul definit anterior arata astfel in acest caz:
TOP LEVEL
Facem curatenie in sufragerie
Facem curatenie in bucatarie
Facem curatenie in baie
SECOND LEVEL
Facem curatenie in sufragerie
START
Dute in sufragerie
Curata masuta de cafea
Curata masutele laterale
Curata covorul
END

Confidential
Page 122
3/25/2016
Facem curatenie in bucatarie

START
Dute in bucatarie
Spala vasele
Spala aragazul
Curata frigiderul
Fa curat pe jos
END
Facem curatenie in dormitor
START
Dute in dormitor
Aranjeaza paturile
Curata biroul
Aspira covorul
END
Astfel pentru a vedea ce face un programator va trebui sa te duci la nivelul superior si sa vezi care sunt tascurile
generale iti alegi un tasc si treci la nivelul doi sa vezi care sunt subtascurile acestui tasc si asa mai departe pina la ultima
functie din program. Se spune ca un program cum este Windows95 cuprinde 15 milioane linii de cod va dati seama ce greu
ar fi de controlat un astfel de cod daca nu ar fi structurat in modul de mai sus.
Lumea consta in multe obiecte, multe dintre acestia manipuleaza obiecte si date. Spre exemplu o masina este un obiect
care manipuleaza viteza si directia pentru a transporta oameni de la o localitate la alta sau dintr-un loc in altul in cadrul
aceleeasi localitati. Masina inglobeaza toate functiile si datele care sunt necesare pentru a duce acest tasc la bun sfirsit.
Masina are un contact care este actionat de cheie si care porneste masina sau o opreste, are o pedala care poate fi apasata sau
nu pentru a oprii masina are un volan care controleaza directia in care se intreapta masina respectiva. Deci functiile care
manipuleaza masina sunt directia, pozitia si viteza. Cind calatoresti in masina nu trebuie sa cunosti detalii de cum aceste
functii lucreaza pentru a oprii masina tu apesi pe pedala stii ca acest lucru va oprii masina dar nu stii cum se realizeaza acest
lucru. Aceste functii sunt aceeleasi de o masina la alta dar nu poti sa confuzi o masina cu o masina despalat vasele sau un
copac. O masina este un obiect unic cu propietati unice.
Spre exemplu in loc sa ne gindim la un cod care sa ne permita sa desenam o fereastra pe ecran apoi un nou cod care sa
ne permita sa introducem text in fereastra respectiv si intr-un sfirsit la un cod care sa ne permita sa manipulam fereastra
respectiva dintr-un loc in altul pe putem gindi la un obiect fereastra care sa cuprinda toate aceste functii si altele necesare
acestui obiect desi poate nu sunt apelate in aplicatia de mai sus cum ar fi minimizarea, marirea acesteia etc.
Programarea object-orientated
In programarea orientata pe obiecte va trebui sa gindim la elementele de program ca si obiecte. In cazul unui obiect de
tip fereastra nu trebuie sa stii detalii care se ocupa de modul cum lucreaza aceasta fereastra , si nici nu trebuie sa cunoasti
cimpurile private ale ferestrei. Ceea ce trebuie sa stii este modul cum se cheama aceste functii care fac acel obiect sa
functioneze. Sa consideram masina pe care am discutat anterior, pentru a conduce aceasta masina nu trebuie sa cunosti cum
merge masina, trebuie sa stii care sunt procedurile necesare pentru a conduce masina, ce este sub capota si cum functioneaza nu
este treaba ta ( si chiar sunt uni care se incumeta sa faca si acest lucru daca vor merge la un mecanic acela va trebui mai intii sa
verifice ce au facut acestia prima data).
Dar OOP este in ceea mai mare parte un mod de a ascunde detaliile de programare. Pentru a intelege acest lucru va
trebui sa intelegem urmatoarele sectiuni: incapsulare, mostenirea si polimorfism.

Confidential
Page 123
3/25/2016
Incapsularea
O diferenta majora intre modul de programare structurat si programarea orientata pe obiecte este data de propietatea obiectelor
numita incapsulare. Aceasta ne permite sa ascundem in interiorul unui obiect atit cimpurile de date cit si metodele care actioneaza
asupra acestor date (de fapt cimpurile de date si metoda sunt doua elemente principale a unui obiect in limbajul de programare
Java). Dupa ce ai realizat acest lucru vei putea controla accesul la date, sa fortezi programele sa cheme si sa modifice date numai
prin interfata obiectului. In proiectarea orientata-obiecte datele unui obiect au statutul de privat pentru acel obiect. Alte parti ale
programului nu trebuie sa aiba acces la datele obiectului. Cum difera modul de a ascunde date fata de programarea structurala
anterioara programari obiect. Daca o problema de acest tip apare atunci este necesar ca datele unei functii sa fie accesate de alte
functii. Un mod de a realiza acest lucru este de a permite altor functii de a accesa aceste date declarindule ca fiind date globale.
Se pare ca va trebui sa ducem acest mod de a trasmite date pe un alt nivel acest lucru se realizeaza cu ajutorul metodei de
incapsulare care ne permit ca date ale membrilor unui obiect sa fie globale pentru obiect si sa poate fi acesate de metodele
obiectului, desi ele nu sunt variabile globale ele fiind locale deoarece sunt utilizate numai in interiorul obiectului.
Un obiect este la fel ca o instanta a unei tip de data. Spre exemplu atunci cind declari o variabila de tip int, tu creezi on
instanta a tipului de data int. O clasa este la fel ca tipul de data care este data in documentatie si pe care se bazeaza un obiect.
Cind tu ai nevoie de un nou obiect in programul tau, tu creezi o clasa, care este template pentru obiect. Atunci, in programul
tau , tu creezi instante ale clasei respective. Aceste instante se numesc obiecte. Clasele nu sunt mai mult decit date de tipul userdefined, Astfel cu orice tip de data tu poti sa ai cit de multe instante vrei tu. Spre exemplu, daca vrei sa ai mai multe ferestre
afisate la un moment dat fiecare cu continutul ei fiecare va fi o instanta a obiectului window. Ginditiva de asemenea la tipul int
este absurd sa te gindesti la un program care are numai un intreg. Poti sa declari multe date de tip int. Este absurd sa gindesti ca
un program care are numai un intreg, poti sa declari cite date de tipul int vrei atitea cite iti sunt necesare. Acelasi lucru se intimpla
si clasele. Dupa ce ai definit o clasa noua, poti sa creezi cite instante vrei pentru clasa respectiva, fiecare dintre acestea pot avea
acess total la metodele claselor anterioare si poate sa copieze datele membrilor.
Mostenirea ne permite sa creem o clasa care este similara cu o clasa definita anterior, dar una care sa aiba propietati
personale. Sa consideram cazul unui program care simuleaza functionarea unei masini. Sa presupunem ca aveam o clasa pentru o
masina obisnuita dar iti trebuie o clasa pentru o masina de viteza ceea ce trebuie facut in programarea structurala ar fi trebuit sa
modificam codul sursa pentru a permite acest lucru si s-ar putea ajunge la baguri dupa modificari. Pentru a indeparta aceasta
problema se poate regindi problema in modul obiect-orientat: Se creeaza o clasa mostenitoare, care va prelua toate datele si
metodele de la clasa anterioara si sa se adauge nou cod pentru functia noua acesteia testindu-l numai pe acesta. In ceea ce
priveste modul in care se face mostenirea o sa vedem ulterior ca exista mai multe moduri cum ar fi : public, private si protected.
De fapt mostenirea trebuie privita la fel cu ceea ce se intimpla la fiinta umana atunci cind apar copii, o parte din
caracteristicile parintilor sunt mostenite de copii, dar copii pot avea la rindul lor caracteristici noi . In programarea orientata pe
obiecte se poate gindi ca fiind parinte o clasa de baza si copil o clasa derivata (vom discuta aceste tipuri in viitor).
Polimorfismul este o alta functie importanta in programarea orientata pe obiecte. Utilizind polimorfism, poti sa creezi
noi obiecte care sa aiba acelasi functii ca si obiectul de baza dar sa sa realizeze una sau mai multe functii altfel decit baza. Spre
exemplu sa consideram ca avem un obiect care deseneaza un cerc pe ecran, prin polimorfism vei dori sa creezi un alt obiect care
sa deseneze un dreptunghi. Se va realiza acest lucru prin modificarea metodei care deseneaza forma pe ecran. Atit primul obiect
cel care ne permite sa desenam un cerc cit si cel de-al doilea obiect care ne permite sa desenam un dreptunghi au o aceeasi
metoda de desenare care are acelasi nume DrawShape() dar realizeaza desenul in moduri diferite.
Desi nu stiai sa folosesti clasele Java pina ieri in aceasta carte, este timpul potrivit sa te uiti la conceptul de OOP in
modul general. Sa consideram exemplu cu masina pe care l-am considerat anterior, acesta poate fi considerat un obiect la care
putem gindi caracteristicile sale fiind: directia, pozitia si viteza si care pot fi acctionate folosind volanul, acceleratia si frina si in
termeni ale clasei directia, pozitia si viteza sunt cimpuri de date iar volanul, accelaratia si frina sunt metodele clasei.
In acest caz clasa masina ar arata astfel :
class Masina { data directie; data pozitie; data viteza; method Volan(); method ApasaAcceleratia();
method ApasaFrina(); }
care are trei date directia in care merge, pozitia unde se afla si viteza cu care se misca asupra carora se poate actiona cu
urmatoarele metode Volan() care va schimba directia de mers, ApasaAcceleratia() care va mari viteza cu care se deplaseaza si

Confidential
Page 124
3/25/2016
ApasaFrina() care va micsora viteza masini. Data pozitie este afectata de toate cele trei metode atit de metoda Volan() care
schimba directia masini cit si de functiile ApasaAccelaratia() si ApasaFrina() care maresc si micsoreaza viteza.
Cimpurile de date si metodele sunt incapsulate in interiorul clasei. Mai mult cimpurile de date sunt private pentru clasa
ceea ce inseamna ca ele nu pot fi direct accesate din exteriorul clasei, numai cele trei metode definite pot acesa datele clasei.
Acum sa presupunem ca vrem sa creem o noua masina care are o cutie de viteza speciala, vom folosi proprietatea de mostenire
pentru a deriva noua clasa din clasa de baza.
class Autobuz inherits from Masina
{
method Pass();
}
Vei ramine surprins sa vezi cit de mica este noua clasa . Este mica pentru ca implicit mosteneste toate cimpurile de date
si metodele de la clasa de baza Masina. Asta inseamana ca clasa Autobuz are o metoda numita Pass(), dar are de asemenea si date
cum ar fi : directie; pozitie si viteaza si metode Volan(); ApasaAcceleratia(); ApasaFrina(); care au fost mostenite de la clasa
Masina.
Ultimul concept al programari orientate pe obiecte pe care il vom considera este polimerfismul, sa presupunem ca v-ati
decis sa creati un alt tip de masina care are acelasi caracteristici ca si clasa Autobuz , cu deosebirea ca este mai rapida decit
aceasta . Acest lucru se rezolva ca mai jos:
class SUV inherits from Autobuz
{
method Pass();
}
Se observa ca la fel ca si clasa Autobuz si clasa SUV are o metoda Pass() care acelasi nume dar care este diferita in
cazul celor doua masini datorita faptului ca viteza clasei SUV este de doua ori mai mare decit a clasei Autobuz. Se observa ca in
cazul clasei SUV aceasta mosteneste functiile clasei Autobuz care la rindul ei mosteneste functiile clasei Masina deci in cazul
clasei SUV vom intilni de asemenea si date cum ar fi : directie; pozitie si viteaza si metode Volan(); ApasaAcceleratia();
ApasaFrina(). Vom vedea in cadru acestui curs ca exista moduri care sa ne permita sa controlam mostenirea unei clase de catre
alta clasa.
Constante si Variabile
Este un lucru care il are orice computer in comun, modul in care proceseaza datele de input si produce date de output
bazindu-se pe datele de input. Deoarece datele sunt foarte importante pentru un program, este motivul principal pentru care
exista o multime de moduri pentru a stora datele in asa fel incit programele sa poata procesa corect si eficient aceste date. Pentru
a pastra legatura datelor va trebui sa folosim constante si variabile.
Constantele
Intr-un program prin constante se definesc parametrii care nu isi schimba valoarea de a lungul executie programului.
Sa presupunem ca avem un program care calculeaza salariile si fiecare valoare este inmultita cu un parametru care se numeste
taxa de vinzare si care sa zicem ca are valoare de 6% . Aceasta valoare apare in program de foarte multe ori asa ca pentru a
modifica aceasta valoare va trebui sa mergem in program si sa schimbam valoarea respectiva. Dar s-ar putea sa apara probleme
datorita faptului ca intr-un loc sa uitam sa modificam aceea valoare lucru care ar duce la bag-uri in programul nostru.
De aceea au fost create constantele care se definesc odata la inceputul programului si apoi se foloseste valoarea lor simbolica ce
avem de facut va fi sa schimbam valoarea respectiva la inceputul programului pentru a se modifica intreg programul.
final float TVA = 0.18;
Mai jos este prezentat modul in care constanta TVA este definita .
Confidential
Page 125
3/25/2016
Variabile
Am vazut ca in cazul constantelor acestea au decit o anumita valoare pe cind variabile au o valoare numerica si o
valoare simbolica astfel ca in cadru aceluiasi program valoarea variabilei poate fi modificata in urma calculelor.
taxa=pret * TVA;
In exemplu de mai sus variabila taxa este creata cu scopul de mentine ce s-a obtinut in urma calcului din partea dreapta a
semnului egal .
Sa presupunem ca cineva vine intr-un magazin si cumpara un anumit lucru atunci costul acesteia va fi :
total = pret + pret*TVA; sau poate fi scris si astfel total = pret * (1 + TVA)
se observa in exemplu de mai sus ca atit TVA cit si pret si total sunt variabile ce preiau date ce au fost calculate in
vederea stocarii acestora.
Alegind cu grija numele vcariabelelor , potti sa creezi programele ca fiind documentate ele insa-si, care inseamna ca
liniile de program insasi va spune celui care va citi acest program ce face acel program.
Bineinteles ca sunt reguli care trebuie avute in vedere atunci cind numit variabelele si constantele, nu putem doar sa
apasam o multime de caractere de la tastatura si sa credem ca Java o sa le accepte, Fiecare Java nume trebuie sa inceapa cu una
din caracterele : A-Z; a-z; $; literele care urmeaza dupa prima litera pot fi luate din urmatoarele multimii: A-Z; a-z; $; 0-9;. Se
observa ca setul al doilea de caractere seamna cu primul cu diferenta ca apare in plus multimea 0-9;
Pe baza regulei de mai sus urmatoarele nume de variabile (indentificatori) sunt corectii:
-
number
number2
amount_of_sale
$amount
iar urmatoarele nu sunt corecte:

-
1number (prima litera este 1)

amount of sale (spatiu intre cuvinte)
&amount
(prima litera este &)
item#
(contine caracterul #)
Exemplu
Sa consideram cazul unui garaj pentru care vrem sa calculam spatiul liber avind in vedere ca numarul total de spoturi de
parcare este 100, iar in garajul respectiv pot fi parcate camioane, masini si van-uri. Primul lucru pe care trebuie sa il luam in
calcul este sa vedem care din aceste variabile poate fi eligibila pentru constanta, se observa ca numarul de spoturi de parcare al
garajului este singurul care indeplineste conditia unei constante si va fi definita in felul urmator:
final int numar_spot_parcare;
//
int este cuvint cheie care ne da tipul de variabila pe care il folosim in cazul de fata integer;
total_vehicule_parcate = camioane + masini + van;
numar_spoturi_libere = numar_spot_parcare total_vehicule_parcate;

Confidential
Page 126
3/25/2016
Se observa cum numele variabelor si constantelor a fost ales in asa fel incit sa fie usor citibil conform regulei definite
anterior si nu mai este necesar sa inseram linii de comentariu.
Tipurile de date
Java are opt tipuri diferite de date, toate reprezentind diferite valori pentru un program. Aceste tipuri sunt: byte, short,
int, long, float, double, char and boolean si o sa le studiem pe fiecare in parte.
Tipul intreg Integer

Cele mai folosite valori intr-un computer sunt numerele intregi, care reprezinta valori cum ar fi 12, 1988 si 34. Valorile
intregi pot fi atit pozitive cit si negative sau pot lua valoarea 0. Marimea acestor valori este dependenta de tipul de data intreg
care a fost ales. Exista in Java patru tipuri de date intregi si anume: byte, short, int si long. Toate aceste date de tipul intreg pot fi
atit pozitive cit si negative. Primul tip byte cere cea mai mica resursa pentru computer daca vrei sa declari o variabila de tip byte
aceasta va lua numai valori intre 128 si 127. Este important sa se aleaga pentru variabile si constante tipul corespunzator pentru
ca atunci cu cit acestea sunt mai mici cu atit computer-ul poate sa le manipuleze mai repede. Daca pentru o variabile de tip byte
in Java sunt necesari numai 8 bits, pentru o variabila de tip int vor fi necesare 32 bits de patru ori mai mult in Java
In java se poate declara o variabila de tip byte in felul urmator :
byte nume_variabila;
Daca vrem sa definim o constanta de tipul byte atunci vom folosi urmatoarea linie:
byte count = 100;
Urmatoarul tip de data este short, o variabila declarata ca si short poate sa tina valori intre 32768 si 32767 se poate
declara in felul urmator :
short nume_variabila; sau short nume_variabila = valoare;
Vom trece in continuare la tipul int care poate sa ia valori intre 2147483648 si 2147483647 se observa ca aceste numere sunt
mai mari si intelegem acum de ce pentru a stoca aceste numere sunt necesare 32 bits. Pentru a declara o variabila de tip int se
procedeaza astfel:
int nume_variabila; sau int nume_variabila = valoare;
Urmatorul tip este long care are nevoie de 64 bits de memorie si care poate sa tina numere imense , atita timp cit nu
calculati numarul de molecule din univers nu ar trebui sa folositi acest tip. Pentru a declara o variabila de tip long se procedeaza
astfel:
long nume_variabila; sau long nume_variabila = valoare;
Tipul real Floating

Cind valorile intregi pot sa tina numai numere, datele de tipul float pot sa pastreze atit numere cit si parte fractionala,
exemple de numere intregi sunt 32.9, 123.284 si 43.436, dupa cum vedeti ca numere intregi, datele float pot sa tina atit valori
pozitive cit si valori negative.
Java poate sa aiba doua tipuri de numere reale float si double fiecare din acestia ne permit sa obtinem precizie ridicata in
calcule. Pentru a folosi numerele intregi trebuie sa decidem cite zecimale trebuie folosite pentru a calcula cu precizie ridicata.
Aici apare diferenta dintre float si double , in Java o valoare declarata ca float poate sa tina numere de la 3.402823 x 10 38 la
3.402823 x 1038 ele se mai numesc si numere de tipul single-precision floating-point number si necesita 32 bits. Se poate declara
in felul urmator :
float nume_variabila; sau float nume_variabila=valoare;
In cazul al doilea valoarea poate fi orice numar aflat intre limitele de mai sus urmat de litera f sau F
Astfel daca in mod obisnuit noi scriem un numar real ca in exemplu urmator 356.552 acelasi numar poate fi scris in
limbajul Java in unul din urmatoarele doua moduri: 356.552f sau 3.56552e2f amindoua notari sunt echivalente si
reprezinta de fapt acelasi numar.
Urmatorul tip de numar real este double care reprezinta de asemenea o valoare in precizie dubla si care ne permite sa
reprezentam cu mai multa precizie numerele reale pentru ca ne permit un numar de zecimale mai mare. Marginile intre
Confidential
Page 127
3/25/2016
care putem alege un numar de tipul double este : -1.79769313486232 x 10308 la 1.79769313486232 x 10308. Pentru a
defini un numar de tipul double putem folosi urmatoarele definitii:
double nume_variabila; sau double nume_variabila = valoare; La fel ca si variabilele de tip float si cele double au o
litera care urmeaza valori variabilei aceasta litera este D sau d . Vom considera in continuare citeva exemple de numere
double precizie 3.14d, 3.34545d sau 3.34565e2d. La fel ca si in cazul numerelor de tip intreg trebuie avut in vedere ca
este bine sa se foloseasca tipuri de date cit mai mici pentru a micsora cantitatea de memorie necesara si numai apoi sa se
treaca la un tip de varibila imediat urmator superior. Numere de tip double nu ar trebui folosite decit daca s-ar proiecta
programe de modelare 3D .

Confidential
Page 128
3/25/2016

Curs HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Monkey Member HTML and Java Training Course

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

link la o alta resursa sau document

Vom prezenta in continuare resursele URL care se gasesc pe internet:

Publice documente on-line care sa contina, texte, tablele si imagini, etc.

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

Istoria limbajului HTML pe scurt

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

Text si Grafica pe Web

Sun Systems sound

Servicii internet si adrese

Monkey Member HTML and Java Training Course

Un exemplu de adresa de e-mail este epopa@mail.worldnet.net sau epopa@mci.com.

Monkey Member HTML and Java Training Course

In directorul dumneavoastra creati un fisier primul.html

Monkey Member HTML and Java Training Course

Linie cu grosime de 5 pixeli cu umbra.

Trecere la linie noua <BR>

Monkey Member HTML and Java Training Course

Alignierea obiectelor intr-o pagina HTML

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

Codul sursa este urmatorul:

&lt reprezinta semnul <

Monkey Member HTML and Java Training Course

Formatarea textului folosind tag-urile pentru hedere

Monkey Member HTML and Java Training Course

H1 care este cel mai mare text posibil de afisat

Monkey Member HTML and Java Training Course

<STRONG>Acesta este text cu caractere strong tag STRONG si /STRONG.<BR>

Monkey Member HTML and Java Training Course

Monkey Member HTML and Java Training Course

Liste ordonate si neordonate tag-urile <OL>, </OL> si <UL>, </UL>

Monkey Member HTML and Java Training Course

type = stilul folosit pentru lista poate fi 1,A,a, I, i etc

Monkey Member HTML and Java Training Course

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

Monkey Member HTML and Java Training Course

Imagini grafice pentru pagina Web

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

Hypertext si link-uri la alte pagini HTML

Monkey Member HTML and Java Training Course

Monkey Member HTML and Java Training Course

<LI> Sapun de toaleta

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

Monkey Member HTML and Java Training Course

<TITLE>Acesta este un tabel cu doua linii si doua coloane</TITLE>

Aceasta comanda va alinia tabelul la stinga sau la dreapta pagini.

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

width =x% sau width=x

Spre exemplu urmatoarea comanda este:

Monkey Member HTML and Java Training Course

Monkey Member HTML and Java Training Course

Engineering and Drafting Service SRL

Monkey Member HTML and Java Training Course

Engineering and Drafting Service SRL