GEOG 863
GIS Mashups for Geospatial Professionals

Coding Tips

PrintPrint

So far in the course, you've been encouraged to use a plain text editor like Notepad and have received little guidance on the topic of debugging code that's not producing the desired result. There are a number of tools out there that can make your job as a developer easier, and that will be the focus of this part of the lesson.

jsFiddle

jsFiddle.net is a "playground" environment for seeing code and its output side-by-side. HTML, CSS and JavaScript code is entered in separate boxes, then the output is shown in a fourth box.  Here's a quick tutorial on using jsFiddle:

  1. Go to this fiddle to see Google's Hello World example.
  2. Edit the code in some way (e.g., change the map's center coordinates), then click the Run button.  You should see your desired changes reflected in the Result window.
  3. Note the steps I took to adapt the Hello World code to jsFiddle:
    - I entered only the HTML elements found in the body of the document.
    - I removed the key parameter from the script element that references the Maps API.
    - I omitted the style tags and script tags that would otherwise be found surrounding the code in the CSS and JavaScript boxes, respectively.
    - I changed the selection in the second dropdown list under Frameworks & Extensions from onLoad to No wrap - in <body>.  This specifies that you want the code in the JavaScript box to be executed as if it was in the body of the HTML document. 

jsFiddle is often used by the folks who participate in help forums such as Stack Overflow.  If you find yourself in need of help down the road, putting your code into jsFiddle and including a link to your fiddle in your post would be a good idea. 

Note: Google used to maintain a similar environment specifically for their APIs called the Google Code Playground.  That no longer appears to exist, but I encourage you to keep your eyes open to see if they resurrect it.

Development Environments

Plain text editors like Notepad are OK for beginners getting to know web-publishing languages, but there are more advanced tools out there that make the developer's job easier. Integrated Development Environments (IDEs) are software applications that allow developers to write, test, and debug source code all in one application. IDEs also typically provide auto-completion and syntax highlighting. Examples of popular IDEs include Microsoft Visual Studio and Eclipse. Google's Code Playground can be thought of an online JavaScript IDE. However, it lacks syntax highlighting and, obviously, does not allow for editing code stored on your local file system.

There are lots of IDEs suited for web development, as a web search for "web development ide" will show you. For the purpose of continuing on through this course, I'm going to recommend Notepad ++. As its name implies, It's a step (or two) up from Notepad. My main reasons for pointing you to it are that it is free, it's easy to use, and it provides line numbers and syntax highlighting. Notepad++ is arguably not a true IDE since it's not possible to view your pages directly within the same application, but it does allow you to easily launch them in various web browsers, so I think it's a rather pointless debate.

Let's walk through a short set of steps to familiarize you with Notepad++.

  1. Download and install Notepad++.
  2. Open your lesson3.html page in Notepad++. An easy way to do this is to browse to it through your file system, right-click on it, and select Edit with Notepad++.

    The first thing you should notice is the formatting applied to your code. HTML elements are shown in blue, attributes in red, and attribute values in purple. This happens because your file has a .html extension. Keep in mind that if you create a new page from scratch, you will not see this highlighting done until you save it with a .htm or .html extension.

    Next, note the boxes just to the left of several lines in your code. These boxes appear at the beginning of blocks of code that can be logically treated as a unit.
  3. Click on the box next to the style element in the head of the document to collapse that code. The minus that had been inside the box will have changed to a plus, indicating that clicking it again will re-expand that code unit.
  4. Move your cursor down through the document until you reach the first script element (the one that sources the Maps API). You should see that the first and last lines of that element are highlighted. This highlighting can be very helpful, especially if you haven't done a good job of indenting your code logically.
  5. Continue moving the cursor down the document until you reach the line that defines the var mapOpts variable. Move the cursor to the right until you reach the opening brace. You should see that the brace is highlighted and a red line appears connecting the opening brace to its matching closing brace. The same behavior can be observed with brackets and parentheses. Given how often these characters are used in JavaScript -- and the importance of ordering them correctly -- this feature can be quite useful.

Now that we've worked with a more fully-featured source code editor, let's discuss some tips for working out the kinks in pages that aren't giving you the results you expect.

Debugging

So, what do you do when you load your page in a browser and get... nothing? Thankfully, there are tools that can help pinpoint problems in your code without having to manually search line by line. Let's have a look at a couple of broken Hello, World pages and how we can determine why they're broken.

  1. Load the first Hello World example in IE, Firefox, or Chrome. Your browser window should be blank because of an error in the page.
  2. Open the JavaScript console as follows:

    Chrome - click on the menu icon (3 stacked lines to the right of the address bar), then select More Tools > Developer Tools > Console.
    Firefox - click on the menu icon and select Developer > Web Console.
    IE - 1. From the Tools menu, select F12 developer tools (or simply hit the F12 key). 2. Click on the Console tab. 3. Reload the page.

    You should see one of the following error messages, depending on your browser:

    Chrome - Uncaught SyntaxError: Unexpected identifier; the page's name and the line of the error appear to the right of the message (hello_world_broken1.html: 18, in this case).
    Firefox - SyntaxError: missing } after property list; Line 18 is listed as the location of the error and an arrow points to the line in which the mapTypeId property is set.
    IE - Expected '}', hello_world_broken1.html, line 18, character 11.

    Each browser in its own way is reporting that it encountered something unexpected on Line 18. If this was your own page, you could have a look at that line in Notepad++ or whatever editor you are using. Let's just look at the source code in the browser in this case.
  3. View the page's source code by right-clicking anywhere on the empty page and selecting View source/View page source.

    As is sometimes the case, the problem here can be found just before the flagged line: there is no comma after the setting of the zoom property. The browsers are confused when they see spaces after the 8. They expect either a comma if there is another property to be set or a closing brace if that is the last property.
  4. Load the second Hello World example in IE, Firefox, or Chrome. Again, your browser window should be blank because of an error in the page.
  5. Using the error checking steps outlined above, you should identify the following error:
    Chrome - Uncaught SyntaxError: Unexpected token ); on Line 22
    Firefox - SyntaxError: syntax error; on Line 22
    IE - Syntax error; line 22

    Line 22 is simply a closing parenthesis. Based on its indentation, it is supposed to close the initialize() function. However, if you were to place the cursor next to the parenthesis character in Notepad++, you wouldn't see a line connecting it to the beginning of the function, as you'd expect if the code was written properly. The problem here is that the function needs to be closed using a brace, not a parenthesis.

While checking for errors in this way can often be a big help, there are likely to be times when you're unable to identify the problem in your code. Another method for pinpointing problems is to produce some output at strategic points in your code. This could be as simple as an alert() statement that confirms that code execution reached a certain point, like

alert("Finished adding overlays");

You might also use an alert() box to display the contents of a variable or the property of some object:

alert("The coords are: " + pt.lat() + ", " + pt.lng());

An alternative to using alert() in this way is to write messages to the JavaScript console. This is especially preferable when you want to diagnose a problem with a loop and would rather not have to dismiss alert() boxes repeatedly. Writing messages to the console can be done as follows:

console.log("The value of i is " + i);

There are certainly more sophisticated debugging methods and tools out there (e.g., a plugin for Firefox called Firebug). However, over years of web development, I have found the simple ones discussed above to be sufficient.

Miscellaneous coding tips

I'll end this lesson's content with a few tips that I hope will make you a bit more successful as a coder. This advice applies regardless of the kind of programming you're doing:

  • Write your code in baby steps. Start with something very simple, test it, add a small piece, test again, etc.
  • When inserting an opening brace, bracket or parenthesis, insert the matching closing character at the same time. If you wait to do that until after you've finished entering the intervening statements, you're apt to forget.
  • When the JavaScript console reports multiple errors, fix just the first error, then reload the page. One error can cause several others to appear downstream; fixing it can cause the rest to disappear.
  • As with writing in general, the best way to get past a block is often to take a break and come back to the code later. With a fresh look at your code, it may take just minutes to find a bug that you had banged your head against the wall about for hours the night before.

With that, you've finished reading all of the material associated with this lesson. For your graded assignment, you'll be asked to put many of these coding techniques into practice by developing a page that displays a few markers (and associated info windows) using a custom icon.