WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Javascript Events on Tue Apr 03, 2012 8:18 pm

Mr.Joker


Mr. WebArtz
Mr. WebArtz
JavaScript Events
Quick Links for all the Tutorials at WebArtz


Hello again, I am Mr.Joker and today I will teach you what are events. I allready spoken about events when I talked about functions but lets pass trought that again. A function is a massive code that contain different activites. I used example with jumping. A function for jumping would be, squat, and jump. Thats two actions in one function. But event is when will that function be preformed. When a teacher tell you "jump" thats an event, he activate the function by telling you to do it when he want. Its the same with javascript. There are 4 most used events (onLoad, onClick, onMouseOver, onMouseOut). Each have different way to apply function. Lets pass trough each of them.

Code:
<html>
<head>
<script type="text/javascript">
function test() {
var x = 5;
document.write(x);
}
</script>
</head>
<body>
<p onMouseOver="test()">4</p>
</body>
</html>

Here we have a function that have variable x with value 5, and that variable will be displayed. But when? In body tag we have some paragraph with number 4, and there I added an event as you can see. onMouseOver="test()" activate the function when someone pass mouse over paragraph. And thats true. If you test code it will happend for real. When we can use both of them, like onMouseOver and onMouseOut. Well we can with image like this:
DEMO HERE
But when you look at the code:

Code:
<html>
<head>
<script type="text/javascript">
Rollimage = new Array()

Rollimage[0] = new Image()
Rollimage[0].src = "http://img163.imageshack.us/img163/2686/test1r.png"
Rollimage[1] = new Image()
Rollimage[1].src = "http://img196.imageshack.us/img196/7528/test2zx.png"
function preko() {
document.slika.src = Rollimage[1].src;
return true;
}
function nazad() {
document.slika.src = Rollimage[0].src;
return true;
}
</script>
</head>
<body>
<a href="www.google.com" onMouseover="preko()" onMouseout="nazad()">
<img src="http://img163.imageshack.us/img163/2686/test1r.png" name="slika" border="0"></img></a>
</body>
</html>

Its too much complicated to explain you now because I yet didnt explained nthing about Arrays. So we will just pass this part and will explain you when we learn arrays.
onLoad is used when page loads and its simple:

Code:
<html>
<head>
<script type="text/javascript">
function test() {
var x = 4;
document.write(x);
}
</script>
</head>
<body onLoad="test()">
</body>
</html>

We have a function and inside it a variable x with value of 4. A function should write that number on screen but it will nto happend if we dont use event. I used event inside body tag (onLoad) and thats why function will work. And last example is on click. We will use it for links (just an example).

Code:
<html>
<head>
<script type="text/javascript">
function test() {
alert("The link doesent work!");
}
</script>
</head>
<body >
<a href="#" onClick="test()">Google</a>
</body>
</html>

Now we have a link on our page, and as soon as someone click on link an event as onClick will activate a function called test. And an alert box will appear. Its all you need to know about events.

Notice : These tutorials are copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

2Accespted Re: Javascript Events on Thu Apr 12, 2012 7:23 am

ankillien


Administrator
Administrator
Tutorial Accepted Very Happy

3Accespted Re: Javascript Events on Mon Nov 18, 2013 11:17 pm

Petermichael


Registered Member
Registered Member
its look good .thank you:shock for good stuff:D 

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum