Web Tutorial: Google Blog HTML/JavaScript Random Quotes Gadget (Part 2/2)

You'll have noticed by now that the gadget title always shows the current day of the week, along with a funky description. That's no coincidence, and we'll be tinkering more with arrays - this time multi-dimensional arrays. We'll also be messing about with the JavaScript date function.

Date functions: (http://www.w3schools.com/js/js_date_methods.asp)
Multi-dimensional arrays: (http://www.quackit.com/javascript/tutorial/two_dimensional_arrays.cfm)

Now what we need to do first, is get the id of your JavaScript gadget div. Right click and view source on your blog's main page, and do a search for the title of your gadget (in my case, it's "RandomQuote").

Screenshot

Found it? OK, in this case, the id is HTML1. Your mileage may vary. We'll need the id for some Document Object Model (DOM) manipulation later. Firstly, we get today's date and retrieve the day from it, like so.

<script>
var quotes=new Array();
quotes[0]="\"In 1969 I gave up women and alcohol. It was the worst 20 minutes of my life.\" - George Best";
quotes[1]="\"Some people believe football is a matter of life and death. I am very disappointed with that attitude. I can assure you it is much, much more important than that.\" - Bill Shankly";
quotes[2]="\"They say 'go with the flow', but you know what else goes with the flow? Dead fish.\" - Roy Keane";
quotes[3]="\"Behind every kick of the ball there has to be a thought.\" - Dennis Bergkamp";
quotes[4]="\"Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.\" - Pele";

document.getElementById("txtQuote").innerHTML=quotes[Math.floor(Math.random() * (quotes.length-1))];

var d = new Date();
var day=d.getDay();
</script> 

Next, we define an array weekdays that stores the names of the days. Sunday starts from 0, all the way to Saturday, which is 7.

<script>
var quotes=new Array();
quotes[0]="\"In 1969 I gave up women and alcohol. It was the worst 20 minutes of my life.\" - George Best";
quotes[1]="\"Some people believe football is a matter of life and death. I am very disappointed with that attitude. I can assure you it is much, much more important than that.\" - Bill Shankly";
quotes[2]="\"They say 'go with the flow', but you know what else goes with the flow? Dead fish.\" - Roy Keane";
quotes[3]="\"Behind every kick of the ball there has to be a thought.\" - Dennis Bergkamp";
quotes[4]="\"Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.\" - Pele";
document.getElementById("txtQuote").innerHTML=quotes[Math.floor(Math.random() * (quotes.length-1))];

var d = new Date();
var day=d.getDay();

var daynames=new Array();
daynames[0]="Sunday";
daynames[1]="Monday";
daynames[2]="Tuesday";
daynames[3]="Wednesday";
daynames[4]="Thursday";
daynames[5]="Friday";
daynames[6]="Saturday";
</script> 

Now, we're going to define another array, descriptors, which has the same number of elements as the array weekdays. But with a difference. It's a multi-dimensional array. Each weekday has different descriptors, right? So do the following (this is just an example, make your own descriptors!).

<script>
var quotes=new Array();
quotes[0]="\"In 1969 I gave up women and alcohol. It was the worst 20 minutes of my life.\" - George Best";
quotes[1]="\"Some people believe football is a matter of life and death. I am very disappointed with that attitude. I can assure you it is much, much more important than that.\" - Bill Shankly";
quotes[2]="\"They say 'go with the flow', but you know what else goes with the flow? Dead fish.\" - Roy Keane";
quotes[3]="\"Behind every kick of the ball there has to be a thought.\" - Dennis Bergkamp";
quotes[4]="\"Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.\" - Pele";

document.getElementById("txtQuote").innerHTML=quotes[Math.floor(Math.random() * (quotes.length-1))];

var d = new Date();
var day=d.getDay();

var daynames=new Array();
daynames[0]="Sunday";
daynames[1]="Monday";
daynames[2]="Tuesday";
daynames[3]="Wednesday";
daynames[4]="Thursday";
daynames[5]="Friday";
daynames[6]="Saturday";

var descriptors=new Array();
descriptors[0]=new Array("Serene","Supreme","Sonorous","Silent","Sleepy");
descriptors[1]=new Array("Manic","Majestic","Monstrous","Mysterious","Magical");
descriptors[2]=new Array("Twitchy","Twisted","Tenacious","Tempestous","Terse");
descriptors[3]=new Array("Wicked","Wonderful","Whimsical","Whirlwind","Wishful");
descriptors[4]=new Array("Terrific","Thunderous","Torrid","Tepid","Tingly");
descriptors[5]=new Array("Fantastic","Friendly","Furious","Freaky","Frenetic");
descriptors[6]=new Array("Sizzling","Salacious","Sinister","Silky","Scintillating");
</script>

You'll see that each element in the descriptors array is also an array, and stores all the different descriptors for that particular weekday. So now you add in this line.

<script>
var quotes=new Array();
quotes[0]="\"In 1969 I gave up women and alcohol. It was the worst 20 minutes of my life.\" - George Best";
quotes[1]="\"Some people believe football is a matter of life and death. I am very disappointed with that attitude. I can assure you it is much, much more important than that.\" - Bill Shankly";
quotes[2]="\"They say 'go with the flow', but you know what else goes with the flow? Dead fish.\" - Roy Keane";
quotes[3]="\"Behind every kick of the ball there has to be a thought.\" - Dennis Bergkamp";
quotes[4]="\"Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.\" - Pele";

document.getElementById("txtQuote").innerHTML=quotes[Math.floor(Math.random() * (quotes.length-1))];

var d = new Date();
var day=d.getDay();

var daynames=new Array();
daynames[0]="Sunday";
daynames[1]="Monday";
daynames[2]="Tuesday";
daynames[3]="Wednesday";
daynames[4]="Thursday";
daynames[5]="Friday";
daynames[6]="Saturday";

var descriptors=new Array();
descriptors[0]=new Array("Serene","Supreme","Sonorous","Silent","Sleepy");
descriptors[1]=new Array("Manic","Majestic","Monstrous","Mysterious","Magical");
descriptors[2]=new Array("Twitchy","Twisted","Tenacious","Tempestous","Terse");
descriptors[3]=new Array("Wicked","Wonderful","Whimsical","Whirlwind","Wishful");
descriptors[4]=new Array("Terrific","Thunderous","Torrid","Tepid","Tingly");
descriptors[5]=new Array("Fantastic","Friendly","Furious","Freaky","Frenetic");
descriptors[6]=new Array("Sizzling","Salacious","Sinister","Silky","Scintillating");

var textdiv=document.getElementById("HTML1");

var replacetext=textdiv.innerHTML;
replacetext=replacetext.replace("RandomQuote",descriptors[day][Math.floor(Math.random() * (descriptors[day].length-1))]+" "+daynames[day]);
textdiv.innerHTML=replacetext;
</script>

This creates a string based on a randomly-selected descriptor descriptors[day][Math.floor(Math.random() * (descriptors[day].length-1))] and pairs it with the weekday daynames[day]. Then the innerHTML value of your entire gadget is extracted (using the id HTML1) and the word RandomQuote is replaced by the entire composite string using the replace() method!

For more on the replace() function, click here. (http://www.w3schools.com/jsref/jsref_replace.asp)

And there you go. Click Save, and you should be set. I know the code's not very friendly to read, but you're a smart chap (well, you are reading this blog, so you definitely have good taste), you'll figure it out eventually. This method is definitely hackish though, so I wouldn't recommend it if you're skittish about possibly breaking something. In fact, extrapolating from what we did, you'll have a good idea of how to deface a website using an XSS attack.

That's it! Hope you had a ball.
T___T