Beware JavaScript Math

I am getting heavy into my latest JavaScript project. I am writing a rogue-like game for the web browser. The dungeon is a two dimensional representation. Therefore I am using 2D arrays. That's fine, because JavaScript natively supports them. I am drawing all kinds of ASCII art for the layout of the maze for the dungeon.

For some shapes, I need to do some math to come up with the coordinates. This is nothing fancy. I just iterate through some loops, and do some computations such as add/subtract/multiply/divide. In the middle of development, I found the browser complaining about my computations. What was up?

Some debugging showed me that although my operands were whole numbers, they got converted to a fractional output when I divided. Then I would use the result as an index into an array. That did not turn out too well. Turns out I had to do truncation of the decimal portion using the Math.ceil() function.

There was one other HTML gotcha I encountered late last night. I am using a proportional font to make sure all the cells of the dungeon lined up. However I was having some trouble with the spaces. I thought I would be saved by the proportional font. However I had forgot that the browser ignores the whitespace, trimming batches of spaces down to a single space. I needed to add the non-breaking space entity in there to preserve the spaces.

JavaScript Arrays

I am taking a week off from work to do some training. This will be an independent study. Time to put my JavaScript studies to work on a real project. I needed to represent the floor space of a dungeon. Easy enough. I would just roll out a two dimensional array. I am sure I had done this before. So I kicked out some JavaScript code:

var my_2D_Array = new Array(Array());

Slick right? I got an array of arrays. In other words, I should have a two dimensional array. Wrong. When I tried to run my code, it bombed when trying to access elements in this array. What was up? It took a while to figure it out. I should have just made sure I fully understand two dimensional array.

The outer array will be the container for the rows in my array. I need 25 rows total. Therefore I need to add two items to that outer list. In my code, I was only added one item to the list. Thus I was only getting one row. I needed to add 25 different arrays to my outer array. I did this with a loop. Then I was good to go.

Since the out array contains the rows, I need to use the vertival y value to index into the outer arrray. Some my code will look like this:

my_2D_Array[y][x] = 'x';

Yeah. That looks a bit weird. Don't you usually access 2D arrays like arr[x][y]? Well not in JavaScript. I also had a little trouble getting my fonts to appear monospaced. But that is a story for a future blog post.

Validation

I am taking a semester long college course on XML. This week we covered Document Type Definitions. I wrote up a DTD for my XML file. Now I was tasked with validating the XML file against it. The browsers did not seem to provide any help. The teacher said we should grab a free copy o XML Spy and get to work.

I tried for a while. All I could find was a 30-day evaluation copy of XML Spy. It seems they used to offer a free scaled down version of the software. I can't find it any more. It was called XML Spy Home Edition 2006, or something of the sort. Altova really wants me to buy a copy of their software.

The problem is that XML Spy costs either $1000 or $500, depending on whether you opt for the enterprise or professional version. I need something more like a lite version. Better yet, I could go for an educational version. No such thing seems to exist. So I checked out the free alternatives. A student has to eat. And you can't eat if you spend a grand on XML validation software.

First up we have XML Copy Editor. This program is released free of charge under the GNU IGPL license. When you first bring up the program, it looks to have a very minimal interface. It almost feels like something you might role out yourself. Next I tried XMLPad. The thing wanted to reboot my computer on install. That was strange. I decided not too, but then the program displayed weird error messages. It has a better user interface than XML Copy Editor.

I have to say that XML Spy seems to have the most intuitive messages when something goes wrong with validation. I also like that it automatically detects when the file you have open gets changed on the disk. You get prompted to reload the file. Not ready to shell out 500 clams for the thing. I don't even know if it is worth having my company buy a copy for me.

Maybe the hard core thing would be to develop a version for myself. That will take a massive amount of time and effort. However the benefit would be that I would be close to an XML expert when I was done.

XMLHttpRequest Access Denied

I am trying to learn a little bit of AJAX. The first exerise in my textbook tells me to read a local file and display it. Sounds easy. I set up some code to create an XMLHttpRequest. Creation works okay. Then I try to call the open() method and specify the local file I want to read. Bamm. Internet Explorer says that the access is denied.

I am running Internet Explorer 8. That is the version installed on my computer. First I try changing the security in Internet Explorer. No luck. then I try using XDomainRequest object instead of XMLHttpRequest. Also no luck. This is frustrating because this is supposed to be the easiest exercise.

When I get into situations like this, I try some other browsers. Chrome was no good. But Firefox magically worked using XMLHttpRequest. This really should not be that hard. Isn't AJAX one of those common things that everyone on the web uses? I guess I should try back again with IE when I upgrade to something like IE version 10.

DOM Inspector

Right now I am reading up on how to manage the DOM using JavaScript. My textbook referred me to a site where I can get a DOM Inspector. That is a tool which shows my HTML in a DOM-like graphic tree. I was expecting something free. However the textbook steered me to a commercial site.

I downloaded a product called IE WebDeveloper. It was previously called the IE DOM Inspector. They have a free 15 day trial period. I am glad I did the trial first. The thing does integrate with Internet Explorer. You see the tree in a toolbar that takes up the bottom half of the browser screen. However I was disappointed with the tree layout. I did not see nodes for my text.

Turns out Internet Explorer version 8 has a built-in DOM Explorer of sorts. You can access it by choosing the Developer Tools submenu under the Tools menu. This brings up a separate window with a better tree that represents the DOM tree I was expecting from the book.

Time to uninstall the IE WebDeveloper trial software. The thing costs $119 for a license. I think I will stick with IE Developer Tools. That's too bad because I liked the integrated interface.

Image Maps

I was finishing up a chapter in my textbook about images. Last example problem in the back of the chapter had us dealing with a image of the solar system. Each planet was to be clickable, generating a pop-up with some words about the planet clicked. I got a nice image of the solar system. Now I needed to come up with the coordinates for the planet areas. What is a developer to do?

The book mentioned some free software that would do the dirty work of coordinate mapping for me. I went to Image Maps. Uploaded my picture to their web site. Then it was time to get down to business. I had to define eight areas (we now only have eight planets in the solar system). I was a little disturbed when a warning came up that stated, "IE 7 will give a stack overflow error after 13 or 14 rectangle maps." I use Internet Explorer. Luckily I only had 8 areas to create.

I clicked a button and had the HTML generated for me. It was quite painless. Seems like the site is implemented using PHP. They ask for donations, links, or blog entries about them. Being a poor developer, I chose the latter. Thanks Image Maps.

Jetstrap

I recently heard about Jetstap while browsing links from Hacker News. Watched a video demo. This is a tool that creates web pages using Twitter Bootsrap. Looks like is supposed to be a drag-and-drop type of page builder. The angle is that this saves you from figuring out how to manually code up the Boostrap code with JavaScript. I finally got around to trying out the free trial tonight.

I decided to log in with my Google ID. But it would not let me proceed to use Jetstrap until I allowed Jetstrap to view my email address and other Google account info. I reluctantly agreed. The I got to the page where I create a new screen. The place where you normally see an OK button had a button with no text on it. Umm is this a bug on the first screen? I use Internet Explorer 9. You would think this would work on this browser.

Getting back to page editing, I could not figure out how to add normal HTML onto my page. There was a strange read-only label button. Maybe that was Jetstrap's way of letting me know that I put a label on the screen? I found the generated HTML source for my page creation quickly enough. But I could not cut and paste the HTML. Apparently I need to download a zip file. Great. Not.

One good thing about the zip file Jetstrap produces is that it includes all the Bootstrap code in all the right directories for you. Another nice feature is the different views on the main Jetsrap design page. You can see what you page will look like on a mobile devide, a tablet, or a larger screen.

Jetstrap looks like it is blowing up pretty nicely. This is mainly due to being the number one link on Hacker News recently. I hear that already had 20k downloads. While the trial is free, they plan to charge monthly for usage. Intially they were thinking $10 a month. However it might be as high as $30 a month. This was a neat product to try out. However I don't see myself paying any amount of money for this right now.