Proiectarea paginilor WEB 105

PARTEA a IV-a

ELEMENTE DE
PROGRAMARE WEB
Ionel SIMION 106



Capitolul 12:
ELEMENTE DE PROGRAMARE WEB I MEDII INTERACTIVE





12.1 Elemente de programare WEB

mbuntirea spectaculoas a aspectului i funcionalitii paginii WEB se poate
obine prin introducerea, n codul HTML a unor succesiuni de comenzi (script) scrise n
limbaje de programare ca: Java, JavaScript, VBScript etc.
1
, sau prin introducerea unor
elemente de prezentare dinamice, animate, create cu programe specializate cum ar fi
programele Macromedia Flash, Shockwave, Fireworks, Dreamweaver. Aceste
componente sunt introduse prin elemente speciale: applet, script, embed i object.

<applet code=nume_applet.CLASS
width=n height=m>
.. </applet>
Introduce un applet Java (browserul
trebuie s poat s interpreteze i s
execute codul Java)
<script language=nume_limbaj>
..... </script>
Introduce un script scris ntr-un limbaj
de programare
<embed src=nume_fiier
width=n height=m play=loop quality =high
codebase=valoare
pluginspage=URL_plugin>
..... </embed>
Introduce elemente i medii, n formate
diferite, care nu sunt suportate, n mod
obinuit, de browser
<object classid=identificator de clas
width=n height=m
codebase=URL_de_identificare
param name=MOVIE value=nume_fiier
param name=PLAY value=true
param name=LOOP value=true
param name=QUALITY value=low>
..... </object>
Introduce obiecte crora le seteaz
proprietile care vor fi recunoscute de
orice browser. Aceste obiecte pot fi de
forma: applet Java, plug-in, control
ActiveX sau filme animate.

Programarea pe Web folosete limbaje de programare destinate serverului ca C
sau Perl respectiv clientului, care va ataa sau insera n paginile HTML sursele n limbaje
de programare Java, Java Script, VBScript sau VRML.

1
ECMA (European Computer Manufacturers Association) a creat standardul ECMAScript, bazat pe
JavaScript de la Netscape i Jscript de la Microsoft.
Proiectarea paginilor WEB 107


12.2 Aplicaii Java

Java este un limbaj de programare derivat din C++ i extins prin colecii de
biblioteci. El permite, printre altele, dezvoltarea unor mici aplicaii numite applet, care
pot genera animaie, pot reda sunete i muzic, pot genera formulare interactive, jocuri
interactive, care produc efecte speciale n paginile Web.
O platform Java este alctuit din interfaa de programare (Java application
programming interfaces - APIs) i interpretorul Java virtual machine (Java VM). Java APIs
este alctuit din biblioteci de coduri compilate care pot fi folosite n programele
utilizatorului. Programele Java pot fi rulate cu ajutorul Java VM.
Pentru a crea un applet Java se folosete kitul de dezvoltare Java al firmei Sun, ce
se instaleaz pe staia client. Aplicaiile Java sunt compilate, prin convertirea programului
surs Java (extensia .java) n cod de main virtual (.class), care va fi executat de
browser.
Cea mai simpl metod pentru a scrie un program Java care, ca exemplu, va afia
un text poate fi descris prin succesiunea urmtoare.

1. Folosind un editor de texte, se creaz fiierul surs, care va fi salvat cu numele
ProgramExemplu.java. Programul Java face distincie ntre caracterele majuscule i
minuscule, fiind provenit din mediul UNIX.

//Un program simplu pentru exemplificare
class ProgramExemplu {
public static void main(String[ ] args){
System.out.println("Acesta este un
program simplu Java");
}
}

O aplicaie Java are ca elemente de baz clasele. Clasa este o structur
care conine cmpuri de date i, de asemenea, metodele prin care se acioneaz
asupra acestor date. Sintaxa de definire a unei clase este:
class nume_clasa {. . .}
2. Programul va fi compilat, convertindu-l ntr-o form pe care Java VM poate s-l
intrepreteze i s-l execute. Compilarea poat fi lansat prin comanda javac. n
sistemele Unix i DOS, sintaxa este:
javac ProgramExemplu.java
3. Interpretarea i rularea programului compilat are loc apoi n orice browser dotat
cu Java VM. Interpretorul Java este invocat n linia de comand UNIX sau DOS prin
sintaxa:
java ProgramExemplu
4. Pe linia de comand va fi afiat: Acesta este un program simplu Java
ntreaga secven care apare pe ecran este:

javac ProgramExemplu.java
java ProgramExemplu
Acesta este un program simplu Java

Ionel SIMION 108

Un applet Java ruleaz ntr-un document HTML. n acest document, fiecare applet
are rezervat o fereastr prin care comunic cu utilizatorul. Fereastra este n exclusivitate
la dispoziia acestui applet, care este responsabil de desenarea ei i de tratarea
eventualelor evenimente care se refer la ea.
Pentru a plasa un applet Java n pagina Web se folosesc marcajele HTML
<applet></applet>, prin care se specific fiierul compilat .class i alte configurri ale
acestuia: dimensiunea ferestrei, locaia.
Dac fiierul .class nu se afl n acelai director ca i fiierul HTML care l
apeleaz, se folosete atributul CODEBASE, care indic locaia.
Un applet poate s i modifice comportamentul n funcie de o serie de parametri,
impui prin atributul PARAM.

Atribute ale elementului APPLET
WIDTH seteaz limea iniial a unui applet, n pixeli
HEIGHT seteaz nlimea iniial a unui applet, n pixeli
CODEBASE indic locaia codului compilat al unui applet
CODE identific codul compilat Java
TEXT stabilete textul ce va fi afiat
ALT specific un text alternativ, pentru cazul cnd un applet nu poate fi afiat
NAME asociaz un nume pentru instana applet n pagina HTML
ALIGN definete poziionarea unui applet
PARAM indic proprieti ale unor parametri

Valorile atributului ALIGN pentru alinierea n pagin a unui aplet
LEFT, RIGHT alinierea va fi n stnga, respectiv dreapta, textului din linie
TOP alinierea se va face cu elementul cel mai nalt din linie, fie el
un alt aplet, o imagine sau textul nsui
TEXTTOP alinierea se face cu cea mai nalt poziie a textului liniei
ABSMIDDLE mijlocul apletului va fi aliniat cu mijlocul elementului cel mai
mare din linie
MIDDLE mijlocul apletului se va alinia cu mijlocul liniei de baz a
textului
BASELINE, BOTTOM baza apletului se va alinia cu linia de baz a textului
ABSBOTTOM baza apletului va fi aliniat cu elementul cel mai de jos din
linie

Sintaxa complet a unui element applet este:

<APPLET
CODEBASE=locaia_codului_compilat
ARCHIVE=lista_arhiv
CODE=fiierul.CLASS
ALT=text_alternativ
NAME=numele_instanei_applet
WIDTH=n_pixeli HEIGHT=m_pixeli
Proiectarea paginilor WEB 109

ALIGN=alinierea
VSPACE=n1_pixeli HSPACE=n2_pixeli>
<PARAM NAME= atribut_1 VALUE=valoare_atribut_1>
<PARAM NAME= atribut_2 VALUE=valoare_atribut_2>
........

</APPLET>

Pentru verificarea i vizualizarea rapid a appletului, se folosete un appletviewer,
ca cel oferit de kitul de dezvoltare Java. Lansarea acestui program se face prin comanda:
appletviewer nume_fiier.html.

Exerciiul 12.1 Folosirea unui applet Calculator ntr-un document HTML.

<html>
<head>
<title>Calculator</title></head>
<body>
<applet
CODE="Calculator.class"WIDTH=205
HEIGHT=210>
</applet>
</body>
</html>


Realizarea unui applet. Dei prezentarea limbajului Java nu constituie obiectivul
prezentei lucrri, n continuare vor fi exemplificate cteva elemente privind realizarea unui
applet Java.
S considerm urmtorul cod pentru un applet care va afia textul Despre Java
applet:

import java.applet.Applet;
import java.awt.Graphics;
public class Despre_Java_ applet extends Applet {
public void paint(Graphics g) {
g.drawString("Despre Java applet ", 50, 25);
}
}

Importarea claselor. Sintaxa pentru a importa o clas este:
import nume_clas ;
unde numele clasei include i pachetul din care aceasta face parte.
De exemplu, primele dou linii ale codului de mai sus determin importul a dou
clase folosite n applet: Applet i Graphics.
import java.applet.Applet ;
import java.awt.Graphics ;
Ionel SIMION 110

Prin importarea unor clase sau a unor biblioteci de clase, acestea pot fi referite mai
uor. Dac se renun la primele dou linii de cod, acesta va trebui rescris astfel:
public class Despre_Java_ applet extends
java.applet.Applet {
public void paint(java.awt.Graphics g) {
g.drawString("Despre Java applet ", 50, 25);
}
}

Aa cum se observ, prin importarea claselor Applet i Graphics, acestea pot fi
accesate fr a folosi nici un prefix. Prefixele java.applet. i java.awt. arat compilatorului
n ce pachete va trebui s caute pentru a accesa clasele Applet and Graphics. n limbajul
Java, clasele sunt grupate n biblioteci. Se pot importa bibliotecile n ntregime prin sintaxa:
import nume_bibliotec.* ;
ca de exemplu:
import java.applet.*;
import java.awt.*;
Biblioteca applet. conine codul pentru execuia, procesarea i oprirea unui applet.
Biblioteca awt. conine codul care controleaz operaiile referitoare la ferestre (afiarea de
text i grafic, domenionarea unei ferestre).

Definirea subclaselor. Miniaplicaiile constituie extensii ale unei clase deja existente
java.applet.Applet. Fiecare applet definete o subclas a clasei Applet principale.
Subclasele motenesc multe dintre proprietile clasei Applet.
n codul prezentat subclasa este numit Despre_Java_ applet i este definit prin
linia de cod:
public class Despre_Java_ applet extends Applet

Implementarea metodei. Fiecare applet implementeaz cel puin o metod.
Metodele definesc operaiile care pot fi executate cu obiectul respectiv.
Pentru a declara o metod, este necesar s se indice numele acesteia, tipul de
valoare pe care o ntoarce, parametrii metodei precum i un bloc n care s fie descrise
instruciunile ce trebuiesc executate atunci cnd metoda este apelat.
Urmtoarele linii ale codului prezentat implementeaz metoda paint:
public void paint(Graphics g) {
g.drawString("Despre Java applet ", 50, 25);
}
Astfel, obiectul Graphics trece la metoda paint, afind pe ecran coninutul. Primul
argument al irului Graphics drawString este irul de caractere care vor fi afiate
(desenate) pe ecran Despre Java applet. Urmtoarele argumente definesc poziia n care
va fi afiat: ncepnd din punctul de coordonate (50,25) fa de colul din stnga sus al
ecranului.
Structura clasei unui applet se bazeaz, n principal, pe urmtoarele metode :
1. Metoda init() este folosit pentru iniializri (ncrcare de fiiere, iniializare fonturi etc)
i prelucrarea elementelor din linia de comand, fiind apelat numai atunci cnd un applet
este ncrcat pentru prima dat ntr-un program de vizualizare. Sintaxa este
public void init() { ... }
2. Metoda start() este apelat dup metoda init() atunci cnd un applet este ncrcat
pentru prima dat sau cnd execuia lui a fost suspendat i trebuie reluat. Sintaxa este
public void start() { ... }
Proiectarea paginilor WEB 111

3. Metoda stop() este apelat de fiecare dat cnd o miniaplicaie applet trebuie oprit
sau suspendat. Sintaxa este
public void stop() { ... }
4. Metoda paint() este folosit pentru desenarea sau redesenarea ecranului. Sintaxa este
public void paint(Graphics g) { ... }

Un exemplu de folosire a tuturor celor patru metode este urmtorul:

Exerciiul 12.2 Folosirea metodelor.
import java.awt.Graphics;
public class Counter extends java.applet.Applet {
int counter;
boolean run;
public void init() {
counter = 0;
}
public void start() {
run = true ;
while (run == true) {
counter ++ ;
repaint();
try { Thread.sleep(1000); }
//face o pauza de o secunda
catch(InterruptedException e) {}
}
}
public void stop() {
run = false;
}
public void paint(Graphics g) {
g.drawString("counter = " + counter, 10, 10);
}
}

Modificatorii sunt cuvinte rezervate Java care descriu proprietile metodei i
modul de lucru al acesteia. Ei sunt specificati in declaratia clasei, inainte de numele
acesteia, conform sintaxei:
modificator class NumeClasa { ... }

Modificatori de acces
public acces permis i claselor din afara propriului pachet
protected acces permis n orice clas i subclas din aceeai bibliotec
private acces permis doar n interiorul clasei n care metoda a fost declarat
private
protected
acces permis doar n interiorul clasei in care este definita metoda si de
subclasele acesteia
Modificatori de tip
abstract pentru metodele abstracte folosite pentru a crea clase ablon -
supraclase pentru alte clase
static pentru metodele statice, declarate o singur dat;nici o subclasa nu
Ionel SIMION 112

poate implementa o metoda cu acelasi nume
final pentru metodele finale, care nu pot fi rescrise n subclasele clasei n care
a fost declarat
native pentru metodele native, sunt implementate pe o cale specific unei
anumite platforme
synchronized pentru metode sincronizate este o metod care conine cod critic pentru
un anumit obiect sau clas

Pentru exemplificare, sunt prezentate metodele disponibile n biblioteca
java.applet.

Metode java.applet.Applet.
destroy() disponibilizeaz resursele folosite de applet
getAudioClip(URL url) acceseaz un clip audio
getAudioClip(URL, String name) acceseaz un clip audio permind i specificarea
unui nume
getCodeBase() returneaz locaia URL a unui applet
getDocumentBase() returneaz locaia URL a fiierului HTML n care
este inclus un applet
getImage(URL url) acceseaz o imagine
getImage(URL url, String name) acceseaz o imagine permind i specificarea unui
nume
getParameter(String name) returneaz un parametru din pagina HTML sub
forma unui ir
getParameterInfo() returneaz un set de parametri din pagina HTML
sub forma de iruri
init() iniializri (ncrcare de fiiere, iniializare fonturi
etc) i prelucrarea elementelor din linia de
comand
isActive() verific dac un applet este activ
play(URL, url) ruleaz un clip audio
play(URL url, String name) ruleaz un clip audio permind i specificarea unui
nume
resize(int width, int height) redimensioneaz un applet
resize(Dimension d)
showStatus(String msg) afieaz un mesaj
start() apelat dup metoda init() atunci cnd un applet
este ncrcat pentru prima dat sau cnd execuia
luii a fost suspendat i trebuie reluat
stop() apelat de fiecare dat cnd o miniaplicaie applet
trebuie oprit sau suspendat
Proiectarea paginilor WEB 113


12.3 Java Script

Spre deosebire de limbajul Java, limbajul JavaScript, un alt mod de a programa pe
Web, furnizeaz un set complet de comenzi i funcii construite chiar n interiorul sursei
HTML. Acest limbaj nu mai necesit un compilator extern i execuia codului se realizeaz
automat de ctre browser. n locul aplicaiilor de tip applet, limbajul JavaScript folosete
script-uri create din instruciuni ale limbajului. Cteodat, limbajul este tratat diferit de ctre
cele dou browsere principale, deoarece Internet Explorer folosete limbajul Jscript, o
implementare particular a lui JavaScript.
Integrarea JavaScript n codul HTML se face prin elementul script, plasat ntre
marcajele <script language=JavaScript> i </script>. De asemenea, se poate folosi
elementul noscript, ntre marcajele <noscript> i </noscript>, pentru a ncadra un text
ce va fi afiat, n situaia n care browserul nu poate afia JavaScript. Codul JavaScript
poate fi plasat att ntre marcajele <head> </head>, ct i ntre marcajele <body>
</body>. Exist practica de a plasa codul JavaScript ntre etichetele <head> i </head>,
astfel nct funciile nu vor fi apelate nainte ca sursele JavaScript s se ncarce.
Caracterele // vor introduce o linie de comentariu JavaScript.
Formatul de includere a unui script JavaScript ntr-un document HTML este:

<script language="JavaScript">
<!--
document.write("Acesta este un script JavaScript");
//-->
</script>

Atributul language este opional, dar recomandat, marcajul <script language=
"JavaScript"> anunnd browserul c va urma un cod JavaScript.
Se poate folosi atributul src al elementului script pentru includerea unui fiier
extern care conine cod JavaScript (fiier text cu extensia .js):
<script language="JavaScript" src="nume_fisier-extern.js"></script>
Dei nu este obligatoriu, exist practica plasrii scripturilor ntre seturile de
caractere <!-- i //--> pentru browserele care nu recunosc codul JavaScript.
Limbajul JavaScript cuprinde un set de instruciuni care, combinate cu obiecte
i proprieti, creaz un script. Ca orice limbaj orientat pe obiecte, JavaScript are element
fundamental noiunea de obiect. Obiectul este definit ca un model al unei entiti sau
fenomen, descris printr-un set de proprieti ce definesc o anumit stare a acestuia.
Modificarea acestei stri poate avea loc n urma unui eveniment care determin o
anumit reacie a obiectului. Aceast reacie se numete metod.
Obiectele Java Script sunt construite ca pachete de date referitoare la un set de
proprieti i de funcii, grupate sub un singur nume. Obiectele, mpreun cu proprietile
lor sunt introduse prin sintaxa (case sensitive):
NumeObiect.NumeProprietate
O proprietate este definit prin asocierea unei valori. De exemplu, dac se
definete obiectul casa, acestuia i se pot asocia proprietile:
casa.culoare = alb
casa.mrime = mare
ntre obiecte exist o anumit ierarhie care reflect structura paginii HTML. De
exemplu, obiectul window este ierarhic superior (parent) oricrui altui obiect. Fiecare
obiect este descendent al unuia ierarhic superior, putnd fi considerat o proprietate a
Ionel SIMION 114

acestuia. Modelul obiect document (DOM) descrie structura documentului reprezentat
prin obiecte i proprieti.


Limbajul JavaScript conine un set de obiecte predefinite care pot interaciona cu
diverse alte componente HTML. Pentru manevrarea acestor obiecte sunt folosite
proprietile acestora i metodele JavaScript.
Un tip special de obiecte sunt obiectele Cookie care conin informaii despre
client care pot fi accesate de server pentru a putea oferi servicii personalizate.

Obiect Semnificaie
anchors Un ir text care poate fi inta unei o hiperlegturi
button Un obiect definit prin marcajul <form> i care este utilizat pentru a
iniia o aciune
checkbox

Un obiect definit prin marcajul <form> i care este utilizat pentru a
verifica alegerea unei opiuni
date Obiect d etip dat. Metodele pentru a seta o dat sunt incluse n patru
clase: set, get, to, i parse/UTC. Formatul standard pentru date este "
Thu, 28 Jan 2004 08:20:00 GMT". De exemplu, "Thu, 28 Jan 2004
08:20:00 GMT+0630" corespunde unei locaii situate la 6 ore i 30
minute vest de meridianul Greenwich.
document Obiect creat de browser cnd pagina este ncrcat, coninnd
informaii despre documentul current.
elements O matrice de formulare incluznd diverse obiecte: butoane, csue de
validare, text. Elementele se pot referi prin sintaxa:
NumeFormular.elemente[index].
form Un obiect descendent al obiectului document.
frame Obiect de tip fereastr care conine un subdocument HTML.
hidden

Un text care nu apare n pagina HTML. Se folosete mpreun cu
obiectele cookies.
Proiectarea paginilor WEB 115

history Obiect care conine locaiile URL ale paginilor vizitate anterior
link Obiect de tip location care conine informaii despre hiperlegturi
location Conine informaii despre locaia URL a documentului curent
Math

Include proprieti pentru constantele matematice i funciile
matematice standard. Exemple: Math.PI, E, LN10, LN2, PI,
SQRT1_2, SQRT2; see methods abs, acos, asin, atan, ceil, cos, exp,
floor, log, max, min, pow, random, round, sin, sqrt, tan. Argumentele
funciilor trigonometrice sunt date n radiani.
navigator Conine informaii despre versiunea browserului Navigator folosit
password Parola introdus prin marcajul <form>
radio Obiect de tipul buton radio introdus prin marcajul <form>. Atunci cnd
este creat, ia forma: document.formName.radioName[index], unde
indexul este un numr reprezentnd fiecare buton, ncepnd de la
zero.
reset Corelat cu un buton reset, care readuce un obiect formular la valorile
iniiale. Este introdus prin marcajul <form>.
select O list de selecie
string Obiect constnd dintr-o succesiune de caractere. De exemplu, myCar
= "Renault" returneaz un obiect string cu numele myCar i valoarea
Renault. Valoarea obiectului este manipulat prin diverse metode. De
exemplu, myCar.toUpperCase() returneaz RENAULT.
submit Determin transmiterea formularului unui program specificat prin
proprietatea action.
text Un camp format dintr-o singur linie d ecaractere. Obiectul text poate
fi modificat asociind valorii sale un nou coninut
textarea Similar cu obiectul text dar pentru mai multe linii de text.
window

Obiect creat de browser atunci cnd pagina este ncrcat i care
cuprinde proprieti aplicabile ntregii ferestre de afiare. Este obiectul
de nivel cel mai nalt. O nou fereastr este creat folosind metoda
open:
aNewWindow =
window.open("URL","Window_Name",["windowFeatures"])

Proprietile JavaScript sunt folosite pentru a seta sau obine valorile obiectelor.
Un obiect acioneaz ntr-un anume fel doar prin asocierea unei valori definite printr-o
proprietate.

Proprietate Semnificaie
action Similar atributului action al formularelor HTML, constnd ntr-o
destinaie URL pentru datele transmise.
Exemplu: outlineForm.action=outlineURL
alinkColor Culoarea unei legturi dup ce butonul mouse-ului a fost eliberat
Exemplu: document.alinkColor="F0F8FF"
anchors Un tablou cu toate ancore din documentul current. Dac n
document sunt, de xemplu, 3 ancore: de la document.anchors[0] la
document.anchors[2], atunci mrimea tabloului anchor este 3
Ionel SIMION 116

appCodeName Returneaz un ir cu numele de cod al browserului :
document.write("The code name of your browser is " +
navigator.appCodeName)
appName Returneaz un ir cu numele browserului
appVersion Returneaz un ir cu informaii privind versiunea browserului, n
formatul "releaseNumber (platform; country).". De exemplu, pentru
Netscape 7.1 rulnd pe Windows 98
document.write(navigator.appVersion) va returna 7.1 (Win98; I)
Codul U specific o versiune pentru SUA iar codul I o versiune
internaional.
bgColor Culoarea de background a documentului exprimat n cod RGB
sau ca nume culoare.
checked

O valoare boolean (true or false) indicnd dac o caset de
validare sau un buton radio sunt selectate.
Exemple:formName.checkboxName.checked
formName.radioButtonName[index].checked
cookie Valoare ir coninnd informaii n legtur cu clientul, stocate n
fiierul client-side cookies.txt.
defaultChecked O valoare boolean (true sau false) indicnd dac o caset de
validare sau un buton radio sunt selectate implicit.
defaultSelected O valoare boolean (true sau false) reprezentnd o stare implicit a
unui element.
defaultStatus

Mesajul afiat n bara de stare a browserului Navigator.
Exemplu: window.defaultStatus = "Welcome to my home page"
defaultValue

Coninutul iniial al elementelor hidden, password, text, textarea, i
string. Pentru alementul password este setat iniial pe null.
e Baza logaritmilor naturali (aproximativ 2,718)
encoding Returneaz un ir care reflect tipul MIME de codificare.
fgColor Culoarea textului exprimat n cod RGB sau ca nume culoare
host

Returneaz un ir format din combinarea proprietilor
hostname i port ale unui URL.
Exemplu: location.host = "www.montna.com:80"
hostname Returneaz sau modific un ir cu numele domeniului sau adresa
IP a unui URL.
href

Returneaz un ir cu ntregul URL. Proprietile location i link sunt
subiruri ale lui href.
index Returneaz un index.
lastModified Un ir coninnd data ultimei modificri a documentului.
Exemplu: document.write("This page last modified on " +
document.lastModified)
length Un ntreg care semnific mrimea unui obiect:
Obiect Proprietatea msurat
history Lungimea listei history
string Lungimea irului; zero pentru ir nul
radio Numrul de butoane radio
anchors, forms, frames,
links, options
Numrul element lor tabloului

Proiectarea paginilor WEB 117

linkColor Culoarea unei hiperlegturi
links Un atblou reprezentnd obiectele link definite prin marcajul <a
href=URL>. Prima legtur este identificat prin document.links[0].
LN2 Logaritmul natural din 2 (aproximativ 0,693).
LN10 Logaritmul natural din 10 (aproximativ 2,302).
location Returneaz un ir cu locaia URL a documentului current. Property
of document. See location object.
LOG2E Dublul logaritmului natural din 2 (aproximativ 1,442).
LOG10E Logaritmul n baza 10 din e (aproximativ 0,434).
method Reflect atributul metod al marcajului <form>: get sau post.
name Returneaz numele unui obiect.
options Un tablou de obiecte option create de un element select.
parent Permite accesul la alte ferestre din cadrul aceluiai marcaj
<frameset>.
pathname Returneaz calea unui URL.
PI Returneaz numrul pi (aproximativ 3,1415927).
port Returneaz numrul portului unei adrese URL.
protocol Returneaz un ir cu prima parte a unui URL, care indic metoda
de acces (http, ftp, mailto etc.).
referrer Returneaz un ir cu URL-ul unui document care apeleaz
documentul current:
document.write("You came here from a page at " +
document.referrer)
search Returneaz un ir coninnd informaiile gsite la un anumit URL.
selected Returneaz o valoare boolean (true sau false) indicnd starea
curent a unei opiuni a obiectului select.
selectedIndex Returneaz un ntreg semnificnd indexul unui obiect.
SQRT1_2 Rdcina ptrat din 1 / 2 (aproximativ 0,707)
SQRT2 Rdcina ptrat din 2 (aproximativ 1,414).
status Specific un mesaj care va fi afiat n bara de stare. De exemplu,
atunci cnd mouse-ul se afl deasupra unei ancore: <A anchor
definition onMouseOver="window.dstatus='Textul mesajului.';
return true">link</A>
target Un ir cu numele unei ferestre pentru afiarea unui mesaj dup ce
un formular a fost transmis, sau a coninutului unei hiperlegturi.
text Returneaz textul care urmeaz marcajului <option> la un obiect
select.
title Returneaz irul situate ntre marcajele <title> </title>.
top Prima fereastr ierarhic (fereastra browserului).
value Valoarea unui obiect.
vlinkColor Returneaz sau seteaz culoarea unei hiperlegturi vizitate.
Exemplu: <BODY onLoad="document.vlinkColor='blue'">.
window Fereastra curent.

Ionel SIMION 118

Metodele JavaScript sunt funcii asociate obiectelor, n sintaxa:
obiect.metoda(). De exemplu, String.toUpperCase() returneaz n majuscule irul
coninut n obiectul String.

Metode Semnificaie
abs Returneaz valoarea absolut
Exemplu: document.write(Math.abs(-10));
returneaz: 10
acos arccosinus (radiani)
alert Afieaz o cutie de dialog cu un mesaj de alert
anchor Folosit n combinaie cu metodele write sau writeln pentru a crea
o int hypertext.
Sintaxa: textString.anchor(anchorName)
asin arcsinus (radiani)
atan arctangenta (radiani)
back Reapeleaz ultimul URL din lista history. Are ecelai effect cu
history.go (-1).
big Formateaz un obiect ir cu acelai efect ca marcajul HTML
<big>.
Exemplu:
var welcomeMessage = "Bun venit."
document.write(welcomeMessage.big())
are acelai efect cu <big> Bun venit.</big>
blink Formateaz un obiect ir cu acelai efect ca marcajul HTML
<blink>.
Exemplu: var attentionMessage = "De retinut "
document.write(attentionMessage.blink())
are acelai efect cu: < blink >Notice</ blink >
blur Estompeaz un element
bold Formateaz un obiect ir cu acelai efect ca marcajul HTML
<bold>.
ceil Returneaz cel mai mic ntreg mai mare sau egal cu argumentul.
Exemplu: Math.ceil(4.31)
Returneaz: 5
charAt

Returneaz caracterul dintr-o poziie dat al unui ir. Primul
caracter are poziia zero.
Exemplu:
var userName = "TEXT sir "
document.write(userName.charAt(3)
Returneaz: T
clear Golete de coninut o fereastr
clearTimeout Anuleaz pauz introdus cu metoda setTimeout.
Exemplu:clearTimeout(waitTime)
click Simuleaz un click al mouse-ului.
close nchide fereastra curent.
Exemple:
window.close()
Proiectarea paginilor WEB 119

close()
self.close()
confirm

Afieaz o caset de dialog de confirmare.
Exemplu;
if (confirm("Esti sigur ca vrei sa vizitezi pagina?.") {
tourWindow = window.open("http:\\www.pub.ro") }
cos Cosinus (argumentul n radiani)
escape Returneaz codul ASCII al argumentului
eval Evalueaz expresii.
Exemplu:
var x = 100
var y = 200
document.write(eval("x + y"))
exp Puteri ale lui e (constanta Euler)
floor Returneaz ntregul mai mic sau egal cu argumentul
focus Evideniaz un element.
fontcolor Formateaz culoarea RGB a obiectului ir. Similar cu codul
HTML <FONT COLOR=COLOR>.
fontsize Formateaz mrimea fontului.
forward ncarc urmtorul document din lista history. Are acelai effect cu
history.go(1).
getDate Returneaz ziua din lun, ca un ntreg ntre 1 i 31.
getDay Returneaz ziua din sptmn, ca un ntreg ntre 0 (duminic) i
6 (smbt).
getHours Returneaz ora zilei, ca un ntreg ntre 0 (miezul nopii) i 23 ora
11 PM).
getMinutes Returneaz minutul din or, ca un ntreg ntre 0 i 59.
getMonth Returneaz luna din an, ca un ntreg ntre 0 (ianuarie) i 11
(decembrie).
getSeconds Returneaz secunda, ca un ntreg ntre 0 i 59.
getTime Returneaz un ntreg reprezentnd data curent. Valoarea este
numrul de milisecunde msurate de la 1 ianuarie 1970.
getTimezoneOffset Returneaz diferena n minute ntre timpul setat pe maina client
i ora Grrenwitch.
getYear Returneaz diferena dintre anul unui obiect de tip data i 1996.
go ncarc un document din lista history.
indexOf Returneaz locaia unui caracter sau ir, pornind cutarea dintr-o
poziie specificat (implicit poziia de start este zero).
Sintaxa: stringName.indexOf([character|string], [startingPoint])
isNaN Pentru platformele UNIX, returneaz true dac argumentul nu
este un numr.
italics Formateaz un obiect ir italic cu acelai efect ca marcajul HTML
<I>.
lastIndexOf Returneaz indexul unui character sau ir, pornind de la sfitul
irului care le conine.
Ionel SIMION 120

link Creaz o hiperlegtur ctre alt obiect.
log Logaritmul natural (baza e).
max Returneaz cel mai mare dintre dou argumene.
Exemplu: Math.max(1,14) Returneaz:14
min Returneaz cel mai mare dintre dou argumene.
open Deschide o nou fereastr n browser, ncrcnd un nou
document.
parse Returneaz numrul de milisecunde de la 1 ianuarie 1970 pn
la o anumit dat.
pow Returneaz baza ridicat la o putere
prompt Afieaz o caset de dialog care accept la prompter
introducerea de date.
random n sistemele UNIX, returneaz un numr aleator ntre 0 i 1.
round Rotunjete un numr la ntregul urmtor sau cel anterior, dac
partea zecimal este mai mare sau egal cu 0,5, respective mai
mic dect 0,5.
select Selecteaz o suprafa a unui element. Se folosete mpreun cu
metoda focus.
setDate Seteaz ziua.
setHours Seteaz ora.
setMinutes Seteaz minutul.
setMonth Seteaz luna ca un ntreg ntre 0 (ianuarie) i 11 (decembrie).
setSeconds Seteaz secunda.
setTime Seteaz valoarea unui obiect de tip dat.
setTimeout Eavalueaz o expresie dup un interval specificat n milisecunde.
setYear Seteaz anul current folosind un ntreg reprezentnd anul minus
1900.
sin Sinus (argumentul n radiani).
small Formateaz un obiect ir n caractere minuscule, folosind
marcajul HTML <SMALL>.
sqrt Returneaz rdcina ptrat a unei expresii pozitive.
strike Formateaz un obiect ir folosind marcajul HTML <STRIKE>.
sub Formateaz un obiect ir ntr-un text folosind marcajul HTML
<SUB>.
submit Are acelai effect ca acionarea butonului submit.
substring Returneaz un subset al unui obiect ir, poziionat ntre dou
indexuri.
sup Formateaz un obiect ir ntr-un text folosind marcajul HTML
<SUP>.
tan Tangenta (argumentul n radiani).
toGMTString Convertete un obiect dat dup convenia GMT.
Sintaxa: today.toGMTString()
toLocaleString Convertete un obiect dat ntr-un ir folosind conveniile locale.
toLowerCase Convertete toate caracterele unui ir n minuscule.
Proiectarea paginilor WEB 121

toString Convertete un obiect de tip data sau location n ir.
toUpperCase Convertete toate caracterele unui ir n majuscule.
UTC Returneaz un numr n milisecunde pentru data n Universal
Coordinated Time (UTC) avnd ca referin ora 0 a zilei de 1
ianuarie 1970.
write Scrie una sau mai multe linii ntr-o fereastr document i poate
include marcahe HTML, expresii JavaScript.
writeln Scrie una sau mai multe linii ntr-o fereastr document urmate de
o nou linie .

Funciile JavaScript. Funciile particulare, definite de utilizator sunt create prin
instruciunea function i grupeaz instruciuni de execuie a anumitor operaii. Definirea
unei funcii se face prin sintaxa:
function Nume_functie(argument1, argument2, etc) { instruciuni; }
O funcie care nu are argumente va fi definit prin:
function Nume_functie() { instruciuni; }
Unele funcii returneaz valoarea unor expresii. De exemplu, urmtoarea funcie
are ca argumente x i y, returnnd rezultatul ridicrii lui x la puterea y:

function raiseP(x,y)
{ total=1;
for (j=0; j<y; j++)
{ total*=x; }
return total; //rezultatul ridicarii lui x la puterea z
}

Instruciunile sunt executate secvenial (x = 1; y = 2; z = x + y) dar pot fi afectate de
instruciuni condiionale sau de ciclare, ca de exemplu.
instruciuni de tip if...else cu sintaxa:
if (condition) { instruciune1; } else { instruciune2; }
instruciuni de ciclare de tip for, do ... while sau while care se repet pn cnd,
respectiv ct timp o anumit condiie este ndeplinit, avnd sintaxa:
for (condiie_initiala; test; increment) { instruciuni; } sau
do { instructiuni; } while (condiie) sau
while (condiie) { instructiuni; }
instruciuni de comutare de tip switch care determin execuia unor instruciuni n
funcie de un anumit context, avnd sintaxa:
switch (expression){
case context1 : instruciune; break;
case 1 context2 : instruciune; break;
...
default : instruciune;}
instruciunile break i continue folosite n interiorul ciclurilor

De exemplu, funcia checkData returneaz true dac numrul caracterelor unui
text introdus este exact trei. n caz contrar, funcia va afia un mesaj de alert i va returna
false.


Ionel SIMION 122

function checkData () {
if (document.form1.threeChar.value.length == 3) {
return true}
else {
alert("Enter exactly three characters. " +
document.form1.threeChar.value + " is not valid.")
return false
}
}

Apelarea funciilor se obine prin numele acestora, mpreun cu un set de
argumente.

Evenimentele sunt aciuni care determin anumite comportamente ale elementelor
din pagina Web. Evenimentele JavaScript constituie caracteristica principal pentru a
conferi capaciti interactive paginii Web. Acestea pot fi iniate de utilizator (de exemplu,
acionarea mouse-ului) sau pot fi detectate automat de sistem (de exemplu, ncrcarea
unei imagini). Pentru ca scriptul s reacioneze la un eveniment, se folosesc identificatori
numii Event Handlers, care asociaz evenimentul cu o anumit funcie JavaScript
aplicat unui obiect, dup sintaxa:
<tag attribut1 attribut2 EventHandler="cod_JavaScript;">


Event Handler Aciune
onAbort Utilizatorul oprete browserul de la ncrcarea complet a unei pagini
se acioneaz butonul Stop sau se selecteaz o hiperlegtur
onBlur Opusul lui onFocus de exemplu, punctarea cu mouse-ul a unui
punct din afara unui text
onClick Utilizatorul efectueaz click pe un element de tip buton, imagine
hart, hiperlegtur
onChange Utilizatorul modific o valoare din pagin de exemplu, alegerea
unui articol dintr-un meniu
onDblClick Utilizatorul efectueaz dublu click pe un element de tip buton,
hiperlegtur, imagine hart
onError Producerea unei erori la ncrcarea unei imagini sau pagini
onFinish Coninutul unui element a terminat un ciclu (doar pentru Internet
Explorer)
onFocus Acionarea unui element din pagin de exemplu, punctarea cu
mouse-ul a unui punct din interiorul unui text
onLoad ncrcarea unei imagini sau a unei pagini
onHelp Acionarea butonului sau meniului Help din browser (doar pentru
Internet Explorer)
onKeyDown Acionarea unei taste
onKeyUp Eliberarea unei taste
onKeyPress Apsarea unei taste
onMouseOver Mouse-ul este deasupra obiectului specificat
Proiectarea paginilor WEB 123

onMouseOut Mouse-ul prsete obiectul specificat
onMouseDown Utilizatorul apas pe butonul mouse-ului
onMouseUp Eliberarea butonului mouse-ului
onMouseMove Mouse-ul se deplaseaz pe un element (doar pentru Internet
Explorer)
onMove Se deplaseaz o fereastr sau un un frame (doar pentru Inetscape
Navigator)
onReset Resetarea unui formular la valorile iniiale
onResize Utilizatorul redimensioneaz fereastra browserului
onScroll Derularea paginii
onSelect Utilizatorul selecteaz un text
onSubmit Utilizatorul trimite un formular
onStart Coninutul unui element ncepe un ciclu (doar pentru Internet
Explorer)
onUnload Prsirea unei pagini


Exerciiul 12.3 Exemplu JavaScript.
<html>
<head>
<script language="JavaScript">
function PushButton()
{
alert("Mesaj de alerta");
}
</script>
</head>
<body>
<b>Exemplu JavaScript</b><hr>
<form>
<input type="BUTTON" name="Buton1"
value="Apas aici"
OnClick="PushButton()">
</form></body></html>



n exerciiul prezentat, funcia folosit PushButton este ncrcat i pstrat n
memorie pn cnd butonul Buton1, a crui valoare este Apas aici, va fi activat.
Butonul este creat prin marcajul <input>. Evenimentul declanator este OnClick, ceea ce
va determina browserul s apeleze funcia PushButton() din cadrul etichetei <input>.
Efectul este afiarea unui mesaj de alert.
Urmtorul exemplu calculeaz aria unui dreptunghi, n funcie de datele introduse
de utilizator.




Ionel SIMION 124


Exerciiul 12.4 Folosirea JavaScript pentru a calcula aria unui dreptunghi.
<html><head>
<title>Calculator arie</title>
<script language=JavaScript>
//Calculeaz aria unui dreptunghi
function Rectangle(form) {
RectangleResult = form.RecLength.value *
form.RecWidth.value
if (RectangleResult == 0)
{document.all.RecT.innerText = "Invalid";
} else {
document.all.RecT.innerText = "Aria
dreptunghiului ales este
"+RectangleResult+" mm2. Acesta este
rezultatul inmultirii
"+form.RecLength.value+" x
"+form.RecWidth.value;
}}
</script>
<form> <font face=Arial size=2>
<ul>
<li>Introducei lungimea dreptunghiului <input name=RecLength> mm</li>
<li>Introducei limea dreptunghiului
<input name=RecWidth> mm</li>
</ul>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input onclick=Rectangle(this.form) type=button value="Calculeaz aria"
name=button><br>
<FONT color=#0000ff size=2
id="RecT">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ap&#259;sa&#355;i
butonul "Calculeaz aria" pentru a obine aria dreptunghiului ales
</font></p>
<blockquote>
<div align=center><font face=Arial size=2><input type=reset value="Resetai valorile"
name=Reset> </font></div>
</blockquote> </form></body></html>


12.4 VBScript

Script-urile realizate pentru paginile Web n limbajul Visual Basic folosesc un subset
al limbajului de programare, numit VBScript. Ele se includ direct n pagina HTML ntre
marcajele <script language=vbscript> i </script>. Pentru a defini tipul de limbaj script
se folosete atributul language. VBScript permite legarea i activarea automat de
obiecte n pagina Web, incluznd controale ActiveX i applete Java.
Un exemplu VBScript care are ca efect afiarea n pagin a textului, Acesta este
un VBScript poate avea sintaxa:
<script type="text/vbscript"> document.write("Acesta este un VBScript ")
</script>
Scriptul poate fi plasat:
Proiectarea paginilor WEB 125

la nceputul fiierului HTML, ntre marcajele <head> ... </head>, caz n care va fi
executat doar atunci cnd va fi apelat sau la declanarea unui anumit eveniment
n interiorul marcajului <body> ... </body>, caz n care acesta va genera
coninutul paginii, prin faptul c se va executa automat, la ncrcarea acesteia:
att n n cadrul marcajului <head> ... </head>, ct i n interiorul marcajului
<body> ... </body>:

<html>
<head>
<script type="text/vbscript">
instruciuni
</script></head>
<body>
<script type="text/vbscript">
instruciuni
</script></body></html>

n cadrul unui marcaj oarecare HTML, asociat unui eveniment:
<marcaj_html atribut=option onEvent=instruciuni VBScript>
</marcaj_html>

Reguli de sintax. Limbajul VBScript este case sensitive. Spaiile sunt ignorate,
cu excepia cazului cnd fac parte dintr-un ir. irurile sunt secvene de caractere incluse
ntre caracterele sau . Toate parantezele care sunt deschise trebuie nchise.
<INPUT TYPE=Button VALUE=apas_aici
onclick=window.alert(Bravo);>
Comentariile sunt introduce instruciunea REM sau prin caracterul :
REM acesta este un comentariu
Acesta este de asemenea un comentariu.
Continuarea unei instruciuni pe linia urmtoare se obine folosind caracterul _ :
If x=1 _
Z=2 then
Instruciunile multiple sunt separate prin caracterul : :
X=1 : y=2

Variabilele VBScript sunt blocuri de informaii care pot fi stocate. Valoarea unei
variabile se poate schimba n timpul aciunii scriptului. Variabilele trebuie s nceap cu o
liter, nu pot conine paranteze i au maximum 256 de caractere. Declararea unei variabile
se poate face prin instruciunile dim, public sau private:
dim nume_variabila
nume_variabila =valoare
O variabil declarat ntr-o procedur poate fi accesat doar n interiorul acesteia,
existnd deci doar atta timp ct procedura este activ. Se pot folosi astfel mai multe
variabile cu acelai nume, n interiorul unor proceduri diferite. Dac ns variabila este
definit n afara procedurii, ea poate fi accesat de toate procedurile din pagin, ea
existnd pn la nchiderea paginii. Valoarea iniial a unei variabile este empty.
Se pot defini mai multe variabie prin aceeai instruciune:
dim x, z, sum
Prin folosirea unor variabile matriciale, acestora li se pot asocia mai multe valori. De
exemplu, o variabil matrice cu trei elemente (0,1,2) poate fi definit astfel:
dim nume_variabila (2)
Ionel SIMION 126

n acest caz, fiecare element al variabilei are o alt valoare:
nume_variabila (0)="valoare 1"
nume_variabila (1)=" valoare 2"
nume_variabila (2)=" valoare 3"


Tipuri de date VBScript
Tip de dat Semnificaie
Empty Variabila nu este iniializat
Null Dat nevalid
Boolean Tue sau False
Byte ntreg ntre 0 i 255
Integer ntreg ntre -32768 i 32767
Currency De la -922.337.203.685.477,5808 la 922.337.203.685.477,5807
Long ntreg ntre -2.147.483.648 i 2.147.483.647
Single De la -3,402823E38 la -1,401298E-45 pentru valori negative
De la 1,401298E-45E la -3,402823E38 pentru valori pozitive
Double De la -1,79769313486232E308 la -4,94065645841247E-324 pentru valori
negative
De la 4,94065645841247E-324 la 1,79769313486232E308 pentru valori
pozitive
Date / Time Numr care reprezint o dat ntre 1 ianuarie 100 i 31 decembrie 9999
String ir de cractere
Object Conine un obiect
Error Conine o eroare codificat


Proceduri. Exist dou tipuri de proceduri: subprocedurile i funciile.
Subprocedurile sunt seturi de instruciuni incluse ntre instruciunile Sub i End
Sub. Aceste proceduri pot iniia aciuni dar nu pot returna valori. Ele se definesc dup
sintaxa:
Sub nume_subprocedura(argument1,argument2)
Instruciuni
End Sub
Sau, atunci cnd nu au argumente:
Sub nume_subprocedura()
Instruciuni
End Sub

Funciile sunt seturi de instruciuni incluse ntre instruciunile Function i End
Function. Aceste proceduri pot iniia aciuni i pot returna valori. Ele se definesc dup
sintaxa:
Function nume_functie(argument1,argument2)
Instruciuni
nume_functie=valoare
End Function
Sau, atunci cnd nu au argumente:
Proiectarea paginilor WEB 127

Function nume_functie()
Instruciuni
nume_functie=valoare
End Function

Apelarea unei proceduri n codul VBScript se face prin mai multe procedee:
apelarea funciei nume_functie; funcia returneaz o valoare care va fi stocat n
variabila nume_variabila:
nume_variabila = nume_functie ()
apelarea funciei nume_functie; funcia returneaz o valoare care va fi afiat n
interiorul unui mesaj:
msgbox "Numele este " & nume_functie ()
apelarea subprocedurii nume_subprocedura prin instruciunea Call, sau chiar
omind aceast instruciune:
Call nume_subprocedura (argument) sau
nume_subprocedura (argument)

Instruciuni condiionate. Pentru a iniia anumite aciuni pot fi folosite trei tipuri de
instruciuni condiionate:
instruciunea if...then...else folosit pentru a selecta una dintre dou posibiliti
de aciune sau pentru a executa un cod dac o condiie este adevrat
Exemple:
if i=10 then
msgbox "Salut"
else
msgbox "La revedere"
end If
sau
if i=10 Then msgbox "Hello"

instruciunea if...then...elseif folosit pentru a selecta una dintre mai multe
posibiliti de aciune
Exemplu:
if sala="BN304" then
msgbox "Mergi in sala BN304"
elseif sala="BN330" then
msgbox " Mergi in sala BN330"
elseif sala="BN215" then
msgbox " Mergi in sala BN215"
else
msgbox "Mergi la secretariat "
end If

instruciunea select case folosit pentru a selecta una dintre mai multe posibiliti
de aciune
Exemplu:
select case sala
case " BN304"
msgbox " Mergi in sala BN304"
Ionel SIMION 128

case " BN330"
msgbox " Mergi in sala BN330"
case " BN215"
msgbox " Mergi in sala BN215"
case Else
msgbox " Mergi la secretariat "

Instruciuni de ciclare. Pentru a repeta un anumit bloc de instruciuni ale unui cod
se folosesc instruciuni de tipul:
instruciunea for next folosit pentru a repeta un set de instruciuni de un
numr specificat de ori; instruciunea for conine variabila de contorizare (i) i valorile sale
extreme; instruciunea next mrete cu o unitate variabila i.
Exemplu:
For i=1 to 100
instruciuni
Next
Folosind termenul cheie step, se poate stabili cu ct crete sau descrete (valoare
negativ) variabila de contorizare i la o iteraie:
Exemplu:
For i=1 to 100 step 10
instruciuni
Next
instruciunea for each...next folosit pentru a repeta un set de instruciuni pentru
fiecare element al unei mulimi
Exemplu:
dim nume_variabila (2)
nume_variabila (0)="ion"
nume_variabila (1)=" elena"
nume_variabila (2)=" mihai"
For Each x in names
document.write(x & "<br />")
Next
instruciunea do...loop folosit pentru a repeta un set de instruciuni atta timp
sau pn cnd o condiie este ndeplinit:
Exemplu:
Do While i>10
instruciuni
Loop
sau
Do Until i=10
instruciuni
Loop



n exemplele care urmeaz, codul VBScript introduce un buton la a crui acionare
se declaneaz o aciune: afiarea unui mesaj, respectiv afiarea unui mesaj dependent
de textul introdus de ctre utilizator.

Proiectarea paginilor WEB 129

Exerciiul 12.5 Exemplu de folosire a unui script VBScript.
<html><head>
<title>Butonul de control</title></head>
<body><b>BUTON DE CONTROL</b>
<p>Aceast pagin arat cum se poate plasa
un buton cu ajutorul VBScript. Dac se apas
acest buton, va fi afiat un mesaj.
<center><input type="button"
name="cmdBegin" value="Apas aici"> <p>
<script language="VBScript">
<!-- Option Explicit
Sub cmdBegin_OnClick()
MsgBox "Ai apasat pe buton. Stiam ca nu o
sa rezisti!"
End Sub
-->
</script></body></html>


Exerciiul 12.6 Un alt exemplu VBScript.
<html>
<head><title>Text de control</title></head>
<body><h4>Text de control</h4>
<p>Aceast pagin demonstreaz cum poate fi
plasat un text de control. Atunci cand se apasa
butonul, va fi afiat un mesaj, dependent de
textul introdus. <p>
<input type="text" name="txtData">
<input type="button" name="cmdBegin"
value="Analizeaza textul">
<script language="VBScript">
<!--
Sub cmdBegin_OnClick()
MsgBox "Ai castigat " & txtData.Value & " lei."
End Sub
-->
</script></body></html>




Funciile interne VBScript sunt prezentate n tabelele urmtoare.

FUNCII INTERNE REFERITOARE LA DAT / TIMP
Date Returneaz data curent a sistemului.
Exemplu:
document.write("The current system date is: ")
document.write(Date)
Rspuns:The current system
date is: 2/11/2004
DateAdd Returneaz o dat la care a fost adugat un interval de timp dat.
Ionel SIMION 130

Sintaxa: DateAdd(interval,number,date)
Intervalul de timp: yyyy an; q trimestru; m - lun; y ziua din lun; d ziua; w
sptmna; ww sptmna din an; h ora; n minutul; s secunda
Exemplul1:
'Adaug o lun de la data 31 ianuarie
2000
document.write(DateAdd("m",1,"31-Jan-
00"))
Rspuns: 2/29/2000
Exemplul2:
'Scade o lun de la data 31 ianuarie 2001
document.write(DateAdd("m",-1,"31-Jan-
01"))
Rspuns: 12/31/2000
DateDiff Returneaz numrul de intervale (luni, zile etc) dintre dou date.
Sintaxa:
DateDiff(interval,data1,data2[,prima_zi_din_saptamana[,prima_saptamana_din_an]])
prima_zi_din_saptamana: 1= vbSunday -luni, 2 = vbMonday -mari, ... 7 = vbSaturday -
duminic, 0=vbUseSystemDayOfWeek
prima_saptamana_din_an:
1 = vbFirstJan1 - pornete de la sptmna n care cade 1 ianuarie
2 = vbFirstFourDays - pornete cu o sptmna ce conine cel puin dou zile din noul
an
3 = vbFirstFullWeek - pornete cu prima sptmn ntreag a anului
Exemplu:
'Cate sptamani (ncepand cu ziua de luni),
'au rmas de la data curent pn la data de 5/10/2004
document.write(Date & "<br />")
document.write(DateDiff("w",Date," 5/10/2004",vbMonday))
Rspuns:
2/07/2004
14
DatePart Returneaz o anumit parte specificat a unei date
Sintaxa:
DatePart(interval,date[,prima_zi_din_saptamana [,prima_saptamana_din_an]])
Exemplu:
document.write(Date & "<br />")
document.write(DatePart("d",Date))
Rspuns:
2/10/2004
10
DateSerial Returneaz data pentru un an, lun i zi specificate
Sintaxa: DateSerial(an,luna,ziua)
Exemple:
document.write(DateSerial(2003,2,3) & "<br />")
document.write(DateSerial(2020-20,7-2,1-1))
Rspuns:
2/3/2003
4/30/2010
DateValue Returneaz o dat
Sintaxa: DateValue(data)
Exemplu:
document.write(DateValue("31-Jan-04") & "<br />")
document.write(DateValue("31-Jan") & "<br />")
document.write(DateValue("31-Jan-04 2:39:49 AM"))
Rspuns:
1/31/2004
1/31/2004
1/31/2004
Day Returneaz un numr cuprins ntre 1 i 31 - numrul zilei din lun
Sintaxa: Day(Date)
Exemplu:
document.write(Day(Date))
Rspuns:
2/8/2004
8

Proiectarea paginilor WEB 131


FormatDateTime Returneaz o expresie format ca o dat
Sintaxa:FormatDateTime(date,format)
vbGeneralDate=0 - Afieaz data n formatul mm/dd/yy.
vbLongDate=1 - Afieaz data n formatul lung sptmna/luna/youa/anul
vbShortDate=2 - Afieaz data n formatul scurt luna/luna/anul (mm/dd/yy)
vbLongTime=3 - Afieaz data n formatul: hh:mm:ss PM/AM
vbShortTime=4 - Afieaz data n formatul: hh:mm
Exemplul1:
document.write("The current date is: ")
document.write (FormatDateTime(Date()))
Rspuns:
1/31/2004
Exemplul2:
document.write("The current date is: ")
document.write (FormatDateTime(Date(),1))
Rspuns:
The current date is: Thursday, February 10,
2004
Hour Returneaz un numr cuprins ntre 0 i 23, care reprezint ora zilei
Sintaxa: Hour(time)
Exemplu: document.write(Hour(Time)) Rspuns: 14
IsDate Returneaz o valoare boolean care indic dac o expresie evaluat poate
fi convertit ca dat
Sintaxa: IsDate(expresie)
Exemplu:
document.write(IsDate("September 22, 1947") & "<br />")
document.write(IsDate(#11/11/01#) & "<br />")
document.write(IsDate("#11/11/01#") & "<br />")
document.write(IsDate("Salut!"))
Rspuns:
True
True
False
False
Minute Returneaz un numr cuprins ntre 0 i 59 - minutul din or
Sintaxa: Minute(time)
Exemplu: document.write(Minute(Time)) Rspuns:
35
Month Returneaz un numr cuprins ntre 1 i 12, care reprezint luna din an
Sintaxa: Month(date)
Exemplu: document.write(Month(Date)) Rspuns: 10
MonthName Returneaz numele unei luni specificate
Sintaxa: MonthName(month[,parametru])
Parametru - valoare boolean care indic dac numele lunii va fi prescurtat (optional).
Implicit este false.
Exemplu: document.write(MonthName(6,true)) Rspuns: Jun
Now Returneaz data i ora curente ale sistemului
Exemplu: document.write(Now) Rspuns: 2/15/2004 12:43:13 AM
Second Returneaz un numr cuprins ntre 0 i 59, care reprezint secundele
Sintaxa: Second(time)
Exemplu: document.write(Second(Time)) Rspuns: 13
Time Returneaz ora curent a sistemului
Exemplu: document.write(Time) Rspuns: 11:07:27 AM

Ionel SIMION 132


Timer Returneaz numrul de secunde trecute de la 12:00 AM
Sintaxa: Timer
Exemplu:
document.write(Time & "<br />")
document.write(Timer)
Rspuns:
1:12:13 PM
4333
TimeSerial Returneaz formatul standard de timp pentru o anume or, minut,
secund
Sintaxa: TimeSerial(hour,minute,second)
Exemple:
document.write(TimeSerial(21,5,3) & "<br />")
document.write(TimeSerial(13+3,11-3,1-1))
Rspuns:
9:05:03 PM
4:08:00 PM
TimeValue Returneaz un format standard de timp
Sintaxa: TimeValue(time)
Exemple:
document.write(TimeValue("8:43:59 PM") & "<br />")
document.write(TimeValue(#8:43:59 PM#) & "<br />")
document.write(TimeValue("17:32"))
Rspuns:
8:43:59 PM
5:55:59 PM
5:32:00 PM
Weekday Returneaz un numr cuprins ntre 1 i 7 -a sptmnii
Sintaxa: Weekday(date[,prima_zi_a_lunii])
Exemplu:
document.write(Date & "<br />")
document.write(Weekday(Date))
Rspuns:
1/15/2004
7
WeekdayName Returneaz numele zilei din sptmn pentru o anumit dat
Sintaxa: weekdayName(weekday[,abbreviate[,prima_zi_a_lunii]])
Exemplu:
document.write(Date & "<br />")
document.write(Weekday(Date) & "<br />")
document.write(WeekdayName(Weekday(Date),true))
Rspuns:
2/15/2004
1
Sun
Year Returneaz un numr care reprezint anul
Sintaxa: Year(Date)
Exemplu:
document.write(Year(Date))
Rspuns: 2/8/2004
2004

FUNCII INTERNE DE CONVERSIE
Asc Convertete prima liter a unui ir n cod ANSI
Sintaxa: Asc(ir)
Exemplu: document.write(Asc("WEB")) Rspuns: 87
CBool Convertete o expresie ntr-o variant de tip Boolean
Sintaxa: CBool(expresie)
Exemplu:
dim a,b
a=5 b=10
document.write(CBool(a) & "<br />")
document.write(CBool(b))
Rspuns:
True
True
Proiectarea paginilor WEB 133


CByte Convertete o expresie ntr-o variant de tip Byte
Sintaxa: CByte(expresie)
Exemplu:
dim a
a=134.345
document.write(CByte(a))
Rspuns: 134
CCur Convertete o expresie ntr-o variant de tip Currency
Sintaxa: CCur(expresie)
Exemplu:
dim a
a=312.345
document.write(CCur(a))
Rspuns: 312.345
CDate Convertete o expresie de tip dat / timp ntr-o variant de tip Date
Sintaxa: CDate(data)
Exemplu:
d="Ianuary 12, 2004"
if IsDate(d) then
document.write(CDate(d))
end if
Rspuns: 1/12/04
CDbl Convertete o expresie de tip dat / timp ntr-o variant de tip Double
Sintaxa: CDbl(expresie)
Exemplu:
dim a
a=14111111113353355.345455
document.write(CDbl(a))
Rspuns:
1.41111111133534E+16
Chr Convertete un cod ANSI ntr-un caracter
Sintaxa: Chr(charcode)
Exemplu:
document.write(Chr(37) & "<br />")
document.write(Chr(35))
Rspuns:
2
#
CInt Convertete o expresie ntr-o variant de tip Integer
Sintaxa: CInt(expresie)
Exemplu:
dim a
a=-323.24
document.write(CInt(a))
Rspuns: -323
CLng Convertete o expresie ntr-o variant de tip Long
Sintaxa: CLngt(expresie)
Exemplu:
dim a,b
a=4124.45 b=342.55
document.write(CLng(a) & "<br />")
document.write(CLng(b))
Rspuns:
4124
342


Ionel SIMION 134

CSng Convertete o expresie ntr-o variant de tip Single
Sintaxa: CSngt(expresie))
Exemplu:
dim a,b
a=4124.4523 b=342.5532
document.write(CLng(a) & "<br />")
document.write(CLng(b
Rspuns:
4124.45
342.55
CStr Convertete o expresie ntr-o variant de tip String
Sintaxa: CStr(expresie)
Exemplul1:
dim a
a=false
document.write(CStr(a))
Rspuns: false
Exemplul 2:
dim a
a=#02/02/04#
document.write(CStr(a))
Rspuns: 2/2/2004
Hex Returneaz valoarea hexazecimal a unui numr
Sintaxa: Hex(number)
Exemplu:
document.write(Hex(2) & "<br />")
document.write(Hex(9) & "<br />")
document.write(Hex(10) & "<br />")
document.write(Hex(459) & "<br />"))
Rspuns:
2
9
A
1CB
Oct Returneaz valoarea octal a unui numr
Sintaxa: Oct(number)
Exemplu:
document.write(Oct(2) & "<br />")
document.write(Oct(9) & "<br />")))
Rspuns:
2
11

FUNCII MATEMATICE
Abs Returneaz valoarea absolut a unui numr
Sintaxa: Abs(numr)
Exemplu: document.write(Abs(-34.4 Rspuns: 34
Atn Returneaz valoarea funciei arctangent pentru un argument dat
Sintaxa: Atn(numr)
Exemplu: document.write(Atn(8.9)) Rspuns: 1.45890606062322
Cos Returneaz valoarea funciei cosinus pentru un argument dat
Sintaxa: Cos(numr)
Exemplu: document.write(Cos(-50.0)) Rspuns: 0.964966028492113
Exp Returneaz rezultatul ridicrii lui e la o putere
Sintaxa: Exp(numr)
Exemplu: document.write(Exp(6.7)) Rspuns: 812.405825167543
Int Returneaz partea ntreag a unui numr dat
Sintaxa: Int(numr)
Exemplu: document.write(Int(5.43567)) Rspuns: 5

Proiectarea paginilor WEB 135

Fix Returneaz partea ntreag a unui numr dat
Sintaxa: Fix(numr)
Exemplu: document.write(Int(3.23545)) Rspuns: 3
Log Returneaz valoarea funciei logaritm natural pentru un argument dat
Sintaxa: Log(numr)
Exemplu: document.write(Log(38.256783227)) Rspuns: 3.64432088381777
Rnd Returneaz un numr aleator cuprins ntre 0 i 1
Sintaxa: Rnd[(numr)]
Numr (opional): <0 returneaz acelai numr de fiecare dat
>0 returneaz urmtorul numr aleator din secven
=0 - returneaz cel mai recent numr generat
nespecificat - returneaz urmtorul numr aleator din secven
Exemplu:
dim max,min
max=100
min=1
document.write(Int((max-min+1)*Rnd+min))
Rspuns: 71
Sgn Returneaz un ntreg care indic semnul unui numr dat
Sintaxa: Sgn[(numr)]
Numr: < 0 returneaz -1
> 0 - returneaz 1
= 0 - returneaz 0
Exemplu: document.write(Sgn(-2.17)) Rspuns: -1
Sin Returneaz valoarea funciei sinus pentru un argument dat
Sintaxa: Sin(numr)
Exemplu: document.write(Sin(47) Rspuns: 0.123573122745224
Sqr Returneaz rdcina patrat a unui numr dat
Sintaxa: Sqr(numr)
Exemplu: document.write(Sqr(16)) Rspuns: 4
Tan Returneaz valoarea funciei tangent pentru un argument dat
Sintaxa: Tan(numr)
Exemplu: document.write(Tan(40)) Rspuns: -1.1172149309239

FUNCII MATRICIALE
Array Returneaz un element al unui tablou. Primul element are numrul de
ordine zero.
Sintaxa: Array(lista_argumente)
lista_argumente - o list de valori separate prin virgul, care sunt elementele tabloului
Exemplu:
dim a
a=Array(12,4,17,20)
document.write(a(2) & "<br />")
document.write(a(0))
Rspuns:
17
12


Ionel SIMION 136

Filter Returneaz un subtablou al unui tablou de tip ir, pe baza unor criterii de
filtrare.
Sintaxa: Filter(siruri_de_intrare,valoare[,include[,compare]])
siruri_de_intrare un tablou cu irurile care vor fi analizate
include (opional) valoare boolean: true (implicit) care indic dac subirul returnat
va conine sau va exclude o valoare
compare (opional) 0 = vbBinaryCompare comparare binar; 1=vbTextCompare-
comparare textual
Exemplul1:
dim a(5),b
a(0)="negru"
a(1)="alb"
a(2)="verde"
a(3)="galben"
a(4)="rosu"
b=Filter(a,"n")
document.write(b(0) & "<br />")
document.write(b(1) & "<br />")
document.write(b(2))
Rspuns:
alb
verde
rosu
Exemplul 2:
dim a(5),b
a(0)="negru"
a(1)="alb"
a(2)="verde"
a(3)="galben"
a(4)="rosu"
b=Filter(a,"n",false)
document.write(b(0) & "<br />")
document.write(b(1) & "<br />")
document.write(b(2))
Rspuns:
negru
galben
IsArray Returneaz o valoare boolean care indic dac o variabil este de tip
tabou.
Sintaxa: IsArray(variable)
Exemplul1:
dim a(3)
a(0)="alb"
a(1)="negru"
a(2)="verde"
document.write(IsArray(a))
Rspuns:
true
Exemplul1:
dim a
a="alb"
document.write(IsArray(a))
document.write(IsArray(a))
Rspuns:
False
Join Returneaz un ir format din irurile unui tablou
Sintaxa: Join(list[,separator])
Separator (optional) caracterul de separare a irurilor componenete. Implicit este
caracterul spaiu.
Exemplu:
dim a(5),b
a(0)="negru"
a(1)="alb"
a(2)="verde"
a(3)="galben"
a(4)="rosu"
b=Filter(a,"n")
document.write(join(b,", "))
Rspuns:
alb, verde, rosu


Proiectarea paginilor WEB 137

LBound
Ubound
Returneaz cea mai mic, respectiv cea mai mare dimensiune a unui
tablou.
Sintaxa: LBound(nume_tablou[,dimensiune])
Exemplu:
dim a(6)
a(0)="negru"
a(1)="alb"
a(2)="verde"
a(3)="galben"
document.write(UBound(a))
document.write("<br />")
document.write(LBound(a))
Rspuns:
6
0
Split Returneaz un tablou unidimesional care conine un numr de iruri
Sintaxa: Split(expresie[,separator[,count[,compare]]])
Exemplu:
dim txt,a
txt="Buna ziua!"
a=Split(txt)
document.write(a(0) & "<br />")
document.write(a(1))
Rspuns:
Buna
ziua!

FUNCII IR
InStr Returneaz prima poziie a unui ir n interiorul altui ir. Cutarea ncepe de
la primul caracter al irului
Sintaxa: InStr([start,]irul1,irul2[,compar])
start (opional) poziia din care ncepe cutarea;
compar (opional) 0 = vbBinaryCompare comparare binar; 1=vbTextCompare-
comparare textual
dac irul 1 este "" - returneaz 0
dac irul 1 sau irul 2 este Null - returneaz Null
dac irul 2 este "" - returneaz start
dac irul 2 este n interiorul irului 1 - returneaz poziia n care este ntlnit
dac irul 2 nu este gsit - returneaz 0
dac start> Len(string2) - returneaz 0
Exemplu:
dim txt,pos
txt="Este o zi frumoas!"
pos=InStr(txt,"zi")
document.write(pos)
Rspuns:
8

InStrRev Returneaz prima poziie a unui ir n interiorul altui ir. Cutarea
ncepe de la ultimul caracter al irului
Sintaxa: InStrRev([start,]irul1,irul2[,compare])
Vezi i InStr
Exemplu:
dim txt,pos
txt="ESTE O ZI FRUMOAS!"
pos=InStr(txt,"fr")
document.write(pos)
Rspuns:
11

Ionel SIMION 138


LCase Convertete un ir n caractere minuscule
Sintaxa: LCase(ir)
Exemplu:
dim txt
txt="ESTE O ZI FRUMOAS!"
document.write(LCase(txt))
Rspuns:
este o zi frumoas!
Left Returneaz primele n caractere ale unui ir
Sintaxa: Left(ir,n)
Exemplu:
dim txt
txt="ESTE O ZI FRUMOAS!"
document.write(Left(txt,10))
Rspuns:
ESTE O ZI F
Len Returneaz numrul de caractere ale unui ir sau din numele unei variabile
Sintaxa: Len(ir | nume_variabila)
Exemplu:
dim txt
txt="ESTE O ZI FRUMOAS!"
document.write(Len(txt))
Rspuns:
19
LTrim Elimin spaiile de la nceputul unui ir
Sintaxa: LTrim(ir)
Exemplu:
dim txt
txt=" ESTE O ZI FRUMOAS!"
document.write(LTrim(txt))
Rspuns:
ESTE O ZI
FRUMOAS!
RTrim Elimin spaiile de la sfritul unui ir
Sintaxa: LTrim(ir)
Exemplu:
dim txt
txt="ESTE O ZI FRUMOAS! "
document.write(RTrim(txt))
Rspuns:
ESTE O ZI
FRUMOAS!
Trim Elimin spaiile de la ambele capete ale unui ir
Sintaxa: Trim(ir)
Exemplu:
dim txt
txt=" ESTE O ZI FRUMOAS! "
document.write(Trim(txt))
Rspuns:
ESTE O ZI
FRUMOAS!
Mid Returneaz un numr de caractere ale unui ir
Sintaxa: Mid(ir,start[,lungime])
Exemplu:
dim txt
txt="ESTE O ZI FRUMOAS!"
document.write(Mid(txt,2,5))
Rspuns:
STE O



Proiectarea paginilor WEB 139

Replace nlocuiete o anumit parte a unui ir cu un alt ir, de un numr dat de ori
Sintaxa: Replace(ir,find,inlocuiete_cu[,start[,count[,compara]]])
Exemplu:
dim txt
txt="ESTE O ZI FRUMOAS!"
document.write(Replace(txt,"ZI","VARA"))
Rspuns:
ESTE O VARA FRUMOAS!
Right Returneaz ultimele n (numr dat) caractere ale unui ir
Sintaxa: Right(string,n)
Exemplu:
dim txt
txt="ESTE O ZI FRUMOAS!"
document.write(Right(txt,7))
Rspuns:
UMOAS!
StrComp Compar dou iruri
Sintaxa: StrComp(ir1,ir2[,compara])
dac ir1 < ir2 - StrComp returneaz -1
dac ir1 = ir2 - StrComp returneaz 0
dac ir1 > ir2 - StrComp returneaz 1
Exemplu: document.write(StrComp("VBScript","vbscript")) Rspuns: -1
String Returneaz un ir coninnd un caracter ce se repet pe o anumit lungime
Sintaxa: String(lungime,caracter)
lungime lungimea irului
Exemplu: document.write(String(5,"@")) Rspuns: @@@@@
StrReverse Inverseaz ordinea caracterelor unui ir
Sintaxa: StrReverese(ir)
Exemplu:
dim txt
txt="ESTE O ZI FRUMOAS!"
document.write(StrReverse(txt))
Rspuns:
!SAOMURF IZ O ETSE
UCase Convertete un ir n caractere majuscule
Sintaxa: UCase(ir)
Exemplu:
dim txt
txt="este o zi frumoas!"
document.write(LCase(txt))
Rspuns:
ESTE O ZI FRUMOAS!

ALTE FUNCII
CreateObject Creaz un obiect de un anumit tip
Sintaxa: CreateObject(nume_aplicaie.tipul,locaia])
nume_aplicaie numele aplicaiei care va crea obiectul
tipul tipul / clasa obiectului;
locaia unde va fi creat obiectul
Exemplu: dim myexcel
Set myexcel=CreateObject("Excel.Sheet")
myexcel.Application.Visible=True ...code...
myexcel.Application.Quit Set myexcel=Nothing
Ionel SIMION 140


Eval Evalueaz o expresie i returneaz rezultatul
Sintaxa: Eval(expresie)
GetLocale Returneaz ID local
Exemplu:
dim c
c=GetLocale
document.write(c)
Rspuns:
1048

GetObject Returneaz o referin la un obiect dintr-un fiier
Sintaxa: GetObject([pathname][,class])
Pathname calea de referin a fiierului care conine obiectul
class clasa obiectului
GetRef Permite conectarea unui eveniment DHTML la un cod VBScript
Sintaxa: Set object.event=GetRef(procname)
Object numele obiectului DHTML cu care este asociat un eveniment DHTML
Event - numele evenimentului DHTML cu care este asociat un obiect DHTML
Procname numele unei funcii sau subproceduri asociate cu evenimentul DHTML
Exemplu:
Function test()
dim txt
txt="GetRef Test" & vbCrLf
txt=txt & "Bun ziua!"
MsgBox txt
End Function
Set Window.Onload=GetRef("test")
InputBox Afieaz o caset de dialog
Sintaxa: InputBox(prompt[,title][,default][,xpos][,ypos][,helpfile,context])
prompt mesajul care va fi afiat n caseta de dialog
title (opional) titlul casetei de dialog
default(opional) textul implicit din caseta de dialog
xpos(opional) distana pe orizontal dintre caset i marginea din stnga a ecranului
ypos(opional) distana pe vertical dintre caset i marginea de sus a ecranului
helpfile(opional) numele unui fiier help
context(opional) numr asociat cu fiierul help
Exemplu:
dim nume_c
fname=InputBox("Scrie-ti numele:")
MsgBox("Numele este " & nume_c)
IsEmpty Indic dac o anumit variabil a fost iniializat
Sintaxa: IsEmpty(expresie)
Exemplu:
dim x
document.write(IsEmpty(x) & "<br />")
x=10
document.write(IsEmpty(x) & "<br />"))
Rspuns:
True
False




Proiectarea paginilor WEB 141

IsNull Indic dac o anumit expresie conine date care nu sunt valide
Sintaxa: IsNull(expresie)
Exemplu:
dim x
document.write(IsNull(x) & "<br />")
x=Null
document.write(IsNull(x))
Rspuns:
False
True

IsNumeric Indic dac o anumit expresie poate fi evaluat ca un numr
Sintaxa: IsNumeric(expresie)
Exemplu:
dim x
x=123
document.write(IsNumeric(x) & "<br />")
x="123"
document.write(IsNumeric(x) & "<br />")
x="911 Help"
document.write(IsNumeric(x))
Rspuns:
True
True
False

IsObject Indic dac o anumit expresie este un obiect
Sintaxa: IsNumeric(expresie)
Exemplul 1:
dim x
set x=poc
document.write(IsObject(x))
Rspuns: True
Exemplul 2:
dim x
x="poc"
document.write(IsObject(x))
Rspuns: False
LoadPicture Returneaz un obiect imagine
Sintaxa: LoadPicture(nume_imagine)
MsgBox Afieaz un mesaj; dup ce utilizatorul a acionat un buton al mouse-ului,
returneaz o valoare care indic acel buton
Sintaxa: MsgBox(prompt[,buttons][,titlu][,helpfile,context])
Valori returnate: 1 = vbOK a fost acionat butonul OK
2 = vbCancel - a fost acionat butonul Cancel
3 = vbAbort - a fost acionat butonul Abort
4 = vbRetry - a fost acionat butonul Retry
5 = vbIgnore - a fost acionat butonul Ignore
6 = vbYes - a fost acionat butonul Yes
Exemplu:
dim answer
answer=MsgBox("Hello everyone!",65,"Example")
document.write(answer)
RGB Returneaz un numr care reprezint valoarea RGB a unei culori
Sintaxa: RGB(red,green,blue)
Exemplu: document.write(rgb(234,0,0)) Rspuns: 234
Round Rotunjete (aproximeaz) un numr
Sintaxa: Round(expresie[,numr_cifre_zecimale])
Exemplu:
dim x
Exemplu:
dim x
Ionel SIMION 142

x=143.2354
document.write(Round(x))
Rspuns: 143
x=143.2354
document.write(Round(x,2))
Rspuns: 143.23
ScriptEngine Indic limbajul script curent
Sintaxa: ScriptEngine
Valori returnate:
VBScript motorul Microsoft Visual Basic Scripting Edition
JScript - motorul Microsoft Jscript
VBA - motorul Microsoft Visual Basic for Applications
ScriptEngineBuildVersion
ScriptEngineMajorVersion
ScriptEngineMinorVersion
Returneaz versiunile limbajului script

SetLocale Seteaz ID-ul local i returneaz ID-ul anterior
Sintaxa: SetLocale(id_local)
TypeName Returneaz tipul unei variabile
Sintaxa: TypeName(varname)
Valori returnate:
Byte Integer Long Single Double Currency
Decimal Date String Boolean Empty Null
<object type> Object Nothing Error Unknown
Exemplu:
dim x
x="Bun ziua!"
document.write(TypeName(x) & "<br />")
x=6
document.write(TypeName(x) & "<br />")
x=2.345
document.write(TypeName(x) & "<br />")
x=Empty
document.write(TypeName(x) & "<br />")
x=True
document.write(TypeName(x))
Rspuns:
String
Integer
Double
Empty
Boolean

VarType Returneaz o valoare care indic tipul unei variabile
Sintaxa: TypeName(varname)
Valori returnate:
0 = vbEmpty 1 = vbNull 2 = vbInteger 3 = vbLong
4 = vbSingle 5 = vbDo ble 6 = vbCurrency 7 = vbDate
8 = vbString 9 = vbObject 10 = vbError 11 = vbBoolean
12 = vbVariant 13 = vbDataObject 17 = vbByte 8192 = vbArray
Exemplu:
dim x
x="Bun ziua!"
document.write(VarType(x) & "<br />")
x=4
document.write(VarType(x) & "<br />")
x=Null
document.write(VarType(x) & "<br />")
x=True
document.write(VarType(x))
Rspuns:
8
2
1
11

Proiectarea paginilor WEB 143


12.5 Controale ActiveX

ActiveX este o tehnologie introdus i extins de Microsoft prin care sunt
implementate controale care pot fi integrate n aplicaii, inclusiv n paginile Web.
Controalele ActiveX sunt o alternativ la aplicaiile Java i funcioneaz n Internet
Explorer, dar nu i n Netscape Navigator. La fel ca i appletele Java, acestea pot fi
nglobate n pagini Web i configurate. Ele sunt utilizate pentru a furniza controale: aplicaii
de redare a secvenelor media, calendare, foi de calcul tabelar, bare de evoluie etc.
Controalele ActiveX sunt incluse n pagina HTML prin elementul object, ntre
marcajele <object> i </object>. Ele au, ca i appletele Java, atribute i parametri care
le definesc comportamentul. Funcionarea controlului ActiveX este legat de anumite
evenimente.
Elementul object include informaii cheie legate de controlul ActiveX, ca: ID-ul
asociat, URL-ul surs al controlului, clasa ID (CLSID) pentru a intra n registru. Aceste
informaii permit browserului s obin, s nregistreze i s ncarce controlul pe sistemul
utilizatorului. Marcajul <object> pentru control nu este inserat n seciunea <header>, ca n
cazul scripturilor JavaScript sau VBScript, ci n corpul paginii HTML.
n exerciiul urmtor este apelat un control ActiveX pentru a insera n pagina Web
un calendar.

Exerciiul 12.7 Folosirea unui control ActiveX.
<head><title>Calendar</title></head>
<body> <b> CALENDAR </b>
obtinut cu un control ActiveX <p>
<object classid="clsid:8E27C92B-1264-
101C-8A2F-040224009C02"
id="Calendar3">
<param name="BackColor" value="-
2147483633">
<param name="Year" value="2004">
<param name="Month" value="11">
<param name="Day" value="28">
<param name="DayLength" value="1">
<param name="MonthLength" value="1">
<param name="DayFontColor" value="0">
<param name="FirstDay" value="1">
<param name="GridCellEffect" value="1">
<param name="GridFontColor"
value="10485760">
<param name="GridLinesColor" value="-2147483632">
<param name="ShowDateSelectors" value="-1">
<param name="ShowDays" value="-1">
<param name="ShowHorizontalGrid" value="-1">
<param name="ShowTitle" value="-1">
<param name="ShowVerticalGrid" value="-1">
<param name="TitleFontColor" value="10485760">
<param name="ValueIsNull" value="0">
</object>
</body> </html>

Ionel SIMION 144

n sistemul Windows sunt numeroase controale ActiveX, cu fiierele lor suport
(.ocx): butoane de toate tipurile, controale text, controale grafice, de tip bar de defilare
etc. Pentru a fi folosite, fiierul suport al controlului trebuie s se afle n directorul
windows/system. Fiierul respectiv poate fi nregistrat n sistemul de operare folosind
RegSvr32.exe, asociindu-i-se astfel o valoare de nregistrare.
Obinerea numrului de nregistrare a unui control ActiveX se poate face cu ajutorul
programelor regedit.exe sau aclist.exe (disponibil pe site-ul Microsoft). Controlul ActiveX
folosit n exerciiul urmtor are n registru identificatorul (class ID): 8E27C92B-1264-101C-
8A2F-040224009C02. Acest identificator reprezint n mod unic controlul Calendar1
pentru sistemul Windows.
Controalele ActiveX sunt o categorie de componente integrate n paginile WEB,
denumite generic obiecte. Acestea pot fi elemente de diverse tipuri: imagini, controale,
applete Java, elemente video, audio.
Analiznd codul HTML din exerciiul anterior, prin care este introdus un obiect de
tipul Control ActiveX, se poate evidenia procedura de implementare a unui obiect ntr-o
pagin Web.

Atributele obiectului sunt plasate n cadrul marcajului de nceput <object>:

<object
classid="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
id=numele_controlului width=240 height=240 align=left hspace=5 vspace=5 >

n tabelul urmtor este prezentat o list de atribute pentru diverse tipuri de
obiecte. Pentru un anumit tip de obiect, doar anumite tipuri de atribute sunt funcionale.
Atributele classid, id, width, height, align, hspace, i vspace (marcate n tabel) pot fi
folosite pentru controalele ActiveX.

ATRIBUTE ALE OBIECTELOR
align* Determin poziia obiectului
border Laimea chenarului din jurul obiectului
classid* Identificator de clas ID sau locaia URL pentru obiect
codebase* Indic locaia URL a obiectului, dac acesta nu se afl n acelai director
ca i fiierul HTML
codetype Tipul de obiect media al crui cod este referit prin atributul classid.
Pentru obiectele ActiveX, tipul este determinat automat
data URL care indic un obiect de tip data, ca de exemplu, fiierul .gif pentru
un obiect imagine
declare Obiectul este declarat dar nu este nc activat
height* nimea unui obiect de tip imagine
hspace* Mrimea marginii orizontale din jurul unui obiect de tip imagine
id* Identificator al unui obiect
ismap Obiectul este definit printr-o legtur hipertext
name Atunci cnd atributul declare nu este activ, atributul name i datele
asociate sunt trimise serverului
shapes Obiectul conine ancore cu hiperlegturi cu forme asociate
Proiectarea paginilor WEB 145

standby Un text scurt pe care browserul l poate afia n timpul ncrcrii datelor
i implementrii obiectului
type Tipul de obiect media pentru datele referite de atributul data
usemap Locaia URL pentru o imagine hart static
vspace* T Mrimea marginii verticale din jurul unui obiect de tip imagine
width* Limea unui obiect de tip imagine
* Atribute aplicabile controalelor ActiveX .

Atributul classid este o component esenial a declaraiei obiectului ActiveX,
avnd ca valoare codul de nregistrare a obiectului n baza de date a sistemului. Exemplu:
clasid=clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2.
Atributul id definete identificatorul obiectului, prin care acesta poate fi apelat
oriunde n coninutul paginii. Valoarea atributului id este un nume care trebuie s nceap
cu o liter.
Atributele width i height determin dimensiunile obiectului la afiarea n pagin.
Valorile celor dou atribute sunt date, n mod implicit, n pixeli, dar pot fi folosite i
procente din dimensiunile ecranului. Exemplu: width=240, height=50% .
Atributele vspace i hspace definesc marginile din jurul obiectului, pentru afiarea
acestuia de ctre browser. Valorile celor dou atribute sunt date n mod implicit, n pixeli,
dar pot fi folosite i procente din dimensiunile ecranului. Exemplu: hspace=10,
vspace=5%.
Atributul align determin poziia obiectului. Exemplu: align=left. Valorile acestui
atribut sunt prezentate n tabelul urmtor:

VALOARE DESCRIERE
baseline Marginea de jos a obiectului este aliniat, pe vertical, cu marginea de
jos curent a fontului
center Obiectul este centrat pe orizontal
left Aliniere la marginea din stnga
middle Mijlocul obiectului este aliniat, pe vertical, cu marginea de jos curent
a fontului
right Aliniere la marginea din dreapta
textmiddle Mijlocul obiectului este aliniat, pe vertical, la mijlocul nlimii fontului
textbottom Marginea de jos a obiectului este aliniat, pe vertical, marginii de jos
curente a fontului
texttop Marginea de sus a obiectului este aliniat, pe vertical, cu marginea de
sus curent a fontului

Parametrii obiectului sunt caracteristici ale obiectului definite prin obiect n sine i
nu prin standardele HTML, n mod asemntor cu proprietile obiectelor din Visual Basic.
Parametrii sunt introdui prin marcajul <param> situat ntre marcajele <object> i
</object>. n cadrul acestui marcaj sunt definite att numele unei anume proprieti ct i
valoarea iniial pentru aceast proprietate, sup sintaxa:
<param name="nume_parametru" value="valoare_parametru">
Exemplu: <param name="FontName" value="Arial">
Ionel SIMION 146

Ulterior, cu ajutorul unor scripturi, parametrii obiectului pot fi modficai. Referirea la
o anumit proprietate n cadrul unui script se face prin includerea identificatorului ID al
obiectului i a proprietii respective, dup sintaxa:
Instruciune ID_obiect.Nume_parametru
Exemplu: msgbox calendar.TitleFontColor

Modelul obiect document (DOM) creat de Microsoft pentru browserul Internet
Explorer (Microsoft Internet Explorer Scripting Object - MSIE) definete obiectele care pot
fi accesate de limbajul script, cu ajutorul proprietilor, evenimentelor i metodelor
specifice. Ierarhia MSIE este cea din figur.




obiectul Window este obiectul de nivel cel mai nalt i const din nsi
fereastra browserului
obiectul Frame fiecare obiect windows conine una sau mai multe cadre de
tip frame
obiectul History conine lista evolutiv pentru obiectul windows
obiectul Navigator conine informaii despre aplicaia din fereastra curent
obiectul Location conine informaii privind locaia URL curent
obiectul Script conine scripturi definite prin marcajele <script> n fereastra
curent
obiectul Document se refer la documentul din fereastra curent; fiecare
fereastr sau cadru are un singur obiect de tip Document
obiectul Link este un tablou cu hiperlegturile dintr-un anumit document
anchor este un tablou cu ancore dintr-un anumit document
form este un tablou cu formularele dintr-un anumit document
element este un tablou cu elementele formular HTML dintr-un anumit
document
Prima posibilitate pentru a apela un script este aceea de a folosi construcia SUB
END SUB pentru a defini o procedur care va fi executat cu ocazia unui eveniment.
Aceasta este o sintax VBScript, folosind numele obiectului sau controlului ActiveX i
evenimentul, legate prin caracterul _:
Sub Buton_onClick
Proiectarea paginilor WEB 147

Aciunea are efect atunci cnd evenimentul specificat (onClick) este aplicat obiectului
specificat (Buton).
n exerciiul prezentat, la acionarea butonului cmdClick care are valoarea
value="Apas aici pentru a apela scriptul" se obine afiarea unei casete de alert cu
mesajul "Buna ziua!".

Exerciiul 12.8 Folosirea scripturilor implicit.
<html><head>
<title>Folosirea scripturilor
implicit</title>
<script language=vbscript>
sub cmdClick_onClick
alert "Buna ziua!"
End sub
</script></head>
<body>
<form name="formMain">
<input type="button" name="cmdClick"
value="Apas aici pentru a apela
scriptul">
</form></body></html>


O a doua posibilitate de a folosi scriptul este aceea de a-l apela din interiorul
marcajului elementului HTML. n acest caz trebuie specificat numele subrutinei i limbajul
script folosit. n exerciiul urmtor, scriptul poate fi apelat prin dou butoane cu numele
"cmdClickUnu" i "cmdClickDoi" i valorile Unu, respectiv Doi.

Exerciiul 12.9 Folosirea scripturilor prin apelare direct.
<html><head><title>Folosirea
scripturilor prin apelare directa</title>
<script language=vbscript>
sub Este_un_script
alert "Este un script! Poate fi apelat prin
doua butoane"
end sub </script></head><body>
<form name="formMain">
<input type="button"
name="cmdClickUnu"
onClick="Este_un_script"
language="vbscript" value="Unu">
<input type="button"
name="cmdClickDoi"
onClick="Este_un_script"
language="vbscript" value="Doi">
</form></body></html>


n sfrit, se poate opta pentru execuia automat a scriptului, o dat cu ncrcarea
paginii. Astfel, n exerciiul urmtor, la ncrcarea paginii, este compilat automat codul
VBScript, aprnd caseta cu mesajul Buna ziua!, din interiorul creia, prin acionarea
butonului OK se obine un alt mesaj de salut Bine ai venit!.
Ionel SIMION 148


Exerciiul 12.10 Executarea automat a scripturilor.
<html><head>
<title>Executarea automata a
scripturilor</title></head>
<body>
<div align="center">
<script language="vbscript">
alert "Buna ziua!"
document.write "<h3> Bine ai venit!</h3>"
</script>
</div>
</body>
</html>


Prin script-uri scrise n limbaje ca JavaScript sau VBScript, ataate evenimentelor
ce se produc n pagin, pot fi modificate valorile parametrilor unui control ActiveX.
n continuare este prezentat un exemplu prin care controalele ActiveX sunt activate
prin coduri VBScript. Pagina conine trei butoane radio i o caset de afiare. La micarea
mouse-ului deasupra uneia dintre cele trei zone, care au valorile Avantaje, Dezavantaje
i Decizie, n caseta de afiare apare un mesaj specific: Avantajele sunt multe!,
Dezavantajele sunt la fel de multe! i, respectiv, "Totusi, trebuie sa iei o decizie!"

Exerciiul 12.11 Folosirea controalelor ActiveX prin script VBScript.

<HTML><HEAD><TITLE>ActiveX
Controls</TITLE></HEAD>
<BODY>
<H3>VBScript & Control ActiveX -
exemplu</H3>
<DIV align=left>

<SCRIPT language=VBScript>
Sub
lblOutputImage_MouseMove(Button,
Shift, X, Y)
lblOutputImage.Caption = "Lucruri
diferite se ntampla la miscarea mouse-
ului"
end sub
</SCRIPT>

Proiectarea paginilor WEB 149


<SCRIPT language=VBScript>
Sub
lblDezavantaje_MouseMove(Button,
Shift, X, Y)
lblOutputImage.Caption="Dezavantajele
sunt la fel de multe!"
end sub
</SCRIPT>




<SCRIPT language=VBScript>
Sub
lblDezavantaje_MouseMove(Button,
Shift, X, Y)
lblOutputImage.Caption =
"Dezavantajele sunt la fel de multe!"
end sub
</SCRIPT>>



<SCRIPT language=VBScript>
Sub lblSports_MouseMove(Button,
Shift, X, Y)
lblOutputImage.Caption = "Totusi,
trebuie sa iei o decizie!"
end sub
</SCRIPT>



Ionel SIMION 150


<DIV id=Layout1 style="WIDTH: 298pt; HEIGHT: 140pt; LAYOUT: FIXED">
<OBJECT id=lblOutputImage
style="LEFT: 83pt; WIDTH: 287px; TOP: 0pt; HEIGHT: 101px; ZINDEX: 0"
classid=CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0><PARAM
NAME="BackColor" VALUE="16777215"><PARAM NAME="Caption" VALUE="Lucruri
diferite se ntampla la miscarea mouseului - MouseMove Event">
<PARAM NAME="Size" VALUE="7594;2672"><PARAM NAME="BorderStyle"
VALUE="1"><PARAM NAME="FontHeight" VALUE="360"><PARAM
NAME="FontPitchAndFamily" VALUE="2"><PARAM NAME="ParagraphAlign"
VALUE="3">
<param name="ForeColor" value="2147483666">
<param name="VariousPropertyBits" value="8388635">
<param name="PicturePosition" value="458753">
<param name="FontName" value="MS Sans Serif">
<param name="FontEffects" value="1073741824">

</OBJECT>
<p>
<OBJECT id=lblAvantaje
style="LEFT: 0pt; WIDTH: 79px; TOP: 17pt; HEIGHT: 33px; ZINDEX: 1"
classid=CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0>
<PARAM NAME="BackColor" VALUE="65280"><PARAM NAME="Caption"
VALUE="Avantaje">
<PARAM NAME="Size" VALUE="2090;873"><PARAM NAME="BorderStyle"
VALUE="1">
<PARAM NAME="FontHeight" VALUE="300"><PARAM
NAME="FontPitchAndFamily" VALUE="2"><PARAM NAME="ParagraphAlign"
VALUE="3">
<param name="ForeColor" value="2147483666">
<param name="VariousPropertyBits" value="8388635">
<param name="PicturePosition" value="458753">
<param name="BorderColor" value="2147483654">
<param name="FontName" value="MS Sans Serif">
<param name="FontEffects" value="1073741824">
</OBJECT>
&nbsp;
<OBJECT id=lblDezavantaje
style="LEFT: 0pt; WIDTH: 105px; TOP: 58pt; HEIGHT: 33px; ZINDEX: 2"
classid=CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0>
<PARAM NAME="BackColor" VALUE="65280"><PARAM NAME="Caption"
VALUE="Dezavantaje">
<PARAM NAME="Size" VALUE="2778;873"><PARAM NAME="BorderStyle"
VALUE="1">
<PARAM NAME="FontHeight" VALUE="300"><PARAM
NAME="FontPitchAndFamily" VALUE="2"><PARAM NAME="ParagraphAlign"
VALUE="3">
<param name="ForeColor" value="2147483666">
<param name="VariousPropertyBits" value="8388635">
<param name="PicturePosition" value="458753">
<param name="BorderColor" value="2147483654">
Proiectarea paginilor WEB 151

<param name="FontName" value="MS Sans Serif">
<param name="FontEffects" value="1073741824">
</OBJECT>
&nbsp;
<OBJECT id=lblSports
style="LEFT: 0pt; WIDTH: 70px; TOP: 99pt; HEIGHT: 33px; ZINDEX: 3"
classid=CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0><PARAM
NAME="BackColor" VALUE="65280"><PARAM NAME="Caption" VALUE="Decizie">
<PARAM NAME="Size" VALUE="1852;873"><PARAM NAME="BorderStyle"
VALUE="1">
<PARAM NAME="FontHeight" VALUE="300"><PARAM
NAME="FontPitchAndFamily" VALUE="2"><PARAM NAME="ParagraphAlign"
VALUE="3">
<param name="ForeColor" value="2147483666">
<param name="VariousPropertyBits" value="8388635">
<param name="PicturePosition" value="458753">
<param name="BorderColor" value="2147483654">
<param name="FontName" value="MS Sans Serif">
<param name="FontEffects" value="1073741824">
<param name="FontCharSet" value="1">
<param name="FontWeight" value="400">

</OBJECT></DIV></DIV>
</BODY></HTML>





Ionel SIMION 152



Capitolul 13:
DYNAMIC HTML (DHTML)




Dynamic HTML (DHTML) const ntr-un set de tehnologii ce furnizeaz pagini Web
care se i pot schimba coninutul n mod dinamic, determinnd efecte vizuale i sonore
spectaculoase. Prin dynamic este definit abilitatea unui browser de a schimba aspectul
i stilul unei pagini Web dup ce aceasta a fost ncrcat. DHTML poate fi considerat o
combinaie ntre limbajul HTML i JavaScript sau un alt limbaj de programare pe Web.
DHTML este implementat diferit pentru diferite browsere.
Limbajul HTML standard este o combinaie de elemente folosite pentru a stoca
datele n diverse moduri. Dynamic HTML transform aceste elemente n obiecte,
permind astfel modificarea modului n care datele sunt prezentate, prin modificarea
atributelor acestor obiecte sau prin folosirea unor coduri sau scripturi ce execut aciuni cu
acestea.
Asociind JavaScript, se poate folosi limbajul standard HTML pentru a schimba, de
exemplu, culoarea paginii, aceasta ns prin redesenarea ntregii pagini. Cu ajutorul
DHTML ns, se poate obine acelai efect on the fly. n acelai mod se pot obine
modificri dinamice ale unei imagini, care poate fi mutat n pagin i poziionat n
coordonatele X/Y ale paginii ca rspuns, de exemplu, la mutarea mouse-ului.
n concepia DHTML, orice element al paginii Web este tratat ca un element de
formular, pentru care se poate scrie un script, se pot executa aciuni i declana
evenimente. Pagina Web este conceput ca o structur de blocuri definite ntre marcajele
<div> i </div> pentru Internet Explorer, respectiv, <layer> i </layer> pentru Netscape
Navigator.
Blocurile de coninut sunt caracterizate de proprieti de afiare definite printr-o
foaie de stil i descrise de atributele stilului, modificabile n orice moment printr-un script.
Setul de elemente Dynamic HTML este definit de o construcie ierarhic Document
Object Model (DOM). Rdcina unei structuri DOM este documentul nsi. Obiectele
DOM pot fi referite printr-un index (document.forms[2].elements[1]) sau direct prin
numele acestora (document.myForm.myButton).
Obiectele multiple de acelai fel pot fi grupate sub un nume comun i identificate
printr-un index. De exemplu, butoanele radio dintr-un grup denumit myRadioGroup pot fi
apelate prin: document.myForm.myRadioGroup[index].





document

obiectchild

obiectchild

obiectchild
Proiectarea paginilor WEB 153


13.1 Stiluri

Principial, codul care controleaz apariia i aspectul elementelor paginii Web este
stocat ntr-o foaie de stil (style sheet). Se pot folosi mai multe foi de stil pentru o aceeai
pagin Web, de aici denumirea de foi de stil n cascad Cascading Style Sheets (CSS).
n mod obinuit, sunt patru moduri de a folosi stilurile:
Stilul se aplic unui singur element, n cadrul unui marcaj HTML. De exemplu,
pentru a aplica un stil unui element de tip paragraf, se poate scrie:
<p style ="font: 12pt arial">
Aceast modalitate se numete "inline" i este cea mai puin flexibil.
Stilul se aplic mai multor elemente din pagina Web, pentru care sunt definite
dedicat. Aceste elemente pot fi de acelai fel (de exemplu, titlurile de mrime 2),
sau pot fi diferite.
Stilul se aplic pentru toate elementele din pagin, de exemplu:
<style>
BODY {background: #ffffff; color: #000000;
margin-top:.20in; margin-left:.50in; margin-right:.50in}
</style>
Foile de stil sunt definite, n acest caz, la nceputul fiierelor HTML.
Foile de stil sunt stocate ntr-un fiier separat de fiierul HTML i pot fi aplicate
mai multor pagini simultan, de exemplu:
<style src="mycss.css"> </style>
Aceasta este modalitatea cea mai flexibil de a defini stiluri. Stilurile CSS sunt
identificate prin nume care se plaseaz ntre marcajele HTML. Modificarea unui
atribut n foaia de stil determin modificarea instantanee n toate locurile unde se
aplic stilul.
Avantajul folosirii foii de stil este acela c se pot face uor modificri la o apariie a
paginii, fr a mai scrie cod de fiecare dat. Aceast tehnic este foarte eficient n cazul
site-urilor cu multe pagini, de fiecare dat cnd stilul CSS este actualizat, modificrile
reflectndu-se automat n toate documentele.
Observaii:
formatarea HTML manual suprascrie formatarea CSS.
foile de stil externe sunt fiiere text cu extensia .css (CLASS) sau .html
fr a fi obligatoriu (sintaxa CSS este implicit pentru definirea stilurilor) este
bine ca browserul s fie informat asupra sintaxei folosite, printr-o meta-informaie
de tipul: <meta http-equiv = content-style-type content = text/css>.


13.1.1 Stiluri definite in line

Stilurile in-line sunt definite chiar n interiorul marcajului care iniiaz blocului
asupra cruia vor aciona stilurile respective. Se utilizeaz atributul universal style,
valoarea atributului definind practic stilul. Stilul se aplic doar elementului HTML definit de
marcaj.






Ionel SIMION 154


Exerciiul 13.1 Stiluri definite in line.
<html><head>
<title> Stiluri definite in line</title></head>
<body>
<h3>Header de mrime 3, culoare i poziie
implicite</h3>
n continuare se definete un stil.
<h3 style="color: red; text-align: center">
Acest header are culoarea roie i este
centrat</h3>
</body></html>



13.1.2 Stiluri dedicate

Stilurile dedicate se aplic mai multor elemente din pagina Web. Ele sunt definite la
nceputul fiierelor HTML, n blocul <head> ... </head>, folosind marcajele <style> i
</style>. Obiectele style sunt construite cu sintaxa:
<style> selector {descriere} </style>
unde selectorul specific asupra cui se aplic stilul iar descrierea definete stilul i este
plasat ntre acolade. Descrierea este alctuit din expresii de tipul atribut: valoare,
separate prin caracterul punct i virgul.
De exemplu, sintaxa:
<style> h3 {color: blue; text-align: center;} </style>
va determina ca toate titlurile de tip h3 din pagin s fie centrate i de culoare albastr.
Pentru a folosi acelai stil pentru elemente diferite (de exemplu, h2, h1 i p),
se pot grupa selectorii:
<style> h2, h1, p {color: blue; text-align: center;} </style>
Pentru a putea folosi un stil oriunde este necesar, se pot defini clase de stiluri,
dup sintaxa:
<style> all.nume_stil {descriere} </style>
Atributul all situat naintea numelui stilului este opional, indicnd faptul c stilul se aplic
tuturor tipurilor de blocuri de text. Altfel, dac de exemplu se dorete ca o clas de stiluri
s se aplice numai elementelor de tip h2, n loc de all.nume_stil se va scrie
h2.nume_stil.
Pentru utilizarea clasei de stiluri, se folosete atributul class, avnd ca valoare
numele stilului.
De exemplu, se poate defini o clas de stiluri cu numele albastru-centrat:
<style> all. albastru -centrat {color: blue; text-align: center} </style>
care se poate folosi pentru toate elementele de tip: <h3> i <p>:
<h3 class = albastru -centrat> acesta este un titlu h3 scris cu albastru i centrat </h3>
<p class = albastru -centrat> acesta este un paragraf scris cu albastru si centrat </p>
Pentru a identifica stilul se poate folosi i atributul universal id. n acest caz,
deifiniia stilului va fi realizat conform sintaxei:
<style> #nume_stil {descriere} </style>
Astfel, un stil definit prin:
<style> # albastru -centrat {color: blue; text-align: center;} </style>
Proiectarea paginilor WEB 155

va putea fi apelat pentru un anumit paragraf astfel:
<p id= albastru -centrat> acesta este un paragraf scris cu albastru i centrat </p>
Dac se dorete ca un stil identificat prin atributul id s acioneze doar asupra
elementelor de un anumit tip, aceasta se specific n construcia selectorului. Astfel, un stil
definit prin h3#nume_stil va putea aciona doar asupra titlurilor de tip h2.
Se poate impune ca un anumit stil s fie folosit doar ntr-un anumit context. Astfel,
expresia:
<style> p i {color: blue; text-align: cente;r} </style>
are ca efect faptul c toate paragrafele (p) scrise cu caractere nclinate (i) s fie de culoare
albastr i centrate.

Exerciiul 13.2 Stiluri dedicate.
<html><head> <title> Stiluri dedicate </title>
<style>
/*se definete un stil pentru titlurile de tip h3 */
h3 {color: green; text-align: center;}
/*se definete un stil numit "albastru" pentru
titlurile de tip h2 */
h2.albastru {color: blue}
/*se definete un stil numit "mai_mic" care va fi
activat prin dentificatorul id */
#mai_mic {font-size: smaller}
</style></head>
<body>
<h3> Acest titlu de tip h3 are culoarea verde i
este centrat</h3>
<h2 class = albastru> Acest titlu de tip h2 are
culoarea albastr </h2>
<p id= mai_mic> Acest paragraf folosete stilul
"mai_mic" </p>
</body></html>


Observaie. n interiorul unui element style, comentariile sunt plasate ntre grupele
de caractere /* i */ (la fel ca n cazul limbajelor C, C++, Java, JavaScript).


13.1.3 Stiluri definite prin fiiere externe

Foile de stil pot fi stocate ntr-un fiier extern, separat de fiierul HTML i pot fi
aplicate mai multor pagini simultan. Coninutul unui astfel de fiier extern este identic cu
coninutul blocului <style> ... </style>, fr ns a mai folosi cele dou marcaje. Fiierul
extern pentru definirea stilurilor se salveaz cu extensia .css sau .html (de exemplu,
stil_extern.css).
Fiierul HTML va apela stilul definit extern prin includerea n blocul <head> ...
</head> a unei legturi (link), cu urmtoarele atribute:
rel cu valoarea "stylesheet";
href sau src avnd ca valoare adresa URL a fiierului de stiluri extern;
type cu valoarea text/css.
Fiierul extern poate fi apelat i prin sintaxa:
<style> @import url(stil_extern.css); </style>
Ionel SIMION 156

Exerciiul urmtor urmrete definirea unei pagini Web identic cu cea din exerciiul
anterior.
Exemplul 13.3 Stiluri definite prin fiiere externe.
/*acesta este fiierul extern
stil_extern.css pentru definirea
stilului */
/*se definete un stil care pentru
titlurile de tip h3 */
h3 {color: green; text-align:
center}
/*se definete un stil numit
"albastru" pentru titlurile de tip h2
*/
h2.albastru {color: blue}
/*se definete un stil numit
"mai_mic" care va fi activat prin
dentificatorul id */
#mai_mic {font-size: smaller}

<html><head> <title> Stiluri definite prin fiiere
externe </title>
<link rel ="stylesheet" type = "text/css" href
=stil_extern.html>
<!--- in locul marcajului anterior se poate folosi
sintaxa "<style> @import url(stil_extern.css);
</style>" --- !>
</head>
<body>
<h3> Acest titlu de tip h3 are culoarea verde i
este centrat</h3>
<h2 class = albastru> Acest titlu de tip h2 are
culoarea albastr </h2>
<p id= mai_mic> Acest paragraf folosete stilul
"mai_mic" </p>
</body></html>


13.1.4 Funcionarea stilurilor n cascad

Atunci cnd, pentru un element din pagina Web sunt definite mai multe stiluri care
intr n conflict pentru anumite atribute, acestea acioneaz conform urmtoarelor reguli de
prioritate:
1. stilurile definite on-line
2. stilurile definite ntre marcajele <style> </style>; are prioritate stilul definit cel
mai recent;
3. stilurile definite prin fiiere externe; are prioritate stilul definit cel mai recent;
4. stilul predefinit pentru document, dac nu sunt definite stiluri
Observaie. Dac un atribut conine, dup valoare, precizarea ! important, atunci
valoarea acestuia nu poate fi supradefinit, avnd prioritate maxim.


13.1.5 Atribute pentru stiluri

Atributele folosite pentru definirea stilurilor ntr-un fiier DHTML sunt sintetizate n
tabelele urmtoare.

ATRIBUTE PENTRU FONT
ATRIBUTUL VALORI SEMNIFICAIE

font-
size
1 xx-small x-small small medium
mrimea
fontului

(1 inch=72 pt =
2,54 cm = 6 pc)
large x-large xx-large
2 larger smaller
3 numr i unitate de msur
4 procent
Exemplu: p {font-size: 14pt;}
Proiectarea paginilor WEB 157

font-
family
1 serif sans-serif cursive monospace fantasy tipul fontului
2 Times Helvetica Arial Courier Western
Exemplu: p {font-family: "Century Schoolbook" Times serif;}
font-
weight
1 normal bold bolder lighter grosimea
fontului
2 100 200 300 400 500 600 700 800 900
Exemplu: p {font-weight: bolder;}
font-style normal italic oblique stilul fontului
Exemplu: p {font-style: italic;}
font-variant normal small-caps variantele
fontului
Exemplu: p {font-variant: small-caps;}
font style variant weight size / height family fontul

ATRIBUTE PENTRU TEXT
ATRIBUTUL VALORI SEMNIFICAIE

color
nume culoare
culoarea
textului
#rrggbb
rgb(r,g,b)
rgb(r%,g%,b%)
Exemplu: P {color: red}
background-color nume culoare
culoarea de
fond
#rrggbb
rgb(r,g,b)
rgb(r%,g%,b%)
Exemple: P {background-color: red} sau
rgb(255, 255, 0); rgb(50%, 50%, 0%); #FF0000
background-image url(URL_fiier_imagine) imaginea de
fond
background-
attachement
scroll fixed imagine fix
background-repeat repeat repeat-x repeat-y no-repeat repetarea
imaginii

background-position
nrx% nry%
poziia imaginii
de fond
nrx nry
top center bottom
left center right
background color image repeat attachement position fondul
line-height normal factor numr procent distana dintre
rnduri
text-align left center right justify aliniere text
Exemplu: P {text-align:right;}
Ionel SIMION 158

text-indent numr procent indentare text
text-decoration none underline overline decorare text
line-trough blink
Exemplu: P {text-decoration:line-through;}
text-transform

capitalize uppercase transformare
text
lowercase none
Exemplu:P {text-transform:capitalize;}
vertical-align baseline sub super top aliniere
vertical
middle bottom procent
letter-spacing normal numr distana dintre
caractere
word-spacing normal numr distana dintre
cuvinte
white-space normal pre nowrap caracterele
spaiu

ATRIBUTE PENTRU BLOCURILE DE TEXT
ATRIBUTUL VALORI SEMNIFICAIE
margin-left auto numr procent marginea stng
margin-right auto numr procent marginea dreapt
margin-top auto numr procent marginea
superioar
margin-bottom auto numr procent marginea
inferioar
margin sus dreapta jos stnga marginile
Exemple: P {margin:10pt 20pt 30pt 40pt;}
P {margin:40pt;} //all margins 40 points
P {margin-left: 5; margin-right: 10; margin-top: 15; margin-bottom: 20 }
padding-left auto numr procent padding stnga
padding-right auto numr procent padding dreapta
padding-top auto numr procent padding superior
padding-bottom auto numr procent padding inferior
padding sus dreapta jos stnga padding
Exemple: P {padding:10pt 20pt 30pt 40pt;} //top, right, bottom, left
P {padding:40pt;} //all paddings 40 points
P {padding-left: 5; padding-right: 10; padding-top: 15; padding-bottom: 20 }
border-left-width thin medium thick numr i unitate chenar stng
border-right-width thin medium thick numr i unitate chenar dreapta
border-top-width thin medium thick numr i unitate chenar superior
border-bottom-
width
thin medium thick numr i unitate chenar inferior
border-width sus dreapta jos stnga padding
Proiectarea paginilor WEB 159

Exemple: P {border-width:4pt;}
P {border-left-width: 5; border-right-width: 10; border-top-width: 15; border-bottom-width:
20 }
border-style none dotted dashed solid double stilul chenarului
inset outset groove ridge

border-color
nume culoare
culoarea
chenarului
#rrggbb
rgb(r,g,b)
rgb(r%,g%,b%)
width auto numr i unitate procent laime
Exemplu: P {width: 100pt;}
height auto numr i unitate procent nlime
float left right none poziia fa de
text
clear none left right both dispunere text
border-top width style color chenar superior
border-right width style color chenar drept
border-bottom width style color chenar stng
border-left width style color chenar
border width style color

Semnificaia atributelor pentru dimensionarea blocurilor de text poate fi urmrit n
figura urmtoare.



Observaii:
1. se poate controla modul n care un stil poate aciona, dependent de mediul de
vizualizare al paginii, folosind atributul media al obiectului style, cu valorile:
screen pentru monitoare
print pentru imprimante
Ionel SIMION 160

projection pentru proiectoare video
braille pentru terminale destinate nevztorilor
speech pentru terminale audio
all pentru toate mediile
De exemplu, sintaxa <style type=text/css media=print> selector
{descriere} </style> va impune ca stilul definit s acioneze doar la imprimarea paginii.
2. se poate controla stilul de afiare a hiperlegturilor din pagina Web, folosind
selectorii:
a: link pentru legturi nevizitate (nu s-a efectuat nici un click pe ele);
a: active pentru legturi active (deasupra crora se afl mouse-ul la un moment
dat)
a: visited pentru accesate cel puin o dat
Exemplu: <style> a: link {color: blue;} a: active {color: red;} a: visited {color: cyan;}
</style>
3. pentru a particulariza un paragraf, pot fi folosii urmtorii doi selectori
p: first-letter pentru prima liter a paragrafului;
p: first-line pentru prima linie a paragrafului
Exemplu: <style> p: first-line {font-variant: small-caps;} p: first-letter {color: red;
font-size: 200%} </style>

13.2 Layere

DHTML permite controlul detaliat asupra poziiei i comportamentului elementelor
dintr-o pagin Web. Se pot obine astfel efecte speciale bazate pe animaie, tranziii i
filtre, redimensionri automate ale elementelor etc.
Poziionarea const n plasarea unui element n pagin prin atribuirea unor
coordonate plane x, y i a unui elevaii z aceasta permite obinerea unor efecte speciale
de suprapunere. Modificarea poziiilor elementelor se bazeaz pe modul n care utilizatorul
vizualizeaz pagina Web. Pentru obinerea unor efecte de animaie este necesar s se
modifice ncet poziia unor elemente, la intervale regulate de timp.
Tranziiile sunt efecte speciale care constau n modificarea afirii unui element
de exemplu, trecerea de la o imagine la alta. Filtrele sunt efecte care se aplic unor
elemente din pagina Web de exemplu, un text umbrit.
n DHTML pagina Web este conceput ca o structur de blocuri care conin
elemente. Un astfel de bloc se numete layer. Layerele se pot suprapune, se pot ascunde
la vizualizare sau se pot deplasa pe ecran de-a lungul unei axe de timp, pentru a crea
animaie. De asemenea, layerele pot fi imbricate unul n altul. Aceste blocuri sunt definite
ntre marcaje specifice: <div> ... </div>, <span> ... </span>, <layer> ... </layer> i
<ilayer> ... </ilayer>. Marcajele <div> ... </div> i <span> ... </span> sunt cele mai
folosite, fiind recunoscute att n Internet Explorer ct i n Netscape Navigator. Layerele
create cu marcajele <layer> ... </layer> i <ilayer> </ilayer> sunt recunoscute doar de
anumite versiuni ale browserului Netscape Navigator.
Pentru definirea layerelor pot fi folosite dou procedee: sintaxa CSS (Cascade
Style Sheet) i sintaxa LAYER. La fel ca i n cazul stilurilor, blocurile de tip layer pot fi
definite in line sau cu ajutorul foilor de stil.
Uneori, deoarece browserele afieaz n mod diferit layerele, editoarele HTML
permit convertirea acestora n tabele, care pot fi afiate corect. Se poate efectua i
operaia invers, din tabel n layere. Conversia se realizeaz la nivelul ntregii pagini Web
i nu doar pentru un tabel sau un layer. La aceste conversii, o problem este
suprapunerea layerelor, ntruct celulele unui tabel nu se pot suprapune.

Proiectarea paginilor WEB 161

Definirea layerelor se obine cu ajutorul unor atribute specifice, prezentate n tabelul
urmtor.

ATRIBUTE PENTRU LAYERE
ATRIBUTUL VALORI
above, below above below
Semnificaie: ordinea de suprapunere a layerelor: desupra (above) sau
dedesubt (below). Funcioneaz doar n sintaxa LAYER, nu i n
sintaxa CSS.
Exemplu: above=nume_layer - layerul va fi afiat deasupra
background-
color
nume culoare #rrggbb rgb(r,g,b) rgb(r%,g%,b%)
Semnificaie: culoarea de fundal a unui layer
Exemple: background-color:green; sau background-color:FF8F00;
background-
image
url(URL)
Semnificaie: imaginea de fundal a unui layer
Exemplu: background-image:url('images/tilewood.jpg');

clip
rect(top right bottom left)
pentru Internet Explorer
rect(left,top,right,bottom)
pentru Netscape
Semnificaie: decuparea elementului (determin poriunea
dreptunghiular vizibil a unui layer)
Exemple: clip:rect(0px 30px 50px 0px); - poriunea vizibil este un
dreptunghi situat la distanele fa date de marginile layerului

height
numr i
unitate
procente din limea blocului care
include stratul
auto valoare
prestabilit
Semnificaie: nlimea layerului
Exemple:
height:50px; sau height:50%; - nlimea layerului este de 50 pixeli,
respectiv 50% din nlimea blocul n care este inclus
include-source url(URL)
Semnificaie: adresa URL a fiierului extern
Exemplu: include-source: url(pagina1.html);

left
numr i unitate procente din limea blocului
care include stratul
auto valoare
prestabilit
Semnificaie: distana dintre marginea stng a layerului i marginea
stng a blocului n care este inclus (n cazul poziionrii absolute) sau
punctul curent de inserare (n cazul poziionrii relative)
Exemple:
left:15px; sau left:-15px; - distana este de 15, respectiv -15 pixeli
overflow none clip scroll
Semnificaie: permite vizualizarea ntregului coninut al layerului, n
cazul cnd acesta depete dimensiunile impuse prin atributele width
i height
Exemple:
overflow:none; - valoarea prestabilit
overflow:clip; - zona vizibil este strict cea determinat de dimensiunile
width i height
Ionel SIMION 162

overflow:scroll; - cu ajutorul barelor de derulare, poate fi vizualizat
ntreg coninutul layerului
pagex, pagey Semnificaie: distana n pixeli dintre colul din stnga-sus al layerului i
colul din stnga-sus al paginii. Funcioneaz doar n sintaxa LAYER,
nu i n sintaxa CSS.
Exemple: pagex=50 pagey=40 - layerul este poziionate mai la dreapta
cu 40 pixeli i mai jos cu 40 pixeli fa de colul din stnga-sus al
paginii


position
absolute relative static
Semnificaie: poziia layerului
Exemple:
position:absolute; - layerul este poziionat absolut n fereastra
browserului, n raport cu blocul body
position:relative; - layerul este poziionat fa de poziia curent n
blocul n care este inclus
position:static;- layerul este poziionat conform standardelor HTML
src URL
Semnificaie: adresa URL a fiierului extern. Funcioneaz doar n
sintaxa LAYER, nu i n sintaxa CSS.
Exemplu: src =pagina1.html

top
numr i unitate procente din nlimea blocului
care include stratul
auto valoare
prestabilit
Semnificaie: distana dintre marginea superioar a layerului i
marginea superioar a blocului n care este inclus (n cazul poziionrii
absolute) sau punctul curent de inserare (n cazul poziionrii relative)
Exemple: top:10px; sau top:-10px; - distana este de 10, respectiv -
10 pixeli

visibility
visible inherit hidden pentru
Internet Explorer
hide pentru
Netscape
Semnificaie: vizibilitatea layerului
Exemple:
visibility:inherit; - layerul motenete vizibilitatea de la blocul n care
este inclus
visibility:visible; - layerul este vizibil
visibility:hidden; sau visibility:hide; - layerul este vizibil

width
numr i unitate procente din limea blocului
care include stratul
auto valoare
prestabilit
Semnificaie: limea layerului
Exemple: width:50px; sau width:50%; - limea layerului este de 50
pixeli, respectiv 50% din limea blocul n care este inclus

z-index
numr ordinea de afiare
Semnificaie: ordinea de suprapunere a layerelor; acestea pot fi afiate
n funcie de un numr z-index (cel care are z-index mai mare, va fi
deasupra, deci vizibil) sau, dac acest z-index lipsete, n ordinea
inserrii n pagin
Exemplu: z-index:1; - layerul va fi afiat sub celelelte care au
coordonata z-index mai mare ca 1

Proiectarea paginilor WEB 163


13.2.1 Layere definite prin sintaxa CSS

Folosirea layerelor n sintaxa CSS se bazeaz pe ideea c orice element din pagina
Web suport un obiect stil care este, n esen, un obiect dinamic folosit pentru a
manipula aspectul i modul de aciune al elementului. Acest obiect este definit de
marcajele <div> </div> i <span> </span>. Acestor obiecte li se atribuie un atribut
identificator, id prin care pot fi accesate.
Apelarea obiectului stil se face conform sintaxei:
<div id = nume_stil></div> sau
<span id = nume_stil></span>.
De asemenea, obiectele stil pot fi accesate prin scripturi care stabilesc
comportamentul elementului. De exemplu, scriptul urmtor determin ca un text s-i
modifice culoarea (on demand) atunci cnd mouse-ul se deplaseaz deasupra lui (mouse
move over ):
<span id=text
onMouseover = text.style.color=red
onMouseout = text.style.color=green > Mut mouse-ul aici </span>

13.2.2 Layere definite in line

n acest caz, proprietile layerului sunt configurate prin atributul style al blocului ce
conine layerul. Acest bloc poate fi de tipul <div> </div> sau <span> </span>.
Sintaxa este:
<div style ="atributele_stilului">coninutul layerului</div> sau
<span style ="atributele_stilului">coninutul layerului</span>

Exerciiul 13.4 Layere definite in line.
<html><head><title> Layere definite "in
line" </title></head> <body>
<div style ="position: absolute; top:
10pt; left: 30px; width: 70mm; z-
index:2;">
<h4>Titlu </h4>
<p>Primul layer are limea de 70mm si
este pozitionat la 10 puncte tipografice
fa de marginea de sus i la 30 de
pixeli de marginea din stnga. <br>
Layerul conine un titlu, un paragraf si un
element de formular<br>
Al doilea layer contine o imagine de fond
i este pozitionat deplasat fa de primul
i sub acesta<br>
<form><input type=text></form>
</div>
<div style ="position: relative; top: -
1pt; left: -20px; width: 80mm; z-
index:1;">
<img src="backgr.gif"></div>
</body></html>

Ionel SIMION 164


Exerciiul prezentat conine o pagin Web pentru care au fost definite dou layere
in line. Primul layer conine un titlu, un paragraf i un formular. Acest layer are limea
de 70 mm si este poziionat la 10 puncte tipografice fa de marginea de sus i la 30 de
pixeli de marginea din stnga a paginii. Al doilea layer conine o imagine de fond
(backgr.gif, aflat n directorul curent) i este poziionat fa de primului layer, mai la
stnga cu 2 pixeli i mai sus cu 2 puncte tipografice. Prin folosirea atributului z-index, al
doilea layer este plasat sub primul (valoarea atributului z-index reprezint coordonata pe
axa OZ a stratului, fiind vizibil layerul care are aceast coordonat mai mare).

13.2.3 Layere definite prin foi de stil

Proprietile layerului pot fi definite n fiiere externe .css sau la nceputul fiierelor
HTML, n cadrul blocului <style> </style>, cu sintaxa:
<style> #nume_stil {descriere} </style>
Definirea coninutului layerului are loc n seciunea <body> ... </body>, ntr-un bloc
de forma:
<div id = nume_stil> coninut_layer </div> sau
<span id = nume_stil> coninut_layer </span>
De asemenea, se pot folosi layere definite cu ajutorul claselor de stiluri. Definirea
proprietilor layerului are loc la nceputul fiierelor HTML, n cadrul blocului <style>
</style>, cu sintaxa:
<style> all.nume_clasa_stil {descriere} </style> sau
<style>.nume_clasa_stil {descriere} </style> sau
<style>div.nume_clasa_stil {descriere} </style> sau
<style>span.nume_clasa_stil {descriere} </style>
n acest caz, definirea coninutului layerului are loc ntr-un bloc de forma:
<div class = nume_clasa_stil> coninut_layer </div> sau
<span class = nume_clasa_stil > coninut_layer </span>

Exerciiul 13.5 Layere definite definite prin stiluri dedicate.
<html><head>
<title> Layere definite " prin stiluri
dedicate </title>
<style>
#strat1 {position:absolute;
top:20px; left:5px;font-size:50pt;
color:red; z-index:2;}
#strat2 {position:relative; top:-
8px; left:8px; font-size:50pt; color:
#aaaaaa; z-index:1;}
</style>
</head>
<body>
<div
id=strat1>GRAFICA<br>ASISTATA
</div>
<div
id=strat2>GRAFICA<br>ASISTATA
</div>
</body></html>

Proiectarea paginilor WEB 165



Exerciiul 13.6 Controlul afirii coninutului unui layer
<html><head><title>Controlul afisarii
continutului unui layer</title>
<style>#poza_intreaga {position:absolute;
top:5px; left:5px; width:142px; height:210px;
visibility:visible;> </style>
<style> #poza-partial {position:absolute;
left:125px; top:-75px; visibility:visible;
clip:rect(80,130,180,45);> </style>
<style> #poza-overflow {position: absolute;
left:170px; top:120px; visibility: visible;
width:90px; height:100px; overflow: scroll;>
</style>
</head><body>
<div id=poza_intreaga> <img
src="poza.jpg"></div>
<div id=poza-partial> <img src="poza.jpg">
</div>
<div id=poza-overflow> <img src="poza.jpg">
</div>
</body></html> </html>


n primul exemplu, prin poziionarea
tridimensional a celor dou layere, se
obine un efect special pentru textul afiat.
n cel de-al doilea exemplu, folosind
posibilitile de poziionare i vizualizare a
layerelor, o aceeai imagine este
prezentat pe trei layere, n mod diferit.
Astfel, pe primul layer imaginea este
afiat n ntregime. Pe cel de-al doilea
layer este vizibil doar o poriune a
imaginii, definit prin atributul clip i
poziionat convenabil. Pe al treilea layer,
dei nu este vizibil ntreaga imagine, se
poate vizualiza ntregul coninut al
layerului, folosind bara de defilare.


13.2.4 Layere definite prin sintaxa LAYER

Sintaxa LAYER este specific pentru browserul Netscape Navigator. n acest caz,
layerele sunt definite prin marcajele <layer> ... </layer> sau <ilayer > ... </ilayer>.
Marcajele <ilayer> ... </ilayer> se folosesc pentru definirea layerelor in line.
Sintaxa de baz pentru definirea unui layer poate fi:

<layer > id=nume_layer left=valoare in_pixeli top=valoare_n_pixeli
width=limea_n_pixeli height=nlimea_n_pixeli clip= n,n,n,n
top
height
zona
vizibil
width
left
right
bottom
originea
Ionel SIMION 166

visibility=vizibilitate_layer bgcolor=culoare background=url-imagine src=url-fiier
z-index=numr above=nume_layer below=nume_layer TEXT</layer>
Exemplu: <layer > id=layerul_1 left=40 top=20 width=200 height=400
bgcolor=red <p>TEXT_PARAGRAF</p> </layer>
De asemenea, sintaxa poate conine i coduri script:

<layer > ... OnMouseOver=cod JavaScript OnMouseOut=cod JavaScript
OnFocus=cod JavaScript OnBlur=cod JavaScript OnLoad=cod JavaScript</layer>

Pentru browserele care nu recunosc sintaxa LAYER se pot folosi marcajele
<nolayer> i </nolayer>, prin care se precizeaz exact ce va fi afiat:

<layer src=Continut_layer.html></layer>
<nolayer>
Acest text va fi afiat de browserele care nu recunosc sintaxa LAYER
</nolayer>

13.3 Filtre

Filtrele permit adugarea unor efecte speciale imaginilor sau textelor. Ele sunt
aplicate printr-o proprietate denumit filter care va primi ca valoare numele funciei grafice
de filtrare ce va fi apelat astfel:
<element style="filter: nume_filtru(argumente)">
Filtrele pot fi aplicate dinamic, cu ajutorul unor scripturi.
Exemple de filtre DHTML aplicabile unei imagini sunt:

FILTRUL ARGUMENTE SEMNIFICAIE EXEMPLE
alpha opacity
finishopacity
style
startx
starty
finishx
finishy
Opacizarea imaginii filter:alpha(opacity=20,
finishopacity=100, style=1,
startx=0,
starty=0, finishx=140,
finishy=270)
blur add
direction
strength
nceoarea parial a
imaginii
filter:blur(add=true,
direction=90, strength=6);
chroma color Culoarea specificat
devine transparent
filter:chroma(color=#ff0000)
fliph none Oglindirea imaginii pe
orizontal
filter:fliph;
flipv none Oglindirea imaginii pe
vertical
filter:flipv;
glow color
strength
Strlucirea elementului
Makes the element
glow
filter:glow(color=#ff0000,
strength=5);
gray none Imaginea n tonuri de filter:gray;
Proiectarea paginilor WEB 167

gri
invert none Negativul imaginii filter:invert;
mask color Masca de rendare a
imaginii
filter:mask(color=#ff0000);
shadow color
direction
Umbrirea imaginii

filter:shadow(color=#ff0000,
direction=90);
dropshadow color
offx
offy
positive
Stropirea imaginii

filter:dropshadow(color=#ff0000,
offx=5, offy=5, positive=true);
wave add
freq
lightstrength
phase
strength
Ondularea imaginii

filter:wave(add=true, freq=1,
lightstrength=3, phase=0,
strength=5)
xray none Imaginea n alb i
negru
filter:xray;


Exerciiul 13.7 Filtre
<html><head><title> Filtre
</title></head> <body>
<div
style="position:absolute;
top:5px; left:5px;">
<img src="poza1.jpg">
</div>
<div
style="position:absolute;
top:5px;left:210px;">
<img src="poza1.jpg"
style="filter:alpha(opacity=3
0);"> </div>
<div
style="position:absolute;
top:5px;left:415px;">
<img src="poza1.jpg"
style="filter:invert"> </div>
<div
style="position:absolute; top:220px;left:5px;">
<img src="poza1.jpg" style="filter:fliph"> </div>
<div style="position:absolute; top:220px;left:210px;">
<img src="poza1.jpg" style="filter:xray;"></div>
<div style="position:absolute; top:220px;left:415px;">
<img src="poza1.jpg" style="filter:blur(add=true, direction=90, strength=6);"> </div>
</body></html>

Imaginea din exerciiul prezentat a fost transformat prin aplicarea succesiv a
filtrelor: alpha, invert, fliph, xray i blur.
Ionel SIMION 168

Este posibil aplicarea mai multor filtre simultan unei imagini, prin suntaxa:
<element style="filter: nume_filtru1(argumente) nume_filtru2(argumente) ">.

13.4 Folosirea scripturilor n Dynamic HTML

Proprietile obiecteleor DHTML pot modificate cu ajutorul limbajelor script,
obinndu-se efecte deosebite.
n continuare este prezentat un exemplu n care sunt combinate elementele DHTML
prin folosirea limbajului JavaScript. Scriptul permite derularea unui mesaj care poate
cuprinde text i imagini. Viteza, mrimea i stilul se pot modifica. La deplasarea mouse-
ului deasupra ferestrei de afiare, viteza de derulare este nul (mesajul se oprete din
derulare).

Exerciiul 13.8 Controlul afirii coninutului unui layer
<html>
<title>MESAJ IN DERULARE
</title>
<head>
<script language="JavaScript">
//la deplasarea mouse-ului
deasupra ferestrei de afisare,
viteza de derulare este 0

<!-- Begin
//slider's width
var swidth=355
//slider's height
var sheight=235
//slider's speed
var sspeed=4
var singletext=new Array()
singletext[0]='<div align="center">



<b>MESAJ IN DERULARE</b><br>Viteza, marimea si stilul <b>se pot
modifica.</b><br>Mesajul poate folosi <b><u>Hyperlinks</u></b><br>Poate fi folosit
pentru texte sau imagini de reclama<font color="#FFFF00"><p><img src="1.gif"
width="200" height="100" border="0"></FONT></div>'
if (singletext.length>1)
i=1
else
i=0
function start(){
if (document.all){
ieslider1.style.top=sheight
iemarquee(ieslider1)
}
else if (document.layers){
document.ns4slider.document.ns4slider1.top=sheight
document.ns4slider.document.ns4slider1.visibility='show'
Sensul de derulare a mesajului
Proiectarea paginilor WEB 169

ns4marquee(document.ns4slider.document.ns4slider1)
}
else if (document.getElementById&&!document.all){
document.getElementById('ns6slider1').style.top=sheight
ns6marquee(document.getElementById('ns6slider1'))
}
}
function iemarquee(whichdiv){
iediv=eval(whichdiv)
if (iediv.style.pixelTop>0&&iediv.style.pixelTop<=sspeed){
iediv.style.pixelTop=0
setTimeout("iemarquee(iediv)",100)
}
if (iediv.style.pixelTop>=sheight*-1){
iediv.style.pixelTop-=sspeed
setTimeout("iemarquee(iediv)",100)
}
else{
iediv.style.pixelTop=sheight
iediv.innerHTML=singletext[i]
if (i==singletext.length-1)
i=0
else
i++
}
}
function ns4marquee(whichlayer){
ns4layer=eval(whichlayer)
if (ns4layer.top>0&&ns4layer.top<=sspeed){
ns4layer.top=0
setTimeout("ns4marquee(ns4layer)",100)
}
if (ns4layer.top>=sheight*-1){
ns4layer.top-=sspeed
setTimeout("ns4marquee(ns4layer)",100)
}
else{
ns4layer.top=sheight
ns4layer.document.write(singletext[i])
ns4layer.document.close()
if (i==singletext.length-1)
i=0
else
i++
}
}
function ns6marquee(whichdiv){
ns6div=eval(whichdiv)
if (parseInt(ns6div.style.top)>0&&parseInt(ns6div.style.top)<=sspeed){
ns6div.style.top=0
setTimeout("ns6marquee(ns6div)",100)
Ionel SIMION 170

}
if (parseInt(ns6div.style.top)>=sheight*-1){
ns6div.style.top=parseInt(ns6div.style.top)-sspeed
setTimeout("ns6marquee(ns6div)",100)
}
else{
ns6div.style.top=sheight
ns6div.innerHTML=singletext[i]
if (i==singletext.length-1)
i=0
else
i++
}
}
// End -->
</script>
</head>

<body onLoad="start()">
<div align="center">
<span style="borderWidth:1; borderColor:red; width:350; height:72; background:yellow">
<ilayer id="ns4slider" width="&{swidth};" height="&{sheight};">
<layer id="ns4slider1" height="&{sheight};" onmouseover="sspeed=0;"
onmouseout="sspeed=2">
<script language="JavaScript">
if (document.layers)
document.write(singletext[0])
</script>
</layer></ilayer>
<script language="JavaScript">
if (document.all){
document.writeln('<div
style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0
'+swidth+' '+sheight+' 0);border:1 solid red;" onmouseover="sspeed=0;"
onmouseout="sspeed=4">')
document.writeln('<div id="ieslider1" style="position:relative;width:'+swidth+';">')
document.write(singletext[0])
document.writeln('</div></div>')
}
if(document.getElementById&&!document.all){
document.writeln('<div
style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0
'+swidth+' '+sheight+' 0);border:1px solid red;" onmouseover="sspeed=0;"
onmouseout="sspeed=4">')
document.writeln('<div id="ns6slider1" style="position:relative;width:'+swidth+';">')
document.write(singletext[0])
document.writeln('</div></div>')
}
</script></span>
</div>
</body> </html>
Proiectarea paginilor WEB 171

Aa cum s-a vzut i n exerciiul precedent, un obiect poate s aib un anumit
comportament la declanarea unui anumit eveniment: deplasarea mouse-ului, ncrcarea
unei pagini, transmiterea unui formular etc.
Acest lucru se obine cu ajutorul unor declanatoare numite event handlers,
prezentate n continuare.

EVENT HANDLERS EVENIMENT
onabort Utilizatorul renun la ncrcarea paginii
onblur Utilizatorul prsete un obiect
onchange Utilizatorul schimb valoarea unui obiect
onclick Utilizatorul efectueaz un click cu mouse-ul asupra unui obiect
ondblclick Utilizatorul efectueaz dublu click cu mouse-ul asupra unui obiect
onfocus Utilizatorul activeaz un obiect
onkeydown Utilizatorul acioneaz o tast
onkeypress Utilizatorul menine apsat o tast
onkeyup Utilizatorul elibereaz o tast
onload Finalizarea ncrcrii unei pagini
onmousedown Utilizatorul apas un buton al mouse-ului
onmousemove Cursorul este deplasat pe un obiect
onmouseover Cursorul este plasat deasupra unui obiect
onmouseout Cursorul este deplasat n afara unui obiect
onmouseup Utilizatorul elibereaz un buton al mouse-ului
onreset Utilizatorul reseteaz valorile introduse ntr-un formular
onselect Utilizatorul selecteaz elemente din pagin
onsubmit Utilizatorul transmite un formular
onunload Utilizatorul nchide o pagin

Ionel SIMION 172




PARTEA a V-a

APLICAII
PROGRAME DE EDITARE WEB
Proiectarea paginilor WEB 173



Capitolul 14:
EDITOARE WEB





Editoarele Web sunt programe specializate pentru crearea i modificarea
documentelor HTML sau XHTML. Acestea ofer faciliti destinate simplificrii procesului
de proiectare i testare a paginilor Web. De asemenea, unele dintre aceste programe
ofer posibilitatea interconectrii paginilor Web pentru a realiza un sit Web.
n general, aceste programe permit construcia paginii n mod interactiv, pe
principiul WYSIWYG (what you see is what you get), scriind automat codul HTML.
n continuare sunt prezentate cteva exemple pentru obinerea unor efecte
deosebite cu ajutorul unor programe de editare Web.


14.1 Folosirea stilurilor cu Microsoft FrontPage

Pentru cei care au o oarecare experien n proiectarea paginilor Web, CSS
(Cascading Style Sheets) constituie o facilitate util, care conduce la creterea
productivitii i eficientizarea controlului asupra aspectului unei pagini. Pentru cei mai
puin experimentai, folosirea stilurilor este uneori descurajant.
Editorul Microsoft FrontPage permite definirea stilurilor cu ajutorul unor elemente
de meniu, intuitive i uor de folosit.

Exerciiul 14.1. Definirea stilurilor in line .
n modul de afiare Design, se selecteaz paragraful dorit.
Se activeaz, din meniul Format, opiunea Paragraph.
n fereastra de dialog
Paragraph se aleg
atributele stilului: aliniere,
indentare, spaiere.
Trecnd n modul de
afiare Code, poate fi
vizualizat codul HTML creat
automat.
Previzualizarea paginii n
browser poate fi obinut
prin modul de afiare
Preview.
Modul Split permite
vizualizarea simultan a
modururilor Design i Code.


Ionel SIMION 174

<html>
<head>
<meta http-equiv="Content-Language"
content="en-us">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<p style="word-spacing: 1px; text-indent: 3px;
line-height: 150%; margin-left: 8px; margin-
right: 2px; margin-top: 1px; margin-bottom: 1px"
align="left">
Acesta este un paragraf formatat cu ajutorul
unui stil definit &quot;in line&quot;.</p>
</body>
</html>



Exerciiul 14.2. Definirea stilurilor dedicate.
Se trece n modul de afiare Design.
Se activeaz, din meniul Format, opiunea Style.
n fereastra de dialog Style se selecteaz elementul HTML cruia i se va asocia
noul stil (de exemplu: titlurile h3, body etc.).
Se acioneaz butonul Modify.
n fereastra de dialog Modify Style se aleg caracteristicile stilului, prin acionarea
butonului Format. Apoi se acioneaz butonul OK.
Se acioneaz butonul OK al ferestrei Style.



Proiectarea paginilor WEB 175



<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<title>Stilurile dedicate se aplic&#259;
mai</title>
<style>
<!--
body { color: #FF0000 }
h3 { color: #000080; text-decoration: underline;
float: left }
-->
</style>
<body>
<h3>TITLU h3</h3>Stilurile dedicate se
aplic&#259; mai multor elemente din pagina
Web. Ele sunt definite la nceputul
fi&#351;ierelor HTML, n blocul
&lt;head&gt;<head>...</head>&lt;/head&gt;<he
ad> </head>, folosind marcajele
&lt;style&gt;<head>...</head>&lt;/style&gt;<hea
d></head>
</style>.
</body>
</html>


Exerciiul 14.3. Folosirea stilurilor externe.
Se trece n modul de afiare Design.
Se activeaz, din meniul Format, opiunea Style Sheet Links.
n fereastra de dialog Link Style Sheet se acioneaz butonul Add.
n fereastra de dialog Select File se navigheaz pentru alegerea fiierului .css
care conine stilul extern, apoi se acioneaz butonul OK.
Se acioneaz butonul OK al ferestrei Link Style Sheet.
Ionel SIMION 176





Exerciiul 14.4. Crearea unui stil extern.
Din meniul File, se alege opiunea New.
Din panoul New, seciunea New page, se alege More page templates.
Din fereastra Page Templates, seciunea Style Sheets, se alege un ablon pe
baza creia va fi creat noul stil.
Microsoft FrontPage va crea o un fiier cu extensia .css, pe baza ablonului ales
i care poate fi modificat.
Se activeaz, din meniul Format, opiunea Style.
n fereastra de dialog Style se selecteaz elementul HTML ale crui proprieti
vor fi modificate.
n mod implicit, sunt listate elementele HTML standard. Opional, pentru a
modifica un stil definit de utilizator, n caseta List se alege User-defined styles.
Se acioneaz butonul Modify.
n fereastra de dialog Modify Style se aleg atributele stilului, prin acionarea
butonului Format. Apoi se acioneaz butonul OK.
Se acioneaz butonul OK al ferestrei Style.
Se salveaz fiierul stil .css creat, pentru a putea fi asociat unei pagini Web.






Proiectarea paginilor WEB 177


14.2 Inserarea unor elemente dinamice cu Microsoft FrontPage

Microsoft FrontPage permite inserarea unor elemente de tip: animaie, control
ActiveX, applet Java, buton interactiv etc.

Exerciiul 14.5. Definirea unui efect de
animaie.
Se trece n modul de afiare Design.
Se acceseaz meniul View, opiunea
Toolbars, pentru a afia bara de
comenzi DHTML Effects.
Se insereaz n pagin o imagine
de exemplu, imaginea ro.gif aflat n
directorul curent.
Se selecteaz elementul din pagin
asupra cruia se va aplica efectul de
exemplu, imaginea ro.gif, ca n figura
alturat.
Din bara de comenzi DHTML
Effects, n lista derulant On, se alege
evenimentul care va declana animaia de exemplu, Page load.
Din lista derulant Apply, se alege efectul de animaie dorit de exemplu,
Spiral.
Trecnd pe modul de afiare Preview, poate fi vizualizat efectul introdus la
ncrcarea paginii, imaginea aleas este introdus pe o traiectorie spiral.
Codul HTML a fost generat automat i arat ca mai jos:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation"
src="file:///C:/Program%20Files/Microsoft%20Office/OFFICE11/fpclass/animate.js">
</script>
</head>
<body onload="dynAnimation()" language="Javascript1.2">
<p dynamicanimation="fpAnimspiralFP1" id="fpAnimspiralFP1" style="position: relative
!important; visibility: hidden" language="Javascript1.2">
<img border="0" src="ro.gif" width="68" height="50"></p>
</body>
</html>
Ionel SIMION 178

Exerciiul 14.6. Introducerea unui control ActiveX.
Se trece n modul de afiare Design.
Se activeaz, din meniul Insert, opiunea Web Component.



n fereastra de dialog Insert Web
Component se selecteaz tipul elementului ce
va fi introdus n acest caz, Advanced
Controls i se alege ActiveX Control.
Se acioneaz butonul Next.
n noua fereastra de dialog Insert Web
Component se selecteaz controlul dorit.
Se acioneaz butonul Finish.
Trecnd n modul de afiare Code, poate fi
vizualizat codul HTML creat automat.

Opional, se pot modifica proprietile controlului, astfel:
n modul de afiare Design, se acioneaz butonul drept al mouse-ului asupra
controlului.
Din meniul afiat, se alege opiunea ActiveX Control Properties.
n fereastra ActiveX Control Properties se opereaz modificrile dorite.


14.3 Construcia unor butoane interactive cu Macromedia
Fireworks MX 2004

Editorul Web Macromedia Fireworks poate crea, edita i anima grafica n paginile
Web. n exerciiul urmtor va fi construit a pagin Web cu ajutorul programului
Macromedia Fireworks MX 2004. Pagina poate fi folosit de o organizaie care are, de
exemplu, dou domenii de activitate, pe care le vom numi Didactic i Cercetare.
Proiectarea paginilor WEB 179

Utilizatorul va putea naviga, pornind de la pagina principal, pe cele dou direcii distincte.
Pentru a uura alegerea uneia dintre cele dou variante, nainte de a opta, utilizatorul va
putea previzualiza anumite elemente informative.
n pagin vor fi definite dou butoane interactive. La deplasarea mouse-ului asupra
unuia dintre cele dou butoane, va fi afiat o anumit imagine specific, permind
previzualizarea celor dou opiuni. Atunci cnd utilizatorul alege una dintre cele dou
variante, va efectua un click asupra butonului ales, pentru a activa hiperlegtura specific.

Exerciiul 14.7. Pagina construit cu Macromedia Fireworks.

A. Pregtirea spaiului de lucru.
Din meniul File se alege opiunea New.
n fereastra New
Document se stabilesc:
dimensiunile, rezoluia,
culoarea, transparena.
Din meniul View, se
selecteaz opiunea Rulers.
Din meniul View,
submeniul Guides, se
selecteaz opiunea Show
Guides.
Se creaz reeaua de
ghidare care va uura
schiarea i poziionarea
obiectelor n cadrul paginii.
Pentru aceasta, se
puncteaz cu mouse-ul
deasupra riglelor i se trage
linia de ghidare, pn n
locaia dorit, dup care se elibereaz butonul mouse-ului.
Ionel SIMION 180

Opional, pentru a muta o linie de ghidare, se acioneaz dublu click pe aceasta,
indicndu-se noua poziie n caseta de dialog Move Guide.




Opional, pentru a schimba culoarea liniilor de ghidare, se alege, din
meniul View, submeniul Guides, opiunea Edit Guides.
Opional, se poate afia o reea complet Grid, din meniul View,
submeniul Grid, opiunea Show Grid.
Din meniul View, submeniul Guides, se selecteaz opiunea Snap to
Guides, pentru a impune saltul automat pe liniile de ghidare.
Se salveaz fiierul sub numele pagina_de_start. Extensia fierului va
fi .png, proprie programului Macromedia Fireworks.


B. Construcia butoanelor
Dac meniul grafic Tools nu este vizibil, din meniul Windows se activeaz
fereastra meniului respectiv.
n meniul grafic Tools se selecteaz comanda Rectangles.
Se deseneaz un dreptunghi, folosind reeaua de ghidare trasat mai nainte.
n continuare se poate modifica aspectul grafic al dreptunghiului trasat. Se
selectez dreptunghiul.
Din meniul Windows se activeaz fereastra Properties. Fereastra este
poziionat, n mod implicit, n partea inferioar a ecranului i conine, la rndul ei,
mai multe panouri.
Din primul panou se pot ajusta dimensiunile obiectului (dreptunghiului) selectat.
Din panoul urmtor se pot stabili opiunile de umplere cu culoare a obiectului. Din
lista Fill category se opteaz pentru o umplere gradual opiunea Gradient i se
reine subopiunea Ellipse pentru schema de umplere.
Reea de
ghidare
Rigl
Rigl
Rectangles
Proiectarea paginilor WEB 181




Acionnd asupra casetei alturate, se pot
modifica proprietile de umplere cu culoare: culorile
de baz, transparena, tranziia culorilor. Aceasta se
obine prin tragerea cursoarelor specifice. Pentru a
edita culorile de baz ale schemei de umplere se
acioneaz cu mouse-ul asupra acelorai cursoare.
Din acelai panou, se opteaz pentru o textur
de tip fiber.
Din panoul urmtor al ferestrei Properties se
stabilesc proprietile unei borduri care mrginete
dreptunghiul. Se aleg: culoarea i mrimea bordurii,
textura, rotunjirea colurilor.
Urmtorul panou al ferestrei Properties permite
aplicarea unor efecte speciale pentru obiectul selectat.
Pentru a introduce o faet reliefat la marginea
butonului, se alege opiunea Bevel and Emboss, cu
varianta Outer Bevel.
Se convertete imaginea creat n buton. Se
selecteaz dreptunghiul. Din meniul Modify, opiunea Symbol, se alege opiunea
Convert to Symbol. Din fereastra Symbol Properties se alege numele butonului
Buton_1 i tipul acestuia, prin selectarea opiunii Button din lista Type. Aspectul
acestuia se schimb, asociindu-se un obiect slice legat de buton. Aceasta este
suprafaa activ (active area) a butonului.



Dreptunghiul dup aplicarea operaiei Fill


Dreptunghiul dup aplicarea unei borduri


Dreptunghiul dup aplicarea operaiei Effect


Butonul dup transformarea n symbol, prin
opiunea Convert to Symbol


Cursor
Cursor
Ionel SIMION 182




Al doilea buton se obine folosind ca ablon
butonul deja creat. Din meniul Window se
afieaz fereastra Library, care va prezenta
obiectul deja creat Buton_1.
Se selecteaz butonul afiat n fereastra
Library i se trage n cadrul paginii. n poziia
dorit.
Din meniul Modify, opiunea Symbol, se
selecteaz opiunea Convert to Symbol. Din
fereastra Symbol Properties se alege numele
butonului Buton_2 i tipul acestuia, prin
selectarea opiunii Button din lista Type. n acest moment, fereastra Library va
conine ambele butoane.

C. Adugarea textului n interiorul butoanelor
Se selecteaz primul buton (dublu click). Apare fereastra editorului.
n meniul grafic Tools se selecteaz comanda Text. Se indic un punct din
interiorul butonului, pentru a poziiona textul. Se tasteaz textul DIDACTIC.
Din fereastra Properties se aleg caracteristicile acestuia fontul, mrimea,
culoarea etc.


Primul
buton
Al doilea
buton
Proiectarea paginilor WEB 183


Se aliniaz textul n raport cu butonul. Pentru aceasta, se selecteaz butonul i,
acionnd tasta <Shift>, se selecteaz, de asemenea textul.
Din meniul Modify, se alege opiunea Align, cu varianta Center Vertical i apoi
Center Horizontal.
Se acioneaz butonul Done al ferestrei de editare.




Butonul cu text nainte de aliniere.


Butonul cu text dup aliniere.

Se procedeaz similar cu cel de-al doilea buton, adugnd textul CERCETARE.

D. Crearea efectului de rollover
Proprietile definite pentru butoanele create definesc aspectul implicit al acestora,
pentru situaia n care utilizatorul nu a acionat n nici un fel asupra lor. n continuare, va fi
definit un efect prin care, la apariia unui eveniment de exemplu, la deplasarea mouse-
ului deasupra butonului aspectul butoanelor s se modifice.

Se selecteaz primul buton (dublu click).
Apare fereastra editorului, fiind afiat panoul implicit Up.
Din meniul superior al ferestrei, se trece pe panoul Over.
Se acioneaz butonul Copy Up Graphic, situat n colul din dreapta jos al
ferestrei. Aceasta permite crearea unui nou buton, pe structura iniial.
Se selecteaz noul buton.



Pentru modificarea noului aspect al butonului, se folote din nou fereastra
Properties.
Se acioneaz butonul Done al ferestrei de editare.
Opional, trecnd n modul de previzualizare, se poate urmri efectul obinut - la
deplasarea mouse-ului asupra butonului, acesta i modific aspectul.
Se pssete modul Preview, revenind n modul de afiare Original.





Ionel SIMION 184





F. Asocierea unor hiperlegturi pentru btoane
Pentru ca cele dou butoane s fie operaionale, determinnd navigarea ctre
diferite locaii, acestea trebuie s fie asociate cu hiperlegturi.
Se selecteaz primul buton.
Din fereastra Properties se definesc proprietile hiperlegturii: locaia, textul
alternativ, fereastra n care va fi afiat .



Se procedeaz similar cu cel de-al doilea buton.

G. Introducerea imaginilor
n continuare, vor fi inserate n pagin i poziionate trei imagini: img.gif, img1.gif,
img2.gif, care vor fi afiate pentru trei situaii distincte: atunci cnd mouse-ul este
poziionat n exteriorul celor dou butoane, respectiv atunci cnd mouse-ul se afl
poziionat asupra unuia sau altuia dintre cele dou butoane.
Cele trei imagini, prezentate mai jos, vor fi poziionate n trei cadre (frames)
distincte.

Proiectarea paginilor WEB 185



Img.gif

Imaginea va fi afiat atunci cnd
mouse-ul este poziionat n exteriorul
celor dou butoane


Img1.gif

Imaginea va fi afiat atunci cnd
mouse-ul se afl poiionat deasupra
butonului Buton_1 DIDACTIC


Img2.gif

Imaginea va fi afiat atunci cnd
mouse-ul se afl poiionat deasupra
butonului Buton_2 CERCETARE


Din meniul Window se activeaz fereastra
Frames.
n cadrul ferestrei, sunt afiate deja un numr
de frame-uri. Primele dou, Frame 1 i Frame 2
sunt ocupate de cele dou instane ale butoanelor,
pentru situaia cnd mouse-ul este poziionat
deasupra butoanelor, respectiv n afara acestora.
Se selecteaz Frame 1
Din meniul File se alege opiunea Import.
n fereastra Import se alege imaginea Img.gif, apoi se acioneaz butonul
Open.
Se poziioneaz imaginea n locaia dorit. Eventual, se ajusteaz dimensiunile
acesteia.
Acionnd butonul New/Duplicare Frame, situat n partea inferioar a ferestrei
Frames, se creaz un nou frame Frame 3.
Se selecteaz acest nou Frame 3.
Din meniul File se alege opiunea Import.
n fereastra Import se alege imaginea Img1.gif, apoi se acioneaz butonul
Open.
Se poziioneaz imaginea n locaia dorit. Eventual, se ajusteaz dimensiunile
acesteia.
Acionnd din nou butonul New/Duplicare Frame, se creaz un nou frame
Frame 4.
Se selecteaz acest nou Frame 4.
Din meniul File se alege opiunea Import.
n fereastra Import se alege imaginea Img2.gif, apoi se acioneaz butonul
Open.
Ionel SIMION 186

Se poziioneaz imaginea n locaia dorit. Eventual, se ajusteaz dimensiunile
acesteia.

H. Asocierea imaginilor cu butoanele
Se selecteaz prima imagine, situat pe Frame 1.
Se acioneaz butonul drept al mouse-ului deasupra acesteia i, din meniul care
apare, se selecteaz Insert slice.
n fereastra Frames se trece pe Frame 2.
Se selecteaz, pe primul buton, pictograma circular plasat n mijlocul acestuia.
Se trage de acest icon ctre slice-ul asociat imaginilor legtura este indicat pe
ecran printr-o linie neregulat.
n fereastra Swap image se selecteaz Frame 3, ca fiind legtura cu butonul
selectat.
n mod similar, se creaz cealalt legtur. Se selecteaz, pe cel de-al doilea
buton, pictograma circular plasat n mijlocul acestuia. Se trage de acest icon
ctre slice-ul asociat imaginilor legtura este indicat pe ecran printr-o linie
neregulat.
n fereastra Swap image se selecteaz Frame 4, ca fiind legtura cu butonul
selectat.





Trecnd pe modul de vizualizare Preview, se pot verifica rezultatele obinute.
Astfel, atunci cnd mouse-ul se afl poziionat n afara celor dou butoane,
este afiat imaginea img.gif.

Proiectarea paginilor WEB 187



Atunci cnd mouse-ul se afl poziionat deasupra primului buton, este afiat
imaginea img1.gif.



Atunci cnd mouse-ul se afl poziionat deasupra celui de-al doilea buton,
este afiat imaginea img2.gif.
Ionel SIMION 188




Atunci cnd se acioneaz prin click asupra unuia dintre butoane, se activeaz
una dintre cele dou hiperlegturi definite anterior.

I. Exportarea fiierului n format HTML.
Din meniul File se alege opiunea Export.
Din fereastra Export se aleg: locaia, numele fiierului i formatul (HTML and
images).
Se acioneaz butonul Save al ferestrei Export.
Codul HTML este generat automat.



14.4 Construcia unor efecte speciale cu Macromedia Flash MX

Editorul Macromedia Flash MX este conceput pentru a construi pagini Web
interctive i animate. n continuare vor fi prezentate cteva exemple de folosire a acestui
program.

Exerciiul 14.8. Construcia unui buton cu Macromedia Flash MX.

Din meniul Insert se alege opiunea New Symbol.
n fereastra Create New Symbol se alege numele Buton_1.
n aceeai fereastr, din lista Behavior, se alege Button.
Se acioneaz butonul OK.

Proiectarea paginilor WEB 189



n fereastra Timeline apar patru stri ale butonului: Up, Over, Down i Hit.




Se traseaz o form oval, folosind comanda Oval tool din bara de
comenzi Tools.
Selectnd imaginea desenat, i se pot modifica proprietile (culoare,
chenar etc) din fereastra Properties. Se alege o culoare de umplere (de
exemplu, albastru deschis - #66FFFF).



Se selecteaz instrumentul Text i se scrie Apas aici deasupra formei
ovale trasate anterior.
Se selecteaz textul i, din fereastra Properties, se modific proprietile
acestuia.



Se selecteaz forma geometric oval i textul.
Folosind comanda Align din meniul Modify, se poziioneaz textul n centrul formei
ovale.
Din meniul Modify, se alege comanda Transform cu opiunea Rotate and Skew. Se
trage de ptrelul selector situat n mijlocul laturii din dreapta a dreptunghiului de
selecie, aducnd imaginea n poziia rotit de mai jos.
Ionel SIMION 190




Textul centrat pe figura oval


Textul i figura oval selectate


Imaginea rotit.


Imaginea deselectat, dup rotire.


Diferitele stri ale butonului se obin prin copierea i modificarea imaginii grafice a
butonului pe diferite cadre cheie (keyframes).
Se construiete un nou cadru cheie n fereastra Timeline. Din meniul Insert se alege
Keyframe.
Se trece pe panoul Over. Acesta va indica ce se va ntmpla atunci cnd mouse-ul
este poziionat deasupra butonului.
Se selecteaz imaginea copiat i se construiete, cu ajutorul ferestrei Properties, o
nou form a butonului, cu un nou text, o alt culoare etc.
Din meniul Insert se alege Keyframe. Se construiete un nou cadru cheie, pentru
panoul Down. Acesta va indica ce se va ntmpla atunci cnd butonul mouse-ului va fi
meninut apsat asupra butonului creat.
Se definete, cu ajutorul ferestrei Properties, o nou form a butonului, cu un nou
text, o alt culoare etc.
Din meniul Insert se alege Keyframe. Se construiete un nou cadru cheie pentru
panoul Hit. Cadrul Hit definete zona de pe suprafaa butonului care rspunde la
aciunea mouse-ului.
Se traseaz o nou form geometric, dreptunghiular, care definete zona activ a
butonului.

n continuare, butonul creat va fi plasat n
cadrul scenei.
Se trece la construcia scenei, acionnd
pictograma Scene 1.
Din meniul Window se activeaz fereastra Library, n care apare butonul creat.
Se trage butonul din fereastra Library n cadrul scenei.

Proiectarea paginilor WEB 191




n continuare, butonului creat i se va asocia o hiperlegur.
Se efectueaz un click pe imagine, cu butonul drept al mouse-ului.
Din meniul care apare se selecteaz opiunea Actions.
n fereastra Actions se acioneaz butonul +.


Se selecteaz Actions > Browser/Network > Get URL.
n cmpul URL se introduce adresa documentului care va fi accesat prin intermediul
butonului creat.
n cmpul Window se definete fereastra n care va fi afiat noul document.
Din meniul Control, opiunea Test Movie permite vizualizarea efectului creat.
Din meniul File, opiunea Publish permite exportarea documentului creat n format
HTML.
Ionel SIMION 192

De asemenea, din meniul File, opiunea Export Movie permite salvarea butonului
creat n diverse formate (de exemplu, Flash movie, cu extensia .swf) pentru a putea fi
inserat ntr-un document HTML.


Exerciiul 14.9. Crearea unei animaii cu Macromedia Flash MX.

n principiu, exist dou metode de a crea imagini animate: construcia imaginilor
pentru fiecare cadru n parte, respectiv, crearea unor cadre cheie, programul genernd
automat poziiile intermediare dintre aceste cadre cheie. n exerciiul urmtor va fi aplicat
cea de-a doua metod, care are avantajul obinerii unui fiier de mrime redus.
Se pleac de la o imagine oarecare, inserat n pagin, ntr-o anumit poziie,
care va fi poziia de start.



n fereastra Timeline se selecteaz reperul 20 de pe scal, prin intermediul
dreptunghiului de culoare gri alturat. Se acioneaz butonul drept al mouse-ului
asupra acestui dreptunghi gri i, din meniul care apare, se alege Insert Keyframe.
Se puncteaz cu butonul drept al mouse-ului, undeva ntre cadrele 1 i 20, n
fereastra Timeline. Din meniul care este afiat se alege Create Motion Tween. Un
simbol de forma unei sgei apare astfel ntre cele dou cadre cheie.



Se selecteaz ultimul cadru cheie cel cu numrul 20.
Imaginea
inserat
Fereastra
Library
Proiectarea paginilor WEB 193

n acest cadru exist deja imaginea iniial, obinut prin copiere, o dat cu
crearea cadrului. Se trage de aceasta pn n poziia dorit poziia de final a
micrii.
Opional, se modific imaginea final prin scalare, rotire etc., folosind opiunile
comenzii Transform din meniul Modify.
Din meniul Control se alege Test Movie, pentru a vedea efectul de animaie:
imaginea se deplaseaz ntre cele dou poziii definite prin cadrele cheie 1 i 20.
Opional, pentru a obine o micare ncetinit, se trage, cadrul cheie 20 spre
dreapta, n fereastra Timeline de exemplu, pn la reperul 40 de pe scal. Efectul
invers se obine trgnd cadrul spre stnga scalei.

Se poate impune o anumit traiectorie pe care imaginea se va deplasa ntre cadrele
cheie. Pentru aceasta se procedeaz astfel:
Din meniul Insert se alege Motion Guide. n fereastra Timeline, panoul Layers
apare un nou layer Guide: Layer 1 (Layer 1 este cel pe care este plasat obiectul).
Se selecteaz noul layer Guide prin punctare cu mouse-ul.
Cu ajutorul instrumentului Pencil din bara Tools, se traseaz traiectoria dorit.
Se trece din nou pe layerul iniial Layer 1.
Se selecteaz cadrul cheie de start. Se poziioneaz imaginea n primul capt al
traiectoriei trasate.
Se procedeaz la fel cu cadrul cheie final, poziionnd imaginea n cel de-al
doilea capt al traiectoriei trasate.



Din meniul Control se alege Test Movie, pentru a vedea efectul creat: imaginea
se deplaseaz ntre cele dou poziii pe traiectoria dorit.

obiectchil
d


Fisierul 1
Traiectoria
Poziionarea
cadrului cheie n
punctul de start

obiectchil
d


Fisierul 1