PHP, MySQL, JavaScript, CSS tips and tricks

JavaScript FizzBuzz variations

Matt — Fri, 05 Aug 2011 12:10:04 +0000

FizzBuzz is a famous algorithmic problem used in software development job interviews:

Display a list of numbers from 1 to 100, one per line.
If the number is a multiple of 3, display Fizz instead.
If the number is a multiple of 5, display Buzz instead.
If the number is a multiple of 3 and 5, display FizzBuzz instead.

Here are 4 different JavaScript solutions to the FizzBuzz problem:

The Junior Developer

for( i=1; i<=100; i++) {
   if( (i % 3 == 0) && (i % 5 == 0)) {
      document.write("FizzBuzz");
   } else if(i % 3 == 0) {
      document.write("Fizz");
   } else if(i % 5 == 0) {
      document.write("Buzz");
   } else {
      document.write(i);
   }
   document.write("
");
}

The Experienced Developer

for( var i=1; i<=100; i++) {
   if( i % 15 == 0) {
      str += "FizzBuzz";
   } else if(i % 3 == 0) {
      str += "Fizz";
   } else if (i % 5 == 0) {
      str += "Buzz";
   } else {
      str += i;
   }

   str += "
";
}
document.write(str);

The JavaScript Guru

// Super-optimised version of FizzBuzz
var array = [];
array[3] = array[6] = array[9] = array[12] = "Fizz
";
array[5] = array[10] = "Buzz
";
array[0] = "FizzBuzz
";
var str = "";

for( var i=1; i<=100; ++i) {
   str += array[ i%15 ] || i + "
";
}

window.onload = function() {
   document.body.innerHTML = str;
}

The Senior Developer

// TODO Fix missing 'Buzz' at the end.
// TODO Rewrite using XML
try {
   document.write("1
 2
 Fizz
 4
 Buzz
 Fizz
 7
 8
 Fizz
 Buzz
 11
 Fizz
 13
 14
 FizzBuzz
 16
 17
 Fizz
 19
 Buzz
 Fizz
 22
 23
 Fizz
 Buzz
 26
 Fizz
 28
 29
 FizzBuzz
 31
 32
 Fizz
 34
 Buzz
 Fizz
 37
 38
 Fizz
 Buzz
 41
 Fizz
 43
 44
 FizzBuzz
 46
 47
 Fizz
 49
 Buzz
 Fizz
 52
 53
 Fizz
 Buzz
 56
 Fizz
 58
 59
 FizzBuzz
 61
 62
 Fizz
 64
 Buzz
 Fizz
 67
 68
 Fizz
 Buzz
 71
 Fizz
 73
 74
 FizzBuzz
 76
 77
 Fizz
 79
 Buzz
 Fizz
 82
 83
 Fizz
 Buzz
 86
 Fizz
 88
 89
 FizzBuzz
 91
 92
 Fizz
 94
 Buzz
 Fizz
 97
 98
 Fizz
");
} catch(exception) {
   document.write("Error: browser doesn't support the document.write() method.");
}

Bonus – The CSS Guru

FizzBuzz Ver 2.1

Remove Internet Explorer’s “Compatibility View” button

Matt — Tue, 05 Jul 2011 11:14:50 +0000

Compatibility View?

With Internet Explorer 8, Microsoft introduced the concept of Compatibility View.

If a page does not display properly using the normal standard mode, IE8 can detect it, and automatically switch to compatibility mode.

There is also a button to switch modes manually: It’s a button that looks like a torn up piece of paper, and you will find it in the navigation bar.

Did you know that there was a way to prevent this button from showing on your website?

The X-UA-Compatible header

Internet Explorer 8 added support for a new header called X-UA-Compatible.

This header tells Internet Explorer which engine version should be used to display a page.

If its value is set to IE=egde, this forces Internet Explorer to always use the “standard” mode. When you do this, IE8, IE9 (and possibly future versions of IE) will not display the “Compatibility View” button.

Implementation

In a meta tag

Inside your document , insert the following meta tag:

In PHP

header('X-UA-Compatible: IE=edge');

In .htaccess


   Header set X-UA-Compatible "IE=edge"

More information about the X-UA-Compatible header and its possibilities is available at the Microsoft MSDN Library.

JavaScript – Test if a library failed to load

Matt — Thu, 23 Jun 2011 17:00:31 +0000

A small simple JavaScript block to detect and alert you if an external library fails to load:

try {
   switch( "undefined" ) {
      case typeof $: throw "jQuery";
      case typeof $.ui: throw "jQuery UI";
      case typeof TinyMCE: throw "tinyMCE";
      ...
      case typeof yourFavouriteLibrary: throw "Your favourite library";
   }
} catch( missingLibrary ) {
   alert("Error: failed to load " + missingLibrary);
}

Load Google Analytics script with jQuery

Matt — Tue, 14 Jun 2011 10:12:22 +0000

Idea

If you have ever set up Google Analytics for your website, you are probably familiar with this piece of code:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', '## user account ##']);
_gaq.push(['_trackPageview']);

(function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

If you use jQuery on your site, you can reduce the amount of code required to load the Google Analytics script:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', '## user account ##']);
_gaq.push(['_trackPageview']);

$.getScript("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";

Further reductions

…and if you are using only one Google Analytics account, and do not have SSL installed on your site, you may reduce the size even further:

var _gaq = [["_setAccount", "## user account ##"], ["_trackPageview"]];
$.getScript("http://www.google-analytics.com/ga.js");

Drawback

jQuery getScript() will not work on older browsers (Internet Explorer 5.X, Firefox 1.X, and previous versions). This means these browsers will not show in your Google Analytics reports.

Simulating PHP $_GET in JavaScript (with multiple dimensions)

Matt — Mon, 06 Jun 2011 17:38:05 +0000

Idea

JavaScript does not provide a built-in way to access the variables passed into the URL of a page (the query string).

However it is possible to use the standard window.location object to retrieve these variables and their associated values.

window.location.search contains the query string (and the additional ‘?’ at the start). We can process it and store our results into a multidimensional array, as the following scripts demonstrate:

The script

var $_GET = (function() {
// Split the params part of the URL into "key=value" pairs
   var pairs = window.location.search.slice(1).split("&");
   var params = [];

// Split each pair and store their values into the params array
   for(i in pairs) {
      var splitPairs = pairs[i].split("=");
      var name = unescape(splitPairs[0]);
      var value = unescape(splitPairs[1]);

// Check for valid name
      var match = name.match(/^(\w+)(?:\[\w*\])*$/);
      if( !match ) continue;

      var dimensions = [match[1]];
      var sub = match[0];
      var re = /\[(\w*)\]/g;

      while( match = re.exec(sub) ) {
         var dim = match[1];

         if(dim == "") {
            dim = null;
         } else if( dim == parseInt(dim)) {
            dim = parseInt(dim);
         }

         dimensions.push(dim);
      }

// Build params array with multiple dimensions
      (function(p, d) {

         var s = d.shift()

         if( s === null ) {
            s = -1;

            for(var i in p) {
               if(i > s) {
                   s = i;
               }
            }
            ++s;
         }

         if( d.length ) {
            p[s] = p[s] || [];
            arguments.callee(p[s], d);
         } else {
            p[s] = value;
         }
      })(params, dimensions);
   }
   return params;
})();

This script creates a $_GET array containing variables passed to the page via URL parameters, like in PHP.
It will also work when multi-dimensional variables appear.

Why so complicated?

This script is can deal with the case of multi-dimensional arrays with or without keys.
It also reproduces the behaviour of the array type in PHP.

If a key is not specified for a value, the maximum of the integer indices is taken and the new key will be that value plus 1. If a key that already has an assigned value is specified, that value will be overwritten.

This means if we use the following URL:

http://www.example.com?person[3]=John&person[]=Peter&person[]=Jack

The $_GET variable will be:

PHP	JavaScript
Array ( [person] =>; Array ( [3] => John [4] => Peter [5] => Jack ) )	[ person: [ undefined, undefined, undefined, "John", "Peter", "Jack" ] ]

Usage example

// If the page URL is www.example.com/page.html?user=John%20Smith
// this will display "Hello John Smith"
alert("Hello " + $_GET["user"]);

// If the URL is www.example.com/page.html?user[name]=John&user[surname]=Smith
alert("Hello " + $_GET["user"]["name"] + " " + $_GET["user"]["surname"]);

// If the URL is www.example.com/page.html?user[]=John&user[]=Peter
alert($_GET["user"][0]); // John
alert($_GET["user"][1]); // Peter

XSS injections?

Inevitably… If users can change parameters that affect the content of a page, this opens up the danger of XSS injections.

// www.example.com/page.html?name=John

if($_GET["name"] == "John") {
   doSomething(); // OK
}

document.write($_GET["name"]); // Ouch!

Principles that apply for server-side scripting also apply in this case: Do not display anything that comes directly from the query string. Always sanitise first.

JavaScript does not provide a function to strip HTML tags or replace special characters with their equivalent HTML code, so you will have to write your own if you need to display variables from the query string.