fisiere html
DESCRIPTION
INITIERETRANSCRIPT
Acest fişier conŃine rezumatul a 12 lecŃii despre HTML
LecŃia 1: SpaŃiul World Wide Web
Limbajul HTML se va prezenta în lecŃiile următoare. Pentru a scrie fişiere HTML(pagini
web), urmăm paşii:
• cu My Computer sau Explorer ne situăm în folderul unde dorim să se găsească fişierele
• cu ajutorul menu-ului contextual (click cu butounul drept al mouse-ului) alegem New -
Text Document. Programul NOTEPAD va crea un fişier cu extensia .txt
• ne poziŃionăm pe fişier şi din menu-ul contextual alegem comanda RENAME, pentru a
schimba numele fişierului şi extensia în .html sau .htm. Extensia .htm este asociată
browser-ului Internet Explorer, şi deci fişierul va avea icon-ul browser-ului
• un dublu click pe fişier are ca efect lansarea browser-ului, care va afişa fişierul
(conŃinutul va fi vid)
• din menu-ul principal din Internet Explorer, View->Source, NOTEPAD va încarcă
codul HTML al fişierului (conŃinutul va fi vid)
• scriem un text la alegere, de exemplu “se crează un site”, se salvează fişierul
• în fereastra browser-ului se apasă butonul “Refresh”, prin care comandăm browser-ului
să reîncarce fişierul care a suferit modificări
• se trece iar în NOTEPAD (View-Source) pentru a continua să scriem fişierul HTML
ObservaŃie: Pentru a scrie codul unui fişier HTML, nu trebuie să fim conectaŃi la Internet.
LecŃia a-2-a: HTML noŃiuni de bază
• O pagina Web este un domeni HTML(un fisier text) cu extensia de nume de fisier .html sau .htm
• Un document HTML standard contine un bloc <html>...</html>, in interiorul caruia exista alte doua blocuri: <head>...</head> si <body>...</body>.
• Titlul unei pagini Web este reprezentat de continutul blocului <title>...</title> care apare in interiorul blocului <head>...</head>.
• Continutul unei pagini Web este reprezentat de ceea ce exista in interiorul
blocului <body>...</body>.
• Browser-ul inlocuieste o serie de caractere de spatiu alb(spatiu, TAB, CR/LF) cu un singur caracter spatiu.
• Eticheta <br> obliga browser-ul sa afiseze continutul care urmeaza de la inceputul unui rand nou
• Pentru a afisa textul pe un singur rand, trebuie sa-l introduceti intr-un bloc <nobr>...</nobr>.
• Pentru a pastra formatarea existenta in documentul sursa, utilizati elementul <pre>...</pre>.
LecŃia a-3-a: Stiluri de text
Stiluri fizice de text
• Textul din interiorul elementului <body>...</body> va fi afisat cu parametrii prestabiliti ai browser-ului, daca nu sunt precizate stiluri pentru respectivul text.
• Pentru a schimba stilul de text, puteti utiliza stilurile fizice:<tt> pentru text tip teleimprimator, <i> pentru text xursiv, <b> pentru text aldin, <big> pentru text
mai mare, <small> pentru text mai mic, <strike> sau <s> pentru text taiat cu o
linie si <u> pentru text subliniat.
• Stilurile de text fizice pot fi imbricate.
• Elementul pentru text scris la exponent este <sup> si pentru text scris la indice este <sub>.
• Unele dintre stilurile de text fizice sunt considerate depasite si se recomanda utilizarea tehnologiei CSS in locul lor.
Stiluri logice de text
• Intr-o pagina Web, titlurile pot fi inserate cu ajutorul elementelor <h1>, <h2>,
<h3>, <h4>, <h5> si <h6>.
• Puteti insera paragrafe utilizand elementele <p> si citate utilizand elemente <blockquote>(pentru citate la nivel de bloc) si elemente <q>(pentru citate in
interiorul unui rand).
• Pentru a insera linii orizontale, se utilizeaza elementul <hr>.
• Pentru a insera blocuri de impartire, generice, utilizati elementul <div> pentru separari la nivel de bloc si elementul <span> pentru separari in interiorul randului.
• Blocurile de text performant pot fi inserate utilizand elementele <pre>,
<plaintext> sau <xmp>.
• Exista etichete speciale pentru elementele de fraza, cum ar fi <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, <cite>, <abbr>, si <acronym>.
• Elementul <center> poate fi utilizat pentru a centra orice continut.
Tipuri de litera
• Pentru a defini o culoare in codul HTML, puteti utiliza un nume de culoare standard sau o definitie RGB.
• Pentru a preciza culoarea de fundal a unei pagini Web, utilizati atributul bgcolor al elementului <body>.
• Pentru a preciza culoarea textului dintr-o pagina Web, utilizati atributul text al elementului <body>.
• Pentru a preciza marginile uneu pagini Web in Internet Explorer, utilizati atributele leftmargin, rightmargin, topmargin si bottommargin ale elementului
<body>.
• Pentru a preciza marginile unei pagini Web in Netscape Navigator, utilizati atributele marginwidth si marginheight ale elementului <body>.
• Elementul <basefont> va permite sa precizati un tip de litera pentru urmatoarea sectiune a unei pagini Web, utilizand atributele color, face si size.
• Elementul <font> va permite sa precizati un tip de litera pentru un bloc de text,
utilizand atributele color, face si size.
• Atributele font si face accepta liste de nume de tipuri de litera, separate prin virgule.
LecŃia a-4-a: Liste
• Pentru a insera liste intr-o pagina Web, utilizati elementul <ol> pentru liste ordonate si elementul <ul> pentru liste dezordonate.
• Pentru a insera un articol intr-o lista, utilizati elementul <li>.
• Simbolurile introductive pentru listele dezordonate pot fi precizate utilizand valorile disc, circle sau square ale atributului type.
• Simbolurile introductive pentru listele ordonate pot fi stabilite atribuind
atributului type valori care reprezinta cifre arabe, litere mici sau mari si cifre
romane scrise cu litere mici sau mari.
• Listele pot fi imbricate.
• Puteti stabili proprietatile pentru elementele <li> individuale, utilizand atributele value si type.
• O lista de definitii (<dl>) este formata din termeni de definiti <dt> si definitii (descrieri) – elementele <dd>.
• Alte tipuri de liste sunt lista de directoare (<dir>) si lista de meniuri (<menu>).
LecŃia a-5-a:Tabele
• Tabelele pot fi inserate intr-o pagina Web utilizand elementul <table>.
• Un tabel este compus din linii(elemente <tr>) si celule(elemente <td>).
• Pentru a adauga o bordura la un tabel, utilizati atributul border al elementului <table>.
• Pentru a atribui o culoare bordurii, utilizati atributul bordercolor.
• Atributele frame si rules ale elementului <table> va permit sa proiectati bordurile pentru liniile, coloanele si celulele unui tabel.
• Un tabel poate fi aliniat utilizand atributul align.
• Spatiul alb din jurul unui tabel poate fi stabilit cu ajutorul atributelor hspace si vspace ale elementului <table>.
• Atributul cellspcing determina distanta dintre celulele adiacente, iar atributul
cellpadding determina distanta dintre continutul si bordura unei celule.
• Pentru un tabel sau o celula, pot fi stabilite dimensiuni fixe folosind atributele width si height.
• Folosind atributul bgcolor,puteti stabili culoarea de fundal pentru un tabel, iar folosind atributul background puteti preciza o imagine de fundal.
• Pentru a defini antetul unui tabel, utilizati elementul <th>.
• Pentru a alinia datele intr-un tabel, utilizati atributele align si valign atasate la elemente <tr>, <td> sau <th>.
• Pentru a extinde o celula peste celulele adiacente, utilizati atributele colspan si rowspan ale elementelor <td> sau <th>.
• Pentru a adauga un titlu la un tabel, utilizati elementul <caption> in interiorul
elementului <table>.
• Pentru a adauga o structura la un tabel, utilizati elementele <thead>,<tfoot> si <tbody>.
• Pentru a stabili proprietatile coloanelor unui tabel, utilizati elementul <colgroup>.
LecŃia a-6-a: Imagini
• Intr-o pagina Web puteti insera mai multe tipuri de imagini(formatul GIF recomandat pentru desene, formatul JPEG recomandat pentru fotografii, formatele PNG si TIFF pentru imagini cu scop general si formatul BMP pentru Internet
Explorer).
• Pentru a insera o imagine, utilizati elementul <img>.
• Adresa Internet a unei imagini este precizata de atributul scr, care accepta ca valori orice adrese URL(Uniform Resource Locator) valide(relative sau absolute).
• Pentru a adauga un chenar la o imagine, specificati atributul border.
• Pentru a specifica dimensiuni fixe pentru o imagine, utilizati atributele width si height.
• Imaginea poate fi aliniata pe orizontala sau pe verticala cu ajutorul atributului align.
• Utilizati atributele hspace si vspace pentru a preciza dimensiunile spatiului alb din jurul imaginii.
• Atribute suplimentare pentru elementul <img>sunt alt(pentru alternativa text) si lowsrc(pentru imagini inlocuitoare, cu rezolutie scazuta).
• Pentru a preciza o imagine de fundal pentru o pagina Web, utilizati atributul background al elementului <body>.
LecŃia a 7-a: Legaturi
• Legaturile sunt utilizate pentru navigarea la resurse Internet.
• O legatura poate fi inserata folosind elementul <a>.
• Resursa Internet indicata de catre legatura este precizata de atributul href al elementului <a>.
• Legaturile pot fi definite folosind adrese URL absolute sau relative.
• Pentru a defini o imagine ca legatura, inserati elementul <img> in interiorul elementului <a>.
• Pentru a defini o legatura la o resursa de pe sistemul local, utilizati protocolul file:///.
• Pentru a defini o legatura la im site FTP, utilizati protocolul ftp://.
• Pentru a defini o legatura la o adresa de e-mail, utilizati protocolul mailto:.
• Pentru a naviga in interiorul unei pagini Web, utilizati elementul <a> impreuna cu atributul name.
• Pentru a defini fereastra in care va fi incarcata noua resursa indicata de catre o legatura, atasati atributul target la elementul <a>.
• Pentru a particulariza culoarea legaturii, utilizati atributele link, alink si vlink ale elementului <body>.
• Pentru a defini un prefix pentru toate atributele href dintr-o pagina Web, inserati in elementul <head> un element <base>, impreuna cu atributul href.
LecŃia a 8-a:Metadate
• Metadatele sunt informatii inserate in elementul <head> utilizat la descrierea paginii Web si care transmit informatie robotilor Internet si motoarelor de cautare.
• Metadatele nu sunt afisate de catre browser.
• Pemtru a insera metadate, se utilizeaza o pereche de atribute: name si content sau http-equiv si content.
• Atributul content contine datele propriu-zise.
• Atributul name este utilizat pentru a insera date cum ar fi description(pentru introducerea unei descrieri), keywords(pentru a defini un set de cuvinte cheie),
author(pentru a adauga informatie despre creator) si copyright(pentru a defini
detalii despre dreptul de copyright).
• Atributul http-equiv este utilizat pentru a insera date cum ar fi creation-date(data crearii), expires(data actualizarii), from si replay-to(pentru a insera o adresa de
e-mail care permite comunicarea cu realizatorul paginiisau site-ului Web),
content-type(pentru a descrie tipul de fisier), refresh si pragma(pentru
reimprospatarea automata a browser-ului).
• Pentru a adauga un comentariu intr-o pagina Web, utilizati elementul <!--...-->.
LecŃia a 9-a:Cadre
• Cadrele sunt utilizate pentru afisarea simultana a mai multor pagini Web in aceeasi fereastra de browser.
• Cadrele se definesc utilizand elementul <frame> in interiorul elementului <frameset>, care inlocuieste elementul <body> obisnuit dintr-un fisier HTML.
• Atributele cols si rows ale elementului <frameset> va permit sa impartiti fereastra
brouser-ului in cadre verticale(cols) si orizontale(rows).
• Elementul <frameset> are si alte atribute, cum ar fi border(afiseaza o bordura), bordercolor(atribuie o culoare bordurii), frameborder(stabileste vizibilitatea
bordurilor) si framespacing(pentru Internet Explorer).
• Elementul <frame> are atribute similare, cum ar fi bordercolor si frameborder.
• Alte atribute ale elementului <frame> sunt marginheight si marginwidth(care definesc spatiul alb dintre continut si marginile cadrului), name (ataseaza cadrului
un identificator unic), noresize(dezactiveaza redimensionarea cadrelor prin clic si
trage cu mouse-ul), scrolling(ataseaza bare de derulare) si src(defineste adresa
URL a paginii care va fi incarcata in respectivul cadru).
• Elementul <base> plasat in interiorul elementului <head> impreuna cu atributul target va permit sa definiti o destinatie pentru legaturile plasate intr-o pagina
Web.
• Exista patru valori magice pentru atributul target: _self, _blank, _parent si _top.
• Elementul <noframes> plasat in elementul <frameset> va permite sa configurati o pagina Web care sa poata fi afisata si de browserele mai vechi.
• Elementul <iframe> va permite sa inserati cadre in-line oriunde intr-o pagina
Web obisnuita. Elementul <iframe> accepta toate atributele unui element
<frame> obisnuit, avand in plus si unele atribute specifice elementului <image>,
cum ar fi width, height, align, hspace si vspace.
LecŃia a-10-a:Formulare
• Formularele sunt utilizate pentru transmiterea datelor catre o aplicatie pe parte de client sau pe parte de server de la o adresa e-mail.
• Pentru a insera un formular, se utilizeaza elementul <form> impreuna cu atributele specifice.
• Atributul action al elementului <form> stabileste destinatarul datelor transmise de catre formular(aplicatie pep arte de server sau adresa e-mail).
• Atributul method al elementului <form> determina metoda prin care datele sunt transmise de catre formular(metoda GET adauga datele la adresa URL, ,etoda
POST transmite datele intr-o tranzactie separata).
• Atributul enctype al elementului <form> determina metoda de codificare
utilizata la transmiterea datelor.
• Elementele componente ale formularului se introduc in interiorul elementului <form>.
• Puteti adauga tipuri diferite de elemente de formular precizand diferite valori pentru atributul type al elementului <input>: text pentru campuri de text,
password penrtu parole, hidden pentru campuri ascunse, checkbox pentru casete
de validare, radio pentru butoane radio, image pentru butoane imagine, file
pentru incarcarea fisierelor, button pentru butoane generice, submit pentru
butoane de tip transmitere si reset pentru butoane de tip anulare.
• Elementul <textarea> va permite sa adaugati campuri de text xu mai multe randuri.
• Elementul <button> va permite sa adaugati butoane particularizate.
• Elementul <select> va permite sa adaugati o lista de optiuni definite cu elementul <option>. Utilizatorul nu va putea selecta decat o singura optiune, cu
exceptia cazului in care la elementul <select> este adaugat atributul multiple.
• Pentru toate componentele elementului <form> exista mai multe atribute cu semnificatii similare, cum ar fi:name(identificator unic), value(o valoare initiala
sau eticheta de pe butoane), disable(dezactiveaza un element),readonly(nu
permite editarea valorii elementului), maxlength(stabileste numarul maxim de
caractere), size(marimea, in caractere, a zonei vizibile), checked(pentru casete de
validare si butoane radio), selected(pentru optiunile selectate), cols si
rows(pentru marimea zonei vizibile la elementul <textarea>), src si align(pentru
elemente de tip imagine).
• Atributul accesskey va permite sa selectati un element de formular folosind
scurtatura.
• Atributul tabindex va permite sa schimbati ordinea de parcurgere a elementelor de formular cand se utilizeaza tasta TAB.
• Datele transmise de un formular prin metoda GET sunt adaugate la sfarsitul adresei URL, dupa un simbol ?, sub forma de lista de perechi nume=valoare
separate prin simbolul &.
LecŃia a-11-a:Imagini harti
• Puteti utiliza o imagine harta pentru a defini mai multe legaturi catre resurse Internet diferite.
• Inserarea unei imagini harta este un proces in mai multi pasi, ce includ declararea hartii, descrierea ei si definirea legaturilor.
• Pentru a declara o imagine ca imagine harta, utilizati elementul <img> impreuna cu atributul usemap,care creeaza o ancora pentru identificatorul de harta.
• Pentru a descrie o harta, utilizati elementul <map> impreuna cu atributul name, care are ca valoare un identificator de harta, si inserati in ele elemente <area>
pentru fiecare zona activa.
• Atributul shape al elementului <area> se utilizeaza la definirea tipului de zona(rect, circle, poly sau default).
• Atributul coords al elementului <area> se utilizeaza la definirea coordonatelor propriu-zise ale zonei active.
• Atributul href al elementului <area> se utilizeaza la definirea adresei URL a resursei Internet indicate in zona activa.
• Atributul target al elementului <area> se utilizeaza la precizarea ferestrei in care va fi
incarcata noua resursa.
• De asemenea, puteti crea o imagine harta folosind elementul <object>.
LecŃia a-12-a:Multimedia
• Limbajul HTML are capacitatea de a ingloba fisiere multimedia.
• Browserele rezolva fisierele multimedia utilizand programe de completare sau aplicatii ajutatoare.
• Tipul unui fisier multimedia este determinat de extensia de nume de fisier sau de tipul MIME atasat.
• Puteti crea o legatura la un fisier multimedia utilizand elementul <a> impreuna cu atributul href.
• O resursa multimedia poate fi inglobata intr-o pagina Web utilizand elementul
<embed> impreuna cu atributele specifice:src(pentru precizarea fisierului
multimedia), type(pentru precizarea tipului MIME asociat),width si height( pentru
precizarea spatiului din pagina Web alocat resursei multimedia).
• O metoda generala de inserare a oricarui tip de resurse(inclusiv fisiere multimedia, contrale ActiveX si miniaplicatii Java) consta in utilizarea
elementului <object> impreuna cu atributele specifice: data(pentru precizarea
adresei URL a resursei), type(pentru a preciza tipul MIME asociat), classid(pentru
a preciza identificatorul controlului ActiveX), width si height(pentru a preciza
spatiul alocat resursei in pagina Web), align(pentru alinierea resursei), hspace si
vspace(pentru definirea spatiului alb din jurul resursei) si border(pentru definirea
unei borduri).
Acest fişier conŃine 3 lecŃii despre CSS ( numerotate în continuarea părŃii I - HTML) LecŃia a-13-a: Introducere in CSS
• CSS inseamna Cascading Style Sheets(foi de stil in cascada) si va permite sa imbunatatiti prezentarea unei pagini Web;
• O foaie de stil consta intr-o serie de reguli; • O regula este definita de un selector(care precizeaza unde se aplica regula) si o
declaratie(care specifica un stil); • Declaratia este o serie de perechi proprietate:valoare delimitate prin simbolul
punct si virgula; • Proprietatile sunt cuvinte rezervate; • Valorile utilizeaza o sintaxa specifica; • Pentru a defini un stil in-line, precizati valoarea style a unui element HTML; • Pentru a defini un stil in interiorul unui document HTML, utilizati un element
<style> plasat in interiorul unui element <head>. • Pentru a defini un stil intr-un fisier extern, creati o foaie de stil si, utilizand un
element <link> plasat in interiorul elementului <head>, cereti browserului sa afiseze documentul care face referire la foaia de stil.
• Atributele obligatorii pentru elementul <link> sunt: rel cu valoarea ”stylesheet”, type cu valoarea “text/css” si href care are ca valoare adresa URL a fisierului care contine foaia de stil;
• La orice elemente HTML pot fi atasate atribute universale.Aceste atribute universale sunt:id(defineste un identificator unic), class(ataseaza elementul la o clasa), style(ataseaza un stil), title(ataseaza un titlu), lang(defineste limba) si dir (defineste directia de afisare);
• CSS defineste prioritatea de aplicare a stilurilor la afisarea unui element: mai intai stilurile in-line, apoi cele din document, apoi stilurile din fisiere externe si, in final, stilul HTML;
• Un selector poate fi definit ca selector universal, de clasa, id, descendent, copil, frate, adiacent, atribut sau grupat;
• Pentru a particulariza legaturile, utilizati pseudo-clasele:link, :visited, :hover, :active si :focus;
• Alte pseudo-clase includ:first-child, :first-line si :first-letter. • Pentru a insera un comentariu, utilizati sintaxa limbajului C:/*...*/; • Cand atribuiti o valoare unei proprietati, asigurati-va ca valoarea se gaseste in
intervalul corespunzator proprietatii.
LecŃia a-14-a: Clase de proprietăŃi în CSS Tipuri de litere in CSS
• Pentru a defini un font, utilizati proprietatea ‘font-family ’ si atribuiti-i ca valoare
o lista de nume de fonturi separate prin virgula;
• Exista cinci fonturi generice: serif, sans-serif, cursive, fantasy si monospace; • Utilizati proprietatea ‘font-style’ pentru a atribui stilului de font valorile normal,
italic sau oblique; • Utilizati proprietatea ‘font-variant’ pentru a atribui variantei de font valorile
normal sau small-caps; • Utilizati proprietatea ‘font-weight’ pentru a preciza ingrosarea fontului; • Utilizati proprietatea ‘font-stretch’ pentru a preciza alungirea fontului; • Utilizati proprietatea ‘font-size’ pentru a preciza dimensiunea fontului; • Utilizati proprietatea ‘font-size-adjust’ pentru a stabili valoarea aspectului
fontului; • Utilizati proprietatea ‘font’ ca o scurtatura pentru definirea tuturor proprietatilor
de font utilizand o lista de valori delimitate prin spatii: <style> <variant> <weight> <size/height> <family>;
• Pentru a obliga browserul sa descarce si sa utilizeze un anumit font, inserati o directiva @font-face impreuna cu o proprietate src ce are ca valoare adresa URL a fontului. Text in CSS
• CSS are mai multe proprietati care controleaza aspectul textului; • Proprietatea ‘text-indent’ determina indentarea primului rand dintr-un bloc de
text; • Proprietatea ‘text-align’ determina alinierea unui bloc de text; • Proprietatea ‘text-decoration’ determina decoratiunile din text(underline,overline,
line-through sau blink); • Proprietatea ‘text-shadow’ aseaza o umbra la text; • Proprietatea ‘letter-spacing’ determina spatiul suplimentar dintre doua litere
adiacente; • Proprietatea ‘word-spacing’ determina spatiul suplimentar dintre doua cuvinte
adiacente; • Proprietatea ‘text-transform’ determina utlizarea majusculelor intr-un bloc de
text(uppercase, lowercase, none sau capitalize); • Proprietatea ‘white-space‘ determina cum sunt interpretate spatiile albe(pre,
nowrap sau normal). LecŃia a-15-a: PoziŃionarea elementelor în pagină în CSS
O întrebare firească pe care ne-o punem este: Cum aranjează browser-ul în pagină diverse
elemente HTML (imagini, text, tabele, liste, etc.) Răspunsul la această întrebare este subiectul acestui capitol.
Aşa cum s-a menŃionat şi în capitolele precedente, elementele HTML pot fi: � elemente de nivel de bloc –sunt elementele care sunt afişate la rând nou (de exemplu:
P, DIV, TABLE, TR, OL, LI, UL, DL, DT, H1...H6) � Elemenete de nivel de text (in-line) - sunt elemente care sunt afişate pe linia curentă
(de exemplu: B, I, IMG, BIG, SMALL ,S, U, SPAN, etc.). Browser-ul când primeşte macheta unei pagini identifică:
� arborele documentului, care arată aranjarea elementelor într-un fişier HTML � tipul elementelor (de nivel de bloc sau inline) � obiecte flotante
� obiecte poziŃionate În secŃiunile următoare se vor prezenta aceste elemente. În anexa B este dat tabelul cu codul unor caractere speciale. Pentru a introduce caractere speciale în HTML se utilizează marcaje speciale numite
entităŃi sau referinŃe de entităŃi. EntităŃiile (marcajele pentru caracterele speciale) nu sunt incluse între paranteze unghiulare(<>). Acestea se introduc începând cu caracterul ampersand(“&”) şi terminând punct şi virgulă(“;”). Pentru unele caractere există două posibilităŃi de scriere a unui caracter special şi anume:
� prin secvenŃa � ampersand(&) � diez(#) � un număr(160) � punct şi virgulă(;)
de exemplu pentru caracterul special dolar($) se foloseşte scrierea $
� prin secvenŃa � ampersand(&) � un text � punct şi virgulă(;) De exemplu pentru caracterul copyright © se poate folosi © dar şi ©.
Orice caracter se poate scrie cu prima formă menŃionată mai sus, dar unele caractere speciale admit ambele forme. De exemplu, literele cu diacritice româneşti nu au forma a doua de reprezentare.
Exemple de texte cu caractere speciale: � łara mea este frumoasă şi bogată şi se numeşte România:
Ţara mea este frumoasă şI bogată şi se numesşte România
� La mulŃi ani! La mulţ  ani ! � Aria cercului este ПR2 :
Aria cercului este πR<sup>2</sup> sau Aria cercului este πR²
sau Aria cercului este πR²
Arborele unei pagini
Aşezarea implicită a elementelor în pagină se mai numeşte şi aşezare în flux normal. În capitolul precedent s-a arătat că orice element HTML poate fi privit ca o casetă (box) şi cu ajutorul stilurilor se poate vizualiza caseta (culori de font, bordură, textură) şi dimensiunea (height şi width).
Un element poate deŃine alte elemente, de exemplu DIV poate conŃine SPAN, un element TD poate conŃine un element OL sau IMG. În acest caz spunem că elementele sunt imbricate şi deasemenea casetele corespunzătoare lor sunt imbricate. Casetele imbricate vor fi aşezate de către browser în caseta părinte, la nivel de bloc sau linie.
Această aşezare în flux normal se mai numeşte şi model casetă şi generează grafic un arbore de elemente. O pagină are doi copii: HEAD şi BODY. Se consideră frunze ale arborelui orice secvenŃă de text care nu are copii.
Codul de mai jos va avea arborele din figura 15.1 <HTML> <HEAD> <STYLE>
* {border-style:solid; border-color:blue;border-width:thin; margin:5pt} /*bordura solid, de culoare blue, pentru toate elementele HTML,
cu exceptia frunzelor(text normal), bordura exterioara este pentru elementul radacina a documentului HTML*/ body *{background:LightGreen;} /*Casetele de la primul nivel a lui body )de exemplu DIV,
sunt pe fundal verde deschis*/ body ** {background:yellow;} /*Caseta la nivel 2 a lui body (de exemplu OL pe fundal galben)*/ body ** *{background:cyan;line-height:70%} /*Casetele de nivel 3 a lui body (de exemplu LI pe fundal cyan*/ body {border-color:red;border-style:dotted;} /*Bordura rosie pentru body */ </STYLE> </HEAD>
<BODY> Pozitionarea casetelor in<B>flux normal</B> si descoperirea <I>Arborelui paginii</I> <P> Prietenul meu<IMG src ="friend.jpg" width="50" height="50"> Boby <TABLE cellspacing=5 height=20> <TR ><TD>a11<TD>a12 <TR><TD>a21<TD>a22 </TABLE> </P> <DIV style="padding:10pt 5pt ;"> <SPAN> <B> Bloc de diviziune </SPAN> </B> <OL style="padding:5pt 20pt 2pt;">Lista casetelor <LI>Arbore - flux normal
<LI>Flotante <LI>Pozitionate
</OL> <TABLE cellspacing=5 height=20>
<TR><TD>b11<TD>b12 <TR><TD>b21<TD>b22
</TABLE> </DIV></BODY> </HTML>
�
Figura 15. 1 Arborele unui document
IMG TABEL SPAN OL TABEL FRUNZĂ
TR
TR TR
R LI LI LI TRB
TD TD TD TD TD TD TD TD
HTML
BODY HEAD
B I FRUNZĂ P
Proprietatea Display Css oferă posibilitatea de a schimba modul de afişare a tipului elementelor (bloc şi
inline), prin utilizarea proprietăŃii display. Valorile posibile ale proprietăŃii display sunt:
� inline – elementele se afişează în continuarea rândului curent � block – elementele se afişează la început de rând � none – elementul nu se va afişa Proprietatea Display poate fi aplicată la majoritatea elementelor HTML.
Dacă în exemplul de mai sus se adaugă în cod foaia de stil: *{display:block}
elementele vor fi afişate de la rând nou, aşa cum se observă în figura 15.2.
Figura 15. 2 Proprietatea Display:block
Dacă se doreşte ca toate elementele din exemplul 15.1 să fie afişate inline, se va scrie
următoarea foaia de stil: *{display:inline}
iar browser-ul le va afişa aşa cum se observă în figura 15.3.
Figura 15. 3 Proprietatea Display:inline
Se poate ca numai anumitor elemente să li se schimbe modul de afişare, de exemplu, elementul de bloc TABEL dorim să fie afişat inline şi elementul de text B să fie afişat la nivel de bloc. În acest caz, adăugăm în exemplul 15.1, următoarele linii de cod :
Table {display:inline} B {display:block}
Figura 15. 4 Proprietatea Display:inline şi block
Elemente flotante
Modul normal de aşezare a elementelor în pagină poate fi modificat cu ajutorul obiectelor flotante şi poziŃionate.
Obiectele flotante se definesc cu ajutorul proprietăŃii float care se poate ataşa la orice element. Valorile posibile sunt:
� none – caseta nu e flotantă � right – casetă flotantă spre dreapta � left – casetă flotantă spre stânga
ObservaŃie
Obiectele flotante se pot defini:
� cu atributul align, pentru elementele HTML care-l acceptă (de exemplu <img align=left>)
� cu CSS pentru elementele care nu acceptă atributul align (de exemplu OL, UL, etc.) Dacă în exemplul din figura 15.1 adăugăm liniile de mai jos la foaia de stil
OL{float:left} şi în corpul programului înlocuim elementul TABLE care defineşte primul tabel, cu <TABEL style=”float:right”>, iar elementul IMG, cu <IMG align=left>, atunci va apărea imaginea şi primul tabel aliniat la dreapta şi lista aliniată la stânga, ca în figura de mai jos:
Figura 15. 5 Proprietatea float
Browser-ul execută următorii paşi la întâlnirea unui element flotant: � fluxul normal de aşezare în pagină este întrerupt � elementul flotant este afişat în poziŃia indicată (stânga, dreapta) începând din rândul
următor � se afişează elementele din flux de la punctul în care a fost întrerupt, începând cu spaŃiul
rămas liber de deplasarea obiectului flotant � casetele elementelor flotante se pot suprapune peste casetele din fluxul normal
dar nu şi conŃinutul lor
Elemente poziŃionate
CSS oferă posibilitatea de a schimba fluxul normal de aşezare a elementelor în pagină şi cu ajutorul proprietăŃii POSITION, care poate fi ataşată oricărui element în foaia de stil sau ca valoare a atributului STYLE.
Valorile posibile sunt: � static – aşezarea se face în flux normal (valoare implicită) � absolute – elementul iese din fluxul normal şi este afişat la o distanŃă relativă faŃă de
primul părinte poziŃionat � relative – elementul rămane în fluxul normal dar este poziŃionat la o distanŃă relativă
cu poziŃia sa normală (elementul se poate suprapune peste altele) � fixed – elementul iese din fluxul normal şi e afişat într-o zonă vizibilă. El rămâne fix
când se derulează pagina cu barele de defilare Marginile casetei corespunzătoare elementului poziŃionat sunt definite de proprietăŃiile:
� top
� right
� bottom
� left
Valorile posibile sunt:
� o lungime dată în: cm, mm , px, pt, em � un procent - relativ la părinte
Proprietatea z-index
Dacă se modifică fluxul normal cu ajutorul elementelor flotante sau elemente poziŃionate (absolute, relative, fixe) există posibilitatea ca anumite elemente să se suprapună, aparând ca o stivă de casete, care sunt afişate în ordinea în care au fost introduse. Dacă dorim să nu se suprapună casetele trebuie să fim foarte atenŃi la scrierea coordonatelor marginilor (ceea ce este foarte greu.)
Proprietatea z-index ne ajută să stabilim ordinea de afişare a casetelor suprapuse. Valorile posibile sunt:
� auto - valoarea implicită � număr - număr întreg pozitiv care determină nivelul în stivă relativ la părinte
În intreriorul aceluiaşi părinte sunt afişate casetele în ordinea descrescătoare a numărului de nivel (valoarea lui z-index)
Acest fişier conŃine 5 lecŃii despre limbajul JavaScript (numerotate în continuarea părŃii a II-a CSS)
LecŃia a-16-a: JavaScript – Elemente de bază
JavaScript este un limbaj de programare orientat obiect, care va permite sa construiti aplicatii prin utilizarea obiectelor. Un obiect este un document, un buton sau un element care apare intr-un formular. Fiecare obiect are proprietatile sale – informatii despre obiect, cum ar fi dimensiunile si culoarea. De asemenea, fiecare obiect are metodele sale, care sunt actiunile efectuate de catre obiect, cum ar fi prelucrarea unui formular atunci cand utilizatorul executa clic pe butonul Submit. Accedeti la proprietatile si metodele unui obiect scriind numele obiectului, urmat de un punct si de numele proprietatii sau metodei pe care doriti sa o utilizati in programul dumneavoastra JavaScript. Aceasta este denumita sintaxa cu punct. O aplicatie JavaScript reactioneaza la evenimente care se petrec in timpul rularii aplicatiei. Un eveniment este de obicei o actiune intreprinsa de persoanele care folosesc aplicatia, de pilda un clic pe butonul Submit sau pe butonul Cancel. Permiteti programului JavaScript sa reactioneze la evenimente, definind rutine de tratare a evenimentelor. O rutina de tratare a evenimentelor este o sectiune din aplicatia dumneavoastra care este apelata de fiecare data cand un anumit eveniment are loc in timp ce aplicatia ruleaza. Un program JavaScript este inclus intre etichetele <script> ale unei pagini HTML. Etichetele <script>pot fi scrise intre etichetele <head> si <body> ale unei pagini web. Este recomandabil sa includeti programul JavaScript intr-un comentariu HTML, intre etichetele <script>, in asa fel incat browserele mai vechi, care nu pot intelege JavaScript, sa nu poata afisa programul dumneavoastra JavaScript pe ecran. Acum, pentru ca v-ati facut o impresie generala despre JavaScript si pentru ca stiti cum sa scrieti o aplicatie simpla JavaScript, este timpul sa discutam despre aspecte mai interesante ale limbajului JavaScript. In capitolul urmator veti invata sa stocatisi sa folositi informatiile intr-un program JavaScript. Variabilele si valorile literale sunt folosite impreuna cu operatorii pentru a construi o expresie. Un operator este un simbol care ii arata browserului cum sa calculeze o expresie. Un operator ii cere browserului sa efectueze operatia cu valorile si variabilele dintr-una sau din ambele parti ale operatorului. Valorile si variabilele se numesc operanzi. Operatorii aritmetici sunt utilizati pentru a-i cere browserului sa efectueze calcule aritmetice. Operatorii logici sunt utilizati pentru a combina doua expresii. Operatorul de atribuire este folosit pentru a copia o valoare din partea stanga a operatorului in partea dreapta a operatorului, care este, de obicei, o variabila. Operatorii de comparatie compara doua valori. Operatorul conditional ii cere browserului sa evalueze o situatie si sa intreprinda o actiune daca situatia are caracter de adevar si o alta actiune in caz contrar. Expresiile pot deveni complexe, mai ales atunci cand, in cadrul aceleiasi expresii sunt efectuate mai multe operatii. Atunci cand calculeaza o expresie, browserul respecta un set de reguli numit ordinea operatiilor(precedenta operatiilor). Aceste reguli ii indica browserului in ce fel sa calculeze o expresie complexa. Puteti simplifica o expresie
complexa prin plasarea parantezelor in jurul sectiunii pe care doriti ca browserul sa le execute acordandu-le prioritate. Variabilele, operatorii si expresiile sunt elemente fundamentale ale limbajului JavaScript. Considerati-le caramizile si mortarul constructiei unei aplicatii JavaScript. In urmatorul capitol, veti folosi variabilele, operatorii si expresiile pentru a ii cere browserului sa ia o decizie si sa execute declaratiile JavaScript in mod repetat in cadrul unui program JavaScript. LecŃia a-17-a:Instruciuni şi funcŃii Instruciuni In acest capitol ati invatat doua tehnici de programare importante in JavaScript: cum sa determinati browserul sa ia o decizie prin folosirea instructiunii il si a instructiunii switch...case si cum sa determinati browserul sa execute instructiuni in mod repetat, fara ca programul sa fi enevoit sa copieze de mai multe ori grupul de instructiuni. Instructiunea if contine o expresie conditionala, si un bloc de program. Daca expresia conditionala are valoarea true, atunci browserul executa instructiunile din cadrul blocului de program. Browserului i se pot oferi instructiuni alternative, prin folosirea instructiunii elsein tandem cu instructiunea if. Daca instructiunea conditionala este falsa, atunci browserul executa instructiunile din cadrul blocului de program else. Uneori veti dori ca browserul sa testeze alta conditie atunci cand expresia conditionala din cadrul instructiunii if este falsa. Browserul poate fi determinat sa faca acest lucru prin folosirea instructiunii if...else if. Partea else if a acestei instructiuni contine o alta expresie conditionala si instructiuni din cadrul blocului de program, care sunt executate in cazul in care a doua expresie conditionala are valoarea true. O alta versiune a instructiunii if este instructiunea if...else if...else, similara cu instructiunea if...else, in care instructiunile din cadrul blocului de program else sunt executate daca nici prima nici a doua expresie conditionala nu este adevarata. Ati invatat de asemenea modul de folosire al intructiunii switch...case pentru a determina browserul sa ia o decizie prin intermediul programului dumneavoastra JavaScript. Partea switch din cadrul instructiunii contine o valoare care este comparata cu valorile din partea case a instructiunii. Daca exista o egalitate, atunci sunt executate instructiunile din partea case. Daca nu exista o egalitate, aceste instructiuni sunt omise. Ultima instructiune din cadrul portiunii case este reprezentata in mod obisnuit de instructiunea break. Instructiunea break ii cere browseului sa iasa din cadrul instructiunii switch...case fara a mai evalua valorile urmatoare. Instructiunea break poate fi folosita si pentru a-i cere browserului sa iasa din orice ciclu fara a fi necesara finalizarea acesteia. Daca valoarea de schimb nu este egala cu nici una dintre valorile de caz, browserul executa instructiunile care apar dupa sectiunea prestabilita a instructiunii switch...case. Sectiunea prestabilita este optionala. Un browser poate repeta instructiunile prin plasarea de instructiuni in cadrul celor patru tipuri de cicluri: ciclu for, ciclul for in, ciclul while si ciclul do...while. Fiecare ciclu are o expresie conditionala ce trebuie indeplinita pentru ca browserul sa intre in ciclu si sa execute instructiunile din cadrul blocului de program al ciclului. Exista o singura exceptie: instructiunile din ciclul do...while sunt executate cel putin o data indiferent de valoarea true sau false a expresiei conditionale.
FuncŃii In acest capitol, ati invatat sa impartiti aplicatiile dumneavoastra JavaScript pe grupuri de instructiuni, fiecare din acestea efectuand un anumit fel de sarcini. Aceste grupuri se numesc functii. Apelati o functie ori de cate ori doriti ca una dintre aceste sarcini sa fie efectuata in programul dumneavoastra JavaScript. Trebuie sa definiti o functie inainte sa o apelati. O definitie de functie consta dintr-un nume de functie, paranteze si blocul de program al functiei, loc unde plasati instructiunile executate la apelarea functiei. O functie poate detine toate informatiile de care are nevoie pentru indeplinirea sarcinii. Alte functii au nevoie de informatii suplimentare, care sa le fie transferate de instructiunea care apeleaza functiile . informatiile transferate unei functii se numesc argumente. Un argument este inclus intre paranteze, in definitia functiei, si utilizat ca variabila in cadrul functiei. Pot fi folosite mai multe argumente; argumentele trebuie sa fie separate prin virgula. O functie poate returna o valoare instructiunii care a apelat functia, utilizand o instructiune de retur. O instructiune de retur cuprinde cuvantul cheie return, urmat de valoarea returnata de functie. Instructiunea care a apelat functia poate atribui valoarea returnata unei variabile, poate folosi valoarea returnata in cadrul unei expresii sau poate ignora valoarea returnata. Apelati o functie utilizand numele de functie, urmat de paranteze. O functie poate fi apelata de oriunde din programul JavaScript sau utilizand cod HTML din pagina web. Dupa ce aveti functiile in arsenalul de instrumente de lucru, e timpul sa treceti mai departe. Urmatorul capitol abordeaza manipularea sirurilor. Ganditi-va la un sir ca la orice text si la manipularea unui sir ca la un mod prin care JavaScript prelucreaza textul.
LecŃia a 18-a: OBIECTE
În limbajele de programare orientate pe obiect, deci şi în JavaScript, elementele de bază
sunt obiecte. Un obiect este un lucru din lumea înconjurătoare. Obiectele sunt în esenŃă colecŃii de proprietăŃi şi metode. ProprietăŃile sunt valori, iar metodele funcŃii. La membrii unui obiect (proprietăŃi şi metode) ne putem referi ori prin numele obiectului, punct şi numele proprietăŃii sau metodei, sau cu ajutorul unui tablou, astfel:
− nume_obiect.nume_proprietate/metoda − nume_obiect[“proprietate/metoda”] În JavaScirpt există obiecte create de utilizator, obiecte intrisenci şi obiecte ale browser-
ului. Obiectele browser-ului sunt obiecte care implică intervenŃia browser-ului, ca de exemplu, obiectul document şi windows, care vor fi tratate în capitolul 20.
Obiecte create de utilizator
În JavaScript există trei metode de a crea obiecte. 1. CostrucŃia obiectelor folosind funcŃia prototip
Din teoria limbajelor de programare orientate pe obiect se cunoaşte faptul că obiectele se pot crea cu funcŃii prototip, numite şi constructori.
Un constructor este invocat folosind operatorul new, care rezervă spaŃiu de memorie pentru obiect şi returnează adresa spaŃiului respectiv de memorie.
De exemplu, declaraŃia z=new complex(1,2), înseamnă că se rezervă memorie pentru numărul complex 1+2i, şi adresa este încărcată în z, astfel:
z Obiectul nou creat se poate invoca cu cuvântul this. În exemplul următor se crează şi se iniŃializează obiectul vector. Se invocă obiectul
curent prin ambele metode: folosind caracterul “.”, pentru a ne referi la proprietatea lungime vector, şi folosind parantezele drepte “[ ]”, pentru a ne referi la componentele vectorului obiect.
<HTML> <HEAD> <SCRIPT language="JavaScript"> function Initializare_vect(lung) { this.lungime=lung for(i=0;i<this.lungime;i++); this[i]=0 } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> vect=new Initializare_vect(20) document.write("lungimea vectorului este "+ vect.lungime+ "<BR>") for(i=0;i<vect.lungime;i++) document.write(vect[i]+ " " ) </SCRIPT> </BODY></HTML> Să considerm exemplul des utilizat în programarea orientată pe obiecte, şi anume acela de
a creare, modificare şi operaŃii cu numere complexe. În codul de mai jos se crează şi se modifică un număr complex.
<HTML> <HEAD> <SCRIPT language="JavaScript"> function complex(a,b) { this.real=a; this.imag=b } function modific(z) { z.real= 5 + ++z.real; z.imag=2 + ++z.imag } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> z = new complex(1,1) document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>") modific(z) document.write("Dupa modificarea parametrilor"+"<BR>") document.write("z.real= " + z.real +" z.imag= "+z.imag ) </SCRIPT></BODY> </HTML>
1 2
2. Metoda de creare a obiectelor utilizând tipul Object
Un obiect poate fi creat şi cu ajutorul tipului Object. Să considerăm exemplul din figura 2, în care se modifică un număr complex cu ajutorul funcŃiei modific(). Dacă se foloseşte tipul Object, nu mai este nevoie de funcŃia constructor complex(), iar funcŃia modific() va fi considerată o metodă a obiectului creat. Vom avea astfel codul: <HTML> <HEAD> <SCRIPT language="JavaScript"> z=new Object() z.real=1 ;z.imag=1 z.modific=modific function modific(z) { z.real= 5 + ++z.real z.imag=2 + ++z.imag } </SCRIPT> </HEAD> <BODY><B>Tipul Object </B><BR> <SCRIPT language="JavaScript"> document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>") z.modific(z) document.write("Dupa modificarea parametrilor "+" <BR>") document.write("z.real= " + z.real +" z.imag= " + z.imag ) </SCRIPT> </BODY> </HTML>
3. Metoda de creare a obiectelor folosind o listă
Această metodă constă în aceea prin care obiectului i se atribuie o listă de componente. Componentele sunt incluse între acolade şi separate prin virgulă, astfel: Obiect={propr1:val1;propr2=val2;…metoda1:nume1, metoda2:nume2, ..} <HTML> <HEAD> <SCRIPT language="JavaScript"> z={real:2, imag:3, modific:modific} function modific(z) { z.real= 5 + ++z.real z.imag=2 + ++z.imag } </SCRIPT> </HEAD> <BODY> <B> Metoda a 3 de construire a obiectelor <BR> folosind lista pentru declararea proprietatilor si metodelor </B><BR> <SCRIPT language="JavaScript"> var i for (i in z) document.write(i+" ") document.write("<BR>") for (i in z) document.write(z[i] + " ")
modific(z) document.write("<BR>"+"Dupa modificarea parametrilor" + "<BR>") document.write("z.real= " + z.real +" z.imag= " +z.imag) </SCRIPT></BODY> </HTML>
Obiecte intriseci
În JavaScript există mai multe obiecte definite şi recunoscute de browser. În această
secŃiune se vor prezenta succint cele mai folosite obiecte intriseci ale limbajului JavaScript: Math, String şi Array.
Obiectul “Math”
Obiectul Math conŃine o serie de proprietăŃi şi metode care permit efectuarea unor
calculelor matematice. Constantele sunt proprietăŃile obiectului iniŃializate. Cele mai utilizate constante sunt : PI (3.14...) şi E ( 2,71...).
Metodele obiectului Math sunt funcŃii matematice, cunoscute ca funcŃii implicite ca şi în alte limbaje de programare. Aceste funcŃii returnează o valoare, care poate fi număr real, întreg, natural sau unghi în radiani.
Cele mai importante metode ale obiectului Math sunt:
• abs(x) – returnează valoarea absolută a numărului real x (modul) • cos (x) – returnează cosinusul numărlui x • sin(x) – returnează sinusul numărului x • tan(x) -– returnează tangenta numărlui x • acos(x) –arccosinus, returnează unghiul în radiani • asin(x) -– arcsin, returnează unghiul în radiani • atan (x) – arctagent, returnează unghiul în radiani • floor(x) – returnează partea întreagă a numărului real x ([x]) • random( ) – returnează un număr aleator în [0,1) • round(x) – returnează cel mai apropiat întreg de argumentul x (rotunjurea lui x) • sqrt (x) – returnează radicalul numărului real x • pow (x,y) – returnează x la puterea y • exp(x) – returnează e la puterea x • log(x) – returnează logaritm în baza e din x
Tablouri si siruri Obiectul Array(Tablouri)
Un tablou are un nume si cuprinde unul sau mai multe elemente. In JavaScript, elementele sunt folosite aproape la fel ca variabilele. Fiecare element este identificat de un indice. Indicele primului element este 0, al celui de-al doilea este 1 si asa mai departe. O valoare poate fi atribuita unui element in doua moduri: plasand-o intre parantezele constructorului Array() la declararea tabloului sau utilizand operatorul de atribuire in cadrul unei instructiuni JavaScript.
Puteti determina numarul de elemente dintr-un tablou utilizand proprietatea length a obiectului tablou. Accedeti la proprietatea length specificand numele tabloului, urmat de un punct si de cuvantul length. Puteti accede la valoarea unui element specificand numale tabloului, urmat de indicele elementului, inclus intre paranteze drepte. Daca trebuie sa accedeti la toate elementele tabloului, folositi un ciclu for. Initializatorul unui ciclu for este folosit ca indice pentru elementele tabloului. Obiectul tablou are mai multe metode pe care le puteti utiliza pentru a lucra cu elementele tabloului. De exemplu, metoda sort() sorteaza elementele tabloului. Matoda slice() ia o succesiune de elemente ale tabloului si le foloseste pentru a crea un tablou nou. Metodele concat() si join() transforma elementele unui tablou in sir. Metoda shift() sterge si returneaza primul element al tabloului, iar apoi muta celelalte sarcini cu cate o pozitie mai sus pe lista. Metoda push() creeaza un nou element, pe care il adauga la sfarsitul tabloului si-i atribuie noului element valoarea pe care o includeti intre pranteze. Metoda reverse() inverseaza ordinea valorilor din tablou. Metoda pop() returneaza si sterge ultimul element al tabloului. Obiectul String (Siruri ) In acest capitol, ati invatat sa faceti minuni cu sirurile. Ati invatat sa concatenati doua siruri, pentru a alcatui un sir nou. Ati mai invatat sa extrageti o parte din sir utilizand metoda split(), metoda substring() si metoda substr(). Metoda split() imparte un sir in parti numite subsiruri, utilizand un sir de delimitare pentru a determina partile. Ambele functii substring() si substr() sunt folosite pentru a copia intr-un alt sir caractere selectate dintr-un sir. Ati vazut ca un sir este de fapt un tablou de caractere, in care fiecare caracter este un element al tabloului si este identificat de un indice. Puteti utiliza metoda charAt() pentru a copia un anumit caracter din tablou. Metoda indexOf() este utilizata pentru a determina indicele unui anumit caracter. Ati mai invatat sa determinati lungimea sirului utilizand valoarea length a obiectului sir. Si ati mai vazut cum sa puteti converti un sir intr-un anumit numar, utilizand metoda parseInt() si metoda parseFloat(), sau cum puteti converti un numar intr-un sir, utilizand metoda toString(). LecŃia a-19-a:InteracŃiune JavaScript – HTML
Legătura dintre HTML şi JavaScript poate fi sintetizată în urmatorii paşi: − Elementele HTML au atribute care caracterizează elementul respectiv. De
exemplu, elementul TABLE, are atributele: border, width, height, align,valing, cellspacing, cellpadding, bordercolor, bgcolor,rules,frame. Majoritatea elementelor HTML (excepŃie: body, head, html, base, basefont) au atributul ID, sau NAME, după care elementul poate fi identificat.
− Sintaxa elementelor HTML este <element atribut1 = valoare1 ….atribut n=valoare n) [….]</element>
În HTML nu se face distincŃie între literele mari şi cele mici când scriem atribute, de exemplu atributul border sau BORDER sau Border semnifică acelaşi lucru.
− În HTML există 18 tipuri de evenimente : onclick, onload, onunload, ondblclick, onmouseover, onmouseout, onmousemove, onmouseup, onmousedown, onfocus, onlbur, onkeypress, onkeydown, onkeyup, onselect, onchange, onsubmit, onreset. O componenta HTML poate recepŃiona enumite evenimente, de exemplu elementul button, poate recepŃiona onclick, ondblclick.
− Pentru JavaScript, elementele HTML sunt obiecte. Atributele componentelor HTML sunt în JavaScript, proprietăŃile obiectelor. În timpul afişării unei pagini web, proprietăŃile obiectelor pot fi modificate dinamic într-un script.
− O componentă HTML este o instanŃă a unui obiect. De exemplu, dacă avem într-o pagină web următorul tag:
<IMG ID=”poza” SRC=”p1.jpg”> � elementul IMG devine obiectul IMG � o componentă a obiectului IMG este “poza” � atributul src din HTML devine proprietatea src a obiectului poza.src � p1.jpg este valoarea atributului src din HTML, şi valoarea proprietăŃii src a
obiectului poza.src − În JavaScript se face distincŃie între litere mari şi mici, aşa că atributul SRC din
HTML trebuie scris ca proprietate în JavaScript cu litere mici. − Evenimentele pot fi recepŃionate de anumite componente (asa cum am mai
precizat). − Executarea unui eveniment, lansează în execuŃie o funcŃie scrisă într-un script.
Apelul funcŃiei se face în cadrul codului HTML, ca atribut al unui element HTML. De exemplu, pentru evenimentele onload (încarcarea) şi unload (descarcarea) unei pagini web, se crează două funcŃii, aşa cum reiese din exemplul de mai jos:
<HTML> <HEAD> <TITLE>Apel funcŃie din HTML</TITLE> <SCRIPT language="JavaScript"> function salutare() {alert ("Bună, sunt Ana Ionescu")} function la_revedere() {alert ("Pa, ne mai auzim la telefon")} </SCRIPT> </HEAD> <BODY onload="salutare()" onunload="la_revedere()"> </BODY> </HTML>
Formulare Puteti aduce un formular la viata utilizand JavaScript. Un formular cuprinde elemente cum ar fi butoane radio si casete de validare, utilizate pentru a strange informatii de la utilizatori. Un element poate contine unul sau mai multe atribute, cum ar fi un nume, si alte valori care pot fi modificate de instructiuni dintr-un program Java Script.
Un program JavaScript poate fi executat cand are loc un eveniment, in timp ce utilizatorul tasteaza informatii intr-un formular. Un eveniment este ceva ce utilizatorul efectueaza cu formularul, cum ar fi un clic pe un buton, selectarea unei casete de validare sau deplasarea indicatorului mouse-ului in afara unui element. In acest capitol ati invatat despre diferitele evenimente care au loc in timp ce formularul este afisat pe ecran. Identificati elementul caruia doriti sa-i raspundeti, utilizand numele evenimentului din cadrul etichetei de deschidere a elementului, care este efectualt de eveniment. Mai trebuie sa asociati numele functiei JavaScript care doriti sa fie apelata cand are loc evenimentul. Pot fi apelate doua tipuri de functii JavaScript: functii interne, definite de JavaScript cum ar fi submit() si reset(), si functii pe care le definiti de obicei in eticheta <head> a paginii. Puteti accede la orice aspect al unui element si il puteti modifica utilizand o functie JavaScript. Elemente rollover Un element rollover reprezinta o cale simpla de a va inviora pagina web pe masura ce vizitatorii la pagina dumneavoastra trec cu mouse-ul peste pagina web. De fiecare data cand indicatorul mouse-ului trece peste un obiect de pe pagina web, browser-ul semnaleaza petrecerea unui eveniment onmouseover. Un eveniment onmouseout este generat dupa aceea cand indicatorul mouse-ului se deplaseaza in afara obiectului. Puteti proiecta pagina dumneavoastra web pentru a efectua o actiune ca raspuns la aceste evenimente. Specificati actiunea care trebuie sa aiba loc atribuind cate o valoare atributelor onmouseover si onmouseout ale etichetei <img> si ale etichetei ancora. Valoarea poate fi la fel de simpla ca resetarea valorii unui alt atribut, cum ar fi atributul src al etichetei <img>, sau poate apela o functie JavaScript. O functie JavaScript poate fi definita sa efectueze una sau mai multe actiuni ca raspuns la evenimentele onmouseover si onmouseout, incluzand mai multe instructiuni JavaScript in definitia functiei. Majoritatea browserelor recunosc elemente rollover; totusi alte browsere nu le recunosc, asa ca va trebui sa testati compatibilitatea browserului cu obiectul document.images. Daca nu recunoaste acest obiect, atunci browserul nu recunoaste elemente rollover.
LecŃia a-20-a: Elemente avansate JavaScript
Pentru a face legătura între HTML, JavaScript şi CSS trebuie ştiut că:
� Elementele HTML sunt obiecte în JavaScript. Fiecărui element i se poate asocia un id cu ajutorul căruia avem acces la proprietăŃile obiectului respectiv
� În JavaScript fiecare obiect are proprietatea style cu excepŃia obiectelor:HTML, HEAD, BODY, BASE şi BASEFONT
� Proprietatea style în JavaScript este tot de tip obiect. Obiectul style are la rândul lui alte obiecte corespunzătoare atributelor de stil din CSS.
� În JavaScript se foloseşte pentru a defini un stil pentru un obiect id-ul scris cu litere mici, iar .class este folosit doar în HTML
� Numele acestor obiecte sunt: o numele atributelor corespunzătoare din CSS, dar obligatoriu scrise cu litere mici.
De exemplu: color în CSS este tot color în JavaScript
o dacă numele din CSS a unui atribut are în componenŃă caracterul “-“ (linie), atunci acesta este eliminat şi ce urmează este scris cu literă mare. De exemplu: font-size în CSS este fontSize în JavaScript
� Cu ajutorul limbajului JavaScript se pot schimba dinamic valorile proprietăŃilor (obiectelor) obiectului style
Obiectul WINDOW
Puteti deschide o noua fereastra apeland metoda window.open() din programul dumneavoastra JavaScript. Metoda window.open() determina browserul sa deschida o noua fereastra pe ecran. Nu trebuie sa-i transferati metodei window.open() vreun parametru daca doriti sa folositi parametrii si pozitia standard pentru ferestre, determinata de browser. Totusi puteti specifica dimensiunea si stilul ferestrei transferand metodei window.open() parametrii adecvati. Metoda window.open() accepta trei parametri: o referinta la continutul noii ferestre, numele noii ferestre si un sir care stabileste diferite stiluri de fereastra, printre care se numara dimensiunea si pozitia ferestrei. Pozitia ferestrei poate fi stabilita explicit, specificand coordonatele in pixeli pentru coltul din stanga sus al ferestrei. Unii programatori in JavaScript stabilesc coltul din stanga-sus al noii ferestre in raport cu rezolutia ecranului, adunand sau scazand pixeli din parametrii sceen.width si screen.height. Dupa deschiderea unei noi ferestre, puteti utiliza metoda document.write() pentru a scrie etichete HTML si text in noua fereastra, permitandu-va sa utilizati JavaScript ca sa creati continut dinamic pentru ferestre-dar numai daca ferestrele se afla in acelasi domeniu.
Obiectul DOCUMENT Obiectul document este şi el ca şi obiectul window un obiect des utilizat în JavaScript.
Despre unele metode şi proprietăŃi ale obiectului (document.write(), document.images, document.forms, etc.) s-a discutat în capitolele precedente.
În continuare se prezintă proprietăŃile principale ale obiectului document, precum şi cele mai importante metode ale sale.
Unele proprietăŃi sunt de tip obiect, aşa cum proprietatea document a obiectului window, este obiectul document.
Proprietatea all Proprietatea all este cea mai importantă proprietate a obiectului document. Este o
proprietate de tip obiect, care are la rândul ei alte proprietăŃi şi metode. Este un obiect vector al tuturor elementelor care se găsesc într-o pagină, aşa cum forms, images sunt obiecte vector al tuturor formularelor, respectiv al tuturor imaginilor dintr-o pagină.
Fiecare element al vectorului all este tot un obiect. De exemplu, elemente (obiecte) ale vectorului all sunt: HTML, HEAD, BODY, câte un element pentru fiecare imagine (IMG), paragraf (P), etc.
Cele mai importante proprietăŃi ale obiectului vector all sunt: − tagName – reŃine tipul, de exemplu IMG, P, etc. Dacă există de exemplu o imagine
într-o celulă a unui tabel se va afişa TABLE, TR, TH sau TD, IMG − length – indică numărul de elemente ale vectorului all
− id – afişează id-ul elementelor pentru care atributul id a fost definit
Metodele obiectului all[i] sunt:
− item(id) – returnează elementul cu id indicat. În exemplul de mai jos se scrie valoarea unui buton, de exemplu “Activeaza()”
− tags(tip) – returnează un vector de un tip dat. De exemplu, funcŃia de mai jos numară
elementele de tip paragraf (elementul P) dintr-o pagina şi le colorează în roşu
Proprietatea images a obiectului document
Despre această proprietate s-a vorbit şi în capitolul precedent, la secŃiunea animaŃie.
Images este vector care conŃine toate imaginile dintr-un document. Fiecărei imagini i se asociază câte un element de tablou în funcŃie de ordinea imaginilor în pagină. FuncŃia următoare afişează sursa imaginilor dintr-un document.
function imagini() {
for (i=0; i<document.images.length; i++)
alert(document.images[i].src)}
ProprietăŃi de culoare ale obiectului document
ProprietăŃile de culoare sunt mai rar folosite din cauză că este mult mai util să se
folosească stilurile. ProprietăŃile de culoare sunt pentru fond, font şi legături. Acestea sunt:
− bgColor – pentru culoarea de fond a documentului − fgColor – pentru culoarea fontului − linkColor – culoarea pentru legături (textul legăturilor) − Metoda write() – a fost prezentată în capitolul 17, având nevoie să fie folosită în
exemplificări. Amintim că ea este utilizată pentru a scrie în document şi se aplică sub forma document.write(text).
Dacă textul conŃine tag-uri HTML, sau este un fişier html, browser-ul interpretează tag-urile şi le afişează. În exemplul de mai jos scrim citeva tag-uri html astfel:
<Script language=”JavaScript”> document.write(“<A href=”http://www.edu.ro> Informatii MEC</A>) document.write(“<BR>”)
document.write(“<IMG src=flori.jpg>” </Script>