BluePink BluePink
XHost 		Servere virtuale de la 20 eur / luna. Servere dedicate de la 100 eur / luna - servicii de administrare si monitorizare incluse. Colocare servere si echipamente de la 75 eur / luna. Pentru detalii accesati site-ul BluePink.

14. Aplicatii JavaScript

1. Afisarea in pagina a unui mesaj de salut

<html>
<head><title>Introducere nume si afisare mesaj</title>
<script type="text/javascript">
   function cere_nume()
   {
      var nume=prompt("Introduceti numele dvs.","Paracelsus")
      if (nume!=null && nume!="")
      {
         document.write("Salut " + nume + " ! Ce mai faci ?")
      }
   }
</script>
</head>
<body>
   <input type="button" onclick="cere_nume()" value="Introducere nume" />
</body>
</html>

Pagina contine initial butonul "Introducere nume". Dupa apasarea acestuia, vizitatorul isi introduce numele intr-o caseta prompt. Ca rezultat, butonul dispare din pagina, fiind inlocuit de un mesaj de salut.

In instructiunea var nume=prompt("Introduceti numele dvs.","Paracelsus"), variabila nume primeste ca valoare numele introdus de utilizator in caseta de dialog aparuta prin apelul functiei prompt ("Paracelsus" este valoarea implicita, care ramane daca nu se introduce nimic si se apasa direct OK). Apoi, daca numele nu este vid, adica a fost efectiv introdus de vizitator (if (nume!=null && nume!="")), el este afisat in pagina cu instructiunea document.write. Semnele "+" reprezinta concatenarea sirurilor de caractere care formeaza mesajul. In corpul paginii (sectiunea body) este inserat un buton (input type="button"). La clic pe acesta (evenimentul onclick) este apelata functia cere_nume(), care cere numele vizitatorului si il afiseaza.

2. Afisarea datei si orei in bara de stare

<html> <head> <title> Afisarea datei si orei in bara de stare </title> <head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
   self.status=" Data si ora curenta: "+Date()
-->
</script>
<body> </html>		 Afisarea unui mesaj in bara de stare se face cu instructiunea: self.status="mesaj". Functia Date() returneaza data si ora curenta, sub forma de sir de caractere.

3. Modificarea imaginii la trecerea cu mouse-ul

<html><head><title> Modificarea imaginii </title></head>
<body>
<a href="http://outdoors.webshots.com/tag/beaches"
   onmouseover="imagine.src='plaje2.gif'"
   onmouseout="imagine.src='plaje1.gif'">
   <img src="plaje1.gif" name="imagine">
</a>
<body></html> 		Acest efect se numeste "mouseover" si functioneaza numai cu imagini cu rol de hyperlink. De aceea, eticheta <img> pentru imagine este incadrata intre etichetele <a> si </a>. Imaginea initial afisata este "plaje1.gif" si are numele "imagine" (necesar pentru referirea imaginii cu "imagine.src"). Cand mouse-ul este deasupra legaturii, are loc evenimentul "onmouseover"si este afisata imaginea "plaje2.gif". Cand mouse-ul nu mai este deasupra legaturii, are loc evenimentul "onmouseout"si este afisata din nou imaginea "plaje1.gif". Desi sunt folosite atributele JavaScript "onmouseover" si "onmouseout", in acest caz nu sunt obligatorii etichetele <script> si </script>. Puteti descarca de aici imaginile plaje1.gif si plaje2.gif, care trebuie sa fie in acelasi director cu pagina.

4. Detectarea browserului vizitatorului

<html><head><title>Detectarea browserului</title></head>
<body>
<script type="text/javascript">
   var nume_browser=navigator.appName
   var versiune=navigator.appVersion
   var versiune_browser=parseFloat(versiune)
   alert("Folositi browserul: "+ nume_browser+"\nVersiunea: "+ versiune_browser+"\nIn continuare, va apare o pagina care se vede bine in acest browser ...")
   if (nume_browser=="Microsoft Internet Explorer")
   {
      location.href="http://www.microsoft.com"
   }
   else if (nume_browser=="Netscape")
   {
      location.href="http://www.netscape.com"
   }
   else
   {
      location.href="http://proeco.lx.ro"
   }
</script>
</body>
</html>

In acest exemplu, este detectat browser-ul vizitatorului si, in functie de acesta, se incarca o anumita pagina. Aceasta tehnica este utila daca dorim sa trimitem vizitatorul intr-o pagina adaptata pentru browserul sau.

Declaratiile navigator.appName si navigator.appVersion returneaza numele respectiv versiunea browserului, valori care sunt atribuite variabilelor nume_browser, respectiv versiune. Intrucat versiune este un numar, pentru a fi afisat in mesaj este necesara transformarea lui in sir de caractere. Aceasta se realizeaza apeland functia parseFloat, iar rezultatul apelului este atribuit variabilei versiune_browser in instructiunea: var versiune_browser=parseFloat(versiune). Caracterul "\n" din instructiunea alert reprezinta trecerea la randul urmator in mesaj. Instructiunea location.href="..." are rolul de a incarca pagina de la adresa indicata.

5. Modificarea dinamica a unui formular, prelucrarea si validarea datelor

In acest exemplu, vizitatorul completeaza un formular pentru a comanda pizza sau spaghetti. In functie de ceea ce comanda, ii apare o lista cu specialitatile disponibile. Daca este apasat butonul "Trimite" fara completarea adresei de livrare, apare un mesaj de eroare. La final, apare un mesaj cu detaliile comenzii.


<html>
<head>
<title> Schimbarea dinamica, validarea si prelucrarea unui formular </title>
<script language="JavaScript" type="text/javascript">
<!--

function ResetOptionList(ElementValue)
{
   with (document.forms.Contact)
   {
      if (ElementValue==1)
      {
         OptionList[0].text="Pizza cu ciuperci"
         OptionList[0].value=1
         OptionList[1].text="Pizza Napolitana"
         OptionList[1].value=2
      }
      if (ElementValue==2)
      {
         OptionList[0].text="Spaghetti Bolognese"
         OptionList[0].value=1
         OptionList[1].text="Spaghetti di Firenze"
         OptionList[1].value=2
      }
   }
}

function Comanda()
{
   var selection="Ati comandat: "
   with(document.forms.Contact)
   {
      if (OptionList[0].selected==true)
      {
         selection+=OptionList[0].text
      }
      if (OptionList[1].selected==true)
      {
         selection+=OptionList[1].text
      }
      selection+="\n Adresa: "+adresa_textfield.value
      alert(selection)
   }
}

function Validate(frm)
{
   if (frm.adresa_textfield.value=="")
   {
      alert("Nu ati completat adresa.")
      frm.adresa_textfield.focus()
      return false
   }
   Comanda()
}

-->
</script>
</head>
<body>

<FORM name="Contact" action="http://www.xxx.yyy" method="post" onSubmit="return Validate(Contact)">
<P>
<select name="OptionList" size="3">
<option value=1> ***
<option value=2> ***
</select>
<BR>
<INPUT TYPE="radio" name="specialitati" checked="true" value=1 onclick=ResetOptionList(this.value)>Pizza
<INPUT TYPE="radio" name="specialitati" Value=2 onclick=ResetOptionList(this.value)>Spaghetti
<br>
<br>
Adresa dvs.:
<br>
<input name="adresa_textfield" type="text" size="50">
<br>
<BR>
<INPUT name="Submit" value="Trimite" type="submit"/>
<INPUT name="Reset" value="Reseteaza" type="reset">
</p>
</form>

</body>
</html>

Functia ResetOptionList schimba continutul listei de optiuni de deasupra butoanelor radio "Pizza" si "Spaghetti", in functie de ce buton radio a fost apasat. Aceste butoane sunt declarate in instructiunile:

<INPUT TYPE="radio" name="specialitati" checked="true" value=1 onclick=ResetOptionList(this.value)>Pizza
<INPUT TYPE="radio" name="specialitati" Value=2 onclick=ResetOptionList(this.value)>Spaghetti

Se observa mai sus ca butoanele radio au valorile 1 respectiv 2. In momentul apasarii unuia dintre ele (evenimentul onclick), este apelata functia ResetOptionList, careia i se transmite valoarea butonului apasat, prin parametrul this.value, aceasta valoare putand fi deci: 1 daca a fost apasat butonul "Pizza" si 2 - butonul "Spaghetti". Mai departe, daca este executata functia ResetOptionList cu parametrul actual ElementValue=1, atunci lista va contine optiunile "Pizza cu ciuperci" si "Pizza napolitana", iar daca parametrul transmis functiei este 2, lista va contine optiunile "Spaghetti Bolognese" si "Spaghetti di Firenze".

Functia Comanda() are rolul de a afisa, intr-o caseta de mesaj, ce anume s-a comandat si adresa de livrare. Astfel, de exemplu, daca s-a selectat prima optiune din lista (if (OptionList[0].selected==true)), atunci in variabila selection se concateneaza (se adauga la sfarsit) textul acestei optiuni (selection+=OptionList[0].text)

Functia Validate(frm) este apelata la apasarea butonului "Trimite" (evenimentul onSubmit) in instructiunea:

<FORM name="Contact" action="http://www.xxx.yyy" method="post" onSubmit="return Validate(Contact)">

In aceasta functie:

- Daca vizitatorul nu a completat adresa de livrare, adica valoarea (value) a campului text pentru adresa (adresa_textfield) este egala cu sirul vid ""(if (frm.adresa_textfield.value=="")), atunci este afisat un mesaj de eroare (alert("Nu ati completat adresa"). Apoi se selecteaza campul adresa, pentru a facilita introducerea rapida a acesteia (frm.adresa_textfield.focus()) si se intrerupe executarea functiei, iesind din apel (return false) - nu se mai executa urmatoarea instructiune (Comanda()).

- Daca s-a completat adresa de livrare, se apeleaza si functia Comanda() pentru afisarea detaliilor comenzii.