Javascript: More Loops and Events - Finishing Loops
(Page 4 of 4 )
For...In...Er
Remember that band? I don't. I mean, what songs did they play? Oh yeah, you are right. Hot Blooded, Head Games, and who can forget Cold as Ice? I guess I can, actually. What did they have, a temperature fetish?
For...In is another way to loop. You use it when you want to loop though the values held in an array. I know we haven't covered arrays yet, but we will. For now just know that arrays are similar to boxes, like variables are. Except that where variables hold one value, arrays hold many values. Sort of like a box full of variables.
You can also use the For...In on variables and objects (we will discuss these later as well). For now though, let's loop through that array.
<html>
<body>
<script type="text/javascript">
var dogs
var mydogs = new Array()
mydogs[0] = "Linus"
mydogs[1] = "Charlie"
mydogs[2] = "Violet"
mydogs[3] = "Molly Volly"
mydogs[4] = "Sally Anne"
mydogs[5] = "Lucy (RIP)"
mydogs[6] = "Schroeder (Enjoy the new home)"
for (dogs in mydogs)
{
document.write(mydogs[dogs] + "<br />")
}
</script>
</body>
</html>
You can tell several things from the above code: 1) I have too many dogs 2) I named them all after Peanuts characters (Molly Volly is Snoopy's tennis instructor) and 3) If I have any say in it (which I don't) my next dog will be named Pigpen.
Aside from that, here is how the program works. We create a variable named dogs, then an array named mydogs. We then assign the array 7 values (0 is the first value in the array). The values are my dogs' names. We then use the For...In statement to loop through the array and finally print out the values. Note that the For...In line is the one that says: for (dogs in mydogs)
That is it for our coverage of loops. In an entirely new series on JavaScript we will discuss Events, which allow the user to trigger certain things within a browser. They help provide a truly interactive experience and are fun to work with. As I sometimes do, I am going to leave you with a table listing the various Events.
Event | Trigger |
Onabort | Occurs when the loading of an image is interrupted |
OnBlur | Occurs when an element loses focus |
OnChange | Occurs when the user changes a field |
OnClick | Occurs when a user's mouse clicks an object |
OndblClick | Occurs when user double-clicks an object |
OnError | Occurs when an error happens while loading a document or an image |
OnFocus | Occurs when an element has focus |
OnKeyDown | Occurs when a key on the keyboard is pressed |
OnKeyPress | Occurs when a key on a keyboard is pressed or held down |
OnKeyUp | Occurs when a keyboard key is released |
OnLoad | Occurs when a page or an image finishes loading |
OnMouseDown | Occurs when a mouse button is pressed |
OnMouseMove | Occurs when a mouse is moved |
OnMouseOut | Occurs when a mouse if moved off of an element |
OnMouseOver | Occurs when a mouse is moved onto an element |
OnMouseUp | Occurs when a mouse button is released |
OnReset | Occurs when the reset button is clicked |
OnResize | Occurs when a window or frame is resized |
OnSelect | Occurs when text is Selected |
OnSubmit | Occurs when the submit button is clicked |
OnUnLoad | Occurs when the user exits the page |
Beautiful ain't it?
Till then...
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 2 
