Noob Flash
Digital Creation News & Tutorials

I created this JavaScript image rotator to solve a problem a client of mine was having on their site last week.

The first step is to create an empty div that the images can be loaded into. The easiest way to access a specific div from JavaScript is to make sure the div has an id, and access the div by referencing the div id as such:

var bannerHolder = document.getElementById('bannerHolder');

Once you have created the div and have a way to reference it via JavaScript, you will need to create an array of image urls to loop through.

var bannerArray = new Array();
var currentImage = 0;
bannerArray = ['http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/google.jpg','http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/yahoo.jpg','http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/msn.jpg'];

Tie these pieces of code together using setInterval to create the timed rotation and you have your image rotator. Get the complete code using the link below:

Get Complete Code

If you have ever created an array in ActionScript or any other ECMAScript based programming language, creating an Array in JavaScript will be very familiar to you. On the other hand, if you are an array noob, you are certainly not alone. Arrays are a sticking point for many new programmers, but alas, salvation is neigh! Allow me to walk you through the creation of a simple JavaScript array, that, for the most part, can also be used in ActionScript.

What is an Array?
An array, at its simplest, is really nothing more than a collection of items that is assigned as a variable. When an item is added to the array, it is given a number called an index. The item can then be referenced later by calling the array variable along with the index number of the item you want to access. Clear as mud? Great! Let’s see an example.

How do I Create an Array?
My wife is making tacos tonight, so I will use my hunger as inspiration.

<script type="text/javascript"> var ingredients = new Array(); ingredients = ["Beans","Meat","Cheese"]; alert(ingredients); </script>

Awesome, we just created a delicious array!

1. The first step in creating an array is to declare a variable for it. In this case the variable I want to use is ingredients.
2. The second step is to cast the variable as an Array object. Some people would argue that this step isn’t necessary, and they’re correct, but it is a best practice to type cast your variables as often as possible.
3. The third step is to add items to your array. The easiest way to do that is to set your array variable (in this case ingredients) equal to a bracket enclosed, comma delineated list of items. In my case I added three strings to the ingredients array.
4. The final step isn’t really needed, but is allows you to see what your array looks like at this point. You will see all three comma delineated strings, Beans, Meat, and Cheese in the alert box. This is normal and just means that the array contains all three of those items.

Now, say you’re a meatetarian… How do you only select the one item of the array that you want? It’s actually as easy as grabbing the meat spoon!… so to speak. You just need to call the name of the array variable with the index of the item you want added in brackets (E.g: ingredients[1]).

There is one important thing you should know about indexes in ECMAScript based languages: counting always starts at 0… I don’t know why the rule exists, I just follow it. The first item in your array will always be index 0 (ingredients[0] = Beans in this case), followed by 1, 2, 3 and so on.

<script type="text/javascript"> var ingredients = new Array(); ingredients = ["Beans","Meat","Cheese"]; alert(ingredients[1]); </script>

This should be enough to help you get started working with Arrays. Check back soon for more on Arrays including some Intermediate and Advanced Array techniques.

Follow the example below to perform a find and replace in JavaScript.

<script type="text/javascript">
var myString = "I like coding";
myString = myString.replace('coding','sleeping');
document.write(myString);
</script>

Source: Adobe.com

I have had several people ask me how to get URL QueryString values in JavaScript, so I created a function that will take a string, find the matching QueryString key, and return the value associated with that key. Enjoy!

NOTE: You may have to remove and re-type the “s from the code below if you copy it from this page. Some of them don’t come through correctly when you paste into your dev application.

<script type="text/javascript"> function queryStringValue(findName){ var name = new String(); var value = new String(); var querystring = document.location.href; if(querystring.indexOf("?")==-1){ return "null"; } querystring = querystring.split("?"); querystring = querystring[1].split(”&”); for(q=0;q<querystring.length;q++){ var pair = querystring[q].split("="); name = pair[0].toLowerCase(); value = pair[1].toLowerCase(); if(findName.toLowerCase() == name){ return value; } } } document.write(queryStringValue("noob")); </script>

Let’s pretend the URL of this page is http://www.noobflash.com/foo/index.html?noob=someValue. The code above will find the first QueryString instance of “noob” in the URL and return the “someValue” portion to be used in your code. You would simply type queryStringValue(”stringToFind”) whenever you would like to get new QueryString data.