KirkHings.com » algorithm

Random Image Display with JavaScript

Kirk — Mon, 25 May 2009 03:27:24 +0000

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:



	NASA Astronomy Picture of the Day Gallery

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!

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...

Bottles of Beer Song via Java

Kirk — Sun, 24 May 2009 19:42:03 +0000

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.

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

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...

Plain and Recursive Factorials with Full Print Enhancements

Kirk — Sun, 19 Apr 2009 04:00:56 +0000

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.

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

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...

Random BINGO Card Generator with Ajax Reset

Kirk — Fri, 17 Apr 2009 17:17:10 +0000

photo credit: Keees

Challenge: Create a BINGO card using HTML and JavaScript. Generate random integers between 1 and 75, and insert them into each of 24 squares, skipping the center FREE space. Integer ranges are as follow: B = 1-15, I = 16-30, N = 31-45, G = 46-60, O = 67-75. Ensure no two squares contain duplicate numbers. Bonus: After initial card load, enable resetting the card without a server call (quasi-Ajax-powered).

The HTML solution:

Make Your Own Bingo Card

Create A Bingo Card

B	I	N	G	O


		Free

Click here to create a new card

The CSS solution:

body {
	background-color: white;
	color: black;
	font-size: 20px;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

h1, th {
	font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
	font-size: 28px;
}

table {
	border-collapse: collapse;
}

th, td {
	padding: 10px;
	border: 2px #666 solid;
	text-align: center;
	font-size: 24px;
}

#free {
	background-color: #ffff00;
}

The JavaScript solution:

window.onload = initializePage;

// even though arrays are 0-based, creating 76 positions generates elements 0-75, we will later ignore position 0
// note that newly created arrays have all elements set to false
var usedNumbers = new Array(76);

function initializePage() {
	// so older browsers do not get 24 error messages
	if (document.getElementById) {
		// enable creating a new card without reloading page
		document.getElementById("reload").onclick = anotherCard;
		// generate the new bingo card
		newCard();
	} else {
		alert("Sorry, but your browser is not running JavaScript, and this game requires it.");
	}
}

function newCard() {
	for (var i = 0; i < 24; i++) {
		// pass the current i as parameter to setSquare function
		setSquare(i);
	}
}

function setSquare(thisSquare) {
	// capture current corresponding html square (via id=)  to current digit that was passed over
	var currentSquare = "square" + thisSquare;

	// while bingo numbers are ranged 1-75, letter columns are restricted to specific number ranges
	// b = 1-15, i = 16-30, n = 31-45, g = 46-60, o = 67-75
	// OR mathematically we can generate a random number between 1-15 and add column-specific number
	// b = 0, i = 15, n = 30, g = 45, o = 60	

	// need 5 sets of numbers 0-4 (1 set for each letter)
	// note missing '2,' from third set, so as to skip the middle 'free' square
	var columnPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);

	// capture appropriate column mulitple by referencing current square # as array element
	var columnMultiple = (columnPlace[thisSquare] * 15);

	// initialize variable to be used in following do-while loop
	var newNumber;

	// generate newNumber and check if it has been used already, if so loop again
	do {
		// add random number to the particular column multiple
		newNumber = columnMultiple + getNewNumber()  + 1;
	} while(usedNumbers[newNumber]);

	// prevent duplicate numbers by testing if the newNumber has already been used once on this card
	if (!usedNumbers[newNumber]) {
		// if duplicate was not found, this must be an original #, so set this element to true
		usedNumbers[newNumber] = true;

		// assign randomized newNum to current square
		document.getElementById(currentSquare).innerHTML = newNumber;
	}
}

function getNewNumber() {
	// capture random number between 1 and 15 for bingo values
		// math.random() returns random number between 0 and 1
		// math.floor() returns floor of a decimal number (ex. 1.75 becomes 1)
	return Math.floor(Math.random() * 15)
}

function anotherCard() {
	// housekeeping: reset the usedNumbers flag arrays to all false
	for (var i = 1; i < usedNumbers.length; i++) {
		usedNumbers[i] = false;
	}

	// generate the new bingo card
	newCard();
	return false;
}

And finally here is a screenshot of the end result:

BINGO card screenshot

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