E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Javascript

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DEVELOPMENT  /  Javascript  /  Introducere in Javascript (13)

III. Butoane in JavaScript

13.05.2008
III. Butoane in JavaScript

Folosirea butoanelor in JavaScript.

Total vizualizari: 6222 6222 afisari   |   Comentarii  0   |   Rating   |   (0 voturi)   |   Timp necesar: 10 min 10 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  E-learn.ro  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Pentru a folosi butoanele in scripturi, trebuie ca acestea sa fie mai intai incluse in pagina printr-un formular HTML. Tag-ul <input> prin care este introdus butonul este continut de tag-ul <FORM>:

<FORM> 
    <INPUT type="button" value="Textul butonului" name="buton1"> 
</FORM>

Acest cod HTML va plasa un buton pe pagina, dar acesta nu va avea nici un efect, daca il apasati nu se va intampla nimic. Sa analizam comanda javascript care transmite browserului cum sa actioneze daca utilizatorul apasa butonul. Plasati acest cod in tag-ul INPUT in care ati creat butonul:

 
  <INPUT type="button" value="Textul butonului" name="buton1" onClick=" ">

Daca ati citit capitolul anterior, atunci stiti cum puteti adauga text in status bar folosind comanda onMouseover. Acest lucru este valabil si pentru butoane:

 
<FORM> 
    <INPUT type="buton" value="Text" name="buton2" 
    onClick="window.status='Ati apasat butonul 1'; return true">
</FORM>

Daca testati acest cod, veti vedea ca in status bar a aparut textul „Ati apasat butonul 1”. De asemenea, puteti permite utilizatorilor sa schimbe culoarea fondului paginii. In loc de window.status folositi comanda: document.bgColor='culoare'. Introduceti aceasta linie ca instructiune pentru comanda onClick, in modul urmator:

 
<FORM> 
    <INPUT type="button" value="Schimba culoarea in verde!" 
    name="buton3" onClick="document.bgColor='green'">
</FORM>

Puteti adauga oricate butoane de acest gen doriti, dar asigurati-va ca ati inclus si un buton pentru a reveni la culoarea initiala. Scripul urmator va ofera trei optiuni pentru culoarea fondului: verde, albastru sau culoarea originala.

 
<FORM> 
    <INPUT type="button" value=" Schimba culoarea in verde!" 
    name="buton3" onClick="document.bgColor='yellow'"> <br> 
    <INPUT type="button" value=" Schimba culoarea in albastru!" 
    name="buton4" onClick="document.bgColor='blue'"> <br> 
    <INPUT type="button" value="Revenire" name="buton5" 
    onClick="document.bgColor='white'"> 
</FORM>

Ultimul script din acest capitol va va arata cum puteti folosi butoanele ca linkuri. Pentru aceasta, folositi comanda: window.location=’url’. De exemplu, iata un script care redirectioneaza utilizatorul catre o pagina oarecare:

  
<FORM> 
    <INPUT type="button" value="Alta pagina" name="buton6" 
    onClick="window.location='http://www.site.com/pagina.htm'"> 
</FORM>
Pagina:
1
comenteaza printeaza
Alte tutoriale Javascript:
Noteaza acest tutorial
Rating tutorial
 
(0 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4430
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4330
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4290
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4130
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Outlook Illustrator Fotografie Gimp XHTML Java PSD AJAX Python Javascript Flash JSON Powerpoint Fireworks Photoshop Dreamweaver Word StyleSheet Bridge MySQL Vista SWF HTML PHP XML Ruby on Rails Action Script Lightroom SEO Verilog Sony Vegas Swift 3D COREL DRAW RoR CSS Excel
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software