22 09 02 33JavaScript I

Pagini Web cu JavaSCRIPT
Diana Elena Diaconu
PREFA
Limbajele de programare au aprut cu scopul de a procesa informaiile prin
intermediul calculatorului. Teoria limbajelor formale, teoria gramaticilor i automatelor, au fcut posibil conceperea i realizarea compilatoarelor ce se afl la baza utilizrii efective a limbajelor de programare n activitatea de procesare a informaiilor folosind calculatorul. De asemenea, multe limbaje de programare sunt utilizate prin intermediul interpretoarelor i emulatoarelor. Spre deosebire de interpretor, un emulator nu transform codul surs ntr-un cod main, ci emuleaz execuia unui program n cadrul unei maini virtuale. De exemplu, un program surs Java (fiier text cu extensia .java) nu se transform n cod obiect, ci n cod de octei (bytecodes), salvat ntr-un fiier cu extensia .class. Codul de octei (rezultatul compilrii) generat de compilatorul Java (javac) este interpretat de maina virtual Java (JVM Java Virtual Machine), care convertete codul de octei n cod main. n prezent, pentru majoritatea tipurilor de calculatoare exist maini virtuale Java, ce pot fi descrcate gratuit de la adresa Web www.java.sun.com. De fapt, este vorba de tehnologia Java ce ofer un mediu de programare performant destinat dezvoltrii aplicaiilor Java distribuite i independente de platforme (sisteme de operare). Prin utilizarea emulatorului (maina virtual Java) o aplicaie Java se poate executa pe orice platform pentru care exist un emulator Java. Sistemele de operare (numite mai recent platforme: Windows, Unix, Linux etc.) sunt proceduri i programe ce reprezint interfaa ntre un utilizator i resursele (memorie, dispozitive) unui calculator. n fapt, procesarea informaiilor se realizeaz prin intermediul programelor scrise ntr-un limbaj de programare i care se execut prin intermediul sistemului de operare instalat pe un calculator. Complexitatea aplicaiilor de utilizare a calculatorului n diverse domenii de activitate, a determinat perfecionarea att
a sistemelor de operare, ct i a limbajelor de programare. Astfel, prin efortul comun al cercettorilor (vezi serviciul WWW, limbajul Prolog), programatorilor i inginerilor (vezi limbajele C, C++, Java), profesorilor (vezi LaTex), studenilor (vezi Linux) etc., au fost concepute i elaborate noi sisteme de operare, noi limbaje de programare, noi tehnologii. Aa se explic rezultatele obinute n domeniul reelelor de calculatoare i n dezvoltarea sistemului Internet. Dezvoltarea i rspndirea diverselor tehnologii n conceperea i elaborarea aplicaiilor destinate procesrii informaiilor, precum i utilizarea diverselor metode de comunicare a informaiilor, au determinat o revoluie n domeniul calculatoarelor cunoscut sub numele de Tehnologia informaiei si comunicaiilor. Dac n anii 70 inventarea i utilizarea microprocesorului au nsemnat o revoluie n domeniul arhitecturii calculatoarelor, n anii 90 a fost o adevrat revoluie att n domeniul reelelor de calculatoare, ct i n domeniile limbajelor de programare (Java i JavaScript) i sistemelor de operare (Linux). Astfel, au aprut tehnologiile Web. Trebuie menionate dezvoltarea i evoluia limbajului C++ care n anii 80 a implementat i dezvoltat modelul orientat spre obiecte (modelul programrii obiectuale are rdcini n limbajele SmallTalk, Lisp etc.) i programarea orientat spre obiecte (OOP-Object Oriented Programming). La nceputul anilor 90 a aprut limbajul HTML (Hypertext Markup Language) ce a determinat rspndirea paginilor Web statice i dezvoltarea exploziv a sistemului WWW (World Wide Web). Necesitatea elaborrii paginilor Web dinamice a determinat apariia diverselor tehnologii: JavaScript, JavaServer Pages (JSP), VBScript, PHP, ASP, Macromedia Dreamweaver etc., tehnologii ce unele sunt destinate pentru aplicaii server, iar altele pentru aplicaii client. Profesoara Diana Elena Diaconu a elaborat prezenta carte ca rezultat al activitii desfurate cu scopul perfecionrii n domeniul tehnologiilor Web. Lucrarea prezent este propus ca manual opional pentru Informatic. Coninutul crii este prezentat ntr-o form clar, concis i cu foarte multe exemple pentru asimilarea i testarea cunotinelor. Cartea de fa i propune descrierea tehnologiei JavaScript pentru elaborarea paginilor Web dinamice. Cartea este destinat tuturor celor care posed cunotine de nivel mediu n domeniul limbajelor de programare. De asemenea, se adreseaz n special celor care doresc s se perfecioneze n utilizarea tehnologiile Web. Elevii, studenii i cadrele didactice au prin aceast carte un instrument util n obinerea de competene n utilizarea tehnologiei JavaScript privind dezvoltarea de pagini Web dinamice. Septembrie 2006 Conf. univ. dr. Marin Vlada, Universitatea din Bucureti marinvlada@gmail.com
Pagini Web cu JavaScript
Diana Elena Diaconu 2
If I have been able to see farther than others, it was because I stood on the shoulders of giants. Isaac Newton
Introducere
Obiectivul principal al acestei cri este acela de a dezvolta la elevi deprinderea de a crea pagini Web atractive, cu coninut dinamic, avnd la dispoziie resurse limitate. Pentru a putea realiza exemplele din aceast carte, este nevoie de un editor de texte, cum ar fi Notepad i un browser, precum Internet Explorer, Mozilla Firefox, Netscape, Opera. Coninutul acestei cri poate asigura suportul pentru un program colar de o or pe sptmn, timp de 36 de sptmni. La nceputul fiecrui capitol / subcapitol sunt scrise principalele obiective pe care le-am gndit pentru predarea materialului respectiv iar la sfritul fiecrui capitol se afl cteva ntrebri cu care putem asigura evaluarea elevilor sau pe care le putem da ca tem. Capitolele crii au urmtorul coninut: Capitolul 1 cuprinde un scurt istoric al Internetului, urmat de o trecere n revist a reelelor de calculatoare. Dup o clasificare a reelelor de calculatoare n funcie de dimensiunile sale, am continuat cu analizarea celei mai extinse reele i anume Internetul. Aici am insistat asupra modalitilor de conectare la Internet i asupra celor mai importante grupri care influeneaz Internetul. Capitolul 2 este dedicat noiunilor de WWW (World Wide Web), URL (Uniform Resource Locator) i HTTP (Hypertext Transfer Protocol). Tot n acest capitol, am prezentat pe scurt cum funcioneaz paginile Web. ncepnd cu capitolul 3, am insistat mai mult pe aplicaii scurte cu ajutorul crora am prezentat cele mai importante elemente HTML. Capitolul 4 conine aplicaii ce au ca scop utilitatea stilurilor CSS ntr-o pagin Web. n capitolul 5 mi-am propus prezentarea pe scurt a limbajului de scriptare JavaScript printr-o scurt introducere, dup care am rezentat cu ajutorul exemplelor, operatorii i instruciunile JavaScript. Capitolul 6 prezint modalitatea de creare i utilizare a funciilor, att a celor definite de noi, ct i a celor predefinite. Capitolul 7 conine evenimentele i tratarea evenimentelor declanate de ctre utilizatori i interpretate cu ajutorul funciilor JavaScript. Capitolul 8 este cel mai amplu i conine pe lng obiectele JavaScript i o scurt descriere a proprietilor, metodelor i evenimentelor ce le aparin.
Capitolul 1.
Internet
Obiective: - dezvoltarea capacitii de a nelege transformrile prin
care a trecut Internetul.
- manifestarea unor atitudini favorabile fa de cunoatere
1.1. Scurt istoric
i de tiin n general.
Internetul a aprut ca o necesitate a oamenilor de a comunica la distane mari. Printre primele ncercri ale oamenilor de a comunica cu ajutorul aparatelor ar putea fi considerat telegraful, inventat n 1840. Telegraful a fost primul instrument care a utilizat cablul pentru a transmite semnale pe distane mari. n 1962 au aprut primele discuii despre conceptul de Reea galactic n care se imagina un set de computere interconectate prin intermediul crora oricine putea avea acces rapid la datele i programele celorlali. n esen, acest concept este foarte asemntor cu Internetul de astzi. Pentru a explora acest concept, n 1965 a fost creat experimental, prima reea prin linie telefonic de vitez mic (dial-up), crend astfel prima reea de computere, dispus pe o suprafa ntins. n 1968 DARPA (Defense Advanced Research Projects Agency) mpreun cu BBN (Bolt, Beranek & Newman) au dezvoltat conceptul, realiznd prima reea de computere, numit ARPAnet. ARPAnet a fost o reea naional, construit la nivelul Statelor Unite ce se baza pe schimbul de pachete de date. IMPs (Interface Message Processors) reprezint interfaa unui sistem independent care poate fi utilizat de orice computer din reeaua ARPAnet. O parte din software-ul pentru reeaua ARPAnet se afl n IMPs i o parte n host. La nceput, n reea, mesajele se transmiteau de la host la host, host-urile avnd drepturi egale i se utiliza o linie telefonic de 56 kbps. Dezvoltnd teoria schimbului de pachete ntre dou host-uri, ARPA (Advanced Research Projects Agency - Agenia pentru Proiecte de Cercetare Avansat) a decis ca n 1969 U.C.L.A. (University of California Los Angeles) s devin primul nod de reea. De acum se puteau conecta cercettorii i centrele de cercetare implicate, utiliznd IMPs. Al doilea nod a fost creat la Stanford Research Institute (S.R.I.) i includea funcii cum ar fi meninerea unor tabele cu numele host-urilor pentru a realiza o mai bun adresare. Prima legtur ARPAnet a fost stabilit pe 21.11.1969 ntre U.C.L.A. i S.R.I. n 1970, au urmat nc dou noduri la University of California Santa Barbara i University of Utah. Aceste noduri au declanat de fapt apariia Internetului.
Obiective: - dezvoltarea capacitii de a nelege conceptul de reea
1.2. Reea de calculatoare

Definiie
de calculatoare - contientizarea diferenelor dintre o reea de calculatoare i Internet.
O reea de calculatoare reprezint un ansamblu de calculatoare autonome, interconectate, ce folosesc o singur tehnologie pentru a putea realiza un schimb de date i a folosi n comun resursele. ntr-o reea, calculatoarele pot fi conectate prin cablu de cupru, fibr optic, radiaii infraroii, microunde sau satelii de comunicaii. Datorit distanei dintre dou sau mai multe computere conectate, reelele au fost clasificate iniial n: reele locale i reele extinse. Progresul tehnologiei i al echipamentelor de reea, a dus ulterior, la o clasificare mai detaliat a reelelor n funcie de dimensiunile sale i anume: reea de birou Desk Area Network DAN n care fiecare component a computerului aflat pe birou, cum ar fi: ecranul monitorului, unitile de CD-ROM, CD-Writer, DVDROM, DVD-Writer, Combo Drive, dispozitivele periferice precum: WebCam, imprimanta, scanner-ul, pot fi accesibile din reea. O reea de felul acesta se realizeaz pentru a avea acces la toate resursele ce pot fi solicitate de o aplicaie de reea. reea personal Home Phoneline Networking Alliance HPNA utilizeaz o tehnologie relativ nou ce permite construirea unei reele private, utiliznd firul de telefon existent. Accesul la Internet se realizeaz printr-un singur computer, ce permite conectarea la Internet i a altor computere fr a fi necesar un router. reea local Local Area Network LAN se extinde pe o suprafa mai mic de 1 Kilometru i poate fi compus din: computere, plci de reea, dispozitive periferice, dispozitive de reea, dispozitive media. Reelele locale permit partajarea eficient att a resurselor software ct i a celor hardware. reea metropolitan Metropolitan Area Network MAN se poate ntinde pe suprafaa unui ora, putndu-se extinde pe o suprafa de zeci de kilometri. reea extins Wide Area Network WAN se extinde pe o suprafa geografic mare (mai mare dect MAN) i realizeaz interconectarea LAN-urilor. WAN-urile permit partajarea resurselor pe distane foarte mari, stabilirea comunicaiilor n timp real, permit servicii de pot electronic (e-mail), comer electronic (e-commerce), transfer de fiiere (file transfer). Internetul nu reprezint o singur reea de calculatoare, ci o reea de reele rspndite pe tot globul. tim c ntr-o reea, calculatoarele folosesc o singur tehnologie pentru a comunica ntre ele. Daca ns avem de-a face cu dou sau mai multe reele care utilizeaz tehnologii diferite, de cele mai multe ori incompatibile, atunci comunicarea ntre calculatoarele acestor reele se poate realiza cu ajutorul aa numitor gateways (pori). Un gateway (poart) este un calculator cu ajutorul cruia se poate realiza conectarea ntre dou sau mai multe reele de calculatoare i asigur conversiile necesare att n termeni de hardware ct i de software. Astfel de reele interconectate formeaz o inter-reea sau internet. O alt tehnologie realizat n scopul conectrii computerelor ntr-o reea de mare vitez, poart numele de ATM Asynchronous Transfer Mode Mod de Transfer Asincron. ATM este o reea cu comutaie de pachete orientat pe conexiune ce permite o rat de transfer a datelor mai mare dect tehnologia Internet i poate funciona indiferent de mediul fizic. Dezavantajul acestei tehnologii este costul mai mare dect al tehnologiei Internet.
Obiective: - dezvoltarea capacitii de a nelege conceptul de reea
1.3. Ce este Internetul

Definiie
de calculatoare - contientizarea diferenelor dintre o reea de calculatoare i Internet.
Internet-ul este o reea de reele extins pe tot globul, alturnd multe guverne, universiti, calculatoare personale i furniznd o infrastructur pentru utilizarea documentelor de tip hipertext, serviciilor de e-mail, transfer de fiiere i alte resurse computaionale. Aceast vast reea de reele de computere, acioneaz ca o singur i uria reea pentru a transporta date i mesaje din orice col al lumii, de-a lungul unor distane mari. Internetul a revoluionat lumea prin posibilitile de comunicare i diseminare a informaiilor, ca mediu pentru colaborare i interaciune ntre computere individuale indiferent de poziia geografic. Caracteristici: Cea mai mare reea din lume; Utilizeaz protocoalele TCP/IP i schimbul de pachete; Ruleaz n orice substrat de comunicare. Cum te poi conecta la Internet? Pentru a avea acces la aceast vast reea de reele i la resursele de care dispune, utilizatorii trebuie s apeleze la un furnizor de servicii Internet (Internet Service Provider ISP), numit i provider Internet. Un ISP este o organizaie sau o firm ce poate oferi utilizatorilor acces la Internet i la alte servicii nrudite cum ar fi: Internet transit, nregistrare pentru nume de domeniu, Web hosting, conexiune prin dial-up, acces prin linie nchiriat (leased line) i colocaie. Internet transit furnizeaz o conexiune dedicat la Internet ce permite o rat foarte mare de transfer a datelor. Acest tip de conexiune se utilizeaz atunci cnd se creaz o reea privat ce conine mai multe computere i toat reeaua utilizeaz aceeai conexiune la Internet. Nume de domeniu sau Domain Name System (DNS) permite clienilor i gazdelor Internet s se adreseze unii celorlali utiliznd nume n loc de adres IP. Exemple de nume de domeniu: www.yahoo.com, www.einformatica.ro. Exemple de adrese IP: 193.226.18.252, 68.142.226.32. O adres IP reprezint adresa de identificare n reeaua Internet, a unui computer sau dispozitiv. Protocolul de baz din Internet care stabilete modalitatea n care se realizeaz transferul datelor ntre dou sau mai multe computere este IP sau Internet Protocol. n momentul de fa se utilizeaz versiunea 4 pentru protocolul Internet, numit i IPv4. O adres IPv4 o putem scrie ca patru grupe de numere n baza 10 ntre 0 i 255 desprite prin puncte sau patru grupe de numere n baza 2, de la 0.0.0.0 pn la 11111111.11111111.11111111.11111111. Numrul total de adrese IPv4 diferite este de 232. Datorit dezvoltrii rapide a Internetului, cererea de adrese IP unice este deosebit de mare, fapt ce poate duce la epuizarea adreselor IP unice existente. Pentru a rezolva diferena dintre cererea i oferta de adrese IP, n prezent se dezvolt i se mbuntete o nou versiune a protocolului Internet, numit IPv6. IPv6 permite o adresare pe 128 bii fa de 32 de bii la IPv4 i poate furniza un numr de cel puin 3,4*1038 adrese IP unice. Web hosting sau gzduire Web presupune furnizarea de ctre un ISP a tuturor resurselor hardware i software de care este nevoie pentru oferirea serviciului de gzduire a unui site Web sau a unor informaii n format electronic i asigurarea conexiunii acestuia la Pagini Web cu JavaScript Diana Elena Diaconu 7
Internet. Web hosts pot furniza spaiu pe server-ul sau server-ele sale i conexiune la Internet pentru servere. Odat gzduite, fiierele vor putea fi accesate prin Web. Conexiunea prin dial-up reprezint conexiunea la Internet printr-o linie telefonic existent. Modem-ul este un dispozitiv ce realizeaz modelarea i demodelarea semnalului, adic transformarea semnalului digital utilizat de ctre computer n semnal analog ce se transmite prin linia telefonic i invers. Sistemul de telefonie lucreaz cu impulsuri de curent continuu care variaz n frecven i putere, iar computerul lucreaz cu date n format digital adic 0 sau 1. Linie nchiriat sau dedicat - leased line - reprezint o linie telefonic ce asigur o conexiune permanent ntre dou locaii. Plata pentru linia nchiriat se face n rate lunare fixe, nu n funcie de apelurile efectuate, ca n cazul conexiunii prin dial-up. Colocaie reprezint nchirierea unui spaiu special amenajat, pentru funcionarea n condiii optime a propriului echipament (server Web...) care este conectat la Internet. Cine influeneaz Internetul? Multe grupuri influeneaz dezvoltarea Internetului, ajutnd la stabilirea unor standarde i educnd oamenii s-l utilizeze ct mai corect. Printre cele mai importante grupri se numr: Internet Society (ISOC) o societate internaional non-profit ce se ocup cu promovarea i dezvoltarea Internetului. Pentru mai multe informaii, putei apela la varianta electronic: http://www.isoc.org Internet Engineering Task Force (IETF) o comunitate internaional deschis de operatori, proiectani de reele, cercettori preocupai de evoluia arhitecturii i protocoalele TCP/IP ale Internetului (http://www.ietf.org). n concluzie, sunt interesai ca Internetul s funcioneze mai bine. World Wide Web Consortium (W3C) consoriu internaional ce perfecioneaz standardele Web pentru evoluia prii Internetului care se dezvolt cel mai rapid: World Wide Web (http://www.w3.org). W3C este interesat ca Web s funcioneze la ntregul potenial.
Evaluare
1. 2. 3. 4. 5. 6. Cum se numete prima reea de calculatoare i cnd a fost ea creat? Care este diferena dintre o reea de calculatoare i Internet? Cum se realizeaz conectarea ntre computerele dintr-o reea? Ce este Internetul? Cte noduri avea prima reea de calculatoare? Ce este un ISP i ce servicii poate oferi?
Rspundei prin alegerea variantei sau a variantelor corecte: 7. O adres IPv4 o putem scrie sub forma: a) 265.23.12.0; b) 127.0.0.0; c) 0.0.14.230.22; d) 192.168.12.13; 8. Cine controleaz Internetul? a) U.S.A.; b) Uniunea European; c) Internet Society; d) nimeni
Capitolul 2.
W.W.W.
Obiective:
- s neleag noiunile de WWW, URL i HTTP - s neleag paii care se parcurg pentru a se afia o pagin Web.
2.1. World Wide Web

Dezvoltarea rapid a Internetului duce la dezvoltarea celei mai utilizate laturi ale ei i anume: World Wide Web-ul. Definiie WWW (World Wide Web) reprezint o reea care utilizeaz protocolul HTTP n scopul de a stabili legturi ntre documente aflate n diverse puncte din Internet. n acelai timp este utilizat ca resurs pentru servicii, informaii, publicaii electronice. Web-ul funcioneaz dup modelul client-server. Pe server ruleaz o aplicaie ce conine site-uri Web i permite utilizatorilor client s le acceseze cu ajutorul unor aplicaii, numite browser-e ce se afl pe computerul client. Legtura dintre aplicaia client i aplicaia server se poate realiza numai dup ce pe ambele computere se realizeaz o conexiune la Internet. Server-ul ce are ca rol posibilitatea de accesare on-line a site-urilor Web este cunoscut sub numele de server Web. Cerere Internet Navigator Web Server Web Rspuns Intranet Figura 1. n Figura 1. putem vedea care sunt paii ce se fac pentru a fi afiat o pagin Web i anume: o utilizatorul scrie n bara de adrese a navigatorului (browser Web) numele site-ului, de exemplu: http://www.yahoo.com o navigatorul Web face o cerere ctre Internet o ruterele Internetului examineaz cererea pentru a determina crui server s-i fie transmis o ruterele transmit cererea ctre server-ul Web al crui nume se afl imediat n dreapta expresiei http:// o server-ul Web accept URL-ul i decide dac i ce anume va returna ca rspuns ctre browser o server-ul interpreteaz, execut fiierul cerut i l trimite ctre browser-ul Web, posibil modificat sau generat. o browser-ul Web primete fiierul i l afieaz pentru a putea fi vzut de ctre utilizator Actualul preedinte al World Wide Web Consortium, Tim Berners-Lee, a inventat WWW n 1989, iar n 1990 a scris primul browser. Ce este URL?
U.R.L. sau Uniform Resource Locator este o adres Web. Ea este compus din patru pri: numele protocolului (Ex: HTTP, scriem http://), locaia site-ului (Ex: WWW), numele organizaiei care ine site-ul (Ex: yahoo), sufixul care identific tipul organizaiei (Ex: .com). Pentru exemplul dat, introducem adresa: http://www.yahoo.com
Dar HTTP? H.T.T.P. sau Hypertext Transfer Protocol (Protocol de Transfer Hipertext) este un protocol Internet care definete modul n care comunic browser-ele Web i serverele i modalitatea de transferare a documentelor HTML. Pagini Web cu JavaScript Diana Elena Diaconu 9
Obiective:
- s neleag noiunile de hipertext i hipermedia - s neleag conceptul de pagin Web.
2.2. Cum funcioneaz paginile Web

Cele mai fascinante lucruri pe care un utilizator Internet le descoper sunt paginile Web care conin text, imagini, sunet, animaii i alte elemente multimedia cu care interacioneaz. Pentru a trece de la o pagin la alta, se utilizeaz legturi de tip hipertext sau hipermedia. Ca s nelegem mai bine succesul conceptului de hipertext, ne imaginm care este diferena dintre un text scris liniar, ca o carte i un text cu diferite legturi care ne trimit la alte pagini. Informaia scris ntr-un text liniar necesit parcurgere integral a textului pentru a ajunge acolo unde dorim, pe cnd n textul cu legturi putem accesa legturile care ne intereseaz pentru a ajunge mai rapid la informaia de care avem nevoie. Aceast variant este mult mai apropiat de gndirea uman, unde informaia se acumuleaz, iar atunci cnd ntlnim noi informaii, pentru a le reine mai uor le asociem cu cele deja existente. Aadar, hipertextul nu face dect s creeze legturi ntre mai multe pagini Web pe o poriune de tip text. Hipermedia este un termen mai nou ce a aprut ca urmare a dezvoltrii noilor tehnologii i a posibilitii de a crea legturi prin fiiere ce conin: animaie, sunet, film, imagine. Hipertextul i hipermedia ofer posibilitatea stocrii unei mari cantiti de informaie, iar utilizatorului i ofer posibilitatea parcurgerii documentului respectiv n ce ordine dorete, dndui senzaia de navigare ntr-un spaiu virtual. De aici vine i sintagma: a naviga pe Internet. Paginile Web au fost construite iniial cu ajutorul unui limbaj de marcare a hipertextelor, numit HTML (Hypertext Markup Language). Acesta conine comenzi care-i transmit browser-ului s afieze text, imagini, fiiere multimedia i legturi cu alte pagini Web. Mai multe pagini Web conectate ntre ele prin legturi de tip hipertext sau hipermedia, ce au un subiect comun, formeaz un site Web. Orice site Web are o prim pagin, care se numete de regul home page i se salveaz cu numele index.html sau index.htm. Aceast prim pagin este ca o copert de carte ce trebuie s ne atrag i s ne sugereze ce se afl n interior. Un site bun este acela n care informaiile sunt uor de gsit i accesat, coninnd legturi ctre celelalte pagini ale site-ului printr-un meniu, iar din toate paginile exist o legtur ctre prima pagin. Cnd construim design-ul unui site Web, trebuie s ncercm s crem ceva unic, cu structura i combinaia nuanelor de culori adaptat coninutului. Structura unui site Web este de obicei organizat ntr-una din cele trei moduri: o Liniar. Organizarea liniar a informaiilor presupune scrierea lor ntr-o anumit ordine stabilit de ctre autor, ca ntr-un roman. Parcurgerea informaiilor se face n totalitate, de la nceput pn la sfrit. o Arborescent. Acest mod de organizare presupune structurarea informaiilor i organizarea lor ntr-o anumit ordine pe niveluri sau capitole. Pentru a putea ajunge la o anumit informaie nu va fi necesar parcurgerea n ntregime a coninutului, ci doar a ramurii respective a arborelui sau a capitolului. Aranjarea informaiilor se face de la modul general la detaliu, n funcie de parcurgerea arborelui. o Aleatoare. Organizarea aleatoare seamn cu gndirea uman, n care se poate ajunge de la o informaie la alta aparent aleator, nestructurat, ca ntr-o pnz de pianjen. De la acest mod de aranjare a informaiilor vine numele Web, care n traducere liber este pnz de pianjen. Organizarea aleatoare a informaiilor ntr-un site se aseamn cumva cu gndirea uman asociativ pentru care orice nou informaie se leag de o alta existent deja prin asociere de idei. Site-ul construit dup o structur aleatoare, nu conine un meniu i nici nu are informaiile structurate n capitole, dar l putem parcurge trecnd de la o pagin la alta n momentul n care considerm c legturile care ni se ofer, sunt demne de interes. Pagini Web cu JavaScript Diana Elena Diaconu 10
Obiective:
- s neleag cum ar trebui construit un site Web i de ce; - s poat realiza i publica un site Web.
2.3. Construirea site-urilor Web

Pentru a construi un site Web, primul pas este realizarea paginii de nceput, la care legm celelalte pagini ale site-ului. Legturile dintre pagini este bine s fie realizate printr-un meniu, astfel nct din orice pagin a site-ului s putem ajunge la pagina de nceput. Legturile dintre pagini ar trebui s fie realizate n aa fel nct s nu fim nevoii s apelm la butoanele Back i Forward ale browser-ului. Un alt aspect pe care ar trebui s-l lum n calcul este aspectul paginilor care ar trebui s fie foarte asemntor, n care s utilizm aceleai fonturi pentru text, aceleai culori pentru fundal i text, acelai meniu. Pentru formatarea eficient a paginilor unui site, cea mai potrivit modalitate este utilizarea stilurilor, despre care o s discutm n detaliu ntr-un capitol viitor. Cum construim rapid un site? Primul lucru care ar trebui s-l tim este tema site-ului. Dup ce am luat aceast decizie, adunm documentaia de care avem nevoie i imaginile pe care dorim s le prezentm. nainte de introducerea imaginilor n site, acestea trebuie prelucrate cu ajutorul unor editoare de imagini. Cel mai indicat este ca imaginile pe care dorim s le prezentm s le prelucrm n aa fel nct s avem o imagine de dimensiune mic, care se va ncrca foarte uor de pe Internet i o imagine de dimensiuni mai mari, care s fie ncrcat numai dac utilizatorul dorete acest lucru. Efectul acesta se poate realiza dac utilizatorul d click pe imagine, imaginea de dimensiuni mari deschizndu-se ntr-o fereastr nou. O alt modalitate de a introduce o imagine pe o pagin Web, fr ca timpul de ncrcare a ei s supere utilizatorii este tierea imaginii n mai multe buci, fiecare bucat reprezentnd un fiier. n felul acesta imaginea final se va ncrca mai repede. Unele dintre cele mai utilizate programe de editare i prelucrare de imagini sunt: Corel Photo Paint, Image Editor, Photoshop, IrfanView. Dup prelucrarea imaginilor i culegerea textului, putem utiliza un editor de pagini web, n care s aranjm toate elementele aa cum dorim noi. Editoare de pagini Web sunt: Macromedia Dreamweaver, FrontPage. Odat terminat un site, acesta ar trebui s fie verificat cu mai multe browsere, dintre cele mai utilizate, cum ar fi: Internet Explorer, Mozilla Firefox, Netscape, Opera. O alt verificare pe care ar trebui s o realizm este dac pagina realizat de noi se vede bine la rezoluii diferite ale computerului. Cele mai utilizate rezoluii sunt: 800x600 i 1024x768. S presupunem c site-ul este terminat i verificat i dorim s-l poat vedea oricine din Internet. Pentru aceasta avem nevoie n primul rnd de spaiu pe un server Web. Se poate procura spaiu (Web Hosting) gratuit de la diveri furnizori (providers) sau contra cost. O simpl cutare pe Internet ne poate aduce toate informaiile de care avem nevoie. Urmtorul pas este transferarea fiierelor site-ului nostru de pe propriul computer, pe serverul Web al unui ISP cu ajutorul unui program FTP. Toi aceti pai i putem face pentru a realiza foarte rapid un site simplu. Dac ns dorim ca site-ul nostru s fie foarte bine realizat, ar trebui s tim ceea ce se afl n spatele unei pagini Web i de ce se afl acolo.
Evaluare
1. Ce dimensiune ar trebui s aib o imagine dintr-o pagin Web i de ce? 2. Construii un site personal i publicai-l pe Internet.
Capitolul 3.
HTML
3.1. Introducere
Obiective:
- s neleag noiunile de HTML, SGML, XHTML, XML, DTT
Primul pas realizat de ctre cercettori pentru a transmite mai multe informaii n reea, ctre oricine dorete s le cunoasc, a fost realizarea paginilor Web, construite cu ajutorul limbajului HTML. O pagin Web scris cu HTML are extensia .htm sau .html. De la prima versiune HTML, care dateaz din 1992 pn acum, adic HTML 4.01, acest limbaj a suferit multe mbuntiri, cum ar fi: internaionalizarea limbajului, utilizarea indiferent de platform, printarea, permiterea scripturilor, a stilurilor precum CSS, a obiectelor i nu n ultimul rnd corectarea erorilor. Ce este HTML? HTML HyperText Markup Language este un limbaj de marcare utilizat pentru crearea documentelor care conin text, grafic, tabele, liste, imagini, sunete, secvene video i legturi ctre alte documente prin World Wide Web. Browser-ele precum: Internet Explorer, Mozilla Firefox, Netscape, Opera interpreteaz fiierele scrise cu HTML i le afieaz. Afiarea aceleiai pagini difer puin n funcie de varianta browser-ului. Pentru ca rezultatul s fie ct mai asemntor, indiferent de browser, trebuie s utilizm etichetele standard HTML, adic formatul SGML. HTML este o aplicaie SGML. Ce este SGML? SGML Standard Generalised Mark-up Language este un sistem ce definete limbajele de marcare. HTML este un exemplu de limbaj de marcare. Limbajele de marcare, ca i cerinele utilizatorilor i a Web-design-erilor au evoluat. Istoria computerelor ne spune c tot ceea ce nu a reuit s se dezvolte i s se adapteze noilor cerine, a fost uitat i a disprut. n ncercarea de a pstra HTML-ul, dezvoltatorii lui ncearc s-l transforme ntr-un limbaj de marcare bazat pe XML, modularizndu-l. Toate aceste transformri se fac n ideea de a face mai uoar combinarea lui cu alte limbaje de marcare, de a corecta problemele de accesibilitate, prelucrare a formularelor, internaionalizare care se cunosc deja. Un limbaj n plin dezvoltare, care corespunde standardelor XML este XHTML. Ce este XHTML? XHTML The Extensible HyperText Markup Language este o familie de tipuri de documente i module actuale sau viitoare care reproduc HTML. Tipurile de documente din familia XHTML se bazeaz pe XML. Ce este XML? XML The Extensible Markup Language reprezint un limbaj de marcare extins ce permite crearea unor documente compatibile cu SGML ce pot fi utilizate n Internet i suport o varietate de aplicaii. El a fost conceput pentru a avea puterea i flexibilitatea SGML fr complexitatea lui. Un document care este strict conform cu XHTML este un document XML ce ndeplinete criteriile unui DTD. Ce este DTD? DTD Document Type Definition - reprezint o colecie de declaraii de marcare XML ce definete o structur de elemente i atribute pentru a fi utilizate ntr-un document. Pagini Web cu JavaScript Diana Elena Diaconu 12
Obiective:
- s neleag diferenele dintre tipurile de documente HTML; - s poat utiliza noiunile prezentate pentru a realiza o pagin Web
3.2. Cum se realizeaz o pagin Web cu HTML

Pentru crearea paginilor Web, limbajul HTML conine etichete (tag) care sunt ncadrate de < i >. Etichetele permit definirea elementelor importante dintr-o pagin Web i anume: antet, corp al paginii, paragrafe, liste, tabele, legturi. Att etichetele ct i atributele lor sunt case-insensitive, adic pot fi scrise att cu litere mari ct i cu litere mici. Avnd n vedere faptul c noua generaie de HTML, adic XHTML solicit ca etichetele s fie lower-case este bine s ne formm deprinderea de a scrie aa, adic cu litere mici. nainte de a ncepe s scriem codul surs al unei pagini Web, trebuie s spunem browser-ului ce specificaii utilizm: HTML sau XHTML. Cu HTML putem avea trei tipuri de documente: Strict, Transitional i Frameset. o HTML Strict DTD se utilizeaz atunci cnd dorim s curm marcajele, mpreun cu CSS (Cascading Style Sheets). Exemplu <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> o HTML Transitional DTD se utilizeaz n special pentru utilizatorii ce nu au browsere ce suport CSS i include atribute i elemente prezentaionale pe care ar trebui s le scriem n stiluri separate. Exemplu <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd o HTML Frameset DTD se utilizeaz n documentele cu cadre (frame). Acesta este identic cu HTML Transitional DTD cu excepia faptului c elementul FRAMESET nlocuiete elementul BODY. Exemplu <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd OBS n aceast carte voi prezenta elementele importante ale limbajului HTML fr s insist asupra atributelor care sunt n contradicie cu HTML 4.01 sau nu sunt suportate de XHTML 1.0 Strict DTD. Scopul acestei cri este de a iniia cititorii n acest domeniu. Pentru mai multe detalii cu privire la recomandrile W3C, vizitai: http://www.w3.org/TR/html4. SFAT Putei s verificai dac o pagin Web este valid W3C, la adresa: http://validator.w3.org/ Etichetele ntre care se ncadreaz o pagin Web sunt <html> i </html>. Este important de reinut faptul c etichetele pe care le deschidem trebuie s le i nchidem. Primii pai pentru realizarea unei pagini Web sunt: o se scrie codul surs al paginii Web cu ajutorul unui editor de texte, cum ar fi Notepad; o se salveaz documentul cu extensia .htm sau .html; o se deschide fiierul cu extensia .htm sau .html pentru a putea vedea cum interpreteaz browser-ul codul surs HTML. OBS Salvai toate documentele cu care lucrai la realizarea unui site ntr-un singur folder. De exemplu, pentru un site avei nevoie de mai multe pagini cu extensia .htm sau .html, imagini, fiiere multimedia. Structura unei pagini Web este format din: Antetul documentului conine informaii despre titlul documentului precum i informaii legate de coninut, cum ar fi: cuvinte cheie, numele autorului sau autorilor paginii Web. Antetul se ncadreaz ntre etichetele <head> i </head>, i poate conine titlul Pagini Web cu JavaScript Diana Elena Diaconu 13
documentului, ntre etichetele <title> i </title>. Titlul documentului va aprea afiat n bara de sus a browser-ului. Corpul documentului este partea n care browser-ul afieaz coninutul paginii Web. Etichetele ntre care se ncadreaz corpul documentului sunt <body> i </body>. Dac pagina noastr unete mai multe pagini n cadre (frame), atunci n loc de <body> se utilizeaz elementul <frameset>. Exemplu de pagin Web scris cu HTML.
<html> <head> <title>Titlul paginii Web </title>  </head> <body> Corpul paginii Web. </body></html>
Comentariile se introduc ntre etichetele <!- -i -- > i pot ocupa o linie sau mai multe. Deoarece caracterele < i > se utilizeaz pentru etichete, introducerea lor ntr-o pagin Web necesit utilizarea unor coduri speciale, cum ar fi: o < reprezint semnul < o > reprezint semnul > o & reprezint semnul & o " reprezint semnul Alte etichete utile ar fi: <br> (break) pentru a trece la linia urmtoare, <b> pentru a scrie textul ngroat, <i> nclinat i <u> subliniat. Etichetele se pot utiliza i mpreun, de exemplu pentru a avea un text ngroat i nclinat. Exemplu de pagin Web scris cu coduri HTML.
<html> <head><title>Coduri</title></head> <body> <b>Coduri pentru semnele:</b><br /><br/> <u>& l t ;</u> <i>reprezinta semnul</i><<br /> <u>& g t ;</u> reprezinta semnul ><br /> <b><u><i>& a m p ;</i></u></b> reprezinta semnul &<br /> <i><u>& q u o t ;</u></i> reprezinta semnul " </body> </html>
Dup cum vedem n exemplul de mai sus, etichetele se pot utiliza cte una sau mpreun.
3.3. Elementul Meta

Limbajul HTML permite autorilor s specifice informaii cu privire la coninutul documentului, autor. Atributele elementului Meta: name= specific proprietatea nume content= valoarea coninutului scheme= schema ce va fi folosit pentru a interpreta valoarea proprietii. Valoarea atributului scheme depinde de proprietatea nume. http-equiv= atribut ce poate fi folosit n locul atributului name. lang= specific limba; Pagini Web cu JavaScript Diana Elena Diaconu 14
Exemplu
<html> <head> <META name=Author lang =ro content=Diana Diaconu> <!- -Pentru un site cu jucarii --> <META name=keywords lang=ro content=joc, ursulet, puzzle, calut> <!- - Pentru a specifica tipul continutului --> <META http-equiv=Content-Type content=text/html> <!- - Pentru a specifica data crearii site-ului -> <META name=date content=2006-0101T09:34:25+00:00> <title>Elementul Meta</title> </head> <body> Nu apare afisat elementul Meta. </body></html>
3.4. Culori
Paginile Web implicit au culoarea alb pentru fundal i negru pentru text. Aceste culori se pot schimba, dac tim numele culorii n limba englez sau codul culorii n hexazecimal. n continuare avem un tabel cu cele mai importante culori. Trebuie reinut faptul c putem avea foarte multe nuane de culori, plecnd de la culorile de baz, deoarece o culoare o putem scrie ca fiind un numr n hexazecimal de la #000000 pn la #FFFFFF. Culoare Echivalent nume
Negru Argintiu Gri Alb Maron Rou Violet Siclam Black Silver Gray White Maroon Red Purple Fuchsia
Echivalent nr. hexazecimal

#000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF
Culoare
Verde Verde deschis Msliniu Galben Albastru nchis Albastru Albastru marin Albastru deschis
Echivalent nume
Green Lime Olive Yellow Navy Blue Teal Aqua
Echivalent nr. hexazecimal

#008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF
Culorile pe care le putem alege sunt de fapt combinaii ale culorilor de baz: rou (Red), verde (Green) i albastru (Blue). S facem un mic experiment! Haidei s ncercm s ajungem la culoarea ciocolatei (chocolate). Cum vom face asta? Lum mai mult rou (D2) pentru c este o culoare puternic, adugm verde, dar nu prea mult (69) i foarte puin albastru, pentru c este o culoare rece (1E). La ce rezultat ajungem? D2691E, adic valoarea RGB #D2691E. ncercai aceast combinaie de culori s vedei dac v place (culoarea, nu ciocolata ).
3.5. Elementul BODY

Culorile dintr-o pagin web pot fi stabilite prin atributele elementului body i anume: backgound = atribuie o imagine de fundal pentru browser-ele vizuale; bgcolor = atribuie o culoare fundalului paginii Web; text = atribuie o culoare textului paginii Web; link= atribuie o culoare legturilor de tip hipertext nevizitate vlink= atribuie o culoare legturilor de tip hipertext vizitate alink= atribuie o culoare legturilor de tip hipertext selectate de ctre utilizator Pagini Web cu JavaScript Diana Elena Diaconu 15
Exemplu
<html> <head><title>Elementul body</title></head> <body bgcolor=#EEEEEE text="blue" link=#008000 alink=#00FF00 vlink=#808000> Vizitati portalul profesorului modern:<br /> <a href="http://www.didactic.ro">didactic.ro</a> </body> </html>
OBS Cu toate c funcioneaz foarte bine, acest mod de a atribui culori elementului body, nu este de preferat deoarece n browser-ele audio se specific inutil toate aceste atribute. Modalitatea cea mai bun este de a crea un stil propriu fiecrei formatri, aa cum vom vedea n exemplul urmtor. Exemplu
<html> <head><title>Stil</title> <style type="text/css"> body {background:#EEEEEE;color: blue} A:link{color=#008000} A:visited{color:#808000} A:active{color:#00FF00} </style></head> <body> Vizitati portalul profesorului modern:<br /> <a href="http://www.didactic.ro">didactic.ro</a> </body></html>
Acelai exemplu se poate scrie i cu stilul salvat ntr-un fiier separat de documentul .html, ca n tabelul urmtor. Aceast modalitate de lucru cu stiluri este mai uor de modificat i are ca avantaj faptul c putem utiliza acelai stil pentru mai multe pagini dintr-un site Web. ex_stil_1.css fisier.html
body {background:#EEEEEE;color: blue} A:link{color=#008000} A:visited{color:#808000} A:active{color:#00FF00} <html> <head><title>Stil</title> <link rel="stylesheet" type="text/css" href="ex_stil_1.css"> </head> <body> Vizitati portalul profesorului modern:<br /> <a href="http://www.didactic.ro">didactic.ro </a> </body></html>
3.6. Formatarea textelor

Etichetele pentru formatarea textelor sunt: Etichet Descriere <b> text ngroat <big> crete dimensiunea textului <em> accentueaz textul <i> text nclinat <small> scade dimensiunea textului <strong> text mai mare i ngroat <sub> text subscript <sup> text superscript Pagini Web cu JavaScript Diana Elena Diaconu 16
Exemplu n exemplul urmtor putem vedea interpretarea browser-ului pentru toate modalitile de formatare a textului din tabelul de mai sus.
<html> <head><title>Formatarea textului</title> </head> <body> Formatarea textului<br><br /> b - <b>ingroasa textul</b><br /> big- <big>creste dimensiunea textului</big><br /> em - <em>accentueaza textul</em><br /> i -<i>text inclinat</i><br /> small-<small>scade dimensiunea textului</small><br /> strong <strong>text mai mare si ngrosat</strong><br /> sub H<sub>2</sub>O <sub>text subscript</sub><br /> sup 4=2<sup>2</sup> <sup>text superscript</sup> </body> </html>
Alte etichete pentru formatare mai sunt: <cite></cite> care conin un citat sau o referire la alt surs, dup cum se vede n exemplul urmtor: Exemplu
<html> <head><title>citat</title></head> <body> <cite>Isaac Newton</cite> a spus:<br> If I have been able to see farther than others,<br> it was because I stood on the shoulders of giants.<br> </body> </html>
Etichetele <abbr> i <acronym> permit autorului s indice abrevierile i acronimele i se utilizeaz cu atributele: title care specific ce reprezint abrevierea respectiv i lang care ne indic limba utilizat. Exemplu
<html> <head><title>abreviere si acronim</title></head> <body> <abbr lang="ro" title="World Wide Web">WWW</abbr> reprezinta o retea care utilizeaza protocolul <abbr lang="ro" title="Hypertext Transfer Protocol"> HTTP</abbr> in scopul de a stabili legaturi intre documente aflate n diverse puncte din Internet.<br> </body> </html>
Pentru citate se mai utilizeaz i etichetele <blockquote> i <q>, cu deosebirea c <blockquote> se utilizeaz pentru blocuri de text mai mari, iar <q> pentru blocuri de text mai mici. Exemplu
<html> <head><title>blockquote</title></head> <body> <blockquote cite="Pagini Web cu JavaScript"> <p>O retea de calculatoare reprezinta un ansamblu de calculatoare autonome, interconectate, ce folosesc o singura tehnologie pentru a putea realiza un schimb de date si a folosi in comun resursele. </p> </blockquote> </body> </html>
3.7. Formatarea paragrafelor

Cea mai utilizat modalitate de formatare a unei poriuni mai mari de text este cu ajutorul paragrafelor. n HTML un paragraf se ncadreaz ntre etichetele <p> i </p> i are atributele: id, class= identificatorii documentului; lang= specific limba; title= elementul titlu; style= stil; align= aliniament; onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup evenimente Exemplu n exemplul urmtor am utilizat atributul align ce are posibilitile: center-centreaz, justify-aliniaz stnga-dreapta, right-aliniaz la dreapta, left-aliniaz la stnga.
<html> <head><title>paragraf</title> </head> <body> <p title="titlul" align="center" lang="ro"> Internetul</p> <p title="definitie" align="justify" lang="ro"> Internet-ul este o retea de retele extinsa pe tot globul, alaturand multe guverne, universitati, calculatoare personale si furnizand o infrastructura pentru utilizarea documentelor de tip hipertext, serviciilor de e-mail, transfer de fisiere si alte resurse computationale.</p> <p title="sursa" align="right" lang="ro"> Pagini Web cu JavaScript</p></p> </body> </html>
3.8. Preformatarea textului

Browser-ul ignor formatrile noastre dac nu le ncadrm ntre etichetele corespunztoare. De exemplu, dac scriem cteva versuri frumos formatate n editorul de texte, atunci cnd l salvm, browser-ul scrie versurile unul n continuarea celuilalt, nu unul sub altul aa cum am dori noi. Dac dorim ca browser-ul s respecte formatarea noastr fr s utilizm elementele: <p>, <br>..., atunci putem utiliza elementul <pre></pre>. Exemplu
<html> <head><title>preformatarea textului</title></head> <body> <pre title=masinuta lang=ro> Masinuta () () () ____ | _/__|_\ | | ___ | | () () |__ __ __ __ __ </pre></body> </html>
3.9. Liste
Avem trei modaliti de afiare a informaiilor n: liste ordonate, liste neordonate i definiii. Liste neordonate - Unordered Lists (UL) - se ncadreaz ntre etichetele <ul></ul>. Fiecare element al listei ncepe cu eticheta <li>. Atributul type al listei neordonate poate lua valorile: square, circle sau disc, n funcie de cum dorim s fie afiat semnul din faa elemntelor listei. Exemplu
<html> <head><title>liste neordonate</title></head> <body> Culori <ul> <li>alb</li> <li>gri</li> <li>negru</li></ul> Zile <ul type="square"> <li>luni</li> <li>marti</li> <li>miercuri</li></ul> Fructe <ul type="circle"> <li>fragi</li> <li>capsuni</li> <li>banane</li> </ul> </body></html>
Liste ordonate Ordered Lists (OL) - se ncadreaz ntre etichetele <ol></ol>. Fiecare element al listei ncepe cu eticheta <li>. Atributul start al listei ordonate specific numrul de la care ncepe numrtoarea pentru itemii listei. Fr acest atribut, numrtoarea ncepe de la 1. Atributul type definete tipul numerotrii elementelor listei n felul urmtor: Pagini Web cu JavaScript Diana Elena Diaconu 19
type=1 pentru cifre 1, 2, 3, ... type=A pentru litere mari A, B, C, ... type=a pentru litere mici a, b, c, ... type=I pentru cifre romane scrise cu litere mari I, II, III, IV, ... type=i pentru cifre romane scrise cu litere mici i, ii, iii, iv, ... Exemplu
<html> <head><title>liste ordonate</title></head> <body> Flori <ol> <li>zambila</li> <li>trandafir</li> <li>lacramioara</li> </ol> Pasari <ol type="A" start=3> <li>porumbel</li> <li>pescarus</li> </ol> </body></html>
Liste de definiii Definition Lists (DL) se ncadreaz ntre etichetele <dl></dl> i sunt puin diferite fa de celelalte liste deoarece fiecare element al listei este format din dou pri: termenul de definit i definiia. ntr-o definiie, termenul care trebuie definit ncepe cu eticheta <dt>, iar definiia termenului ncepe cu eticheta <dd>. Exemplu
<html> <head><title>liste de definitii</title></head> <body> <dl> <dt>HTML</dt> <dd> HyperText Markup Language este un limbaj de marcare utilizat pentru crearea documentelor care contin text, grafica, tabele, liste, imagini, sunete, secvene video si legaturi catre alte documente prin World Wide Web. </dd> </dl> </body> </html>
Imbricarea listelor se realizeaz prin inserarea unei liste n interiorul altei liste. Se pot insera liste ordonate n interiorul celor neordonate sau invers, liste de definiii n interiorul celor ordonate, ca n cazul exemplului de mai jos i alte modaliti.
Exemplu
<html> <head><title>liste imbricate</title></head> <body> <ol> <li>anotimpuri</li> <dl> <dt>Primavara</dt> <dd>Martie</dd> <dd>Aprilie</dd> <dd>Mai</dd> <dt>Vara</dt> <dd>Iunie</dd> <dd>Iulie</dd> <dd>August</dd> <li>Flori</li> <dt>primavara</dt> <dd>ghiocei</dd> <dd>zambile</dd> <dd>trandafiri</dd></dl> </ol> </body></html>
3.10. Tabele - se scriu ntre etichetele <table> i </table>. Un tabel este mprit n rnduri ncadrate ntre etichetele <tr> i </tr> (table row) i fiecare rnd este mprit n celule cu ajutorul etichetelor <td> i </td>. O celul poate conine text, imagini, liste, paragrafe, formulare. Etichete specifice tabelelor: o table definete un tabel; o th definete antetul unui tabel; o tr definete rndul unui tabel; o td definete celula unui tabel; o caption definete legenda unui tabel; o colgroup definete grupe de coloane ale unui tabel; o col definete valoarea atributului pentru una sau mai multe coloane ale unui tabel; o thead definete capul unui tabel; o tbody definete corpul unui tabel; o tfoot definete partea de jos a unui tabel.
Exemplu de tabel simplu
<html> <head><title>tabel simplu</title></head> <body> <table> <tr> <th>nr.</th> <th>culori</th> <th>flori</th> </tr> <tr> <td>1</td> <td>alb</td> <td>ghiocel</td> </tr> <tr> <td>2</td> <td>rosu</td> <td>trandafir</td> </tr> </table> </body></html>
Atribute specifice tabelelor: Atribut Valoare Descriere align left / center / right Aliniaz tabelul la stnga / centru / dreapta. bgcolor Numele culorii sau valoarea n Specific culoarea fundalului tabelului. hexazecimal. border pixeli Marginea celulelor tabelului. n funcie de valoarea pe care o poate lua, va fi afiat un tabel fr margini (ca cel de mai sus border=0), sau cu margini de diferite dimensiuni. cellpadding pixeli n % Specific spaiul dintre coninutul i marginile celulei. cellspacing pixeli n % Specific spaiul dintre celule. frame void / above / below / hsides / Specific modalitatea de afiare a bordurii lhs / rhs / vsides / box / border exterioare. rules None / groups / rows / cols / all Specific liniile despritoare orizontale / verticale. summary text Specific sumarul tabelului pentru browser-e non-vizuale width pixeli n % Specific limea tabelului. Exemplu Primul tabel este centrat, are marginea 1 i distana dintre coninutul celulei i margini este de 10%; al doilea tabel are marginea mai mare, de 8, spaiul dintre celule mai mare 5% iar limea tabelului este 50% din limea suprafeei de afiare a browserului; al treilea tabel are vizibile doar marginile verticale i colorate fundalurile a dou celule cu bgcolor.
<html> <head><title>tabele</title></head> <body> <table border="1" bgcolor="silver" align="center" cellpadding=10%> <caption>Primul tabel</caption> <tr> <th>culori</th> <th>flori</th> </tr> <tr> <td>alb</td> <td>ghiocel</td> </tr> <tr> <td>rosu</td> <td>trandafir</td> </tr> </table> Alt tabel: <table border="8" cellspacing=5% width=50%> <tr> <th>culori</th> <th>flori</th> </tr> <tr> <td>alb</td> <td>ghiocel</td> </tr> <tr> <td>rosu</td> <td background="trandafir.jpg"> trandafir <br><br></td> </tr> </table> tabelul 3 <table frame="vsides"> <tr> <th>culori</th> <th>flori</th> </tr> <tr> <td bgcolor="green">verde</td> <td>iarba</td> </tr> <tr> <td bgcolor="red">rosu</td> <td>trandafir</td> </tr> </table> </body></html>
3.11. Legturi HTML se scriu ntre etichetele <a> i </a> (Anchor) i pot fi de tip hipertext
sau hipermedia. Cel mai important atribut al etichetei <a> este href care poate crea o legtur ctre un alt document din spaiul Web, ctre o imagine, un film. Legturi relative sau absolute Este important s tim cum crem o legtur ctre o pagin Web sau o imagine, dar trebuie s tim i cum s le apelm. De exemplu, dac avem o pagin Web pe un server la adresa: http://www.un_site_oarecare.ro/folder1/pagini/pagina1.html, atunci cnd o apelm putem scrie de fiecare dat toat calea, adic s scriem calea absolut a fiierului respectiv sau putem scrie o cale relativ la fiier. Legtura relativ se refer la modalitatea de referire a paginilor. De exemplu, dac cele dou fiiere se afl n acelai folder, putem scrie doar pagina1.html. Concluzia este c cea mai bun modalitate de apelare a unei pagini este prin utilizarea legturii relative la pagina respectiv. Exemplu de legtur relativ ctre un document care se afl n acelai folder cu documentul apelant, respectiv un exemplu de legtur absolut ctre un document din spaiul Web.
<html> <head><title>legaturi</title> </head> <body> <a href="pagina.html"> Legatura</a> catre un document. <p> <a href="http://www.einformatica.ro/"> Legatura </a> catre un site din spatiul World Wide Web. </p> </body> </html>
Exemplu de legtur pe o imagine.

<html> <head><title>legatura pe imagine</title> </head> <body> Dati click pe imaginea alaturata, <br> <a href="fisier.html"> <img border="0" src="trandafir.jpg" width="65" height="60"><br> </a> pentru a ajunge la alt document din spatiul WWW. </body> </html>
Exemplu de legtur pe aceeai pagin. Aceast modalitate de legare a coninutului paginii se utilizeaz ndeosebi la paginile Web stufoase, cu coninut ncrcat, n care se afl mult informaie.
<html> <head> <title>legatura pe aceeasi pagina</title></head> <body> <p><a href="#au">Legatura catre luna august. </a></p> <h2><a name="ia">Ianuarie</a></h2> <h2>Februarie</h2> <h2>Martie</h2> <h2>Aprilie</a></h2> <h2>Mai</h2> <h2>Iunie</h2> <h2>Iulie</h2> <h2><a name="au">August</a> </h2> <p> <a href="#ia">Legatura catre luna ianuarie.</a></p> <h2>Septembrie</h2> <h2>Octombrie</h2> <h2>Noiembrie</h2> <h2>Decembrie</h2> </body></html>
Atribute specifice elementului Anchor (<a>): Atribut Valoare character_encoding charset if shape="rect" then coords coords="left,top,right,bottom" if shape="circ" then coords="centerx,centery,radius" if shape="poly" then coords="x1,y1,x2,y2,..,xn,yn" URL href hreflang language_code section_name name rel Alternate / designates / stylesheet / start / next / prev / contents / index / glossary / copyright / chapter / section / subsection / appendix / help / bookmark Alternate / designates / stylesheet / start / next / prev / contents / index / glossary / copyright / chapter / section / subsection / appendix / help / bookmark rect / rectangle / circ / circle / poly / polygon _blank _parent _self _top mime_type
Descriere Specific codul caracterului intei URL. Specific coordonatele atributului shape pentru a defini o regiune dintr-o imagine pentru maparea imaginii.
inta URL a legturii. Specific limbajul intei URL. Numele ancorei. Se utilizeaz acest atribut pentru a crea un semn ntr-un document. Specific relaiile dintre documentul curent i inta URL.
rev
Specific relaiile documentul curent.
dintre
inta
URL
shape target
type
Definete tipul regiunii ce va fi definit pentru mapare n aria etichetei curente. Se utilizeaz cu atributul coords. -inta URL se va deschide ntr-o nou fereastr -inta URL se va deschide n parent frameset -inta URL se va deschide n acelai cadru -inta URL se va deschide n corpul ferestrei Specific tipul MIME al intei URL. Diana Elena Diaconu 24
3.12. Cadre HTML HTML Frame permit afiarea mai multor pagini Web n fereastra unui
browser. Fiecare document HTML afiat n browser este numit frame (cadru) i este independent de celelalte frame-uri. Avantajele utilizrii frame-urilor sunt: o cnd se mbuntete coninutul unui site Web se pot modifica doar cadrele respective, nu ntregul site. o site-ul se ncarc mai repede n browser. Dezavantaje: o este dificil de printat o pagin Web ce conine cadre o unele motoare de cutare nu verific dect coninutul cadrului principal, nu coninutul tuturor cadrelor. Etichetele cadrelor HTML: <frameset> - definete un set de cadre; <frame> - definete un cadru al ferestrei; <noframes> - definete o seciune noframe pentru browser-ele care nu pot afia cadre; <iframe> - definete un cadru ntr-o poriune din interiorul ferestrei Elementul <frameset> definete un set de cadre, unde fiecare cadru deschide separat cte o pagin Web. Pentru a realiza acest lucru, se utilizeaz atributele: cols coloane i rows linii. Exemplu de utilizare a cadrelor cu atributul cols. Paginile se salveaz separat, de preferat n acelai folder.
Pagina principal: <html> <frameset cols = "30%, 70%"> <frame src ="meniu.html" /> <frame src ="pagina simpla.html" /> </frameset> </html> Pagina din stnga (meniu.html): <html> <head><title>Meniu</title></head> <body bgcolor="silver"> <h2>Albert Einstein</h2> "Imaginatia este mai importanta dect cunoasterea </body></html> Pagina din dreapta (pagina simpla.html): <html> <head><title>Einstein</title></head> <body> <center> <h2>Omul secolului</h2> <hr><img src="Einstein.jpg"><br> </center> Anul 1905 este un glorios pentru descoperirile din domeniul fizicii, an ce a provocat valuri la nivel mondial si pentru care, 2005 este considerat anul Einstein. De acum este numit <i> The man of the century</i> (Omul secolului). </body></html>
Elementul <noframes> se utilizeaz pentru ca utilizatorii browser-elor ce nu pot utiliza cadre, s primeasc un mesaj de avertizare. Pentru ceilali, rezultatul este ca la exemplul de mai sus. Exemplu
Pagina principal: <html> <frameset cols = "30%, 70%"> <noframes> <body> Browser-ul dumneavoastr nu afia cadre!</body></noframes> <frame src ="meniu.html" /> <frame src ="pagina simpla.html" /> </frameset> </html>
poate
Elementul <iframe> creaz un frame care conine o alt pagin Web, ca n exemplul urmtor. Exemplu Acest element se utilizeaz n cazul n care dorim s afim coninutul altei pagini Web pe o suprafa mic, delimitat de noi ntr-o anumit zon a paginii principale.
Pagina principal: <html> <head><title>Flori</title> </head> <body> <h2><p align="center">Flori</p> </h2> <hr>Trandafir <iframe src="trandafir.html" align="middle" frameborder=1 height=40% width=30% scrolling="yes"></iframe> <p>Zambila <iframe src="zambila.html" frameborder=0></iframe></p> </body> </html> Fiierul trandafir.html: <html> <head><title>Trandafir</title> </head> <body> <h3>Trandafir</h3> <img src="trandafir1.jpg"><br /> Sa nu uitam nicicand sa iubim trandafirii! </body> </html> Fiierul zambila.html: <html> <head><title>Zambila</title></head> <body bgcolor="azure"> <h3>Zambila</h3> <img src="zambila.jpg"><br /> Zambila este o floare de climat subtropical-temperat, originara din Orientul Apropiat.<br /> </body> </html>
Atribute specifice elementului iframe: Atribut Valoare align left / right / top / middle / bottom frameborder 1 / 0 height pixeli n % longdesc URL marginheight pixeli marginwidth pixeli name frame_name scrolling ys / no / auto src URL width pixeli n %
Descriere Specific modalitatea de aliniere a textului ce nconjoar elementul iframe. Specific dac iframe va afia sau nu bordur. Definete nlimea unui iframe. Descrierea pe larg a URL-ului coninutului cadrului. Definete marginile de sus i de jos ale iframe. Definete marginile din stnga i din dreapta ale iframe. Specific numele unic al iframe. Definete bara scroll. URL-ul paginii Web afiat n iframe. Definete limea unui iframe.
Elementul <frame> definete un cadrul al ferestrei i are urmtoarele atribute: frameborder, longdesc, marginheight, marginwidth, name, noresize, scrolling, src.
3.13. Formulare HTML HTML Form sunt utilizate pentru a selecta diferite tipuri de
intrri ale utilizatorilor. Etichetele formularelor HTML: <form> - definete un formular pentru o intrare a utilizatorului; <input> - definete intrarea unui cmp; <textarea> - definete aria textului (text-area); <label> - definete o etichet de control <fieldset> definete un fieldset; <legend> - definete legenda unui fieldset; <select> - definete o list selectabil; <optgroup> - definete o opiune a unui grup; <option> - definete o opiune; <button> - definete un buton pe care se apas 3.13.1. Elementul form poate conine un cmp de text, checkboxes, butoane radio. Formularele sunt utilizate pentru a trimite datele introduse de ctre utilizator ctre un URL specificat. Atribute specifice elementului form: Atribut Valoare action URL accept acceptcharset enctype method name target list cu coninut charset-list mimetype get / post nume formular _blank _self _parent _top Descriere URL-ul ce definete unde vor fi trimise datele cnd va fi apsat butonul. O list separat prin virgul ce conine tipul de coninut pe baza cruia server-ul va procesa corect formularul. O list separat prin virgul ce poate conine seturi de caractere pentru formular. Tipul mime utilizat pentru a coda coninutul formularului. method=get trimite coninutul formularului ctre URL. method=post trimite coninutul formularului n coninutul cererii. Definete numele formularului -inta URL se va deschide ntr-o nou fereastr -inta URL se va deschide n parent frameset -inta URL se va deschide n acelai cadru -inta URL se va deschide n corpul ferestrei Diana Elena Diaconu 27
Exemplu de utilizare a elementului form. n acest exemplu, utilizatorii pot introduce informaii pe pagina Web i pot aciona butonul Apsai! care are ca efect deschiderea altei pagini Web. Pentru aciuni mai complicate, se utilizeaz scripturi speciale.
<html> <head><title>Formular</title></head> <body> <h2>Formular</h2> <form action="surpriza.html" method="get"> Introduceti anotimpul preferat: <input type="text" name="x" value="primavara"> <br /> Introduceti floarea preferata: <input type="text" name="y" value="trandafir" size=10 > <br /> <input type="submit" value="Apasati!"> </form> <p>Daca dati click pe butonul "Apasati!", veti avea o surpriza :) !</p> </body> </html>
3.13.2. Elementul input definete nceputul cmpului de introducere a datelor de ctre utilizatori. Atribute specifice elementului input: Atribut Valoare Descriere accept list cu coninut O list separat prin virgul ce conine tipul de coninut pe baza cruia server-ul va procesa corect formularul. align left / right / top / Se utilizeaz numai cu type=image i definete texttop / middle / aliniamentul textului ce urmeaz imaginii. absmiddle / baseline / bottom / absbottom alt text Se utilizeaz numai cu type=image i definete un text alternativ, pentru cazul n care nu se ncarc o imagine. checked checked Se utilizeaz cu type=checkbox, type=radio i indic faptul c elementul introdus va fi verificat la prima ncrcare. disabled disabled Dezactiveaz elementul introdus la prima ncrcare. maxlength numr Definete numrul maxim de caractere permise n cmpul de tip text. name nume formular Definete numele formularului readonly readonly Indic faptul c valoarea acestui cmp nu poate fi modificat. size numr de tip char Definete dimensiunea elementului care va trebui introdus. src URL Se utilizeaz numai cu type=image i definete URL pentru imaginea care va fi afiat. type button / checkbox / Definete tipul elementului care va fi trebui introdus. file / hidden / image / password / radio / reset / submit / text value value Definete valori diferite n funcie de tipul butoanelor. o Pentru butoanele reset i submit definete textul de pe buton o Pentru butoanele image definete rezultatul cmpului care trece prin script. o Pentru butoanele checkboxes i radio definete rezultatul elementului introdus cnd se d click pe buton. o Pentru cmpurile hidden, password i text definete valoarea iniial a elementului. Pagini Web cu JavaScript Diana Elena Diaconu 28
3.13.3. Elementul textarea definete aria textului n care utilizatorii pot introduce text. Atribute specifice elementului textarea: Atribut Valoare Descriere cols numr Specific numrul de coloane vizibile n aria de introducere a textului. rows numr Specific numrul de rnduri vizibile n aria de introducere a textului. disabled disabled Dezactiveaz elementul introdus la prima ncrcare. name nume Specific numele pentru aria de introducere a textului. readonly readonly Indic faptul c valoarea acestui cmp nu poate fi modificat. Exemplu de utilizare a elementului textarea. n acest exemplu utilizatorii pot introduce un comentariu pe o suprafa mai mare nainte de a aciona butonul Apasati!
<html> <head><title>textarea</title></head> <body> <p></p> <form action="surpriza.html" method="get"> <textarea name="z" value="0"cols=20 rows=4 Introduceti numele si prenumele</textarea> <br> <input type="submit" value="Apasati!"> </form> </body> </html>
>
3.13.4. Elementul label definete o etichet de control. Cu ajutorul elementului label se poate aciona un buton radio att prin acionarea lui direct ct i prin executarea unui click pe textul asociat butonului radio. Atribut specific elementului label: Atribut Valoare for numele altui cmp Descriere Definete crui element din formular i este atribuit.
3.13.5. Elementul fieldset deseneaz un dreptunghi n jurul elementelor pe care le conine. Exemplu de utilizare a elementelor: label i fieldset. n acest exemplu am utilizat elementul fieldset pentru a ncadra ntr-un dreptunghi butoanele radio. Fiecare buton radio are cte o etichet (label) ce permite selectarea butonului dac acionm asupra textului ce aparine butonului respectiv.
<html> <head><title>label si fieldset</title></head> <body> <p>Selectati o floare:</p> <form name="input" action=""> <fieldset> <input type="radio" name="x" id="trandafir"> <label for="trandafir">Trandafir</label><br> <input type="radio" name="zambila" id="zambila"> <label for="zambila">Zambila</label><br> <input type="radio" name="violeta" id="violeta"> <label for="violeta">Violeta</label> </fieldset></form> </body></html>
3.13.6. Elementul legend definete legenda elementului pentru fieldset. Atribut specific elementului legend: Atribut Valoare Descriere align top / bottom / left / Definete modalitatea de aliniere a coninutului din right fieldset. Dac nu este definit nimic, alinierea este top. Exemplu de utilizare a elementului: legend.
<html> <head> <title>legend</title> </head> <body> <fieldset> <legend align="center"> Introduceti impresii:</legend> <textarea cols=15 rows=5>interesant </textarea> </fieldset> </form> </body> </html>
3.13.7. Elementul select permite selectarea unui element dintr-o list. Atribute specifice elementului select: Atribut Valoare disabled disabled multiple multiple name nume size numr Descriere Dezactiveaz lista. Permite selectarea mai multor itemi n acelai timp. Permite definirea unui nume. Definete un numr vizibil de itemi din list.
Exemplu de utilizare a elementului: select.

<html> <head><title>select</title> </head> <body> <select disabled> <option value ="zero"> Lista deselectata</option> </select> <p> <select multiple> <option value ="gladiola">Gladiola</option> <option value ="rozmarin">Rozmarin</option> <option value ="liliac">Liliac</option> </select></p> <select size=2> <option value ="alb">Alb</option> <option value ="roz">Roz</option> <option value ="rosu">Rosu</option> <option value ="galben" >Galben</option> </select> </body> </html>
3.13.8. Elementul optgroup definete opiunea de grup i permite gruparea mai multor opiuni. Atribute specifice elementului select: Atribut Valoare Descriere disabled disabled Dezactiveaz opiunea de grup la prima ncrcare. label text label Definete label pentru un grup de opiuni. 3.13.9. Elementul option definete opiunea dintr-o list. Atribute specifice elementului option: Atribut Valoare Descriere disabled disabled Specific faptul c opiunea ar trebui dezactivat la prima ncrcare. label text label Definete label pentru un grup de opiuni. selected selected Specific faptul c opiunea ar trebui s apar selectat. value text Definete valoarea opiunii pentru a fi trimis ctre server. Exemplu de utilizare a elementelor: optgroup i option.
<html> <head><title>optgroup</title></head> <body> <select> <optgroup label="Flori de gradina"> <option value ="zambila">Zambila</option> <option value ="trandafir">Trandafir</option> <option value ="ghiocel">Ghiocel</option> </optgroup> <optgroup label="Flori de casa"> <option value ="violeta">Violeta</option> <option value ="begonia">Begonia</option> <option value ="cyclamen">Cyclamen</option> </optgroup></select> </body></html>
3.13.10. Elementul button definete un buton pe care putei apsa. Atribute specifice elementului option: Atribut Valoare Descriere disabled disabled Dezactiveaz butonul. name Numele butonului Specific numele butonului. type button / reset / Definete tipul butonului. submit value o valoare Definete valoarea iniial a butonului care va putea fi schimbat pe parcurs. Exemplu de utilizare a elementului: button.
<html> <head><title>button</title> </head> <body> Buton simplu:<button>Apasati!</button><br /> Buton dezactivat:<button disabled>Apasati!</button> </body></html>
3.14. Imagini HTML HTML Images sunt utilizate pentru a afia imagini ntr-un document
cu ajutorul etichetei <img>. Atributul cel mai important este src (source), care permite definirea sursei imaginii care va fi afiat. Pentru a ine minte mai uor etichetele, trebuie s reinem c img vine de la image (imagine) i src de la source (surs). Formatul unei imagini Imaginile au diferite extensii, n funcie de programul cu care au fost prelucrate sau create. n spaiul Web, formatele care sunt recunoscute de ctre browser-e sunt: .gif, .jpg i .jpeg, unde gif este prescurtarea de la Graphics Interchange Format, iar jpg sau jpeg sunt prescurtri de la Joint Photographic Experts Group. Un alt format care este recunoscut doar de ctre Internet Explorer este .bmp (bitmap), dar pentru faptul c nu este recunoscut de ctre alte bowser-e, nu v recomand s-l folosii ntr-o pagin Web. Etichetele imaginilor HTML: <img> - definete o imagine; <map> - definete maparea unei imagini pe parte de client; <area> - definete o suprafa pe care putem da click din interiorul unei imagini mapate. 3.14.1. Elementul img definete elementul img al unei imagini. Atribute specifice elementului img: Atribut Valoare alt text src URL align top / bottom / middle / left / right border pixeli height Pixeli n % hspace pixeli ismap URL longdesc URL usemap vspace width URL pixeli Pixeli n % Descriere Definete o descriere a imaginii. URL al imaginii care va fi afiat. Specific modalitatea de aliniere a imaginii n concordan cu textul nconjurtor. Definete bordura din jurul imaginii. Definete nlimea unei imagini. Definete spaiul alb din stnga i din dreapta imaginii Definete imaginea pe parte se server a imaginii mapate. URL al unui document care conine o descriere mai lung a imaginii. Definete imaginea pe parte de client a imaginii mapate. Definete spaiul alb din partea de sus i din partea de jos a imaginii. Seteaz limea unei imagini.
Exemplu de utilizare a elementului: img. Dac imaginea se afl n acelai folder n care avem i pagina Web, atunci o apelm prin numele ei, alfel suntem nevoii s scriem calea unde se afl imaginea, pentru ca browser-ul s tie unde s o caute. Este de preferat s nu dm toat calea n care se afl imaginea, adic: c:/fisiere/site/imagini/t2.jpg sau alta, ci doar imagini/t2.jpg. Diferena const n faptul c dac dm toat calea, n momentul n care mutm pagina Web pe alt computer, nu mai vedem imaginile, pentru c au alt cale.
<html> <head><title>imagini</title> </head> <body> <p> Imagine din acelasi folder: <img src="t1.jpg" alt="Trandafir" width="70" height="70" align="bottom"></p> Imagine din alt folder: <img src="imagini/t2.jpg" alt="Zambila" width="70" height="70" align="top"></p> Imagine din spatiul WWW: <img src="http://www.einformatica.ro/imagini/copert a5.jpg" alt="Revista" width="75" height="100" align="middle"></p> </body> </html>
3.14.2. Elementul map definete maparea imaginii pe parte de client, asta presupune c imaginea conine zone n care poi executa click pentru a realiza o aciune. Atribute specifice elementului map: Atribut Valoare id nume name nume Descriere Definete un nume unic pentru eticheta map. Definete un nume unic pentru eticheta map.
3.14.3. Elementul area definete o regiune dintr-o imagine mapat. Atribute specifice elementului area: Atribut Valoare alt text coords dac shape=rect, coords= stnga, sus, dreapta, jos dac shape=circ, coords= centruX, centruY, raza dac shape=poly, coords=x1, y1, x2, y2,,xn,yn href URL nohref true / false shape rect / rectangle / circ / circle / poly / polygon target _blank/ _parent/ _self/ _top Descriere Specific textul alternativ pentru suprafaa mapat Specific coordonatele pentru suprafaa pe care se poate executa click.
Specific inta URL a suprafeei mapate. Exclude o suprafa din maparea imaginii. Definete forma unei suprafee. Definete locul unde se va deschide inta URL. Astfel, pentru: _blank inta URL va fi ntr-o nou fereastr; _self inta URL se va deschide n acelai cadru n care s-a dat click; _parent inta URL se va deschide parent frameset; _top inta URL se va deschide n corpul ferestrei.
Exemplu de utilizare a elementelor: map i area. n imaginea alturat, pentru a mapa imaginea am plecat de la coordonatele x=0 i y=0 (colul stnga sus) pn la coordonatele x=200 i y=150 (dreapta jos). Pentru laptop am utilizat o suprafa dreptunghiular, iar pentru neuron (litera O din cuvntul Informatica) am utilizat un cerc. Pentru cercul neuronului am luat coordonatele: x=50, y=70 i raza cercului=15.
<html> <head><title>maparea imaginii</title> </head> <body> <p>Dati click pe laptop:</p> <img src ="coperta5.jpg" border=0 width ="150" height ="200" alt="Revista Informatica" usemap="#rev"> <map id ="rev" name="rev"> <area shape ="rect" coords ="7,10,40,30" href ="2005.htm" target ="_blank" alt="2005"> <area shape ="circle" coords ="50,70,15" href ="neuron.htm" target ="_blank" alt="Neuron"> <area shape ="rect" coords ="50,150,80,180" href ="Laptop.htm" target ="_blank" alt="Laptop"> </map> </body> </html>
3.15. Fundal HTML HTML Background este utilizat pentru a mbuni aspectul unui
site Web. Pentru a realiza acest lucru, trebuie gsit o gam de culori i nuane de culori pentru fundal i text astfel nct s se potriveasc i s rezulte un aspect plcut. Un lucru important n alegerea fundalului este realizarea unui contrast destul de puternic pentru ca utilizatorii s poat parcurge coninutul site-ului cu uurin. Ca fundal se pot alege nuane de culori sau imagini. n alegerea unei imagini pentru fundal trebuie s inem seama de impactul pe care o s-l aib asupra utilizatorilor. Dac imaginea are un contrast puternic, ar fi indicat o prelucrare cu ajutorul unui editor de imagini, cum ar fi: Adobe Photoshop, Corel Drow, Paint Shop Pro i exemplele pot continua. Un alt aspect important ar fi faptul c o imagine de dimensiuni mici se multiplic pe suprafaa fundalului i poate duna aspectului final. Pentru a rezolva acest lucru, am putea crea noi o imagine de fundal simetric, n aa fel nct dac aezm mai multe imagini una lng alta, rezultatul s fie plcut. Din ce n ce mai puine site-uri profesioniste renun la imaginile pentru fundal n favoarea unei singure culori, de regul alb sau gri deschis. Cea mai potrivit culoare pentru text, n cazul acesta este negru. n continuare voi prezenta exemple pozitive de combinaii de culori i exemple la care imaginea de fundal nu se potrivete cu nuana aleas pentru text. Exemplu de utilizare a elementului: bgcolor. Alegerea nuanelor de culori este total greit datorit contrastului foarte slab dintre ele. Culorile alb i galben pentru text sunt dificil de asociat cu fundalul, poate cu excepia culorii negre.
<html> <head><title>fundal</title> </head> <body bgcolor="aliceblue" text="yellow"> <p>Text care nu se vede :)</p> <font color="white"> Oare de ce?</font> </body></html>
Exemplu de utilizare a elementului: background. Aici, alegerea ca fundal a unei flori nu este potrivit datorit faptului c imaginea are un contrast foarte puternic. Totusi, vom putea utiliza floarea dup o prelucrare cu ajutorul unui editor de imagini.
<html> <head><title>fundal2</title> </head> <body background="zambila roz.jpg"> <p>Text care nu se vede :)</p> <font color="white"> Oare de ce?</font> </body> </html>
Exemplu Se vede vreo diferen ntre cele dou exemple? Bineneles. Acest lucru se realizeaz dup o prelucrare atent a imaginii. Primul lucru pe care trebuie s-l facem este s avem o imagine ntr-adevr bun, adic s aib o rezoluie mare, dup care cutm un element care ne place pentru a-l prelucra. Dup ce v alegei obiectul, l izolai, scpai de fundal, i aplicai diverse efecte (blur, illumination, ...) n funcie de preferine i i adugai un fundal potrivit, de preferat o singur culoare. Dac avei o imagine ca aceasta, care conine o floare, orice alt element decorativ ncarc pagina. Nu trebuie s uitm scopul final i anume faptul c un site trebuie s transmit n primul rnd informaie.
<html> <head><title>fundal cu zambile roz</title> </head> <body background=zambila6.jpg text=hotpink> <h2> <p align=center>Nu-i asa ca va plac zambilele?</p></h2> </body> </html>
OBS nainte de a alege o imagine pentru fundal trebuie s ne punem urmtoarele ntrebri: o Imaginea aleas de noi va crete cu mult timpul de ncrcare a paginii? o Se potrivesc culorile predominante ale imaginii alese de noi cu restul paginii ? o Imaginea transmite aceeai idee vizitatorului, ca restul site-ului? o Imaginea de fundal distrage atenia vizitatorului site-ului?
3.16. Fonturi HTML HTML Fonts realizeaz formatarea unui text. Formatarea este de
preferat s o realizai cu ajutorul stilurilor, ca n exemplul de mai jos. Atribute specifice elementului font: Atribut color face size Valoare nume culoare / valoare culoare nume font valoare numr + valoare numr - valoare numr Descriere Definete culoarea fontului cu ajutorul unui nume predefinit scris n limba englez sau cu ajutorul unui numr n hexazecimal.. Definete numele fontului, cum ar fi: face=Arial Definete dimensiunea fontului. Crete dimensiunea fontului. Scade dimensiunea fontului.
Exemplu n acest exemplu am utilizat cte un stil pentru a formata elementele <h2>, <p> i <h4> dintr-o pagin web.
<html> <head><title>font</title> </head> <body> <h2 style="color:royalblue" face="Verdana">Ochii tai</h2> <p style="color:navy" face="Monotype Corsiva"> Daca mai crezi cat de cat in minuni,<br/> Sa te vad trei zile, sa nu te vad trei luni,<br/> Si s-o luam iar si iar<br/> De la capat...<br/> Spune-mi, cum ti s-ar parea?</p> <h4 style="color:royalblue" face="Verdana"> Alexandru Andries</h4> </body> </html>
3.17. Trucuri cu HTML Pn acum am formatat paginile integral, pentru a ajunge la un

aspect uniform. Dar dac vrem ca pagina noastr s arate ca o revist, cu textul scris n coloane, imaginile aranjate n aceeai poziie relativ fa de text, indiferent de browser i de rezoluie, atunci apelm la coloanele tabelelor. Exemplu
<html> <head><title>coloane</title></head> <body> <center><h2>Clasificarea retelelor in functie de dimensiunile sale</h2></center> <table> <tr><td bgcolor="DDDDDD"><b>Retea de birou</b></td> <td><b>Retea personala</b></td></tr> <tr><td bgcolor="EEEEEE"> Desk Area Network DAN n care fiecare component a computerului aflat pe birou, cum ar fi: ecranul monitorului, unitile de CD-ROM, CD-Writer, DVD-ROM, DVD-Writer, Combo Drive, dispozitivele periferice precum: WebCam, imprimanta, scanner-ul, pot fi accesibile din reea</td> <td> Home Phoneline Networking Alliance HPNA utilizeaz o tehnologie relativ nou ce permite construirea unei reele private, utiliznd firul de telefon existent. Accesul la Internet se realizeaz printr-un singur computer, ce permite conectarea la Internet i a altor computere fr a fi necesar un router.</td> </tr> </table> </body> </html>
Evaluare
1. 2. 3. 4. Care este diferena dintre HTML i SGML? Cum ar trebui s fie fundalul unei pagini Web i de ce? Creai o pagin Web n care s prezentai date despre dumneavoastr. Care este diferena dintre o legtur relativ i o legtur absolut?
Rspundei prin alegerea variantei sau variantelor corecte: 5. Formatul imaginilor care sunt recunoscute de ctre majoritatea browser-elor web sunt: a) .jpg, .gif, .bmp; b) .jpeg, .jpg, .bmp; c) .jpg, .gif, .jpeg; d) .jpg, .jpeg, .gif, .bmp;
Capitolul 4.
C.S.S.
Obiective:
- s neleag noiunea de stil HTML - s neleag paii care se parcurg pentru a se introduce un stil ntr-o pagin Web.
4.1. Cascading Style Sheet

Pn acum am nvat cum s crem pagini Web frumos formatate, cu text nclinat sau subliniat, de dimensiuni sau culori diferite. Acum v imaginai c avei de construit un site care s conin text formatat n acelai fel i pentru acest lucru trebuie s scriei cod pentru fiecare poriune de text separat i pentru fiecare pagin Web. n felul acesta o pagin Web devine din ce n ce mai ncrcat. Putem schimba acest lucru dac n loc de formatarea separat a poriunilor de text, am utiliza stiluri scrise separat ntr-un fiier pe care l-am putea apela din interiorul tuturor paginilor site-ului nostru. Cu alte cuvinte, am putea scrie un singur fiier ce conine CSS, cu ajutorul cruia s formatm toate paginile Web dintr-un site. O pagin Web scris cu CSS poate fi interpretat mai uor i corect de ctre diferite browser-e, cum ar fi cele destinate persoanelor cu dizabiliti. Aceste browser-e parcurg paginile Web i le transform. Principalele aciuni sunt: mrirea sau micorarea dimensiunii textului afiat, transformarea coninutului paginii Web n fiiere audio sau fiiere interpretabile de ctre un dispozitiv Braille. Pentru a interpreta ct mai corect coninutul unei pagini Web, acesta trebuie s poat fi vzut simplu, neformatat, toate formatrile s fie fcute cu ajutorul CSS-urilor. n afara acestor avantaje, CSS este folosit pentru a putea crea pagini cu stil, care s ncnte privirea utilizatorilor. Avantajele utilizrii CSS: o paginile se ncarc mai repede; o se poate modifica foarte uor aspectul unui ntreg site; o avem mult mai puin cod de scris pentru o pagin Web; o site-ul are mai multe anse s fie interpretat corect de ctre ct mai multe browser-e; Etichetele stilurilor HTML: <style> - definete stilul unui document HTML; <link> - definete o resurs ca referin; <div> - definete o seciune dintr-un document (element de nivel bloc generic); <span> - definete ataarea CSS la o mic poriune a unui rnd dintr-un document (element inline generic); <font> - definete dimensiunea, culoarea, tipul textului; <basefont> - definete fontul de baz dintr-un document; <center> - centreaz textul dintr-un document. OBS. n limbajul HTML exist dou tipuri de elemente: elemente de nivel bloc (care sunt afiate cu ncepere de pe un rnd nou; elemente inline (care sunt afiate pe acelai rnd). Elementele <div> i <span> pot fi utilizate ntr-o gam larg de situaii i accept atribute comune, cu excepia c elementul <span> nu accept atributul align, deoarece este element de interior de rnd. Ambele accept atributul title ce impune browserului afiarea unui text pe ecran atunci cnd mouse-ul rmne timp de cteva secunde deasupra coninutului definit de <div>, respectiv <span>. Pagini Web cu JavaScript Diana Elena Diaconu 38
4.1.1. Elementul style se poate afla n antetul documentului, n interiorul unui element dintr-o pagin Web sau n exterior. Atribute specifice elementului style: Atribut Valoare Descriere type text/css Definete coninutul unui type. media screen / tty / tv / projection / Definete destinaia mediului ales pentru stil. handheld / print / braille / aural / all Un stil este compus din dou pri: selectorul i declaraia. Selectorul este un element HTML ce poate realiza formatarea paginii Web (cum ar fi: body, H1, p) i acioneaz ca o legtur ntre pagina Web i stil. Declaraia conine elementele ce vor duce la formatarea propriu-zis a documentului. Selector Declaraia Proprietatea Valoarea Body { background-color: beige} H2 {color: red} P {font-family: Verdana} n exemplul de mai sus, stilul H2 declarat n antetul paginii Web, va schimba culoarea tuturor textelor din pagin, ce utilizeaz H2. Un selector direcioneaz un stil ctre un anumit loc dintr-un document HTML. El poate fi construit n multe feluri, prin combinaii ntre blocurile: o Element o Class o Id Selectorul Element poate fi definit cu ajutorul etichetelor de genul: <H2>, <p> care formateaz o poriune de text, ntr-un anumit fel. Odat definit stilul cu ajutorul acestor etichete, atunci cnd le utilizm n cadrul paginii Web, ele vor avea acelai efect n toat pagina. De exemplu, dac pentru H2 definim n cadrul stilului i culoarea maron, atunci, <H2> va avea aceast culoare oriunde va fi utilizat n cadrul paginii Web. n concluzie, acest tip de selector are dezavantajul c odat definit eticheta, nu mai poate fi utilizat cu efectul ei implicit, ci doar cu cel dat de stilul definit. Exemplu de utilizare a selectorului Element.
<html> <head><title>Selectorul Element</title> <style type="text/css"> H2 { margin-left: 100px; } H3 { margin-left: 150px;} p { margin-left: 20px;} </style> </head> <body> <H2>Am uitat </H2> <p> Am uitat sa fiu destept<br /> Pentru-o zi ori pentru-o viata<br /> Cat inmarmurit astept,<br /> Albe, bratele-ti de gheata.<br /> </p> <H3>Nicolae Labis </H3> </body> </html>
Selectorul Class poate fi definit cu ajutorul unui nume specific, diferit de cuvintele utilizate n cadrul etichetelor HTML. Acest lucru poate fi interpretat ca un avantaj prin faptul c nu se schimb efectele implicite ale etichetelor HTML, ci se creeaz stiluri cu nume distincte, cum ar fi: stil1, stil2, titlul_poeziei. Pentru a defini un stil, scriem .numele_class urmat de formatrile specifice stilului, cum ar fi: { font-size: 14px; }. Pentru a putea fi utilizat n cadrul corpului paginii, apelm stilul din cadrul oricrei etichete dorim, cum ar fi: <div class=numele_class> sau <body class=numele_class>. Exemplu de utilizare a selectorului Class.
<html> <head><title>Selectorul Class</title> <style type="text/css"> .fundal {background: #FFC68C;} .titlul { margin-left: 60px; color:#A94407; } .versuri { margin-left: 10px; color: #D95709;} .autor { margin-left: 160px; color: #F88743;} </style> </head> <body class="fundal"> <H2 class="titlul">Sta sufletul fara iubire </h2> <p class="versuri">Sta sufletul fara iubire cum sta o vatra ruinata,<br /> Ca un cuptor surpat de vremuri, fara de vad si fara foc,<br /></p> <H3 class="autor">Vasile Voiculescu </H3> </body></html>
Selectorul ID este unic ntr-un document HTML i se utilizeaz cu semnul # naintea numelui. De exemplu, se poate defini un selector: #xyz { color: red; } care se apeleaz <p IP=xyz>. Acest selector este identic cu selectorul class cu excepia faptului c putem avea un singur ID ntr-un document HTML. Exemplu de utilizare a selectorului ID.
<html> <head><title>Selectorul ID</title> <style type="text/css"> #fundal {background: #E5E5E5; color: #330099;} #titlul { margin-left: 60px; } #versuri { margin-left: 10px; } #autor { margin-left: 160px; } </style> </head> <body ID=fundal> <H2 ID=titlul>Te port in mine </h2> <p ID=versuri> Te port in suflet, ca pe-un vas de pret,<br /> Ca pe-o comoara-nchisa cu peceti<br /> <H3 ID="autor">Zorica Latcu </H3> </body></html>
CSS reprezint un mecanism de adugare a stilurilor, cum ar fi: fonts, colors, ntr-o pagin Web. Sunt trei modaliti de introducere a unui stil: o Stil extern - este un fiier separat de pagina web, care se salveaz cu extensia .css i este util n cazurile cnd acelai stil apare n mai multe pagini Web. n felul acesta, prin schimbarea unui stil, toate paginile care-l folosesc se vor modifica. o Stil intern se utilizeaz de ctre o singur pagin Web i se afl n codul surs al paginii, n antet. o Stil inline se utilizeaz doar ca stil unic aplicabil unui singur element, nu ntregi pagini Web. Exemplu de utilizare a stilului interior.
<html> <head><title>stil interior</title> <style type="text/css"> body {background-color:beige } p {margin-left:20px } h2 {color:brown} h4 {color:#B63B3B} h3 {color:#C74C4C} </style></head> <body> <h2>Despre ambitia cuiva de a face alt om din mine </h2> <h4>da-ma la remaiat,<br /> du-ma la intors, tese-ma din nou,<br /> zugraveste-ma, pune-mi alt guler,<br /> alta manseta, alt zbenghi,<br /> da-mi alt numar la pantofi,<br /> toaca-ma marunt<br /> si umple-ma cu condimentele moralei tale,<br /> impunge-ma cu o mie de sfaturi,<br /> imprastie-ma in patru vanturi<br /> si vei observa ca acolo unde cad<br /> se umple locul de mine<br /><br /></h4> <h3>Lucian Avramescu</h3> </body></html>
Exemplu de utilizare a stilului inline.

<html> <head><title>stil inline</title></head> <body style="background:azure"> <h3 style="font-weight: bold; color:blue">Te duci... </h3> <br /> <p style="color:mediumslateblue; marginleft:15px"> Viata-mi pare-o nebunie<br /> Sfrsita far-a fi-nceput,<br /> n toata neagra vecinicie<br /> O clipa-n brate te-am tinut. </p> <p style="font-weight: normal; color:blue; margin left:40px">Mihai Eminescu</p> </body> </html>
Exemplu de utilizare a stilului extern. Programul principal:

<html> <head><title>stil extern</title> <link rel="stylesheet" type="text/css" href="stil1.css" > </head> <body class="stil1"> <h3>Peste varfuri</h3> <p> De ce taci, cand fermecata<br /> Inima-mi spre tine-ntorn?<br /> Mai suna-vei, dulce corn,<br /> Pentru mine vre odata?<br /> </p> <p>Mihai Eminescu</p> </body></html>
Fiierul stil1.css:
.stil1 { font-family: "Courier New", Courier, mono; font-size: 14px; font-style: normal; color: #0000FF; background-color: #33CCFF; text-align: center; border-bottom-width: medium}
4.1.2. Elementul link realizeaz o legtur ntre dou documente. Atribute specifice elementului link: Atribut Valoare charset charset href hreflang media rel Descriere Definete codul caracterului intei URL. Valoarea iniial este ISO-8859-1 URL inta URL a resursei. codul limbajului Definete limbajul de baz a intei URL. all / braille / print / projection / screen / Definete tipul de dispozitiv pe care va fi speech afiat documentul. alternate / appendix / bookmark / Definete relaia dintre documentul chapter / contents / copyright / glossary curent i inta documentului. / help / home / index / next / prev / section / start / stylesheet / subsection alternate / appendix / bookmark / Definete relaia dintre inta chapter / contents / copyright / glossary documentului i documentul curent. / help / home / index / next / prev / section / start / stylesheet / subsection _blank -inta URL se va deschide ntr-o nou _self fereastr _top -inta URL se va deschide n acelai _parent cadru n care s-a executat click. -inta URL se va deschide n parent frameset -inta URL se va deschide n corpul ferestrei MIME_type: text/css sau text/javascript Specific tipul MIME al intei URL. sau image/gif Diana Elena Diaconu 42
rev
target
type
4.1.3. Elementul div definete o seciune dintr-un document. Atribute specifice elementului div: Atribut Valoare align left / right / center / justify Descriere Definete modalitatea de aliniere din elementul div.
Exemplu de utilizare a elementului div. n acest exemplu am utilizat stilul div pentru a scrie textul cu culoarea albastr.
<html> <head><title>div</title> <style type="text/css"> div {color:blue; background:cyan; font-family:cursive; font-style:italic; font-size:12pt; border-style: inset; border-width: 0.07in; border-color: blue;} </style> </head> <body> <div> <h3>Ceva ca rugaciunea</h3> Nu stiu ce am,<br /> Ca nu dorm cand dorm<br /> Nu stiu ce am,<br /> Ca nu sunt treaz,<br /> Cand stau de veghe.<br /> <p>Marin Sorescu</p> </div> </body></html>
4.1.4. Elementul span se utilizeaz pentru a grupa mai multe elemente inline ntr-un document. Exemplu de utilizare a elementului span.
<html> <head><title>span</title> </head> <body style="background: mistyrose"> <span type="text/css" style="color:red; font-size:20pt; font-weight:bold;"> Pictura cu crin</span> <p type="text/css" style="border:dotted; border-width:0.15in; border-color:red; font-style:italic;"> Si as dori s te pastrez<br /> In clipa aceasta de stralucire<br /> Ca pe-o floare, care se daruie singura<br /> Unei picturi cu sfant.</p> <p>Marin Sorescu</p> </span> </body></html>
4.1.5. Elementul font specific dimensiunea, culoarea, tipul textului (ex.font=Times New Roman). Atribute specifice elementului font: Atribut Valoare color nume culoare / valoare culoare face list nume font size un numr ntre 1 i 7 Descriere Definete culoarea textului. Definete fontul textului din elementul font. Definete dimensiunea textului din elementul font.
Exemplu de utilizare a elementului font.

<html> <head><title>font</title> </head> <body style="background: #DEFAC5"> <font type="text/css" style="color:#006666; font-size:20pt; font-weight:bold;"> Cnd nsui glasul </font><br /><br /> <font type="text/css" style="color:#009966; font-size:13pt; font-style:italic;"> Cnd nsui glasul gndurilor tace,<br /> M-ngn cntul unei dulci evlavii,<br /> Atunci te chem; chemarea-mi ascultavei?<br /> Din neguri reci plutind te vei desface? </font><br /> <font type="text/css" style="color:#00BB66; font-size:14pt; line-height:50px;"> Mihai Eminescu</font> </body> </html>
4.1.6. Elementul basefont definete fontul de baz dintr-un document. Dac nu este setat, fontul de baz este iniializat cu 3. Atribute specifice elementului basefont: Atribut color face size Valoare nume culoare / valoare culoare list nume font un numr ntre 1 i 7 Descriere Definete culoarea textului. Definete fontul textului din elementul font. Definete dimensiunea textului din elementul font.
Exemplu de utilizare a elementului basefont. Acest exemplu, chiar dac este reuit, nu utilizeaz stiluri. n concluzie nu este acceptat de HTML 4.01 i nici nu este suportat n XHTML 1.0 Strict DTD.
<html> <head><title>basefont</title> </head> <body style="background: #FFD7C4"> <basefont size=5 color="#FF3E3E" face="Verdana"> Noaptea de mai </basefont><br /><br /> <basefont size=3 color="#FF6C6C" face="Arial"> Cintati : nimic din ce e nobil, suav si dulce n-a murit.<br /> Simtirea, ca si bunatatea, deopotriva pot sa piara<br /> Din inima imbatrinita, din omul reajuns o fiara,<br /> Dar dintre flori si dintre stele nimica nu va fi clintit,<br /> Veniti : privighetoarea cinta si liliacul e-nflorit. </basefont><br /><br /> <basefont size=4 color="#FF9D9D" face="Times"> Alexandru Macedonski</basefont> </body></html>
4.1.7. Elementul center centreaz textul dintr-un document i se scrie ntre etichetele <center> i </center>. Exemplu de utilizare a elementului center. n acest exemplu, titlul este scris centrat cu ajutorul etichetei <center> (nu este stil), iar pentru restul textului, acelai efect este produs cu ajutorul stilului CSS (varianta acceptat de HTML 4.01 i XHTML 1.0 Strict DTD).
<html> <head><title>center</title> </head> <body> <center>Dans n ploaie </center><br /><br /> <p type="text/css" style="font-size=15; text-align:center;"> Lsai ploaia s m mbrieze i destrame-m vntul,<br /> lubii-mi liberul dans fluturat peste voi -<br /> Genunchii mei n-au srutat niciodat pmntul,<br /> Prul meu nu s-a zbtut niciodat-n noroi!<br /> <br /><br /> Ana Blandiana</p> </body> </html>
4.2. Atribute CSS

Pentru fundal se utilizeaz atributele: o background introduce imagini sau culori de fundal. Imaginile se introduc cu ajutorul URLului, iar culorile cu ajutorul numelui predefinit n limba englez (Ex. white, green) sau a valorii RGB (Ex. #FFFFFF pentru alb). o color introduce culoarea textului paginii Web cu ajutorul numelui sau al valorii RGB. Fonturile se introduc cu ajutorul urmtoarelor atribute: o font-family introduce tipul fontului cu ajutorul numelui sau al familiei de fonturi (Ex Arial) o font-size introduce dimensiunea fontului, care poate fi dat n pixeli (px), inch (in), puncte (pt) sau centimetri (cm). o font-style introduce un text cursiv nclinat (Ex italic) sau normal o font-weight introduce grosimea fontului care poate fi dat cu ajutorul dimensiunilor predefinite de la subire la gros: extra-light, demi-light, medium, demi-bold, bold, extra-bold. Aranjarea textului este destul de dificil dac nu avem la ndemn instrumentele necesare. Pentru a rezolva aceast problem, stabilim marginile cu ajutorul atributelor: o margin-left stabilete distana dintre textul documentului i marginea din stnga a paginii; o margin-right - stabilete distana dintre textul documentului i marginea din dreapta a paginii; o margin-top stabilete distana dintre textul documentului i marginea de sus a paginii; Aranjarea secvenelor de text se realizeaz i cu ajutorul atributelor: o text-align realizeaz alinierea textului i poate avea valorile: left (stnga), de exemplu: text-align=left; center (centru); right (dreapta); justify (stnga i dreapta); o line-height stabilete distana dintre rndurile textului; o text-decoration stabilete anumite decoraii pentru diferite poriuni de text, cu ajutorul atributelor: none (nimic); underline (subliniat); italic (nclinat); line-through (tiat) o text-indent stabilete distana primului rnd dintr-un paragraf, fa de marginea din stnga; o border-style stabilete tipul chenarului n care va fi ncadrat textul i are atributele: none (nimic); groove; dotted (chenar cu buline); dashed (chenar cu linie ntrerupt); solid (chenar plin); double (chenar cu dou linii); ridge (chenar cu dou nuane de culori); inset; outset o border-width stabilete grosimea chenarului; o border color stabilete culoarea chenarului cu ajutorul numelui sau al valorii n hexazecimal n continuare voi prezenta un exemplu de utilizare a elementelor CSS, n care nu folosim elementele predefinite, ci definim altele noi. Pentru fiecare poriune de text voi utiliza un Pagini Web cu JavaScript Diana Elena Diaconu 46
stil definit n antetul documentului. La utilizarea stilului respectiv, atributul class va primi numele definit n antet.
<html> <head> <title>class</title> <style type="text/css"> .titlul_poeziei { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-style: normal; line-height: 10mm; fontweight: bolder; font-variant: normal; color: #0000FF; letter-spacing: 2mm; word-spacing: 10mm; text-align: center; vertical-align: top; border-color: black black #0000FF; border-bottom-width: medium} .textul_poeziei { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-style: oblique; font-weight: lighter; color: #0033FF} .autorul_poeziei { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: italic; line-height: 20mm; font-weight: bold; color: #0000FF; text-indent: 50pt} </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <p class="titlul_poeziei">Fior </p> <p class="textul_poeziei">Cine esti, ori ce esti,<br> Abur ori duh coborât din povesti,<br> Unda prelinsa sa ma învenine,<br> Stea fulgerata în mine? </p> <p class="autorul_poeziei">Nicolae Labis</p> </body></html>
OBS Un element HTML poate avea doar un singur atribut class. Este greit s scriem
<p class="titlul_poeziei" class="textul_poeziei"> Fior </p>
n exemplul de mai sus, stilurile: .titlul_poeziei, .textul_poeziei, .autorul_poeziei pot fi utilizate de ctre orice elemente HTML, nu numai de ctre elementul <p>. Dimensiunea textului Dup cum am spus mai sus, textul poate fi redimensionat cu ajutorul urmtoarelor elemente: Point sau pt, Dimensiunea standard a textului afiat ntr-un editor de texte este de 10pt. Cnd utilizai pt, cel mai indicat este s folosii dimensiuni mai mari sau egale cu 10 pt. Acest mod de dimensionare a textului este utilizat n special de ctre cei care doresc s tipreasc documentul i doresc o bun ncadrare a textului n pagin. Exemplu: p1 {font-size: 20 pt;} Ems este o unitate de msur relativ la orice element printe a textului care-l conine. De exemplu, dac definim elementul printe p1 {font-size: 20 pt;}, dup care definim p2{font-size: 2em;} dimensiunea celui de-al doilea text este de dou ori mai mare dect a primului text. Pixel sau px este o modalitate de a dimensiona textul cu ajutorul dimensiunii unui pixel. Acest mod este util pentru afiarea unui text, dar nu i pentru printarea lui. Pagini Web cu JavaScript Diana Elena Diaconu 47
P3 {font-size: 33px; } Procent sau % este o dimensiune relativ la orice element printe, ca i ems. P4 {font-size: 150%; } Alte uniti de msur care pot fi utilizate sunt: in (inch), ex (x-height), cm (centimetri), mm (milimetri), pc (picas). Aceste elemente pot da o dimensiune clar a textului, spre deosebire de urmtoarele care sunt parte a specificaiilor CSS i definesc o dimensiune aproximativ: xxsmall, x-small, small, medium, large, x-large, xx-large. Am spus aproximativ deoarece browser-ele interpretez puin diferit aceste elemente.
4.3. Aplicaii interesante cu CSS

Text scris vertical n acest exemplu vom utiliza un stil ce face ca textul s apar afiat pe vertical.
<html> <head> <title>text vertical</title> <style> .stil { writing-mode: tb-rl; filter: flipH() flipV(); </style> </head> <body> <span class="stil"> Text scris vertical </span> </body></html>
Scroll colorat Stilurile se pot aplica i asupra barei de derulare, dup cum putem vedea n exemplul acesta .
<html> <head> <title>Bara de derulare</title> <style> body { background-color: #9DFF9D; scrollbar-3dlight-color:#15FF15; scrollbar-arrow-color:#001155; scrollbar-base-color:#033000; scrollbar-darkshadow-color:#000d00; scrollbar-face-color:15FF15; scrollbar-highlight-color:#0d0000; scrollbar-track-color:#006000; scrollbar-shadow-color:#22d000 } p {color: #006000;} </style></head> <body> <p>Testament literar <br /><br /> Urmaşilor mei Văcăreşti!<br /> Las vouă moştenire:<br /> Creşterea limbei romăneşti<br /> S-a patriei cinstire.<br /><br /> Ienăchită Văcărescu</p> </body></html>
Tipuri de cursor Am utilizat n acest exemplu toate tipurile de cursor pe care le putem utiliza. Dup cum vei putea vedea mai jos, n dreptul cursorului de tip help apare un semn de ntrebare, cursorul de tip crosshair apare ca o cruciulia, cel de tip pointer ca o mnu. Toate aceste tipuri de cursor le vei putea utiliza n diverse exemple, n funcie de situaie.
<html> <head><title>tipuri de cursor</title> <style type=text/css> .s1 {background-color:#B3FFFF; cursor:auto;} .s2 {cursor:crosshair;} .s3 {cursor:default;} .s4 {background-color:#B3FFFF; cursor:e-resize;} .s5 {background-color:#B3FFFF; cursor:help;} .s6 {cursor:inherit;} .s7 {cursor:move;} .s8 {background-color:#B3FFFF; cursor:ne-resize ;} .s9 {background-color:#B3FFFF; cursor:n-resize;} .s10 {cursor:nw-resize;} .s11 {cursor:pointer;} .s12 {background-color:#B3FFFF; cursor:s-resize;} .s13 {background-color:#B3FFFF; cursor:se-resize;} .s14 {cursor:sw-resize;} .s15 {cursor:text;} .s16 {background-color:#B3FFFF; cursor:wait;} .s17 {background-color:#B3FFFF; cursor:w-resize;} </style> </head> <body> <table> <tr><td class=s1>Cursor de tip auto</td> <td class=s2>Cursor de tip crosshair</td></tr> <tr><td class=s3>Cursor de tip default</td> <td class=s4>Cursor de tip eresize</td></tr> <tr><td class=s5>Cursor de tip help</td> <td class=s6>Cursor de tip inherit</td></tr> <tr><td class=s7>Cursor de tip move</td> <td class=s8>Cursor de tip neresize</td></tr> <tr><td class=s9>Cursor de tip nresize</td> <td class=s10>Cursor de tip nwresize</td></tr> <tr><td class=s11>Cursor de tip pointer</td>
<td class=s12>Cursor de tip sresize</td></tr> <tr><td class=s13>Cursor de tip seresize</td> <td class=s14>Cursor de tip swresize</td></tr> <tr><td class=s15>Cursor de tip text</td> <td class=s16>Cursor de tip wait</td></tr> <tr><td class=s17>Cursor de tip wresize</td></tr> </table> </body> </html>
Text cu umbr n acest exemplu am utilizat stiluri pentru a afia un text cu efectul de umbr.
<html> <head> <title>Efect text</title> <STYLE type=text/css> DIV { position: absolute; font-size: 16px; left: 20px; top: 20px; } </STYLE> </head> <body style="margin: 0px"> <STYLE type=text/css> .umbra { left: 1px; top: 1px; color: #999999; } .original { left: 0px; top: 0px; color: #0000FF; } </STYLE> <DIV class=citat> <DIV class=umbra>Priveste atent in tine insuti. <br /> Inlauntrul tau este izvorul binelui, <br /> totdeuna va tisni de acolo puterea, <br /> daca ai sa sapi necontenit si cu staruinta.<br /><br /> Marcus Aurelius, Catre sine</DIV> <DIV class=original>Priveste atent in tine insuti. <br /> Inlauntrul tau este izvorul binelui, <br /> totdeuna va tisni de acolo puterea, <br /> daca ai sa sapi necontenit si cu staruinta.<br /><br /> Marcus Aurelius, Catre sine</DIV> </DIV> </body> </html>
Evaluare
6. Care sunt modalitile de introducere a unui stil? 7. Cum putem modifica rapid aspectul unui ntreg site Web? 8. Creai o pagin Web ce prezint formaia de muzic preferat de dumneavoastr, n care s utilizai numai stiluri CSS. 9. Creai trei pagini Web ce conin stilurile: extern, intern i inline. Facei o analiz comparativ ntre cele trei modaliti de introducere a stilurilor, insistnd pe avantajele i deosebirile dintre ele. 10. Browser-ele ignor spaiile albe? a) da; b) nu
Capitolul 5.
JavaScript
Obiective:
- s neleag noiunea de JavaScript - s neleag avantajele i dezavantajele utilizrii scripturilor JavaScript.
5.1. Introducere
Acest capitol este aproape imposibil de asimilat dac nu ai parcurs capitolele anterioare. Este important s cunoatei deja noiunile de Internet, WWW i s titi s creai pagini Web simple n HTML. n afar de acestea, ar fi bine s fii familiarizai cu un limbaj de programare cum ar fi: C, C++, C#, Visual Basic sau Java, dar nu este o condiie fr de care s nu putei trece mai departe. Corporaia Netscape Communications a creat limbajul de scriptare LiveScript pentru Web designers i dezvoltatori. n decembrie 1995, LiveScript a fost redenumit JavaScript i lansat ca parte component a browser-ului Netscape Navigator 2.0 de ctre Netscape Corporation i Sun Microsystems JavaScript a fost proiectat ca fiind un limbaj de scriptare simplu, pentru programatori nceptori care nu cunosc Java i pentru Web designers. Acest limbaj de scriptare este simplu, deoarece la scrierea unui script nu suntem obligai s declarm variabilele nainte de a le utiliza i nici s utilizm un compilator. Browser-ul este cel care interpreteaz scriptul i care ne arat dac avem greeli. Nu este nevoie s utilizm un compilator Java sau C, nu este necesar s instalm diverse soft-uri pe computerul nostru pentru a putea vizualiza rezultatul. Nu avem nevoie dect de un browser. Browser-ul care a interpretat pentru prima dat scripturile JavaScript este Netscape, dup care au urmat Internet Explorer, Opera, Mozilla i altele. JavaScript este interpretat de ctre browser-e i poate funciona indiferent de platform. Sistemele de operare pe care poate fi interpretat un script JavaScript sunt: Windows, UNIX, Macintosh. Cu JavaScript putem crea pagini Web dinamice, interactive, pop-up, bare de navigare, putem trimite date pentru verificare prin Internet, putem controla applet-uri Java. JavaScript este un limbaj care poate fi utilizat att pe parte de client ct i pe parte de server. JavaScript este un limbaj de scriptare bazat pe obiecte, nu orientat pe obiecte cum este limbajul de programare Java. JavaScript nu este Java, chiar dac asemnarea numelor poate duce la aceast confuzie. Cu JavaScript nu putem crea applet, dar l putem interpreta, dup ce l crem cu Java. JavaScript este un limbaj interpretat de ctre browser i nu are nevoie s fie compilat nainte de a fi rulat. Browser-ul analizeaz fiecare element al paginii Web pe rnd, mprindu-l n componente mai mici. n funcie de locul unde este plasat un script, scriptul poate fi pe parte de client sau pe parte de server. Dac scriptul ruleaz n browser-ul clientului, atunci l numim script pe parte de client, aa cum sunt majoritatea script-urilor. Ca rspuns la provocarea lansat de Netscape, au aprut i alte limbaje de scriptare asemntoare: o Microsoft a lansat propriul limbaj de scriptare cu numele VBScript, iar n iulie 1996 a lansat Internet Explorer 3.0 cu JScript inclus; o ECMA a lansat n iunie 1997 o versiune numit ECMAScript, care este de fapt standard interneional pentru JavaScript. Rezultatul la care trebuie sa ajung orice firm ce dorete s furnizeze un limbaj de scriptare este c acel limbaj trebuie s ruleze independent de platform pentru a tri n spaiul Pagini Web cu JavaScript Diana Elena Diaconu 52
Web. Acest lucru duce la concluzia c, att utilizatorii ct i dezvoltatorii de soft trebuie s lucreze mpreun pentru a gsi soluii utile tuturor. Bineneles c JavaScript are i dezavantaje, cum ar fi faptul c se pot crea bucle infinite cu ajutorul instruciunilor repetitive sau atacuri asupra computerelor care permit rularea diverselor scripturi, dar un utilizator Internet cu puin experien nu ar trebui s-i fac probleme. Orice limbaj de programare poate fi folosit att pentru a crea lucruri bune, ct i pentru a crea lucruri rele. JavaScript este doar un limbaj de scriptare, adic un instrument!
5.2. Unde scriem script-urile JavaScript

Ca i un stil CSS, un script JavaScript poate fi scris att n pagina Web, n antet sau n corpul documentului, ct i n exteriorul ei, ca fiier separat. Fiierele care conin scripturi JavaScript se salveaz cu extensia .js. Pentru scripturile simple, cel mai uor este s le introducem n interiorul paginii Web, n antet i mai rar n corpul paginii. Scripturile complexe, care este posibil s genereze erori la interpretare sau care se ncarc mai greu este indicat s le salvm ntr-un fiier separat i s le apelm din interiorul paginii Web. Mai este ns un motiv pentru care scripturile ar trebui scrise separat i anume posibilitatea ca acestea s fie modificate individual, fr s modificm toat pagina Web sau tot site-ul care utilizeaz acest script. Ca i la HTML, scriptul JavaScript se introduce ntre dou etichete <script> i </script> la care ar trebui s adugm language=JavaScript pentru ca browser-ul s tie ce fel de script urmeaz. Exemplu Cum scriem un script JavaScript n head.
<html> <head><title>JavaScript in head</title> <script language="JavaScript"> document.write("Acum avem scriptul in head") </script> </head> <body> </body> </html>
Exemplu Cum scriem un script JavaScript n body.

<html> <head><title>Primul exemplu JavaScript </title> </head> <body> <script language="JavaScript"> document.write("Primul meu exemplu JavaScript") </script> </body> </html>
Important! JavaScript este case-sensitive, adic este important s utilizm numele variabilelor aa cum le-am declarat, cu litere mari sau mici. Dac am declarat o variabil cu numele X1, nu o putem folosi ca x1, ci doar cu numele X1.
5.3. Operatori JavaScript

5.3.1. Operatori aritmetici JavaScript conine operatorii aritmetici standard, ntlnii i n limbajele de programare C i C++. Din punctul de vedere al operanzilor la care se aplic, operatorii sunt de dou feluri: unari i binari. Operatorii unari se aplic unui singur operand, iar operatorii binari se aplic ntre doi operanzi. Operator + * / % Tip de operator unar unar binar binar binar Descriere adunarea a dou valori diferena a dou valori nmulirea a dou valori mprirea a dou valori restul a dou valori Exemplu +x sau a+b -x sau a-b a*b a/b a%b
Exemplu de utilizare a operatorilor aritmetici.

<html> <head><title>Operatori aritmetici</title> </head> <body><pre> <script language="JavaScript"> var x=5, y=2; document.writeln("x=5 y=2"); document.writeln("x+y=",x+y); document.writeln("x-y=",x-y); document.writeln("x impartit la y = ",x/y); document.writeln("Restul impartirii lui x la y = ",x%y); </script> </pre> </body></html>
OBS n exemplul de mai sus am declarat variabilele x i y nainte de a le utiliza. Declararea variabilelor ns nu este obligatorie, acest limbaj ne permite s le utilizm fr s le declarm anterior. 5.3.2. Operatori de incrementare / decrementare Operatorii se mai clasific i n funcie de operaia pe care o efectueaz i anume n: o operatori de incrementare crete valoarea variabilei cu o unitate o operatori de decrementare scade valoarea variabilei cu o unitate; care la rndul lor sunt de dou feluri: o prefixat operatorul se scrie naintea operandului. Operaia de incrementare (sau decrementare) se efectueaz nainte de a se efectua operaiile expresiei n care se afl. Exemplu dac iniial a=1 i x=++a; vom avea la final x=2 i a=2, adic se incrementeaz variabila a cu o unitate nainte de a i se atribui variabilei x valoarea variabilei a. o postfixat operatorul se scrie dup operand. Operaia de incrementare (sau decrementare) se efectueaz dup ce se efectueaz operaiile expresiei n care se afl. Exemplu dac iniial a=1 i x=a++; vom avea la final x=1 i a=2, adic se incrementeaz variabila a cu o unitate dup ce i se va atribui variabilei x valoarea variabilei a. Operator Tip de operator ++ incrementare -decrementare Descriere incrementare prefixat incrementare postfixat decrementare prefixat decrementare postfixat Exemplu ++x sau x=x+1 x++ sau x=x+1 --x sau x=x-1 x- - sau x=x-1 Diana Elena Diaconu 54
Exemplu de utilizare a operatorilor de incrementare/ decrementare.

<html> <head><title>Operatori de incrementare/ decrementare </title> </head> <body> <pre> <script language="JavaScript"> var x=1, y=2; document.writeln("x=1 y=2"); document.writeln("z=++x-y--=",++x-y--); </script> </pre> </body></html>
5.3.3. Operatori de comparaie Pentru a compara doi operanzi, utilizm operatorii binari de comparaie, descrii n tabelul de mai jos. Operator == != > < >= <= Descriere operator de egalitate operator de inegalitate mai mare dect... mai mic dect... mai mare sau egal mai mic sau egal Exemplu pentru x=2 i y=3 x==y x!=y x>y x<y x>=y x<=y Rezultat false true false true false true
Exemplu de utilizare a operatorilor de comparaie.

<html> <head> <title>Operatori de comparatie</title> </head> <body> <pre> <script language="JavaScript"> var x=2, y=3; document.writeln("x=2 y=3\n"); document.writeln("z=(x>y) => z= z=(x>y)); document.writeln("z=(x<=y)=> z= z=(x<=y)); document.writeln("z=(x==y)=> z= z=(x==y)); document.writeln("z=(x!=y)=> z= z=(x!=y)); </script> </pre> </body> </html>
", ", ", ",
OBS Codurile \n, \t se utilizeaz pentru a trece la o linie nou, respectiv pentru a lsa un spaiu, similar cu cel lsat de tasta Tab. Aceste coduri se utilizeaz n cadrul unui script ncadrat de etichetele <pre> i </pre>. 5.3.4. Operatori logici (booleeni) Aceti operatori se utilizeaz n cadrul unor expresii logice sau se aplic unor variabile, constante. Rezultatul unei expresii logice este tot o valoare logic. Valorile logice sunt true i false. Zero (0) are valoarea logic false, iar orice numr diferit de zero are valoarea logic true. Operator ! Descriere - operatorul logic NOT (negaie logic) - operator unar - returneaz o valoare logic diferit Exemplu pentru x=0 i y=3 !x !y !(x==y) !(x!=y) !(x>y) !(-25) x&&y (!x)&&y 0&&1 (4<=2)&&(5>=4) (x==0)&&(y==3) x||y (!x)||y 0||1 (4<=2)||(5>=4) (x==0)||(y==3) Rezultat true false true false true false 0 3 0 false true 3 true 0 true true
&&
||
- operatorul logic AND (i logic) - operator binar - returneaz true dac ambii operanzi (sau expresii) au valoarea true, altfel returneaz false. - operatorul logic OR (sau logic) - operator binar - returneaz false dac ambii operanzi (sau expresii) au valoarea false, altfel returneaz true.
Exemplu de utilizare a operatorului !

<html> <head> <title>Operatorul !</title> </head> <body> <pre> <script language="JavaScript"> var x=0, y=3; document.writeln("x=0 y=3\n"); document.writeln("z=!x => z= ", z=!x); document.writeln("z=y => z= ", z=y); document.writeln("z=!(x==y)=> z= ", z=!(x==y)); document.writeln("z=!(x<y)=> z= ",z=!(x<y)); </script> </pre> </body> </html>
&& true false
true true false
false false false
|| true false
true true true
false true false
Exemplu de utilizare a operatorului &&.

<html> <head><title>Operatorul logic &&</title> </head> <body> <pre> <script language="JavaScript"> var x=0, y=3; document.writeln("x=0 y=3\n"); document.writeln("z=x&&y => z= ", z=x&&y); document.writeln("z=(!x)&&y => z= ", z=(!x)&&y); document.writeln("z=0&&1 => z= ", z=0&&1); document.writeln("z=(4<=2)&&(5>=4)=>z=",z=( 4<=2)&&(5>=4)); document.writeln("z=(x==0)&&(y==3)=>z=",z=( x==0) &&(y==3)); </script> </pre> </body> </html>
Exemplu de utilizare a operatorului ||.

<html> <head><title>Operatorul logic ||</title> </head> <body> <pre> <script language="JavaScript"> var x=0, y=3; document.writeln("x=0 y=3\n"); document.writeln("z=x||y => z= ", z=x||y); document.writeln("z=(!x)||y => z= ", z=(!x)||y); document.writeln("z=0||1 => z= ", z=0&&1); document.writeln("z=(4<=2)||(5>=4)=> z= ", z=(4<=2)||(5>=4)); document.writeln("z=(x==0)||(y==3)=> z= ", z=(x==0)||(y==3)); </script> </pre> </body> </html>
5.3.5. Operatori logici pe bii (bitwise) Aceti operatori sunt operatori binari i acioneaz numai asupra operanzilor de tip ntreg. Operator & Descriere - operatorul logic i pe bii (bitwise and &) - returneaz 1 dac ambii operanzi sunt 1, altfel returneaz 0. - operatorul logic sau pe bii (bitwise or 1) - returneaz 0 dac ambii operanzi sunt 0, altfel returneaz 1. - operatorul logic sau exclusiv pe bii (bitwise xor ^) - returneaz ^ dac un singur operand este 1, altfel returneaz 0. - operatorul logic de deplasare spre stnga a coninutului tuturor biilor operandului din stnga sa, cu un numr de poziii egal cu valoarea reinut de al doilea operand. - Poziiile rmase libere (n dreapta) vor reine valoarea 0. - operator logic de deplasare spre dreapta - deplaseaz spre dreapta coninutul tuturor biilor operandului din stnga cu un numr de poziii egal cu valoarea reinut de al doilea operand. Exemplu 0&0 1&0 0&1 1&1 0|0 1|0 0|1 1|1 0^0 1^0 0^1 1^1 X=1010 X<<1 X<<12 Y=1001 Y<<0001 Y<<2 Y<<5 X=1010 X>>1 X>>12 Y=1001 Y>>0001 Y>>2 Y>>5 Rezultat 0 0 0 1 0 1 1 1 0 1 1 0 2020 4136960 2002 4004 32032 505 0 500 250 31
<<
>>
Exemplu de utilizare a operatorului &.

<html> <head> <title>Operatorul logic &</title> </head> <body> <pre> <script language="JavaScript"> var x=5, y=0; document.writeln("x=5 y=0\n"); document.writeln("z=x&y => z= z=x&y); document.writeln("z=x&(!y) => z= z=x&(!y)); document.writeln("z=0&1 => z= z=0&1); document.writeln("z=(4<=2)&(5>=4)=> z= z=(4<=2)&(5>=4)); document.writeln("z=(x==5)&(y==0)=> z= z=(x==5)&(y==0)); </script> </pre> </body> </html>
", ", ", ", ",
Exemplu de utilizare a operatorului |.

<html> <head> <title>Operatorul logic | </title> </head> <body> <pre> <script language="JavaScript"> var x=5, y=0; document.writeln("x=5 y=0\n"); document.writeln("z=x|y => z= document.writeln("z=x|(!y) => z= document.writeln("z=0|1 => z= document.writeln("z=(4<=2)|(5>=4)=> z= ",z=(4<=2)|(5>=4)); document.writeln("z=(x==5)|(y==0)=> z= z=(x==5)|(y==0)); </script> </pre> </body> </html>
", z=x|y); ", z=x|(!y)); ", z=0|1); ",
Exemplu de utilizare a operatorului ^.

<html> <head> <title> Operatorul logic ^ </title> </head> <body> <pre> <script language="JavaScript"> var x=5, y=0; document.writeln("x=5 y=0\n"); document.writeln("z=true^false => z= z=true^false); document.writeln("z=x^y => z= document.writeln("z=x^(y^2) => z= document.writeln("z=x^(!y) => z= document.writeln("z=1^1 => z= document.writeln("z=(4<=2)^(5>=4)=> z= z=(4<=2)^(5>=4)); document.writeln("z=(x==5)^(y==0)=> z= z=(x==5)^(y==0)); </script> </pre> </body> </html>
", ", ", ", ", ", ", z=x^y); z=x^(y^2)); z=x^(!y)); z=1^1);
Exemplu de utilizare a operatorului <<.

<html> <head><title>Operatorul logic <<</title></head> <body> <pre> <script language="JavaScript"> var x=1000 , y=1111; document.writeln("x=1000 (2) y=1111 (2)\n"); document.writeln("x<<0001 => ", x<<0001); document.writeln("x<<4 => ", x<<4); document.writeln("y<<0001 => ", y<<0001); document.writeln("y<<1 => ", y<<1); document.writeln("y<<4 => ", y<<4); </script> </pre> </body> </html>
Exemplu de utilizare a operatorului >>.

<html> <head><title>Operatorul logic >></title> </head> <body> <pre> <script language="JavaScript"> var x=1000 , y=1111; document.writeln("x=1000 (2) y=1111 (2)\n"); document.writeln("x>>0001 => ", x>>0001); document.writeln("x>>4 => ", x>>4); document.writeln("y>>0001 => ", y>>0001); document.writeln("y>>1 => ", y>>1); document.writeln("y>>4 => ", y>>4); </script> </pre> </body> </html>
5.3.6. Operator pentru iruri de caractere (string) Operatorul de concatenare (+) este un operator binar cu ajutorul cruia se pot uni dou iruri de caractere. Exemplu de utilizare a operatorului de concatenare.
<html> <head><title>Operatorul de concatenare</title> </head> <body> <pre> <script language="JavaScript"> var x="Eu nu strivesc "; y="corola de minuni"; z="a lumii"; document.writeln(x+y+" "+z); </script> </pre> </body> </html>
5.3.7. Operatori de atribuire Operatorii de atribuire se utilizeaz ntre un operand pe care l scriem n partea stng i o constant, o variabil sau o expresie n partea dreapt a operatorului. Nu se scriu expresii n partea stng a unui operator de atribuire. Operator Exemplu prescurtat = x=3 z=2*x+y*x += x+=1 -= x-=1 *= x*=3 /= x/=3 %= x%=3 <<= x<<=3 >>= x>>=2 >>>= x>>>=5 &= x&=6 ^= x^=2 |= x|=y Exemplu de utilizare a operatorilor de atribuire.
<html> <head> <title> Operatorii de atribuire </title> </head> <body> <pre> <script language="JavaScript"> var x=2; y=3; document.writeln("x=2 y=3\n"); document.writeln("x+=y => x=",x+=y); document.writeln("x-=y+1 => x=",x-=y+1); document.writeln("y%=2 => y=",y%=2); document.writeln("y<<=x => y=",y<<=x); document.writeln("x>>>=y => y=",x>>>=y); </script> </pre> </body> </html>
Exemplu x=3 z=2*x+y*x x=x+1 x=x-1 x=x*3 x=x/3 x=x%3 x=x<<3 x=x>>2 x=x>>>5 x=x&6 x=x^2 x=x|y
5.3.8. Operatorul condiional Operatorul condiional se utilizeaz n cadrul expresiilor condiionale. Forma general: (cond.)?expr.1:expr.2 Se evalueaz condiia cond., iar dac este adevrat sau diferit de 0, atunci se execut expresia expr.1, altfel se execut expresia expr.2. Exemplu de utilizare a operatorului condiional.
<html> <head><title>Operatorul conditional</title> </head> <body> <pre> <script language="JavaScript"> var x=5; y=7; document.writeln("x=2 y=3\n"); document.writeln("Calculati elementul maxim."); document.writeln("Expresia conditionala este:"); document.writeln(" (x>y)?\"max=x\":\"max=y"); document.writeln("Rezultatul este: ",(x>y)?"max=x":"max=y"); </script></pre> </body></html>
5.3.9. Operatorul typeof Operatorul typeof returneaz tipul de date coninut de operandul su. Tipurile de date pe care le poate returna sunt: - string pentru iruri de caractere - number pentru numere - function pentru funciile JavaScript - object pentru obiectele JavaScript Exemplu de utilizare a operatorului typeof.
<html> <head><title>Operatorul typeof</title> </head> <body> <pre> <script language="JavaScript"> document.writeln("variabila\t\ttipul de date\n"); var x1=-33.4; document.writeln("x1=-33.4\t\t",typeof x1); x2=234; document.writeln("x2=234\t\t\t",typeof x2); y="Lucian Blaga"; document.writeln("y=\"Lucian Blaga\"\t",typeof y); z=escape; document.writeln("z=escape\t\t",typeof z); t=Image; document.writeln("t=Image\t\t\t",typeof t); </script> </pre> </body></html>
Evaluare
11. Facei o analiz comparativ ntre JavaScript i Java, prezentnd avantajele i dezavantajele utilizrii lor. 12. Creai un script JavaScript ce afieaz dac variabilele x=3.14 i y=44 sunt diferite sau nu.
5.4. Instruciuni
n JavaScript instruciunile se clasific n: instruciuni primitive, instruciuni condiionate (de decizie) i instruciuni repetitive. Instruciunile reprezint aciunile ce trebuiesc executate pentru a putea obine anumite rezultate. 5.4.1. Instruciuni primitive Instruciunile primitive se clasific n: Instruciunea vid ; Atunci cnd nu este necesar nici o prelucrare a datelor, putem utiliza instruciunea; Aceast instruciune nu returneaz nici un rezultat, dar este necesar utilizarea ei. Instruciunea compus Pentru cazul n care trebuiesc executate mai multe instruciuni mpreun se utilizeaz instruciunea compus: { instruciune 1; instruciune 2; .................. instruciune n; } Instruciunea compus se utilizeaz atunci cnd dorim s grupm mai multe instruciuni, pentru a putea fi executate n ordine. Instruciunea expresie O instruciune expresie poate fi: o expresie, o atribuire sau apelul unei funcii. Exemplu de utilizare a instruciunilor primitive.
<html> <head><title>Instructiuni primitive</title></head> <body> <pre><script language="JavaScript"> document.writeln("Instructiuni primitive\n"); {var x=2; z=x*2-3; ;} document.writeln("; => Instructiunea vida"); document.writeln("z=x*2-3; => Instructiunea expresie"); document.writeln("{\nz=x*2-3;\n}\t => Instructiunea compusa"); </script> </pre> </body></html>
Exemplu de utilizare a instruciunii expresie, n cadrul interschimbrii coninutului a dou variabile.

<html> <head> <title> Instructiunea expresie </title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Se citesc doua numere x si y\nSa se interschimbe continutul lor\nsi sa se afiseze rezultatul."); x=eval(prompt("Dati x:")); y=eval(prompt("Dati y:")); document.writeln("x=",x,"\ny=",y); document.writeln("\nRaspuns:"); z=x; x=y; y=z; document.writeln("Dupa interschimbare x=",x," y=",y); </script> </pre> </body> </html>
OBS n acest exemplu am utilizat funcia eval, ce ne permite evaluarea unor date citite de la tastatur prin intermediul unei csue de dialog. Vom studia acest funcie mai trziu. Exemplu de utilizare a instruciunii expresie, pentru calcularea mediei aritmetice a dou numere citite de la tastatur.
<html> <head> <title> Media aritmetica </title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Se citesc doua numere x si y\nSa se afiseze media aritmetica a lor."); x=eval(prompt("Dati x:")); y=eval(prompt("Dati y:")); document.writeln("x=",x,"\ny=",y); document.writeln("\nRaspuns:"); ma=(x+y)/2; document.writeln("Media aritmetica ma=", ma); </script> </pre> </body> </html>
5.4.2. Instruciuni de decizie Instruciunile condiionate (de decizie) se clasific n: Instruciunea If Se utilizeaz pentru a lua o decizie n funcie de o condiie dat. Sintaxa pentru instruciunea de decizie simpl: if (cond.) { instr. 1; } else { instr. 2; } Principiul de execuie este urmtorul: - se evalueaz condiia; - dac se ndeplinete condiia (cond.), se execut instruciunea instr.1, altfel se execut instruciunea instr.2.
Sintaxa pentru instruciunea de decizie compus: if (cond.) Principiul de execuie este similar cu cel al { instr. 01; instruciunii de decizie simpl. instr. 02; - se evalueaz condiia (cond.); ........ - dac se ndeplinete condiia (cond.), se execut instruciunile de la instr.01 pn la instr. 0n; } instr.0n; else - dac nu se ndeplinete condiia (cond.), se { instr. 1; execut instruciunile de la instr.1 pn la instr. 2; instr.n. ........ instr. n; } Exemplu de utilizare a instruciunii if.
<html> <head> <title> Instructiunea if </title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Se dau doua numere x=12 si y=11.\nSa se calculeze elementele min si max.\n"); document.writeln("Raspuns:"); var x=12; y=11; if (x>y) { document.writeln("max=",x,"\tsi min=",y); } else { document.write("max=",y); document.writeln("\tsi min=",x); } </script> </pre> </body> </html>
Exemplu de utilizare a instruciunii if.

<html> <head> <title>Instructiunea if</title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Se citesc trei numere x, y si z.\nSa se afiseze daca cele trei numere\npot forma laturile unui triunghi."); document.writeln("Raspuns:"); x=eval(prompt("Dati x:")); y=eval(prompt("Dati y:")); z=eval(prompt("Dati z:")); if ((x>0)&&(y>0)&&(z>0)&&(x+y>z)&&(x+z>y)&&( y+z>x)) {document.writeln("x=",x,"\ny=",y,"\nz=",z," \npot forma laturile unui triunghi");} else {document.writeln("x=",x,"\ny=",y,"\nz=",z," \nnu pot forma laturile unui triunghi");} </script> </pre> </body> </html>
Exemplu de utilizare a instruciunii if. x-1 , x<1 F= x , x=1 x+5 , x>1

<html> <head> <title>Instructiunea if</title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Se citeste un numar x.\nDaca x<1, F=x-1\n x=1, F=x\n x>1, F=x+5"); x=eval(prompt("Dati numarul x:")); document.writeln("Raspuns:"); if (x<1) document.writeln("F= ",x-1); else { if (x==1) document.writeln("F= ",x); else document.writeln("F= ",x+5); } </script> </pre> </body></html>
Exemplu de utilizare a instruciunii if, n ecuaia de gradul 2.

<html> <head><title>Ec. de gr. 2</title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Se citesc cei trei coeficienti\nai unei ecuatii de gradul 2: a, b si c.\nSa se afiseze radacinile ecuatiei."); a=eval(prompt("Dati a:")); b=eval(prompt("Dati b:")); c=eval(prompt("Dati c:")); document.writeln("\nRaspuns:"); document.writeln("a=",a,"\nb=",b,"\nc=",c ); if (a==0) {x=-c/b; document.writeln("Ecuatia este de gradul I\nSolutia ecuatiei este x=",x);} else {d=b*b-4*a*c; if (d<0) {document.writeln("Ecuatia nu are radacini reale");} else {x1=(-b+Math.sqrt(d))/(2*a); x2=(-b-Math.sqrt(d))/(2*a); document.writeln("x1=",x1); document.writeln("x2=",x1);} } </script> </pre> </body></html>
OBS n acest exemplu am utilizat metoda sqrt() ce returneaz rdcina ptrat a unei valori numerice. Aceasta este o metod a obiectului Math. Exemplu Se citesc trei numere a, b i c. S se precizeze dac pot fi laturile unui triunghi.
<html> <head><title>Triunghi</title></head> <body> <pre> <script language="JavaScript"> a=eval(prompt("Dati a=")); b=eval(prompt("Dati b=")); c=eval(prompt("Dati c=")); if((a>0)&&(b>0)&&(c>0)&&(a+b>c)&&(a+c>b)&&(b+ c>a)) document.writeln("Cele trei valori: ",a,",",b,",",c,"\npot fi laturile unui triunghi"); else document.writeln("Cele trei valori: ",a,",",b,",",c,"\nNU pot fi laturile unui triunghi"); </script></pre> </body></html>
Instruciunea switch..case Instruciunea de decizie multipl se utilizeaz atunci cnd, n urma evalurii unei expresii, trebuie s optm ntre mai multe cazuri date. Acelai lucru l putem realiza i cu ajutorul instruciunii if. Diferena const n faptul c dac avem de optat ntre mai mult de dou cazuri, folosirea instruciunii if devine greoaie, caz n care putem apela la instruciunea switch. Sintaxa pentru instruciunea de decizie multipl simpl: switch (expresie) { case valoare_1; instr_1; break; case valoare_2; instr_2; break; .. case valoare_n; instr_n; break; [ default: instr_n+1]; } Principiul de execuie este urmtorul: - se evalueaz expresia; - dac valoarea expresiei este egal cu valoare_1, se execut instr_1 - dac valoarea expresiei nu este egal cu valoare_1, se verific dac este egal cu valoare_2, pentru a se executa instr_2, - dac valoarea expresiei nu este egal cu valoare_2 se repet paii pn la valoare_n - dac valoarea expresie nu este egal cu nici o valoare dintre: valoare_1...valoare_n, se execut instr_n+1
Exemplu de utilizare a instruciunii switch.

<html> <head> <title> Instructiunea switch </title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Se citeste un numar.\nDaca numarul este 1, 2, 3 sau 4,\n se afiseaza anotimpul corespunzator."); x=eval(prompt("Dati numarul corespunzator anotimpului:")); document.writeln("Raspuns:"); switch(x) { case 1: document.writeln("Primavara"); break; case 2: document.writeln("Vara"); break; case 3: document.writeln("Toamna"); break; case 4: document.writeln("Iarna"); break; default: document.writeln("Dati un numar intre 1 si 4!"); } </script> </pre> </body> </html>
5.4.3. Instruciuni repetitive Instruciunile repetitive se clasific n: - instruciuni cu numr cunoscut de pai: for - instruciuni cu numr necunoscut de pai: while i do..while Instruciunea for Sintaxa pentru instruciunea repetitiv cu numr cunoscut de pai for: for (val1; cond.;pas) Principiul de execuie este urmtorul: - se evalueaz condiia cond.; instruciune - dac se ndeplinete condiia cond. , se incrementeaz valoarea iniial val1. cu valoarea pasului pas. i se repet execuia instruciunii pn cnd nu se mai ndeplinete condiia. Exemplu de utilizare a instruciunii for. Se vor afia primele numere impare pn la 20. <html> <head> <title>Instructiunea for</title> </head> <body> <pre> <script language="JavaScript"> var i=1; document.writeln("Se vor afisa primele\n numere impare, pana la 20."); for(i=1; i<=20; i=i+2) document.writeln(i); </script> </pre> </body></html> Exemplu n acest exemplu, se vor afia literele de la a la j. Pentru aceasta, am iniializat variabila x cu valoarea Unicode a caracterului a, de la care am dorit s ncepem afiarea. Condiia este s afieze pn la valoarea Unicode a caracterului j, cu pasul 1, toate caracterele corespunztoare acestor valori Unicode. Metodele charCodeAt() i fromCharCode() le vom studia ntr-un capitolul viitor.
<html> <head> <title>Instructiunea for</title> </head> <body> <pre> <script language="JavaScript"> var y=1; document.writeln("Se vor afisa primele 10\n litere din alfabet."); for(x="a".charCodeAt(0); x<="j".charCodeAt(0); x++) {document.writeln(y,"-> ",String.fromCharCode(x)); y++;} </script> </pre> </body> </html>
Exemplu Vom afia n ordine descresctoare numerele cuprinse ntre 15 i 7. <html> <head> <title>Instructiunea for</title> </head> <body> <pre> <script language="JavaScript"> var i=15; document.writeln("Se vor afisa in ordine descrescatoare,\nnumerele de la 15 la 7."); for(i=15;i>=7;i--) document.writeln(i); </script></pre> </body></html> Exemplu Vom afia suma numerelor pare pn la un n citit de la tastatur. Pentru a realiza acest lucru, am utilizat metoda prompt() ce deschide o fereastr n care se cere numrul n i funcia eval() ce evalueaz valoarea introdus de ctre utilizator. Datele de nceput i de sfrit sunt afiate n corpul pagini web.
<html> <head> <title>Instructiunea for </title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Suma numerelor pare,\npana la un n dat\n"); n=eval(prompt("Dati numarul:")); var suma=0; for (i=0; i<=n; i=i+2) suma=suma+i; document.writeln("Suma=",suma); </script> </pre> </body> </html>
Exemplu S se calculeze i s se afieze urmtoarea expresie:
<html> <head> <title>Instructiunea for</title> </head> <body><pre> <script language="JavaScript"> n=eval(prompt("Dati numarul:")); var e=0;p=1; for (i=1; i<=n; i++) {p=p*i; e=e+(i*(i+2))/p;} document.writeln("E=",e); </script></pre>
</body></html>
Exemplu S se afieze minimul i maximul din n numere citite de la tastatur.

<html> <head> <title> Instructiunea for </title> </head> <body> <pre> <script language="JavaScript"> n=eval(prompt("Dati numarul n=")); x=eval(prompt("Dati numarul 1")); min=x; max=x; for (i=2; i<=n; i++) { x=eval(prompt("Dati numarul ",i)); if (x<min) min=x; if (x>max) max=x; } document.writeln("Elementul minim=",min); document.writeln("Elementul maxim=",max); </script> </pre> </body></html>
Exemplu S se afieze dac un numr citit de la tastatur este prim sau nu. Am utilizat funcia sqrt() ce returneaz radicalul unui numr.
<html> <head> <title>Numar prim</title> </head> <body> <pre> <script language="JavaScript"> n=eval(prompt("Dati un numar:")); prim=1; for(i=2;i<=Math.sqrt(n);i++) if (n%i==0) prim=0; if (prim==1) document.writeln("Numarul ",n," este prim."); else document.writeln("Numarul ",n," nu este prim."); </script> </pre> </body> </html>
Instruciunea while Sintaxa pentru instruciunea repetitiv cu test iniial i cu numr necunoscut de pai while: Principiul de execuie este urmtorul: while ( cond.) - se evalueaz condiia cond.; instruciune - ct timp se ndeplinete condiia cond., se execut instruciunea instruciune; - cnd valoarea condiiei devine 0 (zero), adic fals, se trece la urmtoarea instruciune. Pagini Web cu JavaScript Diana Elena Diaconu 71
Exemplu de utilizare a instruciunii while. S se afieze valoarea corespunztoare Unicode pentru toate numerele introduse de la tastatur, pn cnd introducem cifra zero.
<html> <head> <title>Instructiunea while </title> </head> <body> <pre> <script language="JavaScript"> n=prompt("Dati un numar:",""); while (n!=0) { document.writeln("nr=", n.charCodeAt(0)); n=prompt("Dati un numar:",""); } </script> </pre> </body></html>
Exemplu S se afieze inversul unui numr citit de la tastatur.

<html> <head> <title>Instructiunea while</title> </head> <body> <pre> <script language="JavaScript"> n=prompt("Dati un numar:"); x=n; inv=0; while (n!=0) {inv=inv*10+n%10; n=Math.floor(n/10);} document.writeln("Inversul lui ",x," este= ",inv); </script> </pre> </body></html>
Exemplu S se calculeze i s se afieze produsul primelor n numere naturale (n factorial).

<html> <head> <title>n!</title> </head> <body> <pre> <script language="JavaScript"> n=eval(prompt("Dati un numar:")); i=1;p=1; while(i<=n) { p=p*i; i=i+1; } document.writeln("n!= ",p); </script></pre> </body></html>
Exemplu Se citesc numere pn la ntlnirea cifrei zero (0). S se afieze cel mai mic i cel mai mare numr citit.
<html> <head> <title> Min si max </title> </head> <body> <pre> <script language="JavaScript"> n=eval(prompt("Dati un numar:")); min=n; max=n; while(n!=0) { n=eval(prompt("Dati un numar:")); if (n<min) min=n; if (n>max) max=n; } document.writeln("Minimul= ",min); document.writeln("Maximul= ",max); </script> </pre> </body> </html>
Exemplu Se citesc pe rnd cifrele unui numr. S se afieze numrul obinut prin aranjarea cifrelor n ordinea citirii lor.
<html> <head> <title> Cifre </title> </head> <body> <pre> <script language="JavaScript"> var n=0; x=eval(prompt("Dati prima cifra:")); while ((x>=0)&&(x<=9)) { n=n*10+x; x=eval(prompt("Dati urmatoarea cifra:")); } document.writeln("Numarul obtinut este: ", n); </script> </pre> </body> </html>
Exemplu Se citete un numr n baza 2. S se afieze acel numr n baza 10. De exemplu, dac se citete 1112, se va afia 710.
<html> <head> <title>Baza zece</title> </head> <body> <pre> <script language="JavaScript"> var putere=1; var bzece=0; var k=0; bdoi=eval(prompt("Dati numarul in baza 2:")); x=bdoi; while (x!=0) { r=x%10; if ((r!=0)&&(r!=1)) k=1; bzece=bzece+r*putere; putere=putere*2; x=Math.floor(x/10); } if (k==0) document.writeln("Numarul ",bdoi," in baza 10 este: ",bzece); else document.writeln("Numarul nu este in baza 2"); </script> </pre> </body> </html>
Instruciunea do...while Sintaxa pentru instruciunea repetitiv cu test final i cu numr necunoscut de pai do...while: do Principiul de execuie este urmtorul: { - se execut instruciunile; - se evalueaz condiia cond.; instruciune 1; instruciune 2; - dac valoarea rezultat este diferit de zero (adevrat), .. se repet execuia instruciunii pn cnd aceasta instruciune n; devine zero (fals); } se trece la instruciunea urmtoare while ( cond.) Exemplu Se citete un numr natural pozitiv. S se descompun n factori primi i s se afieze rezultatul.
<html> <head> <title>Factori primi</title> </head> <body> <pre> <script language="JavaScript"> var i=2;
n=eval(prompt("Dati un numar:")); do { putere=0; while (n%i==0) { putere=putere+1; n=Math.floor(n/i); } if (putere!=0) document.writeln(i," la puterea ",putere); i++; } while (n!=1) </script></pre> </body></html>
Exemplu Se citete un numr natural pozitiv. S se afieze cte cifre conine numrul.
<html> <head> <title>Nr. cifre</title> </head> <body> <pre> <script language="JavaScript"> var s=0; n=eval(prompt("Dati un numar:")); x=n; if (n>=0) sau { do { n=Math.floor(n/10); s++; } while (n!=0) document.writeln("Numarul ",x," are ",s," cifre."); } else document.writeln("Numarul ",x," nu este pozitiv."); </script> </pre> </body> </html>
Evaluare
Care sunt operatorii aritmetici? Unde se pot scrie script-urile JavaScript? Ce fel de operator este + (plus)? Care sunt instruciunile repetitive? Realizai un script ce permite calcularea suma numerelor pare pn la un numr n citit de la tastatur. 6. n interiorul cror etichete se ncadreaz codul surs JavaScript? a) <js> i </js> b) <script> i </script> Pagini Web cu JavaScript Diana Elena Diaconu 75 1. 2. 3. 4. 5.
c) <JavaScript> i <JavaScript> d) <java> i <java> 7. Unde este corect s poziionm codul JavaScript? a) n seciunile: < head > sau < body > b) n seciunea < title > c) n seciunea < head > d) n seciunea < body > 8. Operatorii unari sunt: a) + / % b) + c) * / d) + - % 9. Cum afim pe ecran: "Salutari!"? a) Writeln ("Salutari!") b) document.writeln (Salutari!) c) alert ("Salutari!") d) document.writeln ("Salutari!") 10. Cum afim ntr-un buton alert: "Salutari!"? a) writeln . alert ("Salutari!") b) msgBox ("Salutari!") c) alert ("Salutari!") d) alert . writeln ("Salutari!") 11. Cum scriem: "Dac x este mai mic dect y, atunci minim=x, altfel minim=y"? a) if (x < y) then minim=x else minim=y b) (x < y)?minim=x:minim=y c) minim=(x < y)?x:y d) if x< y minim=x else minim=y
Capitolul 6.
Funcii JavaScript
Obiective:
- s neleag noiunea de funcie JavaScript - s poat utiliza o funcie JavaScript acolo unde este necesar. - s neleag noiunile de apelare i parametrii ai funciilor - s poat crea un script ce utilizeaz funcii predefinite JavaScript
6.1. Introducere
Atunci cnd dorim ca pagina Web s ndeplineasc o anumit cerin, crem o funcie JavaScript ce va avea ca scop executarea acelei cerine. Funciile JavaScript le putem crea noi sau putem utiliza funcii predefinite ale limbajului, cum ar fi: escape(), eval(), pe care o s le studiem n acest capitol. Apelarea unei funcii se face prin numele ei, atunci cnd este necesar. O funcie poate fi poziionat n partea de sus a paginii, adic n antet sau n exterior, ntr-un alt fiier.
6.2. Definirea funciilor

Definirea unei funcii const n cuvntul cheie function, urmat de: numele funciei, o list cu parametri separai prin virgul i instruciunile scrise ntre acolade. O funcie poate fi apelat de ctre o alt funcie sau de ctre ea nsi (se autoapeleaz). Sintaxa unei funcii ce conine parametri: Partea de declarare function Nume (variabila1, variabila2,...., variabilan) a funciei. { instruciuni ; } Partea de apelare a Nume (variabila1, variabila2,...., variabilan) funciei. Funciile pot fi declarate i apelate chiar dac nu conin parametri. Partea de declarare function Nume () a funciei. { instruciuni ; } Partea de apelare a Nume () funciei. Pentru a rezolva problema din exemplul de mai jos, am apelat funcia cmmdc, care, pentru a returna cel mai mare divizor comun dintre dou valori x i y primite ca parametri, se autoapeleaz pn cnd se ndeplinete condiia y=0. Autoapelarea unei funcii poart numele de recursivitate. Exemplu de utilizare a unei funcii JavaScript n head. Se citesc dou numere naturale de la tastatur. S se afieze cel mai mare divizor comun al celor dou numere, utiliznd algoritmul lui Euclid.
<html> <head> <title> Functie JavaScript in head </title> <script language="JavaScript">
function cmmdc(x,y) { if (y==0) return x; else return cmmdc(y,x%y); } </script> </head> <body><pre> <script language="JavaScript"> x=eval(prompt("Dati primul numar:")); y=eval(prompt("Dati al doilea numar:")); document.writeln("cmmdc= ",cmmdc(x,y)); </script> </pre> </body></html>
OBS n exemplul de mai sus am utilizat return pentru a ntoarce un rezultat prin numele funciei.
6.3. Apelarea funciilor

Definirea unei funcii nu nseamn neaprat c acea funcie se va apela. Putem defini funcii care nu se vor executa niciodat, dar i funcii care pot fi apelate de una sau mai multe funcii. Apelarea unei funcii presupune executarea unei aciuni specifice, pentru anumii parametri. n exemplul de mai sus, se citesc doi parametri x i y, dup care se efectueaz apelul funciei pentru parametri citii. Mai jos, putem vedea o funcie fr parametri, care va fi apelat doar dac executm click pe un buton. n acest exemplu, nu au fost necesari parametri, de aceea nu exist. Exemplu de utilizare a unei funcii JavaScript n head fr parametri. Se apas pe butonul pe care scrie Apasati! i va apare o fereastr n care scrie Salut!.
<html> <head> <title>Functie fara parametri </title> <script type="text/JavaScript"> function f() { alert("Salut!") } </script> </head> <body> onclick="f()" <input type="button" value="Apasati!"> </body> </html>
Exemplu de utilizare a unei funcii JavaScript exterioar. Pentru aceasta, se creaz o funcie simpl, ca cea de mai jos, care se salveaz cu extensia .js. n cazul nostru, am salvat fiierul cu numele ff.js.
function f() { alert('Salutari exterior!'); } dintr-un script
Odat salvat, fiierul poate fi apelat din interiorul unui script, ca n exemplul de mai jos. Dup ce este apelat fiierul ff.js, putem utiliza funcia sau funciile pe care le conine fiierul respectiv. n cazul nostru, apelm funcia f().
<html> <head> <title>Functie externa</title> <SCRIPT language="JavaScript" SRC="ff.js"> </SCRIPT> </head> <body> <A HREF="javascript:f()">Dati click pentru un mesaj!</A> </body></html>
OBS Apelarea fiierului se face din antet (head). Exemplu Se citesc dou numere naturale m i n. Scriptul urmtor va calcula funcia lui Ackermann. La ncrcarea paginii, se apeleaz o funcie f() care citete dou valori n i m, dup care apeleaz funcia recursiv Ackermann, de parametrii n i m citii. Rezultatul se va afia pe ecran.
<html> <head> <title>Functie JavaScript</title> </head> <body onLoad="f()"> <script language="JavaScript"> function f() { n=eval(prompt("Dati n: ")); m=eval(prompt("Dati m: ")); document.writeln(Ackermann(m,n)); } function Ackermann(m,n) { if (m==0) return n+1; else if (n==0) return Ackermann(m-1,1); else return Ackermann(m-1, Ackermann(m,n-1)) } </script> </body></html>
Exemplu n acest exemplu avem funcia culori, care va putea fi apelat de mai multe ori, pentru valori diferite. Dac dm click pe butonul pe care scrie Rosu, se va transmite funciei prin variabila x, valoarea Red. Aceast valoare va defini culoarea de fundal a unei pagini Web.
<html> <head> <title>Functii</title> <script type="text/JavaScript"> function culori(x) { document.writeln("<body bgcolor="+x+">"); document.writeln("Pagina cu fundal de culori diferite."); } </script> </head> <body> <form> Dati click pe un buton pentru a afisa <br />o
culoare diferita a fundalului.<br /><br /> <input type="button" onclick="culori('Red')" value="Rosu"> onclick= <input type="button" "culori('Yellow')" value="Galben"> <input type="button" onclick="culori('Blue')" value="Albastru"> </form> </body> </html>
Exemplu Un exemplu similar cu cel de mai sus, dar n care avem doi parametri transmii la apelul realizat de ctre evenimentul onClick. Cei doi parametri vor modifica valorile implicite ale culorii fundalului i textului.
<html> <head> <title>Functii</title> <script type="text/JavaScript"> function culori(x,y) { document.writeln("<body bgcolor="+x+" text = "+y+">"); document.writeln("<b> Pagina cu fundal si text <br /> de culori diferite."); } </script> </head> <body> <form> Dati click pe un buton pentru a afisa <br /> o culoare diferita a fundalului si a<br /> textului<br /><br /> <input type="button" onclick= "culori('Red','blue')" value="Rosu"> <input type="button" onclick= "culori('black','Yellow')" value="Galben"> <input type="button" onclick="culori('green')" value="Albastru"> </form> </body> </html>
6.4. Parametri funciilor

Parametri pe care-i utilizm atunci cnd apelm o funcie poart numele de parametri efectivi sau actuali. Ei specific valorile care vor fi prelucrate n cadrul funciei. Parametri aflai n partea de declarare a funciei poart numele de parametri formali. Att parametri formali ct i parametri efectivi pot lipsi atunci cnd utilizm o funcie. Numrul parametrilor formali trebuie s fie egal cu numrul parametrilor efectivi. OBS Excepie de la aceast regul face proprietatea arguments ce poate fi utilizat cu un numr diferit de parametri la apelul funciei. Pentru a determina numrul de parametri din apel, utilizm n cadrul funciei, arguments.length. arguments este un masiv (vector unidimensional) ce are ca prim valoare arguments[0]. Exemplu n acest exemplu, se apeleaz funcia lista din interiorul unei instruciuni de afiare, prin lista(U, Primavara, "Vara", "Toamna", "Iarna"). La execuia funciei, se parcurg parametri cu ajutorul arguments.length. Parametrul U de la apel se introduce n funcie pentru a afia o list neordonat (Unordered Lists) UL. Pentru a afia o list ordonat, trebuie s nlocuim U cu O, de la Ordered lists.
<html> <head> <title> Functie cu parametri </title> <script type="text/JavaScript"> function lista(x) { document.write("<" + x + "L type=circle>") for (var i=1; i<lista.arguments.length; i++) document.write("<LI>" + lista.arguments[i]+"</LI>") document.write("</" + x + "L>") } </script> </head> <body> <script type="text/JavaScript"> write(lista("U", "Primavara", "Vara", "Toamna", "Iarna")); </script> </body> </html>
Exemplu Un exemplu asemntor cu cel de mai sus, dar n care aceeai funcie va putea fi apelat de mai multe ori, pentru a realiza calcularea mediei cu mai muli sau mai puini parametri.
<html> <head> <title> Functii cu mai multi parametri </title> <script type="text/JavaScript"> function medie() { var s = 0 for(var i=0; i<arguments.length; i++) s=s+arguments[i] ; var ma=s/arguments.length alert(ma); } </script> </head> <body> <pre> <form> Dati click pe un buton pentru a afisa media aritmetica <br /><br /> (1+2+3)/3= <input type="button" onclick= "medie(1,2,3)" value="Apasati!"> (2+4-6+8)/4= <input type="button" onclick= "medie(2,4,-6,8)" value="Apasati!"> (2+6+7+33-72)/5= <input type="button" onclick= "medie(2,6,7,33,-72)" value="Apasati!"> </form> </pre> </body> </html>
6.5. Funcii predefinite

n acest capitol vom studia cele mai importante funcii predefinite JavaScript. Printre cele mai utilizate sunt: eval, isFinite, isNaN, parseInt, parseFloat, Number, String, encodeURI, decodeURI, encodeURIComponent, decodeURIComponent Funciile escape() i unescape() transform seturi de caractere admise de ISO Latin-1 n coduri ASCII (scrise n hexazecimal) i invers. Pentru nceput vom face un exemplu simplu de transformare a irurilor de caractere n codurile ASCII corespunztoare i invers. Exemplu Se transform mai nti caracterul $ n codul ASCII corespunztor i napoi din codul ASCII n caracterul iniial. Dup aceasta, se transform un ir de caractere n codul ASCII corespunztor i invers.
<html> <head> <title>Functiile escape() si unescape() </title> </head> <body> <pre> <script language="JavaScript"> x=escape("$"); document.writeln("Codul ASCII al caracterului $ este: "+x); y=unescape(x); document.writeln("unescape("+x+") este: "+y); document.writeln("La fel si pentru: "); x=escape("~!#^"); document.writeln("Codurile ASCII ale caracterelor ~!#^ sunt: "+x); y=unescape(x); document.writeln("unescape("+x+") este: "+y); </script> </pre> </body> </html>
Chiar dac nc nu am parcurs toate elementele necesare pentru exemplul urmtor, v putei face o impresie despre modul de transformare interactiv pe care-l putei realiza cu ajutorul funciilor JavaScript.
Exemplu n corpul paginii introducem un formular care apeleaz dou funcii din interiorul unui script. Scriptul este apelat la nceputul paginii, n antet (head), prin src="FTR.js .
<html> <head> <title> Functiile escape si unescape </title> <script type="text/javascript" src="FTR.js"> </script> </head> <body> <form name="x" action=""> Introduceti textul pe care doriti sa il transformati:<br /> <textarea name="tr" cols="40" rows="3"> </textarea><br /> <input type="button" name="action" value="Transformati!" onClick="Transform()"/> <br/><br /> Textul transformat:<br /> <textarea name="re_tr" cols="40" rows="3"> </textarea><br /><br /> <input type="button" name="action" value="Transformati la loc!" onClick="ReTransform()" /> <br /> <div id="RTr"> </div> </form> </body> </html>
Scriptul FTR.js este cel de mai jos. n acest script avem dou funcii: Transform(), care transform caracterele n coduri ASCII i ReTransform() care convertete codurile ASCII n caracterele introduse iniial.
function Transform() { cod = escape(x.tr.value); cod = cod.replace(/\//g,"%2F"); cod = cod.replace(/\?/g,"%3F"); cod = cod.replace(/=/g,"%3D"); cod = cod.replace(/&/g,"%26"); cod = cod.replace(/@/g,"%40"); x.re_tr.value = cod; } function ReTransform() { RTr.innerHTML = unescape(x.re_tr.value); }
Funcia eval() evalueaz un ir de caractere, o expresie, o variabil sau anumite proprieti ale unor obiecte existente. Sintaxa funciei este: eval(string) Dac string reprezint o expresie, atunci eval va evalua acea expresie i va returna rezultatul. Exemplu de utilizare a funciei eval(). Se citesc numerele naturale n i k. S se calculeze utiliznd relaia de recuren:
pentru k = 0 sau k = n 1 C = k 1 k C C + n 1 pentru k = 1, 2 , ...n 1 n 1
k Cn ,
k n
n variabilele n i k se depune rezultatul evalurii funciei eval(). Cele dou valori sunt transmise funciei combinri ce va calcula recursiv numrul de combinri cerute.
<html> <head> <title>Functia eval()</title> </head> <body> <pre> <script type="text/javascript"> var n=eval(prompt("Dati numerele naturale \nn:")); var k=eval(prompt("si k:")); document.writeln("Combinarile pentru numerele date: ",combinari(n,k)); function combinari(n,k) { if ((k==0)||(k==n)) return 1; else return combinari(n-1,k-1)+combinari(n1,k); } </script> </pre> </body></html>
Exemplu de utilizare a expresiilor aritmetice. Se evalueaz pe rnd dou expresii aritmetice, dup care se combin rezultatele i se afieaz rezultatul.
<html> <head> <title>eval() cu expresii</title> </head> <body> <pre> <script type="text/javascript"> var x=eval("5+2"); var y=eval("5-2"); document.writeln("x=5+2= ",x); document.writeln("y=5-2= ",y); document.writeln("x+y= ", eval(x+y)); </script> </pre> </body></html>
Funcia isFinite() evalueaz un parametru pentru a determina dac este numr finit sau nu. Dac parametrul primit tinde ctre + sau ctre -, dac este NaN sau nu are limite finite, funcia va returna false, altfel va returna true. Exemplu Am utilizat pentru verificarea funciei isFinite(), att numere ce au zecimale finite, ct i numere ale cror zecimale nu sunt ntr-un numr finit.
<html> <head> <title> Functia isFinite() </title> </head> <body> <pre> <script type="text/JavaScript"> document.writeln("isFinite(2)="+isFinite(2)); "+ document.writeln("isFinite(2.12345)= isFinite(2.12345)); document.writeln("isFinite(Math.pi)= "+ isFinite(Math.pi)); var x=2/5; document.writeln("x=2/5 <br /> isFinite(Math.x))= "+isFinite(Math.x)); </script> </pre> </body> </html>
Funcia isNaN() evalueaz argumentul pentru a determina dac este numr sau nu. n cazul n care argumentul este numr, returneaz false, altfel returneaz true. Exemplu de utilizare a funciei isNaN().
<html> <head> <title> Functia isNaN() </title> </head> <body> <pre> <script type="text/JavaScript"> document.writeln("isNaN(2)="+isNaN(2)); document.writeln("x=2/5 <br /> isNaN(Math.x)="+isNaN(Math.x)); document.writeln("isNaN(Math.pi)="+isNaN(Math.pi)); document.writeln("isNaN(3.2345)="+isNaN(3.2345)); document.writeln("isNaN(3,2345)="+isNaN(3,2345)); document.writeln("isNaN('cuvant')="+isNaN('cuvant') ); </script> </pre> </body> </html>
Funcia parseFloat() transform un ir de caractere ntr-un numr de tip Float. Dac primul caracter din ir nu este numr, funcia va returna NaN (adic Not a Number). Sintaxa: parseFloat ( ir de caractere ) Exemplu n exemplul urmtor am utilizat ca ir de caractere, numere pozitive i negative, numere cu zecimale i cu exponent. La cel de-al patrulea exemplu, am utilizat 1450e-3, unde e reprezint 10 la puterea dat de numrul care urmeaz, respectiv -3. Deci -1450e-3 este -1450*10-3 adic -1.45.
<html> <head> <title>Functia parseFloat()</title> </head> <body> <pre> <script type="text/JavaScript"> document.writeln("parseFloat(2)="+parseFloat(2)); document.writeln("parseFloat(-1.45)="+parseFloat(-1.45)); document.writeln("parseFloat(+1.45)="+parseFloat(+1.45)); document.writeln("parseFloat(-1450e-3)="+parseFloat(-1450e-3)); document.writeln("parseFloat(-0.0145E+2)="+parseFloat(-0.0145E+2)); var x=2/3; document.writeln("x=2/3 <br /> parseFloat(x)="+parseFloat(x)); document.writeln("parseFloat(3.2345)="+parseFloat(3.2345)); document.writeln("parseFloat(3,2345)="+parseFloat(3,2345)); document.writeln("parseFloat('cuvant')="+parseFloat('cuvant')); </script> </pre> </body> </html>
Funcia parseInt() transform un ir de caractere ntr-un numr de tip Int. Lng irul de caractere, poate fi specificat baza de numeraie din care va fi transformat n baza 10. Cu ajutorul funciei parseInt(), putem transforma un numr din bazele de numeraie 2, 8, 10, 16, n baza 10, dac va fi specificat baza din care va fi transformat numrul. Dac primul caracter din ir nu este numr, sau dac nu va fi specificat corect baza de numeraie, funcia va returna NaN (adic Not a Number). Sintaxa: parseInt ( ir de caractere[,baza de numeraie] )
Exemplu n prima parte a exemplului de mai jos, am transformat diferite numere n numere ntregi, iar n a doua parte am trasformat numere scrise n diverse baze de numeraie, n baza 10.
<html> <head> <title>Functia parseInt()</title> </head> <body> <pre> <script type="text/JavaScript"> document.writeln("<b>Functia parseInt() </b><br />"); document.writeln("Intrare | Iesire"); document.writeln("----------------------"); document.writeln("2 "+parseInt(2)); document.writeln("-1.45 "+parseInt(-1.45)); document.writeln("+1.45 "+parseInt(+1.45)); document.writeln("-1450e-3 "+parseInt(-1450e-3)); document.writeln("-0.0145E+2 "+parseInt(0.0145E+2)); document.writeln("3.2345 "+parseInt(3.2345)); document.writeln("3,2345 "+parseInt(3,2345)); document.writeln("cuvant "+parseInt('cuvant')); document.writeln("-----------------------"); document.writeln("Transformare in baza 10"); document.writeln("-----------------------"); document.writeln("'C',16 "+parseInt("C",16)); document.writeln("'14',8 "+parseInt("14",8)); document.writeln("'12.3',10 "+parseInt("12.3",10)); document.writeln("'1100',2 "+parseInt("1100",2)); </script></pre> </body></html>
Exemplu n urmtorul exemplu transformm un numr citit de la tastatur, din baza 2 n baza 10. Pentru aceasta, am transformat numrul cu parseInt i am verificat cu isNaN, dac ceea ce a tastat utilizatorul este sau nu numr.
<html> <head> <title>Functia parseInt</title> <script language="JavaScript"> function t(x) { y=parseInt(x,2); if (isNaN(y)) document.writeln("Nu ati tastat un numar in baza 2!"); else document.writeln("Numarul transformat \nin baza 10 este:<b> ",y,"</b>"); } </script></head> <body><pre> <script language="JavaScript"> x=eval(prompt("Dati un numar in baza 2:")); t(x); </script></pre> </body></html>
Funcia Number() transform parametrul unui obiect specificat ntr-un numr, reprezentnd valoarea obiectului respectiv. Dac valoarea respectiv nu este un numr, va fi returnat NaN. Dac obiectul specificat este Date, funcia va returna valoarea n milisecunde, msurat din 1 ianuarie 1979 UTC (GMT), pozitiv dup aceast dat i negativ nainte. Sintaxa: Number (obiect ) Exemplu Funcia returneaz zero dac data specificat ca parametru, va fi cea din enun, +2, pentru Bucureti. Dac scriem ora 00:00:00, ne va returna o dat negativ, reprezentnd cele dou ore transformate n milisecunde, deoarece pentru Bucureti avem GMT+2.
<html> <head><title>Functia Number()</title> </head> <body><pre> <script language="JavaScript"> document.writeln("Functia Number()"); document.writeln("Intrare | Iesire"); document.writeln("---------------------"); document.writeln("-234.53 "+Number(-234.53)); document.writeln("true "+Number(true)); document.writeln("false "+Number(false)); document.writeln("cuvant "+Number("cuvant")); document.writeln("new Date(January 01, 1970 00:00:00)"+Number(new Date("January 01, 1970 02:00:00"))); document.writeln("new Date(January 01, 1970 00:00:00)"+Number(new Date("January 01, 1970 00:00:00"))); </script></pre> </body></html>
Funcia String() transform un obiect specificat ntr-un String (ir de caractere). Dac obiectul este Date, funcia va returna un ir de caractere ce reprezint data calendaristic, dup cum putem vedea n exemplul de mai jos. Sintaxa: String (obiect ) Exemplu Funcia transform parametrul introdus, n ir de caractere.
<html> <head> <title>Functia String()</title> </head> <body> <pre> <script language="JavaScript"> document.writeln("Functia String()"); document.writeln("Intrare | Iesire"); document.writeln("----------------------"); document.writeln("-234.53 "+String(-234.53)); document.writeln("true "+String(true)); document.writeln("cuvant oarecare "+String("cuvant")); document.writeln("0 "+String(0)); document.writeln("new Date(1234567890) "+String(new Date(1234567890))); </script> </pre> </body> </html>
6.6. Funcii i stiluri

Nu este suficient s tim s utilizm funcii i stiluri. Important este ca tot ceea ce tim s putem utiliza pentru a realiza diverse aplicaii mai complexe. Tocmai acest lucru voi ncerca s realizez n exemplul de mai jos. Stiluri pentru cmpul textarea n acest exemplu am introdus un text ntr-un cmp de tip textarea pe care l pot afia n trei moduri, utiliznd stiluri diferite. Pentru aceasta, am definit cele trei stiluri s1, s2 i s3, n antetul paginii Web. Stilurile sunt apelate prin intermediul funciilor: f2, f3 i f4, la declanarea evenimentului onClick prin apsarea butoanelor: Stil 1, Stil 2 i Stil 3. Funciile f2, f3 i f4 utilizeaz masivul a, care pentru prima valoare (t=0), va utiliza stilul s1, pentru a doua valoare (t=1), va utiliza stilul s2 i pentru a treia valoare (t=2), va utiliza stilul s3. n concluzie, scriem un text n cmpul textarea, apsm butonul pe care scrie Apasati!, alegem unul din stiluri prin apsarea butoanelor: Stil 1, Stil 2 sau Stil 3, dup care apsm butonul pe care scrie click. Implicit, textul afiat este cel scris n body i anume o strof dintr-o poezie scris de Ienchi Vcrescu.
<html> <head> <title>functii si stiluri</title> <style> .s1 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #006633; background-color: #91FFC8; } .s2 { font-family: Georgia, Times New Roman, Times, serif; font-size: 16px; color: #990000; background-color: #FF8282; } .s3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #3333FF;
background-color: #9B9BFF; } </style> <script> function f1() { var reg=/\n/g; var getElementById=document.formular.ta.value; y=getElementById.replace(reg,"<BR>"); document.getElementById("target").innerHTML=y; } var t=0; var a=new Array("s1","s2","s3"); function f2() { t=0; document.getElementById("abc").className=a[t]; } function f3() { t=1; document.getElementById("abc").className=a[t]; } function f4() { t=2; document.getElementById("abc").className=a[t]; } function f() { document.getElementById("target").className=document. getElementById("abc").className; } </script> </head> <body> <table> <tr> <td> <div id=target class=s2>Scrieti un text si dati click! </div> </td> </tr> </table> <form name=formular> <textarea name=ta class=s1 id=abc> Spune, inimioară Spune, inimioară, spune Ce durere te răpune? Arată ce te munceşte, Ce boală te chinuieşte? Ienachită Văcărescu </textarea> <br /> Scrieti un text si dati click. <input type=button value="Apasati!" onclick="f1()"><br /> Alegeti un stil si dati click.
<input type=button value="Stil 1" onclick="f2()"><br /> Alegeti alt stil si dati click. <input type=button value="Stil 2" onclick="f3()"><br /> Alegeti alt stil si dati click. <input type=button value="Stil 3" onclick="f4()"><br /> Dati click pentru a utiliza stilul. <input type=button value="click" onclick="f()"><br /> </form> </body> </html>
Stil diferit pentru o pagin Atunci cnd vizitm o pagin, de cele mai multe ori avem impresia c are importan numai coninutul, nu i aspectul paginii. Mai jos, am s ncerc s demonstrez faptul c puin atenie acordat aspectului, nu stric niciodat. Deci, efectund click pe legtura din partea de jos a paginii, se va apela funcia f() care va da atribute diferite stilurilor utilizate. Tot funcia f() ne va ateniona n cazul n care utilizm alt browser, n afar de Internet Explorer, n care se poate folosi acest exemplu.
<html> <head> <title>Stiluri pentru o pagina</title> <script type=text/javascript> function f() { if(!document.all) { alert("Nu folositi Internet Explorer!") return } document.body.style.backgroundColor="#FFCCCC" document.all.a1.style.color="red" document.all.a1.style.fontSize="22px" document.all.a1.style.textAlign="center" document.all.a2.style.color="#FF3C3C" document.all.a2.style.fontStyle="oblique" document.all.a2.style.textAlign="left" document.all.a2.style.marginTop="12px" document.all.a3.style.color="red" document.all.a3.style.fontWeight="bold" document.all.a3.style.fontStyle="normal" document.all.a3.style.textAlign="right" document.all.a3.style.marginTop="12px" } </script> </head> <body> <div id=a1>Ce albaştri sunt</div> <div id=a2> Vremea a zburat,<br /> Tu nu te-ai schimbat...<br /> Cum ai făcut?<br /> Mă priveşti mirată<br /> Si imbujorată<br /> Ca la-nceput...<br /></div> <div id=a3>Alexandru Andrieş</div> <br><a href="#" onClick="f();return false">Dati click pentru a vedea pagina cu CSS in Internet Explorer!</a> </body> </html>
Butonul alert decorat Cu ajutorul funciilor i a stilurilor, putem decora butonul alert, dup cum dorim noi. Am utilizat stiluri pentru toate elementele butonului alert: fundal, margini, imagine pentru fundal, poziia butonului de inchidere, distana dintre litere, distan pentru margini.
<html> <head> <title>Butonul alert</title> <style type="text/css"> #dreptunghi { position:absolute; width:auto; height:auto; top:0px; left:0px; z-index:10000; }
#drA { position:relative; width:300px; min-height:100px; margin-top:50px; border:2px solid #FFFF00; background-repeat:no-repeat; background-position:20px 30px; visiblity:hidden; background-image: url(1trandafiri_albi.jpg); background-color: #FFFFCC; } #dreptunghi > #drA { position:fixed; } #drA h1 { margin: 0; font:bold 0.9em verdana,arial; background-color:#FFFF6C; color:#000000; padding:2px 0 2px 5px; text-align: center; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #drA p { font:0.7em verdana,arial; height:50px; padding-left:5px; margin-left:55px; } #drA #Inchide_Buton { display:block; position:relative; padding:3px; border:2px solid #FFFF6c; width:100px; text-transform:none; text-align:center; color:#000000; background-color:#FFFF6c; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-decoration: none; font-weight: bold; letter-spacing: 0.3em; left: 100px; bottom: 20px; } h1 { margin:0; padding:4px; font:bold 1.5em verdana; border-bottom:1px solid #000; } .important { background-color:#F5FCC8;
padding:2px; } </style> <script type="text/javascript"> var titlul_alert = "Mesajul transmis"; var text_buton = "Inchideti!!"; if(document.getElementById) { window.alert = function(x) { f(x); } } function f(x) { d = document; if(d.getElementById("dreptunghi")) return; obiect = d.getElementsByTagName("body")[0].appendChild (d.createElement("div")); obiect.id = "dreptunghi"; obiect.style.height = d.documentElement.scrollHeight + "px"; obiectA = obiect.appendChild(d.createElement("div")); obiectA.id = "drA"; if(d.all && !window.opera) obiectA.style.top = document.documentElement.scrollTop + "px"; obiectA.style.left = (d.documentElement.scrollWidth obiectA.offsetWidth)/2 + "px"; obiectA.style.visiblity="visible"; h1 = obiectA.appendChild(d.createElement("h1")); h1.appendChild(d.createTextNode(titlul_alert)); msg = obiectA.appendChild(d.createElement("p")); msg.appendChild(d.createTextNode(x)); Buton = obiectA.appendChild(d.createElement("a")); Buton.id = "Inchide_Buton"; Buton.appendChild(d.createTextNode(text_buton)); Buton.href = "#"; Buton.onclick = function() { ra(); return false; } } function ra() {document.getElementsByTagName("body")[0].removeChild(document. getElementById ("dreptunghi")); } </script> </head> <body> <p align="center"> <input type="button" value ="Dati click pentru a vedea mesajul" onClick="alert('Mesajul pe care l-ati dorit :)');" /></p> </body> </html>
Evaluare
10. Cum se definete o funcie? 11. Cum se apeleaz o funcie? 12. Ce funcie transform un ir de caractere ntr-un numr de tip ntreg? 13. Scriei un script ce permite citirea coninutului a dou variabile i o funcie ce calculeaz elementele minim i maxim dintre cele dou numere citite. 14. Cum apelm funcia cu numele f, de parametrii x i y? a) f(x,y) b) f parametri x, y c) function f(x,y) d) f(x and y) 15. Cum crem o funcie cu numele f de parametri x i y? a) function:x,y b) function=f(x, y) c) function f(var x, var y) d) function f(x, y)

22 09 02 33JavaScript I

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

22 09 02 33JavaScript I

Transféré par

Droits d'auteur :

Formats disponibles

Pagini Web cu JavaSCRIPT

Diana Elena Diaconu

Pagini Web cu JavaScript

Diana Elena Diaconu 2

Pagini Web cu JavaScript

Diana Elena Diaconu 3

Pagini Web cu JavaScript

Diana Elena Diaconu 4

- manifestarea unor atitudini favorabile fa de cunoatere

1.1. Scurt istoric

Pagini Web cu JavaScript

Diana Elena Diaconu 5

Obiective: - dezvoltarea capacitii de a nelege conceptul de reea

1.2. Reea de calculatoare

de calculatoare - contientizarea diferenelor dintre o reea de calculatoare i Internet.

Pagini Web cu JavaScript

Diana Elena Diaconu 6

Obiective: - dezvoltarea capacitii de a nelege conceptul de reea

1.3. Ce este Internetul

de calculatoare - contientizarea diferenelor dintre o reea de calculatoare i Internet.

Pagini Web cu JavaScript

Diana Elena Diaconu 8

2.1. World Wide Web

2.2. Cum funcioneaz paginile Web

2.3. Construirea site-urilor Web

Pagini Web cu JavaScript

Diana Elena Diaconu 11

3.2. Cum se realizeaz o pagin Web cu HTML

3.3. Elementul Meta

Echivalent nr. hexazecimal

Echivalent nr. hexazecimal

3.5. Elementul BODY

3.6. Formatarea textelor

Pagini Web cu JavaScript

Diana Elena Diaconu 17

3.7. Formatarea paragrafelor

Pagini Web cu JavaScript

Diana Elena Diaconu 18

3.8. Preformatarea textului

Pagini Web cu JavaScript

Diana Elena Diaconu 20

Pagini Web cu JavaScript

Diana Elena Diaconu 21

Pagini Web cu JavaScript

Diana Elena Diaconu 22

Exemplu de legtur pe o imagine.

Pagini Web cu JavaScript

Diana Elena Diaconu 23

Specific relaiile documentul curent.

Pagini Web cu JavaScript

Pagini Web cu JavaScript

Diana Elena Diaconu 25

Pagini Web cu JavaScript

Diana Elena Diaconu 26

Pagini Web cu JavaScript

Pagini Web cu JavaScript

Diana Elena Diaconu 29

Exemplu de utilizare a elementului: select.

Pagini Web cu JavaScript

Diana Elena Diaconu 30

Pagini Web cu JavaScript

Diana Elena Diaconu 31

Pagini Web cu JavaScript