With some String functions, you can create your own function to parse a query string attached to the request url and store it in an associative array – just like PHP would for you.

What Are Query Strings For

If you’re developing anything more than a basic informative page, you’ll need to pass information from one page to the next. You might want to pass a search query, some form values, the answer to a quiz question, or any number of other things. Passing this information is the first step in converting your page from a static bit of information into a dynamic application.

One way to pass information between pages is to use a query string. That’s the long line of text after the ‘?’ in a URL. Kind of like this.

http://www.google.com/search?hl=en&q=widgets&btnG=Google+Search

That’s a standard query string attached to a Google search. It sends a few values to the new page – hl (en), q (widgets), and btn (Google Search). These values are then used to determine what is displayed on the new page.

In PHP, these values are automatically stored in an associative array – the $_GET array. To make these values easily available to our Javascript code, we can write a function to do the same thing.

The Structure of a Query String

In order to break a query string down, we need to understand the rules for building one.

A query string always starts with ‘?’. This separates the query string from the actual URL.

This is followed by key-value pairs, like “key=value”. If there is more than one key-value pair, they are separated by an ampersand – “key1=value1&key2=value2″.

Finally, these values are url_encoded. Special characters – like spaces, ampersands, and equal signs – are converted to code so that they don’t interfere with the URL or the query string.

Step One: Get the Request String and Separate the Query

The first thing we need to do is get the entire request string and separate out just the query string.

//  Fetch the entire request string
var href = new String(window.location.href);
var hrefParts = href.split('?');
 
//  [0] is the URL, [1] is the query string
var query = new String(hrefParts[1]);

The request string is accessible through the window.location object. We use the split method of the string class to explode it at the ‘?’. This leaves us with two parts, and we save the entire query string in the variable query.

Step Two: Get the Key Value Pairs

At this point, our query string in the variable query might look something like this:

hl=en&q=widgets&btnG=Google+Search

To get the key-value pairs, we can use another split() call. This time, we split the string at each ampersand (&). The resulting array will contain the strings “hl=en”, “q=widgets”, and “btnG=Google+Search”.

var valuePairs = query.split('&');

Step Three: Loop Through and Create an Array

Now we can loop through the array valuePairs, split each pair, and create a new array where each value is indexed by its key. This gives us a nicely indexed array just like PHP would.

var getArray = new Array();
 
for each (var pair in valuePairs) {
  // [0] = key, [1] = value
  var tempPair = pair.split('=');
 
  // Unescape converts the text back from URL encoding
  getArray[tempPair[0]] = unescape(tempPair[1]);
}

At this point, getArray[] should hold all of the values in our query string.

Why Bother?

Good question. If PHP (and other server side scripts) automatically parse query strings, why should we bother using Javascript for it?

One reason may be to use query strings to pass information on pages that don’t have any server side scripting enabled. I was looking into a web design competition for high school students, and it doesn’t allow any server-side scripts – only HTML, CSS, and Javascript.

With this method, we could use query strings to bring a little dynamism to the party.

This is also helpful for reading query strings in general – not just the one in the request string. For example, if you use Ajax to get a value from a php script, how is the output formatted?

It may be plain text if it’s just one variable, or it may be in an XML format. If the output is just a handful of key-value pairs, it might be easier and more efficient to create a query string and parse it with this function.

Or… maybe it’s just fun to say “I can do this.” That’s a good enough reason for me.

And as usual, here’s the full function, in case you had some trouble.

function parseQueryString(fullHref) {
  var hrefParts = fullHref.split('?');
 
  //  [0] is the URL, [1] is the query string
  var query = new String(hrefParts[1]);
 
  var valuePairs = query.split('&');
  var getArray = new Array();
 
  for each (var pair in valuePairs) {
    // [0] = key, [1] = value
    var tempPair = pair.split('=');
 
    // Unescape converts the text back from URL encoding
    getArray[tempPair[0]] = unescape(tempPair[1]);
  }
  return getArray;
}
 
//  To use it, pass the request string or another href
//  to the function.  It returns the array.
var href = new String(window.location.href);
var getArray = parseQueryString(href);

The solution, it turns out, is very simple.

Why Randomize Ads?

There are a few reasons you might want to do this.

If you’re looking into changing the theme of your AdSense ad, you may want to test the two themes against each other. By giving each theme approximately 50% of the impressions for a given time period, you can make some direct comparisons between their performance.

Or maybe you and a friend both run a website, so you want to split the advertising time between two AdSense publisher ids. That can be done too.

How the AdSense Code Works

Before we randomize it, let’s take a look at how the AdSense code works.

Here’s the snippet of code that creates the skyscraper on the left side of this page.

<script type="text/javascript"><!--
google_ad_client = "pub-2399151883698113";
/* Web Cash Tall Skyscraper */
google_ad_slot = "8702750734";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You’ll notice two major pieces to this code. The first piece – in the first <script> element – defines the ad unit’s properties. It sets google_ad_client (your publisher id), google_ad_slot (the saved ad unit’s id with color info), google_ad_width, and google_ad_height.

The second section – the script element with src “show_ads.js” – actually displays the ad based on the variables that were set previously.

In order to vary the type of ad shown, we need to come up with a conditional statement to vary the google_ad_client/slot/width/height settings.

The Javascript Code…

And here’s the moment you’ve all been waiting for – the Javascript code to randomize which ad is shown.

<script type="text/javascript">
<!--
if (Math.random() > 0.5) {
  google_ad_client = "pub-2399151883698113";
  google_ad_slot = "5396010225";
  google_ad_width = 250;
  google_ad_height = 250;
} else {
  google_ad_client = "pub-2399151883698113";
  google_ad_slot = "3900536874";
  google_ad_width = 250;
  google_ad_height = 250;
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You’ll notice that there’s an if/else statement, and each branch of the conditional statement defines a different ad to display. The results of that conditional statement rely on the outcome of Math.random().

Previously, we built a function to get a useful random number out of Math.random(). This is actually a situation where we can use the value from Math.random() just the way it is.

Math.random() generates a random value between 0 and 1. In other words, it gives you a probability. By checking that Math.random() is greater than 0.5, the statement should evaluate to true approximately 50% of the time.

We could also make the rotation more lop-sided. For example (Math.random() > 0.70) would be true 30% of the time. Therefore the first ad would be displayed 30% of the time, while the second ad would be displayed 70% of the time.

I hope you weren’t looking for something more complicated because, well, it isn’t. It’s just that simple.

At the suggestion of a reader (thanks Justin), I decided to go ahead and turn the general formula for this into a short helper function to generate a random number.

Random Numbers: General Formula

First, let’s take a minute and recap the general formula for finding a random number.

Javascript’s Math.random() method returns a random number between 0 and 1. By multiplying this decimal value by a whole number, we can generate a desired range of values. For example, by multiplying Math.random()’s result by 10, we get a range of 0 to 10.

Next, we take the Math.floor value of that random number. This gives us just the integer portion – and it effectively cuts our range to 0 through 9. Finally, we can modify this by adding an offset number. So if we wanted a random number between 51 and 60, we’d add 51 to that result.

Creating a Random Number Function

The basic formula we end up with is…

(Math.floor( Math.rand() * setSize)) + setOffset;

Our code would be much more readable if we had a helper function that could be called like this…

randomNumber = rand(min, max);

Our function is going to take two parameters – min and max. From these two parameters, we can calculate the offset and the set size and generate the proper random number.

function rand(min, max) {
  var offset = min;
  var range = (max - min) + 1;
 
  var randomNumber = Math.floor( Math.random() * range) + offset;
  return randomNumber;
}

All done.

Add that function to a utility file, and you’ve got a handy random number generator at your disposal. It even uses the same format as PHP’s rand() function, to help increase consistency and readability in your code.

While I was working on various game-related scripts this weekend, I was left wondering how to create a random number in Javascript. It’s not quite as simple as the rand() function – we’ll have to go back to the old C-style random number generation.

The Math Object and Random Numbers

Javascript comes with a built-in random number generator as part of the Math object. This Math object does a number of calculations – trig functions (sine, cosine, and tangent), rounding, logarithms, exponents, etc.

To use the Math class to generate a random number, you begin with the random method.

Math.random();

This method returns a random value – between 0 and 1.

How Can I Make a Useful Random Number?

If you’ve ever programmed in C/C++, you’ll know what to do. If you’re used to working with something like PHP – which comes with an intelligent built-in random number generator – you may be left in the dark.

How can you take a random decimal – between 0 and 1 – and turn it into a random number between, say, 1 and 100?

The answer is simple – math. You need to multiply the random() result to get a certain sized range and then use addition to start the range at the right number.

Let’s say you multiply the result of Math.random() by 10.

Math.random() * 10

Since the results of Math.random() are between 0 and 1, the results of this statement will be 0 to 10. The minimum result is (0 * 10 = 0) and the highest result is (1 * 10 = 10).

If you were to only look at the whole number part of the result, you would get a range of 0 to 9. In actuality, the result of Math.random() is never 0 or 1, so the above statement won’t give you a result of 10.

Therefore we can use the whole number portion of the result to get a random integer – 0 to 9.

How Do We Get a Whole Number?

Simple. Use the floor method of the Math class. Math.floor returns the whole number portion of a float/decimal.

Math.floor(1.45); //  Result is 1

Simply pass a float/decimal to the Math.floor method, and it will return the integer portion of that number. If you’re working with negative numbers, it will always round down. Keep that in mind. For positive numbers, it’s simply a truncation function.

To get a random integer, we simply pass the result of Math.rand() to Math.floor().

Math.floor( Math.rand() );

What If My Random Set Doesn’t Start at 0?

Here’s the last piece of the random puzzle.

You can determine the size of your random number set with multiplication. The coefficient you use (like we used 10 before) determines the range your random number can be in.

Math.floor( Math.rand() * 10); // 10 Numbers, 0-9
Math.floor( Math.rand() * 5); // 5 Numbers, 0-4
Math.floor( Math.rand() * 100); // 100 Numbers, 0-99

If the set you want to create a random number from doesn’t start with 0, you simply use addition to get what you want.

Let’s say you want a random number from 101-150. Your set contains 50 numbers, and it starts with 101.

(Math.floor( Math.rand() * 50)) + 101; // 101 - 150

The basic statement – Math.floor( Math.rand() * 50) – returns a value between 0 and 49. We want to offset that by 101 places and we’ll have our desired random set – 101 to 150.

At this point, you should have a general equation you can use for generating random numbers from any given set. Take Math.rand(), apply a coefficient to determine the size of the random number set, and then use addition to offset that number to your desired starting point.

(Math.floor( Math.rand() * setSize)) + setOffset;

Now go find something useful to use these random numbers for.

One of the Frihost users and his friend made a 3d Worm game. Although the directions are in Spanish (as is the source code), the game is pretty cool. It’s a good example of what you can accomplish with some Javascript/DOM trickery.

Playing the game is simple enough. You use the four arrow keys and the Q/A key to pick one of six directions to go in.

At first, it can be very difficult to gauge the “3d” position of the apple. Once you learn to use the shadows to your advantage, the game becomes pretty easy. It’s still fun, though, and a great example of how Javascript can be used to make an interface for a game.

You see a few cool things here.

For one, the script captures keyboard input to drive the action. Rather than clicking on buttons/boxes on the screen, the user can hit the appropriate keys and the game responds. This is important for making a game feel “real” and not a kind of mash-up.

A lot of the positioning is done with “position: absolute” and the “top”/”left” styles. This let’s you use the screen as a kind of canvas – drawing the images where-ever you need them. It frees you from the constraints of normal HTML positioning, where you need to float/margin/padding stuff to get it to line up where you want.

It’s possible to read source code written in another language. I just find this interesting. The source is written in Spanish – so most of the variable/function names don’t mean a lot to me. However, the code is pretty straightforward so it’s still easy enough to follow what’s going on.

Well go play some Worm. This has inspired me to go do some coding.

The concept seemed simple enough, but I ran into a problem – I didn’t know how to do string replacement in Javascript. The first thing I thought was, “What is the Javascript equivalent to str_replace?”

The JS str_replace – String.replace()

As it turns out, the closest thing in Javascript to str_replace is the replace method of the String class. It’s actually more akin to preg_replace – since it uses regular expressions – but it’s the closest thing I could find for a built-in string replacement function.

It’s implementation is pretty simple. Create a new string object. Then call the replace method with two parameters – a regular expression to match and a string to replace it with.

var hello = new String('Hello World!');
var goodbye = hello.replace(/hello/i, 'Goodbye');

In this example, we do a simple search for the word ‘hello’ (the ‘i’ signifies that the search is case insensitive). When we find ‘hello,’ we replace it with goodbye.

Using Variable Values Inside Regex

That’s simple enough. However, what if you don’t want to hard-code the regular expression?

I was left wondering how I could use a variables value within the regular expression for the search. If I placed the variable inside the / / boundaries of the regex, it would simply search for the name of the variable.

I eventually stumbled across the RegExp class – which incidentally makes it easier to build a regex expression. You create an instance of the RegExp class by passing it two parameters – the string to match and any modifiers (‘i’ or ‘g’) that should be used for the search.

var hello = new String('Hello World!');
var matchWord = new String('hello');
var match = new RegExp(matchWord, 'i');
 
var goodbye = hello.replace(match, 'Goodbye');

This has the same effect as the last example – except now the string to match comes from the variable matchWord. With this, you could use some type of user input to determine what to match and replace.

Recap – Replacing Strings in Javascript

To recap…

• There is no direct equivalent to str_replace in Javascript.
• Use String.replace – which is very similar to preg_replace.
• Two parameters – a regex to match and a string to replace it with.
• Build an instance of the RegExp class to use variable values in your regex.
]]> http://www.earn-web-cash.com/2008/02/22/javascript-str-replace/feed/ 2 http://www.earn-web-cash.com/online-tools-design/text-cleaner-form/ http://www.earn-web-cash.com/online-tools-design/text-cleaner-form/#comments Fri, 22 Feb 2008 19:12:43 +0000 Walkere http://www.earn-web-cash.com/online-tools-design/text-cleaner-form/ Do you have a bunch of old articles stored on your computer with hard linebreaks?

These newline characters make it a real pain to upload your articles to your own site through a CMS or to article submission directories. They want free-flowing text that gets broken up automatically by the browser.

If you need to get rid of these newline characters, use the Text Cleaner form below. It works very simply.

Copy and paste your article with newline characters into the top textarea box. Click the button. Copy and paste the cleaned text out of the lower box.

Note: The text cleaner preserves a sequence of “\n\n.” It is assumed that these double newline characters are paragraph breaks, and removing them would make the article illegible.

---

Text Cleaner Tool: Remove Newline Characters

Enter the text to clean here.


The cleaned text will appear here.



]]> http://www.earn-web-cash.com/online-tools-design/text-cleaner-form/feed/ 14 http://www.earn-web-cash.com/2008/02/19/resources-js-ajax-dom/ http://www.earn-web-cash.com/2008/02/19/resources-js-ajax-dom/#comments Tue, 19 Feb 2008 23:00:50 +0000 Walkere http://www.earn-web-cash.com/2008/02/19/resources-js-ajax-dom/ Over the weekend, I decided it was finally time to learn how to use JS and AJAX. I’d deliberately avoided using JS for anything I could accomplish in PHP – but I admit that I was getting a bit intrigued by the AJAX hooplah.

I found some very useful resources for dealing with JS, AJAX, and DOM, so I thought I’d share them for any other eager learners.


Getting Started with AJAX

The first place I stopped in my quest for knowledge was the Mastering Ajax series of articles at IBM’s Developer Works.

I read through the first half of the series. Articles 1, 2, and 3 give a pretty good overview of how to create and use an AJAX request. The later articles introduce the DOM and provide a good overview of how to work with the AJAX response and edit the existing web page.

After reading the first two articles, I was able to re-craft the examples and create some basic AJAX-driven forms of my own. It wasn’t anything exciting – but the concept was easy enough to master.

Although you can get by without ever working directly with the AJAX request object, I agree with the author of this series of articles. It’s best to learn to do something the hard way first – then you can take shortcuts.

AJAX the Easy Way – Prototype.js

Later in the weekend, I set about creating my first real AJAX application. My Digg WordPress Plugin uses AJAX to check the Digg API for info on an article after the page has loaded.

I tried to rework the code that I’d built with the Developer Works tutorial, but I ran into a problem when I had to make more than one request. I knew I had to make extra instances of the HttpRequest object, but I was having trouble getting the code to execute the way I wanted it to. Admittedly I’m a JS newbie – the first Javascript I ever wrote was the code from the first AJAX tutorial.

I found a great solution though – prototype.js. This is a javascript/ajax framework that makes it much simpler to work with the base AJAX class.

This made it much easier to create multiple instances of an AJAX request class and have them simultaneously fire off and handle requests. It also handles some of the browser compatibility issues. I like to do things on my own, but I’m pretty sure I’ll be using prototype.js from now on for any AJAX projects I work on.

DOM: Document Object Model Resources

Once I got a hang of sending and processing requests with AJAX, I had to turn to DOM to edit the page. After reading through the Developer Works tutorial and fiddling a bit on my own, I found this surprisingly easy.

If you’ve got an understanding of OOP and XML, the DOM should be pretty straightforward for you. However, there are a decent amount of methods/properties you’ll run into. I found two great references that I’ll be using for a while until I get more familiar with the DOM methods/properties.

howtocreate.co.uk has a compact list of pertinent methods and properties. It’s not explained very well, but it’s good for looking up a method quickly. By contrast, Javascript Kit has a thorough reference of methods and properties with explanations. It’s a bit more verbose, but a better choice if you haven’t got a clue how a method works.

Working with JS, AJAX, and DOM is pretty simple – especially if you already know a scripting language like PHP. So don’t wait any longer – go out and add to your repertoire.

]]> http://www.earn-web-cash.com/2008/02/19/resources-js-ajax-dom/feed/ 4