TPI - Lab1

1
Proiectare Web Lucrarea de laborator Nr. 1

LIMBAJE DE PROIECTARE WEB: HTML SI JAVASCRIPT

n aceasta lucrare se vor studia limbajul HTML (care a mai fost studiat si n lucrarea precedenta,
pentru utilizarea applet-urilor ) si limbajul JavaScript. Limbajul JavaScript se va folosi pentru mbogatirea
continutului si a interactivitatii paginilor Web, prin programare la client (browser).
Pentru aceasta lucrare este necesara instalarea unuia sau mai multor browsere si a unuia sau mai
multor servere de Web, pentru a observa si problemele de compatibilitate care pot sa existe. Ca browsere se
vor folosi Internet Explorer (care se instaleaza automat n sistemele de operare Windows 2000, XP) si
Netscape 7.2 (care poate fi instalat ulterior). Ca servere Web se pot folosi: serverul IIS (Internet Information
Server), care se poate instala numai n sistemul de operare Windows, sau unul dintre serverele Tomcat sau
J2EE Application Server.
Ca editor de fisiere se poate folosi un editor simplu (NotePad, TextPad), care sa necesite nvatarea
macar a unor comenzi si instructiuni de baza HTML si JavaScript.

A. Instalarea serverului Tomcat
Se descarca de la adresa www.jakarta.apache.com ultima versiune (distributie binara) de server
Tomcat, si se dezarhiveaza n directorul dor it (de exemplu C:\tomcat). Pentru executia serverului trebuie sa
fie setata variabila de mediu JAVA_HOME cu numele directorului unde este instalat kitul Java 2 SDK.
Lansarea in executie a serverului se face prin comanda startup.bat, din subdirectorul bin al directorului de
instalare, adica:
C:\tomcat\bin> startup
Oprirea serverului tomcat se face cu comanda:
C:\tomcat\bin> shutdown

B. Instalarea programului utilitar ANT.
Programul ant este un utilitar care permite compilarea si executarea programelor, asemanator
programelor make. Operatiile pe care le executa programul ant sunt descrise ntr-un fisier n limbajul XML,
cu denumirea build.xml.
Instalarea programului ant se face simplu, prin dezactivarea arhivei care se gaseste la adresa
www.apache.org. Ult ima versiune, care a fost instalata si in laborator este apache-ant-1.6.2-bin.zip.
Dupa aceasta se creeaza variabila de mediu de tip User ANT_HOME cu numele directorului instalarii
(C:\ant) si se adauga directorul bin al acesteia in variabila User PATH (C:\ant\bin;C).

C. Instalarea editorului Textpad
Pentru editarea fisierelor sursa se poate folosi editorul Textpad, care se instaleaza prin executarea
fisierului de distributie txpgen472.exe.

1.1 Instalati toate programele descrise mai sus. Instalati, de asemenea si cteva manuale de HTML si
JavaScript disponibile Online. In continuare se va face referinta la manualele OReiley Books: HTML The
definite Guide si JavaScript - The Definitive Guide si WebMaster in a Nutshell.

1.2 Studiati Capitolul 8 (Form Fundamentals) din manualul HTML si primele capitole (1-6) din
manualul JavaScript.

1.3 Testati modul de publicare a documentelor de catre serverele Web si de regasire a acestora de catre
browsere (clienti).
n sistemele de operare Windows actuale (2000, XP) serverele Web IIS sunt instalate si pornite automat, si
ele asculta cererile clientilor pe portul implicit 80, directorul implicit este C:\inetpub\wwwroot, iar
documentul implicit este localstart.asp.
Pentru a accesa un alt document HTML (de exemplu documentul test1.html), acesta se poate plasa n
directorul implicit al serverului IIS si poate fi accesat local (din acelasi calculator) dintr-un browser (Internet
Explorer sau Netscape) cu comanda (adresa):

2
http://localhost/test1.html
Fisierul test1.html poate avea urmatorul continut:

<html> <head>
<title>
Primul meu test</title>
</head>
<body>
Hello, <i> IIS!</i>
</body>
</html>

La executia acestei comenzi se va sfisa n fereastra browserului mesajul: Hello, IIS!
Alte servere Web care se pot testa sunt Tomcat sau serverul Web din distributia J2EE. Deoarece n
versiunile actuale, ambele servere asculta pe acelasi port (portul 8080), ele nu pot lansate simultan ci pe rnd.
Serverul Tomcat are ca director implicit subdirectorul webapps\Root al directorului de instalare (deci
c:\tomcat\webapps\Root, daca serverul s-a instalat n directorul C:\tomcat) si ca document implicit index.jsp.
Copiati fisierul test1.html n directorul c:\tomcat\webapps\Root, dupa ce ati modificat textul de afisat n
Hello Tomcat! Lansati serverul Tomcat (cu comanda startup din subdirectorul bin al directorului de
instalare) si apoi din browserul Internet Explorer sau Netscape executati comanda:
http://localhost:8080/test1.html
La executia acestei comenzi se va sfisa n fereastra browserului mesajul: Hello, Tomcat!
Este de retinut ca trebuie data comanda Refresh (n Internet Explorer) sau Reload (n Netscape)
pentru actualizarea continutului ferestrei browserului, care nu-si actualizeaza continutul daca nu se schimba
adresa paginii Web.

1.4 Folosind oricare din serverele Web instalate si testate, studiati doua moduri de creare a scripturilor
JavaScript descrise n Capitolul 10 (Client-Side Program Structure) din manualul JavaScript.

(a)Includerea liniilor de program JavaScript ntre marcajele <SCRIPT> si </SCRIPT>

Testati urmatorul program (test2.html):
<HTML>
<HEAD>
<TITLE>Today's Date</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// Define a function for use later on.
function print_todays_date()
{
var d = new Date(); // today's date and time.
document.write(d.toLocaleString());
}
</SCRIPT>
</HEAD>
<BODY>
<HR>The date and time are:<BR><B>
// Now call the function we defined above.
print_todays_date();
</SCRIPT>
</B><HR>
</BODY>
</HTML>

Remarcati: atributul LANGUAGE al marcajului <SCRIPT> defineste limbajul de scripting; o functie
JavaScript se defineste n sectiunea HEAD a documentului; apelul unei functii JavaScript se face din corpul
(BODY) al documentului, dintr-un script (deci ntr-un marcaj <SCRIPT> ... </SCRIPT>).

3
(b) Includerea fisierelor JavaScript n documente HTML. Este posibil ca un script JavaScript sa fie memorat
ca un fisier separat (cu extensia .js) si numele lui sa fie dat ca valoare a atributului SRC al marcajului
<SCRIPT>. Fisierul se memoreaza ntr-un director la server, numele fisierului dat ca valoare a atributului
SRC va cuprinde si calea (relativa fata de fisierul HTML sau absoluta), si fisierul de script va fi descarcat la
client o data cu pagina HTML care l include.
Modificati documentul precedent (test2.html) astfel: functia print_today_date() se memoreaza ca fisier
separat test3.js, iar documentul test3.html va include acest fisier si va apela functia:
// Fisier test3.js
// Define a function for use later on.
function print_todays_date()
{
var d = new Date(); // today's date and time.
document.write(d.toLocaleString());
}


<HTML>
<HEAD>
<TITLE>Today's Date</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="test3.js">
</SCRIPT>
</HEAD>
<BODY>
<HR>The date and time are:<BR><B>
// Now call the function we defined above.
print_todays_date();
</SCRIPT>
</B><HR>
</BODY>
</HTML>

1.5 Studiati modul de organizare a documentelor HTML si obiectele JavaScript (Capitolul 14 din
manualul JavaScript, Capitolul 21 din manualul WebMaster).
Creati un document HTML care sa contina unul sau mai multe formulare (forms) si n fiecare formular
introduceti mai multe elemente HTML, carora le corespund obiecte JavaScript: casete de text, casete de text
multilinie, butoane, etc. Setarea valorilor acestor elemente se va face printr-o functie JavaScript astfel:


<HTML> <HEAD> <TITLE> Obiecte JavaScript </TITLE>
function setValues(){
var texte = new Array(3);
for (i = 0;i < 3 ;i++)
texte[i] = "text " + i;
for (i = 0;i < 3 ;i++)
document.form0.elements[i].value = texte[i];
}
</SCRIPT> </HEAD>
<BODY>
<FORM NAME="form0">
<INPUT TYPE="text" NAME="text0" >
<P>
<INPUT TYPE = "checkbox" NAME = "check0" > Check 0
</P> <P>
<INPUT TYPE = "radio" NAME = "radio0" > Radio 0

4
</P> <P>
<TEXTAREA NAME = "area0" ROWS = 7 COLS = 9> </TEXTAREA>
</P>
</FORM>
<SCRIPT> setValues(); </SCRIPT>
</BODY>
</HTML>

ncarcati pagina HTML de mai sus si observati modul de afisare a datelor n fereastra browser-ului.
Remarcati organizarea ca vectori (obiecte Array) a variabilelor si a elementelor documentelor, a formelor, a
proprietatilor obiectelor, etc.
Completati functia setValues() astfel nct sa seteze valorile n toate elementele formularului, iar afisarea
din browser sa arate ca n figura de mai jos:

1.6 Studiati modul de tratare a evenimentelor n JavaScript (Cap. 17 din manualul JavaScript, Cap. 21
din manualul WebMaster). Retineti ca orice element al unei forme HTML care admite introducerea datelor
(buton, text sau selectie) este asociat cu unul sau mai multe evenimente JavaScript. Experimentati aceste
evenimente.
Evenimente de la butoane. Toate tipurile de butoane admise n limbajul HTML: buton simplu, buton de
validare (check), radio buton, buton de trimitere (submit), buton de resetare (reset) genereaza unul sau mai
multe evenimente care pot fi tratate folosind scripturi JavaScript. Testati urmatorul document care defineste
handlerul de eveniment click al unui buton simplu printr-o functie JavaScript data ca valoare a atributului
onClick al butonului respectiv:


<HTML>
<HEAD> <TITLE> Evenimentul Click al
unui buton </TITLE>
function dontclickme(){
// button click handler
alert("I told you not to click me");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE="button" NAME="mycheck"
VALUE="HA!" onClick="dontclickme()">
</FORM>
</BODY>
</HTML>

5

La ncarcarea acestui document veti obtine n fereastra browser-ului imaginea de mai sus.

1.7 Modificati documentul test1.html astfel nct setarea valorilor elementelor formularului sa se execute
la comanda click pe un buton inserat n formular.

1.8 Evenimente de la elemente de text. Elementele HTML text simplu (text) si ariile de text (textarea)
genereaza patru evenimente JavaScript: change (atunci cnd se modifica ceva n text), select (atunci cnd se
selecteaza textul din caseta), focus (atunci cnd se intra n caseta respectiva, apasnd pe mouse-ul pozitionat
n caseta), blur (atunci cnd se paraseste caseta respectiva, apasnd pe mouse-ul pozitionat n afara casetei).
Elementul de text de tip password nu genereaza
evenimente.
Creati o pagina HTML care sa contina doua elemente
text si un element textarea si definiti patru functii
JavaScript care sa trateze toate cele patru evenimente
posibile ale unui element text. Functiile handler ale
evenimentelor vor afisa n fereastra elementului
textarea ce eveniment s-a generat si n ce element de
text. Ferestra de afisare din browser va arata ca n
figura alaturata, iar o functie handler de eveniment va
arata, de exemplu, ca n liniile de mai jos:

function textFocus(index){
var textF = formular.area.value;
var nume =
formular.elements[index].name;
textF = textF+" Eveniment focus
in " + nume;
document.formular.area.value =
textF;
}
</SCRIPT>

1.9 Realizati un document HTML cu scripturi JavaScript ca sa creeze unui calculator aritmetic simplu,
ca, de exemplu, programul calculator din grupul Accesories al sistemului de operare Windows.

6

TPI - Lab1

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

TPI - Lab1

Încărcat de

Drepturi de autor:

Formate disponibile

1

Proiectare Web Lucrarea de laborator Nr. 1

S-ar putea să vă placă și