Fise de lucru JavaScrip - js7

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

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 altera 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 întrebuințat 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"] întrebuințând indicele "fname"; (document.forms["myform"]["fname"])
3.proprietatea value este accesata prin .value
document.forms["myform"]["fname"].value)
document.forms
Fise de lucru JavaScrip - js7 Fise de fapt JavaScrip - js7

Fise de lucru JavaScrip - js7 Fise de fapt JavaScrip - js7

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 mărime 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 timpul 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 creat 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>