12 · 06

Random Text and Image Display with JavaScript, Part 3

Here is the third and final part to my Random Text and Image Display with JavaScript Tutorial. Displaying a random image on a web page using JavaScript involves the following steps:
  • Listing the images you plan to display
  • Storing the names of these images in an array
  • Using the Math.random() method to obtain a random value
  • Rounding the random number to an integer using Math.floor()
  • Displaying the image using document.write() method

Listing the images and storing them in an array

Let's suppose we plan to display one image from a set of 5 images, r1.gif, r2.gif, r3.gif, r4.gif and r5.gif. We create an array called img_rnd and store the image names in it.
var img_rnd = new Array ("r1.gif", "r2.gif",
"r3.gif", "r4.gif", "r5.gif");
Remember, JavaScript arrays are zero indexed (the first element of an array in JavaScript has an index of 0). The Math.random() method returns a value between 0.0 and 1.0. We have to convert this value to an integer between 0 to 4 so that it can be used as an index to retrieve the image name from the img_rnd array. We store the final value in a variable i.

Generating a random number

var i = Math.floor(4*Math.random());
The above code can be broken into two parts for easy understanding:
  1. The random number thrown out by Math.random() method is multiplied by 5, which is the number of elements in our array.
  2. The Math.floor() method is then used to convert the random floating point (decimal) number into an integer. Since floor() rounds a number down, we shall always get a number between 0 and 4.

Displaying the image

The final step is to display the image through document.write() method.
document.write('<img src="' + img_rnd[i] + '" width="100"
height="100" alt="Random image" />');
We now place all this code between <script>-</script> tags.
<script language="JavaScript">
<!--
var img_rnd = new Array ("r1.gif", "r2.gif",
"r3.gif", "r4.gif", "r5.gif");

var i = Math.floor(5*Math.random());

document.write('<img src="' + img_rnd[i] + '" width="100"
height="100" alt="Random image" />');

//-->
</script>
Well, I hope you have enjoyed and learned a lot from this valuable Javascript Tutorial. Just a reminder, comments are always welcome!
About the Author Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him, you can visit his website at KyleReddoch.com.
12 · 05

Random Text and Image Display with JavaScript, Part 2

As promised, here is the second part of my three part Javascript Tutorial. Now that you know how to randomly display text, we'll see how we can display this text as a marquee (using the <MARQUEE> tag) in Internet Explorer or make this text blink (using the<BLINK> tag in Netscape Communicator). The first step is to make a browser detection script. Depending on the browser, we execute the appropriate document.write() method. The browser detention script use the appName property of the navigator object.
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var r_text = new Array ();
r_text[0] = "All the leaves are brown";
r_text[1] = "And the sky is grey";
r_text[2] = "I've been for a walk";
r_text[3] = "On a winter's day";
r_text[4] = "I'd be safe and warm";
r_text[5] = "If I was in L.A.";
r_text[6] = "California dreaming, On such a winter's day";

var i = Math.floor(7*Math.random());

if (navigator.appName == "Netscape")
   {
   document.write("<BLINK><FONT COLOR='
   #FF0000'>" + r_text[i] + "</FONT></BLINK>");
   }
else
   {
   document.write("<MARQUEE><FONT COLOR='#FF0000'>" +
   r_text[i] + "</FONT></MARQUEE>");
   }

//-->
</SCRIPT>
Remember, JavaScript arrays are zero indexed (the first element of an array in JavaScript has an index of 0). Our array r_text consists of seven elements. The Math.random() method returns a value between 0 and 1. We have to convert this value to an integer between 0 to 6 so that it can be used as an index to retrieve the string from the r_text array. We store the final value in a variable i.
About the Author Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him, you can visit his site at KyleReddoch.com.
12 · 03

Random Text and Image Display with JavaScript, Part 1

This is Part One of what will be a Three Part JavaScript Tutorial. So let's begin with Part One. This little JavaScript tip involves randomly displaying a text string from a list. And this is how we shall be going about it:
  • Create a new array and store the list of text strings in it
  • Use the JavaScript Math.random() method to obtain a random number
  • Convert the random number into an integer because the random() method throws a floating point (decimal) number between 0.0 and 1.0
  • Get the array element corresponding to the randomly generated integer.
  • Display the text string using document.write() or the JavaScript alert().

Creating the array that stores the text strings

var r_text = new Array ();
r_text[0] = "All the leaves are brown";
r_text[1] = "And the sky is grey";
r_text[2] = "I've been for a walk";
r_text[3] = "On a winter's day";
r_text[4] = "I'd be safe and warm";
r_text[5] = "If I was in L.A.";
r_text[6] = "California dreaming, On such a winter's day";
Remember, JavaScript arrays are zero indexed (the first element of an array in JavaScript has an index of 0). Our array r_text consists of seven elements. We, thus, need an integer between 0 and 6.

Generating a random number

var i = Math.random();
The variable i now contains a floating point (decimal) number between 0 and 1. We have to convert it to an integer between 0 to 6 so that it can be used as an index to retrieve the string from the r_text array.
i = 7 * i;
i = Math.floor(i);
We multiply the random floating point number (whose value is between 0.0 and 1.0) by 7 so that we get a number (again a floating point) that ranges from 0.0 to 7.0. The Math.floor() is used to round down this number. Thus, 0.345... would result in 0 and 6.893.. would befloored to 6. The above three JavaScript statements can actually be combined into one:
var i = Math.floor(7*Math.random())

Displaying the text

The final step is to display the text through document.write() method.
document.write(r_text[i]);
We now place all this code between <script>-</script> tags.
<script language="JavaScript">
<!--
var r_text = new Array ();
r_text[0] = "All the leaves are brown";
r_text[1] = "And the sky is grey";
r_text[2] = "I've been for a walk";
r_text[3] = "On a winter's day";
r_text[4] = "I'd be safe and warm";
r_text[5] = "If I was in L.A.";
r_text[6] = "California dreaming, On such a winter's day";
var i = Math.floor(7*Math.random())

document.write(r_text[i]);

//-->
</script>
You can also pack all this code in an external JavaScript file that is called from your web page. I would suggest that, unless its absolutely necessary, you should segregate all JavaScript code into an external file. This way you need to maintain only one file.

When can you use this nice tip?

In the past, I have displayed a random quote or a randomly selected a testimonial on the web page. And this is how I go about it. Most of my JavaScript code is placed in an external file (.js) that is called from desired web pages. I put all the testimonials or quotes that I want to display, in an array and then use the code above to have one displayed on the web page. And I can change this array to have a new set of testimonials or quotes, (which involves modifying only one file) and all web page are changed without additional effort.
About the Author Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him, you can visit his site at KyleReddoch.com
12 · 01

Changing the properties of links on a web page

The color of link on a web page is set using the link attribute of the <body> tag. The default color is blue (#0000FF). That is, if you don't supply a color value (or color name) to the link attribute, the browser makes all the links on the web page blue in color. Specifying another value, say green, to the link attribute will turn all links in the document into green color.

Two different colors for links

Only one color can be set through the link attribute. With Style Sheets, you can have links of different colors and styles in the same document. Styles sheets can be applied to documents in three different ways. In this article, I'll cover two ways to embed style information on a web page.

Inline Styles

With inline styles, the style information is placed inside the <a> tag. The style consists of a property:value pair. In this case, the color property makes the link pink (hexadecimal code for pink is #FF00FF). Here is a link to Someplace. In addition to color, style sheets also allow you to set other values for the link such as font size, font face and text decorations.
There are four property:value pairs each is separated from the other by a semi-colon. font-size sets the size to 14 points, text-decoration removes the underlines from the link and font-family specifies the font to be used. Here is another link to Someplace.

Embedded Styles

Inline styles are similar to the <font> tag. Populating a page with these is considered bad programming practice. It's better to include all the style information inside the document HEAD section. The Styles placed in the head are enclosed in the <style>-</style> tags.
<style type="text/css">

a.implink        {color:#FF9900;
                  font-size:12pt;
                  text-decoration:underline;
                  font-family:Verdana, Arial, Sans-serif}
</style>
  • The style has four property:value pairs separated by semicolons.
  • All the property:value pairs are placed inside curly braces.
  • The style information applies to A, which is known as the selector. Furthermore, the selector is given a name, implink, through which it will be called from the class attribute.
A final link to Somewhere.
About the Author Kyle Reddoch is a Web Expert and Internet Guru located in Amarillo, TX. To learn more about him, visit his website at KyleReddoch.com.
12 · 01

Joost - iTunes App of the Week - December 1, 2008

Watch what your friends are watching with Joost. More than 46,000*+ videos – for free. Joost is a new way to watch videos – music, TV, movies and more, over the Internet . With Joost on your iPhone or iTouch you can watch thousands of hours of anime, comedy, drama, movies, music, documentaries, sci-fi and sports. You can choose what to watch in a variety of ways:
  • Browsing by category
  • Select "most popular" videos
  • Watch our favorites
  • Search for a specific video
So if you want to see to your latest favorite music videos, watch your favorite show, catch some anime or get inspired by new interesting documentaries from around the world – it's right here on Joost on your iPhone and iPod touch! Enjoy! To find out more or to enjoy Joost on your computer, please visit www.joost.com.
About the Author Kyle Reddoch is a Web Expert and Internet Guru located in Amarillo, TX. To learn more about him, go to his website at KyleReddoch.com.
Kyle Reddoch

I am an aspiring Web Developer, Android Fanatic, Family Man, and all around Web Geek! I also do Freelance Development work.

About

My Journey through the Interwebs!