Javascript

JavaScript debugging with Internet Explorer

Oliver Brown
— This upcoming video may not be available to view yet.

Ever had a problem with JavaScript? If you don’t realise that’s a rhetorical question then go away now…

I had a simple script that worked fine in Firefox and Opera but not in IE. I got the amazingly useful message “Object expected” at line 0, character 0. So after looking around for a bit I found the Microsoft Script Debugger. And it’s actually quite good. Not as convenient as Firefox (since most of my problems are syntax errors) but it solved my problem. And in a way, I can blame Firefox and Opera for the problem. Maybe.

“class” is a reserved word in JScript (IE’s JavaScript engine) but it isn’t in Firefox and Opera. Perhaps it should be. Then perhaps not since contrary to popular belief, JavaScript (or technically ECMAScript) is not an object orientated language (at least not in the traditional sense), it’s a prototype language.

The main difference is a prototype language does not have classes (which is why “class” is not a reserved word in Firefox or IE), objects are given functionality on a per instance basis.

All this is rather academic though. If you need to debug JavaScript in IE for whatever reason, get the debugger. And ignore the link that says there is a newer version available - it’s pointing to Visual Studio .NET 2003.

AJAX problems in IE

Oliver Brown
— This upcoming video may not be available to view yet.

One of the things I’m working on right now (at work interestingly enough) uses a fairly simple JavaScript function that takes a url and an element id and replaces the content of that element with whatever the url returns.

This worked well until I started getting an odd error from IE - Unknown runtime error. Firefox and Opera both handled this fine. After some fiddling I discovered the problem was the type of element I was replacing into - Internet Explorer doesn’t like you replacing the innerHTML of certain elements.

So far I’ve found TR and TBODY don’t work (and I’d guess THEAD and TFOOT too).

An introduction to SALT

Oliver Brown
— This upcoming video may not be available to view yet.

The speech engine that I was talking about in my last article about speech synthesis is an add-in for Internet Explorer. Follow these instructions to install it yourself (you can get Microsoft Speech Application Software Development Kit (SASDK) Version 1.1 now though).

To actually create speech enabled web pages, you need to use SALT. Speech Application Language Tags is now fairly standard and being supported by Microsoft means it is almost guaranteed to survive in some form. SALT is an XML markup so you would generally embed it straight into a HTML (or more usually an XHTML) page.

The first requirement is to add the SALT namespace to your XHTML document: <html xmlns:salt="http://www.saltforum.org/2002/SALT"> This probably isn’t a requirement but you should do it anyway. The next thing you need to do is to load the add-in and tell it what to handle. This is definitely vendor specific and only applies to the add-in for IE: <?import namespace="salt" implementation="#saltobject" /> All the code does is create an object and then tell it what namespace to look for SALT tags in (in this case the “salt” namespace). There is one potential sticking point. The standalone IE add-in is not the same as the one you get if you install the whole SDK so for debugging purposes so the classid will be different.

After that it’s just a matter of adding the SALT tags for handling the speech. In this article I’ll just deal with the simplest one, prompts. A prompt is just a piece of speech. Just write your speech inside a <salt:prompt> tag: <salt:prompt id="InstructionsPrompt"> Hello. Thank you for using this salt demo. </salt:prompt> The id can be anything you want as it is only used to uniquely identify the prompt.

We now have to get around the semantic separation of form and function: this simply defines a prompt and doesn’t actually do anything with it. To actually make it do something we have to use JavaScript. Prompt objects all have a Start() function accessible from JavaScript so to make it play, just call InstructionsPrompt.Start(). Although it’s not an ideal solution for testing purposes just attach it to the onload event of the body tag. You can see (and hear) the whole SALT demo.

A final note about voices. Windows XP comes with a good voice called Microsoft Mike, but this may not be the default. Some of the others sound really bad. To set Mike as the default: Start -> Control Panel -> Speech -> Text-to-speech Windows Vista will come with new voices (the ones made from sampled sounds I talked about before), one of which is called Anna.

AJAXy Scriptaculous goodness

Oliver Brown
— This upcoming video may not be available to view yet.

Scriptaculous is a Javascript library used for doing AJAX stuff and certain visual effects.

It’s very well written, has excellent cross browser support and best of all there are cool functions in Ruby on Rails for using it. One of the coolest features is drag and drop. I’ve already implemented it in Galaxia Ruby for adding ships to fleets :)

I have an interview

Oliver Brown
— This upcoming video may not be available to view yet.

Woohoo, I have an interview.

Before they offered me a face-to-face interview they wanted to do a telephone interview first. This consisted of a series of technical questions I really wasn’t prepared for (“What’s the difference between an inner join and an outer join in SQL?”, “What are the restrictions on cookies?”, “What do the HTTP status codes 302 and 303 mean?”).

But since they offered me the interview I guess I did quite well :)

(On an unrelated note, “Woohoo” is not in the Google spellchecker database but “Whoop” is….)

jobs, interviews, web developer, PHP developer

DOM foolery

Oliver Brown
— This upcoming video may not be available to view yet.

Since I’ve been making random DOM and JavaScript posts recently I thought I’d share a clever bog post I found cleverly called DOM-foolery. It describes a relatively simple way to make images in web pages have curved corners.

How about Cash City Wars

Oliver Brown
— This upcoming video may not be available to view yet.

That’s the name I’ve come up with for the game since it’s vaguley based on Cash Wars. Or at least will be. I’ve started adding descriptions to towns. There are a few issues still though, most notably the existence of multiple towns with the same name which I am eliminating (I’m only intending to have the largest 100 towns).

Cash City Wars

Reading style info with JavaScript

Oliver Brown
— This upcoming video may not be available to view yet.

Part of the online game I’m now developing (which needs a name - I was thinking of “Cash City Wars”) requires some Javascript that alters the style of a DIV and then puts it back as it was. Changing the style is easy. For example to make the text green:

// Some code to get the DIV object and  store it in obj.

obj.style.color = "green";

Storing the old style information is a little difficult. I tried:

obj.oStyle = obj.style;
obj.style.color = "green";

But that didn’t work for two reasons: firstly objects are passed by reference so oStyle always contained the same thing as style. And secondly style (when used for reading) only contains explicitly set properties. So if you set width and left you’d still have to work out right yourself.

I found out there is another property you can use, getComputedStyle. This has it’s own little quirks however. Firstly it isn’t an method of the object, but used more like a function and secondly it doesn’t seem to work in IE6.

Firefox (W3 DOM):

temp = document.defaultView.getComputedStyle(obj, "");
temp.getPropertyValue(prop);

IE6

obj.currentStyle[prop];

I personally think the IE way makes more sense in this case but we have to cope wtih both. One thing that is slightly awkward is that one is a function the other is an array. So to make a simple to use interface to the correct function, we can use Javascript’s ability to use functions as first class objects (which means you can assign them to variables):

if (document.defaultView) {
    var cStyle = function(obj, prop) {
        var temp = document.defaultView.getComputedStyle(obj, "");
        return temp.getPropertyValue(prop);
    }
} else if (document.body.currentStyle) {
    var cStyle = function(obj, prop) {
        return obj.currentStyle[prop];
    }
}

You can now call cStyle like a normal function to get the computed value of any style property of any object.

Demo of GIS thing

Oliver Brown
— This upcoming video may not be available to view yet.

Here’s a work in progress version of the online game based on real geography idea I had. Demo.

Target denied

Oliver Brown
— This upcoming video may not be available to view yet.

I found something out today that really caught me by surprise. It makes sense in theory but in practice I think it’s a bad idea. Not doing it would just be a slight niggle on purists.

The target attribute of a tags is no longer allowed in HTML (HTML 4.01 Strict and XHTML 1.0 Strict). This is technically correct since HTML is for marking structure of a document and opening things in different windows is a user-interface issue and hence is within the domain of javascript. What’s really odd though is the suggested workaround. Mark tags that need to open in a different frame or window somehow (rel="external" for instance) and then use a javascript function to give all those links a target attribute. Seems silly to me.