Informatica
Programare - Software - Web Design
|
Nou pe simpatie:
Profil Ioanacatalina
 | Femeie
25 ani
Salaj
cauta Barbat
25 - 61 ani |
|
|
InformaticaInregistrareLoginPozeNu sunteti logat. Lista Forumurilor Pe Tematici
|
| #1 |
 AdminAdministrator
Postari: 315
|
|
Evenimente Part 2
onmousemove, onmouseout, onmouseover
onsubmit, onreset, onload, onunload, onresize
onkeydown, onkeyup, onkeypress
In partea 1 am tratat evenimentele:
onblur, onfocus, onclick,ondblclick, onchange, onmouseup, onmousedown, onerror
Evenimentul onmousemove
este similar cu onmouseover
<html><body>
<img src="image_w3default.gif" name="mousetest" width="234" height="91">
<p onmousemove="document.images['mousetest']
.src='image_w3default2.gif'">Cand se misca mouse-ul peste paragraf imaginea se schimba</p>
</body></html>
Cum functioneaza:
imaginea are numele mousetest
cand mouse-ul se misca peste paragraf se schimba sursa imaginii :
Din vectorul de imagini al documentului document.images se alege acea imagine cu numele mousetest si i se atribuie ca sursa alta imagine.
De retinut din acest exemplu modul de alegere a imaginii.
Evenimentele onmouseover, onmouseout
Realizarea de rollovere combina folosirea celor doua evenimente. Cand se trece cu mouse-ul deasupra unui link reprezentat de o imagine, se poate schimba acea imagine dand impresia ca link-ul e activ.
<html><head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1" .src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1".src ="b_pink.gif";
}
</script>
</head>
<body>
<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>
Cum functioneaza:
Se realizeaza doua functii mouseOver() si mouseOut() pentru cele doua situatii.
mouseOver() va stabili imaginea pentru situatia cand mouse-ul ajunge peste link si este folosita cu evenimentul onmouseover
iar
mouseOut() stabileste imaginea pentru situatia cand mouse-ul este luat de pe link si este folosita cu evenimentul onmouseout.
Evenimentul onsubmit
Este folosit in cadrul formularelor si apare atunci cand e apasat un buton submit.
<html><head>
<script type="text/javascript">
function welcome()
{
alert("Welcome " + document.forms["myform"]["fname"].value + "!"
}
</script>
</head><body>
What is your name?
<form name="myform" action="tryjsref_onsubmit.htm" onSubmit="welcome()">
<input type="text" name="fname" size="20">
<input type="submit" value="Submit">
</form>
</body></html>
Cum functioneaza:
Evenimentul onsubmit cu functia welcome() e atasat formularului myform si in momentul cand se da clic pe submit functia este apelata.
Facem o mica paranteza pentru a explica modul de accesare a formularelor cu ajutorul tablourilor.
1. formularul myformeste accesat din vectorul document.forms cu ajutorul indicelui "myform" (document.forms["myform"] )
iar
2. campul text din interiorul formularului la randul lui este accesat din vectorul document.forms["myform"] folosind indicele "fname"; (document.forms["myform"]["fname"])
3.proprietatea value este accesata prin .value
document.forms["myform"]["fname"].value)
document.forms
Observati cum sunt accesate formularele:
se acceseasa mai intai vectorul cu formulare
apoi se alege formularul myform (pe orizontala in tabelul nostru)
apoi in cadrul lui myform se alege input-ul tip text fname (pe verticala in tabel)
Acesta este un tablou bidimensional in care o dimensiune este data de numarul de formulare din document (coloanele) iar cealalta dimensiune consta din numarul de elemente din interiorul fiecarui formular (liniile)
Evenimentul onreset
are loc in momentul cand se da clic pe butonul reset fiind folosit in mod asemanator ca onsubmit.
<form onreset="alert('The form will be reset')">
Firstname: <input type="text" name="fname" value="John" />
Lastname: <input type="text" name="lname" />
<input type="reset" value="Reset">
</form>
Butonul reset are ca scop stergerea(resetarea) tuturor elementelor input din formular. In cazul nostru cand se da reset se afiseaza si o avertizare.
Evenimentul onload
Se produce la incarcarea unei pagini. Este util mai ales in cazul in care dorim sa modificam comportamentul unor elemente din pagina web prin preincarcarea unor functii.
in urmatorul exemplu, in momentul in care pagina s-a incarcat se anunta in status-bar-ul ferestrei ca pagina a fost incarcata
<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded";
}
</script>
</head>
<body onload="load()">
</body>
</html>
Evenimentul onunload
Se produce cand se inchide pagina
<html>
<body onunload="alert('s-a produs evenimentul onunload')">
<p>Inchide pagina pentru a produce evenimentul onunload.</p>
</body>
</html>
Evenimentele onkeydown, onkeyup, onkeypress
sunt legate de tastatura
In exemplul urmator, cand se elibereaza o tasta, caracterul tastat este transformat in majuscula
<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onkeyup="upperCase(this.id)">
</body>
</html> |
|
|
| |
|
