photo credit: schedetzki

Challenge: Create three lists of buzzwords typically used by business consultants. Randomly select three words and put in a sentence to form something ridiculous that a business consultant might say with an air of authority.

My solution:

package phraseomatic;

/**
 *
 * @author kirkster
 */
public class Main {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // create three word sets to build from
        String[] wordListOne = {"24/7", "multi-Tier", "30,000 foot", "B2B", "win-win", "front-end", "web-based", "pervasive", "smart", "six-sigma", "critical-path", "dynamic"};
        String[] wordListTwo = {"empowered", "sticky", "value-added", "oriented", "centric", "distributed", "clustered", "branded", "outside-the-box", "positioned", "networked", "focused", "leveraged", "aligned", "targeted", "shared", "cooperative", "accelerated", "semantic"};
        String[] wordListThree = {"process", "tipping-point", "solution", "architecture", "core competency", "strategy", "mindshare", "portal", "space", "vision", "paradigm", "mission"};

        // determine how many words in each list
        int oneLength = wordListOne.length;
        int twoLength = wordListTwo.length;
        int threeLength = wordListThree.length;

        // generate three random numbers
        int rand1 = (int) (Math.random() * oneLength);
        int rand2 = (int) (Math.random() * twoLength);
        int rand3 = (int) (Math.random() * threeLength);

        // build a phrase
        String phrase = wordListOne[rand1] + " " + wordListTwo[rand2] + " " + wordListThree[rand3];

        // print out the phrase
        System.out.println("Consultant says: \"We need a " + phrase + "!\"");
    }

}

Here is the output:

Phrase-O-Matic pumps out business consultant wisdom

This programming challenge is from the Head First Java book, which I studied and practiced spring 2009. The end result itself is not terribly sexy, but I liked the algorithm construction process. My programming curriculum changed course during the first year, and they eliminated our Java classes. I was still curious about Java, so I took it upon myself to self-learn Java. This was one of my first products.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Related posts:

• Bottles of Beer Song via Java photo credit: NUCO This programming challenge is from the...
• Plain and Recursive Factorials with Full Print Enhancements photo credit: gadl This programming challenge is from a...
• Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...
• Random BINGO Card Generator with Ajax Reset photo credit: Keees This programming challenge is from a...

photo credit: davidChief

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a simple script to randomly pull and display an image on a web page.

The HTML solution:

<html>
<head>
	<title>NASA Astronomy Picture of the Day Gallery</title>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" rev="stylesheet" href="styles.css" />
</head>
<body>
	<img src="images/spacer.gif" id="aRandomPicture" alt="a Random image" />
</body>
</html>

The JavaScript solution:

// run randomPic function whenever page loads
window.onload = randomPic;

// setup array of image files
var myPics = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images8.jpg");

function randomPic() {
	// generate random number based on image quantity
	randomNumber = Math.floor((Math.random() * myPics.length));
	// set the image src attribute to a random pic in the image array
	document.getElementById("aRandomPicture").src = myPics[randomNumber];
}

It’s as simple as that!

Related posts:

• Random BINGO Card Generator with Ajax Reset photo credit: Keees This programming challenge is from a...
• Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...
• Slideshow from Images Array photo credit: pawpaw67 This programming challenge is from a...
• Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...

photo credit: NUCO

This programming challenge is from the Head First Java book, which I studied and practiced spring 2009. The end result itself is not terribly sexy, but I liked the algorithm construction process. My programming curriculum changed course during the first year, and they eliminated our Java classes. I was still curious about Java, so I took it upon myself to self-learn Java. This was one of my first products.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a simple program which outputs the classic “99 Bottles of Beer” song, counting down from 99 to 0 bottles. In addition to outputting the correct number of bottles in each chorus, output the correct plural or singular form of “bottle” where appropriate to the number remaining. When there are no more bottles left then state final line.

My solution:

package bottlesofbeer;

/**
 *
 * @author kirk
 */
public class Main {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // initialize starting number of bottles on wall
        int beerNum = 99;

        // initialize plural form of bottle used most often
        String word = "bottles";

        while (beerNum > 0) {
            // if only 1 bottle is left then change to singular form
            if (beerNum == 1) { word = "bottle"; }

            // output song chorus using current variable states
            System.out.println(beerNum + " " + word + " of beer on the wall,");
            System.out.println(beerNum + " " + word + " of beer!");
            System.out.println("Take one down, pass it around.");

            // decrement beerNum cuz we took one down and passed it around
            beerNum--;
            if (beerNum == 1) { word = "bottle"; }

            // so long as there are still bottles on the wall
            if (beerNum > 0) {
                System.out.println(beerNum + " " + word + " of beer on the wall!");
                System.out.println();
            }
            // when there are no more bottles on the wall
            else {
                System.out.println("No more bottles of beer on the wall!");
            } // ends if/else
        } // ends while loop
    } // ends main method
} // ends class

Here is the output:

99 Bottles of Beer Song output via Java

Related posts:

• Phrase-O-Matic Consultant Wisdom via Java photo credit: schedetzki Challenge: Create three lists of buzzwords...
• Plain and Recursive Factorials with Full Print Enhancements photo credit: gadl This programming challenge is from a...

photo credit: pawpaw67

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a JavaScript image slideshow with next and previous links that use an array. Loop the script so the slideshow never reaches an end.

The HTML solution:

<html>
<head>
	<title>NASA Patches Slideshow</title>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" rev="stylesheet" href="styles.css" />
</head>
<body>
	<div align="center">
		<h1>NASA Patches Slideshow</h1>
		<img src="images/nasa.jpeg" id="currentPicture" width="201" height="155" alt="Slideshow" />
		<h2>
        	<a href="previous.html" id="prevLink">&laquo; Previous</a>&nbsp;&nbsp;
            <a href="next.html" id="nextLink">Next &raquo;</a></h2>
	</div>
</body>
</html>

The JavaScript solution:

window.onload = initLinks;

// create array of pictures/strings
var myPics = new Array("images/nasa.jpeg", "images/columbia1.gif", "images/columbia2.jpeg", "images/columbia3.jpg", "images/columbia4.jpeg", "images/challenger.jpeg");

// track currently displayed image, set to 0
var thisPic = 0;

// handle behaviors when next and previous links are clicked
function initLinks() {
	// when prevLink is clicked, call function to fetch the previous pic
	document.getElementById("prevLink").onclick = processPrevious;
	// when nextLink is clicked, call function to fetch the next pic
	document.getElementById("nextLink").onclick = processNext;
}

// called when prevLink is clicked
function processPrevious() {
	// if we are on slide 0
	if (thisPic == 0) {
		// then set thisPic to be same value as array length (meaning last picture)
		// this allows looping around the collection not reaching an end
		thisPic = myPics.length;
	}
	// decrement thisPic to be one less than last pic so as to point to previous
	thisPic--;
	// set source of page's displayed picture to be new current
	document.getElementById("currentPicture").src = myPics[thisPic];
	// js handled the work, so prevent next page from being fetched
	return false;
}

// called when nextLink is clicked
function processNext() {
	// incerement thisPic to be one more than last pic so as to point to next
	thisPic++;
	// if we are on last picture in array
	if (thisPic == myPics.length) {
		// then set thisPic to be original value in array (meaning first picture)
		// this allows looping around the collection not reaching an end
		thisPic = 0;
	}
	// set source of page's displayed picture to be new current
	document.getElementById("currentPicture").src = myPics[thisPic];
	// js handled the work, so prevent next page from being fetched
	return false;
}

Here is a screenshot example of a previous slideshow image:

Example of the previous image fetched

Here is a screenshot example of a next slideshow image:

Example of the next image fetched

Related posts:

• Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...
• Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
• Accessible JavaScript Rollover with Three-State Functionality photo credit: Rhian vK This programming challenge is from...
• Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...

photo credit: Matt McGee

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a JavaScript image rollover animation which includes a default image, and a hover over image. Use abstracted functions. Improve accessibility by creating onfocus and onblur event handlers for users without mice. Make the rollover occur when you mouse over a different document element.

The HTML solution:

<html>
<head>
	<title>A Disjointed Link Rollover</title>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" rev="stylesheet" href="styles.css" />
</head>
<body>
	<h1>
		<a href="next.html" id="arrow">Next page</a>
	</h1>
	<img src="images/arrow_off.gif" width="147" height="82" id="arrow_image" alt="arrow" />
</body>
</html>

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

The JavaScript solution:

// initialize the rollovers when window loads
window.onload = rolloverInit;

function rolloverInit() {
	// loop through all links on page
	for (var i=0; i<document.links.length; i++) {
		// capture i-th link as local variable to make life easier later on
		var linkObject = document.links[i];
		// if current linkObject has an id (meaning it is something we care to change)
		if (linkObject.id) {
			// append current image's id with _image (preplanned format), save to local variable
			var imageObject = document.getElementById(linkObject.id + "_image");
			// if the imageObject exists
			if (imageObject) {
				// pass both current local variables to setupRollover function
				setupRollover(linkObject, imageObject);
			}
		}
	}
}

// 'thisLink & thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular link & image
function setupRollover(thisLink, thisImage) {
	// capture the current link's associated image as thisLink's intended target image property
	thisLink.imgToChange = thisImage;
	// capture rollOut function as behavior when thisLinks's onmouseout event handler is triggered
	thisLink.onmouseout = rollOut;
	// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
	thisLink.onmouseover = rollOver;

	// create new child image object for thisLink's  outImage property
	thisLink.outImage = new Image();
	// store current image src as the source for overImage, so it stays same when not rolled over
	thisLink.outImage.src = thisImage.src;

	// create new child image object for thisLink's  overImage property
	thisLink.overImage = new Image();
	// store current image src as the source for overImage, so it stays same when not rolled over
	thisLink.overImage.src = "images/" + thisLink.id + "_on.gif";

	// improve accessibility
	// simply set thisLink's onblur and onfocus event handlers to rollOut and rollOver respectively
	thisLink.onblur = rollOut;
	thisLink.onfocus = rollOver;
}	

function rollOut() {
	// change thisLinks's image src to the outImage source property (already captured)
	this.imgToChange.src = this.outImage.src;
}

function rollOver() {
	// change thisLinks's image src to the overImage source property (already captured)
	this.imgToChange.src = this.overImage.src;
}

And finally here is a screenshot of the link highlighted result:

Related posts:

• Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
• Accessible JavaScript Rollover with Three-State Functionality photo credit: Rhian vK This programming challenge is from...
• Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...
• Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...

photo credit: Rhian vK

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a JavaScript image rollover animation which includes a default image, a hover over image, and an image when the link is clicked. Use abstracted functions. Improve accessibility by creating onfocus and onblur event handlers for users without mice.

The HTML solution:

<html>
<head>
	<title>An Accessible Three-State Rollover</title>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" rev="stylesheet" href="styles.css" />
</head>
<body>
	<a href="next1.html">
		<img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" />
	</a>&nbsp;&nbsp;
	<a href="next2.html">
		<img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" />
		</a>
</body>
</html>

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

The JavaScript solution:

// initialize the rollovers when window loads
window.onload = rolloverInit;

function rolloverInit() {
	// loop through all images on page
	for (var i = 0; i < document.images.length; i++) {
		// if current image is wrapped in an anchor tag (i.e. <a href=""><img></a>)
		if (document.images[i].parentNode.tagName == "A") {
			// initiate rollover setup for this current image, pass the current image to that function
			setupRollover(document.images[i]);
		}
	}
}

// 'thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular image
function setupRollover(thisImage) {
	// create new child image object for thisImage object's outImage property
	thisImage.outImage = new Image();
	// store current image src as the source for outimage, so it stays same when not rolled over
	thisImage.outImage.src = thisImage.src;
	// capture rollOut function as behavior when thisImage's onmouseout event handler is triggered
	thisImage.onmouseout = rollOut;

	// create new child image object for thisImage object's overImage property
	thisImage.overImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
	thisImage.onmouseover = rollOver;

	// create new child image object for thisImage object's clickImage property
	thisImage.clickImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";
	// capture rollClick function as behavior when thisImage's onmousedown event handler is triggered
	thisImage.onmousedown = rollClick;

	// improve accessibility
	// set image's parent anchor child Image to thisImage
	thisImage.parentNode.childImage = thisImage;
	// when image's achor tag is unselected (an event handler)
	thisImage.parentNode.onblur = rollOutChild;
	// when image's achor tag is selected (an event handler)
	thisImage.parentNode.onfocus = rollOverChild;
}

function rollOut() {
	// change thisImage's src to the outImage source property (already captured)
	this.src = this.outImage.src;
}

function rollOver() {
	// change thisImage's src to the overImage source property (already captured)
	this.src = this.overImage.src;
}

function rollClick() {
	// change thisImage's src to the clickImage source property (already captured)
	this.src = this.clickImage.src;
}

function rollOutChild() {
	// change the achor tag's childImage src to the childImage's outImage source property (already captured)
	this.childImage.src = this.childImage.outImage.src;
}

function rollOverChild() {
	// change the achor tag's childImage src to the childImage's overImage source property (already captured)
	this.childImage.src = this.childImage.overImage.src;
}

And finally here is a screenshot of the improved end rollover result:

Rollover state A:

Improved rollover state A

Rollover state B:

Improved rollover state B

Rollover state C (clicked button):

Button state when button is clicked

Demonstrating accessible rollover when button is selected but not moused over.

Related posts:

• Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
• Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
• Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...
• Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...

photo credit: chimothy27

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a JavaScript image rollover animation which includes a default image, a hover over image, and an image when the link is clicked. Use abstracted functions.

The HTML solution:

<html>
<head>
	<title>A Three-State Rollover</title>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" rev="stylesheet" href="styles.css" />
</head>
<body>
	<a href="next1.html">
		<img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" />
	</a>&nbsp;&nbsp;
	<a href="next2.html">
		<img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" />
		</a>
</body>
</html>

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

The JavaScript solution:

// initialize the rollovers when window loads
window.onload = rolloverInit;

function rolloverInit() {
	// loop through all images on page
	for (var i = 0; i < document.images.length; i++) {
		// if current image is wrapped in an anchor tag (i.e. <a href=""><img></a>)
		if (document.images[i].parentNode.tagName == "A") {
			// initiate rollover setup for this current image, pass the current image to that function
			setupRollover(document.images[i]);
		}
	}
}

// 'thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular image
function setupRollover(thisImage) {
	// create new child image object for thisImage object's outImage property
	thisImage.outImage = new Image();
	// store current image src as the source for outimage, so it stays same when not rolled over
	thisImage.outImage.src = thisImage.src;
	// capture rollOut function as behavior when thisImage's onmouseout event handler is triggered
	thisImage.onmouseout = rollOut;

	// create new child image object for thisImage object's overImage property
	thisImage.overImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
	thisImage.onmouseover = rollOver;

	// create new child image object for thisImage object's clickImage property
	thisImage.clickImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";
	// capture rollClick function as behavior when thisImage's onmousedown event handler is triggered
	thisImage.onmousedown = rollClick;
}

function rollOut() {
	// change thisImage's src to the outImage source property (already captured)
	this.src = this.outImage.src;
}

function rollOver() {
	// change thisImage's src to the overImage source property (already captured)
	this.src = this.overImage.src;
}

function rollClick() {
	// change thisImage's src to the clickImage source property (already captured)
	this.src = this.clickImage.src;
}

And finally here is a screenshot of the improved end rollover result:

Rollover state A:

Improved rollover state A

Rollover state B:

Improved rollover state B

Rollover state C (clicked button):

Button state when button is clicked

Related posts:

• Accessible JavaScript Rollover with Three-State Functionality photo credit: Rhian vK This programming challenge is from...
• Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
• Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...
• Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...

photo credit: Joel Bedford

This programming snippet is from the themeforest.net video series “jQuery for beginners” which I watched and practiced spring 2009. I do not mean to steal from them, but just post how I performed their tutorials for my own later reference and perhaps save someone else the time of watching the videos.

I post these old code snippets for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, it is just nice for me to have my own code snippet library, to easily find snippets that I remember doing a particular job but I cannot always recall where I found it.

Challenge: Download jQuery script from jQuery.com (get the production version, not the development version). Link to the jQuery script file form your index.html. Write simple animation script to fade out a div element when a link is clicked.

Solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Beginner's jQuery</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	<style type="text/css">
		#box {
			background: blue;
			width: 200px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<a href="#">Click me</a>
</body>
</html>

Here is the script to animate the box fading away:

// start a generic function
$(function() {
	// when link is clicked, start a sub-function
	$('a').click(function() {
		// make the element with id='box' fade out over 5 seconds
		$('#box').fadeOut(5000);
	});
});

Note that you can also use fadeOut(’slow’); or ‘fast’ without specifying actual milliseconds.

Related posts:

• Disable Submit Button to Prevent Double-Submit photo credit: kevindooley This programming snippet is from the...

photo credit: Etwood

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a simple javascript image rollover animation. (Two arrow images colored red and blue provided in my set, but you can use any two images you like.) Do basic version first, then improve it by separating script from display code, and abstract the functions.

The Simple Method:

The HTML solution:

<html>
<head>
	<title>A Simple Rollover</title>
	<link rel="stylesheet" rev="stylesheet" href="styles.css" />
</head>
<body>
	<a href="next.html" onmouseover="document.arrow.src='images/arrow_on.gif'" onmouseout="document.arrow.src='images/arrow_off.gif'"><img src="images/arrow_off.gif" width="147" height="82" alt="arrow" name="arrow" /></a>
</body>
</html>

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

This is a quick and dirty method, but it has problems. The biggest problem is the rollover does not execute until the user moves their mouse over the image. If the new image is large or the user’s connection is slow, there will be a noticeable delay in the first time rollover.

Another problem is that are now committed to updating JavaScript code within HTML code. This causes many efficiency hassles, such as intermingling design work with scripting work, and violating Model-View-Controller (MVC) principles.

A better method is to separate the JavaScript from the HTML page. This next improved method will attempt Don’t Repeat Yourself (DRY) principles.

The Improved Method:

The HTML solution:

<html>
<head>
	<title>An Improved Rollover</title>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" rev="stylesheet" href="styles.css" />
</head>
<body>
	<a href="next1.html">
		<img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" />
	</a>&nbsp;&nbsp;
	<a href="next2.html">
		<img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" />
		</a>
</body>
</html>

The CSS solution:

body {
	background-color: white;
}
img {
	border-width: 0;
}

The JavaScript solution:

// initialize the rollovers when window loads
window.onload = rolloverInit;

function rolloverInit() {
	// loop through all images on page
	for (var i = 0; i < document.images.length; i++) {
		// if current image is wrapped in an anchor tag (i.e. <a href=""><img></a>)
		if (document.images[i].parentNode.tagName == "A") {
			// initiate rollover setup for this current image, pass the current image to that function
			setupRollover(document.images[i]);
		}
	}
}

// 'thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular image
function setupRollover(thisImage) {
	// create new child image object for thisImage object's outImage property
	thisImage.outImage = new Image();
	// store current image src as the source for outimage, so it stays same when not rolled over
	thisImage.outImage.src = thisImage.src;
	// capture rollOut function as behavior when thisImage's onmouseout event handler is triggered
	thisImage.onmouseout = rollOut;

	// create new child image object for thisImage object's overImage property
	thisImage.overImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
	thisImage.onmouseover = rollOver;
}

function rollOut() {
	// change thisImage's src to the outImage source property (already captured)
	this.src = this.outImage.src;
}

function rollOver() {
	// change thisImage's src to the overImage source property (already captured)
	this.src = this.overImage.src;
}

And finally here is a screenshot of the improved end rollover result:

Rollover state A:

Improved rollover state A

Rollover state B:

Improved rollover state B

Related posts:

• Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
• Accessible JavaScript Rollover with Three-State Functionality photo credit: Rhian vK This programming challenge is from...
• Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
• Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...

photo credit: gadl

This programming challenge is from a WiBit.net instructional video, which I studied/practiced this spring 2009. The end result itself is not terribly sexy, but I liked the algorithm construction process. My programming curriculum changed course during the first year, and they eliminated our Java classes. I was still curious about Java, so I took it upon myself to self-learn Java. This was one of my first products.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a simple factorial calculator in Java, using the NetBeans IDE. The original project simply output something like “5! = 120″. I improved it to output each member integer so as to clarify the factorial process, so my program output something like “5! = 1 x 2 x 3 x 4 x 5 = 120″. I like to push projects a little farther than the original, just to satisfy myself or to learn more.

My solution:

package factorial;
/**
 * @author kirkster
 */
public class Main {
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        int n;
        int i;
        int factorial = 7;
        int result= 1;
        System.out.print(factorial + "! = ");
        for (i = 1; i <= factorial; i++) {
            System.out.print(i);
            if (i < factorial) {
                System.out.print(" x ");
            }
        }
        for (i = 1; i <= factorial; i++) {
            result = fact(i);
        }
        System.out.print(" = " + result);
        System.out.println("");
    }

    static int fact(int n) {
        int i;
        int result = 1;
        for (i = 1; i <= n; i++) {
            result *= i;
        }
        return result;
    }
}

After this first factorial program, I did a WiBit video doing the same thing using a recursive algorithm. It accomplishes the same thing but in a computer-scientist-sexier way:

package recursivefactorial;
/**
 * @author kirkster
 */
public class Main {
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        System.out.println(factorial(n));
    }

    public static long factorial(int n) {
        if (n < 0)
            return -1;
        else if (n == 0)
            return 1;
        else
            return n * factorial(n -1);
    }
}

After doing both programs, I wanted to enhance the recursive version with the full step printouts like I did in the first plain version. It was a bit trickier to implement printing out each member integer like my previous improvement, and I could only print the member integers in backwards format (avoiding an extra loop) but this was my solution:

package recursivefactorial;
/**
 * @author kirkster
 */
public class Main {
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        int n = 7;
        System.out.print(n + "! = ");
        System.out.println(factorial(n));
    }

    public static long factorial(int n) {
        if (n < 0)
            return -1;
        else if (n == 0) {
            System.out.print(" = ");
            return 1;
        }
        else {
            if (n == 1)
                System.out.print(n);
            else
                System.out.print(n + " x ");
            return n * factorial(n -1);
        }
    }
}

Here is the output:

Output from a recursive factorial algorithm built in Java

Related posts:

• Bottles of Beer Song via Java photo credit: NUCO This programming challenge is from the...
• Phrase-O-Matic Consultant Wisdom via Java photo credit: schedetzki Challenge: Create three lists of buzzwords...