Category Archives: Javascript

HTML and JavaScript – Repeating Anonymous Function

This post demonstrates how to use an anonymous function on an html page in order to create a looping action. It is a relatively simple process and the following code is all that is needed to see this in action.

The comments should be pretty self explanatory in this code to see what is being done. Try it yourself!

Notice a few things. If you would like to end or clear the interval you set in JavaScript, there is a function that is clearInterval. Make sure you replace the function name of the one you would like to repeat in the line where you call the setInterval, in this example the name is render.

Should be straightforward. A challenge is for you to use an onClick event to begin and end the interval that you create.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
	<head>
		<title>Repeating Anonymous Function</title>
	</head>
 
	<body>
		This is my text.  I'm going to repeatedly pop-up a message box that tells you how many times it's popped up.
 
	<script	type="text/javascript">
 
		//Our anonymous function declaration (at the end of the html document)
		(function() {
 
			//Set the timer variable
			var intTime = 5000;
			//Create the interval variable;
			var myInterval;
			//Create a counter
			var count = 0;
 
			//Create the interval with render being the function to call and intTime being the interval
			myInterval = setInterval( render, intTime);
 
			//Here is the function that our timer will call
			function render() {
				count += 1;
				alert("Number of Cycles: " + count);
 
				if (count == 10) {
					//The following ends the execution of the interval
					clearInterval(myInterval);
				}
			}
		//Complete our anonymous function
		})();
 
	</script>
	</body>
</html>

Basic HTML5 Canvas Tutorial

Have you yet to play around with the canvas tag available in HTML5?  Need help just getting started with a basic document so that you can begin manipulating it different processes?

The canvas element is a very useful tool to understand in web development.  It offers great potential to web graphics, animation and even to overall page layout.  Animate layers on your webpage to make it stand out or even create a game. The possibilities are extensive.

See the following code example to get started with a basic canvas element.  The comments should clearly highlight what the various lines of code are accomplishing.  Hopefully this helps you get a good start towards utilizing this excellent tag in HTML5.

<html>
 
	<head>
		<script type="application/javascript">
		//Create a function to call after page load to draw a rectangle on
		//our canvas element
		function createRect() {
			//Reference to our canvas element
			var myCanvas = document.getElementById("myCanvas");
			//Create the context for which we will manipulate our canvas
			var myContext = myCanvas.getContext("2d");
			//Create a filler for what we draw in our context
			myContext.fillStyle = "rgb(0, 0, 256)";
			//Create a shape to display
			myContext.fillRect(20, 20, 100, 150);
		}
		</script>
	</head>
	<!-- After the body loads, call our function to draw our rectangle -->
	<body onload="createRect()">
		<!-- Create the canvas element on our page -->
		<canvas id="myCanvas" width="800" height="600">help</canvas>
	</body>
 
</html>

That’s all there is to it!

Creating Page Links Using getElementsByTagName and addEventListener

The following is a tutorial on how to make all div elements clickable on a web page.  Handle click events on all div tags or on any specific element type in your HTML.

Do you have a need on your HTML page to create links using all the elements of a specific type.  For example, you want all “div” elements to become links that provide some sort of action in javascript.  This can be accomplished using two main functions available in javascript.  The getElementsByTagName and addEventListener functions.

The way this is handled is to create an anonymous function that adds event listeners to your page when it loads.  These event listeners then pass the event to a function that uses a switch statement and the div ID to set specific logic for each div.

We start by creating a basic HTML page that ends with the call to our script as seen below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
<head>
	<title>Make Divs Clickable!</title>
</head>
<body>
	<div style="background-color: black" id="FirstDiv">
              <h2 style="color: white">Click this div to say: FirstDiv</h2>
        </div>
 
	<div style="background-color: black" id="SecondDiv">
              <h2 style="color: white">Click this div to say: SecondDiv</h2>
        </div>
 
	<div style="background-color: black" id="ThirdDiv">
              <h2 style="color: white">Our third div is not handled</h2>
        </div>
 
	<script type="text/javascript" src="test.js" ></script>
 
</body>
 
</html>

Next, we create the following anonymous function in our javascript file which adds the event listeners and sets up the handling of the different div ID’s.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//create an anonymous function
(function() {
 
	//get all of our div elements
	var links = document.getElementsByTagName("div");
 
	//add an event handler to all of the page elements
	for( var i = 0, len = links.length; i < len; i++) {
		//add an event listener to our div
		links[i].addEventListener("mousedown", elementClickHandler);
 
 
	}
 
 
	function elementClickHandler(event) {
		//get the ID from the event
		var elementID = event.currentTarget.id;
 
		//do something based on the ID
		switch(elementID) {
		case "FirstDiv":
			//do something
			alert(elementID);
			break;
		case "SecondDiv":
			//do something
			alert(elementID);
			break;
		default:
			//do something
			alert("Some other div not Handled");
		}
	}
 
})();

That’s all there is to it. If you would like to download the ZIP file for this example, it is available via the link Make-div-Elements-Clickable.