next »

[TaylorFlatt]

When I was first starting to learn Javascript, there is one thing that stuck out at me from the very start.  That was that there weren’t many array tutorials or really examples for that matter.  In this short tutorial, I will provide the exact code you will need to make your own Random Link generator with a few options.  Furthermore, there are many ways to go about doing what I am about to show you, but I’m picking the easiest and simplest way I know of.  To begin with, there is the Link Generator with Title, URL and Description.


Array Displaying a Title, URL and Description

Code: (javascript) [Select]

Now that code will have a (random) generated output like this:

    URL

    Description

    Title of URL

Although that does not look too impressive, it is random and it is generated by the script above.  Of course you can tweak it and add characteristics such as bold and italics where you want, but we will be discussing some tweaking that can be done to this array.

Array Displaying a URL and Description

Like in the first example, we will be using the same code.  Although this time we will be changing only 1 things.

Code: (javascript) [Select]

The first thing I did, was remove the;
Code:

Code: (javascript) [Select]

titles[RandomMath]+"
"+

before description.  Doing this removes the variable Titles from the “equation” and leaves only the description.  That’s it!  Now you have only a description and a URL with your array.

If you want to Have a title then the URL, just replace Description with Title to display just the title.  Although, you would have to put the title attributes back into the mix.
Array Displaying a URL

If you are looking to just display a generated list of URLs with just the URL, then by simply changing a few things around from the original code is the way to go.  The output would be something like this, I will explain what it means later;

Code: (javascript) [Select]

Now, when you look at the code, you will see only a few things changed.  Here is the synopsis,

Before:

Code: (javascript) [Select]

After:

Code: (javascript) [Select]

Just by looking at the above script, you will notice that I have removed the description and titles variables and instead replaced the first line with the URL code.  For the beginning line, you need the

Code: (javascript) [Select]

var cont=

or your link(s) won’t display.  Also, you will notice that instead of;

Code: (javascript) [Select]

cont+=urls[RandomMath]+”
”

I have this code;

Code: (javascript) [Select]

cont+=titles[RandomMath]+”
”

This is like any HTML code.  If you look at the line before, you  will see there is a linking attribute, and by replacing URL with TITLE, we have provided a decent and custom anchor to the link rather than the actual link itself.

So by just messing with different attributes of the code, we were able to make 4 different scripts.  Although there are many more that can be molded from this, these are probably the more common ones.

Some things to remember

Although this may seem like easy stuff, it is complicated until you are used to using it.

    * Remember to change the var randomlinks=5 to the amount of links in your array.
    * If you want to change any of the variable names, don’t forget to change all the text using that variable.
    * If you want to actually display a Random URL, I’d advise not removing [RandomMath]
    * Try to comment as often as possible.  Who knows, you might be viewing this months from now wishing you had.

Using PHP to make a PHP Link Generator

This is probably the easiest of all of these.  Although it does have a bad side to it.  It is a little more complicated in the aspect that it is PHP and PHP is a touch harder to learn than Javascript.  To begin with, lets go through some terminology that we will be running across in this example.

    * $links is basically the “Master” array of all the arrays under it. (In this case)
    * Key is the position of the Array
    * printf is, you guessed it, the print function

Now for the code that you will be basing your arrays off of;

Code: (php) [Select]

// "Random" Links
// $links = "Master" Array
$links = array(
array('url'=>'http://www.autogaming.net', 'label'=>'AutoGaming'),
array('url'=>'http://www.interchange-designs.com/blog.php', 'label'=>'SEO Blog'),
array('url'=>'http://www.interchange-designs.com', 'label'=>'Interchange-Designs'),
array('url'=>'http://www.google.com/', 'label'=>'Google'),
array('url'=>'http://www.linksmetro.com', 'label'=>'Links Metro'),

);

// Pick 3 links from above.
// Key = Position of Link Array
$random_keys = array_rand($links, 3);

// Print Values
foreach ($random_keys as $key) {
printf("%s
", $links[$key]['url'], $links[$key]['label']);
}
?>

If you look at the comments I made along with the Array, you will notice that it is almost self explanatory.  To begin with, you have the

Code: (php) [Select]

$links = array(

which begins your array sequence and then the template of the arrays

 

Code: (php) [Select]

array(’url’=>’LINK’, ‘label’=>’TITLE’),

Then you come to

Code: (php) [Select]

$random_keys = array_rand($links,3)

.  This is just saying it is picking 3 random keys.  Then those two last statements are taking those picked arrays and printing them onto the page by the link.

If you are looking to customize this and add more arrays and more links shown, you can simply increase the number within the $random_keys attribute and it will pick more arrays from your list.

If you wish to view our setup, just view our source on this page and you will get a complete view of all the sites that are being looked at and then you will see the code setup.

This was probably the easiest one of them all with less code and less work, but a little more high-tech.

If you think I have missed something important that needs added, leave a comment and I will be sure to add it.

Source: Interchange-Designs