V-Game E-Book by Ama Cercel

CUPRINS 1.

PROGRAMUL HTML .................................................................................................................................. 3 1.1.

CE ESTE HTML? .................................................................................................................................. 3

1.2.

STRUCTURA UNEI PAGINI HTML ................................................................................................. 4

1.2.1.

Elemente de bază ...................................................................................................................... 7

1.2.2.

Structura unui document HTML .......................................................................................... 9

1.2.3.

Atribute HTML ........................................................................................................................... 9

1.2.4.

Paragrafe și stiluri în html.................................................................................................. 10

1.2.5.

Cotații și citate în HTML ...................................................................................................... 12

1.2.6.

Liste și tabele ........................................................................................................................... 13

1.3.

DIFERENŢA DINTRE HTML ȘI HTML 5 .................................................................................... 15

1.4.

HTML 5............................................................................................................................................... 17

1.5.

STRUCTURA HTML 5 ..................................................................................................................... 18

PROGRAMUL CASCADING STYLE SHEETS - CSS............................................................................ 32 2.1.

SINTAXA CSS .................................................................................................................................... 32

2.2.

UNITĂŢI CSS ..................................................................................................................................... 42

LIMBAJUL DE PROGRAMARE JAVA ................................................................................................... 45 3.1.

GENERALITĂȚI ................................................................................................................................ 45

3.2.

OBIECTE ŞI CLASE .......................................................................................................................... 48

3.3.

ELEMENTELE DE BAZĂ ALE LIMBAJULUI DE PROGRAMARE JAVA ............................... 50

3.4.

CLASE ŞI OBIECTE ÎN JAVA .......................................................................................................... 59

3.4.

INTRĂRI ŞI IEŞIRI ........................................................................................................................... 78

3.5.

APPLET-URI ..................................................................................................................................... 85

3.6.

INTERFEŢE GRAFICE ..................................................................................................................... 89

BIBLIOGRAFIE: .............................................................................................................................................. 102

1. PROGRAMUL HTML 1.1. CE ESTE HTML? Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de pentru lucrul pe internet și stă la baza creării unui site web. Deci, înainte de a studia alte programe utile lucrului pe Internet, este bine să cunoaștem HTML, ca program de bază în crearea paginilor web. Deci HTML este un limbaj pe care browserele de internet îl înţeleg și cu ajutorul lui pot fi afișate paginile web. El se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaţii, precum sistemele de gestionare a conţinutului, wikiuri și forumuri web generează pagini HTML. HTML este, de asemenea, utilizat în e-mail deoarece majoritatea aplicaţiilor folosesc un astfel de editor încorporat pentru compunerea emailurilor și un motor de prezentare a emailurilor de acest tip. Limbajul HTML oferă proiectanţilor de pagini Web următoarele posibilităţi: 1. Să publice documente cu headere, texte, tabele, liste, fotografii, etc; 2. Să regăsească on-line informaţiile prin intermediul hiperlink-urilor printr-un simplu click de Mouse; 3. Să proiecteze formulare pentru realizarea tranzacţiilor cu servere, pentru căutări de informaţii sau pentru activităţi specifice comerţului; 4. Să includă foi de calcul tabelar, clipuri video, sunete și alte aplicaţii direct în documente. Editoarele HTML pot fi: editoare clasice și editoare de tipul WYSIWYG (What You See Is What You Get - ceea ce vezi este ceea ce obţii). La cea de a doua categorie de editoare HTML, utilizatorii se ocupă decât de partea grafica, de așezarea în pagina etc., scrierea codului HTML rămânând în seama acestor programe. Limbajului HTML următoarele avantaje: • este foarte simplu și nu necesită mult timp; • oferă controlul absolut asupra realizării paginii web; • poţi folosi în cadrul paginilor secvenţe de cod HTML "împrumutate" de la alte pagini web. Să poţi scrie un program HTML, în primul rând trebuie să știm: - Ce este Notepad și cum se lucrează cu el - Să știm să deschidem un fișier folosind Internet Explorer sau orice alt browser la alegere - Să știm ce este și cum se face copy/ paste Componenţa unui document HTML este:

1. versiunea HTML a documentului 2. zona head cu etichetele <head>, </head> 3. zona body cu etichetele <body>, </body>sau <frameset>, </frameset> Versiunea HTML poate fi:  HTML 4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd>  HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional/EN”http://www.w3.org/TR/html4/loose.dtd>  HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” http://www.w3.org/TR/html4/framese.dtd>  HTML 5 <!DOCTYPE HTML> Caracteristica importantă a limbajului este portabilitatea, adică orice document sursă HTML va arăta identic pe orice tip de calculator și în orice sistem de operare, sarcina interpretării sale revenind diverselor navigatoare.

1.2. STRUCTURA UNEI PAGINI HTML Ca și în HTML, în HTML 5 între elementele tagului head se introduce tagul title care va da numele paginii noastre. Acest titlu al paginii trebuie să fie foarte scurt, astfel încât motoarele de căutare să indexeze cuvinte cu valoare mare. De asemenea, este recomandat să se facă și o optimizare cu ajutorul Search Engine Optimization. În felul acesta vom avea o imagine mai corectă despre cum trebuie construit un site, optimizarea poziționării la motoarele de căutare fiin foarte importantă dacă dorim ca lumea să ne cunoască și să ne viziteze siteul. Spre exemplu, dacă siteul nostru urmărește promovarea unei școli, atunci titlul paginii poate conține numele școlii. Trebuie ținut cont că un SEO corect impune ca titlul să aibă o lungime cuprinsă între 10 și 64 de caractere, acest număr conținând și numărul de spații goale. În felul acesta google va acorda o notă bună la indexare și siteul nostrum va fi afișat printer primele în cazul unei căutări. Aceste cuvinte, utilizate în căutare, se numesc cuvinte cheie și sunt folosite în conținutul siteului dar și în codul html.

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> </head> <body> <p>My first page</p> </body> </html> Următorul element important ce trebuie introdus între tagul head este tagul meta. Cu ajutorul acestui tag se poate descrie conținutul siteului. <meta name=”Description” content=”Fotografii de calitate numai la noi, fotografii portret, fotografii cu peisaje” />. Descrierea trebuie să înceapă cu titlul siteului, tocmai pentru că motoarele de căutare iau în considerare acest tip de tag. Conform SEO, descrierea nu trebuie să fie mai scurtă de 40 de caractere și nici mai lungă de 154 de caractere. Această descriere va fi afișată de motorul de căutare în rezultate. <!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Our school is opened to the community" /> </head> <body> <p>Colegiul Tehnic Dimitrie Leonida Petrosani</p> </body> </html>

Elementul meta permite și atributul name=”Keywords”, atribut atribut pe care însă google nu îl ia în considerare dar celelalte da. <meta name="Keywords" content=" Our school is opened to the community"/>

Conform SEO, lungimea ”Keywords” trebuie să fie între 4 și 8 cuvinte sau expresii formate din două cuvinte. <!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Our school is opened to the community" /> <meta name="Keywords" content=" Scool&community" /> </head> <body> <p>COLEGIUL TEHNIC DIMITRIE LEONIDA PETROSANI</p> </body> </html> Alt element prezent în tagul head este tagul link. Cu ajutorul lui facem legătura între diferite fișiere ale siteului sau între diferite siteuri. Spre exemplu, introducem o legătură către un favicon. Un favicon este o fotografie mica, de regulă identică cu logo-ul siteului și care apare înaintea URL-ului în browserului. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> De obicei, acest favicon are o mărime de 32x32 pixeli sau 16x16 pixeli și 256 de culori. <!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Our school is opened to the community" /> <meta name="Keywords" content="school&community" /> <link rel="shortcut icon" href="favicon.png" type=”image/x-icon” /> </head> <body> <p>COLEGIUL TEHNIC DIMITRIE LEONIDA PETROȘANI</p>

</body> </html> În interiorul tagului head se mai include și legături către fișiere .css pentru stilizare și fișiere .js (fișiere java script) care vor da un aspect mai placut siteului nostru.

1.2.1. Elemente de bază Orice pagină HTML începe cu declarația DOCTYPE care definește documentul ca fiind de tip HTML. Declarația DOCTYPE nu este case sensitive, toate cazurile fiind acceptate. Toate paginile HTML conțin taguri. Tagurile nu sunt altceva decât niște marcaje sau etichete pe care limbajul HTML le folosește alături de texte pentru a ajuta browserul de internet să afișeze corect conținutul paginii web. Structura oricărei pagini HTML este: <html> <title> </title> <head> </head> <body> </body> </html> Toate paginile HTML încep și se termină cu etichetele <html> și </html> iar în interiorul acestor etichete găsim perechile <head>, </head> și <body>, <body>. <head> conține titlul paginii între etichetele <title> și </title>, descrieri de tipul <meta>, stiluri pentru formatarea textului, scripturi și legături către fișiere externe (de exemplu scripturi, fișiere de tip CSS sau favicon ). Etichetele de tip meta conțin cuvinte cheie, descrierea paginii, date despre autor, informații utile motoarelor de căutare și au următorul format: <META NAME=”nume” CONTENT=”continut”> Astfel, avem: • <html> </html> Prin folosirea acestui tag îi spunem browserului că este vorba de un fișier HTML pentru a îl putea deschide și închide • <title></title> titlul documentului, al paginii • <head> </head> titlul paginii • <body></body> corpul paginii ce conține tot ce va fi afițat pe ecran. Pentru a scrie o pagină HTML trebuie să parcurgem 4 pași: 1) Deschideți Notepad.

2) Scrieți sau copiați ceva html in notepad. 3) Salvați pagina cu numele dorit și extensia .html 4) Deschideți pagina create folosind un browser. Exemplu:

<html> <title> PAGE`S NAME</title> <head>My First Page</head> </html>

Alt exemplu: <html> <head> <title>My First Web Page</title> </head> <body> Welcome!<br> In this book we will learn how to create a web page using HTML 5. <br> ENJOY! </body> </html> EXERCIȚIU: Realizați o pagina web care sa conțină numele vostru in titlu iar in body adaugați o propoziție la alegere.

1.2.2. Structura unui document HTML Aici vorbim despre: 1. headings <h1> This is a heading </h1> Link pentru mai multe informații: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_headings 2. paragrafe (paragraphs) În html, un paragraf este definit cu tagul <p> <p> This is a paragraph. </p> Pentru exemple: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_paragraphs 3. links în html, legăturile sunt definite cu tagul <a> Pentru informații suplimentare: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_link 4. imagini imaginile sunt definite cu ajutorul tagului <img> Pentru exemple: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_img 1.2.3. Atribute HTML Elementele html pot avea atribute ce furnizează informații despre ele. a. Atributul limbă Un lucru important în ceea ce privește HTML 5 îl constituie precizarea, în interiorul tagului html a unui atribut ce indică limba în care sunt scrise articolele din site: <html lang="ro-RO"> este utilizat pentru a-i spune browserului că este vorba de limba română sau <html lang="en-US"> pentru a-i spune browserului că este vorba despre limba engleză. 

<!DOCTYPE HTML> <html lang="ro-RO">

<head> <meta charset="UTF-8"> </head> <body> <p>prima pagina</p> </body> </html> b. Atributul href Acest atribut este folosit pentru a preciza adresa linkului definit inițial prin tagul <a> http://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_link c. Atributul size (dimensiune) este folosit pentru a preciza sursa fișierului si sau dimensiunea imaginii <img src=”image.jpg” width=”104” height=”142”> La acest lik găsiți informații complete despre elemetele de referință din html: http://www.w3schools.com/tags/default.asp 1.2.4. Paragrafe și stiluri în html <p> definește un paragraph <br> introduce o singură linie si apoi trece pe rândul următor <pre> definește texte predefinite. Când vorbim despre stil, vorbim despre stabilirea culorii fundalului, a culorii textului, a dimensiunilor caracterelor. Pentru mai multe informații, folosiți link-ul: http://www.w3schools.com/html/html_styles.asp Taguri utile in stabilirea stilului și în formatarea unui document html: <body bgcolor=“red”></body> aplică culoare fundalului <font color=“green” size=“6” face=“comics sans ms”></font> stabilește culoarea, mărimea și stilul caracterelor din text <center></center> afișează în centru paginii <left></left> afișează la stânga <right></right> afișează la dreapta

Exemplu: <html> <title> Your name </title> <head> <center> MY FIRST PAGE</center> </head> <body bgcolor=“red”><left> <font size=“6” color=“green” face=“comic sans ms”>WELCOME!<br> We will learn together HTML. This is your first web page! <br> </font></left> </body> </html>

Folosind etichete adecvate textul poate fi formatat.. Spre exemplu fonturilor li se poate modifica: mărimea, culoarea, forma (normal, bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontală sau verticală iar titlurile (header), de la 1 la 6, sunt diferite ca mărime (1 cel mai mare iar 6 cel mai mic). Etichetele <div> și </div> delimitează un bloc text în vederea formatării. Unul din atributele blocului div este align care poate lua valorile: center aliniere pe centru left aliniere la stanga right aliniere la dreapta În situația în care dorim ca textul introdus să fie afișat exact așa cum a fost introdus (text preformatat) în fișierul sursă vom folosi perechea de etichete <pre> și </pre>. HTML

Afisare

text normal

text bold

<i>text cursiv</i>

text cursiv

<u>text subliniat</u>

text subliniat

<del>text taiat</del>

text subliniat

<sup>exponent</sup>

exponent

<sub>indice</sub>

indice

<tt>caractere monospatiate</tt>

caractere monospatiate

<cite>Citat</cite>

Citat

<em>evidentiat</em>

evidentiat

<code>text scris la tastatura</code>

Text continand cod de computer

<kbd>text scris la tastatura</kbd>

text scris la tastatura

<samp>mostra de cod de computer</samp>

mostra de cod de computer

<strong>text ingrosat</strong>

text ingrosat

mare

mic

font rosu

<font face="Courier">font Courier</font>

font Courier

font size=6

<div align="center">text aliniat pe centru</div>

text aliniat pe centru

<div align="left">text aliniat la stanga</div>

text aliniat la stanga

<div align="right">text aliniat la dreapta</div>

text aliniat la dreapta

<h1>Titlu 1</h1>

TITLU 1

<h2>Titlu 2</h2>

TITLU 2

<h3>Titlu 3</h3>

Titlu 3

<h4>Titlu 4</h4>

Titlu 4

<h5>Titlu 5</h5>

Titlu 5

<h6>Titlu 6</h6>

Titlu 6

1.2.5. Cotații și citate în HTML Citatul se definește in html folosind tagul <q>. În felul acesta, browserul recunoaște un citat și pune ghimilele în jurul elementelor marcate de tagul <q>. Un citat mai lung se marcheaza prin tagul <blockquote>. <cite> este folosit pentru a define titlul unei lucrări.

1.2.6. Liste și tabele Alte taguri importante, în afara celor ce formatează textul, sunt cele ce creează liste și tabele. Listele sunt un mod simplu de organizare a informației și pot fi neordonate, ordonate și de definiții.  Liste neordonate Listele neordonate sunt delimitate de etichetele: <ul> și </ul> iar elementele de <li> și </li>. Elementelor acestei liste i se pot adăuga următorii marcări:  list-style-type: disc o list-style-type: circle  list-style-type: square list-style-type: none

Exemplu: <html> <head> <title>My first list page</title> </head> <body> <ul style= ”list-style-type:disc”> <li>apples</li> <li>pears</li> <li>grapes</li> </ul> </body> </html>



Liste ordonate

Liste ordonate sunt delimitate de etichetele <ol> și </ol> iar elementele de <li> și </li>. HTML

Afisare

Examples of fruits: Example of fruits: <ol> 1.apples <li>apples</li> 2.pears <li>pears</li> 3.grapes <li>grapes</li> </ol>

Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (opțiunea default): Pentru mai multe informații și exerciții intrați pe siteul: http://www.w3schools.com/html/html_lists.asp Realizarea tabelelor: Tabelele sunt formate din linii și coloane, intersecțiile lor purtând numele de celule. Pentru inserarea unui tabel este folosită perechea de etichete <table> și </table>, pentru un rând <tr> și </tr> iar pentru o celulă <td> și </td>. Tabele pot fi imbricate, adică în interior pot conține unul sau mai multe tabele. Un exemplu de tabel este prezentat mai jos. Acesta are: 2 coloane și 2 rânduri, border 1, coloana 1 lătime 80px, coloana 2 lățime 160px, fiecare celulă are o altă culoare de fond (bgcolor) HTML

Afisare

<table border="1"> <tr><td width="80" bgcolor="red">rosu</td><td width="160" bgcolor="yellow">galben</td></tr> <tr><td bgcolor="white">alb</td><td bgcolor="green">verde</td></tr> </table> Atributele etichetei table sunt: border = bordura (0 = lipsă bordură)

rosu galben alb

verde

width = lățimea tabelului height = înălțimea tabelului bgcolor = culoarea de fundal background = imaginea de fundal cellspacing = distanța între celule cellpaddind = distanța dintre marginea celulei și conținut Atributele etichetei td sunt: align = aliniere pe orizontală a conținutului (left=stânga, right=dreapta, center=centru) valign = aliniere pe verticală a conținutului (top=sus, bottom=jos, middle=mijloc) width = lățimea celulei height = înălțimea celulei bgcolor = culoarea de fundal background = imaginea de fundal colspan = unește celula cu cea din dreapta ei rowspan = unește celula cu cea de sub ea HTML

Afisare

R1 C2

R1 R1 C3 C4 R2 R2 C3 C4

R3 C2

R3 R3 C3 C4

R4 C2

R4 R4 C3 C4

1.3. DIFERENŢA DINTRE HTML ȘI HTML 5 HTML5 este ultima versiune a limbajului de marcare HTML, care a primit deasemenea și un număr ca urmare a inovaţiilor pe care le introduce. Versiunea 5 este un upgrade care promite o interactivitate mai mare pentru fișierele de timp media (video, audio), introducând tag-uri separate pentru acestea. HTML a apărut ca limbaj de marcare în 1990, fiind standardizat în anul 1997 ca HTML 4. Din Decembrie 2012, autoritatea numită W3C (World Wide Web Consortium) recomandă și

susţine utilizarea HTML5 pentru că acesta creează o experienţă mai bună pentru utilizator și face paginile mai ușor de înţeles de către browser-e. Care sunt diferenţele majore între HTML și HTML5 ? 1. HTML5 nu mai este un tot unitar. El reprezintă o colecţie de aplicaţii astfel încât, pe lângă taguri, conţine și API-uri (Application Programming Interface) care știu cum să trateze fiecare element media în parte: video, audio, canvas. 2. Fișierele Audio și Video nu făceau parte din specificaţiile HTML4. În schimb, HTML5 a creat tag-uri speciale care știu cum să trateze elementele multimedia: [audio] și [video]. 3. Geo-localizarea este aproape imposibilă în HTML4, pe când în HTML5, cu ajutorul JS GeoLocation API se poate detecta ușor locaţia unui utilizator care accesează un site. 4. Grafică vectorială era posibilă în HTML4 doar cu ajutorul unor aplicaţii ca Silverlight sau Flash. HTML5 conţine suport integral pentru grafică vectorială, prin intermediul elementului numit [canvas]. 5. Pentru că este o tehnologie nouă, HTML5 nu este suportat momentan de toate browserele. Pe măsură ce limbajul este pus la punct, pentru că în acest moment încă se lucrează la el, toate browserele vor putea citi și interpreta noul cod HTML. 6. Pentru ca paginile să fie mult mai bine înţelese de către motoarele de căutare, au fost introduse în HTML5 elementele [header] și [footer] în concordanţă cu noua anatomie a web-ului. 7. Au fost introduse deasemenea în HTML5 și elementele [section] și [article] care vor avea un impact mare în SEO pentru că astfel pot fi delimitate mai bine porţiuni din textul paginii. Odată cu implementarea HTML5, rolul platformei Flash a scăzut foarte mult pentru că nu mai este necesar în redarea clipurilor video (aceasta fiind principala sa funcţionalitate). Același lucru se va întâmpla și cu alte programe pe care HTML le utiliza pentru a reda elemente pentru care nu exista suport. Care sunt motivele pentru care am utiliza HTML5 ? 1. Accesibilitate sporită datorită elementelor noi introduse: [section], [article], [header], [footer], [nav], [aside]. Astfel oamenii pot mai identifica ușor secţiunile de text care îi interesează. 2. Declaraţia [!Doctype] este mult mai simplă și nu necesită introducerea unui cod lung care poate fi uneori greșit interpretat. Noua declaraţie este [!DOCTYPE HTML] și atât. 3. Codul est mult mai simplu și elegant faţă de versiunile anterioare. 4. Interacţiune mai bună pentru că HTML5 nu mai este un limbaj static. Cu ajutorul elementului [canvas] există posibilitate de a interacţiona și de a crea animaţii mai bune

decât în Flash. Dar mai mult decât [canvas] , HTML5 vine cu serii de API-uri care vor ajuta la crearea unui site foarte dinamic. 5. Creare de jocuri. Tot cu ajutorul elementului [canvas] se pot dezvolta jocuri interactive, cu funcţionalităţi superioare Flash-ului. 6. HTML5 este adoptat și de browser-ele telefoanelor mobile. Există tag-uri care te ajută la optimizarea site-ului pentru varianta mobilă.

1.4. HTML 5 HTML5 este a cincea revizuire a standardului HTML, creat în 1990 și care se află în curs de dezvoltare din 2011. Aceasta și își propune să însumeze nu numai HTML4 dar și XHTML1 și DOM2HTML având ca scop îmbunătăţirea suportului pentru cele mai recente apariţii multimedia. In HTML 5 au fost adăugate taguri noi pentru a ușura introducerea fișierelor multimedia în pagină. Între ele enumerăm: fișiere audio, video, grafică, documente interactive etc. Alte elemente noi în HTML 5 sunt tagurile <header>, <nav><figure> si <footer>, fiecare marcând o zona concretă. După cum am mai precizat, sintaxa HTML5 este compatibilă cu HTML4 și XHTML astfel că: - Puteţi închide elementele ce au un singur tag (META, BR, HR, INPUT, IMG) cu slash, <tag />, precum în XHTML, sau puteţi să le lăsaţi fără să le adăugași slash, <tag>. - Puteţi folosi litere mici, sau /și litere mari, pentru numele tagurilor și atribute. astfel: <meta charset=”utf-8”> sau <meta charset=”utf-8”/> <img src”image.jpg” alt=”HTML5”> Sau: <img src=”image.jpg” alt =”HTML5”> Sau, cu litere mari: <IMG src="image.jpg" ALT=" HTML 5"> În cazul tagului br: <br> Sau: <BR> Sau: <br />

De asemenea, în HTML 5, puteţi alege să specificaţi sau nu atributul TYPE în elementele <script>, and <style>, acesta devenind optional: <script type="text/javascript"><!-// Cod JavaScript --></script> Sau: <script><!-// Cod JavaScript --></script> <style type="text/css"> /* Cod CSS */ </style> Sau: <style> /* Cod CSS */ </style> Toate aceste variante sunt valide în HTML5, dar, ca o bună practică, este indicat să folosiți sintaxa XHTML; adică să folosiți litere mici, sa adaugați slash-ul de închidere, și să specificați atributul "type" în tag-urile <script>, și <style>.

1.5. STRUCTURA HTML 5 Forma de bază a unui site realizat cu HTML 5 este: <!DOCTYPE HTML> <html> <body> <p>prima pagina</p> </body> </html>

Un lucru important în ceea ce privește HTML 5 îl constituie precizarea, în interiorul tagului html a unui atribut ce indică limba în care sunt scrise articolele din site: <!DOCTYPE HTML> <html lang="ro-RO"> <head> <meta charset="UTF-8"> </head> <body> <p>prima pagina</p> </body> </html> Ca și în HTML, în HTML 5 între elementele tagului head se introduce tagul title care va da numele paginii noastre. Acest titlu al paginii trebuie să fie foarte scurt, astfel încât motoarele de căutare să indexeze cuvinte cu valoare mare. De asemenea, este recomandat să se facă și o optimizare cu ajutorul Search Engine Optimization. În felul acesta vom avea o imagine mai corectă despre cum trebuie construit un site, optimizarea poziţionării la motoarele de căutare fiin foarte importantă dacă dorim ca lumea să ne cunoască și să ne viziteze siteul. Spre exemplu, dacă siteul nostru urmărește promovarea unei școli, atunci titlul paginii poate conţine numele școlii. Trebuie ţinut cont că un SEO corect impune ca titlul să aibă o lungime cuprinsă între 10 și 64 de caractere, acest număr conţinând și numărul de spaţii goale. În felul acesta google va acorda o notă bună la indexare și siteul nostrum va fi afișat printer primele în cazul unei căutări. Aceste cuvinte, utilizate în căutare, se numesc cuvinte cheie și sunt folosite în conţinutul siteului dar și în codul html.

<!DOCTYPE HTML> <html lang="ro-RO"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> </head> <body> <p>prima pagina</p> </body> </html>

Următorul element important ce trebuie introdus între tagul head este tagul meta. Cu ajutorul acestui tag se poate descrie conţinutul siteului. <meta name=”Description” content=”Fotografii de calitate numai la noi, fotografii portret, fotografii cu peisaje” />. Descrierea trebuie să înceapă cu titlul siteului, tocmai pentru că motoarele de căutare iau în considerare acest tip de tag. Conform SEO, descrierea nu trebuie să fie mai scurtă de 40 de caractere și nici mai lungă de 154 de caractere. Această descriere va fi afișată de motorul de căutare în rezultate. <!DOCTYPE HTML> <html lang="ro-RO"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Școala noastră este deschisă către comunitate" /> </head> <body> <p>Colegiul Tehnic Dimitrie Leonida Petrosani</p> </body> </html>

Elementul meta permite și atributul name=”Keywords”, atribut atribut pe care însă google nu îl ia în considerare dar celelalte da. <meta name="Keywords" content=" Școala noastră este deschisă către comunitate"/> Conform SEO, lungimea ”Keywords” trebuie să fie între 4 și 8 cuvinte sau expresii formate din două cuvinte. <!DOCTYPE HTML> <html lang="ro-RO"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Școala noastră este deschisa catre comunitate" /> <meta name="Keywords" content=" Școala deschisacomunitatii" /> </head> <body> <p>COLEGIUL TEHNIC DIMITRIE LEONIDA PETROSANI</p> </body> </html>

Alt element present în tagul head este tagul link. Cu ajutorul lui facem legătura între diferite fișiere ale siteului sau între diferite siteuri. Spre exemplu, introducem o legătură către un favicon. Un favicon este o fotografie mica, de regulă identică cu logo-ul siteului și care apare înaintea URL-ului în browserului. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> De obicei, acest favicon are o mărime de 32x32 pixeli sau 16x16 pixeli și 256 de culori. <!DOCTYPE HTML> <html lang="ro-RO"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Scoala noastră este deschisa comunitatii " /> <meta name="Keywords" content="scoala deschgisacomunitatii" /> <link rel="shortcut icon" href="favicon.png" type=”image/x-icon” /> </head> <body> <p>COLEGIUL TEHNIC DIMITRIE LEONIDA PETROȘANI</p> </body> </html> În interiorul tagului head se mai include și legături către fișiere .css pentru stilizare și fișiere .js (fișiere java script) care vor da un aspect mai placut siteului nostru. Organizarea unui site Organizarea unui site constă în stabilirea modului de aranjare a informaţiilor în pagină. În primul rând, siteul poate avea o lăţime fixă sau variabilă, în funcţie de felul în care dorim să afișăm informaţia n pagină.

Ca dimensiune fixă, cea mai indicate este cea de 960 pixeli deoarece poate fi afișată și de unele telefoane deștepte sau tablete. HEADER COLEGIUL TEHNIC DIMITRIE LEONIDA PETROȘANI LOGO

960 px MENIU

592px

ACASA OFERTA EDUCATIONALA CONTACT 368px

ZONA DE CONȚINUT 592px

FOOTER

Există și o a treia posibilitate de afișare a unui site, și anume în funcţie de rezoluţia monitorului, adică dacă este telefon se afișează un design, dacă este tablet altul, etc. În continuare vom discuta despre ce trebuie să conțină tagul body și introducem un element tip bloc pe care-l vom folosi pentru a grupa celelalte elemente. Acesta este <div> și </div>: <!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Our school is opened to the community" /> <meta name="Keywords" content="schooltocommunity" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body> <div class=”container”> </div> </body> </html>

Class este un selector folosit pentru a specifica stilul unui grup de elemente. Introducem, astfel, un <div class=”header”> cu ajutorul căruia vom putea realiza spațiul în care vor intra div-urile care conțin titlul siteului și datele de contact: <!DOCTYPE HTML> <html lang="ro-RO"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content=" Our school is opened to the community " /> <meta name="Keywords" content=” schooltocommunity " /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body> <div class="container"> <div class="header"> <div class="contact"> </div> <div class="titlu-site"> </div> </div> </div> </body> </html> În interiorul <div class="contact"> vom introduce două paragrafe cu adresa de email (aici avem un id="email" care va conta în poziționarea corectă a paragrafelor) și numărul de telefon, iar în interiorul <div class="titlu-site">vom introduce titlul site-ului format din heading-urile h1 și h2. Acestea pot fi de la h1 la h6 și sunt folosite numai pentru titluri și subtitluri. Nu trebuie folosite pentru scrierea bold sau font mare. Motoarele de căutare sunt foarte interesate de conținutul hedingurilor, așa că trebuie folosite în mod inteligent: <!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Scoala noastra este deschisa catre comunitate" />

Am introdus prima data <div class="contact"> și nu <div class="titlu-site"> deoarece <div class="contact"> va fi așezat în partea stângă iar <div class="titlu-site"> va fi așezat în partea dreaptă. Ca regulă generală, primul <div> va fi cel așezat în partea stângă deoarece aceasta este setarea "default". În afara <div class="header"> vom plasa meniul cu un nou <div>, acesta fiind format din tagurile <ul></ul> (ul de la "unordered list") care cuprinde lista formată cu ajutorul tagurilor <li></li> (li de la "list"), aceasta folosind "bullets" (mai există "ordered list" cu tagurile <ol></ol>, în interior folosindu-se tot <li></li>, diferența fiind că se vor folosi numere, și "definition list" cu tagurile <dl></dl> pentru definirea elementelor, în interiorul lor folosindu-se<dt></dt> – definește un element din listă – și <dd></dd> – descrie un element din listă):

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Our school is opened to the community" /> <meta name="Keywords" content="schooltocommunity" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body> <div class="container"> <div class="header"> <div class="contact"> <p id="email">email: gsdlpetrosani@yahoo.com</p> <p>tel: 0254542482</p> </div> <div class="COLEGIUL TEHNIC DIMITRIE LEONIDA PETROSANI"> <h1>LICEU TEHNOLOGIC</h1> <h2>STR. 22 DECEMBRIE, NR. 6, PETROSANI, HUNEDOARA</h2> </div> </div> <div class="meniu"> <ul> <li>HOME</li> <li>ABOUT US</li> <li>CONTACT</li> </ul> </div> </div> </body> </html>

Pentru a face legătura între elementele meniului și paginile la care fac acestea referire, avem nevoie de linkuri. În acest scop vom folosi tagul <a></a> , sintaxa fiind următoarea: <a href="url">text de legatura</a> . În continuare introducem un buton chiar sub meniu – "call to action" – care să atragă atenția vizitatorului și care să îl facă pe acesta să îl apese. Deci introducem încă un <div>, și anume <div class="buton"></div> iar în interiorul lui un link care să facă legătura cu pagina contact.html: <!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Our school is opened to the community" /> <meta name="Keywords" content="schooltocommunity" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body> <div class="container"> <div class="header"> <div class="contact"> <p id="email">email: <a href="mailto:gsdlpetrosani@yahoo.com" title="short description">gsdlpetrosani@yahoo.com</a></p> <p>tel: <a href="tel:phonenumberwithoutsigns" title="shortdescription">+40254542482</a></p> </div> <div class="titlu-site"> <h1>COLEGIUL TEHNIC DIMITRIE LEONIDA</h1> <h2>PETROSANI</h2> </div>

</div> <div class="meniu"> <ul> <li><a href="index.html" title="to the home page">acasa</a></li> <li><a href="about-us.html" title="to the page about us">despre noi</a></li> <li><a href="contact.html" title="cto the contact page">contact</a></li> </ul> <div class="buton"> <a href="contact.html" title="to the contact page.html"></a> </div> </div> </div> </body> </html>

O pagină web realizată în totalitate cu HTML 5 este următoarea: <!DOCTYPE HTML> <html lang="en-US"> <head> <title>DLEONIDA</title> <meta charset="UTF-8"> <meta name="Description" content="Our school is opened to the community" /> <meta name="Keywords" content="schooltocommunity" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link type="text/css" href="stiluri/css3.css" rel="stylesheet" /> </head> <body> <div class="container">

<div class="header"> <div class="contact"> <p id="email">email: <a href=mailto:gsdlpetrosani@yahoo.com title="shortdescription">gsdlpetrosani@yahoo.com</a></p> <p>tel: <a href="tel:phonenumber" title="shortdescription">+40254542482</a></p> </div> <div class="titlu-site"> <h1>COLEGIUL TEHNIC DIMITRIE LEONIDA</h1> <h2>PETROSANI</h2> </div> </div> <div class="meniu"> <ul> <li><a href="index.html" title="to home page">HOME</a></li> <li><a href="about-us.html" title="to the about-us page">ABOUT US</a></li> <li><a href="contact.html" title="to the contact page">CONTACT</a></li> </ul> <div class="buton"> <a href="contact.html" title="catre pagina contact.html"></a> </div> </div> <div class="continut"> <div class="pikachoose"> <ul id="pikame" class="jcarousel-skin-pika"> <li><img alt="imaginea 1" src="imagini/posa1.jpg"/></li> <li><img alt="imaginea 2" src="imagini/posa2.jpg"/></li> <li><img alt="imaginea 3" src="imagini/posa3.jpg"/></li> <li><img alt="imaginea 4" src="imagini/posa4.jpg"/></li> <li><img alt="imaginea 5" src="imagini/posa5.jpg"/></li> </ul> </div> </div> <div class="footer"> <p>&copy; <a href="mysite" title="tom y site"> my site</a></p> </div> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js "></script>

Această pagină poate fi testată pe pagina: http://validator.w3.org/#validate_by_input

2. PROGRAMUL CASCADING STYLE SHEETS - CSS Un Cascading Style Sheet (CSS) descrie modul de prezentare a unei pagini HTML într-un document separat. CSS are urmatoarele avantaje: – Permite separarea continutului de prezentare. – Permite definirea prezentarii si a layout-ului tuturor paginilor dintr-un site web intr-un singur loc. – Poate fi folosit atat pentru pagini HTML cat si XML. CSS are si un dezavantaj: – Unele browsere nu il suporta in totalitate.

2.1. SINTAXA CSS Sintaxa CSS este simpla – este doar un fisier continand o lista de selectori (pentru alegerea tag-urilor) si descriptori (pentru a specifica ce dorim sa facem cu respectivele tag-uri): – Exemplu: h1 {color: green; font-family: Verdana} specifica ca orice este inclus in tag-uri h1 (HTML heading level 1) trebuie afisat folosind font de tip Verdana si colorat in verde Un fisier CSS reprezinta doar o lista de astfel de perechi selector/descriptor – Selectorii pot fi simple tag-uri HTML sau XML, dar CSS permite de asemenea definirea altor moduri de combinare a tag-urilor – Descriptorii sunt definiti chiar in CSS Sintaxa generala este: selector { property: value } sau selector, ..., selector { property: value; ... property: value } Unde: • selector reprezinta tag-ul ce este afectat de stil (selectorul este case-sensitive daca si numai daca limbajul de descriere a documentului este case-sensitive)

• property si value descriu modul de afisare al respetivului tag • Spatiile dupa virgule si punct si virgule sunt optionale • Un punct si virgula trebuie sa fie folosit intre perechi property:value, dar dupa ultima pereche punct si virgula devine caracter optional

Exemplu de CSS • /* This is a comment */ • h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */ • p, table, li, address { /* apply to all these tags */ font-family: "Courier New"; /* quote values containing spaces */ margin-left: 15pt; /* specify indentation */ } • p, li, th, td {font-size: 80%;} /* 80% of size in containing element*/ • th {background-color:#FAEBD7} /* colors can be specified in hex */ • body { background-color: #ffffff;} • h1,h2,h3,hr {color:saddlebrown;} /* adds to what we said before */ • a:link {color:darkred} /* an unvisited link */ • a:visited {color:darkred} /* a link that has been visited */ • a:active {color:red} /* a link now being visited */ • a:hover {color:red} /* when the mouse hovers over it */ SELECTORI Un tag XML sau HTML poate fi folosit ca un simplu element selector: body { background-color: #ffffff } Putem însă folosi selectori multipli: em, i {color: red} Putem repeta selectorii: h1, h2, h3 {font-family: Verdana; color: red} h1, h3 {font-weight: bold; color: pink} Atunci cand valorile nu coincid, ultima declaratie suprascrie declaratiile anterioare. Selectorul universal * se aplica oricarui si tuturor elementelor: * {color: blue} Atunci cand valorile nu coincid, selectorii mai specifici suprascriu comportamentul selectorilor mai generali (deci elementele em vor fi in continuare roșii).

Exemplu de suprascriere

Un selector descendent alege un tag avand un ancestor corespunzator: â&#x20AC;&#x201C; p code { color: brown } â&#x20AC;&#x201C; selecteaza code daca este folosit in interiorul unui paragraf Un selector copil > alege un tag avand un parinte corespunzator: h3 > em { font-weight: bold } selecteaza un em doar daca parintele imediat este h3 Un selector adiacent alege un element ce imediat urmeaza altuia: b + i { font-size: 8pt }

Exemplu: <b>I'm bold and</b> <i>I'm italic</i> Rezultatul va arata astfel: I'm bold and I'm italic

Exemplu: <html> <head> <title>HTML/CSS Test Suprascriere stiluri</title> <style TYPE="text/css"> body { background-color: #ffffff } em, i {color: red} h1, h2, h3 {font-family: Verdana; color: red} h1, h3 {font-weight: bold; color: pink} * {color: blue} </style>

</head> <body> <p>Am utilizat urmatoarele stiluri CSS, in ordine:</p> <em>em {color: red}</em><br> <b>b {color: blue}</b><br> <h3>h3 {font-family: Verdana;font-weight: bold; color: pink}</h1> <h2>h2 {font-family: Verdana; color: red}</h2> <h4>h4 {color: blue}</h4> </body> </html>

Un selector simplu de atribut permite alegerea elementelor ce au un anumit atribut, indiferent de valoarea acestuia: – Sintaxa: element[attribute] { ... } – Exemplu: table[border] { ... } Un selector de atribut valoare permite alegerea elementelor ce au un anumit atribut avand o anumita valoare: – Sintaxa: element[attribute="value"] { ... } – Exemplu: table[border="0"] { ... }

Exemplu: <html> <head> <title>HTML/CSS Test Selectori</title> <style TYPE="text/css"> p code { color: green } h3 > em { color: red; font-weight: bold } b + i { font-size: 8pt } </style> </head> <body> Secventa de cod: <code>if (x ==0) exit(1); </code><br> <p><code>if (x ==0) exit(1); </code></p> <p><i><code>if (x ==0) exit(1); </code></i></p> <h3><em>Copil</em></h3> <h3><u><em>Nepot</em></u></h3> <p><b>Text Bold</b> <i>Text italic</i> <i>Text italic</i></p> <p><i>Text italic</i><b>Text Bold</b></p> </body> </html>

VALORI Sintaxa unei reguli CSS este: selector, ..., selector { property: value; . . . property:value } Valoarea este orice apare intre doua puncte si punct si virgula (sau acolada) Exemplu: * {font-family: Trebuchet, Verdana, sansserif;} – Aceasta inseamna ca trebuie folosit font Trebuchet pentru orice, daca este disponibil; altfel, se foloseste font, daca este disponibil; altfel foloseste orice font sans serif pe care browserul il foloseste. • section {border: thin solid blue;} – Aceasta inseamna ca trebuie pusa o bordura in jurul elementelor section; bordura trebuie sa fie subtire si solida si albastra. ATRIBUTUL CLASS Atributul class permite existenta mai multor stiluri diferite pentru acelasi element – In fisierul de “style sheet”: p.important {font-size: 24pt; color: red} p.fineprint {font-size: 8pt} – In HTML: <p class="important">The end is nigh!</p> <p class="fineprint">Offer ends 1/1/97.</p> Pentru definirea unui selector ce se aplica oricarui element ce are o anumita clasa se omite numele tag-ului (dar se pastreaza punctul): .fineprint {font-size: 8pt} ATRIBUTUL ID Atributul id este definit similar atributului class, dar foloseste # in loc de . – In style sheet: p#important {font-style: italic} sau # important {font-style: italic} – In HTML: <p id="important"> class si id pot fi ambele folosite si nu e obligatoriu sa aiba nume diferite: <p class="important" id="important">

DIV SI SPAN div si span sunt elemente HTML al caror unic scop este acela de a mentine informatie CSS, div asigura existenta unei linii noi inainte si dupa (similar unui paragraf); span nu. Exemplu: – CSS: div {background-color: #66FFFF} span.color {color: red} – HTML: <div>This div is treated like a paragraph, but <span class="color">this span</span> is not.</div> FOLOSIREA DE STYLE SHEET-URI • • • • • • • •

Sunt trei moduri de folosire a unui CSS: – Style sheet extern Cea mai puternic abordare Se aplica atat pentru HTML cat si pentru XML Toate elementele CSS pot fi folosite – Style sheet embedded Se aplica doar pentru HTML, nu si pentru XML Toate elementele CSS pot fi folosite – Styles inline Se aplica doar pentru HTML, nu si pentru XML Forma limitata de sintaxa CSS

EXTERNAL STYLE SHEETS In HTML, in interiorul elementului <head>: <link REL="STYLESHEET" TYPE="text/css" HREF="Style Sheet URL"> In prologul unui document XML: <?xml-stylesheet href="Style Sheet URL" type="text/css"?> Nota: "text/css" reprezinta tipul MIME EMBEDDED STYLE SHEETS In HTML, in interiorul elementului <head>: <style TYPE="text/css"> <!--

CSS Style Sheet --> </style> Nota: Incapsularea style sheet-ului intr-un comentariu reprezinta un artificiu de ascundere a informatiei de browsere mai vechi ce nu inteleg sintaxa CSS.

INLINE STYLE SHEETS Atributul STYLE poate fi adaugat oricarui element HTML: <html-tag STYLE="property: value"> sau <html-tag STYLE="property: value; property: value; ...; property: value"> Avantaj: – Folositor daca dorim doar o mica modificare de stil Dezavantaje: – Mix de informatii de afisaj in HTML – Ascunde si ingreuneaza vibilitatea codului HTML – Nu se pot folosi toate elementele CSS ORDINEA DE CASCADARE Stilurile vor fi aplicate unui HTML in urmatoarea ordine: 1. Stilul implicit al browser-ului 2. External style sheet 3. Internal style sheet (in interiorul tag-ului <head>) 4. Inline style (in interiorul altor elemente, cele mai din afara mai intai) Cand elementele de stil ajung sa fie in conflict, cel mai “apropiat” (mai recent aplicat) stil castiga.

Exemplu de ordine de cascadare: • External style sheet: h3 { color: red; text-align: left; font-size: 8pt } • Internal style sheet:

h3 { text-align: right; font-size: 20pt } • Atributele rezultante: color: red; text-align: right; font-size: 20pt

Exemplu: CSS chapter {font-family: "Papyrus", fantasy} foreword > paragraph {border: solid red; padding: 10px} novel > foreword {font-family: Impact; color: blue} chapter {display: block} chapter:first-letter {font-size: 200%; float: left} paragraph {display: block} chapter:before {content: "New chapter: "} Rezultatul

– normal | italic | oblique FORMA SIMPLIFICATĂ A PROPRIETĂŢILOR Adesea mai multe proprietăţi pot fi combinate: h2 { font-weight: bold; font-variant: smallcaps; font-size: 12pt; line-height: 14pt; fontfamily: sans-serif } Poate fi scrisă sub forma: h2 { font: bold small-caps 12pt/14pt sans-serif } CULORI SI LUNGIMI • color: si background-color: – aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) | Additional browser-specific names (not recommended) Acestea sunt elemente folosite pentru unitatile de masura: – em, ex, px, % • Dimensiunea fontului, inaltimea pe x, pixeli, procent din dimensiunea mostenita – in, cm, mm, pt, pc. • inci, centimetri, milimetri, puncte (1/72 dintr-un inch), picas (1 pica = 12 puncte), relative la valoarea mostenita. CATEVA PROPRIETATI SI VALORI PENTRU TEXT • text-align: – left | right | center | justify • text-decoration: – none | underline | overline | line-through • text-transform: – none | capitalize | uppercase | lowercase • text-indent – length | 10% (indentarea primei linii a textului) • white-space: – normal | pre | nowrap PSEUDO-CLASE Pseudo-clasele sunt elemente ale caror stare (si mod de aparitie) poate varia cu timpul Sintaxa: element:pseudo-class {...} – :link Un link ce nu a fost vizitat – :visited Un link ce a fost vizitat – :active

Un link pe care tocmai se executa un click – :hover Un link peste care este pozitionat cursorul mouse-ului. Pseudo-clasele sunt permise oriune in cadrul selectorilor CSS. ALEGEREA NUMELOR CSS este proiectat pentru a separa continut de stil – Prin urmare, numele ce sunt folosite in HTML sau (mai ales) in XML trebuie sa descrie continut, nu stil. Exemplu: – Sa presupunem ca definiti span.huge {font-size: 36pt} si folositi <span class="huge"> in cadrul mai multor documente. – Ulterior descoperiti ca utilizatorii dezagreaza stilul acesta, deci modificati CSS-ul in span.huge {font-color: red} – Numele este incorect ales; incercati sa il redefiniti in toate documentele? – Daca ati fi ales de la inceput span.important {font-size: 36pt}, propriile documente ar fi fost mai clase si mai usor de intretinut.

2.2. UNITĂŢI CSS Pentru multe dintre valorile CSS rămase vom avea nevoie să specificăm măsurători de mărime. – Acestea sunt folosite pentru specificarea dimensiunilor: • em lumgimea literei ‘m’ • ex înălţimea literei ‘x’ • px pixele (uzual 72 per inch, dar depinde de monitor) • % procent din dimensiunea moștenită – Acestea sunt de asemenea folosite pentru specificarea dimensiunilor, dar nu au sens decât dacă cunoașteţi rezoluţia ecranului: • in inci • cm centimetri • mm milimetri • pt puncte (72pt = 1in) • pc picași (1pc = 12pt) Notă: puteţi folosi fracţii zecimale, precum 1.5 cm.

PADDING Padding-ul reprezintă spaţiul extra din jurul unui element, dar din interiorul border-ului. Pentru setarea padding-ului, folosiţi oricare sau toate dintre: – padding-top: size – padding-bottom: size – padding-left: size – padding-right: size – padding: size • size este dat în unităţile descrise anterior Exemplu: sidebar {padding: 1em; padding-bottom: 5mm} BORDERE Puteţi seta atributele border-ului cu oricare sau toate dintre : border-top:, border-bottom:, border-left:, border-right: și border:. Atributele sunt: – Grosimea marginii: thin, medium (default), thick, sau o dimensiune specifică (e.g. 3px) – Stilul marginii: none, dotted, dashed, solid, double, groove, ridge, inset, sau outset – Culoarea marginii: una dinte cele 16 nume de culori predefinite sau o valoare hex cu #rrggbb sau rgb(r, g, b) sau rgb(r%, g%, b%)

Exemplu: section {border-top: thin solid blue;} Notă: stilurile speciale (precum groove) nu sunt atât de cool pe cât sun - are not as cool as they sound MARGINI Marginile sunt spaţiul suplimentar rămas în afara border-ului. Setarea marginilor este analoagă setării padding-ului. Pentru setarea marginilor, folosiţi oricare sau toate dintre: – margin-top: size – margin-bottom: size – margin-left: size – margin-right: size – margin: size

INTERACŢIUNI CU BOX ȘI DISPLAY • With display:none, marginile și bordura sunt invizibile, iar setările de umplere nu au nici un efect • With display:block, marginile și bordura sunt invizibile, iar setările de umplere au efectul așteptat • With display:inline (care este implicită, dacă nu se specifică altfel): – marginile și bordura sunt invizibile, iar setările pentru stânga și dreapta au efectul așteptat – marginile și bordura sunt invizibile, iar setările pentru sus și jos nu adaugă spațiu suplimentar deasupra și dedesubtul liniei care conține elementul. Acest lucru înseamnă că liniile chenarului se vor suprapune cu un alt text.

STABILIREA UNUI LOOK CONSISTENT      

Orice pagină din cadrul site-ului ar trebui să împartă unele elemente de stil cu toate celelalte pagini; Utilizatorul ar trebui să știe, fără să se gândească la asta, că navighează încă în cadrul aceluiași site; Se folosește același logo sau același set de butoane de navigare în fiecare pagină Se folosește o schemă de culori și un set de fonturi consistente; Paginile nu trebuie să arate toate identic, dar ele trebuie să aibă același stil; Style sheet-urile CSS pot fi de mare ajutor în definirea stilului consistent dar trebuie teste făcute pe o varietate de browsere.

3. LIMBAJUL DE PROGRAMARE JAVA 3.1. GENERALITĂȚI Limbajul JavaScript a fost realizat de firmele Netscape şi Sun şi a fost conceput ca un limbaj care extinde posibilitățile de lucru ale HTM-ului. Limbajul conlucrează cu HTML-ul Java poate fi utilizat pentru următoarele nivele: Nivelul client Atunci cînd Java trebuie să fie rulat pe o masină client este tipic implementat într-o miniaplicatie executata din navigator care poate comunica cu server-ul de pe care afost descărcat. Nivelul serverului de aplicatii Java poate fi utilizate pe server-ul de aplicatii pentru implementarea unor componente partajate si reutilizabile ce tin de logica aplicatiei. Java mai poate fi utilizat la acest nivel de miloc pentru a furniza interfete de control pentru aplicatii generate sub forma unor pagini Web. Nivelul serverului de date Acest server stochează date, dar mai poate stoca s-i executa cod Java, în particular acest cod manipulează intensiv date sau fort-ează reguli de validare specifice datelor. Caracteristici ale limbajului JavaScript:  In JavaScript se scriu secvente de program numite scripturi. Majoritatea acestor secvente sunt alcatuite din functii, care raspund anumitor evenimente.  In JavaScript NU se citesc si NU se scriu fisiere;  JavaScript este un limbaj interpretat. Asta inseamna ca browserul preia o instructiune, o executa , apoi preia o alta instructiune o executa, s.a.m.d.  JavaScript este un limbaj care utilizeaza obiecte;  In JavaScript seface distinctie intre literele mari si literele micui, adica este case sensitive ”. “  Erorile de sintaxa se depisteaza greu, drept urmare se poate folosi functia alert ( ).  Foloseste din sintaxa lui C++ si a limbajului Java  JavaScript lucreaza cu functii definite de programatori sau cu/si functii predefinite Exista trei modalitati de a introduce intr-un document HTML , si anume:  Scriptul se scrie în head; .<script language=”JavaScript” > si</script>;  Scriptul se scrie în body; .<script language=”JavaScript” > si</script>;  Scriptul apare ca și fișier extern cu extensia js, deci “nume.js”;

Exemplu: 1. Scrierea codului sursă: class Salut { public static void main( String args[]) { System.out.println("Salut !!!"); } } Toate aplicaţiile Java conţin o clasă principală în care trebuie să se găsească metoda main(). Clasele aplicaţiei se pot găsi fie într-un singur fişier, fie în mai multe.

2. Salvarea fişierelor sursă Se va face în fişiere cu extensia .java. Fişierul care conţine codul sursă al clasei principale trebuie să aibă acelaşi nume cu clasa principală a aplicaţiei (clasa care conţine metoda main). Prin urmare, fişierul nostru o să-l salvăm sub numele: Salut.java 3. Compilarea aplicaţiei Se foloseşte compilatorul Java, javac. Apelul compilatorului se face pentru fişierul ce conţine clasa principală a aplicaţiei. Compilatorul creează câte un fişier separat pentru fiecare clasă a programului; acestea au extensia .class şi sunt plasate în acelaşi director cu fişierele sursă. Rezultatul comenzii javac Salut.java este fişierul Salut.class 4. Rularea aplicaţiei Se face cu interpretorul java, apelat pentru unitatea de compilare corespunzătoare clasei principale, fiind însă omisă extensia .class asociată acesteia. java Salut Rularea unei aplicaţii care nu foloseşte interfaţă grafică, se va face într-o fereastră sistem.

Exemplu: Crearea structurii de fişiere şi compilarea applet-urilor sunt identice ca în cazul aplicaţiilor. Diferă în schimb structura programului şi modul de rulare al acestuia. 1. Scrierea codului sursă: import javax.swing.*; import java.awt.*; public class Salut extends JApplet { public void paint(Graphics g){ g.drawString("Salut",50,50); } } 2. Salvarea fişierelor sursă Salvarea se va face în fişierul Salut.java 3. Compilarea applet-ului javac Salut.java În urma compilării rezultă fişierul Salut.class

4. Rularea applet-ului Applet-urile nu rulează independent. Ele pot fi rulate doar prin intermediul unui browser: Internet Explorer, Netscape sau printr-un program special cum ar fi appletviewer-ul din setul JDK. Crearea unui fişier HTML pentru miniaplicaţie (exemplu.html) <html> <head> <title>Primul Applet Java</title> </head> <body> <applet code=Salut.class width=400 height=400> </applet> </body> </html> 5. Vizualizarea applet-tlui appletviewer exemplu.html Pentru mai multe informații accesați http://www.w3schools.com/js/js_syntax.asp

3.2. OBIECTE ŞI CLASE Programarea orientată pe obiecte este gândită după modelul lumii reale – obiectele sunt adesea formate din mai multe tipuri de obiecte mici. Când scriem programe într-un limbaj orientat pe obiecte, nu definim obiecte ci clase de obiecte, unde o clasă reprezintă un şablon pentru mai multe obiecte cu caracteristici similare. Clasele întrupează toate caracteristicile unei mulţimi particulare de obiecte. Obiect sau instanţă a clasei reprezintă acelaşi lucru. Clasa este reprezentarea generală a unui obiect iar instanţa /obiectul este reprezentarea concretă a clasei. Fiecare clasă scrisă în Java are două caracteristici de bază: atribute şi comportament. Atributele diferenţiază obiectele între ele şi determină aparenţa, starea sau alte calităţi ale obiectului în cauză. Dacă ne gândim să creăm o clasă Maşină, ea ar trebui să includă următoarele atribute: culoare, stil, marcă. Atributele sunt definite în clase ca variabile. Tipul şi numele variabilelor sunt definite în clase şi fiecare obiect are valori proprii pentru fiecare atribut. Deoarece fiecare instanţă a clasei poate avea valori diferite pentru variabilele sale, aceste variabile se mai numesc şi variabile instanţă.

Exemplu: O instanţă a clasei maşină, MaşinaMea ar putea avea următoarele valori pentru atribute: culoare = alb stil = elegant marcă = Mercedes Există si variabile numite variabile clasă. Valorile variabilelor instanţă sunt păstrate în instanţe şi se schimbă pentru fiecare instanţă iar valorile variabilelor clasă sunt păstrate în clasă şi nu se schimbă pentru fiecare instanţă. Comportamentul unei clase determină cum operează o instanţă a unei clase. De exemplu comportamentul unei maşini constă în: porneşte, opreşte, frânează, schimbă viteza, schimbă direcţia, etc. Pentru a defini comportamentul unei clase se definesc metode, echivalentul funcţiilor sau procedurilor din alte limbaje de programare. Spre diferenţă de alte limbaje de programare, în Java nu se pot defini funcţii în afara claselor. Prin urmare, metodele sunt funcţii definite în interiorul claselor care operează în instanţele claselor respective. Metoda unui obiect poate fi apelată de către un alt obiect sau o altă clasă. Ca şi în cazul atributelor, există două tipuri de metode: metode instanţă şi metode clasă. Metodele instanţă operează doar în cadrul instanţei unei clase. În schimb, metodele clasă operează în interiorul clasei. Principiile programării orientate pe obiecte Obiectul este o variabilă care are o structura şi o stare. Fiecare obiect dispune de operaţii prin intermediul cărora i se poate manipula starea. Utilizatorul nu are acces direct la părţile constituente ale unui obiect sau la implementarea sa; acestea vor putea fi accesate doar prin intermediul metodelor care au fost furnizate împreună cu obiectul. Gruparea datelor şi a operaţiilor care pot fi efectuate asupra acestor date, având grijă ca detaliile de implementare să fie ascunse, poarta numele de încapsulare. Unul din principalele scopuri ale programării orientate pe obiecte este refolosirea codului. Limbajele de programare orientate pe obiecte furnizează mai multe mecanisme în acest scop. 1. Folosirea codului generic – dacă implementarea este identică, şi diferă doar tipul de bază al obiectului, nu este necesară rescrierea completă a codului – se scrie un cod generic care funcţionează pentru orice tip. De exemplu, se poate scrie o metodă care să ordoneze un şir de numere întregi, caractere, şiruri de caractere.

2. Moştenirea este un mecanism care permite extinderea funcţionalităţii unei clase. Se pot crea noi tipuri de date care să extindă (sau să restricţioneze) proprietăţile tipului de date original. 3. Polimorfismul Un tip referinţă polimorfic poate să refere obiecte de mai multe tipuri. Atunci când se apelează o metodă a tipului polimorfic, se va selecta automat metoda care corespunde tipului referit în acel moment.

3.3. ELEMENTELE DE BAZĂ ALE LIMBAJULUI DE PROGRAMARE JAVA Identificatori Sunt secvenţe nelimitate de litere şi cifre Unicode, începând cu o literă. Identificatorii nu au voie să fie identici cu cuvintele rezervate. Constante Constantele pot fi de următoarele tipuri: 1. constante întregi 2. constante reale 3. constante logice 4. constante caracter Secvenţe escape predefinite în Java: Cod \u0008 \u0009 \u000a \u000c \u000d \u0022 \u0027 \u005c \u0008

Secvenţa Escape '\b' '\t' '\n' '\f' '\r' '\"' '\'' '\\' '\b'

Caracter Backspace(BS) Tab orizontal (HT) Linie nouă - linefeed (LF) Pagină nouă - formfeed (FF) Început de rând (CR) Ghilimele Apostrof Backslash Backspace(BS)

5. constante şiruri de caractere Un şir de caractere este format din zero sau mai multe caractere cuprinse între ghilimele. Pentru mai multe informații accesați http://www.w3schools.com/js/js_objects.asp

Separatori Un separator este un caracter care indică sfârşitul unei unităţi lexicale şi începutul alteia. În Java separatorii sunt următorii: ( ) { } [ ] ; , . Instrucţiunile unui program se separă cu ”;”. Operatori 1. operator de atribuire: = (semnul egal) 2. operatori aritmetici binari: +, -, *, /, % Operatorii prescurtaţi :+=, -=, *=, /=, %= Exemplu: n += 2 este echivalentă cu n=n+2 3. operatori aritmetici unari: ++ (operator de incrementare), -- (operator de decrementare). Operatorii de incrementare şi decrementare pot fi prefixaţi (++x sau --x) sau postfixaţi (x++ sau x--). 4. operatori logici: &&(and), ||(or), !(not) Observaţie: evaluarea expresiilor logice se face prin scurtcircuitare (evaluarea se opreşte în momentul în care valoarea de adevăr a expresiei este sigur determinată) 5. operatori relaţionali: <, <=, >, <=, ==, != 6. operatori pe biţi: & (and), |(or), ^(xor), ~(not) 7. operatori de translaţie: <<, >>, >>> (shift-are la dreapta fără semn) 8. operatorul condiţional: ”? : ” Are forma: expresie_logica ? expresie 1 : expresie 2 Valoarea expresiei este dată de expresie1 dacă expresie_logică este true sau de expresie2 dacă expresie_logică este false.

Exemplu: Metoda de calculul minimului a două numere este: public int min (int a, int b){ return a<b?a:b; } 9. operatorul , (virgula) este folosit pentru evaluarea secvenţială a operaţiilor

Exemplu: int x=0, y=1, z=2; 10. operatorul + pentru concatenarea şirurilor: 11. operatorul de conversie de tip (cast) este: (tip_de_data) int i = 200; long l = (long)i; //conversie prin extensie long l2 = (long)200;

int i2 = (int)l2; // conversie prin contractie Pentru mai multe informații accesați http://www.w3schools.com/js/js_operators.asp Comentarii În Java există trei feluri de comentarii:  Comentarii pe o singură linie: încep cu //.  Comentarii pe mai multe linii, închise între /* şi */.  Comentarii pe mai multe linii care formează documentaţia, închise între /** şi **/. Textul dintre cele douã secvenţe este automat mutat în documentaţia aplicaţiei de către generatorul automat de documentaţie javadoc. Observaţii: 1. nu pot fi scrise comentarii în interiorul altor comentarii. 2. nu pot fi introduse comentarii în interiorul constantelor caracter sau şir de caractere. 3. secvenţele /* şi */ pot să apară pe aceeaşi linie cu secvenţa // dar îşi pierd semnificaţia; la fel se întâmplã cu secvenţa // în comentarii care încep cu /* sau /**. Pentru mai multe informații accesați http://www.w3schools.com/js/js_comments.asp Tipuri de date În Java tipurile de date se împart în două categorii:  tipuri primitive de date  tipuri referinţă. Tipuri primitive de date: 1. tipuri întregi Tip de date Dimensiune în octeţi byte 1 short 2 int 4 long 8

Domeniu -128 .. 127 -32768 .. 32767 -2147483648 .. 2147483647 -263 .. 263-1

2. tipuri reale Tip de date Dimensiune în octeţi float 4 double 8

Domeniu -1046 .. 1038 -10324 .. 10308

3. tipul caracter: char memorat pe 2 octeţi 4. tipul boolean: are două valori – true şi false

Vectorii, clasele şi interfeţele sunt tipuri referinţă. Valoarea unei variabile de acest tip este, spre diferenţă de tipurile primitive, o referinţă (adresă de memorie) către valoarea sau mulţimea de valori reprezentată de variabila respectivă. Pentru mai multe informații accesați http://www.w3schools.com/js/js_datatypes.asp Variabile Variabilele pot avea ca tip fie un tip primitiv de dată, fie o referinţă la un obiect. Declararea variabilelor se face prin: tip_de_date nume_variabila Iniţializarea variabilelor se face prin: nume_variabila = valoare Declararea şi iniţializarea variabilelor pot fi făcute în acelaşi moment: tip_de_date nume_variabila = valoare Declararea constantelor se face prin: final tip_de_date nume_variabila

Exemple: itnt a; a=5; final double PI = 3.14; int valoare = 100; long numarElemente = 12345678L; String floare = "frezie"; În funcţie de locul în care sunt declarate, variabilele pot fi: 1. Variabile membru, declarate în interiorul unei clase, vizibile pentru toate metodele clasei respective şi pentru alte clase în funcţie de modificatorul lor de acces 2. Variabile locale, declarate într-o metodă sau într-un bloc de cod, vizibile doar în metoda / blocul respectiv Pentru mai multe informații accesați http://www.w3schools.com/js/js_variables.asp Instrucţiuni a. Instrucţiunea vidă Este formată din ”;”. b. Instrucţiuni de decizie 1. Instrucţiunea if–else are forma:

if (expresie_logică) instrucţiuni1 else instrucţiuni2 instrucţiuni Dacă expresie_logică are valoarea true atunci se execută instrucţiuni1, altfel se execută instrucţiuni2. Expresie_logică este obligatoriu să fie cuprinsă între paranteze. Dacă pe una din ramuri sunt mai multe instrucţiuni ele trebuie să fie cuprinse între acolade {…}. Ramura else instrucţiuni2 poate să lipsească. 2. Instrucţiunea switch are forma: switch (expresie_selectare){ case val_1: instrucţiune_1; break; case val_2: instrucţiune_2; break; ... case val_i: instrucţiune_i; break; ... case val_n: instrucţiune_n; break; default: instrucţiune; } Instrucţiunea switch selectează dintre mai multe secvenţe de cod una care va fi executată. Se evaluează expresie_selectare; rezultatul obţinut se compară pe rând cu val_1, val_2, ..., val_n. Dacă se întâlneşte o valoare val_i pentru care se obţine egalitate (expresie_selectare=val_i) se execută instrucţiunile instrucţiune_i. Altfel, (dacă nu are loc nici o egalitate) se execută instrucţiunile de pe ramura default. Instrucţiune break întâlnită pe fiecare ramură are rolul de a întrerupe execuţia instrucţiunii switch după ce au fost executate instrucţiunile aferente ramurii alese. Dacă instrucţiunea break lipseşte atunci se execută şi instrucţiunile de pe următoarele ramuri până la întâlnirea primului break. Pentru mai multe informații accesați http://www.w3schools.com/js/js_if_else.asp c. Instrucţiuni repetitive 1. Instrucţiunea for repetă un bloc de instrucţiuni cât timp o condiţie este adevărată. În general, se cunoaşte de la început de câte ori urmează să se execute blocul de instrucţiuni. Are forma generală: for (iniţializare; test; incrementare)

instrucţiuni unde: iniţializare este o expresie care iniţializează variabila de control a instrucţiunii for  test este o expresie booleană evaluată înaintea fiecărei reluări a buclei; cât timp valoarea ei este true blocul de instrucţiuni se execută. Când valoarea ei este false, se părăseşte instrucţiunea for.  incrementare este o expresie care modifică variabila de control a instrucţiunii for. Oricare dintre cele trei părţi constituente ale instrucţiunii for poate să lipsească. for ( ; ; ) În acest caz se obţine o buclă infinită. Pentru a evita acest lucru este necesar ca în cadrul blocului de instrucţiuni să existe o condiţie de oprire. Pentru mai multe informații accesați http://www.w3schools.com/js/js_loop_for.asp 

2. Instrucţiunea while are forma: while (condiţie) instrucţiuni Instrucţiunea while este folosită pentru a repeta execuţia unui grup de instrucţiuni atâta timp cât condiţie are valoare true. Instrucţiunea while se mai numeşte şi instrucţiune cu test iniţial. Dacă la prima evaluarea a condiţiei aceasta are valoarea false instrucţiunile din corpul while-ului nu se execută niciodată. Pentru mai multe informații accesați http://www.w3schools.com/js/js_loop_while.asp 3. Instrucţiunea do-while are forma: do{ instrucţiuni }while (condiţie); Ca şi while, instrucţiunea do-while este folosită pentru a repeta execuţia unui grup de instrucţiuni atâta timp cât condiţie are valoare true. Diferenţa dintre cele două instrucţiuni este că, dacă la while se executau instrucţiunile doar dacă condiţie era adevărată, în cazul lui do-while blocul de instrucţiuni se execută cel puţin o dată după care se verifică valoarea condiţiei. Instrucţiunea do-while se mai numeşte şi instrucţiune cu test final. 4. Instrucţiunea break break Este folosită pentru părăsirea forţată a corpurilor instrucţiunilor repetitive (for, while, dowhile).

5. Instrucţiunea continue Are ca efect întreruperea execuţiei iteraţiei curente şi trecerea la iteraţia următoare. Observaţie: Instrucţiunile break şi continue pot să apară doar în cadrul unor instrucţiuni repetitive. Excepţie face instrucţiunea break care poate să apară şi în cadrul instrucţiunii switch. Pentru mai multe informații accesați http://www.w3schools.com/js/js_break.asp Tablouri (vectori) a. Tablouri (vectori) unidimensionale Declararea unui vector se face prin TipElement[ ] numeVector; sau TipElement numeVector[ ]; unde TipElement reprezintă tipul elementelor vectorului, iar parantezele [ ] aşezate fie înaintea fie după numele vectorului arată că este vorba despre un vector.

Exemple: int[ ] intregi; String adrese[ ]; Instanţierea unui vector se realizează cu operatorul new şi are ca efect alocarea memoriei necesare pentru memorarea elementelor vectorului, mai precis specificarea numărului maxim de elemente pe care îl va avea vectorul. Instanţierea unui vector se face astfel: numeVector = new TipElement[dimensiune];

Exemple: v = new int[10]; //se alocă spaţiu pentru 10 întregi adrese = new String[100]; //se alocă spaţiu pentru 100 de String-uri Declararea şi instanţierea unui vector pot fi făcute simultan astfel: TipElement[ ] numeVector = new TipElement[dimensiune]; După declararea unui vector, acesta poate fi iniţializat, adică elementele sale pot primi valori. În acest caz instanţierea lipseşte, alocarea memoriei făcându-se automat în funcţie de numărul de elemente cu care se iniţializează vectorul.

Exemple: String culori[] = {"Rosu", "Galben", "Verde"};

int []v = {2, 4, 6, 8, 10, 12}; Observaţii: Primul indice al unui vector este 0, deci poziţiile unui vector cu n elemente vor fi cuprinse între 0 şi n-1. Nu sunt permise construcţii de genul: TipElement numeVector[dimensiune] alocarea memoriei făcându-se doar prin intermediul operatorului new sau prin iniţializare.

Exemple: int v[10]; //incorect int v[ ] = new int[10]; //corect Accesul la elementul unui vector se face prin: numeVector[indice]

Exemplu 1: int v[]=new int[10]; for(i=0; i<10; i++) v[i]=i; b. Tablouri (vectori) cu mai multe dimensiuni În Java tablourile cu mai multe dimensiuni sunt de fapt vectori de vectori. Prin urmare, declararea, instanţierea şi iniţializarea se fac la fel ca în cazul vectorilor unidimensionali. TipElement numeVector[][]… = new TipElement[dim1][dim2]… sau TipElement[][]… numeVector = new[dim1][dim2]… TipElement sau parantezele pot fi de o parte şi de alta a lui numeVector.

Exemplu: int m[][]; m = new int[5][10];

//declararea unei matrice //cu 5 linii, 10 coloane

Observaţie: m[0], m[1], ..., m[5] sunt vectori de întregi cu 10 elemente

Dimensiunea unui vector Cu ajutorul cuvântului cheie length se poate afla dimensiunea unui vector. Exemple: Fie vectorul int []a = new int[5]; atunci a.length are valoarea 5. Fie matricea int m = new int[5][10]; atunci: m.length are valoarea 5 şi reprezintă numărul de linii al matricei m[0].length are valoarea 10 şi reprezintă numărul de elemente al primei linii a matricei, m[1].length are valoarea 10 şi reprezintă numărul de elemente al celei de-a doua linii a matricei, etc. Pentru mai multe informații accesați http://www.w3schools.com/js/js_arrays.asp Şiruri de caractere În Java, un şir de caractere poate fi reprezentat printr-un vector format din elemente de tip char, un obiect de tip String sau un obiect de tip StringBuffer.

Exemple echivalente de declarare a unui şir: String str = "abc"; char data[] = {'a', 'b', 'c'}; String str = new String(data); String str = new String("abc"); Concatenarea şirurilor de caractere se face prin intermediul operatorului +. String str1 = "abc" + "xyz"; String str2 = "123"; String str3 = str1 + str2; În Java, operatorul de concatenare + este extrem de flexibil în sensul că permite concatenarea şirurilor cu obiecte de orice tip care au o reprezentare de tip şir de caractere. Pentru mai multe informații accesați http://www.w3schools.com/js/js_datatypes.asp

3.4. CLASE ŞI OBIECTE ÎN JAVA Referinţe O clasă este un şablon pentru mai multe obiecte cu caracteristici asemănătoare. Un obiect este o colecţie de variabile (atribute) şi metode asociate descrise în clasă. Clasa poate fi asemănată cu un tip de date iar obiectul cu o variabilă. Dacă se declară o variabilă folosind numele unei clase ca şi tip, această variabilă conţine o referinţă către un obiect al clasei respective. Variabila nu va conţine obiectul actual ci o referinţă către un obiect / o instanţă a clasei. Deoarece folosind numele unei clase ca şi tip se declară o referinţă către un obiect, aceste tipuri poartă numele de tipuri referinţă. Se disting două caracteristici principale ale obiectelor în Java:  obiectele sunt întotdeauna alocate dinamic. Durata de viaţă a unui obiect este determinată de logica programului. Ea începe atunci când obiectul este creat şi se termină în momentul în care obiectul nu mai este folosit.  obiectele nu sunt conţinute de către variabile. O variabilă păstrează o referinţă către un obiect. O variabilă referinţă poate conţine şi o referinţă către nimic. Valoarea unei asemenea variabile referinţă este null. În Java nu se permite tipurilor referinţă să fie convertite către tipuri primitive sau invers. Obiecte În Java obiectele sunt create prin instanţierea unei clase, adică prin crearea unei instanţe a unei clase. Declararea obiectului se face prin: NumeClasa numeObiect;

Exemplu: String s; Complex c; În urma declarării, variabila este iniţializată cu null. Crearea obiectului echivalentă cu instanţierea clasei se realizează prin intermediul operatorului new şi presupune alocarea spaţiului de memorie necesar păstrării obiectului. Adresa (referinţa) către obiectul respectiv o să fie memorată în variabila numeObiect. numeObiect = new NumeClasa();

Exemplu: s=new String() ; Complex c=new Complex(2,3); Declararea şi crearea obiectului pot fi făcute pe aceeaşi linie.

Exemplu: String s=new String() ; Complex c=new Complex(2,3); În momentul în care se realizează crearea obiectului are loc şi iniţializarea lui. Spaţiul de memorie nu este alocat în momentul declarării obiectului. Alocarea memoriei se face doar la apelul instrucţiunii new! Referirea valorii unei variabile se face prin obiect.variabila

Exemplu: Complex c = new Complex(); c.re = 2; c.im = 3; System.out.println("Re=" +c.re+ " Im="+c.im); Apelul unei metode se face prin obiect.metoda([parametri])

Exemplu: Complex c = new Complex(); c.setRe(2); c.setIm(3); Pentru mai multe informații accesați http://www.w3schools.com/js/js_objects.asp

Obiecte predefinite In limbajul JavaScript sunt multe obiecte predefinite; acestea dispun de proprietăţi şi metode specifice, care se pot folosi direct. In exemple sunt folosite obiectele window şi document, împreună cu metodele lor, fără ca acestea să fie specificate explicit. Obiectele sunt ordonate într-o structură ierarhică, la vârful ei afându-se obiectul window. Si descrie fereastra actuală a browserului. Pe treapta următoare se află obiectul document, care descrie conţinutul paginii. Pe treapta următoare se află obiectul form. Pe lângă aceste obiecte, există o serie de alte obiecte. Pentru a putea folosi un obiect, trebuie ca acesta să fie mai întâi creat cu ajutorul cuvântului cheie „new” (vezi limbajul Java). Astfel pot fi apelate ulterior diferite proprietăţi şi metode. Obiectul window Obiectul Window corespunde ferestrei curente din browser si cu ajutorul lui se pot afla / modifica proprietatile ferestrei. Exista posibilitatea de a deschide ferestre noi. Obiectul window este cela mai de sus obiect din ierarhia obiectelor JavaScript. Corespunde ferestrei curente din browserul web. Prin acest obiect se pot afla prorietăţile ferestrei curente. Există şi posibiltatea de a deschide ferestre noi. Asa-numita „fereastră principală” a browserului web se poate apela prin numele rezervate „window” sau „self”. Proprietăţi ale obiectului window: PROPRIETATE closed defaultStatus innerHeight innerWidth locationBar menuBar name outerHeight outerWidth pageXOffset pageYOffset personalBar scrollBar statbar status toolbar

ACCES read read, write read, write read, write read read read, write read, write read, write read read read read read read, write read

Metode prin care se poate apela obiectul window: METODA DESCRIERE alert(s) Returnează Stringul s ca text într-un dialog-box. blur() Face fereastra inactivă. clearIntervall(p) Termină un eveniment/proces infint, inceput cu setIntervall(). p este parametrul in care a fost salvat rezultatul din setIntervall(). clearTimeout(p) Termină un Timeout care a fost început cu setTimeout().p este parametrul in care a fost salvat rezultatul din setTimeout(). close() Inchide fereastra. confirm(s) Returnează Stringul s ca text într-un dialog-box., care este prevazut cu butoanele de ok si cancel. moveBy(x,y) Mută o fereatra in directia (x,y)-pixeli (orizontal(x) sau vertical (y)). Un nr. negativ mută fereastra înspre stânga-sus. moveTo(x,y) Mută fereastra la coordonatele x,y – pixeli. open(p1,p2,p3) Deschide o nouă fereastră. Al 3-lea parametru e optional. p1: adresa (URL) unui fişier , care se vrea deschis în fereastră.(Un String gol deschide o fereastra goala) p2: Numele ferestrei p3: (optional) Date despre cum arată fereastra. Mai multe propietăţi se despart prin virgulă prompt(p1,p2) Creează un dialogbox cu 2 butoane analog metodei confirm() şi un câmp de text (textfield), în care utilizatorul face propriile remarci. p1 e un String, care apare în dialogbox p2 este textul acre apare prima dată în câmpul de text. resizeBy(x,y) Măreşte fereastra cu x pixeli la dreapta şi cu y pixeli în jos. La valori negative, fereastra se micşorează. resizeTo(x,y) Măreşte fereastra la o marime de x pixeli în direcţie orizontală şi cu y pixeli în direcţie verticală. scrollTo(x,y) Duce (scroll) fereastra la o anumită poziţie care e dată de coord. x şi y. setIntervall(p1,p2) Rulează o instrucţiune într-un ritm dinainte dat până când e oprită de clearIntervall() p1: instrucţiune sau funcţie JavaScript care trebuie executată. p2: Valoare in milisecunde, până când se execută p1. setTimeout(p1,p2) Rulează o instrucţiune în funcţie de un anumit timeout. p1: instrucţiune sau funcţie JavaScript care trebuie executată. p2: Valoare in milisecunde, până când se execută p1. Direct din acest obiect sunt derivate obiectele document, event, history u. location. http://www.w3schools.com/jsref/obj_window.asp

Obiectul location Obiectul location ne dă adresa HTML-ului local. Când o pagină este incarcata (de exemplu http://www.xyz.com/page.html) atunci location.href conţine adresa. Pentru location.href îi putem atribui noi o adresă. Acest buton “button ” aduce o nouă pagină în fereastra actuală (Window) Obiectul document Acest obiect se referă la conţinutul unei ferestre dintr-un browser. In tabelul următor sunt metodele obiectului document: PROPRIETATE DESCRIERE alinkColor culoarea unui link pe care s-a dat click bgColor culoarea de fundal cookie posibilitatea de a citi si de a scrie cookie-uri fgColor culoarea textului (foreground) lastModified data si ora ultimei modificări linkColor culoarea linkurilor care nu au fost încă vizitate referer adresa URL de la care a fost chemată pagina curentă title titlul unui fisier HTML, aşa cum apare el în tagul <title> URL adresa completa a documentului curent vlinkColor culoarea linkurilor care au fost vizitate

ACCES read, write read, write read, write read, write read read, write read read read read, write

Metode care stau la dispozitie METODA DESCRIERE close() Inchide un document care a fost deschis cu metoda open() open() Deschide un document pt scriere. Nu se desschide o nouă fereastră, documentul actula se va suprascrie write(s) Scrie Stringul s în documentul actual writenln(s) Analog metodei write(), doar că se trece la linie nouă Obiecte derivate din obiectul document: all, anchors, applets, areas, embeds, forms, images, layers, links, plugins. Obiectul forms Acest obiect pune la dispoziţie metode şi proprietăţi care permit accesul la un formular definit în interiorul unui fişier HTML Accesul la un formular se poate face prin 3 metode: 1. prin numele formularului - <form name=“FormNAME“>

Acces : document.FormNAME.reset() 2. prin indexul formularului. Primul formular primeste 0 etc. Acces : document.forms[4].reset() 3. Prin numele formularului ca indicator al indexului. Numele se dă cu atributul name din tagul <form> Acces: document.forms[„FormNAME“].reset() PROPRIETATE DESCRIERE action retine cuvântul/valoarea stabilit/ă în atributul action din tagul <form> encoding retine cuvântul/valoarea stabilit/ă în atributul encoding din tagul <form> length reţine nr. formularelor dintr-un fisier method retine valoarea stabilit/ă în atributul method din tagul <form> name retine cuvântul/valoarea stabilit/ă în atributul name din tagul <form> target reţine numele frame-ului care să devină activ după trimiterea unui formular METODA reset() submit()

ACCES read, write read, write read read, write read, write read, write

DESCRIERE Sterge toate datele introduse într-un formular, si are aceeaşi funcţie ca butonul care se introduce cu atributul type=reset Trimite un formular, si are aceeaşi funcţie ca butonul care se introduce cu atributul type=submit

Pentru mai multe informații accesați: http://www.w3schools.com/js/js_validation.asp http://www.w3schools.com/js/js_validation_api.asp Obiectul image Acest obiect se afla în ierarhie sub obiectul document. se referă la proprietăţile imaginii introduse in HTML. Aceste proprietăţi pot fi modificate în interiorul unui fişier HTML. Obiectele image se pot apela in felul urmator: 1. Folosirea unui index. Prima imagine primeşte nr. 0. document.images[0].src 2. Prin numele imaginii din tagul img <img name=“BILD“ src=“t.jpg“> document.BILD.src

PROPRIETATE Border Complete Height Hspace Length Lowsrc Name Src Vspace width

DESCRIERE conţine indicaţii despre margine, aşa cum se găsesc ele in tag-ul img e true atunci când imaginea e complet inacărcată conţine indicaţii despre înălţimea pozei conţine indicaţii despre distanta orizonatala fata de obiectele din jur retine nr. imaginilor dintr-un fişier reţine lowsrc asa cum e in tagul img reţine numele pozei asa cum e in tagul img reţine numele intreg al fisierului asa cum e in atributul src conţine indicaţii despre distanta verticală fata de obiectele din jur conţine indicaţii despre laţimea pozei

Pe lângă metoda handleEvent(), care este Navigatorobiectul-image conţine şi alte metode proprii.

interpretată

numai

ACCES read read read read read read read read read read Netscape

Obiectul date Se foloseşte pemtru calcularea datei şi a orei/timpului. Un obiect date se poate face în felul următor: <script language=“JavaScript“> Function simpleDate() { Date1= new Date(); Date2= new Date(YYYY,MM,DD); Date3= new Date(“MM DD YYYY HH:mm:ss”); Date4= new Date(YYY,MM,DD,HH,mm,ss); } </script> Pentru mai multe informații accesați http://www.w3schools.com/js/js_dates.asp http://www.w3schools.com/js/js_date_methods.asp Obiectul navigator Conţine informaţii despre browser şi se poate folosi pentru a adapta mai bine scriptul fiecărui browser în parte. PROPRIETATE DESCRIERE ACCES appCodeName Conţine nickname-ul browserului (de exemplu, Netscape read urăşte nickname-ul “Mozilla”)

appName appVersion language platform

Reţine numele browserului în care rulează scriptul read Reţine nr. versiunii browserului în care rulează scriptul read Conţine limbajul în care este instalat scriptul (doar Netscape) read Reţine numele sistemului de operare pe care este instalat read scriptul (doar Netscape) userAgent Reţine informaţii de browser, aceleaşi pe care le transmite read browserulul şi la o apelare http Obiectul navigator spune, prin metoda javaenabled(), dacă în browser este activat Java, astfel încât să se ştie dacă se pot folosi appleturi. Dacă Java este acceptat, metoda returnează true. Pentru mai multe informații accesați http://www.w3schools.com/jsref/obj_navigator.asp Obiectul layers – (all-) Este valabil doar pentru browsere Netscape şi conţine informaţii despre un nivelul/layer care este accesibil unui fişier HTML. Nivelurile/layer-ele sunt baza positionării dinamice a elementelor în pagină. Obiectul layers este sub obiectul document în ierarhia obiectelor.. Obiectul all este accesibil numai cu browsere Explorer . Acest obiect conţine proprietăţile şi metodele realizării acestui concept: Apelarea layers: 1. prin index, care caracterizează straturile. Primul nivel are index 0. document.layers[5].above 2. Referenţierrea prin numele layer-ului <layer name=“Layer0“> document. Layer0.above PROPRIETATE above background bgcolor below clip document left length name

DESCRIERE Conţine obiectul layer care se afla deasupra niivelului actual background-ul layer-ului culoarea fundaluilui layer-ului opusul lui above care parte/tăietură a layerului este arătată Pt fiecare nivel există un obiect document, care îi conţine caracteristicile Conţine poziţia colţului din stânga sus a layerulului (în pixeli), raportată la documentul de deasupra. Nr. layer-elor dintr-un fişier HTML Numele layerului

ACCES read read, write read, write read, write read, write read, read, write read, read, write

pageX pageY parentLayer src top visibility

Poziţia pe axa X a colţului din stânga sus a layer-ului, raportată la întreg documentul. Poziţia pe axa Y a colţului din stânga sus a layer-ului, raportată la întreg documentul. Reţune obiectul-părinte al layerului, adică documentul de deasupra Conţine numele unui document extern, introdus în layer Conţine poziţia pe axa Y a colţului din stânga sus a layerulului (în pixeli), raportată la documentul de deasupra. informaţii despre visibilitatea unui layer. Valori posibile: hide, show, inherit

read, write read, write read, read, write read, write read, write

Metode pentru layere: METODE captureEvents() handleEvent() load(p1,p2)

moveAbove(p1) moveBelow(p1) moveBy(p1,p2) moveTo(p1,p2) releaseEvents() resizeBy(p1,p2)

resizeTo(p1,p2)

routeEvent()

DESCRIERE Supraveghează evenimentele din layer-ul actual. Dă mai departe evenimentul unui element care se poate ocupa de el. Incarcă un fişier extern în layer. p1-numele fişierului p2-lăţimea vizibila din layer (pixeli) Mută layer-ul deasupra layer-ului dat de parametrul p1. Mută layer-ul sub layer-ul dat de parametrul p1. Mută layerul curent cu p1 pixeli la stânga/dreapta şi cu p2 pixeli mai sus sau mai jos. Mută layer-ul la o nouă poziţie dată de p1 şi p2. Aceasta este posiţia colţului din stânga sus al layer-ului. Termină supravegherea de evenimente. Schimbă mărimea layerului cu: p1-mărimea în directia de pe axa x p2-mărimea în direcţia pe axa y O nouă mărime pt layer. p1-mărimea în directia de pe axa x p2-mărimea în direcţia pe axa y Dă evenimentul mai departe obiectului document. De acolo ajunge la un eventhandler care îi este subordonat.

Proprietăţi şi metode pentru obiectul all Apelare: 1. prin numele tagului sau identificatorului tagului şi un index care conţine poziţia sa. de exemplu: pt tagul <title>, numele este “title”. Indexul spune al câtela tag cu acest nume este referit. Primul tag are indexul 0. Fie 3 tilturi referite prin tagul <h2>. Accesul la tagul al doilea se face astfel: document.all.tags(„h2“)[1].innerText 2. prin numele dat cu atributul “name” z.B : <h2 name=“Title2“>TITLE 2 </h2> document.all.Title2.innerText PROPRIETATE className dataFld dataFormatrAs dataPageSize dataSrc id innerHTML innerText isTextEdit lang language length offsetHeight offsetLeft offsetParent offsetTop offsetWidth outerHTML outerText

DESCRIERE Numele clasei style-sheet, careia îi aparţine un element. Numele unui câmp de date. Tipul unui câmp de date. Numărul datapage-urilor care trebuie returnate simultan Referinţa la obiectul cu care s-a realizat conexiunea Numele unui element Conţinutul unui element GHtml Conţinutul textual al unui elemnt GHtml. true-dacă elementul este editabil, false dacă nu Limbajul elementului, atâta timp cât acesta a fost menţionat în atributul lang. Numele limbajului script Nr tagurilor HTML dintr-un fisier. Inălţimea elementului în pixeli. Distanţa elementului până la marginea stângă a ferestrei. O referinţă la obiectul părinte. Distanţa elementului până la marginea de sus a ferestrei. Lăţimea unui element in pixeli Conţinutul unui tag HTML, incusiv al celor de început şi sfârşit. idem innerText

ACCES read, write read, write read, write read, write read, write read, read, write read, write read, read, write read, read, read, read read, read, read read, write read, write

parentElement parentTextEdit recordNumber sourceIndex tagName title

Elementul părinte al elementului curent. Elementul următor care este editabil. Numărul data page-ului arătat Spune despre care element din interiorul unui fişier HTML este vorba în actualul element/document???. Numele unui tag Conţinutul atributului title al elementului HTML.

METODA

read, read, read, read, read, read, write

DESCRIERE Click() Cauzează click-ul unui element, ca şi când acesta ar fi fost click-enit de utilizator. Contains(p1) Verifică dacă elemntul conţine şi un alt element, al cărui nume (id) este dat de p1. Returnează true, dacă există un astfel de element. getAttribute(p1,p2) Verifică dacă există în tagul HTML un atribut dat prin p1. p2 este pus pe true, dacă se ia în seama dacă se scrie cu litere mari sau sau mici. Funcţia returnează valoarea atributului sau un String gol. insertAdjacentHTML(p1,p2) Introduce cod HTML suplimentar, înainte sau după elementul HTML. p1-poziţia unde trebuie introdus. Valori posibile: BeforBegin, AfterBegin, BeforEnd, AfterEnd. p2-codul care trebuie introdus. insertAdjacentText(p1,p2) idem insertAjacentHTML, cu diferenţa că se introduce text. removeAttribute(p1,p2) Indepărtează un atribut dintr-un tag HTML. p1-numele atributului în tag. p2-true-dacă e case sensitive. scrollIntoView(p1) Poziionează conţinutul astfel în fereastră, încât să poată fi vizibil. p1-true-dacă elementul trebuie să apară sus în fereastră. p1-false- dacă elementul trebuie să apară jos în fereastră. setAttribute(p1,p2,p3) Introduce într-un tag html un nou atribut. p1-numele atributului. p2-valoarea acestui atribut p3-true-dacă e case sensitive. Obiectul Math Conține constante și metode pentru a putea folosi funcții matematice. Constante: PI ( numarul pi=3,14..) E (e=2,71..). Metode:

       

abs(x) – modulul cos(x) tan(x) sin(x) acos(x) asin(x) atan(x) floor(x): -cel mai mare intreg mai mic sau egal cu x.

Exemplu: Math.floor(-3,73), returneaza -4. (reprezentarea unui numar real sub forma de o suma dintre parte intreaga si parte fractionara x=[x]+{x}; 0<={x}<1; -2,63= -3+0,37)  random(x):- nr aleator in intervalul [0,1]  round(x): cel mai apropiat intreg de x  sqrt(x) –radical din x  pow(x,y) -x la puterea y  log(x)->ln x  exp(x) e la puterea x

Exemplu: Math.floor(1+100*Math.random()); va returna un nr aleator cuprins intre[1,101]. Pentru mai multe informații accesați http://www.w3schools.com/js/js_math.asp Obiectul Array In JavaScript se pot declara numai vectori . Vectorii sunt de tip obiect . Un vector se declara cu Array() iar elementele se acceseaza cu nume[indice]; Obiecte si metode ale obiectului Array:  proprietatea length ;  metoda sort() – sorteaza in ordine lexicograficaelementele unui tablou;  metoda reverse() inverseaza pozitiile elementelor unui vector;

Exemplu: vv=new Array(4); vv[2]=6; alert(vv[2]); Declararea unei matrici de 4 linii si 3 coloane se face astfel: vv=new Array(4);

for (i=0;i<4;i++) vv[i]=new Array(3); Fiecare element al vectorului este privit ca un vector. Pentru mai multe informații accesați http://www.w3schools.com/js/js_array_methods.asp Obiectul String Cu acest obiect se pot manipula siruri de caractere. Crearea unui string se poate crea in doua moduri :  utilizand new : var a = new String (“Ana”) ;  atribuid variabilei direct sirul :a = “Ana”; Obiectul String are propritatea length. Metode. Exista o serie de metode ale acestui obiect , enumeram cateva dintre acestea:  search(s) - cauta caracterul de inceput al sirului “s” in obiect. Daca sirul “s” nu exista se returneaza -1  charAt(index) – returneaza caracterul aflat pe pozitia index;  slice (i1, i2) – returneaza substring-ul cuprins intre i1 inclusiv si i2 exclusiv.  substr(i1,lung) – returneaza subsirul care incepe cu i1 si are lungime lung;  toUpperCase () – returneaza sirul scris cu litere mari;  toLowerCase() - returneaza sirul scris cu litere mici;  replace(sir1, sir2) – returneaza sirul in care s-a inlocuit prima aparitie a lui sir1 cu sir2;  bold() – returneaza sirul scris cu bold;  italics() - returneaza sirul scris cu italic;  fontcolor(“nume_culoare”) – returneaza sirul scris cu “nume_culoare”  fontsize(“marime”) - returneaza sirul scris cu “marime”  link(“adresa_http”) – creaza o ancora catre adresa_http Pentru mai multe informații accesați http://www.w3schools.com/js/js_string_methods.asp Animatii Prin afisarea in aceiasi pozitie a mai multor imagini, fiecare imagine “stand” un anumit interval de timp duce la animatie. Exista anumite functii predefinite si functii utilizatorcare rezolva aceasta problema. Pentru mai multe informații accesați http://www.w3schools.com/js/js_objects.asp Functia setTimeout Sintaxa: setTimeout(“nume_functie”, nr_milisecunde) Semantica:

nume_functie este functia care urmeaza a se executa dupa nr_milisecunde; nr_milisecunde – un numar intreg care milisecunde Functia clearTimeout Sintaxa: clearTimeout(“variabila”) Semantica: “variabila” contine o valoare returnata de functia setTimeout. Dupa executarea ei procesul se suspenda; Pentru mai multe informații accesați http://www.w3schools.com/js/js_function_definition.asp Clase Definirea claselor [public][abstract][final] class NumeClasa [extends NumeSuperclasa] [implements Interfata1 [, Interfata2 ... ]] { //corpul clasei } Antetul clasei: [public][abstract][final] class NumeClasa este format din modificatorii clasei, cuvântul rezervat class şi numele clasei NumeClasa. Prezenţa parantezelor [] indică faptul că ceea ce este cuprins între ele este opţional. Modificatorii clasei sunt:  public: dacă o clasă este declarată public, ea este accesibilă oricărei alte clase. Dacă modificatorul public nu apare, clasa poate fi accesată doar de către clasele din pachetul căruia aparţine clasa (dacă nu se specifică un anume pachet, toate clasele din directorul curent sunt considerate a fi în acelaşi pachet). Spaţiul de căutare este definit de variabila sistem CLASSPATH.  abstract: o clasă declarată abstractă este o clasă şablon adică ea este folosită doar pentru a crea un model comun pentru o serie de subclase. O clasă trebuie declarată abstractă daca ea este incomplet implementată adică nu toate metodele ei sunt definite. O astfel de clasă nu poate fi instanţiată, dar poate fi extinsă de alte clase care să implementeze metodele nedefinite. Doar clasele abstracte pot să conţină metode abstracte (metode declarate dar nu implementate).  final o clasă poate fi declarată finală dacă a fost complet definită şi nu se doreşte să fie extinsă (să aibă subclase); cu alte cuvinte ea nu poate apare în clauza extends a altei clase.

Corpul unei clase urmează după antetul clasei şi este cuprins între acolade. Conţine:  declararea variabilelor instanţă şi clasă care împreună formează variabilele membru;  definirea metodelor instanţă şi clasă care împreună formează metodele membru. Observaţie: variabilele unei clase pot avea acelaşi nume cu metodele clasei. Variabile membru Variabilele se declară de obicei înaintea metodelor, deşi acest lucru nu este impus de compilator. class NumeClasa { //declararea variabilelor //declararea metodelor } Variabilele unei clase sunt doar cele care sunt declarate în corpul clasei şi nu în corpul unei metode. Variabilele declarate în cadrul unei metode sunt locale metodei respective. Declararea unei variabile presupune specificarea următoarelor lucruri:  numele variabilei;  tipul de date;  nivelul de acces la acea variabilă de către alte clase;  dacă este constantă sau nu;  tipul variabilei: instanţă sau clasă Tiparul declarării unei variabile este: [modificatori] TipDeDate numeVariabila [ = valoareInitiala ] ; unde un modificator poate fi :  un specificator de acces: public, protected, private;  unul din cuvintele rezervate: static, final, transient, volatile. Exemple: double x; protected static int n; public String s = "abcd"; private Point p = new Point(10, 10); final long MAX = 100000L; Metode Definirea metodelor Metodele sunt folosite pentru descrierea comportamentului unui obiect. O metodă se declară astfel: [modificatori] TipReturnat numeMetoda ([argumente])

[throws TipExceptie] { //corpul metodei } Modificatorii metodelor Un modificator poate fi :  un specificator de acces: public, protected, private;  unul din cuvintele rezervate: static, abstract, final, native, synchronized.  abstract este folosit pentru declararea metodelor abstracte. O metodă abstractă este o metodă care nu are implementare şi trebuie să aparţină unei clase abstracte.  native este folosit pentru refolosirea unor funcţii scrise în alt limbaj de programare decât Java (C de exemplu).  final este folosit pentru a specifica faptul că acea metodă nu mai poate fi supradefinită în subclasele clasei în care ea este definită ca fiind finală. Acest lucru este util dacă respectiva metodă are o implementare care nu trebuie schimbată în subclasele ei.  synchronized este folosit în cazul în care se lucrează cu mai multe fire de execuţie iar metoda respectivă se ocupă cu partajarea unei resurse comune. Are ca efect construirea unui semafor care nu permite executarea metodei la un moment dat decât unui singur fir de execuţie. Tipul returnat de o metodă Metodele pot să returneze sau nu o valoare (un obiect) la terminarea lor. Tipul valorii returnate poate fi atât un tip primitiv de date (int, double, etc.) cât şi o referinţă la un obiect al unei clase. În cazul în care o metoda nu returnează nimic atunci TipReturnat este void.

Exemplu: void afisareRezultat() Returnarea valorii de către o metodă se realizează prin intermediul instrucţiunii return. Parametrii unei metode Parametrii sunt specificaţi prin numele şi tipul lor, fiind despărţiţi unul de altul prin virgulă. NumeMetoda([tip1 argument1], [tip2 argument2] ... ) Tipul de date al unui argument poate fi orice tip valid al limbajului, atât tip primitiv de date cât şi referinţă la un obiect.

Exemplu: void adaugarePersoana(String nume, int varsta, float salariu){ ... } unde String este tip referinţă, int şi float sunt tipuri primitive. În Java o metodă nu poate primi un număr variabil de argumente, ceea ce înseamnă că apelul unei metode trebuie să se facă cu specificarea exactă a numărului şi tipurilor argumentelor. Nu este permisă gruparea parametrilor după tipul lor. Constructorii unei clase Constructorii unei clase sunt metode speciale care au acelaşi nume cu cel al clasei, nu returnează nici o valoare şi sunt folosiţi pentru iniţializarea obiectelor acelei clase în momentul instanţierii lor. Constructorii controlează modul în care un obiect este creat şi iniţializat. class Complex { Complex() { //constructor } } O clasă poate avea unul sau mai mulţi constructori care trebuie însă să difere prin lista de parametri primiţi. Astfel sunt permise diferite tipuri de iniţializări ale obiectului la crearea sa, în funcţie de numărul parametrilor cu care este apelat constructorul. Moştenirea Principiul moştenirii Moştenirea este folositoare deoarece reduce rescrierea codului. O clasă poate fi moştenită de către o altă clasă (toate caracteristicile primei clase se regăsesc şi în a doua clasă). Noua clasă îşi poate modifica o parte din comportament, poate adăuga ceva nou sau poate ignora ceea ce este neinteresant. În Java pentru a crea o clasă nouă trebuie specificate: clasa moştenită şi diferenţele faţă de clasa moştenită. Clasa moştenită se specifică în clauza extends. modificator NumeClasa extends ClasaDeBaza Clasa moşteneşte toate metodele accesibile şi variabilele superclasei sale.

Exemplu: Următoare ierarhie de clase: se exprimă în Java astfel: class A{ ... }

A B

class B extends A{ ... } C D class C extends B{ ... } class D extends B{ ... } Observaţie: În Java moştenirea multiplă nu este permisă. Adică o clasă poate să moştenească o singură clasă nu mai multe. Interfeţe O interfaţă Java defineşte un set de metode dar nu specifică nici o implementare pentru ele. O clasă care implementează o interfaţă trebuie obligatoriu să definească toate metodele interfeţei. Prin urmare, o interfaţă este o colecţie de metode fără implementare şi declaraţii de constante. Definirea unei interfeţe se face prin intermediul cuvântului cheie interface: [public] interface NumeInterfata extends SuperInterfata1 [,extends SuperInterfata2...]] { //corpul interfetei:constane si metode abstracte } O interfaţă poate fi declarată doar public. O clasă poate extinde oricâte interfeţe. Acestea se numesc superinterfeţe şi sunt separate prin virgulă. Corpul unei interfeţe conţine:  constante: acestea pot fi sau nu declarate cu modificatorii public, static şi final care sunt impliciţi; nici un alt modificator nu poate apărea în declaraţia unei variabile a unei interfeţe. Constantele dintr-o interfaţă trebuie obligatoriu iniţializate. Implementarea unei interfeţe se face prin intermediul cuvântului cheie implements: class NumeClasa implements NumeInterfata

sau class NumeClasa implements Interfata1, Interfata2... O clasă poate implementa oricâte interfeţe. O clasă care implementează o interfaţă trebuie obligatoriu să definească toate metodele interfeţei. Pachete Un pachet este o colecţie de clase şi interfeţe înrudite. Sunt folosite pentru găsirea şi utilizarea mai uşoarã a claselor, pentru a evita conflictele de nume şi pentru a controla accesul la anumite clase. În Java toate clasele şi interfeţele sunt grupate în diferite pachete după funcţionalitatea lor. Cele mai importante pachete pe care le pune Java la dispoziţie sunt:  pachetul java.lang cuprinde clasele de bazã ale limbajului;  pachetul java.io cuprinde clasele pentru intrãri/ieşiri, lucru cu fişiere;  pachetul java.math cuprinde clasele în care sunt definite operaţiile matematice;  pachetul java.util cuprinde clasele utile : Vector, Stack, Random, Date etc;  pachetul java.text oferă suport pentru formatarea textelor;  pachetul java.sql oferă suport pentru interogări SQL;  pachetul java.beans cuprinde clasele necesare scrierii de componente reutilizabile;  pachetul java.net cuprinde clasele care asigură accesul la reţea;  pachetul java.awt cuprinde clasele pentru graficã (Abstract Windowing Toolkit);  pachetul javax.swing cuprinde clasele pentru graficã; extinde funcţionalitatea claselor din pachetul java.awt.  pachetul java.rmi cuprinde clasele care asigură execuţie la distanţă (Remote Message Interface);  pachetul java.securitz cuprinde clasele care asigură mecanisme de securitate: criptare, autentificare; Pentru a folosi o componentă a unui pachet trebuie făcut cunoscut clasei curente fie pachetul în care se găseşte componenta, fie doar componenta. Acest lucru se realizează prin importarea pachetului sau, doar a clasei. Importul unui pachet, al unei clase sau a unei interfeţe Importul se realizează prin instrucţiunea import. Importul pachetelor se face prin specificarea numelui pachetului urmat de simbolul '*'. '*' are semnificaţia că toate clasele şi interfeţele pachetului sunt importate. import NumePachet.*;

Exemple: import java.io.*;

import javax.swing.*; O dată realizat într-un fişier importul pachetului, orice clasă din pachet poate fi accesată prin numele ei. Exemplu: Clasa Date aparţine pachetului java.util. import java.util.*; public class ExData{ public static void main(String[] args) { Date d=new Date(2003,4,13); System.out.println(d); } } Importul claselor (interfeţelor) se realizează prin specificarea numelui clasei (interfeţei) pe care dorim să o folosim dintr-un pachet: import NumePachet.NumeClasa; Crearea unui pachet Se creează un director cu numele NumePachet în care vor fi salvate toate fişierele sursă ce conţin clasele şi interfeţele pe care dorim să le grupăm într-un pachet. Numele directorului dă numele pachetului. În prima linie a fiecărui fişier din directorul NumePachet se specifică faptul că toate clasele din fişierul respectiv vor aparţine clasei. Aceasta se realizează prin: package NumePachet; Prin urmare codul unei clase care se adaugă la un pachet arată astfel: package NumePachet; public class NumeClasa{ ... } Instrucţiunea package acţionează asupra întregului fişier sursă la începutul căruia apare. Cu alte cuvinte nu putem specifica faptul că anumite clase dintr-un fişier sursă aparţin unui pachet iar altele altui pachet.

3.4. INTRĂRI ŞI IEŞIRI Informaţia poate fi preluată de oriunde (fişier, disk, reţea, memorie, alt program) şi poate fi de orice tip (obiecte, caractere, imagini, sunete).

Pentru a aduce informaţii, un program Java deschide un flux (canal de comunicaţii) la o sursă de informaţii şi citeşte informaţia. Un flux care citeşte date se numeşte flux de intrare.

Similar, un program poate trimite informaţii către o destinaţie externă deschizând un flux (canal de comunicaţii) către acea destinaţie şi scriind serial informaţiile respective. Un flux care scrie date se numeşte flux de ieşire.

Algoritmul de citire este: deschide flux → cât timp există informaţie → citeşte informaţia → închide flux Algoritmul de afişare este: deschide flux → cât timp există informaţie → scrie informaţia → închide flux Pachetul java.io conţine o colecţie de clase folosite pentru citiri şi afişări. Prin urmare, orice program care necesită operaţii de intrare / ieşire trebuie să importe pachetul java.io: import java.io.*. Clasificarea fluxurilor Există trei tipuri de clasificare a fluxurilor:  După "direcţia" canalului de comunicaţie deschis, fluxurile se împart în: o fluxuri de intrare (pentru citirea datelor) o fluxuri de ieşire (pentru scrierea datelor)  După tipul de date pe care operează: o fluxuri de octeţi (comunicarea serială se realizează pe 8 biţi) o fluxuri de caractere (comunicarea serială se realizează pe 16 biţi)  După acţiunea lor: o fluxuri pentru citirea / scrierea datelor o fluxuri pentru procesarea datelor

Ierarhia claselor pentru lucrul cu fluxuri Fluxuri de caractere Clasele rădăcină pentru ierarhia claselor ce se ocupă cu fluxurile de caractere sunt Reader (pentru fluxuri de intrare) şi Writer (pentru fluxuri de ieşire). Ierarhia claselor pentru fluxuri de intrare pe caractere este:

Ierarhia claselor pentru fluxuri de ieşire pe caractere este:

Fluxuri de octeţi Clasele rădăcină pentru ierarhia claselor ce se ocupă cu fluxurile de octeţi sunt InputStream (pentru fluxuri de intrare) şi OutputStream (pentru fluxuri de ieşire). Subclasele lor sunt folosite pentru citiri şi scrieri de date binare cum ar fi imagini şi sunete. Ierarhia claselor pentru fluxuri de intrare pe octeţi:

Ierarhia claselor pentru fluxuri de ieşire pe octeţi:

Superclasele de intrare / ieşire Clasele Reader şi InputStream definesc metode similare pentru citirea datelor, tipul parametrilor variind. Clasa Reader int read() int read(char cbuf[ ]) int read(char cbuf[ ], int index, int lungime) Clasa InputStream int read() int read(byte cbuf[ ]) int read(byte cbuf[ ], int index, int lungime) Analog, clasele Writer şi OutputStream definesc metode similare pentru afişarea datelor, tipul parametrilor variind. Clasa Writer int write() int write(char cbuf[ ]) int write(char cbuf[ ], int index, int lungime) Clasa OutputStream

int write() int write(byte cbuf[ ]) int write(byte cbuf[ ], int index, int lungime) Crearea unui flux Orice flux este un obiect al clasei ce implementează fluxul respectiv. Crearea unui flux se realizează similar cu crearea obiectelor, prin instrucţiunea new(). Exemple: //crearea unui flux de intrare pe caractere FileReader in = new FileReader("fisier_intrare.txt"); //crearea unui flux de iesire pe caractere FileWriter out = new FileWriter("fisier_iesire.txt"); //crearea unui flux de intrare pe octeti FileInputStream in = new FileInputStream("fisier_intrare.txt"); //crearea unui flux de iesire pe octeti FileOutputStrem out = new FileOutputStream("fisier_iesire.txt"); Prin urmare, crearea unui flux de date care scrie / citeşte informaţii de la un dispozitiv extern are formatul general: FluxPrimitiv numeFlux = new FluxPrimitiv (dispozitiv extern) Citirea datelor de la tastatură Obiectul System.in În general, tastatura reprezintă perifericul standard pentru introducerea datelor. Clasa System conţine o variabilă membru care reprezintă tastatura sau fluxul de intrare standard. Această variabilă membru se numeşte in şi este o instanţă a clasei InputStream.

Exemplu: Se citesc de la tastatură caractere. Fiecare caracter citit se adaugă la un şir de caractere. Citirea se încheie când se apasă tasta Enter. 1. class Citire1 { 2. public static void main(String args[]) { 3. StringBuffer s=new StringBuffer(); 4. char c;

5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

try { while((c=(char)System.in.read()) != ’\n’) s.append(c); } catch(Exception e) { System.out.println(”Error:”+e.getMessage()); } System.out.println("Sirul este:"+s); } }

Clasa InputStreamReader Citeşte octeţi şi îi transformă în caractere. Transformarea octeţilor în caractere este efectuată conform unei reguli de codificare. Dacă nu se specifică o astfel de regulă, atunci se utilizează codificarea implicită (dată de proprietatea de sistem ”file encoding”). Clasa InputStreamReader are următorii constructori: InputStreamReader(InputStream in) InputStreamReader(InputStream in, String enc) Metoda principală pentru citirea unui caracter este: int read()

Exemplu: Se citesc de la tastatură caractere. Fiecare caracter citit se adaugă la un şir de caractere. Citirea se încheie când se apasă tasta Enter. 1. import java.io.*; 2. class Citire3 { 3. public static void main(String args[]) { 4. InputStreamReader in= 5. new InputStreamReader(System.in); 6. char c; 7. StringBuffer s=new StringBuffer(); 8. try { 9. while((c=(char)in.read()) != ’\n’) 10. s.append(c); 11. } 12. catch(Exception e) { 13. System.out.println(”Error:”+e.getMessage()); 14. } 15. System.out.println(s);

16. 17.

} }

Clasa BufferedReader În cazul folosirii clasei InputStreamReader, citirea se face caracter cu caracter (adică, discul este accesat de fiecare dată). Clasa BufferedReader are definită metoda read() cu aceeaşi signatură ca şi cea definită în InputStreamReader dar, în plus, defineşte şi metoda readLine(). Această metodă poate fi folosită pentru a citi un şir de caractere terminat cu ’\n’,’\r’ sau ’\r\n’.

Exemplu: Se introduce un şir de caractere de la tastatură. La apăsarea tastei Enter şirul este citit în întregime şi este depus într-un String. 1. import java.io.*; 2. class Citire4 { 3. public static void main(String args[]) { 4. InputStreamReader in1= 5. new InputStreamReader(System.in); 6. String s=new String(); 7. try { 8. BufferedReader in= new BufferedReader(in1); 9. s=in.readLine(); 10. } 11. catch(Exception e) { 12. System.out.println(”Error:”+e.getMessage()); 13. } 14. System.out.println(s); 15. } 16. } Citirea şi scrierea datelor din fişier Clasele FileReader şi FileWriter Clasa FileReader este folosită la citirea datelor dintr-un fişier text. Cei mai importanţi constructori ai săi sunt:  creează un flux care citeşte caractere din fişierul nume public FileReader(String nume) throws FileNotFoundException  creează un flux care citeşte caractere din fişierul varFis.

public FileReader(File varFis) throws FileNotFoundException Clasa FileWriter este folosită la scrierea datelor într-un fişier text. Cei mai importanţi constructori ai săi sunt:  creează un flux care scrie caractere in fişierul nume public FileWriter (String nume) throws IOException  creează un flux care citeşte caractere din fişierul varFis public FileWriter (File varFis) throws IOException

3.5. APPLET-URI Definiție: Un applet reprezintă o suprafaţă de afişare (container) ce poate fi inclusă într-o pagina Web şi gestionată printr-un program Java. Un astfel de program se mai numeşte miniaplicaţie. Codul unui applet poate fi format din una sau mai multe clase. Una dintre acestea este principală şi extinde clasa JApplet, fiind clasa ce trebuie specificată în documentul HTML ce descrie pagina de Web în care dorim să includem applet-ul. Diferenţa fundamentală dintre un applet şi o aplicaţie constă în faptul că, un applet nu poate fi executat independent, ci va fi executat de browser-ul în care este încărcată pagina Web ce conţine applet-ul respectiv. O aplicaţie independentă este executată prin apelul interpretorului java, având ca parametru numele clasei principale a aplicaţiei, clasa principală fiind cea care conţine metoda main. Un applet nu se poate atinge de hardisk-ul local prin citiri sau scrieri. Pachetul care oferă suport pentru crearea de applet-uri este javax.swing. Clasa JApplet furnizează tot ce este necesar pentru construirea şi întreţinerea unui applet. Crearea unui applet implică implementarea metodelor puse la dispoziţie de clasa JApplet care ne ajută să descriem comportamentul dorit al applet-ului. Ierarhia de clase este: java.lang.Object | +--java.awt.Component | +--java.awt.Container | +--java.awt.Panel | +--java.applet.Applet | +--javax.swing.JApplet

Funcţiile unui applet Execuţia unui applet începe în momentul în care un browser afişează o pagină Web în care este inclus applet-ul respectiv şi poate trece prin mai multe etape. Fiecare etapă este strâns legată de un eveniment generat de către browser şi determină apelarea unei metode specifice din clasa ce implementează appletul.  Încărcarea în memorie – se creează o instanţă a clasei principale a applet-ului şi se încarcă în memorie.  Iniţializarea – se apelează metoda init ce permite iniţializarea diverselor variabile, citirea unor parametri de intrare, etc. Metoda init este responsabilă şi pentru aşezarea tuturor componentelor pe formă.  Pornirea – se apelează metoda start  Execuţia propriu-zisă – constă în interacţiunea dintre utilizator şi componentele afişate pe suprafaţa applet-ului.  Oprirea temporară – În cazul în care utilizatorul părăseşte pagina Web în care rulează applet-ul se apelează metoda stop a acestuia, dându-i astfel posibilitatea să se oprească temporar cât timp nu este vizibil, pentru a nu consuma inutil din timpul procesorului. Acelaşi lucru se întâmplă dacă fereastra browser-ului este minimizată. În momentul când pagina Web ce conţine applet-ul devine din nou activă, va fi reapelată metoda start.  Oprirea definitivă – La închiderea tuturor instanţelor browser-ului folosit pentru vizualizare, applet-ul va fi eliminat din memorie şi va fi apelată metoda destroy a acestuia, pentru a-i permite să elibereze resursele deţinute. Apelul metodei destroy este întotdeauna precedat de apelul lui stop. Structura generală a unui applet import javax.swing.JApplet; import java.awt.*; import java.awt.event.*; public class StructuraApplet extends JApplet { public void init() { /* codul descrie acţiunile care dorim să fie efectuate la instanţierea clasei applet-ului. */ } public void start() { /* codul descrie acţiunile care dorim să fie executate la lansarea applet-ului în execuţie sau la reîntoarcerea în pagina applet-ului */

} public void paint(Graphics g) { /* codul descrie acţiunile care dorim să fie executate la fiecare redesenare a ferestrei applet-ului */ } public void stop() { /* codul descrie acţiunile care dorim să fie executate la oprirea temporară a applet-ului (pagina Web nu mai este vizibilă, fereastra browser-ului este minimizată, etc) */ } public void destroy() { /* codul descrie acţiunile care dorim să fie executate la distrugerea applet-ului (browser-ul părăseşte documentul .html din care a fost apelat applet-ul) */ } } Observaţie: Aceste metode sunt apelate automat de browser şi nu trebuie apelate explicit din program! HTML Un browser Web interpretează conţinutul (textul) unui fişier .html (Hyper Text Markup Language). Limbajul HTML constă într-o colecţie de marcaje (tag-uri). Marcajele au rolul de a descrie modul în care va apărea afişat textul, de a comanda browser-ului să utilizeze şi alte resurse Internet, aflate în fişiere diferite. Sintaxa unui marcaj este: <NumeTag [parametri ]> text </NumeTag> Parametrii se scriu sub forma: NumeParametru = valoare Structura unui document .html este: <HTML> <HEAD> <TITLE> titlul documentului </TITLE> </HEAD>

<BODY> ... <APPLET parametrii> <PARAM parametrii> <PARAM parametrii> ... <PARAM parametrii> </APPLET> ... </BODY> </HTML> Considerăm cunoscute noţiunile de bază ale HTML. Ceea ce ne interesează pentru construirea applet-urilor este marcajul <APPLET>. Acesta are parametrii obligatorii şi opţionali. Parametrii obligatorii:  CODE – valoarea lui este numele fişierului care conţine clasa applet-ului: NumeClasa.class;  WIDTH – valoarea lui este lăţimea ferestrei atribuită de browser applet-ului la afişarea documentului .html;  HEIGHT – valoarea lui este înălţimea ferestrei atribuită de browser applet-ului la afişarea documentului .html; Parametrii opţionali:  CODEBASE – valoarea lui este adresa URL (Universal Resource Locator) sau calea la fişierul cu clasa applet-ului. Dacă parametru lipseşte, căutarea clasei se face în directorul curent (cel din care a fost încărcat fişierul .html);  VSPACE – valoarea lui este înălţimea zonei (exprimată în pixeli) care se lasă liberă deasupra şi dedesubtul ferestrei applet-ului;  HSPACE – valoarea lui este lăţimea zonei (exprimată în pixeli) care se lasă liberă în stânga şi în dreapta ferestrei applet-ului;  ALT – Specifică textul ce trebuie afişat dacă browser-ul înţelege marcajul <APPLET> dar nu poate rula applet-uri Java.  NAME – Oferă posibilitatea de a da un nume respectivei instanţe a applet-ului, astfel încât mai multe applet-uri aflate pe aceeaşi pagină să comunice între ele folosindu-se de numele lor.  ALIGN – Semnifică modalitatea de aliniere a applet-ului în pagina Web. Acest atribut poate primi una din următoarele valori: left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom, semnificaţiile lor fiind aceleaşi ca şi la marcajul IMG.

Marcajul <PARAM> nu este obligatoriu şi poate să apară atunci când se doreşte ca appletul să preia parametrii. Un parametru este definit prin:  NAME – reprezintă numele variabilei recunoscut de applet;  VALUE – reprezintă valoarea recepţionată de applet; este de tip String. Pentru informații suplimentare accesați http://www.w3schools.com/js/default.asp

3.6. INTERFEŢE GRAFICE Interfaţa grafică se referă la toate tipurile de comunicare vizuală între un program şi utilizatorii săi. Interfaţa grafică se referă nu numai la ceea ce utilizatorul vede pe ecran ci şi la toate mecanismele de comunicare între acesta şi program. Limbajul Java pune la dispoziţie numeroase clase pentru implementarea diferitelor functionalităţi ale interfaţei grafice, însă ne vom ocupa în continuare de acelea care permit realizarea unei intefeţe grafice cu utilizatorul (GUI – Graphical User Interface). În principiu, crearea unei aplicaţii grafice presupune următorii paşi: 1. crearea unei suprafeţe de afişare (cum ar fi o fereastră) pe care vor fi aşezate obiectele grafice care servesc la comunicarea cu utilizatorul (butoane, controale de editare, texte, etc); 2. crearea şi aşezarea obiectelor grafice pe suprafaţa de afişare în poziţiile corespunzătoare; 3. definirea unor acţiuni care trebuie să se execute în momentul când utilizatorul interacţionează cu obiectele grafice ale aplicaţiei; 4. "ascultarea" evenimentelor generate de obiecte în momentul interacţiunii cu utilizatorul şi executarea acţiunilor corespunzătoare aşa cum au fost ele definite. În Java există două pachete de clase care oferă servicii grafice: java.awt şi javax.swing. În acest curs ne vom ocupa de pachetul Swing care este o extensie a pachetului awt. "Swing" a fost numele de cod dat proiectului care dezvolta componente noi. Începând cu javax.swing este numele pachetelor pentru Swing API. Majoritatea obiectelor grafice sunt subclase ale clasei JComponent, clasă care defineşte generic o componentă grafică care poate interacţiona cu utilizatorul. Aşadar, printr-o componentă grafică vom înţelege orice obiect care are o reprezentare grafică ce poate fi afişată pe ecran şi care poate interacţiona cu utilizatorul. Exemple de componente sunt ferestrele, butoanele, bare de defilare, etc. În general, toate componentele sunt definte de clase proprii ce se găsesc în pachetul javax.swing, clasa JComponent fiind superclasa abstractă a tuturor acestor clase. Crearea obiectelor grafice nu realizează automat şi afişarea lor pe ecran. Mai întâi ele trebuie aşezate pe o suprafaţă de afişare, care poate fi o fereastră sau suprafaţa unui applet, şi vor

deveni vizibile în momentul în care suprafaţa pe care sunt afişate va fi vizibilă. O astfel de suprafaţă pe care se aşează obiectele grafice reprezintă o instanţă a unei clase obţinută prin extensia clasei Container; din acest motiv suprafeţele de afişare vor mai fi numite şi containere. Clasa Container este o subclasă aparte a clasei Component, fiind la rândul ei superclasa tuturor suprafeţelor de afişare Java (ferestre, applet-uri, etc). Pachetul Swing oferă programelor care folosesc componentele lui posibilitatea să-şi aleagă natura interfeţei („look and feel”) sau, pur şi simplu, să o conserve pe cea caracteristică platformei respective. Containere principale O aplicaţie independentă are nevoie de propriile ferestre pe care să facă afişarea componentelor sale grafice. O astfel de suprafaţă pe care se aşează obiectele grafice se numeşte suprafaţă de afişare sau container şi reprezintă o instanţă a unei clase obţinută prin extensia superclasei Container. Cele mai importante containere principale sunt: JFrame, JDialog, JWindow şi JApplet. Ierarhia de clase este: java.awt.Container |__ java.awt.Panel |__ java.applet.Applet |__ javax.swing.JApplet |__ java.awt.Window |__ java.awt.Frame | |__ javax.swing.JFrame |__ java.awt.Dialog | |__ javax.swing.JDialog |__ javax.swing.JWindow Clasa JFrame Clasa JFrame este folosită pentru implementarea ferestrelor principale. Această componentă are caracteristic cadrul, bara de titlu şi controalele ferestrei furnizate de sistemul de operare. Acestea nu pot fi modificate. Comportamentul ferestrelor (redimensionare, minimizare, poziţionare) este controlat de sistemul de operare. Constructorii clasei JFrame sunt: JFrame() – construieşte o fereastră, fără titlu, iniţial invizibilă. JFrame(String title) – construieşte o fereastră, cu titlu specificat, iniţial invizibilă. Aşadar, o fereastră nou creată este invizibilă. Pentru a fi făcută vizibilă se va apela metoda show().

Exemplu: Se construieşte şi se afişează o fereastră cu titlul "Prima fereastra". import javax.swing.*; public class AplJFrame { public static void main(String args[]) { JFrame f = new JFrame("Prima fereastra"); f.show(); } } Metoda pack() este folosită pentru a da o dimensiune frame-ului. O alternativă pentru pack() este setarea explicită a dimensiunii frame-ului prin apelarea metodei setSize(). În general, folosirea lui pack() este preferabilă folosirii lui setSize(), deoarece pack() lasă în seama layout manager-ului calculul dimensiunii frame-ului care ţine seama şi de alţi factori care pot afecta dimensiunea componentelor. Metoda setVisible() este folosită pentru a afişarea frame-ului. Metoda getContentPane() returnează obiectul contentPane al frame-ului. Orice componentă se adaugă pe contentPane-ul frame-ului curent.

Exemplu: import javax.swing.*; import java.awt.*; import java.awt.event.*; public class AplicFrame{ public static void main(String[] args) { try { UIManager.setLookAndFeel( UIManager.getLookAndFeel()); } catch (Exception e) { } /*Se creaza container-ul principal (din varful ierarhiei) si se adauga componentele pe el*/ JFrame frame = new JFrame(); JLabel comp = new JLabel("eticheta1"); JLabel comp1 = new JLabel("eticheta2");

//eticheta2 va fi pusa peste eticheta1 frame.getContentPane().add(comp); frame.getContentPane().add(comp1); frame.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } }); frame.pack(); frame.setVisible(true); } } Ferestre secundare şi clasa JDialog Pentru a crea ferestre secundare se foloseşte, de obicei, JDialog. Alte ferestre secundare pot fi create cu: JOptionPane – creează o fereastră standard de dialog ProgressMonitor – creează o fereastră care arată progresul unei operaţii JColorChooser – creează o fereastră pentru alegerea culorii JFileChooser – creează o fereastră pentru selectarea unui fişier Fiecare fereastră secundară este dependentă de una principală (de un frame). O fereastră de dialog poate fi modală, caz în care ea blochează accesul la oricare altă fereastră din program. Clasa JWindow Clasa JWindow este folosită pentru implementarea ferestrelor pline (dreptunghiuri albe pline). Aceste ferestre nu conţin bară de titlu sau controale de fereastră. Clasa JApplet Clasa JApplet este folosită pentru implementarea applet-urilor. Forma containere-lor principale este ilustrată în figura următoare:

Containere intermediare Sunt componente JFC folosite pentru organizarea ferestrelor. Container-ele intermediare folosesc la împărţirea ferestrei în mai multe zone sau la gruparea componentelor. Swing furnizează următoarele containere intermediare: Panel

Scroll Pane Split Pane Tabbed Pane Tool Bar

– Este cel mai flexibil şi frecvent utilizat container intermediar. Se implementează folosind clasa JPanel. Un panel grupează componentele dintr-o fereastră sau dintr-un alt panel. Un panel poate folosi orice layout manager şi poate avea o margine (border). – Furnizează scroll bar (orizontal şi vertical) pentru componentele prea mari. – Afişează două componente într-un spaţiu fix, oferind utilizatorului posibilitatea să redimensioneze fiecare componentă. – Conţine mai multe componente dar afişează numai una la un moment dat. Utilizatorul poate alege între componente. – Grupează componentele (în general butoane) într-o linie sau o coloană, permiţând utilizatorului să o mute oriunde.

Forma containere-lor intermediare este ilustrată în figura următoare:

Folosirea gestionarilor de poziţionare (Layout Manager) Un program poate avea interfeţe diferite, chiar dacă sunt folosite aceleaşi componente. Acest lucru se datorează folosirii a diferiţi gestionari de poziţionare care controlează dimensiunea şi poziţiile componentelor. Gestionarea poziţionării este procesul prin care se determină dimensiunea şi poziţia componentelor. Implicit, fiecare container are un gestionar de poziţionare – un obiect care gestionează poziţionarea fiecărei componente de pe container. Acest obiect implementează interfaţa LayoutManager. Acesta poate fi înlocuit cu altul care să fie pe măsura cerinţelor. În general, se setează gestionarul de poziţionare pentru două tipuri de containere: contentpane (foloseşte implicit BorderLayout) şi JPanel (foloseşte implicit FlowLayout). De câte ori se adaugă o componentă pe container trebuie ţinut cont de gestionarul de poziţionare al containerului respectiv. Setarea poziţionării (Layout Manager–ului) Pentru schimbarea layout manager-ului folosit de un container se apelează metoda setLayout. Metoda poate primi ca parametru orice instanţă a unei clase care implementează interfaţa LayoutManager. Secvenţa de ataşare a unui gestionar pentru un container este: FlowLayout gestionar = new FlowLayout(); container.setLayout(gestionar); sau: container.setLayout(new FlowLayout());

Exemplu: JPanel jp = new JPanel(); jp.setLayout(new BorderLayout()); Dacă argumentul este null, container-ul nu foloseşte un layout manager. În acest caz trebuie specificate dimensiunile şi poziţiile fiecărei componente de pe container. Cei mai folosiţi gestionari în Java sunt: BorderLayout, BoxLayout, FlowLayout, GridBagLayout şi GridLayout. BorderLayout este layout manager-ul implicit pentru fiecare container principal. Un BorderLayout are cinci zone în care pot fi aşezate componentele: nord, sud, est, vest şi centru. Gestionarul BoxLayout aşează componentele pe o singură linie sau coloană. Respectă dimensiunile minime ale componentelor şi permite alinierea lor. Clasa CardLayout permite implementarea unei arii care conţine diferite componente la momente diferite. Tabbed pane-urile sunt containere intermediare care furnizează o funcţionalitate similară. Un CardLayout este în general controlat de un Combo Box, starea lui determinând panel-ul de afişat. FlowLayout este layout manager-ul implicit pentru orice JPanel. Aşează componentele de la stânga spre dreapta, de sus în jos. GridLayout-ul aşează componentele în celulele unui tabel. Fiecare componentă ocupă tot locul disponibil din celulă. Toate celulele au aceeaşi dimensiune. La redimesionarea ferestrei GridLayout-ului, celulele îşi vor schimba dimensiunile astfel încât să fie ocupat tot spaţiul ferestrei. Clasa GridLayout are doi constructori: public GridLayout(int rows, int columns) public GridLayout(int rows, int columns, int horizontalGap, int verticalGap) Cel puţin unul din cele două argumente rows şi columns trebuie să fie nenul. Argumentele horizontalGap şi verticalGap din cel de-al doilea constructor permit specificarea numărului de pixeli dintre celule. Implicit ele au valoarea 0. GridBagLayout este cel mai sofisticat şi flexibil layout manager pe care platforma Java îl furnizează. Aşează componentele în celulele unui tabel, fiecare componentă putând să ocupe mai multe celule. Liniile / coloanele tabelului nu este obligatoriu să aibă aceeaşi înălţime / lăţime. Pentru fiecare componentă care se adaugă pe fereastră se setează o serie de constrângeri prin crearea unui obiect al clasei GridBagConstraints. Aceeaşi instanţă a lui GridBagConstraints poate fi folosită pentru mai multe componente, chiar dacă ele au constrângeri diferite. GridBagLayout extrage valorile constrângerilor şi nu refoloseşte GridBagConstraints.

Clasa conţine următoarele atribute care pot fi setate: gridx, gridy – Specifică linia şi coloana colţului din stânga sus a componentei. Coloana cea mai din stânga are gridx=0 iar linia cea mai de sus are gridy=0. gridwidth, gridheight – Reprezintă numărul de coloane (pentru gridwidth) sau de linii (pentru gridheight) pe care va fi afişată componenta. Valoarea implicită este 1. fill – Este folosită atunci când aria de afişare a componentei este mai mare decât dimensiunea cerută, pentru a determina cum poate fi redimensionată componenta. Valorile valide sunt:  NONE (implicit),  HORIZONTAL (măreşte componenta pe orizontală astfel încât să acopere întreaga suprafaţă disponibilă dar nu schimbă înălţimea),  VERTICAL (măreşte componenta pe verticală astfel încât să acopere întreaga suprafaţă disponibilă dar nu schimbă lăţimea),  BOTH (măreşte componenta astfel încât să acopere întreaga suprafaţă disponibilă. ipadx, ipady – Folosite pentru redimensionarea celulelor. Specifică cât trebuie adunat la dimensiunea minimă a componentei. Valoarea implicită este 0. Lăţimea / înălţimea va avea valoarea minimă plus ipadx*2 / ipady*2 pixeli (se aplică în ambele capete ale componentei). insets – Specifică distanţa dintre componentă şi colţurile suprafeţei pe care se afişează. Valoarea atribuită este un obiect Insets. anchor – Este folosită atunci când componenta este mai mică decât suprafaţa pe care urmează să fie afişată, pentru a determina unde se plasează componenta. Valori valide sunt CENTER (implicit), NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST şi NORTHWEST. weightx, weighty – Folosite pentru a determina modul în care să fie repartizat spaţiul dintre coloane / linii. Dacă nu se specifică nici o valoare (implicit este 0) atunci toate componentele vor fi grupate în centru container-ului deoarece GridBagLayout pune orice spaţiu în plus între tabel şi colţurile container-ului. Tratarea evenimentelor Apăsarea unei taste sau a unui buton al mouse-ului declanşează un eveniment. Pentru a trata evenimentul este necesar un obiect care să implementeze interfaţa corespunzătoare şi să fie înregistrat ca un consumator de evenimente (event listener). Componentele Swing pot genera mai multe tipuri de evenimente. Câteva dintre interfeţele corespunzătoare ar fi: ActionListener acţiuni asupra unui control (click pe un buton, Enter după introducerea unui text într-un câmp, selectarea într-un meniu) ComponentListener redimensionări, deplasări, ascunderi ale unei componente FocusListener preluare / pierdere focus ItemListener selecţie / deselecţie obiect în listă, meniu, etc.

TextListener AdjustmentListener KeyListener MouseListener MouseMotionListener WindowListener ContainerListener ListSelectionListener

modificarea textului din control modificarea unei valori variind între două limite (ex: ScrollBar) acţionarea unei taste apăsarea butonului mouse-ului în timp ce cursorul se află pe componenta respectivă drag; mişcarea mouse-ului pe o componentă închidere, minimizare, maximizare etc. adăugare, ştergere componentă schimbarea selecţiei într-o tabelă sau într-o listă

Fiecare eveniment este reprezentat de un obiect care dă informaţii despre eveniment şi identifică sursa evenimentului. Fiecare generator de eveniment poate avea mai mulţi consumatori. consumator de eveniment generator de eveniment

obiect eveniment

consumator de eveniment consumator de eveniment

Un eveniment, o dată apărut, este distribuit tuturor ascultătorilor înregistraţi (nu este consumat numai de primul). Aşa cum am spus mai devreme, pentru ca evenimentele unei componente să fie interceptate de către o instanţă a unei clase ascultător, această clasă trebuie înregistrată în lista ascultătorilor componentei respective. Am spus listă, deoarece evenimentele unei componente pot fi ascultate de oricâte clase - cu condiţia ca acestea să fie înregistrate la componenta respectivă. Înregistrarea unei clase în lista ascultătorilor unei componente se face cu metode din clasa Component de tipul addXXXListener, iar eliminarea ei din aceasta lista cu removeXXXListener unde XXX reprezintă tipul evenimentului.

Exemplu de tratare a unui eveniment: Sunt necesari următorii paşi: 1. Clasa trebuie să implementeze interfaţa corespunzătoare sau să extindă o clasă care implementează interfaţa. public class NumeClasa implements ActionListener {...}

2. Scrierea codului care înregistrează o instanţă a clasei (care va consuma evenimentul) ca şi consumator pentru una sau mai multe componente. Componenta.addActionListener(instantaNumeClasa); 3. Scrierea codul care implementează metodele din interfaţa consumator. public void actionPerformed(ActionEvent e) { //cod care reacţioneaza la acţiune }

Exemplu: import javax.swing.*; import java.awt.*; import java.awt.event.*; public class AplicEv extends JFrame{ JButton uB,lB,rB; JPanel pbut; JTextField txt; Listener lsn; TextWorker txtWorker; public AplicEv() { uB=new JButton("Majuscule"); lB=new JButton("Minuscule"); rB=new JButton("Sterge"); uB.setActionCommand("ActMajuscule"); lB.setActionCommand("ActMinuscule"); pbut=new JPanel(); pbut.add(uB); pbut.add(lB); pbut.add(rB); txt= new JTextField("Introduceti text!"); lsn=new Listener(); getContentPane().setLayout(new BorderLayout()); getContentPane().add("North",txt); getContentPane().add("Center",lsn); getContentPane().add("South",pbut); txtWorker=new TextWorker(txt);

rB.addActionListener(lsn); uB.addActionListener(lsn); lB.addActionListener(lsn); rB.addActionListener(txtWorker); uB.addActionListener(txtWorker); lB.addActionListener(txtWorker); } public static void main(String[] args) { AplicEv f=new AplicEv(); f.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } }); f.addWindowListener(f.lsn); f.setSize(400, 125); //f.pack(); f.setVisible(true); } } class TextWorker implements ActionListener { private JTextField txt; public TextWorker(JTextField txt){ this.txt=txt; } public void actionPerformed(ActionEvent e){ String c=e.getActionCommand(); if(c.equals("Sterge")) txt.setText(""); if(c.equals("ActMajuscule")){ String oldText=txt.getText(); String uText=oldText.toUpperCase(); txt.setText(uText); }

if(c.equals("ActMinuscule")){ String oldText=txt.getText(); String lText=oldText.toLowerCase(); txt.setText(lText); } } } class Listener extends JTextArea implements ActionListener, WindowListener{ public Listener(){ super(); this.setEditable(false); } public void actionPerformed(ActionEvent e){ append(e.paramString()+" [ "+e.toString()+" ]\n"); } public void windowClosed(WindowEvent e){ append(e.paramString()+" [ "+e.toString()+" ]\n"); } public void windowOpened(WindowEvent e){ append(e.paramString()+" [ "+e.toString()+" ]\n"); } public void windowClosing(WindowEvent e){ append(e.paramString()+" [ "+e.toString()+" ]\n"); } public void windowIconified(WindowEvent e){ append(e.paramString()+" [ "+e.toString()+" ]\n"); } public void windowDeiconified(WindowEvent e){ append(e.paramString()+" [ "+e.toString()+" ]\n"); } public void windowActivated(WindowEvent e){ append(e.paramString()+" [ "+e.toString()+" ]\n"); } public void windowDeactivated(WindowEvent e){ append(e.paramString()+" [ "+e.toString()+" ]\n"); } } Pentru informații suplimentare accesați http://www.w3schools.com/js/js_events.asp

100

Folosirea componentelor Un obiect de tip JLabel (etichetă) reprezintă o componentă pentru plasarea unui text pe o suprafaţă de afişare. O etichetă este formată dintr-o singură linie de text static ce nu poate fi modificat de către utilizator, dar poate fi modificat din program. Un obiect de tip JButton (buton) reprezintă o componentă pentru plasarea unui buton etichetat pe o suprafaţă de afişare. Un obiect de tip JTextField defineşte un control de editare a textului pe o singură linie. Este util pentru interogarea utilizatorului asupra unor valori. Un obiect de tip JTextArea defineşte un control de editare a textului pe mai multe linii. Este util pentru editarea de texte, introducerea unor comentarii, etc . Un obiect de tip JCheckbox (comutator) reprezintă o componentă care se poate afla în două stări: "selectată" sau "neselectată" (on/off). Acţiunea utilizatorului asupra unui comutator îl trece pe acesta în starea complementară celei în care se găsea. Este folosit pentru a prelua o anumită opţiune de la utilizator. Un obiect de tip JRadioButton defineşte un grup de comutatoare din care doar unul poate fi selectat. Uzual, aceste componente se mai numesc radio butoane. Un obiect de tip JComboBox defineşte o listă de opţiuni din care utilizatorul poate selecta una singură. La un moment dat, din întreaga lista doar o singură opţiune este vizibilă, cea selectată. O componentă JComboBox este însoţită de un buton etichetat cu o săgeată verticală la apăsarea căruia este afişată întreaga sa listă, pentru ca utilizatorul să poată selecta o anumită opţiune. Un obiect de tip JList defineşte o listă de opţiuni care poate fi setată astfel încât utilizatorul să poată selecta o singură opţiune sau mai multe. Toate opţiunile listei sunt vizibile în limita dimensiunilor grafice ale componentei. Un obiect de tip JScrollbar defineşte o bară de defilare verticală sau orizontală. Este utilă pentru punerea la dispoziţie a utilizatorului a unei modalităţi sugestive de a alege o anumită valoare dintr-un interval.

101

BIBLIOGRAFIE: 1. Andy Budd, Cameron Moll & Simon Collison: CSS Mastery (APress, 2006, ISBN 1590596145). 2. Cascading Style Sheets, level 1, W3C Recommendation 17 Dec 1996, revised 11 Jan 1999, http://www.w3.org/TR/CSS1. 3. Cascading Style Sheets (CSS) by Example, Steve Callihan. 4. Head First HTML with CSS & XHTML http://books.google.ro/books?id=589iSbn9WYkC 5. Tutorialele lui Joe Barta (o copie este la adresa info.cs.pub.ro) 6. VA, Do you need to learn HTML? http://www.craftedweb.com/website-development/do-you-needto-learn-html/

7. http://www.ecursuri.ro/cursuri-online/html-pe-intelesul-tuturor 8. http://www.marplo.net/html/ 9. http://www.w3schools.com/css/css_syntax.asp 10. http://www.w3.org/MarkUp/Guide/Style 11. http://andrei.clubcisco.ro/cursuri/4pw/curs02.pdf 12. http://plomar.uv.ro/html/ 13. http://www.marplo.net/curs_css/ 14. http://www.w3schools.com 15. https://en.wikipedia.org/wiki/Best_coding_practices 16. http://dsq-sds.org/article/viewFile/4632/3946/12630

102

UTILIZAREA W3Schools IMPLICĂ UN ACORD PRIVIND URMĂTOARELE: Informații privind drepturile de autor: Toate paginile și grafica de pe acest site sunt proprietatea companiei de date Refsnes. Paginile, codul sau alt conținut de pe W3Schools nu pot fi redistribuite sau reproduse în nici un fel, formă sau formă fără permisiunea scrisă a datelor Refsnes. Imposibilitatea de a face acest lucru este o încălcare a legilor drepturilor de autor. Utilizarea: Utilizarea fidelă definește excepțiile W3Schools la drepturile protejate de legile privind drepturile de autor. Utilizarea fidelă a W3Schools include folosirea materialelor protejate: • În cercetare • În raportarea de știri • În referințe bibliografice • În comentarii. Utilizarea fidelă a W3Schools include, de asemenea: • Logarea la W3Schools • Adăugarea W3Schools la motoarele de căutare • Biblioteca de arhivare W3Schools Folosind W3Schools în predare: Utilizarea fidelă include utilizarea materialelor protejate prin drepturi în predare în conformitate cu: Utilizare permisă: • Copierea exemplelor și fragmentelor de cod pentru predare non-profit și de cercetare. • Copierea în cantități mici, potrivite pentru predarea la clasă. Utilizare nepermisă: • Copierea pentru utilizarea pentru profit sau comercială. • Copiere textuală sau masivă pe suporturi digitale. • Copierea cantități mari. Stabilirea conexiunii la W3Schools:

103

Orice site web se poate conecta la oricare dintre paginile W3Schools. Cu toate acestea, paginile de W3Schools nu pot fi încorporate într-un site și distribuit, fără permisiunea scrisă a companiei de date Refsnes. Garanții: W3Schools este furnizat fără niciun fel de garanție. Nu există nici o garanție că utilizarea site-ului nu va fi supusă la întreruperi. Toate riscurile directe sau indirecte legate de utilizarea site-ului este suportată în întregime de către utilizator. Toate codurile furnizate de W3Schools sunt oferite ca exemple, fără garanții de performanță, vandabilitate, și / sau orice altă garanție (expresă sau implicită). W3Schools pot conține inadvertențe sau erori. Compania de date Refsnes nu dă nici o garanție cu privire la exactitatea datelor site-ului sau a conținutului acestuia. Dacă descoperiți că site-ul sau conținutul său conține erori, vă rugăm să ne contactați astfel încât acestea să poată fi corectate. Adresa de contact: support@w3schools.com

104