WEBlab 7

smaranda.belciug@inf.ucv.
ro Laborator 7 Tehnologii Web si Programare Client Server
FOARTE IMPORTANT!!!! JavaScript NU este JAVA!!! La sfritul anilor 90, cei care au inventat JavaScript-ul au vrut s-i atrag popularitate, i astfel i-au dat un nume apropiat de cel al limbajul de programare JAVA. Totui, n momentul n care au luat aceast decizie, au indus n eroare muli oameni, care consider c JavaScriptul are legtura cu Java. Pentru a clarifica lucrurile: Java nu are nicio legtur cu JavaScript-ul! Java este un descendent al limbajelor de programare C i C++. Programatorii pot s creeze aplicaii Java care s ruleze pe diferite platforme cum ar fi: Windows, Mac, Linux. Java mai poate fi folosit pentru a crea applets (mici programe care pot fi downloadate si rulate n browserele Web).
smaranda.belciug@inf.ucv.ro
Ce poate face JavaScript pentru pagina ta? O persoan nu trebuie s se sperie, nu trebuie s fie un as n programare pentru a scrie script-uri n JavaScript. Datorit invenie demne de Premiul Nobel copy i paste, o persoana nu trebuie s fie un guru pentru a adaug script-uri paginii sale Web. poate transforma o pagin plictisitoare ntr-una dinamic un script scurt poate verifica dac datele au fost nscrise corect ntr-un form, nainte ca acestea s fie procesate adaug funcionalitate paginii se poate interaciona cu utilizatorii detecteaz dac utilizatorul are un browser care permite vizualizarea de coninut multi-media redirecteaz automat utilizatorii ctre o alt pagin Web
Lucrul cu ferestrele de browser JavaScript poate s-i transmit browser-ului s deschid sau s nchid ferestre. Probabil acest lucru enervant l-ai observat pn acum: ferestre pop-up care apar cnd ncerci s prseti un site. Dar aceast tehnologie poate fi folosit pentru a face i bine, nu numai ru. De exemplu, poi s ai un preview la un set de imagini n format mare, folosind nite versiuni thumbnail. Fcnd click pe o imagine thumbnail poate aduce la: deschiderea unei ferestre care s conin versiunea mrit a imaginii deschiderea unei ferestre cu un link text care deschide o fereastra cu ilustrarea acelui text, cum se vede n figura de mai jos.
smaranda.belciug@inf.ucv.ro Script-ul pentru aceasta pagin este mai jos:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Opening a Window</title> <script language=Javascript type=text/javascript> function newWindow() { catWindow = window.open(images/pixel2.jpg, catWin, width=330,height=250) } </script> </head> <body bgcolor=#FFFFFF> <h1>The Master of the House</h1> <h2>Click on His name to behold He Who Must Be Adored<br /><br /> <a href=javascript:newWindow()>Pixel</a></h2> </body> </html>
Solicitarea i verificarea input-ului utilizatorului

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Linking scripts to HTML pages</title> <script type=text/javascript language=javascript> function checkSubmit ( thisForm ) { if ( thisForm.FirstName.value == ) { alert(Please enter your First Name.); return false; } if ( thisForm.LastName.value == ) { alert(Please enter your Last Name.); return false; } return true; } </script> </head> <body> <form method=POST action=/cgi-bin/form_processor.cgi onsubmit=return checkSubmit(this);> <p> First Name: <input type=text name=FirstName /><br /> Last Name: <input type=text name=LastName /><br /> <input type=submit /> </p> </form> </body> </html>
smaranda.belciug@inf.ucv.ro Acest script face una din cele dou operaii enumerate mai jos, dac oricare din cele dou cmpuri din formular nu sunt completate, n momentul n care utilizatorul face click pe butonul Sumbit: i spune browser-ului s afieze un avertisment pentru a-i transmite utilizatorului c a uitat s completeze un cmp Returneaz o valoare false browser-ului, fapt ce previne ca browser-ul s nu trimit formularul la procesare.
Inainte de a ncepe nvarea JavaScript-ului este necesar prezentarea unui exemplu de pagin ce folosete mult JavaScript:
Includerea de script-uri n pagina Web Deoarece un script JavaScript face parte dintr-o alt specie fa de markup-ul HTML, trebuie s-l includem ntr-un tag HTML, <script> i </script>. Un script poate fi introdus n: Seciunea <head> </head> (header script) Seciunea <body> </body> (body script) Script-urile header conin cod pe care l doreti procesat nainte ca pagin s se ncarce, sau pentru ca acel script sa poata s fie apelat de alt script din pagina Web. Script-urile body sunt executate cnd tag-ul <body> este procesat. Urmtorul script deschide o fereastra pop-up n momentul n care se ncarc pagina.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>My JavaScript page</title> <script language=Javascript type=text/javascript> alert(Welcome to my JavaScript page!) </script> </head> <body bgcolor=#FFFFFF> <h2>This script pops up a message box for the user.</h2> </body>
Tag-ul script precedent are dou atribute: Language = Javascript i spune browser-ului ce fel de limbaj de script-uri folosete documentul Type = text/javascript spune browser-ului c script-ul conine doar text n JavaScript Metoda alert() afieaz un mesaj care se deschide n fereastra browser-ului i conine un anumit mesaj. Folosirea aceluiai script n mai multe pagini Dac ai o singur pagin Web care folosete un script JavaScript este bine s ai toate codurile scrise ntr-un singur tag <script>. Dar dac ai mai multe pagini care folosesc acelai script? Poi s copiezi script-ul n fiecare pagin, dar este destul de complicat. Trebuie s adaugi script-ul n fiecare pagin i s te asiguri c este corect i c merge De fiecare dat cnd script-ul se modific, eti forat s-l modifici n fiecare pagin n parte. Dac ai doar dou pagini, nu este foarte dificil. Dar dac ai mai mult de trei pagini, poate cauza migrene de mentenan. Solutia? Folosirea unui fiier extern JavaScript, numit fiier .js. Un fiier .js este un fiier obinuit n care se stocheaz script-uri JavaScript. (asemntor cu .css) Pentru a folosi acelai script n mai multe pagini, trebuie: 1. S introduci script-ul ntr-un fiier extern JavaScript 2. Introduci fiierul n orice pagin HTML de cteori ai nevoie de el.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>My JavaScript page</title> <script src=external.js language=JavaScript type=text/javascript> </script> </head> 
Un fiier extern JavaScript poate arata aa:

homeOff = new Image productsOff = new Image
contactOff = new Image pressOff = new Image homeOver = new Image productsOver = new Image contactOver = new Image pressOver = new Image homeOff.src = images/home_off.jpg productsOff.src = images/products_off.jpg contactOff.src = images/contact_off.jpg pressOff.src = images/press_off.jpg homeOver.src = images/home_over.jpg productsOver.src = images/products_over.jpg contactOver.src = images/contact_over.jpg pressOver.src = images/press_over.jpg function imgOver(thisImg) { document[thisImg].src = images/ + thisImg + _over.jpg } function imgOut(thisImg) { document[thisImg].src = images/ + thisImg + _off.jpg }
Limbajul JavaScript Regulile sintaxei JavaScript este case-sensitive. JavaScript ignora spaiile i tab-urile. Comentariile se scriu cu // sau /*.*/. Variabilele nu pot ncepe cu o cifr. Ele pot conine cifre, litere i underline. Ele nu pot avea acelai nume cu un cuvnt cheie. Tipuri de date Tip Number String Object Descriere Orice valoare numerica Text inclus ntre ghilimele Un obiect JavaScript care poate fi definit de limbaj sau creat de tine Valoare returnat de o funcie O valoare logic: true sau false Nu are valoare Exemplu
42 my name is window
Function Boolean Null Operaii
myFunction() true null
2+1+2 // are valoarea 5 A + three + hour + tour // Athreehourtour
Operatori de asignare Operator

= += -= *= /=
Asignare
x=y x += y x -= y x *= y x /= y
Descriere
x ia valoarea lui y x=x+y x=x-y x=x*y x=x/y
Operatori aritmetici Operator

+ * / -
Exemplu
x + y (numeric) x-y x*y x/y -x
Descriere Adun pe x cu y Scade pe y din x nmulete pe x cu y mparte pe x la y Schimb semnul lui x
Instruciuni Instruciunea condiional
if ( x = Boxen ) { y=1 alert( You are a smarty! The correct answer is Boxen. Well done!) }
if ( x = Boxen ) { y=1 alert( You are a smarty! The correct answer is Boxen. Well done!) } else { y=0 alert( You are totally wrong! The correct answer is Boxen. Bad!) }
if (confirm(Are you sure you want to do that?)) { alert(You said yes) } else { alert(You said no)
}
Bucle (cicluri) Cnd trebuie s repei o aciune ntr-un script JavaScript, foloseti o bucl. De exemplu, un script care folosete o bucl poate: S verifice fiecare caracter dintr-un cod S verifice fiecare element al unei liste n cutarea unei anumite valori For
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>A For Loop</title> </head> <body> <script type=text/javascript language=javascript> document.write(<h3>Multiplication table for 7</h3>) for (loopCount = 0; loopCount <= 10; loopCount++) { document.write(7 X ,loopCount, = , 7 * loopCount,<br />); } </script> </body> </html>
While
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml> <head> <title>A While Loop</title> </head> <body> <script type=text/javascript language=javascript> con = confirm(Do you want to continue?) while(con == false) { document.write(Continuing to wait<br />); con = confirm(Do you want to continue?) } </script> </body> </html>

WEBlab 7

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

WEBlab 7

Enviado por

Direitos autorais:

Formatos disponíveis

smaranda.belciug@inf.ucv.

ro Laborator 7 Tehnologii Web si Programare Client Server

smaranda.belciug@inf.ucv.ro Script-ul pentru aceasta pagin este mai jos:

Solicitarea i verificarea input-ului utilizatorului

Un fiier extern JavaScript poate arata aa:

Function Boolean Null Operaii

myFunction() true null

2+1+2 // are valoarea 5 A + three + hour + tour // Athreehourtour

Operatori de asignare Operator

Operatori aritmetici Operator

Descriere Adun pe x cu y Scade pe y din x nmulete pe x cu y mparte pe x la y Schimb semnul lui x

Instruciuni Instruciunea condiional

Você também pode gostar