Javascript & PHP Testing

This morning I got up about 7.30am. It was grey and raining, although the rain cleared up by about 10am and by 1.30pm the sun even shone through the clouds a bit.

After breakfast I checked my email and opened a parcel which had arrived while I was still in the shower. It was my canon 100mm f/2.8 Macro lens, which I had bought from the Canon outlet shop on ebay. They must have shipped it yesterday with next day delivery, so very quick, I only bought it on Sunday, so was delivered in 1 working day.

The packaging box the lens was delivered in was quite large, much larger than the actual box containing the lens. The lens' box looked a bit mucky with a few black marks and dirty glue marks where stickers had been removed. But the marks on the box certainly don't detract £10 from its value (at least for me they don't). Because it was raining and there's not a lot of urgency, I haven't taken the lens out of its box yet to test it.

I was about to vacuum my floor when I saw a van pulled up outside, so I waited a few secs and then the doorbell rang, it was Clare's christmas present, which again was delivered in a box quite a bit larger than the item. The book's cover was different to the one pictured on the website, and I was suprised to see the RRP on the back of the book, which is a lot. The same book (albeit with the same cover that was on the website, different cover to the one I received) finished on ebay yesterday for more than I paid for it new.

I vacuumed my floor and then did some work with my website. Yesterday I changed it so that the pogsInfo form was written by php as a javascript variable, and then inserted into the page by javascript. Today I changed it so that the majority of the form is written in the external .js file, and javascript writes the form in the same way that php does. The only difference is that the variables used in creating the form are javascript variables rather than php variables.

PHP writes the variables used in making the form to the page as javascript variables, so it looks like this (php):

echo 'var myvariable = \'' . $conn->real_escape_string($myvariable) . '\';';

Then in the external .js file, the form would be put together like this (javascript):

var HTML = '<p>Blah Blah Blah said ' + myvariable + '.</p>\n';
HTML += '<br>';
document.writeln(HTML);

Whereas previously the HTML string was built up directly in the page like this(php):

$html = '<p>Blah Blah Blah said ' . $myvariable . '.</p>
<br>';
echo 'var HTML = \'' . $conn->real_escape_string($html) . '\';

Then the external .js file would just have

document.writeln(HTML);

So my new method of generating the form in an external .js file and just having the variables that vary per page written into the page means that the code written into the page is much less than the previous method of generating the form in the page. But much more code is written in the external .js file. Also line breaks (\n) need to be hard coded in the external .js file and all the php variables need to be escaped seperately, whereas when writing the form in the page line breaks don't need to be hardcoded and you only need to escape the string once, when you've finished writing it.

The purpose of changing my code so the form is created in an external .js file instead of directly in the page is that the .js file only needs to be loaded once, then it is the same for all pages and only the variables change. But when the form is created in the page then the whole form needs to be loaded each time. My logic there is probably wrong, but I wanted to do some speedtests anyway to see which way worked best.

The first thing I did was to google 'javascript speed test' so I could see how you find out how fast a javascript function runs. I found this page that talks about how fast javascript runs on different browsers. Rather obviously, the way you time how fast a function runs is by setting a variable holding the time when you start the function, then when the function has finished running take that time away from the time now.

So I edited my .js file (this is the first javascript loaded on the page) to record the time at the top of the file: var time = new Date();. Then after all the other javascript I added an onload function (most of the js doesn't run until after onload) that alerts the time taken addOnload(function(){alert(new Date() - time);});

I also edited the page to find out how long PHP took, so at the top of the page I had $time = microtime(); and at the bottom of the page echo microtime() - $time;.

When I was looking at wikis yesterday, I downloaded a javascript based wiki. Looking at the (javascript) code I noticed that they had some code structured as

object = {
property: value,
property2: value
};

I'd not seen this sort of code before (or maybe I had but just didn't understand it). It seems to be a nice way of assigning lots of properties (and methods if you want) to an object, and being as you assign them to an object avoids just using lots of vars instead.

So I wrote the javascript variables for creating the form in this format. When I got to the country data, this needed to be stored in an array since there may be multiple country records per page. First I did a quick test to see if you can add properties to an array item, and you can. Next I googled to see if you can make an Associative array in javascript, and you can. Then I googled to see if there was a javascript equivalent of the foreach loop in PHP. It turns out there is, I expect I did learn about it before but never used it and so forgot about it. Anyway, it's a for in loop:

for(myKey in myArray)
{
document.writeln(myArray[myKey])
}

So slightly different to a foreach loop, but the same functionality. I read this page that says you shouldn't use Associative Arrays in javascript, but use an object to hold the array. It was also a useful example in how to create an Associative array and how the for in loop works. So I changed the Array to an object. I now had a javascript object called pogInfoData, which had various properties holding all the variables needed to build the form. One of the properties was another object, which held all the data for the countries as an associative array.

Next, I wanted to unset the variable used in the for.. in loop, the same way I unset the variable after the foreach loop had run in PHP. So I googled, and found out you can use delete varname.

I finished off writing the rest of the form and variables, and then added it as an onload event. I did the same with the version of the page where the form is coded into the page. I did a couple of quick runs of each version, and it seems that php runs about the same speed for both versions, with javascript running much faster for the version where the form is coded into the page. The timings seemed to vary wildly whenever I would reload the page though. I will have to do some proper tests and put the timings in a table and then compare them.

Before I do that though, I will try another version where the form is coded into the correct place in the page (rather than coded as a javascript variable in the page head), but is placed within HTML comment tags so it does not appear. Then I can (hopefully) use javascript to remove the comment tags to make the form appear.

Some other random things I read was about Object Orientated CSS and that you can md5 hash in mysql (Probably better than hashing in php).

I stitched up some tears in the lining of my coat and probably did some other stuff and typed it here, but then Firefox crashed and blogger hadn't saved the stuff I'd typed so I can't remember what it was.

After dinner I watched 16 blocks with Maccy, then checked hotukdeals and dpreview canon lens forum. After that I did some more work on my site and made a version of the page that gets the form from inside some HTML comment tags. I will probably do the speed test comparison tomorrow.

Then I opened my Canon 100mm f/2.8 macro lens. I found that unfortunately the tripod collar ring from the MP-E 65mm f/2.8 macro lens doesn't fit it, and you need a tripod collar adaptor to fit it. After doing some googling and reading I found this useful page that says where you can buy it in the UK and also has a guide to fitting it.

I will probably test the lens tomorrow, although I just found a problem with the camera - it thinks an external flash is attached even when it's not. I think having the heavy MT-24EX flash attached to it for so long must have bent something out of place in the flash shoe, although it looks okay. I'll have to look into that tomorrow as well.

Food
Breakfast: Grapefruit marmalade toast sandwich; cup o' tea.
Lunch: Baby beetroot sandwich; clementine; slice of cherry madeira cake; cup o' tea.
Dinner: Bolognese; pasta twirls; mixed veg. Pudding was a Muller fruit corner. Coffee; Roses.